:root{
    --brand:#30A080;     /* primary */
    --brandDark:#209070; /* dark */
    --brandLight:#70D0A0;/* light */

    --ink:#0F172A;
    --muted:rgba(15,23,42,.70);
    --card:#FFFFFF;
    --border:rgba(15,23,42,.12);

    --shadow: 0 18px 50px rgba(2,6,23,.18);
    --r-lg: 16px;
    --r-md: 12px;
}
.alert{
    display: none;
}
.alert.show {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.alert.alert-danger {
  --red-main: #dc2626;
  --red-dark: #b91c1c;
  --red-glow: rgba(220, 38, 38, 0.35);

  padding: 10px 12px;
  margin: 12px 0;
  border-radius: 10px;
  background: linear-gradient(145deg, var(--red-main), var(--red-dark));
  color: #fff;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.4;
  animation: alertSlideIn 0.25s ease-out;
}

/* Background similar vibe to WPEngine (but greener) */
body{
    min-height:100vh;
    color:var(--ink);
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
    background:
    radial-gradient(1200px 800px at 70% 25%, rgba(112,208,160,.30), transparent 55%),
    radial-gradient(900px 700px at 20% 85%, rgba(48,160,128,.25), transparent 55%),
    linear-gradient(180deg, #0FA98A 0%, #0A7D78 55%, #075E74 100%);
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 28px 16px;
}

/* Subtle noise-ish overlay without images */
body::before{
    content:"";
    position:fixed;
    inset:0;
    background:
    radial-gradient(circle at 10% 10%, rgba(255,255,255,.06), transparent 35%),
    radial-gradient(circle at 90% 20%, rgba(255,255,255,.05), transparent 35%),
    radial-gradient(circle at 60% 90%, rgba(0,0,0,.10), transparent 45%);
    pointer-events:none;
}

.auth-shell{
    width: 100%;
    max-width: 460px;
    position:relative;
    z-index:1;
}

.auth-card{
    background: rgba(255,255,255,.94);
    border: 1px solid rgba(255,255,255,.35);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow);
    overflow:hidden;
}

.auth-head{
    padding: 26px 26px 14px;
    border-bottom: 1px solid rgba(15,23,42,.08);
    background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.88));
}

.brand-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap: 10px;
    margin-bottom: 10px;
}

.brand-mark{
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: rgba(48,160,128,.14);
    border: 1px solid rgba(48,160,128,.22);
    display:flex;
    align-items:center;
    justify-content:center;
    color: var(--brandDark);
}
.brand-name{
    font-weight: 800;
    letter-spacing: .2px;
}
.brand-sub{
    color: var(--muted);
    font-size: .95rem;
    text-align:center;
    margin: 0;
}

.auth-body{
    padding: 22px 26px 18px;
    background: rgba(255,255,255,.94);
}

.form-label{
    font-weight: 650;
    font-size: .92rem;
}

.form-control{
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    padding: .72rem .9rem;
}
.form-control:focus{
    border-color: rgba(48,160,128,.55);
    box-shadow: 0 0 0 .2rem rgba(48,160,128,.18);
}

.btn-primary{
    --bs-btn-bg: var(--brandDark);
    --bs-btn-border-color: var(--brandDark);
    --bs-btn-hover-bg: #1A7F66;
    --bs-btn-hover-border-color: #1A7F66;
    --bs-btn-active-bg: #166B56;
    --bs-btn-active-border-color: #166B56;
    border-radius: 999px;
    padding: .78rem 1rem;
    font-weight: 750;
    letter-spacing: .2px;
}

.btn.disabled, .btn:disabled{
    background:var(--brand);
    border-color:var(--brand);
    border-radius: 999px;
    padding: .78rem 1rem;
    font-weight: 750;
    letter-spacing: .2px;
}
.muted-link{
    color: rgba(15,23,42,.70);
    text-decoration:none;
    font-weight: 600;
}
.muted-link:hover{
    color: var(--brandDark);
    text-decoration: underline;
}

.auth-foot{
    padding: 14px 26px 20px;
    border-top: 1px solid rgba(15,23,42,.08);
    background: rgba(255,255,255,.92);
    text-align:center;
    color: rgba(15,23,42,.65);
    font-size: .92rem;
}

.tiny{
    font-size: .86rem;
    color: rgba(15,23,42,.62);
}

/* Optional: small "secure" badge */
.secure{
    display:inline-flex;
    align-items:center;
    gap: 8px;
    border: 1px solid rgba(15,23,42,.10);
    background: rgba(255,255,255,.75);
    border-radius: 999px;
    padding: 8px 12px;
    margin: 0 auto 14px;
    color: rgba(15,23,42,.72);
    font-weight: 650;
    font-size: .88rem;
}

/* Make the card feel “premium” without bubbles */
.auth-card::after{
    content:"";
    position:absolute;
    inset:-2px;
    border-radius: var(--r-lg);
    pointer-events:none;
    border: 1px solid rgba(48,160,128,.15);
    opacity:.55;
}