/* SchoolScale — auth.css
   Login, register, billing wall. */
.auth-body{background:linear-gradient(135deg,#f5f7fa 0%,#e8eef5 100%);min-height:100vh}
.auth-shell{
  display:grid;grid-template-columns:1fr 1fr;min-height:100vh;
}
.auth-shell--reverse{grid-template-columns:1fr 1fr}

/* ── Left brand panel ───────────────────────────────── */
.auth-brand{
  background:var(--navy);color:#e2e8f0;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;padding:60px 48px;
}
.auth-brand::before{
  content:"";position:absolute;inset:auto -120px -120px auto;
  width:400px;height:400px;border-radius:50%;
  background:radial-gradient(circle,rgba(23,201,180,.25),transparent 70%);
  filter:blur(20px);
}
.auth-brand__inner{position:relative;z-index:1;max-width:520px}

/* Main logo — now sits in a white pill for visibility on navy */
.auth-logo{
  width:260px;height:auto;margin-bottom:36px;
  background:#ffffff;
  padding:18px 28px;
  border-radius:14px;
  box-shadow:0 8px 24px rgba(0,0,0,.15);
}

.auth-brand h1{
  font-size:28px;line-height:1.25;font-weight:700;color:#fff;
  letter-spacing:-.4px;margin-bottom:14px;
}
.auth-tagline{color:#94a3b8;font-size:15px;line-height:1.6;margin-bottom:36px}
.auth-features{list-style:none;display:flex;flex-direction:column;gap:14px}
.auth-features li{display:flex;align-items:flex-start;gap:12px;font-size:14px;color:#cbd5e1}
.auth-features li span{font-size:16px;line-height:1;flex-shrink:0;margin-top:2px}
.auth-brand__footer{
  position:absolute;bottom:32px;left:48px;right:48px;
  display:flex;justify-content:space-between;font-size:12px;color:#64748b;
}
.auth-brand__footer a{color:var(--teal);text-decoration:none}

/* ── Right form panel ───────────────────────────────── */
.auth-main{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:48px 32px;min-height:100vh;
}
.auth-card{
  width:100%;max-width:420px;background:var(--surface);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  padding:36px 32px;
}
.auth-card--wide{max-width:520px}
.auth-card__hd{text-align:center;margin-bottom:28px}

/* Login card logo — now bigger */
.auth-mark{
  width:110px;
  height:110px;
  margin-bottom:18px;
  object-fit:contain;
}

.auth-card h2{font-size:22px;font-weight:700;margin-bottom:6px}
.auth-card .muted{font-size:13px;color:var(--muted)}

.input-group{position:relative}
.input-group input{padding-right:44px}
.input-toggle{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  background:transparent;border:none;font-size:16px;cursor:pointer;
  padding:8px 10px;color:var(--muted);border-radius:var(--radius-sm);
}
.input-toggle:hover{background:#f1f5f9}

.btn-lg{padding:13px 18px;font-size:15px}
.btn-spinner{display:none;width:16px;height:16px;border:2px solid rgba(0,0,0,.2);border-top-color:currentColor;border-radius:50%;animation:spin .7s linear infinite}
.btn.is-loading .btn-label{display:none}
.btn.is-loading .btn-spinner{display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

.auth-links{text-align:center;margin-top:18px}
.auth-links a{color:var(--navy);font-size:13px;font-weight:600;text-decoration:none}
.auth-links a:hover{color:var(--teal)}

.auth-alt{margin-top:24px}
.auth-alt__divider{
  display:flex;align-items:center;gap:10px;margin:18px 0;
  font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;
}
.auth-alt__divider::before,
.auth-alt__divider::after{content:"";flex:1;height:1px;background:var(--border)}
.auth-alt__row{display:grid;grid-template-columns:1fr 1fr;gap:10px}

.auth-foot{
  display:flex;justify-content:center;align-items:center;gap:10px;
  margin-top:24px;font-size:12px;color:var(--muted);
}

.auth-fineprint{
  text-align:center;font-size:12px;color:var(--muted);
  margin-top:18px;line-height:1.5;
}

/* Checkboxes */
.form-row--check{margin-top:4px}
.check{display:flex;gap:10px;align-items:flex-start;cursor:pointer;font-weight:400;font-size:13px;line-height:1.5}
.check input[type="checkbox"]{
  width:auto;margin-top:2px;flex-shrink:0;
  accent-color:var(--teal);
}

/* ── Billing wall ───────────────────────────────────── */
.wall{padding:48px 24px;max-width:1200px;margin:0 auto}
.wall-hd{text-align:center;margin-bottom:40px}
.wall-logo{width:180px;height:auto;margin-bottom:20px}
.wall-hd h1{font-size:28px;font-weight:700;margin-bottom:8px;color:var(--navy)}
.wall-hd .muted{color:var(--muted)}
.wall-plans{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  max-width:1000px;margin:0 auto;
}
.plan{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:28px 24px;position:relative;transition:transform .15s, box-shadow .15s;
}
.plan:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.plan--featured{border:2px solid var(--teal);box-shadow:0 12px 40px rgba(23,201,180,.15)}
.plan-badge{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:var(--teal);color:#062a26;font-size:11px;font-weight:700;
  padding:4px 12px;border-radius:999px;text-transform:uppercase;letter-spacing:.6px;
}
.plan h3{font-size:18px;font-weight:700;margin-bottom:12px;color:var(--navy)}
.plan-price{display:flex;align-items:baseline;gap:2px;margin-bottom:18px}
.plan-symbol{font-size:18px;color:var(--navy);font-weight:700}
.plan-amount{font-size:32px;font-weight:800;color:var(--navy);letter-spacing:-1px}
.plan-period{font-size:13px;color:var(--muted);margin-left:2px}
.plan-features{list-style:none;margin-bottom:22px;display:flex;flex-direction:column;gap:10px}
.plan-features li{font-size:13px;color:#334155;line-height:1.4}

.wall-foot{text-align:center;margin-top:48px;color:var(--muted);font-size:13px}
.wall-foot a{color:var(--navy);font-weight:600;text-decoration:none}
.wall-foot a:hover{color:var(--teal)}
.wall-foot .btn{margin-top:14px}

/* ── Mobile ─────────────────────────────────────────── */
@media(max-width:900px){
  .auth-shell,.auth-shell--reverse{grid-template-columns:1fr}
  .auth-brand{padding:40px 24px;min-height:auto}
  .auth-brand h1{font-size:22px}
  .auth-brand__footer{position:static;margin-top:24px}
  .auth-logo{width:200px;padding:14px 20px;margin-bottom:20px}
  .auth-mark{width:80px;height:80px}
  .auth-main{padding:24px 16px}
  .auth-card{padding:28px 22px}
  .auth-alt__row{grid-template-columns:1fr}
  .wall-plans{grid-template-columns:1fr}
}