/* ============================================================
   auth.css — shared split-panel shell for login/register/forgot-password.
   Extracted verbatim from portal/login.php's inline <style> block so every
   auth page in app/ matches portal/'s visual design exactly — same tokens,
   same layout, same field/button styling. Page-specific copy (left-panel
   headline, feature list) stays in each view; this file is only the shell.
   ============================================================ */
@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}

/* ── PAGE SHELL ── */
body{display:flex;flex-direction:column}
.page{flex:1;display:grid;grid-template-columns:1fr 480px;min-height:100vh}

/* ── LEFT PANEL ── */
.left{background:linear-gradient(145deg,#14120f 0%,#2b2822 55%,#7d6528 100%);display:flex;flex-direction:column;justify-content:space-between;padding:48px 52px;position:relative;overflow:hidden}
.left::before{content:'';position:absolute;top:-120px;right:-80px;width:420px;height:420px;background:radial-gradient(circle,rgba(255,255,255,.12),transparent 70%);pointer-events:none}
.left::after{content:'';position:absolute;bottom:-100px;left:-60px;width:340px;height:340px;background:radial-gradient(circle,rgba(255,255,255,.07),transparent 70%);pointer-events:none}
.left-logo{display:flex;align-items:center;gap:10px;position:relative;z-index:1}
.left-logo img{height:36px;filter:brightness(0) invert(1)}
.left-logo-text{color:#fff;font-size:20px;font-weight:800;letter-spacing:-.2px}
.left-content{position:relative;z-index:1;animation:fadeUp .5s var(--ease) both}
.left-tag{font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:14px}
.left-h{font-size:34px;font-weight:800;color:#fff;letter-spacing:-.6px;line-height:1.15;margin-bottom:16px}
.left-h span{color:rgba(255,255,255,.65)}
.left-p{font-size:14px;color:rgba(255,255,255,.72);line-height:1.7;max-width:360px;margin-bottom:32px}
.feat-list{display:flex;flex-direction:column;gap:12px}
.feat{display:flex;align-items:center;gap:12px;color:rgba(255,255,255,.85);font-size:13.5px;font-weight:500}
.feat-dot{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center;font-size:12px;color:#fff;flex-shrink:0}
.left-footer{color:rgba(255,255,255,.45);font-size:11.5px;position:relative;z-index:1}

/* ── RIGHT PANEL ── */
.right{background:var(--surface);display:flex;flex-direction:column;justify-content:center;padding:48px 52px;position:relative}
.right-top{position:absolute;top:20px;right:24px;display:flex;align-items:center;gap:8px}
.dm-toggle{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--txt-3);cursor:pointer;padding:5px 10px;border-radius:var(--r-full);border:1px solid var(--border);background:var(--bg);transition:all .13s}
.dm-toggle:hover{color:var(--txt-2);border-color:var(--txt-3)}
.dm-switch{position:relative;width:30px;height:17px;flex-shrink:0}
.dm-switch input{opacity:0;width:0;height:0;position:absolute}
.dm-slider{position:absolute;inset:0;background:var(--border);border-radius:var(--r-full);cursor:pointer;transition:background .2s}
.dm-slider::before{content:'';position:absolute;width:11px;height:11px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .2s;box-shadow:0 1px 3px rgb(0 0 0/.2)}
.dm-switch input:checked+.dm-slider{background:var(--brand)}
.dm-switch input:checked+.dm-slider::before{transform:translateX(13px)}

.form-wrap{animation:fadeUp .4s .1s var(--ease) both;max-width:360px;width:100%}
.form-logo{display:none}
.form-head{margin-bottom:28px}
.form-title{font-size:24px;font-weight:800;color:var(--txt-1);letter-spacing:-.4px;margin-bottom:5px}
.form-sub{font-size:13.5px;color:var(--txt-3);line-height:1.5}

/* Error / success banners */
.err-banner{display:flex;align-items:center;gap:9px;padding:11px 14px;background:var(--c-red-bg);border:1.5px solid var(--c-red-b);border-radius:var(--r-md);color:var(--c-red);font-size:13px;margin-bottom:18px;animation:shake .35s var(--ease)}
.err-banner i{flex-shrink:0;font-size:14px}
.ok-banner{display:flex;align-items:center;gap:9px;padding:11px 14px;background:var(--c-green-bg);border:1.5px solid var(--c-green-b);border-radius:var(--r-md);color:var(--c-green);font-size:13px;margin-bottom:18px}
.ok-banner i{flex-shrink:0;font-size:14px}

/* Fields */
.field{margin-bottom:16px}
.field-label{display:block;font-size:11.5px;font-weight:700;letter-spacing:.3px;color:var(--txt-2);margin-bottom:6px}
.field-wrap{position:relative}
.field-input{width:100%;height:44px;padding:0 14px 0 42px;border:1.5px solid var(--border);border-radius:var(--r-md);font-size:13.5px;font-family:var(--font);color:var(--txt-1);background:var(--bg);outline:none;transition:border-color .15s,box-shadow .15s}
[data-theme="dark"] .field-input{background:var(--bg);color:var(--txt-1)}
.field-input::placeholder{color:var(--txt-3)}
.field-input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-glow);background:var(--surface)}
.field-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--txt-3);font-size:13px;pointer-events:none;transition:color .15s}
.field-input:focus~.field-icon,.field-wrap:focus-within .field-icon{color:var(--brand)}
.field-eye{position:absolute;right:12px;top:50%;transform:translateY(-50%);cursor:pointer;color:var(--txt-3);font-size:13px;background:none;border:none;padding:0;line-height:1;transition:color .13s}
.field-eye:hover{color:var(--brand)}
.field-input.has-eye{padding-right:40px}
.field-err{font-size:11.5px;color:var(--c-red);margin-top:5px;display:none}
.field-input.invalid{border-color:var(--c-red);box-shadow:0 0 0 3px rgba(220,38,38,.12)}

/* Options row */
.opt-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.check-label{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--txt-2);cursor:pointer;user-select:none}
.check-label input[type=checkbox]{width:15px;height:15px;accent-color:var(--brand);cursor:pointer}
.forgot-link{font-size:12.5px;color:var(--brand);text-decoration:none;font-weight:600}
.forgot-link:hover{text-decoration:underline}

/* Submit */
.submit-btn{width:100%;height:46px;background:var(--brand);color:#fff;border:none;border-radius:var(--r-md);font-size:14px;font-weight:700;font-family:var(--font);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:background .15s,box-shadow .15s,transform .1s;letter-spacing:.1px}
.submit-btn:hover{background:var(--brand-d);box-shadow:0 4px 16px var(--brand-glow);transform:translateY(-1px)}
.submit-btn:active{transform:translateY(0)}
.submit-btn.loading{pointer-events:none;opacity:.8}
.submit-btn .spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;display:none}
.submit-btn.loading .spinner{display:block}
.submit-btn.loading .btn-text{display:none}

/* Divider & register link */
.or-row{display:flex;align-items:center;gap:10px;margin:20px 0;color:var(--txt-3);font-size:12px}
.or-row::before,.or-row::after{content:'';flex:1;height:1px;background:var(--border)}
.register-row{text-align:center;font-size:13px;color:var(--txt-3);margin-top:24px}
.register-row a{color:var(--brand);font-weight:700;text-decoration:none}
.register-row a:hover{text-decoration:underline}

.right-footer{position:absolute;bottom:20px;left:52px;right:52px;text-align:center;font-size:11.5px;color:var(--txt-3)}
.right-footer a{color:var(--txt-3);text-decoration:none}
.right-footer a:hover{color:var(--brand)}

/* ── RESPONSIVE ── */
@media(max-width:900px){
  .page{grid-template-columns:1fr}
  .left{display:none}
  .right{padding:40px 32px;justify-content:flex-start;padding-top:80px}
  .form-wrap{max-width:100%}
  .form-logo{display:flex;align-items:center;gap:8px;margin-bottom:28px}
  .form-logo img{height:30px}
  .right-footer{left:32px;right:32px}
}
@media(max-width:480px){
  .right{padding:24px 20px;padding-top:72px}
  .right-footer{left:20px;right:20px}
}