:root{
    --bg:#0f1720;
    --panel:#11161b;
    --muted:#98a0aa;
    --accent:#2dd4bf;
    --accent-contrast:#052022;
    --input:#0b1220;
    --glass: rgba(255,255,255,0.03);
}

html,body{height:100%;}
body{
    margin:0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    background: linear-gradient(180deg, var(--bg) 0%, #081018 100%);
    color: #e6eef6;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
}

.auth-container.dark{
    width:100%;
    max-width:460px;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border:1px solid rgba(255,255,255,0.04);
    box-shadow: 0 8px 30px rgba(2,6,23,0.6);
    border-radius:12px;
    padding:28px;
    backdrop-filter: blur(6px);
    box-sizing: border-box;
    text-align: left;
}

.auth-container.dark h1{margin:0 0 6px 0; font-size:1.5rem; font-weight:700}
.auth-container.dark .subtitle{margin:0 0 18px 0; color:var(--muted); font-size:0.94rem; font-weight:500}
.auth-container.dark form{display:flex; flex-direction:column; gap:12px}
.auth-container.dark input[type="text"],
.auth-container.dark input[type="password"],
.auth-container.dark input[name="username"],
.auth-container.dark input[name="password"]{
    width:100%;
    padding:12px 14px;
    background:var(--input);
    border:1px solid rgba(255,255,255,0.04);
    color: #eaf2f8;
    border-radius:8px;
    outline:none;
    font-size:0.96rem;
}
.auth-container.dark input::placeholder{color:rgba(230,238,246,0.4)}
.auth-container.dark button{
    padding:12px 14px;
    border-radius:8px;
    background: linear-gradient(180deg, var(--accent) 0%, #18a08f 100%);
    border:none;
    color:var(--accent-contrast);
    font-weight:700;
    cursor:pointer;
    box-shadow: 0 6px 18px rgba(13,88,76,0.12);
}
.auth-container.dark button:active{transform:translateY(1px)}
.auth-container.dark .flash{color:#ffb4b4;font-weight:600;margin-bottom:8px}
.auth-container.dark .login-guide{
    text-align:left;
    font-size:0.95em;
    color:var(--muted);
    background:var(--glass);
    padding:14px;
    border-radius:8px;
    margin-top:18px;
    border-left:4px solid rgba(45,212,191,0.12);
}
.auth-container.dark .login-guide h3{margin:0 0 8px 0; font-size:1rem; color:#e6eef6}
.auth-container.dark .login-guide a{color:var(--accent); font-weight:600}
.auth-container.dark .footer-link{
    text-align:center;
    margin-top:24px;
    padding-top:16px;
    border-top:1px solid rgba(255,255,255,0.04);
}
.auth-container.dark .footer-link a{
    color:var(--muted);
    text-decoration:none;
    font-size:0.9rem;
    font-weight:500;
    transition: color 0.3s ease;
}
.auth-container.dark .footer-link a:hover{
    color:var(--accent);
}

@media (max-width:520px){
    .auth-container.dark{padding:20px;border-radius:10px}
    .auth-container.dark h1{font-size:1.25rem}
}