/* ===== Core Themes ===== */
:root{
  --page-bg:#f7f9fb;
  --text:#111827;
  --muted:#6b7280;
  --card:#ffffff;
  --card-border:#e5e7eb;
  --shadow: 0 1px 1px rgba(0,0,0,.02), 0 6px 16px rgba(0,0,0,.06);
  --brand:#0b57d0;
}
:root[data-theme="dark"]{
  --page-bg:#0b1220;
  --text:#e5e7eb;
  --muted:#a3a3a3;
  --card:#0f172a;
  --card-border:#1f2a44;
  --shadow:none;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--page-bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
html[lang="ar"] body{font-family:Cairo,Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
a{color:inherit;text-decoration:none}
.muted{color:var(--muted)}

/* ===== Auth Layout ===== */
.auth{min-height:100dvh;display:grid;place-items:center;padding:24px}
.auth-card{width:min(96vw, 440px);background:var(--card);border:1px solid var(--card-border);border-radius:16px;box-shadow:var(--shadow);padding:24px}
.brand{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.brand-badge{width:32px;height:32px;border-radius:8px;background:linear-gradient(120deg,#0ea5e9,#22c55e);box-shadow:var(--shadow)}
.brand strong{font-size:18px}
.auth-title{font-weight:800;margin:6px 0 2px 0}
.auth-sub{font-size:13px;color:var(--muted);margin-bottom:16px}
.auth-controls{display:flex;align-items:center;gap:8px;margin-left:auto}
.sel,.theme-btn{border:1px solid var(--card-border);background:var(--card);color:inherit;border-radius:999px;padding:6px 10px;cursor:pointer}
.field{display:flex;align-items:center;gap:8px;border:1px solid var(--card-border);border-radius:12px;padding:10px 12px;background:var(--card)}
.field + .field{margin-top:10px}
.field .mi{font-family:"Material Symbols Rounded";font-variation-settings:'FILL' 0,'wght' 500,'GRAD' 0,'opsz' 24;font-size:20px}
.field input{flex:1;border:0;outline:0;background:transparent;color:var(--text)}
.field button.eye{border:0;background:transparent;cursor:pointer;padding:0;display:flex;align-items:center}
.row{display:flex;align-items:center;justify-content:space-between;margin:10px 0 14px 0;gap:10px;flex-wrap:wrap}
.row .left{display:flex;align-items:center;gap:8px}
.row .right a{font-size:13px;color:#0b57d0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--card-border);background:var(--card);border-radius:12px;padding:10px 12px;cursor:pointer;width:100%;font-weight:700}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.google{border-color:#e5e7eb}
.btn + .btn{margin-top:10px}
.auth-footer{margin-top:14px;font-size:13px;text-align:center;color:var(--muted)}
.auth-footer a{color:#0b57d0;font-weight:600}
.auth-topbar{display:flex;align-items:center;gap:12px;justify-content:space-between;margin-bottom:10px}
.auth-topbar .left{display:flex;align-items:center;gap:10px}
.auth-topbar .right{display:flex;align-items:center;gap:8px}
html[dir="rtl"] .field{direction:row-reverse}
html[dir="rtl"] .brand{flex-direction:row-reverse}
html[dir="rtl"] .auth-topbar .left{direction:ltr}
html[dir="rtl"] .auth-topbar .right{margin: unset;}
@media (max-width:480px){.auth-card{padding:20px;width: 100%;}}