:root { --red:#ef171b; --page:#17181e; --card:#292a31; --border:#4a4b55; --text:#fff; --muted:#d1d1d6; }
* { box-sizing:border-box; }
body { min-width:320px; min-height:100vh; margin:0; color:var(--text); background:var(--page); font-family:Nunito,Arial,sans-serif; }
a { color:inherit; }
.login-background { position:fixed; inset:0; z-index:-1; background:linear-gradient(rgba(12,14,21,.77),rgba(23,24,30,.96)),url("https://sss.feathermc.com/2daJjuf4.png") center/cover no-repeat; }
.login-shell { width:min(100% - 32px,512px); margin:0 auto; padding:48px 0 36px; text-align:center; }
.login-logo { display:block; width:470px; max-width:94%; margin:0 auto 42px; }.login-logo img { display:block; width:100%; max-height:155px; object-fit:contain; }
.login-card,.security-card { border:1px solid var(--border); border-radius:17px; background:rgba(42,43,50,.97); box-shadow:0 20px 50px #0005; }
.login-card { padding:32px; }.login-icon { width:64px; height:64px; display:grid; place-items:center; margin:0 auto 20px; border-radius:18px; background:var(--red); font-size:28px; }
h1 { margin:0; font-size:29px; font-weight:900; letter-spacing:-.02em; }.login-card > p { margin:8px 0 31px; color:var(--muted); font-size:15px; }
form { text-align:left; } label { display:block; margin-bottom:9px; font-size:14px; font-weight:800; }.name-input { display:flex; align-items:center; gap:12px; min-height:54px; padding:0 14px; border:2px solid #4c4a61; border-radius:14px; background:#3d3e47; color:#ccc; }.name-input:focus-within { border-color:#78728c; }.name-input input { width:100%; border:0; outline:0; background:transparent; color:#fff; font:600 16px Nunito,Arial,sans-serif; }.name-input input::placeholder { color:#c4c4c7; }
form small { display:block; margin:8px 0 0; font-size:12px; font-weight:700; }.form-error { min-height:18px; margin:10px 0 0; color:#ff9d9f; font-size:13px; font-weight:700; } form button { width:100%; min-height:48px; margin-top:10px; border:0; border-radius:13px; background:var(--red); color:#fff; cursor:pointer; font:900 16px Nunito,Arial,sans-serif; } form button:hover { filter:brightness(1.1); }.legal-copy { margin:24px 0 0; color:#efeff1; font-size:12px; line-height:1.6; }.legal-copy a,.support a { color:var(--red); font-weight:800; text-decoration:none; }.legal-copy a:hover,.support a:hover { text-decoration:underline; }
.security-card { display:flex; gap:14px; margin-top:24px; padding:18px 20px; text-align:left; }.security-card > i { color:var(--red); font-size:20px; }.security-card h2 { margin:0 0 4px; font-size:15px; }.security-card p { margin:0; color:#e5e5e7; font-size:12px; font-weight:600; line-height:1.65; }.support { margin:17px 0 0; font-size:12px; font-weight:700; }
@media (max-width:560px) { .login-shell { width:min(100% - 24px,512px); padding-top:30px; }.login-logo { margin-bottom:28px; }.login-card { padding:28px 21px; } h1 { font-size:26px; } }