@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

:root{
    --void:#0a0e1a;
    --void-2:#121729;
    --violet:#7c5cfc;
    --cyan:#22d3ee;
    --amber:#fbbf24;
    --glass:rgba(255,255,255,.06);
    --glass-2:rgba(255,255,255,.1);
    --border-glass:rgba(255,255,255,.14);
    --text:#eef0fa;
    --text-dim:#9aa3c0;
}

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

body{
    font-family:'Inter',Segoe UI,sans-serif;
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    background:
        radial-gradient(ellipse 1000px 700px at 12% 15%, rgba(124,92,252,.55), transparent 55%),
        radial-gradient(ellipse 900px 800px at 88% 85%, rgba(34,211,238,.45), transparent 55%),
        radial-gradient(ellipse 600px 500px at 50% 100%, rgba(251,191,36,.12), transparent 60%),
        var(--void);
    overflow:hidden;
    position:relative;
}

/* faint starfield */
body::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,255,255,.5), transparent),
        radial-gradient(1.5px 1.5px at 70% 60%, rgba(255,255,255,.4), transparent),
        radial-gradient(1px 1px at 40% 80%, rgba(255,255,255,.35), transparent),
        radial-gradient(1.5px 1.5px at 85% 15%, rgba(255,255,255,.4), transparent),
        radial-gradient(1px 1px at 55% 45%, rgba(255,255,255,.3), transparent),
        radial-gradient(1.5px 1.5px at 10% 65%, rgba(255,255,255,.4), transparent);
    background-size:100% 100%;
    pointer-events:none;
}

.background{
    position:absolute;
    width:100%;
    height:100%;
    overflow:hidden;
    pointer-events:none;
}

.circle{
    position:absolute;
    border-radius:50%;
    filter:blur(110px);
    opacity:.55;
}

.c1{
    width:480px;
    height:480px;
    background:var(--violet);
    left:-140px;
    top:-140px;
    animation:drift 16s ease-in-out infinite alternate;
}

.c2{
    width:520px;
    height:520px;
    background:var(--cyan);
    right:-150px;
    bottom:-150px;
    animation:drift 18s ease-in-out infinite alternate-reverse;
}

@keyframes drift{
    from{ transform:translate(0,0); }
    to{ transform:translate(40px,30px); }
}

@media (prefers-reduced-motion: reduce){
    .c1, .c2{ animation:none; }
}

.login-container{
    position:relative;
    width:430px;
    padding:44px 40px 36px;
    background:linear-gradient(165deg, rgba(255,255,255,.1), rgba(255,255,255,.03));
    backdrop-filter:blur(28px) saturate(140%);
    -webkit-backdrop-filter:blur(28px) saturate(140%);
    border:1px solid var(--border-glass);
    border-radius:22px;
    color:var(--text);
    box-shadow:0 30px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.14);
}

.login-container::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:22px;
    padding:1px;
    background:linear-gradient(165deg, rgba(124,92,252,.6), rgba(255,255,255,0) 30%, rgba(255,255,255,0) 70%, rgba(34,211,238,.5));
    -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    pointer-events:none;
}

.logo{
    text-align:center;
    margin-bottom:32px;
}

/* signature element: orbit ring around the mark */
.orbit-mark{
    position:relative;
    width:74px;
    height:74px;
    margin:0 auto 18px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.orbit-mark::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
    background:radial-gradient(circle, rgba(124,92,252,.35), transparent 70%);
}

.orbit-mark::after{
    content:"";
    position:absolute;
    inset:6px;
    border-radius:50%;
    border:1px dashed rgba(255,255,255,.3);
    animation:spin 14s linear infinite;
}

.orbit-dot{
    position:absolute;
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--amber);
    box-shadow:0 0 12px 3px rgba(251,191,36,.8);
    top:2px;
    left:50%;
    transform-origin:0 35px;
    animation:spin 14s linear infinite;
}

@keyframes spin{
    to{ transform:rotate(360deg); }
}

.logo i{
    position:relative;
    z-index:1;
    font-size:28px;
    color:var(--cyan);
    background:linear-gradient(135deg,var(--violet),var(--cyan));
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}

.logo h1{
    font-family:'Space Grotesk',sans-serif;
    font-size:26px;
    font-weight:600;
    letter-spacing:-.01em;
    margin-bottom:8px;
}

.logo p{
    color:var(--text-dim);
    font-size:14px;
}

.form-group{
    margin-bottom:18px;
}

.form-group label{
    display:block;
    margin-bottom:7px;
    font-size:12px;
    color:var(--text-dim);
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.06em;
}

.input-wrap{
    position:relative;
}

.input-wrap i{
    position:absolute;
    left:14px;
    top:50%;
    transform:translateY(-50%);
    font-size:14px;
    color:var(--text-dim);
    transition:.2s;
    pointer-events:none;
}

.form-group input{
    width:100%;
    padding:13px 14px 13px 40px;
    background:rgba(255,255,255,.05);
    border:1px solid var(--border-glass);
    border-radius:10px;
    font-size:15px;
    color:var(--text);
    font-family:inherit;
    transition:.2s;
}

.form-group input::placeholder{
    color:rgba(238,240,250,.35);
}

.form-group input:focus{
    outline:none;
    border-color:var(--violet);
    background:rgba(255,255,255,.08);
    box-shadow:0 0 0 3px rgba(124,92,252,.22);
}

.form-group input:focus + i,
.input-wrap:has(input:focus) i{
    color:var(--cyan);
}

.remember{
    margin-bottom:22px;
    font-size:13px;
    color:var(--text-dim);
    display:flex;
    align-items:center;
    gap:8px;
}

.remember label{
    display:flex;
    align-items:center;
    gap:8px;
    cursor:pointer;
}

button{
    position:relative;
    width:100%;
    padding:14px;
    background:linear-gradient(135deg,var(--violet),var(--cyan));
    color:#0a0e1a;
    font-weight:700;
    border:none;
    border-radius:10px;
    font-size:15px;
    cursor:pointer;
    transition:.25s;
    font-family:'Space Grotesk',sans-serif;
    overflow:hidden;
    letter-spacing:.01em;
}

button::before{
    content:"";
    position:absolute;
    top:0;
    left:-60%;
    width:40%;
    height:100%;
    background:linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
    transform:skewX(-20deg);
    transition:.6s;
}

button:hover::before{
    left:120%;
}

button:hover{
    filter:brightness(1.08);
    box-shadow:0 10px 28px rgba(124,92,252,.45);
    transform:translateY(-1px);
}

button:focus-visible,
input:focus-visible{
    outline:2px solid var(--cyan);
    outline-offset:2px;
}

.footer{
    margin-top:24px;
    text-align:center;
    font-size:12px;
    color:var(--text-dim);
}

.alert{
    background:rgba(220,53,69,.15);
    border:1px solid rgba(220,53,69,.4);
    color:#fca5a5;
    padding:13px;
    border-radius:10px;
    margin:18px 0;
    text-align:center;
    font-size:14px;
}

@media (prefers-reduced-motion: reduce){
    .orbit-mark::before,
    .orbit-mark::after{
        animation:none;
    }
}

@media (max-width:480px){
    .login-container{
        width:92vw;
        padding:32px 24px 28px;
    }
}