/* ===== Scoped glassy auth modal styles ===== */
.auth-modal{
    position:relative; overflow:hidden;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.14);
    background:
      linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)),
      rgba(17,25,40,.66);
    box-shadow: 0 24px 54px rgba(2,8,20,.45), inset 0 1px 0 rgba(255,255,255,.08);
    backdrop-filter: saturate(150%) blur(12px);
    -webkit-backdrop-filter: saturate(150%) blur(12px);
    padding: 18px;
    max-width: 420px;
    width: min(94vw, 420px);
    color: #e7eaf7;
    font: 15px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial;
}
.auth-modal::before{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:
      radial-gradient(120% 70% at -10% -10%, rgba(59,130,246,.26), transparent 60%),
      radial-gradient(120% 70% at 110% -10%, rgba(139,92,246,.22), transparent 60%);
    opacity:.9;
}

.auth-modal .auth-form{ position:relative; z-index:1; display:none; }
.auth-modal .auth-form.active{ display:block; }
.auth-modal h2{ margin:0 0 8px; font-size:1.15rem; letter-spacing:.2px; color:#fff; }

.auth-modal label{ display:block; margin:10px 2px 6px; font-size:.95rem; color:#cfd6ff; }
.auth-modal .control{
    width:100%; border-radius:12px; padding:10px 12px;
    border:1px solid rgba(255,255,255,.16);
    background:
      linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
      rgba(17,25,40,.46);
    color:#f6f7ff; outline:none; box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
    transition: box-shadow .2s, border-color .2s, background .2s;
}
.auth-modal .control::placeholder{ color:rgba(230,235,255,.65); }
.auth-modal .control:focus{
    border-color: color-mix(in oklab, #3b82f6, white 14%);
    box-shadow: 0 0 0 3px color-mix(in oklab, #3b82f6, transparent 78%);
    background:
      linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)),
      rgba(17,25,40,.52);
}

/* Checkbox */
.auth-modal .checkbox{ display:flex; align-items:center; gap:10px; margin:6px 0 0; user-select:none; }
.auth-modal .checkbox input[type="checkbox"]{
    appearance:none; -webkit-appearance:none; -moz-appearance:none;
    width:20px; height:20px; border-radius:6px;
    border:1px solid rgba(255,255,255,.18);
    background:
      linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
      rgba(17,25,40,.46);
    display:grid; place-content:center; cursor:pointer; outline:none;
    transition: box-shadow .15s, border-color .15s, background .15s;
}
.auth-modal .checkbox input[type="checkbox"]::after{
    content:""; width:12px; height:12px; border-radius:3px; transform:scale(0);
    background:#3b82f6; transition: transform .15s ease-out;
}
.auth-modal .checkbox input[type="checkbox"]:checked::after{ transform:scale(1); }
.auth-modal .checkbox input[type="checkbox"]:focus{
    border-color: color-mix(in oklab, #3b82f6, white 12%);
    box-shadow: 0 0 0 3px color-mix(in oklab, #3b82f6, transparent 78%);
}

/* Row + links + buttons */
.auth-modal .row{ display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-top:12px; }
.auth-modal .btn{
    appearance:none; border:0; cursor:pointer; border-radius:12px;
    padding:10px 14px; font-weight:700; letter-spacing:.2px;
}
.auth-modal .btnPrimary{
    background: linear-gradient(135deg, #2563eb, #8b5cf6);
    color:#fff;
    box-shadow: 0 10px 26px rgba(37,117,252,.32), inset 0 1px 0 rgba(255,255,255,.22);
    transition: transform .06s ease, filter .18s ease, box-shadow .18s ease;
}
.auth-modal .btnPrimary:hover{ filter:brightness(1.06); box-shadow: 0 12px 32px rgba(37,117,252,.42), inset 0 1px 0 rgba(255,255,255,.26); }
.auth-modal .btnPrimary:active{ transform: translateY(1px); }

.auth-modal .aux{
    font-size:.92rem; text-decoration:none; color:#cfd6ff; opacity:.9;
}
.auth-modal .aux:hover{ text-decoration:underline; }

/* Alerts */
.auth-modal .error{
    display:none; margin: 8px 0 6px; padding:10px 12px; border-radius:12px;
    border:1px solid rgba(239,68,68,.35);
    background: linear-gradient(180deg, rgba(239,68,68,.16), rgba(239,68,68,.08));
    color:#fecaca;
}
.auth-modal .error.show{ display:block; }

@media (max-width:520px){
    .auth-modal{ padding:14px; }
    .auth-modal .row{ gap:8px; justify-content:flex-start; }
}
/* Light theme (optional if your app flips data-theme="light") */
:root[data-theme="light"] .auth-modal{
    border-color: rgba(10,20,40,.10);
    background:
      linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.84)),
      #fff;
    color:#0f1527;
    box-shadow: 0 22px 48px rgba(20,30,45,.18), inset 0 1px 0 rgba(255,255,255,.9);
}
:root[data-theme="light"] .auth-modal .control{
    border-color: rgba(10,20,40,.12);
    background:
      linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.90)), #fff;
    color:#0f1527;
}
:root[data-theme="light"] .auth-modal .checkbox input[type="checkbox"]{
    border-color: rgba(10,20,40,.12);
    background:
      linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.90)), #fff;
}