/* Page shell */
    body{ background: var(--bg); color: var(--text); }
    .login-shell{
      max-width: 1100px;
      width: 100%;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 20px 60px rgba(0,0,0,.15);
      background: var(--surface);
    }
    .pane-promo{
      background: linear-gradient(135deg, var(--pri-100, #ffe4e6), var(--pri-400, #fb7185), var(--pri-600, #e11d48));
      color:#2b0f16;
      padding: clamp(20px, 3vw, 40px);
    }
    .promo-card{
      background: rgba(255,255,255,.18);
      border: 1px solid rgba(255,255,255,.35);
      border-radius: 18px;
      padding: 18px;
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      box-shadow: 0 10px 30px rgba(190,18,60,.25);
    }
    .promo-img{
      width: 100%;
      height: 240px;
      object-fit: cover;
      border-radius: 12px;
      display:block;
    }
    @media (min-width: 992px){ .promo-img{ height: 280px; } }

    .pane-form{ padding: clamp(22px, 3.2vw, 44px); background: var(--surface); }
    .brand-dot{
      height: 46px; width: 46px; border-radius: 999px;
      display:grid; place-items:center; margin-inline:auto;
      background: linear-gradient(145deg, #f43f5e, #be123c);
      box-shadow: 0 10px 24px rgba(225,29,72,.35);
      color: #fff;
    }
    .login-card{ max-width: 420px; margin-inline:auto; }

    /* Tabs */
    .nav-pills .nav-link{ border-radius: 999px; font-weight:600; color: var(--muted); }
    .nav-pills .nav-link.active{ background: var(--accent); color: var(--accent-contrast); }

    /* Inputs (visible text + placeholder) */
    .form-label{ color: var(--text); font-weight:600; }
    .form-control{
      background: var(--input-bg);
      border: 1px solid var(--border);
      color: var(--text);
      padding-right: 2.5rem; /* space for eye icon */
    }
    .form-control::placeholder{ color: var(--muted); opacity: .9; }
    .form-control:focus{
      border-color: var(--accent);
      box-shadow: 0 0 0 .2rem rgba(225,29,72,.25);
    }

    /* Eye icon inside field */
    .input-with-icon{ position: relative; }
    .toggle-pass{
      position:absolute;
      right:.6rem;
      top:50%;
      transform:translateY(-50%);
      border:0; background:transparent; color: var(--muted);
      width: 1.75rem; height: 1.75rem;
      display:grid; place-items:center; border-radius: .375rem;
      cursor: pointer;
    }
    .toggle-pass:hover{ color: var(--text); background: color-mix(in srgb, var(--border) 50%, transparent); }

    /* Buttons */
    .btn-accent{
      background: var(--accent); color: var(--accent-contrast);
      border: 1px solid var(--accent); border-radius:12px; font-weight:700; padding:.8rem 1rem;
    }
    .btn-outline-accent{
      border:1px solid var(--accent); color: var(--text);
      border-radius:12px; font-weight:700; padding:.75rem 1rem; background:transparent;
    }
    .small-muted{ color: var(--muted); }

    /* Theme toggle (local button) */
    .btn-theme {
      border: 1px solid var(--accent);
      color: var(--text);
      background: transparent;
      border-radius: 999px;
      font-weight: 600;
      line-height: 1;
      padding: .4rem .75rem;
    }
    .btn-theme:hover{ background: var(--accent); color: var(--accent-contrast); }