/* Sign in / sign up pages (index.php, sign-up.php). Self-contained: style.css is precompiled and has
   no utility classes for this layout. Class names are prefixed auth- so nothing else is affected. */
:root {
    --auth-deep: #150b3a;
    --auth-mid: #2a1470;
    --auth-bright: #5b2bd6;
    --auth-accent: #6d4fd3;
    --auth-ink: #1f1638;
    --auth-soft: #4b3a86;
    --auth-line: #d9d0f5;
    --auth-tint: #fbfaff;
}

body.auth-body { margin: 0; background: var(--auth-deep); }

.auth-page {
    position: relative;
    min-height: 100dvh;
    overflow: hidden;
    padding: 20px 16px 36px;
    box-sizing: border-box;
    background: radial-gradient(circle at 25% 0%, var(--auth-bright) 0%, var(--auth-mid) 46%, var(--auth-deep) 100%);
    color: var(--auth-ink);
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.auth-page *, .auth-page *::before, .auth-page *::after { box-sizing: border-box; }

/* soft glowing blobs behind the card */
.auth-page::before, .auth-page::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
}
.auth-page::before { width: 260px; height: 260px; top: -60px; left: -80px; background: #a855f7; opacity: .35; }
.auth-page::after { width: 300px; height: 300px; bottom: -110px; right: -90px; background: #0abac9; opacity: .22; }

.auth-brand { position: relative; z-index: 1; margin: 26px 0 20px; text-align: center; color: #fff; }
.auth-brand .auth-logo {
    width: 88px; height: 88px; margin: 0 auto 10px; display: grid; place-items: center;
    border-radius: 26px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .35), inset 0 0 22px rgba(255, 255, 255, .08);
    animation: authFloat 4.5s ease-in-out infinite;
}
.auth-brand .auth-logo svg { display: block; }
.auth-brand h1 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: .05em; }
.auth-brand p { margin: 3px 0 0; font-size: 11px; letter-spacing: .32em; opacity: .75; }
@keyframes authFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .auth-brand .auth-logo { animation: none; } }

.auth-card {
    position: relative; z-index: 1;
    width: min(100%, 420px);
    background: #fff;
    border-radius: 24px;
    padding: 18px 20px 24px;
    box-shadow: 0 26px 64px rgba(0, 0, 0, .45);
}

.auth-chips { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 14px; font-size: 10px; font-weight: 700; letter-spacing: .06em; color: var(--auth-accent); }
.auth-chips span::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #22c55e; }

.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; margin-bottom: 20px; border-radius: 14px; background: #efeafc; }
.auth-tab {
    display: block; padding: 11px 0; border-radius: 11px; text-align: center; text-decoration: none;
    font-size: 13px; font-weight: 800; letter-spacing: .05em; color: var(--auth-accent);
}
.auth-tab.active { background: #3d1a9e; color: #fff; box-shadow: 0 6px 14px rgba(61, 26, 158, .4); }

.auth-title { margin: 0 0 4px; font-size: 19px; font-weight: 800; color: var(--auth-ink); }
.auth-sub { margin: 0 0 18px; font-size: 13px; line-height: 1.5; color: var(--auth-soft); }

.auth-label { display: block; margin: 0 0 7px; font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--auth-soft); }
.auth-field {
    display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding: 0 14px;
    border: 1.5px solid var(--auth-line); border-radius: 13px; background: var(--auth-tint);
    transition: border-color .15s, box-shadow .15s;
}
.auth-field:focus-within { border-color: var(--auth-accent); box-shadow: 0 0 0 3px rgba(109, 79, 211, .18); }
.auth-field.invalid { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, .12); }
.auth-field > svg { flex: none; width: 19px; height: 19px; color: #8b7fc0; }
.auth-field .auth-prefix { flex: none; padding-right: 10px; border-right: 1.5px solid var(--auth-line); font-size: 14px; font-weight: 800; color: #3d1a9e; }
.auth-field input {
    flex: 1; min-width: 0; padding: 14px 0; border: 0; outline: 0; background: transparent;
    font-family: inherit; font-size: 15px; color: var(--auth-ink);
}
.auth-field input::placeholder { color: #a79fca; }
.auth-eye { flex: none; padding: 4px; border: 0; background: none; color: #8b7fc0; cursor: pointer; line-height: 0; }
.auth-eye:hover { color: var(--auth-accent); }
.auth-eye svg { width: 20px; height: 20px; }

.auth-meter { display: flex; gap: 5px; margin: -8px 0 6px; }
.auth-meter i { flex: 1; height: 4px; border-radius: 4px; background: #e6e0f7; transition: background .2s; }
.auth-meter[data-level="1"] i:nth-child(-n+1) { background: #ef4444; }
.auth-meter[data-level="2"] i:nth-child(-n+2) { background: #f59e0b; }
.auth-meter[data-level="3"] i:nth-child(-n+3) { background: #84cc16; }
.auth-meter[data-level="4"] i { background: #22c55e; }
.auth-hint { min-height: 16px; margin: 0 0 12px; font-size: 11.5px; font-weight: 600; color: #7b70a8; }

.auth-error, .auth-success {
    display: none; margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; font-size: 12.5px; font-weight: 600; line-height: 1.4;
}
.auth-error { background: #fee2e2; color: #b91c1c; }
.auth-success { background: #dcfce7; color: #166534; }
.auth-error.show, .auth-success.show { display: block; }

.auth-btn {
    display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; padding: 15px 0;
    border: 0; border-radius: 14px; cursor: pointer; text-decoration: none;
    font-family: inherit; font-size: 14px; font-weight: 800; letter-spacing: .07em; color: #fff;
    background: linear-gradient(180deg, #5a2fd0, #34158f); box-shadow: 0 10px 22px rgba(52, 21, 143, .45);
    transition: transform .1s, filter .15s;
}
.auth-btn:hover { filter: brightness(1.08); }
.auth-btn:active { transform: translateY(1px); }
.auth-btn:disabled { opacity: .7; cursor: progress; }
.auth-btn.secondary { margin-top: 12px; color: #3d1a9e; background: #fff; border: 1.5px solid var(--auth-line); box-shadow: none; }
.auth-spinner {
    display: none; width: 16px; height: 16px; border-radius: 50%;
    border: 2.5px solid rgba(255, 255, 255, .4); border-top-color: #fff; animation: authSpin .7s linear infinite;
}
.auth-btn.busy .auth-spinner { display: inline-block; }
@keyframes authSpin { to { transform: rotate(360deg); } }

.auth-or { display: flex; align-items: center; gap: 12px; margin: 18px 0 0; font-size: 11px; font-weight: 700; letter-spacing: .1em; color: #a79fca; }
.auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: #e6e0f7; }

.auth-foot { margin: 18px 0 0; text-align: center; font-size: 13px; color: #6f6791; }
.auth-foot a { color: var(--auth-accent); font-weight: 700; text-decoration: none; }
.auth-note { position: relative; z-index: 1; margin: 18px 0 0; max-width: 420px; text-align: center; font-size: 11px; line-height: 1.5; color: rgba(255, 255, 255, .6); }

@media (max-width: 360px) {
    .auth-card { padding: 16px 14px 20px; }
    .auth-brand h1 { font-size: 22px; }
}