@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&display=swap');
.camell-login-page{
    --bg:#050811;
    --panel:#101624;
    --panel2:#171f32;
    --txt:#e8f3ff;
    --soft:#a4b4cc;
    --neon:#00ffa8;
    --cyan:#30e7ff;
    --pink:#ff77d4;
    --red:#ff4b6e;
    width:100vw;
    min-height:100vh;
    margin:0;
    padding:0;
    font-family:'Space Grotesk','Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    color:var(--txt);
    background:radial-gradient(circle at 18% 22%, rgba(0,255,168,.18), transparent 38%), #050811;
    display:flex;
    justify-content:center;
    align-items:center;
    box-sizing:border-box;
    margin-left:calc(50% - 50vw);
}
.camell-login-page.camell-theme{
    background:radial-gradient(circle at 18% 22%, rgba(0,255,168,.18), transparent 38%), #050811;
}
.camell-login *{box-sizing:border-box;}
.camell-login{
        display:grid;
        place-items:center;
        overflow:hidden;
        position:relative;
        max-width:1500px;
        margin:0 auto;
        width:100%;
        padding:32px 20px;
}
.camell-login-shell{
        width:100%;
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:16px;
}
.camell-login::before{
        content:"";
        position:absolute;inset:0;
        background:
            radial-gradient(circle at 10% 20%, rgba(0,255,168,.25), transparent 35%),
            radial-gradient(circle at 80% 0%, rgba(48,231,255,.18), transparent 35%),
            linear-gradient(135deg, rgba(0,0,0,.6), rgba(0,0,0,.2));
        pointer-events:none;
        mix-blend-mode:screen;
        animation:none;
        opacity:.85;
    }
.camell-login::after{
        content:"";position:absolute;inset:0;pointer-events:none;
        background-image:linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px),
            linear-gradient(0deg, rgba(255,255,255,.05) 1px, transparent 1px);
        background-size:60px 60px;
        opacity:.25;
    }
    @keyframes wave{from{transform:translateY(-8px);}to{transform:translateY(8px);}}
    .camell-login .camell-login-wrap{
        position:relative;
        width:100%;
        max-width:540px;
        padding:36px 28px 30px;
        background:linear-gradient(145deg, var(--panel), var(--panel2));
        border-radius:26px;
        border:1px solid rgba(0,255,168,.35);
        box-shadow:
            0 0 35px rgba(0,255,168,.12),
            0 16px 40px rgba(0,0,0,.35);
        backdrop-filter:blur(14px);
    }
    .camell-login .camell-login-glow{
        position:absolute;
        inset:-60px;
        background:
            radial-gradient(circle at 10% 0%, rgba(0,255,168,.23), transparent 60%),
            radial-gradient(circle at 100% 30%, rgba(48,231,255,.18), transparent 55%),
            radial-gradient(circle at 0% 100%, rgba(255,119,212,.22), transparent 55%);
        opacity:.9;
        filter:blur(28px);
        z-index:-1;
    }
    .camell-logo{
        display:flex;
        align-items:center;
        gap:16px;
        margin-bottom:10px;
    }
    .camell-logo-img{width:90px;filter:drop-shadow(0 0 16px rgba(0,255,168,.8));}
    .camell-logo-text{
        display:flex;
        flex-direction:column;
        line-height:1.1;
    }
    .camell-logo-text .brand{
        font-size:22px;
        font-weight:700;
        letter-spacing:.06em;
        text-transform:uppercase;
        color:var(--neon);
        text-shadow:0 0 10px rgba(0,255,168,.9);
    }
    .camell-logo-text .company{
        font-size:12px;
        letter-spacing:.18em;
        text-transform:uppercase;
        color:var(--cyan);
    }
    .camell-subtitle{
        font-size:12px;
        opacity:.72;
        margin-bottom:18px;
    }
    .camell-field{
        margin-bottom:16px;
    }
    .camell-label{
        display:flex;
        justify-content:space-between;
        font-size:12px;
        margin-bottom:6px;
        color:var(--soft);
        text-transform:uppercase;
        letter-spacing:.08em;
    }
    .camell-input-wrap{
        position:relative;
    }
    .camell-input{
        width:100%;
        padding:10px 11px 10px 30px;
        border-radius:12px;
        border:1px solid rgba(85,102,140,.35);
        background:var(--panel);
        color:var(--txt);
        font-size:13px;
        outline:none;
        box-shadow:0 0 0 1px rgba(0,0,0,.08);
    }
    .camell-input::placeholder{color:rgba(164,180,204,.7);}
    .camell-input:focus{
        border-color:var(--neon);
        box-shadow:
            0 0 0 1px rgba(0,0,0,.1),
            0 0 12px rgba(0,255,168,.28);
    }
    .camell-input-icon{
        position:absolute;
        top:50%; left:10px;
        transform:translateY(-50%);
        font-size:13px;
        color:var(--cyan);
        opacity:.9;
    }
    .camell-extra{
        display:flex;
        align-items:center;
        justify-content:space-between;
        margin:4px 0 14px;
        font-size:11px;
        color:var(--soft);
    }
    .camell-remember{
        display:flex;
        align-items:center;
        gap:6px;
    }
    .camell-remember input{
        width:14px;
        height:14px;
        accent-color:var(--neon);
    }
    .camell-link{
        color:var(--cyan);
        cursor:pointer;
        text-decoration:none;
    }
    .camell-link:hover{
        color:var(--neon);
        text-shadow:0 0 6px rgba(0,255,168,.5);
    }
    .camell-btn{
        width:100%;
        border:none;
        border-radius:14px;
        padding:11px 0;
        margin-top:2px;
        font-size:13px;
        font-weight:600;
        letter-spacing:.12em;
        text-transform:uppercase;
        color:#020308;
        background:linear-gradient(135deg,#00ffa8,#30e7ff);
        box-shadow:
            0 0 16px rgba(0,255,168,.7),
            0 0 40px rgba(48,231,255,.5);
        cursor:pointer;
        transition:.15s ease;
    }
    .camell-btn:hover{
        transform:translateY(-1px);
        box-shadow:
            0 0 22px rgba(0,255,168,.9),
            0 0 60px rgba(48,231,255,.8);
    }
    .camell-btn:active{
        transform:translateY(1px) scale(.99);
        box-shadow:
            0 0 10px rgba(0,255,168,.7),
            0 0 30px rgba(48,231,255,.5);
    }
    .camell-error{
        display:none;
        margin-bottom:12px;
        padding:8px 10px;
        border-radius:10px;
        border:1px solid rgba(255,75,110,.7);
        background:rgba(60,10,26,.9);
        font-size:12px;
        color:var(--txt);
        box-shadow:0 0 14px rgba(255,75,110,.45);
    }
    .camell-error strong{
        color:var(--red);
        margin-right:4px;
    }
    .camell-foot{
        margin-top:14px;
        font-size:11px;
        text-align:center;
        color:var(--soft);
        opacity:.75;
    }
    .camell-foot span{
        color:var(--cyan);
    }


.camell-btn-secondary{
    width:100%;
    margin-top:10px;
    padding:12px;
    background:rgba(0,255,168,.12);
    border:1px solid rgba(0,255,168,.4);
    color:var(--neon);
    border-radius:12px;
    font-weight:700;
    cursor:pointer;
    transition:0.15s;
}
.camell-btn-secondary:hover{
    box-shadow:0 0 12px rgba(0,255,168,.4);
}

.register-modal-bg{
    position:fixed;inset:0;display:none;align-items:center;justify-content:center;
    background:rgba(0,0,0,.6);z-index:9999;
}
.register-modal{
    width:90%;max-width:420px;
    background:rgba(16,22,36,.95);
    border:1px solid rgba(0,255,168,.35);
    border-radius:16px;
    padding:20px;
    color:var(--txt);
    box-shadow:0 0 25px rgba(0,255,168,.15);
}
.register-modal h3{margin-top:0;margin-bottom:12px;color:var(--neon);}
.register-modal label{display:block;font-weight:600;margin:8px 0 4px;}
.register-modal input, .register-modal select{
    width:100%;padding:10px 12px;border-radius:10px;
    border:1px solid rgba(255,255,255,.15);
    background:var(--panel2);color:var(--txt);
    margin-bottom:14px;
}
.register-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:8px;}

    .camell-hero{
        margin:6px 0 12px;
        font-size:30px;
        color:var(--neon);
        text-shadow:0 0 20px rgba(0,255,168,.7);
        letter-spacing:1px;
        text-align:center;
    }

.page-login{display:grid;place-items:center;min-height:100vh;padding:20px;margin:0;}
.camell-hero-block{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:12px;text-align:center;}
.camell-hero-text .brand{font-size:22px;font-weight:700;color:var(--neon);letter-spacing:.08em;text-transform:uppercase;}
.camell-hero-text .company{font-size:12px;letter-spacing:.2em;color:var(--cyan);}
.camell-hero-text .tagline{font-size:12px;color:var(--soft);}