/* AstroNums — Login CSS */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,600&family=Inter:wght@300;400;500;600&display=swap');

:root {
  --maroon-dk:  #4a1010;
  --maroon:     #6b1c1c;
  --maroon-md:  #8b2e2e;
  --saffron:    #c96b2a;
  --saffron-lt: #e07e3a;
  --gold:       #c9922a;
  --beige:      #f4efe6;
  --beige-lt:   #faf7f2;
  --text-dark:  #1a1008;
  --text-mid:   #5c4a3a;
  --text-light: #9a8472;
  --border:     rgba(92,74,58,0.15);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

html,body{height:100%;overflow:hidden;}

body{
  font-family:'Inter',sans-serif;
  background:var(--beige);
}

.auth-page{
  display:flex;
  height:100vh;
  width:100%;
}

/* ── LEFT PANEL ──────────────────────────────── */
.left-panel{
  width:50%;
  background:
    radial-gradient(ellipse 70% 50% at 30% 20%, rgba(180,60,20,0.5) 0%,transparent 60%),
    radial-gradient(ellipse 50% 70% at 70% 80%, rgba(80,10,10,0.6) 0%,transparent 55%),
    linear-gradient(160deg, #6b1c1c 0%, #3a0a0a 40%, #1e0505 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
}

.left-panel::before{
  content:'';
  position:absolute;inset:0;
  background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23c9922a' fill-opacity='0.03'%3E%3Ccircle cx='30' cy='30' r='20'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.left-content{
  position:relative;z-index:1;
  text-align:center;
  padding:40px;
}

.mandala-wrapper{
  width:160px;height:160px;
  margin:0 auto 40px;
  animation:rotateMandala 40s linear infinite;
  opacity:0.7;
}

.mandala{width:100%;height:100%;}

@keyframes rotateMandala{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}

.left-text h1{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:clamp(32px,3.5vw,48px);
  font-weight:500;
  color:#fff;
  line-height:1.2;
  margin-bottom:20px;
}

.left-text h1 em{
  display:block;
  font-style:italic;
  color:var(--gold);
  font-weight:400;
}

.tagline{
  font-family:'Inter',sans-serif;
  font-size:11px;
  font-weight:500;
  letter-spacing:3px;
  color:rgba(255,255,255,0.45);
  line-height:1.8;
}

/* ── RIGHT PANEL ─────────────────────────────── */
.right-panel{
  width:50%;
  background:var(--beige-lt);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow-y:auto;
}

.form-container{
  width:100%;
  max-width:420px;
  padding:40px 48px;
}

/* TABS */
.tab-bar{
  display:flex;
  gap:0;
  margin-bottom:40px;
  border-bottom:1px solid var(--border);
}

.tab-item{
  flex:1;
  background:none;
  border:none;
  padding:14px 0;
  font-family:'Inter',sans-serif;
  font-size:12px;
  font-weight:500;
  letter-spacing:2px;
  color:var(--text-light);
  cursor:pointer;
  position:relative;
  transition:color 0.2s;
}

.tab-item::after{
  content:'';
  position:absolute;
  bottom:-1px;left:0;right:0;
  height:2px;
  background:var(--saffron);
  transform:scaleX(0);
  transition:transform 0.25s ease;
}

.tab-item.active{
  color:var(--saffron);
}

.tab-item.active::after{
  transform:scaleX(1);
}

/* FORM CONTENT */
.tab-content{display:none;}
.tab-content.active{display:block;animation:fadeIn 0.3s ease both;}

@keyframes fadeIn{
  from{opacity:0;transform:translateY(8px);}
  to{opacity:1;transform:translateY(0);}
}

.form-title{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:32px;
  font-weight:500;
  color:var(--text-dark);
  margin-bottom:6px;
}

.form-sub{
  font-size:13px;
  color:var(--text-light);
  margin-bottom:32px;
  font-weight:300;
}

/* ALERT */
.alert-msg{
  font-size:13px;
  padding:0;
  margin-bottom:0;
  border-radius:6px;
  transition:all 0.2s;
  overflow:hidden;
  max-height:0;
}
.alert-msg.show{
  padding:10px 14px;
  margin-bottom:18px;
  max-height:80px;
}
.alert-msg.error{
  background:rgba(139,46,46,0.08);
  border:1px solid rgba(139,46,46,0.2);
  color:var(--maroon-md);
}
.alert-msg.success{
  background:rgba(34,100,34,0.08);
  border:1px solid rgba(34,100,34,0.2);
  color:#1a5c1a;
}

/* FIELDS */
.field-group{
  margin-bottom:24px;
}

.field-group label{
  display:block;
  font-size:10px;
  font-weight:600;
  letter-spacing:2px;
  color:var(--text-light);
  margin-bottom:8px;
}

.field-group input{
  width:100%;
  background:transparent;
  border:none;
  border-bottom:1px solid var(--border);
  padding:8px 0 10px;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:17px;
  color:var(--text-dark);
  outline:none;
  transition:border-color 0.2s;
}

.field-group input::placeholder{
  color:rgba(154,132,114,0.5);
  font-style:italic;
  font-size:15px;
}

.field-group input:focus{
  border-bottom-color:var(--saffron);
}

.field-row-right{
  text-align:right;
  margin-bottom:28px;
  margin-top:-10px;
}

.link-small{
  font-size:12px;
  color:var(--text-light);
  cursor:pointer;
  transition:color 0.2s;
}
.link-small:hover{color:var(--saffron);}

/* BUTTON */
.btn-portal{
  width:100%;
  padding:16px;
  background:var(--saffron);
  border:none;
  border-radius:50px;
  font-family:'Inter',sans-serif;
  font-size:12px;
  font-weight:600;
  letter-spacing:3px;
  color:#fff;
  cursor:pointer;
  transition:all 0.25s ease;
  box-shadow:0 4px 20px rgba(201,107,42,0.3);
  margin-bottom:20px;
}

.btn-portal:hover{
  background:var(--saffron-lt);
  transform:translateY(-1px);
  box-shadow:0 6px 28px rgba(201,107,42,0.4);
}

.btn-portal:active{transform:translateY(0);}

.btn-portal.loading{
  opacity:0.7;
  pointer-events:none;
}

/* SWITCH HINT */
.switch-hint{
  text-align:center;
  font-size:13px;
  color:var(--text-light);
}

.link-accent{
  color:var(--saffron);
  cursor:pointer;
  font-weight:500;
  transition:color 0.2s;
}
.link-accent:hover{color:var(--maroon-md);}

/* RESPONSIVE */
@media(max-width:768px){
  .auth-page{flex-direction:column;overflow:auto;}
  html,body{height:auto;overflow:auto;}
  .left-panel{width:100%;padding:48px 24px;min-height:240px;}
  .right-panel{width:100%;padding:32px 0;}
  .form-container{padding:32px 28px;}
  .mandala-wrapper{width:100px;height:100px;margin-bottom:24px;}
  .left-text h1{font-size:28px;}
}
.field-wrapper{position:relative;}
.eye-btn{
  position:absolute;
  right:0;bottom:10px;
  background:none;border:none;
  cursor:pointer;
  color:var(--text-light);
  font-size:16px;
  padding:0;
  transition:color 0.2s;
}
.eye-btn:hover{color:var(--saffron);}