:root{
      /* رنگ‌های نزدیک به طرح داشبورد شما */
      --bg: #F4F7FC;
      --card: #FFFFFF;
      --stroke: #DCE6F5;
      --text: #2A2E35;
      --muted: #6B778C;

      --primary: #2ca87f;      /* سبز  */
      --primary-soft: #f4f8f6; /* پس‌زمینه آیتم فعال */
      --shadow: 0 10px 30px rgba(22, 53, 89, .10);

      --radius: 16px;
    }

    html, body { height: 100%; }

    body{
      margin: 0;
      background: var(--bg);
      color: var(--text);
        background-image: url("../images/figure/bg5-l.jpg");
  background-size: cover;        /* کل صفحه رو پر میکنه */
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
    }

    /* ✅ سنتر عمودی واقعی روی موبایل (با --vh که با JS ست میشه) */
    .auth-wrap{
      min-height: 100vh; /* fallback */
      min-height: 100dvh;
      height: calc(var(--vh, 1vh) * 100);
      display: flex;
      align-items: center;
      justify-content: center;

      /* safe-area برای iOS */
      padding:
        calc(env(safe-area-inset-top, 0px) + 16px)
        12px
        calc(env(safe-area-inset-bottom, 0px) + 16px);
    }

    .auth-card{
      width: 100%;
      max-width: 460px;
      background: var(--card);
      border: 1px solid var(--stroke);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .auth-header{
      padding: 18px 20px;
      border-bottom: 1px solid var(--stroke);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      background: linear-gradient(180deg, #fff 0%, #fbfdff 100%);
    }

    .brand{
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .brand-bubble{
      width: 42px;
      height: 42px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      background: var(--primary-soft);
      color: var(--primary);
      border: 1px solid #e5e7eb;
    }

    .brand-title{
      font-weight: 800;
      font-size: 1.05rem;
      margin: 0;
      line-height: 1.2;
    }
    .brand-sub{
      margin: 0;
      color: var(--muted);
      font-size: .92rem;
    }

    .auth-body{
      padding: 18px 20px 20px;
    }

    /* Tabs شبیه سایدبار: آیتم فعال آبی روشن */
    .nav-pills{
      background: #fff;
      border: 1px solid var(--stroke);
      border-radius: 14px;
      padding: 6px;
      gap: 6px;
    }

    .nav-pills .nav-link{
      border-radius: 12px;
      color: var(--muted);
      font-weight: 700;
      padding: .7rem .9rem;
      border: 1px solid transparent;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: .5rem;
    }
    .nav-pills .nav-link:hover{
      background: #F7FAFF;
      color: var(--text);
    }
    .nav-pills .nav-link.active{
      background: var(--primary-soft);
      color: var(--primary);
      border-color: #e5e7eb;
    }

    .form-label{
      font-weight: 700;
      color: #3A4250;
    }

    .form-control{
      border-radius: 12px;
      border: 1px solid var(--stroke);
      padding: .85rem 1rem;
    }
    .form-control:focus{
      border-color: rgba(44, 168, 127, 0.9);
      box-shadow: 0 0 0 .25rem rgba(97,166,243,.18);
    }

    .input-group-text{
      border-radius: 12px;
      border: 1px solid var(--stroke);
      background: #F7FAFF;
      color: var(--muted);
    }

    .btn-login{
      border-radius: 12px;
      padding: .9rem 1rem;
      font-weight: 800;
      background: var(--primary);
      border-color: var(--primary);
      box-shadow: 0 10px 22px rgba(97,166,243,.25);
    }
    .btn-login:hover{ filter: brightness(.97); }

    .hint{
      margin-top: 10px;
      color: var(--muted);
      font-size: .92rem;
      display: flex;
      justify-content: space-between;
      gap: 10px;
    }

    .hint a{
      color: var(--primary);
      text-decoration: none;
      font-weight: 700;
    }
    .hint a:hover{ text-decoration: underline; }

    .auth-footer{
      padding: 14px 20px;
      border-top: 1px solid var(--stroke);
      color: var(--muted);
      font-size: .9rem;
      text-align: center;
      background: #FBFDFF;
    }

    /* اگر صفحه خیلی کوتاه بود یا کیبورد بالا اومد، کارت از صفحه بیرون نزنه */
    .auth-card{
      max-height: calc((var(--vh, 1vh) * 100) - 32px);
    }
    .auth-card .auth-body{
      overflow: auto;
      max-height: calc((var(--vh, 1vh) * 100) - 140px);
    }

    .input-icon{
  position: relative;
}

.input-icon > i{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 14px; /* چون RTL */
  color: #9AA4B2;
  font-size: 1.1rem;
}

.input-icon .form-control{
  padding-right: 42px;
  padding-left: 42px; /* جا برای چشم */
  height: 48px;
  border-radius: 12px;
}

.input-icon .toggle-pass{
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #9AA4B2;
  font-size: 1.1rem;
}