:root{
  --bg:#03060a;
  --panel:#080d13;
  --panel2:#0b1118;
  --gold:#c9964a;
  --gold2:#e5c27f;
  --gold3:#f2dfb7;
  --muted:#9d917e;
  --line:rgba(201,150,74,.38);
  --line2:rgba(176,190,201,.18);
  --danger:#d58d70;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{
  min-height:100svh;
  display:grid;
  place-items:center;
  padding:24px;
  overflow-x:hidden;
  font-family:Georgia,"Times New Roman",serif;
  color:var(--gold3);
  background:
    radial-gradient(700px 500px at 50% 42%,rgba(24,39,53,.45),transparent 70%),
    radial-gradient(500px 400px at 50% 100%,rgba(122,75,29,.12),transparent 72%),
    linear-gradient(145deg,#020407,#071019 52%,#030609);
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 20% 15%,rgba(255,255,255,.025) 0 1px,transparent 1.5px),
    radial-gradient(circle at 78% 25%,rgba(255,255,255,.018) 0 1px,transparent 1.5px);
  background-size:130px 130px,190px 190px;
}
*{scrollbar-width:thin;scrollbar-color:#70502b transparent}
button,input{font:inherit}

.panel{
  position:relative;
  width:min(100%,570px);
  padding:42px clamp(24px,5vw,54px) 34px;
  border:1px solid rgba(180,196,208,.25);
  border-radius:26px;
  background:
    linear-gradient(145deg,rgba(12,21,30,.96),rgba(4,10,16,.97)),
    var(--panel);
  border-color:rgba(220,171,79,.72);
  box-shadow:
    0 35px 100px rgba(0,0,0,.7),
    0 8px 30px rgba(0,0,0,.45),
    0 0 0 1px rgba(231,190,104,.14),
    0 0 34px rgba(198,143,55,.14),
    inset 0 1px 0 rgba(255,240,195,.10),
    inset 0 0 70px rgba(0,0,0,.42);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  overflow:hidden;
  animation:panelIn .7s cubic-bezier(.2,.8,.25,1) both;
}
.panel:before{
  content:"";
  position:absolute;
  inset:9px;
  border:1px solid rgba(216,169,82,.32);
  border-radius:19px;
  box-shadow:inset 0 0 0 1px rgba(255,220,145,.035);
  pointer-events:none;
}
.panel:after{
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  left:50%;
  top:-130px;
  transform:translateX(-50%);
  background:radial-gradient(circle,rgba(201,150,74,.13),transparent 68%);
  pointer-events:none;
}
.panel .gold-corner{
  position:absolute;
  width:34px;
  height:34px;
  border-color:#d7aa58;
  border-style:solid;
  z-index:3;
  pointer-events:none;
  filter:drop-shadow(0 0 6px rgba(215,170,88,.28));
}
.panel .gold-corner.tl{left:18px;top:18px;border-width:1px 0 0 1px;border-radius:9px 0 0 0}
.panel .gold-corner.tr{right:18px;top:18px;border-width:1px 1px 0 0;border-radius:0 9px 0 0}
.panel .gold-corner.bl{left:18px;bottom:18px;border-width:0 0 1px 1px;border-radius:0 0 0 9px}
.panel .gold-corner.br{right:18px;bottom:18px;border-width:0 1px 1px 0;border-radius:0 0 9px 0}
.panel .border-glow{
  position:absolute;
  inset:0;
  border-radius:26px;
  padding:1px;
  pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0 32%,rgba(240,196,105,.9) 40%,transparent 48% 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:.55;
  animation:borderRotate 7s linear infinite;
}




/* =========================================================
   KNOWLEDGE HUNGER — ABSTRACT BACKGROUND
   No images / no external assets
========================================================= */
.knowledge-bg{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  opacity:.9;
}
.knowledge-bg:before{
  content:"";
  position:absolute;
  left:50%;
  top:52%;
  width:min(72vw,900px);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:
    radial-gradient(circle,
      rgba(201,150,74,.055) 0 2%,
      rgba(201,150,74,.025) 13%,
      transparent 46%);
  filter:blur(1px);
}
.knowledge-pulse{
  position:absolute;
  left:50%;
  top:51%;
  width:9px;
  height:9px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:#e4b75e;
  box-shadow:
    0 0 12px #e4b75e,
    0 0 45px rgba(228,183,94,.55),
    0 0 100px rgba(228,183,94,.18);
  animation:knowledgePulse 3.8s ease-in-out infinite;
}
.knowledge-orbit{
  position:absolute;
  left:50%;
  top:51%;
  width:min(50vw,680px);
  height:min(20vw,270px);
  transform:translate(-50%,-50%) rotate(-18deg);
  border:1px solid rgba(201,150,74,.10);
  border-radius:50%;
  box-shadow:0 0 25px rgba(201,150,74,.025) inset;
}
.orbit-2{
  width:min(70vw,980px);
  height:min(28vw,380px);
  transform:translate(-50%,-50%) rotate(32deg);
  border-color:rgba(170,188,205,.065);
}
.knowledge-word{
  position:absolute;
  color:rgba(222,188,119,.12);
  font-family:Arial,sans-serif;
  font-size:clamp(9px,1vw,13px);
  letter-spacing:5px;
  font-weight:600;
  white-space:nowrap;
  text-shadow:0 0 18px rgba(201,150,74,.12);
  animation:knowledgeDrift 9s ease-in-out infinite alternate;
}
.word-1{left:7%;top:22%;transform:rotate(-10deg)}
.word-2{right:9%;top:30%;transform:rotate(8deg);animation-delay:2s}
.word-3{left:13%;bottom:20%;transform:rotate(6deg);animation-delay:4s}
.knowledge-formula{
  position:absolute;
  color:rgba(218,181,105,.14);
  font-size:clamp(18px,2vw,29px);
  font-style:italic;
  white-space:nowrap;
  filter:blur(.15px);
  animation:formulaDrift 11s ease-in-out infinite alternate;
}
.f1{left:7%;top:39%}
.f2{right:7%;top:18%;animation-delay:2s}
.f3{left:14%;bottom:31%;animation-delay:4s}
.f4{right:12%;bottom:22%;animation-delay:6s}
.f5{right:26%;top:11%;font-size:38px;animation-delay:1s}

@keyframes knowledgePulse{
  0%,100%{transform:translate(-50%,-50%) scale(.8);opacity:.55}
  50%{transform:translate(-50%,-50%) scale(1.45);opacity:1}
}
@keyframes knowledgeDrift{
  from{opacity:.08;transform:translate3d(0,0,0) rotate(-10deg)}
  to{opacity:.2;transform:translate3d(16px,-12px,0) rotate(-6deg)}
}
@keyframes formulaDrift{
  from{transform:translate3d(0,8px,0);opacity:.08}
  to{transform:translate3d(-12px,-14px,0);opacity:.18}
}

/* GOLD PARTICLES — pure JavaScript generated */
.particles{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.particle{
  position:absolute;
  width:var(--size);
  height:var(--size);
  border-radius:50%;
  background:radial-gradient(circle,#f6d99a 0 28%,#d49b43 48%,transparent 72%);
  box-shadow:0 0 7px rgba(224,177,88,.55);
  opacity:var(--opacity);
  animation:particleFloat var(--duration) linear var(--delay) infinite;
}
.particle-line{
  position:absolute;
  width:1px;
  height:90px;
  transform-origin:top;
  background:linear-gradient(transparent,rgba(213,166,80,.18),transparent);
  opacity:.35;
  animation:lineDrift 12s ease-in-out infinite alternate;
}
@keyframes particleFloat{
  0%{transform:translate3d(0,18vh,0) scale(.65);opacity:0}
  12%{opacity:var(--opacity)}
  75%{opacity:calc(var(--opacity)*.65)}
  100%{transform:translate3d(var(--drift),-115vh,0) scale(1.15);opacity:0}
}
@keyframes lineDrift{
  from{transform:translateY(0) rotate(18deg)}
  to{transform:translateY(-40px) rotate(25deg)}
}
@keyframes borderRotate{to{transform:rotate(360deg)}}

/* BRAND */
.brand{text-align:center;position:relative;z-index:1}
.logo{
  position:relative;
  width:76px;
  height:62px;
  margin:0 auto 12px;
  filter:drop-shadow(0 5px 14px rgba(201,150,74,.2));
}
.logo .page{
  position:absolute;
  top:12px;
  width:35px;
  height:42px;
  background:linear-gradient(120deg,#f0d8aa,#c79b59 72%,#8d622e);
  box-shadow:inset 0 0 0 1px rgba(92,58,21,.3),0 5px 14px rgba(0,0,0,.3);
}
.logo .left{
  left:4px;
  border-radius:8px 2px 3px 11px;
  transform:rotate(-6deg) skewY(3deg);
}
.logo .right{
  right:4px;
  border-radius:2px 8px 11px 3px;
  transform:rotate(6deg) skewY(-3deg);
}
.logo .spine{
  position:absolute;
  z-index:2;
  left:50%;
  top:15px;
  width:3px;
  height:39px;
  transform:translateX(-50%);
  background:#69461f;
}
.logo .star{
  position:absolute;
  z-index:3;
  left:50%;
  top:-5px;
  transform:translateX(-50%);
  color:#edc77d;
  font-size:17px;
  text-shadow:0 0 12px rgba(237,199,125,.9);
  animation:pulse 3s ease-in-out infinite;
}
.logo .rim{
  position:absolute;
  left:7px;
  right:7px;
  bottom:1px;
  height:10px;
  border:2px solid #a97939;
  border-top:0;
  border-radius:0 0 15px 15px;
}

.brand-name{
  color:#e9d09e;
  font-size:clamp(42px,8vw,58px);
  font-weight:400;
  letter-spacing:1px;
  line-height:1;
  text-shadow:0 2px 20px rgba(229,194,127,.16);
}
.brand-tag{
  margin-top:7px;
  color:#c9aa76;
  font-size:clamp(14px,3vw,17px);
  font-style:italic;
  letter-spacing:2px;
}

/* DIVIDER */
.divider{
  display:flex;
  align-items:center;
  gap:12px;
  margin:25px 0 23px;
}
.divider:before,.divider:after{
  content:"";
  flex:1;
  height:1px;
}
.divider:before{background:linear-gradient(90deg,transparent,#76532c)}
.divider:after{background:linear-gradient(90deg,#76532c,transparent)}
.diamond{
  width:7px;
  height:7px;
  background:#c9964a;
  transform:rotate(45deg);
  box-shadow:0 0 10px rgba(201,150,74,.55);
}

/* HEADING */
.login-head{text-align:center}
.login-title{
  color:#f0dfbb;
  font-size:clamp(28px,5vw,36px);
  font-weight:400;
  letter-spacing:.5px;
}
.login-sub{
  margin-top:8px;
  color:var(--muted);
  font-family:Georgia,"Times New Roman",serif;
  font-size:15px;
  line-height:1.5;
}

/* FORM */
.login-form{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  gap:17px;
  margin-top:27px;
}
.field-group{position:relative}
.field{position:relative}
.control{
  width:100%;
  height:62px;
  padding:0 52px;
  border:1px solid var(--line2);
  border-radius:9px;
  outline:none;
  background:rgba(2,8,14,.72);
  color:#f0dfbb;
  font-size:16px;
  letter-spacing:.25px;
  transition:border-color .25s,box-shadow .25s,background .25s;
}
.control::placeholder{color:#817969}
.control:hover{border-color:rgba(176,190,201,.32)}
.control:focus{
  border-color:rgba(201,150,74,.72);
  background:rgba(4,12,20,.88);
  box-shadow:
    0 0 0 3px rgba(201,150,74,.11),
    inset 0 0 18px rgba(0,0,0,.35);
}
.field-icon{
  position:absolute;
  left:17px;
  top:50%;
  transform:translateY(-50%);
  width:22px;
  height:22px;
  color:#d0a25e;
  pointer-events:none;
}
.eye{
  position:absolute;
  right:7px;
  top:8px;
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:8px;
  color:#d0a25e;
  background:transparent;
  cursor:pointer;
  transition:.2s;
}
.eye:hover{background:rgba(201,150,74,.08);color:#efd09a}
.eye svg{width:21px;height:21px}
.eye .off{display:none}
.eye.show .on{display:none}
.eye.show .off{display:block}

.error{
  margin:7px 2px 0;
  color:var(--danger);
  font-size:13px;
  line-height:1.4;
}
.invalid .control{border-color:rgba(213,141,112,.65)}

.form-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  flex-wrap:wrap;
}
.remember{
  display:flex;
  align-items:center;
  gap:9px;
  color:#b9ad9a;
  font-size:14px;
  cursor:pointer;
  user-select:none;
}
.remember input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.checkbox{
  width:18px;
  height:18px;
  display:grid;
  place-items:center;
  border:1.5px solid #b9955b;
  border-radius:4px;
  background:rgba(0,0,0,.25);
}
.checkbox:after{
  content:"";
  width:9px;
  height:5px;
  border-left:2px solid #1a1209;
  border-bottom:2px solid #1a1209;
  transform:rotate(-45deg) scale(0);
  transition:.15s;
}
.remember input:checked + .checkbox{
  background:#c9964a;
  border-color:#e0b66f;
}
.remember input:checked + .checkbox:after{
  transform:rotate(-45deg) scale(1);
}
.forgot{
  color:#c6a467;
  font-size:14px;
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.forgot:hover{
  color:#efd09a;
  border-color:#b98945;
}

.signin{
  position:relative;
  height:64px;
  margin-top:5px;
  border:1px solid #d39a3d;
  border-radius:10px;
  color:#f4dfba;
  background:
    linear-gradient(180deg,rgba(131,82,31,.45),rgba(72,43,17,.38));
  box-shadow:
    0 0 9px rgba(201,150,74,.48),
    inset 0 0 24px rgba(201,150,74,.08);
  font-size:22px;
  letter-spacing:1.5px;
  cursor:pointer;
  overflow:hidden;
  transition:.25s;
}
.signin:before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:-45%;
  width:35%;
  transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,240,205,.17),transparent);
}
.signin:hover{
  background:linear-gradient(180deg,rgba(151,98,38,.52),rgba(85,51,19,.42));
  box-shadow:
    0 0 20px rgba(201,150,74,.65),
    0 0 40px rgba(201,150,74,.16),
    inset 0 0 25px rgba(201,150,74,.12);
}
.signin:hover:before{animation:sweep 1s ease}
.signin:active{transform:translateY(1px)}
.signin:disabled{opacity:.75;cursor:progress}

.status{
  padding:12px 14px;
  border:1px solid rgba(213,141,112,.42);
  border-radius:9px;
  background:rgba(70,32,23,.28);
  color:#dca68b;
  font-size:13px;
  line-height:1.5;
}

.security{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  margin-top:27px;
  padding-top:19px;
  border-top:1px solid rgba(201,150,74,.14);
  color:#8e8475;
  font-size:13px;
  text-align:center;
}
.security svg{width:19px;height:19px;color:#c49655;flex:none}

@keyframes panelIn{
  from{opacity:0;transform:translateY(20px) scale(.985)}
  to{opacity:1;transform:none}
}
@keyframes pulse{
  0%,100%{opacity:1;transform:translateX(-50%) scale(1)}
  50%{opacity:.55;transform:translateX(-50%) scale(.85)}
}
@keyframes sweep{to{left:120%}}

@media(max-width:600px){
  body{display:block;padding:0}
  .panel{
    width:100%;
    min-height:100svh;
    border:0;
    border-radius:0;
    padding:
      max(30px,env(safe-area-inset-top))
      20px
      max(26px,env(safe-area-inset-bottom));
  }
  .panel:before{inset:7px;border-radius:14px}
  .brand-name{font-size:40px}
  .brand-tag{font-size:13px;letter-spacing:1.5px}
  .divider{margin:22px 0}
  .login-title{font-size:28px}
  .login-sub{font-size:14px}
  .control{height:58px;font-size:15px}
  .signin{height:59px;font-size:20px}
}

@media(max-width:380px){
  .panel{padding-left:15px;padding-right:15px}
  .logo{transform:scale(.88)}
  .brand-name{font-size:35px}
  .brand-tag{font-size:12.5px}
  .login-title{font-size:25px}
  .login-sub{font-size:13px}
  .login-form{margin-top:22px;gap:14px}
  .form-row{font-size:13px}
}

@media(max-width:600px){
  .knowledge-word{font-size:8px;letter-spacing:3px}
  .knowledge-formula{font-size:16px}
  .orbit-1{width:90vw;height:34vw}
  .orbit-2{width:120vw;height:48vw}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}