:root{
      --reg-bg: #121524;
      --reg-card: rgba(255,255,255,0.05);
      --reg-card-2: rgba(0,0,0,0.18);
      --reg-border: rgba(255,255,255,0.14);
      --reg-border-2: rgba(255,255,255,0.22);
      --reg-text: rgba(255,255,255,0.92);
      --reg-muted: rgba(255,255,255,0.72);
      --reg-muted-2: rgba(255,255,255,0.60);
      --reg-focus: rgba(255,255,255,0.18);

      --reg-danger-bg: rgba(255, 90, 90, 0.10);
      --reg-danger-border: rgba(255, 90, 90, 0.35);
      --reg-danger-text: rgba(255, 210, 210, 0.95);

      --reg-radius: 18px;
    }

    body{
      margin:0;
      font-family:"Loubag", serif;
      background: radial-gradient(1000px 600px at 20% 10%, rgba(255,255,255,0.08), transparent 60%),
                  radial-gradient(900px 500px at 80% 20%, rgba(255,255,255,0.06), transparent 55%),
                  var(--reg-bg);
      color: var(--reg-text);
      height: 100vh !important;
    }

    .login_wrap{
      display:grid;
      place-items:center;
      padding: .5rem;
    }

    .login-card{
      width: min(520px, 92vw);
      background: linear-gradient(180deg, var(--reg-card), rgba(255,255,255,0.03));
      border: 1px solid var(--reg-border);
      border-radius: var(--reg-radius);
      box-shadow: 0 22px 70px rgba(0,0,0,0.35);
      overflow:hidden;
    }

    .login-card__header{
        margin: 1em auto;
        padding: 1em;
    }

    .login-title{
      margin:0;
      font-size: clamp(1.8rem, 3.3vw, 2.25rem);
      line-height:1.05;
      letter-spacing: .3px;
    }

    .login-subtitle{
      margin: 1rem auto;
      color: var(--reg-muted);
      line-height:1.35;
      font-size: 1rem;
    }

.login-subtitle p {
    padding: 0em;
    margin: 0em auto;
}
    .login-card__body{
        padding-left: 1em;
        padding-right: 1em;
    }

    /* error */
    .login-error{
      border:1px solid var(--reg-danger-border);
      background: var(--reg-danger-bg);
      padding: .85rem 1rem;
      border-radius: 14px;
      margin: 0 0 1rem;
      color: var(--reg-danger-text);
      line-height:1.3;
    }

    /* form */
    .login-form{
      display:grid;
      gap: .85rem;
    }

    .login-field{
      display:grid;
      gap: .35rem;
    }

    .login-label{
      font-size: .95rem;
      color: var(--reg-muted);
      letter-spacing: .2px;
    }

    .login-input{
      font-family:"Loubag", serif;
      font-size: 1rem;
      color: var(--reg-text);
      background: var(--reg-card-2);
      border: 1px solid var(--reg-border);
      border-radius: 14px;
      padding: 1rem;
      outline: none;
      transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease, background .12s ease;
      width:100%;
      box-sizing:border-box;
    }

    .login-input::placeholder{
      color: rgba(255,255,255,0.45);
    }

    .login-input:focus{
      border-color: var(--reg-border-2);
      box-shadow: 0 0 0 4px var(--reg-focus);
      background: rgba(0,0,0,0.24);
    }

    .login-actions{
      display:flex;
      gap:.75rem;
      flex-wrap:wrap;
      align-items:center;
      margin: .25rem auto;
    }

    .login-btn{
      font-family:"Loubag", serif;
      font-size: 1.05rem;
      font-weight: 700;
      letter-spacing: .25px;
      padding: .9rem 1rem;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.18);
      background: rgba(255,255,255,0.10);
      color: var(--reg-text);
      cursor:pointer;
      transition: transform .12s ease, background .12s ease, box-shadow .12s ease;
      text-decoration:none;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width: 140px;
      box-sizing:border-box;
    }

    .login-btn:hover{
      transform: translateY(-1px);
      background: rgba(255,255,255,0.14);
      box-shadow: 0 18px 45px rgba(0,0,0,0.35);
    }

    .login-btn:active{
      transform: translateY(0);
      box-shadow: 0 12px 30px rgba(0,0,0,0.28);
    }

    .login-btn.is-ghost{
      background: transparent;
      border-color: rgba(255,255,255,0.14);
      color: rgba(255,255,255,0.86);
    }

    .login-btn.is-ghost:hover{
      background: rgba(255,255,255,0.08);
    }

    .login-footer{
      padding: 1rem;
      color: var(--reg-muted);
      font-size: .98rem;
      line-height:1.35;
    }

    .login-footer a{
      color: rgba(255,255,255,0.92);
      text-decoration: none;
      border-bottom: 1px solid rgba(255,255,255,0.25);
      padding-bottom: 2px;
    }

    .login-footer a:hover{
      border-bottom-color: rgba(255,255,255,0.45);
    }

    @media (prefers-reduced-motion: reduce){
      .login-input,
      .login-btn{
        transition:none;
      }
    }
    
    /* ===========================
       Register Page (Loubag only)
       =========================== */

    :root{
      --reg-bg: #121524;
      --reg-card: rgba(255,255,255,0.05);
      --reg-card-2: rgba(0,0,0,0.18);
      --reg-border: rgba(255,255,255,0.14);
      --reg-border-2: rgba(255,255,255,0.22);
      --reg-text: rgba(255,255,255,0.92);
      --reg-muted: rgba(255,255,255,0.72);
      --reg-muted-2: rgba(255,255,255,0.60);
      --reg-focus: rgba(255,255,255,0.18);

      --reg-danger-bg: rgba(255, 90, 90, 0.10);
      --reg-danger-border: rgba(255, 90, 90, 0.35);
      --reg-danger-text: rgba(255, 210, 210, 0.95);

      --reg-radius: 18px;
    }

    body{
      margin:0;
      font-family:"Loubag", serif;
      background: radial-gradient(1000px 600px at 20% 10%, rgba(255,255,255,0.08), transparent 60%),
                  radial-gradient(900px 500px at 80% 20%, rgba(255,255,255,0.06), transparent 55%),
                  var(--reg-bg);
      color: var(--reg-text);
      min-height: 100vh;
    }

    .create_account{
      display:grid;
      place-items:center;
      padding: 1.25rem;
    }

    .reg-card{
      width: min(520px, 92vw);
      background: linear-gradient(180deg, var(--reg-card), rgba(255,255,255,0.03));
      border: 1px solid var(--reg-border);
      border-radius: var(--reg-radius);
      box-shadow: 0 22px 70px rgba(0,0,0,0.35);
      overflow:hidden;
    }

    .reg-card__header{
      padding: 1.25rem 1.25rem 0.75rem;
    }

    .reg-title{
      padding: .25em;
      font-size: clamp(1.8rem, 3.3vw, 2.25rem);
      line-height:1.05;
      letter-spacing: .3px;
    }

    .reg-subtitle p{
      margin: 0rem auto; 
      color: var(--reg-muted);
      line-height:1.35;
      font-size: 1rem;
    }

    .reg-card__body{
        padding: 1em;
    }

    /* errors */
    .reg-errors{
      border:1px solid var(--reg-danger-border);
      background: var(--reg-danger-bg);
      padding: .85rem 1rem;
      border-radius: 14px;
      margin: 0 0 1rem;
      color: var(--reg-danger-text);
    }

    .reg-errors strong{
      display:block;
      margin-bottom:.35rem;
      letter-spacing:.2px;
    }

    .reg-errors ul{
      margin:.25rem 0 0;
      padding-left: 1.1rem;
    }

    .reg-errors li{
      margin: .15rem 0;
      line-height:1.3;
    }

    /* form layout */
    .reg-form{
      display:grid;
      gap: .85rem;
    }

    .reg-grid{
      display:grid;
      grid-template-columns: 1fr;
      gap: .85rem;
    }

    @media (min-width: 620px){
      .reg-grid{
        grid-template-columns: 1fr 1fr;
      }
    }

    .reg-field{
      display:grid;
      gap: .35rem;
    }

    .reg-label{
      font-size: .95rem;
      color: var(--reg-muted);
      letter-spacing: .2px;
    }

    .reg-input{
      font-family:"Loubag", serif;
      font-size: 1rem;
      color: var(--reg-text);
      background: var(--reg-card-2);
      border: 1px solid var(--reg-border);
      border-radius: 14px;
      padding: .82rem .95rem;
      outline: none;
      transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease, background .12s ease;
      width:100%;
      box-sizing:border-box;
    }

    .reg-input::placeholder{
      color: rgba(255,255,255,0.45);
    }

    .reg-input:focus{
      border-color: var(--reg-border-2);
      box-shadow: 0 0 0 4px var(--reg-focus);
      background: rgba(0,0,0,0.24);
    }

    .reg-hint{
      margin: .1rem 0 0;
      font-size: .88rem;
      color: var(--reg-muted-2);
      line-height:1.25;
    }

    /* button */
    .reg-actions{
      display:grid;
      gap: .75rem;
      margin-top: .25rem;
    }

    .reg-btn{
      font-family:"Loubag", serif;
      font-size: 1.05rem;
      letter-spacing: .25px;
      padding: .9rem 1rem;
      font-weight: normal;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.18);
      background: rgba(255,255,255,0.10);
      color: var(--reg-text);
      cursor:pointer;
      transition: transform .12s ease, background .12s ease, box-shadow .12s ease;
    }

    .reg-btn:hover{
      transform: translateY(-1px);
      background: rgba(255,255,255,0.14);
      box-shadow: 0 18px 45px rgba(0,0,0,0.35);
    }

    .reg-btn:active{
      transform: translateY(0);
      box-shadow: 0 12px 30px rgba(0,0,0,0.28);
    }

    .reg-footer{
      padding: 0 1.25rem 1.25rem;
      color: var(--reg-muted);
      font-size: .98rem;     
      margin-top: .5rem;
      line-height:1.35;
    }

    .reg-footer a{
      color: rgba(255,255,255,0.92);
      text-decoration: none;
      border-bottom: 1px solid rgba(255,255,255,0.25);
      padding-bottom: 2px;

    }

    .reg-footer a:hover{
      border-bottom-color: rgba(255,255,255,0.45);
    }

    /* honeypot stays hidden */
    .hp{
      position:absolute !important;
      left:-9999px !important;
      width:1px !important;
      height:1px !important;
      overflow:hidden !important;
    }

    @media (prefers-reduced-motion: reduce){
      .reg-input,
      .reg-btn{
        transition:none;
      }
    }
  /* ===========================
   Forgot Password (matches login)
   =========================== */
.login-card__header h2 {
    font-family: "loubag" !important; 
    background: transparent !important;
    color: var(--reg-text);
    text-transform:  none;

    padding: .5rem;
    
}

.login-success{
  padding: .85rem 1rem;
  border-radius: 14px;
margin-top: .25rem;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--reg-border);
margin-bottom: 1rem;
  color: var(--reg-text);
  font-size: .95rem;
  line-height: 1.35;
  text-align: center;
}

.login-success::before{
  content: "✓ ";
  font-weight: 700;
}

/* tighten vertical rhythm for forgot password */
.login-card__body .login-form{
  margin-bottom: .25rem;
}

/* center single-button action */
.login-actions{
  justify-content: center;
}