:root{
    --bg:#0b0a11;
    --card:#151121;
    --stroke-soft:#201a3b;
    --stroke:#2f2950;
    --txt:#eceaff;
    --muted:rgba(201,195,233,.82);
    --accent:#6f63ff;
    --accent2:#4f46e5;
    --danger:#ff8a8a;
    --ok:#33d17a;
  }

  #toast-container{ z-index:999999!important; pointer-events:auto; }
  .toast{ box-shadow:0 18px 40px rgba(0,0,0,.55)!important; border:1px solid rgba(255,255,255,.08)!important; border-radius:14px!important; }
  .toast-success{ background-color:rgba(18,38,26,.95)!important; background-image:none!important; color:#eafff2!important; border-color:rgba(51,209,122,.35)!important; }
  .toast-error{ background-color:rgba(44,16,24,.95)!important; background-image:none!important; color:#ffe9ef!important; border-color:rgba(255,138,138,.35)!important; }
  .toast-warning{ background-color:rgba(34,26,54,.95)!important; background-image:none!important; color:rgba(201,195,233,.92)!important; border-color:rgba(111,99,255,.25)!important; }
  .toast-info{ background-color:rgba(18,16,32,.95)!important; background-image:none!important; color:rgba(236,234,255,.92)!important; border-color:rgba(111,99,255,.25)!important; }

  #forgotPasswordModal{ z-index:1200!important; }

  #login-page{
    min-height:calc(100vh - 70px);
    padding:70px 18px 52px;
    background:
      linear-gradient(180deg, rgba(6,4,10,.52), rgba(6,4,10,.94)),
      url('/templates/augment/img/body-background.webp') center top/cover fixed no-repeat;
    color:var(--txt);
  }

  .login-page-container{
    max-width:1260px;
    margin:0 auto;
  }

  .login-hero{
    text-align:center;
    margin-bottom:32px;
  }

  .login-page-title{
    font-family:'Cinzel',serif;
    text-transform:uppercase;
    font-size:clamp(48px,6vw,78px);
    letter-spacing:.15em;
    line-height:1;
    margin:0;
    background:linear-gradient(180deg,#fff 0%,#d8cbff 45%,#7f50ee 100%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    text-shadow:0 14px 34px rgba(0,0,0,.82);
  }

  .login-page-subtitle{
    margin:18px auto 0;
    max-width:720px;
    color:#d4ccef;
    font-family:'Cinzel',serif;
    font-size:14px;
    line-height:1.7;
    letter-spacing:.08em;
    text-transform:uppercase;
    text-shadow:0 2px 0 rgba(0,0,0,.55);
  }

  .login-page-divider{
    height:1px;
    max-width:760px;
    margin:24px auto 0;
    position:relative;
    background:linear-gradient(90deg,transparent,rgba(165,120,255,.75),transparent);
  }

  .login-page-divider:after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:14px;
    height:14px;
    transform:translate(-50%,-50%) rotate(45deg);
    background:#0b0712;
    border:1px solid rgba(175,140,255,.50);
    box-shadow:0 0 22px rgba(143,92,255,.75);
  }

  .login-box-wrap{
    display:flex;
    justify-content:center;
  }

  #login-box{
    width:min(720px,100%);
    position:relative;
    border-radius:20px;
    border:1px solid var(--stroke-soft);
    background:radial-gradient(150% 220% at 50% 0%, #1f182f 0%, #151121 45%, #0c0a14 100%);
    box-shadow:
      0 26px 60px rgba(0,0,0,.85),
      0 0 0 1px rgba(255,255,255,.02),
      inset 0 1px 0 rgba(255,255,255,.06),
      inset 0 -18px 26px rgba(0,0,0,.6);
    overflow:hidden;
  }

  #login-box::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
      radial-gradient(140% 180% at 50% 0%, rgba(255,255,255,.07) 0%, transparent 45%),
      radial-gradient(120% 200% at 50% 120%, rgba(0,0,0,.72) 0%, transparent 60%);
    mix-blend-mode:soft-light;
    opacity:.95;
  }

  #login-inner{
    position:relative;
    padding:2.6rem 3rem 2.3rem;
  }

  .login-top{
    text-align:center;
    margin-bottom:1.65rem;
  }

  .login-title{
    font-family:"Cinzel", ui-serif, Georgia, serif;
    letter-spacing:.18em;
    text-transform:uppercase;
    font-size:1.55rem;
    color:var(--txt);
    margin:0 0 .35rem;
  }

  .login-subtitle{
    font-family:"Cinzel", ui-serif, Georgia, serif;
    font-size:.78rem;
    letter-spacing:.28em;
    text-transform:uppercase;
    color:rgba(201,195,233,.78);
  }

  .lg-field{ margin-bottom:1.15rem; }

  .lg-label{
    display:block;
    color:rgba(201,195,233,.75);
    font-size:.72rem;
    letter-spacing:.16em;
    text-transform:uppercase;
    margin-bottom:.55rem;
  }

  .lg-input-wrap{ position:relative; }

  .lg-icon{
    position:absolute;
    left:14px;
    top:50%;
    transform:translateY(-50%);
    width:18px;
    height:18px;
    opacity:.75;
    pointer-events:none;
  }

  .lg-icon svg{
    width:18px;
    height:18px;
    fill:rgba(201,195,233,.8);
  }

  .lg-input{
    width:100%;
    background:radial-gradient(120% 260% at 50% 0%, #1d182b 0%, #13101e 40%, #0a0810 100%);
    border:1px solid var(--stroke-soft);
    color:var(--txt);
    border-radius:14px;
    padding:.95rem 1.05rem .95rem 2.85rem;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.05),
      inset 0 -6px 10px rgba(0,0,0,.7);
    transition:.15s ease;
  }

  .lg-input::placeholder{ color:rgba(201,195,233,.45); }

  .lg-input:focus{
    outline:none;
    border-color:var(--accent);
    background:radial-gradient(120% 260% at 50% 0%, #231b3b 0%, #171227 40%, #0b0813 100%);
    box-shadow:
      0 0 0 1px rgba(111,99,255,.45),
      inset 0 1px 0 rgba(255,255,255,.07),
      inset 0 -7px 12px rgba(0,0,0,.8);
    transform:translateY(-1px);
  }

  .lg-btn{
    width:100%;
    margin-top:.15rem;
    background:linear-gradient(180deg,var(--accent) 0%,var(--accent2) 45%,#3c35c8 100%);
    border-radius:999px;
    border:1px solid rgba(116,104,255,.8);
    color:#fff;
    font-weight:800;
    letter-spacing:.16em;
    text-transform:uppercase;
    font-size:.82rem;
    padding:.95rem 1rem;
    box-shadow:
      0 16px 32px rgba(26,19,75,.9),
      0 0 0 1px rgba(0,0,0,.8),
      inset 0 1px 0 rgba(255,255,255,.16),
      inset 0 -8px 14px rgba(18,10,70,.8);
    transition:.12s ease;
  }

  .lg-btn:hover{
    transform:translateY(-1px);
    filter:brightness(1.03);
  }

  .lg-btn:disabled{
    opacity:.6;
    cursor:not-allowed;
    transform:none;
    filter:none;
  }

  .login-links{
    display:flex;
    justify-content:center;
    gap:.65rem;
    margin-top:.9rem;
    color:rgba(201,195,233,.82);
    font-size:.86rem;
  }

  .login-links a,
  .login-links button{
    color:rgba(201,195,233,.82);
    text-decoration:none;
    background:none;
    border:none;
    padding:0;
    cursor:pointer;
  }

  .login-links a:hover,
  .login-links button:hover{ color:var(--txt); }

  .login-divider{
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(111,99,255,.22),transparent);
    margin:1.25rem 0 1.05rem;
  }

  #forgotPasswordModal{ backdrop-filter:blur(8px); }

  .modal-card{
    width:min(420px,92vw);
    background:radial-gradient(130% 210% at 50% 0%, #221a36 0%, #151021 40%, #09070f 100%);
    border:1px solid var(--stroke-soft);
    border-radius:16px;
    box-shadow:
      0 22px 48px rgba(0,0,0,.85),
      0 0 0 1px rgba(255,255,255,.02),
      inset 0 1px 0 rgba(255,255,255,.05);
    padding:1.35rem 1.35rem 1.25rem;
    color:var(--txt);
  }

  .modal-card h3{
    margin:0;
    font-family:"Cinzel", ui-serif, Georgia, serif;
    letter-spacing:.14em;
    text-transform:uppercase;
    font-size:.9rem;
  }

  #closeModalBtn{
    color:rgba(201,195,233,.75);
    font-size:1.8rem;
    line-height:1;
    background:none;
    border:none;
    cursor:pointer;
  }

  #closeModalBtn:hover{ color:var(--txt); }

  @media(max-width:640px){
    #login-page{
      padding:42px 10px 36px;
      background:
        linear-gradient(180deg, rgba(6,4,10,.58), rgba(6,4,10,.94)),
        url('/templates/augment/img/body-background.webp') top center / auto 100vh repeat-y;
      background-attachment:scroll;
      background-color:#07050d;
    }

    .login-page-title{
      font-size:38px;
      letter-spacing:.10em;
    }

    .login-page-subtitle{
      max-width:340px;
      font-size:12px;
      line-height:1.55;
      margin-top:14px;
    }

    .login-hero{
      margin-bottom:24px;
    }

    #login-box{
      border-radius:16px;
    }

    #login-inner{
      padding:2.1rem 1.35rem 1.7rem;
    }

    .login-title{
      font-size:1.25rem;
      letter-spacing:.13em;
    }

    .login-subtitle{
      font-size:.68rem;
      letter-spacing:.20em;
    }

    .login-links{
      flex-wrap:wrap;
      text-align:center;
    }
  }