/* ============================================================
   Sublime LMS — Login page
   ============================================================ */
.lo-page { min-height:100vh; display:grid; grid-template-columns:1.05fr .95fr; background:var(--bg); }
.lo-main { display:flex; flex-direction:column; min-height:100vh; }
.lo-top { padding:26px 40px; }
.lo-brand { display:inline-flex; align-items:center; height:30px; text-decoration:none; }
.lo-brand img { height:30px; width:auto; display:block; }
.lo-center { flex:1; display:flex; align-items:center; justify-content:center; padding:24px 40px 56px; }
.lo-card { width:100%; max-width:404px; }
.lo-eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--color-violet-700); margin-bottom:14px; }
.lo-eyebrow .dot { width:6px; height:6px; border-radius:999px; background:var(--color-violet-600); box-shadow:0 0 0 4px rgba(109,40,217,.16); }
.lo-card h1 { font-family:var(--font-display); font-weight:800; font-size:32px; letter-spacing:-0.025em; color:var(--fg); margin:0 0 8px; }
.lo-card .sub { font-size:15px; color:var(--fg-body); margin:0 0 28px; }
.lo-oauth { display:flex; flex-direction:column; gap:10px; }
.lo-oauth button { display:flex; align-items:center; justify-content:center; gap:10px; height:50px; border-radius:var(--radius-md); border:1px solid var(--border); background:#fff; font-family:var(--font-sans); font-size:14px; font-weight:600; color:var(--fg); cursor:pointer; transition:background .2s,border-color .2s,box-shadow .2s,transform .1s; }
.lo-oauth button:hover { background:var(--color-mist); border-color:var(--color-slate-300); box-shadow:var(--shadow-sm); }
.lo-oauth button:active { transform:translateY(1px); }
.lo-oauth svg { width:18px; height:18px; }
.lo-divider { display:flex; align-items:center; gap:12px; margin:22px 0; font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-faint); }
.lo-divider::before, .lo-divider::after { content:''; flex:1; height:1px; background:var(--border); }
.lo-field { display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.lo-label { display:flex; align-items:center; justify-content:space-between; font-size:13px; font-weight:600; color:var(--fg); }
.lo-label a { font-size:12.5px; font-weight:600; color:var(--color-violet-700); text-decoration:none; }
.lo-label a:hover { text-decoration:underline; }
.lo-input-wrap { position:relative; }
.lo-input { width:100%; height:48px; padding:0 14px; font-family:var(--font-sans); font-size:14px; color:var(--fg); background:#fff; border:1px solid var(--border); border-radius:var(--radius-md); outline:none; transition:border-color .2s,box-shadow .2s; }
.lo-input.pw { padding-right:44px; }
.lo-input:hover { border-color:var(--color-slate-300); }
.lo-input:focus { border-color:var(--color-violet-500); box-shadow:var(--focus-ring); }
.lo-input.err { border-color:var(--color-rose-500); box-shadow:0 0 0 4px rgba(244,63,94,.12); }
.lo-input::placeholder { color:var(--fg-faint); }
.lo-eye { position:absolute; top:50%; right:6px; transform:translateY(-50%); width:36px; height:36px; border-radius:8px; background:transparent; border:none; color:var(--fg-muted); display:grid; place-items:center; cursor:pointer; transition:background .2s,color .2s; }
.lo-eye:hover { background:var(--color-mist); color:var(--color-violet-700); }
.lo-eye i { width:16px; height:16px; }
.lo-err-msg { font-size:12px; color:var(--color-rose-600); min-height:0; }
.lo-remember { display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--fg-body); margin-bottom:20px; cursor:pointer; user-select:none; }
.lo-remember input { width:17px; height:17px; accent-color:var(--color-violet-600); cursor:pointer; }
.lo-submit { width:100%; height:50px; justify-content:center; font-size:15px; }
.lo-foot { font-size:14px; color:var(--fg-body); text-align:center; margin:24px 0 0; }
.lo-foot a { color:var(--color-violet-700); font-weight:600; text-decoration:none; }
.lo-foot a:hover { text-decoration:underline; }
.lo-legal { font-size:12px; color:var(--fg-muted); text-align:center; margin:32px 0 0; line-height:1.5; }
.lo-legal a { color:var(--fg-body); text-decoration:underline; }

/* right brand panel */
.lo-aside { position:relative; overflow:hidden; background:var(--gradient-dark-intel); display:flex; flex-direction:column; justify-content:center; padding:56px; isolation:isolate; }
.lo-aside::before { content:''; position:absolute; inset:0; z-index:-1; background:radial-gradient(60% 60% at 75% 18%, rgba(139,92,246,.42), transparent 65%), radial-gradient(50% 50% at 12% 92%, rgba(20,184,166,.26), transparent 62%); }
.lo-aside .badge { display:inline-flex; align-items:center; gap:8px; align-self:flex-start; padding:7px 13px; border-radius:999px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); color:#fff; font-size:12px; font-weight:600; backdrop-filter:blur(8px); margin-bottom:26px; }
.lo-aside .badge i { width:14px; height:14px; color:#A78BFA; }
.lo-aside h2 { font-family:var(--font-display); font-weight:800; font-size:clamp(28px,3vw,38px); line-height:1.15; letter-spacing:-0.025em; color:#fff; margin:0 0 16px; text-wrap:balance; }
.lo-aside h2 .g { background:linear-gradient(120deg,#C4B5FD,#5EEAD4); -webkit-background-clip:text; background-clip:text; color:transparent; }
.lo-aside p { font-size:16px; line-height:1.6; color:rgba(255,255,255,.74); max-width:380px; margin:0 0 32px; }
.lo-aside ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:14px; }
.lo-aside li { display:flex; align-items:center; gap:12px; color:rgba(255,255,255,.9); font-size:14.5px; }
.lo-aside li i { width:18px; height:18px; color:#6EE7B7; flex-shrink:0; }
/* soft drifting orbs */
.lo-orb { position:absolute; border-radius:50%; filter:blur(46px); opacity:.5; z-index:-1; }
.lo-orb.o1 { width:300px; height:300px; background:radial-gradient(circle,#A78BFA,transparent 70%); top:-60px; right:-40px; animation:lo-drift 15s ease-in-out infinite; }
.lo-orb.o2 { width:260px; height:260px; background:radial-gradient(circle,#2DD4BF,transparent 70%); bottom:-50px; left:-30px; animation:lo-drift 18s ease-in-out infinite reverse; }
@keyframes lo-drift { 0%,100%{transform:translate(0,0)} 50%{transform:translate(26px,-22px)} }

.lo-done { display:none; text-align:center; }
.lo-done.show { display:block; animation:lo-fade .5s var(--ease-out); }
@keyframes lo-fade { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
.lo-done .chk { width:74px; height:74px; border-radius:999px; background:var(--color-emerald-50); display:grid; place-items:center; margin:0 auto 18px; }
.lo-done .chk i { width:34px; height:34px; color:var(--color-emerald-600); }
.lo-done h2 { font-family:var(--font-display); font-weight:700; font-size:24px; letter-spacing:-0.015em; color:var(--fg); margin:0 0 8px; }
.lo-done p { font-size:14.5px; color:var(--fg-body); margin:0; }

@media (max-width:900px){
  .lo-page { grid-template-columns:1fr; }
  .lo-aside { display:none; }
}
@media (max-width:600px){
  .lo-top { padding:22px 22px; }
  .lo-center { padding:12px 22px 44px; }
}
@media (prefers-reduced-motion:reduce){ .lo-orb { animation:none !important; } }