* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

/* ===== BACKGROUND ===== */

.login-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #ffffff 0%, #f5fbfb 40%, #eaf6f6 70%, #d6f0f0 100%);
}

/* ===== BUBBLES ===== */

.bubble-container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.bubble { position: absolute; will-change: transform; }

.bubble:nth-child(1) {
    width: 70px; height: 70px;
    background: #30302D;
    left: 12%; top: 20%;
    border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
    animation: morph-1 15s infinite ease-in-out, float-contained-1 25s infinite ease-in-out;
}
.bubble:nth-child(2) {
    width: 85px; height: 85px;
    background: #30302D;
    right: 18%; top: 35%;
    border-radius: 68% 32% 39% 61% / 48% 62% 38% 52%;
    animation: morph-2 14s infinite ease-in-out, float-contained-2 26s infinite ease-in-out;
}
.bubble:nth-child(3) {
    width: 65px; height: 65px;
    background: #30302D;
    left: 45%; top: 60%;
    border-radius: 55% 45% 62% 38% / 42% 58% 42% 58%;
    animation: morph-3 17s infinite ease-in-out, float-contained-3 29s infinite ease-in-out;
}
.bubble:nth-child(4) {
    width: 90px; height: 90px;
    background: #4696A3;
    left: 8%; top: 55%;
    border-radius: 45% 55% 48% 52% / 58% 42% 58% 42%;
    animation: morph-4 16s infinite ease-in-out, float-contained-4 24s infinite ease-in-out;
}
.bubble:nth-child(5) {
    width: 75px; height: 75px;
    background: #4696A3;
    right: 25%; top: 15%;
    border-radius: 52% 48% 65% 35% / 44% 56% 44% 56%;
    animation: morph-5 19s infinite ease-in-out, float-contained-5 27s infinite ease-in-out;
}
.bubble:nth-child(6) {
    width: 80px; height: 80px;
    background: #4696A3;
    left: 70%; top: 70%;
    border-radius: 48% 52% 58% 42% / 62% 38% 62% 38%;
    animation: morph-6 15s infinite ease-in-out, float-contained-6 28s infinite ease-in-out;
}
.bubble:nth-child(7) {
    width: 500px; height: 500px;
    background: radial-gradient(circle, #A8D5D5 0%, #D1E8E8 100%);
    opacity: 0.35;
    left: -15%; top: 5%;
    border-radius: 49% 51% 48% 52% / 62% 44% 56% 38%;
    animation: morph-7 20s infinite ease-in-out, float-contained-7 35s infinite ease-in-out;
}
.bubble:nth-child(8) {
    width: 450px; height: 450px;
    background: radial-gradient(circle, #6DB3B3 0%, #A8D5D5 100%);
    opacity: 0.4;
    right: -10%; top: 20%;
    border-radius: 73% 27% 26% 74% / 55% 58% 42% 45%;
    animation: morph-8 25s infinite ease-in-out, float-contained-8 40s infinite ease-in-out;
}
.bubble:nth-child(9) {
    width: 200px; height: 200px;
    background: #4A9B9B;
    opacity: 0.6;
    left: 35%; top: 40%;
    border-radius: 41% 59% 58% 42% / 45% 60% 40% 55%;
    animation: morph-9 16s infinite ease-in-out, float-contained-9 28s infinite ease-in-out;
}
.bubble:nth-child(10) {
    width: 190px; height: 190px;
    background: #2C5F5F;
    opacity: 0.55;
    left: 5%; bottom: 10%;
    border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
    animation: morph-10 18s infinite ease-in-out, float-contained-10 30s infinite ease-in-out;
}

@keyframes morph-1 {
    0%, 100% { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; }
    25%  { border-radius: 48% 52% 35% 65% / 68% 55% 45% 32%; }
    50%  { border-radius: 39% 61% 70% 30% / 44% 39% 61% 56%; }
    75%  { border-radius: 55% 45% 48% 52% / 33% 68% 32% 67%; }
}
@keyframes morph-2 {
    0%, 100% { border-radius: 68% 32% 39% 61% / 48% 62% 38% 52%; }
    40%  { border-radius: 44% 56% 67% 33% / 61% 38% 62% 39%; }
    80%  { border-radius: 55% 45% 52% 48% / 42% 71% 29% 58%; }
}
@keyframes morph-3 {
    0%, 100% { border-radius: 55% 45% 62% 38% / 42% 58% 42% 58%; }
    50%  { border-radius: 38% 62% 45% 55% / 68% 32% 68% 32%; }
}
@keyframes morph-4 {
    0%, 100% { border-radius: 45% 55% 48% 52% / 58% 42% 58% 42%; }
    33%  { border-radius: 62% 38% 55% 45% / 42% 58% 42% 58%; }
    66%  { border-radius: 38% 62% 48% 52% / 65% 35% 65% 35%; }
}
@keyframes morph-5 {
    0%, 100% { border-radius: 52% 48% 65% 35% / 44% 56% 44% 56%; }
    50%  { border-radius: 35% 65% 48% 52% / 71% 29% 71% 29%; }
}
@keyframes morph-6 {
    0%, 100% { border-radius: 48% 52% 58% 42% / 62% 38% 62% 38%; }
    25%  { border-radius: 71% 29% 44% 56% / 38% 62% 38% 62%; }
    50%  { border-radius: 42% 58% 52% 48% / 55% 45% 55% 45%; }
    75%  { border-radius: 58% 42% 65% 35% / 48% 52% 48% 52%; }
}
@keyframes morph-7 {
    0%, 100% { border-radius: 49% 51% 48% 52% / 62% 44% 56% 38%; }
    30%  { border-radius: 33% 67% 58% 42% / 48% 63% 37% 52%; }
    60%  { border-radius: 64% 36% 42% 58% / 39% 48% 52% 61%; }
}
@keyframes morph-8 {
    0%, 100% { border-radius: 73% 27% 26% 74% / 55% 58% 42% 45%; }
    25%  { border-radius: 42% 58% 65% 35% / 71% 44% 56% 29%; }
    50%  { border-radius: 58% 42% 49% 51% / 38% 66% 34% 62%; }
    75%  { border-radius: 67% 33% 41% 59% / 64% 52% 48% 36%; }
}
@keyframes morph-9 {
    0%, 100% { border-radius: 41% 59% 58% 42% / 45% 60% 40% 55%; }
    25%  { border-radius: 68% 32% 35% 65% / 59% 41% 59% 41%; }
    50%  { border-radius: 52% 48% 71% 29% / 33% 68% 32% 67%; }
    75%  { border-radius: 39% 61% 46% 54% / 68% 35% 65% 32%; }
}
@keyframes morph-10 {
    0%, 100% { border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%; }
    33%  { border-radius: 71% 29% 44% 56% / 62% 35% 65% 38%; }
    66%  { border-radius: 47% 53% 68% 32% / 55% 71% 29% 45%; }
}
@keyframes float-contained-1 {
    0%, 100% { transform: translate(0, 0); }
    25%  { transform: translate(-30px, -50px); }
    50%  { transform: translate(40px, -30px); }
    75%  { transform: translate(-20px, -60px); }
}
@keyframes float-contained-2 {
    0%, 100% { transform: translate(0, 0); }
    33%  { transform: translate(-45px, 50px); }
    66%  { transform: translate(35px, -40px); }
}
@keyframes float-contained-3 {
    0%, 100% { transform: translate(0, 0); }
    50%  { transform: translate(55px, -55px); }
}
@keyframes float-contained-4 {
    0%, 100% { transform: translate(0, 0); }
    33%  { transform: translate(30px, -40px); }
    66%  { transform: translate(-25px, 35px); }
}
@keyframes float-contained-5 {
    0%, 100% { transform: translate(0, 0); }
    25%  { transform: translate(-35px, 45px); }
    50%  { transform: translate(40px, -30px); }
    75%  { transform: translate(-20px, -50px); }
}
@keyframes float-contained-6 {
    0%, 100% { transform: translate(0, 0); }
    50%  { transform: translate(-45px, 50px); }
}
@keyframes float-contained-7 {
    0%, 100% { transform: translate(0, 0); }
    50%  { transform: translate(80px, 60px); }
}
@keyframes float-contained-8 {
    0%, 100% { transform: translate(0, 0); }
    50%  { transform: translate(-60px, -70px); }
}
@keyframes float-contained-9 {
    0%, 100% { transform: translate(0, 0); }
    25%  { transform: translate(35px, -45px); }
    50%  { transform: translate(-40px, 30px); }
    75%  { transform: translate(25px, -35px); }
}
@keyframes float-contained-10 {
    0%, 100% { transform: translate(0, 0); }
    33%  { transform: translate(50px, 40px); }
    66%  { transform: translate(-30px, -40px); }
}

/* ===== LOGIN CONTAINER ===== */

.login-container {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem;
}

/* ===== GLASS CARD ===== */

.glass-card {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--radius-xxxl);
    box-shadow: var(--glass-shadow-default);
}

.login-card {
    width: 100%;
    max-width: 420px;
    padding: 3rem 2.5rem;
    position: relative;
    overflow: hidden;
}

.login-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
}

/* ===== LOGO SECTION ===== */

.logo-section {
    text-align: center;
    margin-bottom: 2.5rem;
}

.login-logo {
    height: 52px;
    width: auto;
}

/* ===== FORM ===== */

.login-form {
    margin-bottom: 0.5rem;
}

.form-group {
    margin-bottom: 0.25rem;
}

.modern-input {
    background: #ffffff;
    border: 1.5px solid #d1d5db;
    border-radius: var(--radius-md);
    color: #111827;
    font-size: 1rem;
    transition: var(--transition);
}

.modern-input::placeholder { color: #9ca3af; }

.modern-input:focus {
    background: #ffffff;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(57, 124, 134, 0.15);
    color: #111827;
}

.modern-input.is-invalid {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px var(--danger-alpha-10);
}

.form-floating label {
    color: #6b7280;
    font-weight: 500;
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: var(--brand-primary);
    font-weight: 600;
}

/* ===== PASSWORD TOGGLE ===== */

.input-wrapper {
    position: relative;
}

.input-wrapper .modern-input {
    padding-right: 3rem;
}

.toggle-password {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #9ca3af;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    z-index: 10;
    transition: var(--transition-fast);
}

.toggle-password:hover { color: var(--brand-primary); }

/* ===== FIELD ERRORS ===== */

.field-error {
    font-size: 0.8rem;
    color: #dc2626;
    margin-top: 0.3rem;
    margin-bottom: 0.5rem;
    min-height: 1rem;
    font-weight: 500;
}

/* ===== ALERTS ===== */

.alert-box {
    display: none;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 1rem;
}

.alert-error {
    background: rgba(220, 53, 69, 0.1);
    color: #b91c1c;
    border: 1px solid rgba(220, 53, 69, 0.3);
}

.alert-success {
    background: rgba(5, 150, 105, 0.1);
    color: #047857;
    border: 1px solid rgba(5, 150, 105, 0.3);
}

/* ===== BUTTON ===== */

.modern-btn {
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
    border: none;
    border-radius: var(--radius-md);
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
    padding: 1rem;
    transition: var(--transition);
}

.modern-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(57, 124, 134, 0.35);
    background: linear-gradient(135deg, var(--brand-primary-light) 0%, var(--brand-primary) 100%);
}

.modern-btn:active:not(:disabled) { transform: translateY(0); }
.modern-btn:disabled { opacity: 0.65; cursor: not-allowed; }

.btn-loading { display: none; align-items: center; gap: 0.5rem; }
.modern-btn.loading .btn-text { display: none; }
.modern-btn.loading .btn-loading { display: flex; }

/* ===== FOOTER ===== */

.login-footer {
    margin-top: 1.5rem;
    text-align: center;
    color: #6b7280;
    font-size: 0.85rem;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 480px) {
    .login-container { padding: 1rem; }
    .login-card { padding: 2rem 1.5rem; }
    .bubble:nth-child(7),
    .bubble:nth-child(8) { display: none; }
}

/* ===== ACCESSIBILITY ===== */

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}