:root {
  --bg-1:#07111f;
  --bg-2:#0a1626;
  --bg-3:#182013;
  --text:#f6f8fb;
  --muted:#93a4ba;
  --line:rgba(255,255,255,.12);
  --field:rgba(2,10,20,.48);
  --accent:#f8a31a;
  --accent-2:#ffc14a;
  --success:#49d59b;
}

*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 12% 15%,rgba(34,81,145,.20),transparent 34%),
    radial-gradient(circle at 91% 82%,rgba(248,163,26,.12),transparent 31%),
    linear-gradient(128deg,var(--bg-1) 0%,var(--bg-2) 58%,var(--bg-3) 100%);
  background-attachment:fixed;
}
button,input{font:inherit}
button{color:inherit}

.page{
  min-height:100vh;
  max-width:1440px;
  margin:auto;
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(420px,.88fr);
}

.intro,.auth{min-height:100vh;display:flex;align-items:center}
.intro{padding:clamp(42px,6vw,90px)}
.auth{padding:40px clamp(28px,5vw,76px)}
.intro-inner{width:min(680px,100%)}
.auth-inner{width:min(470px,100%);margin:auto}

.eyebrow{font-size:12px;font-weight:800;letter-spacing:.16em;color:#aebcd0;margin-bottom:24px}
.eyebrow:before{content:"";display:inline-block;width:28px;height:1px;background:var(--accent);vertical-align:middle;margin-right:12px;box-shadow:0 0 12px rgba(248,163,26,.65)}
.intro h1{margin:0;font-size:clamp(54px,6.3vw,88px);line-height:.96;letter-spacing:-.055em;font-weight:800}
.intro h1 span{color:var(--accent)}
.intro p{max-width:590px;margin:26px 0 0;color:#a8b5c7;font-size:clamp(16px,1.25vw,19px);line-height:1.68}

.egg-stage{height:310px;position:relative;display:grid;place-items:center;margin-top:12px;overflow:visible}
.egg-aura{position:absolute;width:230px;height:230px;border-radius:50%;background:radial-gradient(circle,rgba(255,214,124,.18),rgba(248,163,26,.05) 54%,transparent 72%);filter:blur(18px);animation:aura 6s ease-in-out infinite}
.egg-animation{width:min(360px,85%);height:auto;overflow:visible}
.ground-shadow{fill:rgba(0,0,0,.28);filter:url(#blurShadow);transform-origin:center;animation:shadow 6s ease-in-out infinite}
.egg-group{transform-origin:180px 220px;animation:eggDrop 6s cubic-bezier(.22,.78,.25,1) infinite}
.shell-top,.shell-bottom{filter:drop-shadow(0 10px 14px rgba(0,0,0,.11))}
.shell-top{transform-origin:180px 194px;animation:topOpen 6s ease-in-out infinite}
.shell-bottom{transform-origin:180px 199px;animation:bottomOpen 6s ease-in-out infinite}
.egg-white{fill:rgba(255,250,239,.91);opacity:0;transform-origin:181px 220px;animation:whiteIn 6s ease-in-out infinite}
.egg-yolk{opacity:0;transform-origin:181px 211px;filter:drop-shadow(0 11px 14px rgba(225,132,8,.22));animation:yolkIn 6s cubic-bezier(.2,.8,.2,1) infinite}

@keyframes eggDrop{
  0%,5%{transform:translateY(-38px) scale(.97);opacity:0}
  14%{transform:translateY(3px) scale(1.01);opacity:1}
  18%,34%{transform:none;opacity:1}
  76%{opacity:1}
  90%,100%{transform:translateY(6px) scale(.99);opacity:0}
}
@keyframes topOpen{
  0%,37%{transform:none}
  50%,76%{transform:translate(-18px,-14px) rotate(-8deg)}
  90%,100%{transform:translate(-18px,-14px) rotate(-8deg)}
}
@keyframes bottomOpen{
  0%,37%{transform:none}
  50%,76%{transform:translate(16px,8px) rotate(7deg)}
  90%,100%{transform:translate(16px,8px) rotate(7deg)}
}
@keyframes whiteIn{
  0%,43%{opacity:0;transform:scale(.55,.35)}
  54%{opacity:.88;transform:scale(1.03,.91)}
  62%,76%{opacity:.78;transform:scale(1,.88)}
  90%,100%{opacity:0;transform:scale(.93,.82)}
}
@keyframes yolkIn{
  0%,45%{opacity:0;transform:translateY(-8px) scale(.55)}
  56%{opacity:1;transform:translateY(5px) scale(1.03)}
  64%,76%{opacity:1;transform:translateY(7px) scale(1)}
  90%,100%{opacity:0;transform:translateY(10px) scale(.94)}
}
@keyframes shadow{
  0%,7%{opacity:0;transform:scaleX(.5)}
  18%,36%{opacity:.85;transform:scaleX(1)}
  50%,76%{opacity:.7;transform:scaleX(1.05)}
  90%,100%{opacity:0;transform:scaleX(.7)}
}
@keyframes aura{
  0%,10%{opacity:.2;transform:scale(.84)}
  28%,74%{opacity:.85;transform:scale(1)}
  90%,100%{opacity:.18;transform:scale(.88)}
}

.brand{display:flex;align-items:center;gap:15px;margin-bottom:32px}
.logo-wrap{width:64px;height:64px;border-radius:14px;overflow:hidden;flex:0 0 64px;box-shadow:0 12px 34px rgba(0,0,0,.28),0 0 0 1px rgba(255,255,255,.12);background:rgba(15,23,42,0.6);display:flex;align-items:center;justify-content:center}
.logo-wrap img{width:100%;height:100%;display:block;object-fit:cover;border-radius:12px}
.brand-title{font-size:26px;font-weight:800;letter-spacing:-.035em}
.brand-subtitle{margin-top:4px;color:#91a3ba;font-size:12.5px}

.secure{display:inline-flex;align-items:center;gap:8px;font-size:10px;font-weight:800;letter-spacing:.05em;color:#c9f5e1;margin-bottom:15px}
.secure span{width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 0 5px rgba(73,213,155,.12)}
.auth h2{font-size:34px;letter-spacing:-.045em;margin:0 0 8px}
.lead{margin:0 0 28px;color:#9bacc0;font-size:14px;line-height:1.55}

form label{display:block;font-size:12px;font-weight:700;color:#dce4ef;margin-bottom:8px}
.label-row{display:flex;justify-content:space-between;align-items:center;margin-top:18px}
.label-row label{margin:0 0 8px}
.link-btn{border:0;background:none;padding:0 0 8px;cursor:pointer;color:#91a4bd;font-size:11.5px;font-weight:600}
.link-btn:hover{color:#fff}
.field{position:relative}
.field-icon{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:#8295ad;font-size:13px;font-weight:800;pointer-events:none}
.field input{width:100%;height:54px;border:1px solid var(--line);border-radius:16px;background:var(--field);color:#fff;outline:none;padding:0 90px 0 40px;transition:.18s ease}
.field input::placeholder{color:#7890ab}
.field input:focus{border-color:rgba(248,163,26,.5);box-shadow:0 0 0 4px rgba(248,163,26,.07);background:rgba(2,10,20,.62)}
.show-btn{position:absolute;right:10px;top:50%;transform:translateY(-50%);border:0;border-radius:10px;background:rgba(255,255,255,.05);padding:8px 11px;cursor:pointer;color:#dce4ef}

.remember{display:flex;align-items:center;gap:10px!important;margin:16px 0 22px!important;color:#9fb0c4!important;font-weight:600!important;cursor:pointer}
.remember input{display:none}
.check{width:18px;height:18px;border:1px solid rgba(255,255,255,.18);border-radius:6px;display:grid;place-items:center}
.check:after{content:"";width:8px;height:8px;border-radius:3px;background:var(--accent);transform:scale(0);transition:.15s ease}
.remember input:checked+.check:after{transform:scale(1)}

.sign-in{width:100%;height:56px;border:0;border-radius:16px;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#111823;font-weight:800;display:flex;align-items:center;justify-content:center;gap:11px;cursor:pointer;box-shadow:0 16px 34px rgba(248,163,26,.18);transition:.16s ease}
.sign-in:hover{transform:translateY(-1px);box-shadow:0 18px 40px rgba(248,163,26,.25)}
.sign-in:disabled{opacity:.8;cursor:wait}
.form-message{min-height:18px;margin-top:8px;color:#ffb1b1;font-size:11.5px}

.demo-title{display:flex;align-items:center;gap:12px;margin:14px 0 12px;color:#71849c;font-size:10px;font-weight:800;letter-spacing:.13em}
.demo-title:before,.demo-title:after{content:"";height:1px;flex:1;background:rgba(255,255,255,.09)}
.demo-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.demo{min-width:0;border:0;background:transparent;padding:10px 6px;border-radius:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;color:#dce4ee}
.demo:hover{background:rgba(255,255,255,.035)}
.demo b{font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
footer.auth-footer{text-align:center;color:#62758e;font-size:11px;margin-top:24px}

.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,16px);opacity:0;pointer-events:none;padding:10px 14px;border-radius:12px;background:#10251d;color:#dff8eb;border:1px solid rgba(73,213,155,.18);font-size:12px;transition:.2s ease;z-index:20}.toast.show{opacity:1;transform:translate(-50%,0)}

@media(max-width:900px){
  .page{grid-template-columns:1fr}
  .intro{display:none}
  .auth{padding:28px 20px;min-height:100vh}
  .auth-inner{width:min(540px,100%)}
}
@media(max-width:520px){
  .auth{padding:22px 16px}
  .brand{margin-bottom:28px}
  .logo-wrap{width:56px;height:56px;flex-basis:56px;border-radius:12px}
  .logo-wrap img{border-radius:10px}
  .brand-title{font-size:23px}
  .brand-subtitle{font-size:11px}
  .auth h2{font-size:30px}
  .demo-row{grid-template-columns:1fr}
  .demo{justify-content:flex-start;padding:10px 2px}
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}