/* ── RESET ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ── DESIGN TOKENS (mirrors landing page) ── */
:root {
    --bg-base:         #070d1a;
    --bg-surface:      #0d1526;
    --bg-card:         #111e33;
    --bg-elevated:     #172240;
    --bg-input:        #0d1829;

    --border:          #1e2f4d;
    --border-soft:     #162038;

    --text-primary:    #e8f0ff;
    --text-secondary:  #7a90b8;
    --text-muted:      #465878;

    --blue:            #4f8ef7;
    --blue-dark:       #3a7cf5;
    --blue-glow:       rgba(79,142,247,0.18);
    --blue-tag-bg:     rgba(79,142,247,0.12);
    --blue-tag-border: rgba(79,142,247,0.30);

    --green:           #22c55e;
    --green-glow:      rgba(34,197,94,0.18);
    --green-tag-bg:    rgba(34,197,94,0.10);
    --green-tag-border:rgba(34,197,94,0.28);

    --red:             #f87171;
    --red-tag-bg:      rgba(248,113,113,0.12);
    --red-tag-border:  rgba(248,113,113,0.30);

    --shadow-lg:   0 12px 48px rgba(0,0,0,0.65);
    --shadow-glow: 0 0 40px rgba(79,142,247,0.12);
    --radius:      16px;
    --radius-sm:   10px;
    --ease:        0.22s ease;
}

/* ── BASE ── */
body {
    font-family: 'Segoe UI', system-ui, Arial, sans-serif;
    background: var(--bg-base);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    color: var(--text-primary);
}

/* ── BACKGROUND ── */
.background-animation {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0; left: 0;
    z-index: 0;
    pointer-events: none;
}

.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.55;
    animation: blobFloat 10s infinite ease-in-out;
}
.blob-1 {
    width: 420px; height: 420px;
    background: radial-gradient(circle, #2255cc 0%, #0d1829 70%);
    top: -120px; left: -120px;
    animation-delay: 0s;
}
.blob-2 {
    width: 340px; height: 340px;
    background: radial-gradient(circle, #1a3a8c 0%, #070d1a 70%);
    bottom: -80px; right: -60px;
    animation-delay: 3s;
}
.blob-3 {
    width: 260px; height: 260px;
    background: radial-gradient(circle, #163580 0%, #070d1a 70%);
    bottom: 120px; left: 60px;
    animation-delay: 6s;
}

@keyframes blobFloat {
    0%,100% { transform: translate(0,0) scale(1); }
    33%      { transform: translate(40px,-60px) scale(1.08); }
    66%      { transform: translate(-25px,30px) scale(0.94); }
}

/* ── FORM CONTAINER ── */
.form-container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 460px;
    background: var(--bg-card);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg), var(--shadow-glow);
    overflow: hidden;
    animation: slideIn 0.5s ease-out both;
    margin: 24px;
}

@keyframes slideIn {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── BRAND SECTION ── */
.brand-section {
    padding: 30px 28px 26px;
    text-align: center;
    background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-card) 100%);
    border-bottom: 1px solid var(--border-soft);
    position: relative;
    overflow: hidden;
}
.brand-section::before {
    content: '';
    position: absolute;
    top: -50px; left: 50%;
    transform: translateX(-50%);
    width: 220px; height: 220px;
    background: var(--blue-glow);
    border-radius: 50%;
    filter: blur(40px);
    pointer-events: none;
}

.brand-icon {
    width: 58px;
    height: 58px;
    background: linear-gradient(135deg, #2255cc, #4f8ef7);
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    box-shadow: 0 6px 20px rgba(79,142,247,0.38);
    font-size: 0;
    position: relative;
    z-index: 1;
}
.brand-icon i {
    font-size: 28px;
    color: #fff;
}

.brand-section h1 {
    font-size: 24px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.4px;
    position: relative;
    z-index: 1;
}
.brand-section h1 .brand-accent { color: var(--blue); }

.brand-section p {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 4px;
    position: relative;
    z-index: 1;
}

/* ── FORM WRAPPER ── */
.form-wrapper { position: relative; width: 100%; }

input[type="radio"] { display: none; }

/* ── TABS ── */
.form-header {
    display: flex;
    position: relative;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
}

.form-header label {
    flex: 1;
    padding: 14px 12px;
    text-align: center;
    cursor: pointer;
    font-weight: 600;
    color: var(--text-muted);
    transition: color var(--ease);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    position: relative;
    z-index: 1;
}
.form-header label i { font-size: 16px; }
.form-header label span { font-size: 13px; }

.slider {
    position: absolute;
    width: 50%;
    height: 2px;
    background: linear-gradient(90deg, var(--blue-dark), #5b9cff);
    bottom: 0;
    left: 0;
    transition: left 0.3s ease;
    box-shadow: 0 0 8px rgba(79,142,247,0.5);
}

input#login:checked  ~ .form-header .slider { left: 0; }
input#signup:checked ~ .form-header .slider { left: 50%; }

input#login:checked  ~ .form-header label[for="login"],
input#signup:checked ~ .form-header label[for="signup"] {
    color: var(--blue);
}

/* ── FORM CONTENT ── */
.form-content {
    display: none;
    padding: 26px 28px;
    animation: fadeIn 0.35s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

input#login:checked  ~ .form-content#login-form,
input#signup:checked ~ .form-content#signup-form { display: block; }

/* ── FORM GROUPS ── */
.form-group { margin-bottom: 16px; }

.form-group > label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 7px;
    color: var(--text-muted);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.7px;
}
.form-group > label i { font-size: 12px; }

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-wrapper i:first-child {
    position: absolute;
    left: 13px;
    color: var(--text-muted);
    font-size: 15px;
    pointer-events: none;
    transition: color var(--ease);
}

.input-wrapper i.toggle-password {
    position: absolute;
    right: 14px;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 15px;
    transition: color var(--ease);
}
.input-wrapper i.toggle-password:hover { color: var(--blue); }

input[type="email"],
input[type="password"],
input[type="text"] {
    width: 100%;
    padding: 12px 14px 12px 42px;
    background: var(--bg-input);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    color: var(--text-primary);
    transition: border var(--ease), box-shadow var(--ease);
    outline: none;
}
input[type="email"]::placeholder,
input[type="password"]::placeholder,
input[type="text"]::placeholder { color: var(--text-muted); }

input[type="email"]:focus,
input[type="password"]:focus,
input[type="text"]:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 4px rgba(79,142,247,0.12);
}
input[type="email"]:focus + i:first-child,
.input-wrapper:focus-within i:first-child { color: var(--blue); }

/* ── CHECKBOX ── */
.remember-me,
.terms {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 14px 0;
    font-size: 13px;
    color: var(--text-secondary);
}
input[type="checkbox"] {
    width: 17px; height: 17px;
    cursor: pointer;
    accent-color: var(--blue);
    flex-shrink: 0;
}
.terms label,
.remember-me label {
    margin: 0;
    font-weight: 500;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 13px;
}
.terms a {
    color: var(--blue);
    text-decoration: none;
    font-weight: 600;
    transition: color var(--ease);
}
.terms a:hover { color: #82b4ff; }

/* ── SUBMIT BUTTON ── */
.btn-submit {
    width: 100%;
    padding: 13px;
    margin-top: 4px;
    background: linear-gradient(135deg, #3a7cf5, #5b9cff);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--ease);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 18px rgba(79,142,247,0.32);
    letter-spacing: 0.2px;
}
.btn-submit i { font-size: 16px; }
.btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(79,142,247,0.45);
    background: linear-gradient(135deg, #2a6ce5, #4a8cf0);
}
.btn-submit:active { transform: translateY(0); }

/* ── SOCIAL LOGIN ── */
.social-login {
    padding: 18px 28px;
    border-top: 1px solid var(--border-soft);
    text-align: center;
}
.social-login p {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    margin-bottom: 12px;
    position: relative;
}
.social-login p::before,
.social-login p::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 28%;
    height: 1px;
    background: var(--border);
}
.social-login p::before { left: 0; }
.social-login p::after  { right: 0; }

.social-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.social-btn {
    width: 46px;
    height: 46px;
    border: 1.5px solid var(--border);
    background: var(--bg-elevated);
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    transition: all var(--ease);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}
.social-btn:hover {
    transform: translateY(-3px);
    border-color: var(--blue);
    color: var(--blue);
    box-shadow: 0 6px 18px rgba(79,142,247,0.25);
    background: var(--blue-tag-bg);
}
.social-btn.google:hover  { border-color: #ea4335; color: #ea4335; box-shadow: 0 6px 18px rgba(234,67,53,0.22); background: rgba(234,67,53,0.08); }
.social-btn.github:hover  { border-color: #adbac7; color: #adbac7; box-shadow: 0 6px 18px rgba(173,186,199,0.18); background: rgba(173,186,199,0.06); }
.social-btn.linkedin:hover { border-color: #0a66c2; color: #4fa3ff; box-shadow: 0 6px 18px rgba(10,102,194,0.22); background: rgba(10,102,194,0.08); }

/* ── FOOTER ── */
.form-footer {
    padding: 14px 28px;
    text-align: center;
    border-top: 1px solid var(--border-soft);
    background: var(--bg-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.form-footer a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    transition: color var(--ease);
    padding: 2px 8px;
}
.form-footer a:hover { color: var(--blue); }
.form-footer span { color: var(--border); font-size: 14px; }

/* ── RESPONSIVE ── */
@media (max-width: 500px) {
    .form-container {
        max-width: 100%;
        margin: 16px;
        border-radius: 14px;
    }
    .brand-section { padding: 26px 20px 22px; }
    .form-content { padding: 22px 20px; }
    .social-login { padding: 16px 20px; }
    .form-footer   { padding: 12px 20px; }
}