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

:root {
    --bg:#080b18;
    --panel:rgba(255,255,255,.055);
    --line:rgba(255,255,255,.1);
    --text:#f8fafc;
    --muted:#9aa7bd;
    --violet:#8b5cf6;
    --blue:#6366f1
}

* {
    box-sizing:border-box
}

html {
    min-width:320px;
    scroll-behavior:smooth
}

body {
    margin:0;
    min-width:320px;
    min-height:100vh;
    color:var(--text);
    background:radial-gradient(circle at 70% 0,#182149 0,#0d1225 34%,var(--bg) 72%);
    font-family:'DM Sans','Segoe UI',sans-serif;
    line-height:1.5;
    overflow-x:hidden;
    display:flex;
    align-items:center;
    justify-content:center
}

.container {
    width:min(380px,calc(100% - 36px));
    padding:36px;
    border:1px solid var(--line);
    border-radius:16px;
    background:var(--panel);
    backdrop-filter:blur(18px);
    box-shadow:0 40px 100px rgba(0,0,0,.45)
}

.logo {
    color:var(--text);
    font-family:'Space Grotesk','Segoe UI',sans-serif;
    font-size:22px;
    font-weight:600;
    line-height:1.1;
    text-align:center
}

.logo img {
    width:32px;
    height:32px;
    margin-right:0;
    vertical-align:middle;
    position:relative;
    top:-1px
}

.subtitle {
    margin-top:7px;
    margin-bottom:24px;
    color:var(--muted);
    font-size:13px;
    text-align:center
}

.input-group {
    position:relative;
    margin-top:12px
}

input {
    width:100%;
    padding:14px 44px 14px 14px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:10px;
    color:var(--text);
    background:rgba(255,255,255,.04);
    font:inherit;
    font-size:14px
}

input::placeholder {
    color:#78869d
}

input:focus {
    outline:none;
    border-color:var(--violet);
    box-shadow:0 0 0 2px rgba(139,92,246,.2)
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow:0 0 0 1000px rgba(255,255,255,.04) inset !important;
    box-shadow:0 0 0 1000px rgba(255,255,255,.04) inset !important;
    -webkit-text-fill-color:var(--text) !important;
    transition:background-color 5000s ease-in-out 0s
}

.toggle-pwd {
    position:absolute;
    top:50%;
    right:10px;
    width:30px;
    height:30px;
    border:0;
    border-radius:8px;
    color:var(--muted);
    background:transparent;
    cursor:pointer;
    transform:translateY(-50%)
}

.toggle-pwd:hover {
    color:#a78bfa;
    background:rgba(139,92,246,.15)
}

button.main {
    width:100%;
    margin-top:18px;
    padding:13px 17px;
    border:1px solid rgba(167,139,250,.55);
    border-radius:10px;
    color:#fff;
    background:linear-gradient(135deg,#8b5cf6,#6366f1);
    font:inherit;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    transition:.2s
}

button.main:hover {
    transform:translateY(-2px);
    filter:brightness(1.12);
    box-shadow:0 10px 25px rgba(139,92,246,.3)
}

.links {
    display:flex;
    justify-content:space-between;
    gap:12px;
    margin-top:14px;
    font-size:12px
}

.links a {
    color:#c4b5fd;
    text-decoration:none
}

.links a:hover {
    color:#fff
}

.demo-box {
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin-top:18px;
    padding:12px;
    border:1px solid rgba(139,92,246,.2);
    border-radius:10px;
    color:#c4b5fd;
    background:rgba(139,92,246,.1);
    font-size:12px
}

.demo-box i {
    margin-top:2px;
    color:#a78bfa
}

.demo-box span {
    color:var(--muted);
    font-size:11px
}

.home-link {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100%;
    margin-top:18px;
    padding:10px 13px;
    border:1px solid rgba(139,92,246,.35);
    border-radius:9px;
    color:#c4b5fd;
    font-size:12px;
    text-decoration:none;
    transition:.2s
}

.home-link:hover {
    color:#fff;
    border-color:rgba(167,139,250,.65);
    background:rgba(139,92,246,.12)
}

.footer {
    margin-top:20px;
    color:#64748b;
    font-size:12px;
    text-align:center
}

@media(max-width:480px) {
    .container {
        padding:28px 18px
    }
    .logo {
        font-size:20px
    }
    .links a {
        text-align:center
    }
}