/* ================================================================
   Rajendra Arts Classes — Auth screens
   Palette: deep ink navy / cream paper / marigold
================================================================ */
:root{
  --paper:#F7F4EC;  --paper-deep:#EFEADC;  --card:#FFFFFF;
  --ink:#202A3C;    --ink-2:#4A566B;      --muted:#8A93A6;
  --panel:#152238;  --panel-ink:#EAF0F8;  --panel-dim:#9FB0C8;
  --line:#E0DACB;   --line-2:#D2CBB8;
  --gold:#E9A23B;   --gold-deep:#C5811C;  --gold-soft:#FBEED3;
  --red:#C04545;    --red-bg:#F9E9E7;
  --green:#2F7D51;  --green-bg:#E6F2E9;
  --radius:12px;
  --font-display:"Fraunces",Georgia,serif;
  --font-body:"Sora",system-ui,sans-serif;
  --font-dev:"Noto Serif Devanagari",serif;
}

*{margin:0;padding:0;box-sizing:border-box}
::selection{background:rgba(233,162,59,.3)}
[hidden]{display:none!important}

body.auth-body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

.auth-shell{
  display:grid;
  grid-template-columns:minmax(380px,44%) 1fr;
  min-height:100vh;
}

/* ============ Brand panel (left) ============ */
.brand-panel{
  position:relative;
  background:var(--panel);
  color:var(--panel-ink);
  padding:clamp(1.8rem,3.2vw,3rem);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.brand-panel::before{ /* subtle dot grid */
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(234,240,248,.06) 1px,transparent 1.4px);
  background-size:22px 22px;
  pointer-events:none;
}
.brand-panel::after{ /* ek bada halka ring */
  content:"";position:absolute;
  width:58vh;height:58vh;border-radius:50%;
  border:1px solid rgba(233,162,59,.14);
  right:-20vh;bottom:-22vh;pointer-events:none;
}

.brand-top{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between}
.est{font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;color:var(--panel-dim);font-weight:600}

.logo{display:flex;align-items:center;gap:.8rem}
.logo-mark{width:42px;height:42px;flex:none}
.lm-book{fill:none;stroke:var(--gold);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.lm-spine{fill:none;stroke:var(--panel-ink);stroke-width:2;stroke-linecap:round;opacity:.75}
.logo-name{display:flex;flex-direction:column;line-height:1.2}
.logo-small{font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--panel-dim);font-weight:600}
.logo-big{font-family:var(--font-display);font-style:italic;font-weight:500;font-size:1.28rem;color:#F3F6FB}

.shloka-card{
  position:relative;z-index:1;
  margin-top:clamp(1.6rem,4vh,2.8rem);
  padding:1.05rem 1.25rem;
  max-width:360px;
  border:1px solid rgba(234,240,248,.14);
  border-left:3px solid var(--gold);
  border-radius:10px;
  background:rgba(234,240,248,.04);
}
.shloka{font-family:var(--font-dev);font-size:1.3rem;font-weight:600;line-height:1.5;color:#F5E9CB}
.shloka-sub{margin-top:.35rem;font-size:.78rem;font-style:italic;color:var(--panel-dim)}

.brand-headline{
  position:relative;z-index:1;
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(2rem,3.2vw,2.9rem);
  line-height:1.12;letter-spacing:-.01em;
  margin-top:clamp(1.4rem,3.5vh,2.4rem);
  color:#F3F6FB;
}
.hl{position:relative;display:inline-block;font-style:italic;padding-right:.06em}
.hl-stroke{position:absolute;left:-2%;bottom:-.14em;width:104%;height:.32em;overflow:visible}
.hl-stroke path{
  fill:none;stroke:var(--gold);stroke-width:5;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;
  animation:draw .8s .55s cubic-bezier(.6,0,.2,1) forwards;
}
@keyframes draw{to{stroke-dashoffset:0}}
.brand-sub{
  position:relative;z-index:1;
  margin-top:1rem;color:var(--panel-dim);
  font-size:.95rem;line-height:1.65;max-width:36ch;
}
.brand-sub strong{color:var(--panel-ink);font-weight:600}

.subject-tags{
  position:relative;z-index:1;
  margin-top:clamp(1.4rem,3.5vh,2.2rem);
  display:flex;flex-wrap:wrap;gap:.5rem;max-width:400px;
}
.tag{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.5rem .85rem;border-radius:99px;
  border:1px solid rgba(234,240,248,.16);
  background:rgba(234,240,248,.05);
  font-size:.78rem;font-weight:500;color:var(--panel-ink);
}
.tag i{color:var(--gold);font-size:1rem}

.brand-stats{
  position:relative;z-index:1;
  margin-top:auto;padding-top:clamp(1.5rem,4vh,2.4rem);
  display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--panel-dim);font-weight:600;
}
.brand-stats i{width:20px;height:1px;background:rgba(234,240,248,.25)}

.brand-top,.shloka-card,.brand-headline,.brand-sub,.subject-tags,.brand-stats{
  animation:rise .6s cubic-bezier(.2,.7,.3,1) both;
}
.brand-headline{animation-delay:.08s}.brand-sub{animation-delay:.12s}
.shloka-card{animation-delay:.05s}.subject-tags{animation-delay:.18s}.brand-stats{animation-delay:.24s}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ============ Form panel (right) ============ */
.form-panel{
  display:flex;align-items:center;justify-content:center;
  padding:clamp(1.8rem,3.5vw,3.5rem);
}
.form-inner{width:100%;max-width:520px;animation:rise .55s cubic-bezier(.2,.7,.3,1) both}

.eyebrow{
  display:flex;align-items:center;gap:.6rem;
  font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-deep);font-weight:700;
}
.eyebrow::before{content:"";width:24px;height:2px;background:var(--gold)}

.page-title{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.8rem,3vw,2.3rem);
  margin-top:.7rem;letter-spacing:-.01em;
}
.form-sub{margin-top:.5rem;color:var(--ink-2);font-size:.93rem;line-height:1.6}

form{margin-top:1.6rem;display:flex;flex-direction:column;gap:1.05rem}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}

.field label{
  display:block;margin-bottom:.45rem;
  font-size:.68rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-2);
}
.label-hint{font-weight:500;letter-spacing:0;text-transform:none;color:var(--muted)}

.control{position:relative;display:flex;align-items:center}
.control>i:first-child{
  position:absolute;left:.95rem;color:var(--muted);
  font-size:1.05rem;pointer-events:none;transition:color .2s;
}
.control:focus-within>i:first-child{color:var(--gold-deep)}

.control input,.control select{
  width:100%;height:50px;padding:0 1rem 0 2.8rem;
  font:inherit;font-size:.94rem;color:var(--ink);
  background:var(--card);
  border:1px solid var(--line-2);border-radius:var(--radius);
  outline:none;
  transition:border-color .2s,box-shadow .2s;
}
.control input::placeholder{color:#A9B0BE}
.control input:hover,.control select:hover{border-color:#C4BDA9}
.control input:focus,.control select:focus{
  border-color:var(--gold-deep);
  box-shadow:0 0 0 4px rgba(233,162,59,.18);
}
.has-peek{padding-right:3rem}

.control select{appearance:none;cursor:pointer;padding-right:2.6rem}
.select-caret{position:absolute;right:.95rem;color:var(--muted);pointer-events:none;font-size:1rem}

.peek{
  position:absolute;right:.5rem;width:34px;height:34px;
  display:grid;place-items:center;
  border:0;background:transparent;border-radius:8px;
  color:var(--muted);font-size:1.1rem;cursor:pointer;
  transition:color .2s,background .2s;
}
.peek:hover{color:var(--ink);background:var(--paper-deep)}

/* ---- Class segmented selector (sliding pill) ---- */
.seg{
  position:relative;display:grid;
  grid-template-columns:repeat(4,1fr);
  background:var(--paper-deep);
  border:1px solid var(--line);border-radius:12px;
  padding:4px;
}
.seg-ind{
  position:absolute;top:4px;left:4px;
  height:calc(100% - 8px);
  width:calc((100% - 8px)/4);
  background:var(--card);border-radius:9px;
  box-shadow:0 2px 8px rgba(32,42,60,.14),0 0 0 1px var(--line);
  transform:translateX(calc(var(--i,0)*100%));
  transition:transform .35s cubic-bezier(.3,1.3,.4,1);
}
.seg-opt{position:relative;z-index:1}
.seg-opt input{position:absolute;opacity:0;pointer-events:none}
.seg-opt span{
  display:flex;align-items:center;justify-content:center;
  height:42px;border-radius:9px;
  font-size:.95rem;font-weight:600;color:var(--muted);
  cursor:pointer;user-select:none;transition:color .2s;
}
.seg-opt span sup{font-size:.6em;margin-left:1px}
.seg-opt input:checked+span{color:var(--ink)}
.seg-opt input:focus-visible+span{box-shadow:inset 0 0 0 2px var(--gold)}

/* ---- Subject chips ---- */
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip{animation:pop .3s ease both}
@keyframes pop{from{opacity:0;transform:translateY(4px) scale(.96)}to{opacity:1;transform:none}}
.chip-face{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.55rem .85rem;border-radius:99px;
  background:var(--card);border:1px solid var(--line-2);
  font-size:.82rem;font-weight:500;color:var(--ink-2);
  cursor:pointer;user-select:none;
  transition:border-color .2s,background .2s,color .2s;
}
.chip-face i{font-size:1rem;color:var(--muted);transition:color .2s}
.chip:hover .chip-face{border-color:var(--gold);color:var(--ink)}
.chip-face:hover i{color:var(--gold-deep)}
.chip input:checked+.chip-face{background:var(--gold-soft);border-color:var(--gold);color:#7A4E0D}
.chip input:checked+.chip-face i{color:var(--gold-deep)}
.chip input:focus-visible+.chip-face{box-shadow:0 0 0 3px rgba(233,162,59,.28)}

/* ---- Strength meter ---- */
.strength{display:flex;align-items:center;gap:.6rem;margin-top:.5rem}
.strength-bar{flex:1;height:5px;border-radius:99px;background:var(--paper-deep);overflow:hidden}
.strength-bar span{display:block;height:100%;width:0;border-radius:99px;transition:width .3s ease,background-color .3s}
.strength-label{min-width:56px;text-align:right;font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* ---- Errors ---- */
.field.has-error .control input,
.field.has-error .control select{border-color:var(--red);box-shadow:0 0 0 4px rgba(192,69,69,.12)}
.field-error{
  display:flex;align-items:center;gap:.4rem;
  margin-top:.45rem;font-size:.8rem;font-weight:500;color:var(--red);
}

/* ---- Checkbox ---- */
.check{display:flex;align-items:flex-start;gap:.65rem;cursor:pointer;position:relative}
.check input{position:absolute;opacity:0}
.check .box{
  flex:none;width:19px;height:19px;margin-top:2px;
  position:relative;border:1.5px solid var(--line-2);
  border-radius:6px;background:var(--card);transition:all .2s;
}
.check:hover .box{border-color:var(--gold-deep)}
.check input:checked+.box{background:var(--gold-deep);border-color:var(--gold-deep)}
.check input:checked+.box::after{
  content:"";position:absolute;left:5.5px;top:2px;width:4.5px;height:9px;
  border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg);
}
.check input:focus-visible+.box{box-shadow:0 0 0 3px rgba(233,162,59,.3)}
.check-text{font-size:.85rem;color:var(--ink-2);line-height:1.5}

/* ---- Banners ---- */
.banner{
  display:flex;align-items:flex-start;gap:.6rem;
  margin-top:1.4rem;padding:.85rem 1rem;border-radius:10px;
  font-size:.87rem;line-height:1.5;
}
.banner i{font-size:1.15rem;flex:none;margin-top:.05rem}
.banner-error{background:var(--red-bg);color:var(--red);border:1px solid #EBCBC7}
.banner-success{background:var(--green-bg);color:var(--green);border:1px solid #C4DECB}

/* ---- Button ---- */
.btn{
  position:relative;margin-top:.3rem;
  display:flex;align-items:center;justify-content:center;gap:.55rem;
  width:100%;height:54px;
  background:var(--panel);color:#F3F6FB;
  font:inherit;font-weight:600;font-size:.98rem;
  border:none;border-radius:var(--radius);cursor:pointer;
  transition:background .25s,transform .15s,box-shadow .25s;
}
.btn i{transition:transform .25s}
.btn:hover{background:#0F1929;transform:translateY(-1px);box-shadow:0 12px 26px -14px rgba(21,34,56,.6)}
.btn:hover i{transform:translateX(4px)}
.btn:active{transform:translateY(0)}
.btn.is-loading{color:transparent;pointer-events:none}
.btn.is-loading::after{
  content:"";position:absolute;width:20px;height:20px;border-radius:50%;
  border:2.5px solid rgba(243,246,251,.35);border-top-color:#F3F6FB;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- Switch link ---- */
.switch-auth{margin-top:1.5rem;text-align:center;font-size:.9rem;color:var(--ink-2)}
.switch-auth a{
  color:var(--gold-deep);font-weight:600;text-decoration:none;
  border-bottom:1.5px solid rgba(197,129,28,.4);padding-bottom:1px;
  transition:border-color .2s;
}
.switch-auth a:hover{border-color:var(--gold-deep)}

/* ---- Misc ---- */
.form-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.linklike{
  background:none;border:none;cursor:pointer;padding:0;
  font:inherit;font-size:.85rem;font-weight:600;color:var(--gold-deep);
  border-bottom:1.5px solid rgba(197,129,28,.4);
}
.linklike:hover{border-color:var(--gold-deep)}
.forgot-note{
  display:flex;align-items:flex-start;gap:.55rem;
  padding:.7rem .85rem;border-radius:10px;
  background:var(--paper-deep);border:1px dashed var(--line-2);
  font-size:.82rem;color:var(--ink-2);line-height:1.5;
}
.forgot-note i{color:var(--gold-deep);font-size:1rem;margin-top:1px;flex:none}
.reveal{animation:rise .35s ease both}
.shake{animation:shake .45s cubic-bezier(.36,.07,.19,.97) both}
@keyframes shake{
  10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}
  30%,50%,70%{transform:translateX(-4px)}40%,60%{transform:translateX(4px)}
}

/* ============ Responsive ============ */
@media (max-width:900px){
  .auth-shell{grid-template-columns:1fr}
  .brand-panel{padding:1.6rem 1.4rem}
  .shloka-card{display:none}
  .brand-headline{margin-top:1.2rem;font-size:1.6rem}
  .brand-sub{font-size:.88rem}
  .subject-tags{margin-top:1rem}
  .brand-stats{padding-top:1.2rem}
  .form-panel{padding:1.8rem 1.2rem 2.6rem;align-items:flex-start}
  .form-inner{max-width:520px;margin:0 auto}
  .field-row{grid-template-columns:1fr}
}