/* ============================================================
   login.css — صفحه ورود (Navy / Teal)
   ============================================================ */

.login{
  position:fixed;inset:0;z-index:300;
  background:
    radial-gradient(900px 500px at 80% 0%, rgba(20,184,166,.35) 0%, transparent 55%),
    radial-gradient(700px 500px at 0% 100%, rgba(10,37,64,.9) 0%, transparent 60%),
    linear-gradient(160deg, #0A2540 0%, #061A30 55%, #041020 100%);
  display:grid;place-items:center;
  padding:20px;overflow:auto;
}
.login.hidden{display:none}

.logincard{
  width:min(460px,100%);
  background:rgba(255,255,255,.99);
  border-radius:28px;
  padding:34px 28px;
  text-align:center;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06) inset;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  animation:loginIn .35s var(--ease-spring);
}
@keyframes loginIn{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}}

.loginlogo{
  width:76px;height:76px;border-radius:24px;
  background:linear-gradient(135deg, var(--p) 0%, #1E4A6E 55%, var(--teal-600) 100%);
  color:#fff;
  display:grid;place-items:center;margin:0 auto 20px;
  box-shadow:0 16px 36px -12px rgba(10,37,64,.7), 0 0 0 3px var(--gold);
  position:relative;overflow:hidden;
}
.loginlogo::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(160deg, rgba(255,255,255,.3), transparent 50%);
}
.loginlogo .material-symbols-rounded{
  font-size:38px;
  font-variation-settings:'FILL' 1,'wght' 500;
  position:relative;z-index:1;
}

.logincard h1{font-size:20px;margin:0 0 9px;font-weight:800;letter-spacing:-.4px}
.logincard>p{font-size:12.5px;color:var(--muted);line-height:2;margin:0 0 22px}

.auth-tabs{
  display:flex;gap:6px;background:var(--s2);
  border-radius:16px;padding:5px;margin-bottom:22px;
}
.auth-tab{
  flex:1;border:0;background:transparent;
  color:var(--muted);font-size:13px;font-weight:700;
  padding:11px;border-radius:12px;
  transition:background var(--t) var(--ease), color var(--t) var(--ease), box-shadow var(--t) var(--ease);
  cursor:pointer;font-family:inherit;
}
.auth-tab.active{
  background:#fff;color:var(--p);box-shadow:var(--sh-sm);
}

.brokerbox{
  display:flex;align-items:center;gap:12px;
  border:1.5px solid var(--line);
  border-radius:18px;padding:15px;
  text-align:right;cursor:pointer;background:var(--s1);
  transition:border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.brokerbox.on{
  border:2px solid var(--teal);
  background:linear-gradient(135deg,#F0FDFA,#E6FFFB);
  box-shadow:0 0 0 4px rgba(20,184,166,.13);
}
.brokerbox input{width:21px;height:21px;accent-color:var(--teal);flex:none}
.brokerbox b{font-size:12.5px;display:block;font-weight:700}
.brokerbox small{font-size:10.5px;color:var(--muted);display:block;margin-top:3px;line-height:1.7}

.wide{width:100%;margin-top:6px;min-height:52px;font-size:13.5px}
.centermeta{text-align:center;font-size:10.5px;color:var(--muted);margin-top:18px;line-height:1.9}