/* LiveSoko Admin — authentication screens.
   Loaded after admin.css; only the split-screen auth shell lives here. */

body.auth{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  min-height:100vh; background:var(--panel); padding-bottom:46px;
}
@media (max-width:900px){
  body.auth{grid-template-columns:1fr}
  body.auth .brandside{display:none}
}

/* Left brand panel */
.brandside{
  background:var(--sidebar); color:#fff; padding:40px;
  display:flex; flex-direction:column; position:relative; overflow:hidden;
}
.brandside::after{
  content:""; position:absolute; right:-25%; top:-15%; width:78%; aspect-ratio:1;
  background:radial-gradient(circle, rgba(255,95,53,.34), transparent 62%); pointer-events:none;
}
.brandside > *{position:relative; z-index:2}
.brandside .logo svg{height:26px; width:auto}
.brandside .mid{margin:auto 0; max-width:420px}
.brandside h2{font-size:1.9rem; letter-spacing:-.03em; line-height:1.15; margin-bottom:14px}
.brandside p{color:rgba(255,255,255,.6); font-size:.92rem; line-height:1.6}
.sec-list{list-style:none; padding:0; margin:28px 0 0; display:grid; gap:13px}
.sec-list li{display:flex; gap:11px; align-items:flex-start; font-size:.85rem; color:rgba(255,255,255,.75)}
.sec-list svg{width:17px; height:17px; color:var(--brand); flex:none; margin-top:1px}
.brandside footer{font-size:.75rem; color:rgba(255,255,255,.36)}

/* Right form panel */
.formside{display:flex; flex-direction:column; padding:28px 32px; overflow-y:auto}
.formside .top{display:flex; align-items:center; gap:10px}
.formside .env{
  font-family:var(--ff-mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
  padding:3px 7px; border-radius:4px; background:var(--warn-bg); color:var(--warn); font-weight:700;
}
.formside .mid{margin:auto; width:100%; max-width:396px; padding-block:32px}
.formside > footer{font-size:.75rem; color:var(--text-3); text-align:center}
.formside > footer a{color:var(--text-2)}

.screen{animation:authIn .28s ease both}
@keyframes authIn{from{opacity:0; transform:translateY(7px)}to{opacity:1;transform:none}}

.s-head{margin-bottom:24px}
.s-head .s-icon{
  width:42px; height:42px; border-radius:var(--r); display:grid; place-items:center;
  background:var(--brand-050); color:var(--brand); margin-bottom:16px;
}
.s-head .s-icon svg{width:21px; height:21px}
.s-head h1{font-size:1.45rem; margin-bottom:7px}
.s-head p{color:var(--text-2); font-size:.88rem; line-height:1.55}
.s-head p b{color:var(--text); font-weight:600}

/* Password field */
.pw-wrap{position:relative}
.pw-wrap .input{padding-right:40px}
.pw-toggle{
  position:absolute; right:6px; top:50%; transform:translateY(-50%); width:30px; height:30px;
  display:grid; place-items:center; border-radius:var(--r-xs); color:var(--text-3);
}
.pw-toggle:hover{background:var(--muted-bg); color:var(--text)}
.pw-toggle svg{width:16px; height:16px}
.pw-toggle .off{display:none}
.pw-wrap.shown .pw-toggle .on{display:none}
.pw-wrap.shown .pw-toggle .off{display:block}

/* Strength meter */
.meter{display:flex; gap:4px; margin-top:8px}
.meter i{height:3px; flex:1; border-radius:2px; background:var(--line); transition:background .2s}
.meter.s1 i:nth-child(1){background:var(--danger)}
.meter.s2 i:nth-child(-n+2){background:var(--warn)}
.meter.s3 i:nth-child(-n+3){background:var(--info)}
.meter.s4 i{background:var(--ok)}
.meter-text{font-size:.74rem; margin-top:6px; color:var(--text-3)}
.rules{list-style:none; padding:0; margin:10px 0 0; display:grid; gap:5px}
.rules li{display:flex; align-items:center; gap:7px; font-size:.76rem; color:var(--text-3)}
.rules li svg{width:13px; height:13px; flex:none}
.rules li.pass{color:var(--ok)}

/* OTP */
.otp-label{font-size:.78rem; font-weight:600; color:var(--text-2); display:block; margin-bottom:8px}

/* Misc */
.alt-link{text-align:center; margin-top:18px; font-size:.83rem; color:var(--text-2)}
.alt-link a{color:var(--brand); font-weight:600}
.alt-link a:hover{text-decoration:underline}
.divider{display:flex; align-items:center; gap:12px; margin:20px 0; color:var(--text-3); font-size:.75rem}
.divider::before,.divider::after{content:""; flex:1; height:1px; background:var(--line)}
.center{text-align:center}
.spaced{letter-spacing:.1em}

.qr-box{
  width:168px; height:168px; margin:0 auto; background:#fff; border:1px solid var(--line);
  border-radius:var(--r); padding:10px; display:grid; place-items:center;
}
.qr-box svg{width:100%; height:100%}
.secret{
  font-family:var(--ff-mono); font-size:.82rem; letter-spacing:.08em; text-align:center;
  background:var(--muted-bg); padding:10px; border-radius:var(--r-sm); margin-top:14px;
  display:flex; align-items:center; justify-content:center; gap:10px; word-break:break-all;
}
.secret button{color:var(--text-3); display:grid; place-items:center}
.secret button:hover{color:var(--brand)}
.secret svg{width:15px; height:15px}

.codes{
  display:grid; grid-template-columns:repeat(2,1fr); gap:8px; font-family:var(--ff-mono);
  font-size:.86rem; background:var(--muted-bg); padding:14px; border-radius:var(--r-sm); margin-bottom:14px;
}
.codes span{padding:5px 8px; background:var(--panel); border-radius:var(--r-xs); text-align:center; letter-spacing:.04em}

.who-card{
  display:flex; align-items:center; gap:12px; padding:12px; border:1px solid var(--line);
  border-radius:var(--r); background:var(--panel-2); margin-bottom:20px;
}
.who-card .avatar{width:38px; height:38px; font-size:.85rem}
.who-card .avatar.muted{background:var(--text-3)}
.who-card b{display:block; font-size:.88rem}
.who-card span{font-size:.76rem; color:var(--text-3)}

.countdown{font-family:var(--ff-mono); font-weight:700}

/* Demo bar — remove in production */
.demo-bar{
  position:fixed; bottom:0; left:0; right:0; z-index:200; background:var(--sidebar); color:#fff;
  padding:8px 12px; display:flex; align-items:center; gap:8px; overflow-x:auto; scrollbar-width:none;
  box-shadow:0 -4px 20px rgba(0,0,0,.2);
}
.demo-bar::-webkit-scrollbar{display:none}
.demo-bar .dl{
  font-family:var(--ff-mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.4); flex:none; padding-right:6px;
}
.demo-bar a{
  flex:none; padding:5px 10px; border-radius:var(--r-pill); font-size:.74rem; font-weight:600;
  color:rgba(255,255,255,.66); border:1px solid rgba(255,255,255,.14); white-space:nowrap;
}
.demo-bar a:hover{background:rgba(255,255,255,.08); color:#fff}
.demo-bar a.on{background:var(--brand); color:#fff; border-color:var(--brand)}