:root { --login-green: #147d57; --login-dark: #0e5d41; --login-ink: #183027; --login-muted: #718179; --login-line: #dce8df; }
html, body { min-height: 100%; }
body:has(> main.card) { min-height: 100vh; display: grid; place-items: center; background: radial-gradient(circle at 15% 10%, #e4f0d6 0, transparent 34%), linear-gradient(135deg, #edf4ee, #f8faf8); color: var(--login-ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body > main.card { width: min(430px, calc(100% - 32px)); margin: 0 !important; padding: 38px !important; border: 1px solid var(--login-line); border-radius: 20px; box-shadow: 0 24px 70px rgba(44, 78, 57, .14); text-align: left; background: rgba(255, 255, 255, .94); }
body > main.card:before { content: 'W'; display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto 20px; border-radius: 14px; background: linear-gradient(145deg, var(--login-green), var(--login-dark)); color: #fff; font-size: 23px; font-weight: 800; box-shadow: 0 10px 20px rgba(20, 125, 87, .20); }
body > main.card h1 { margin: 0 0 8px; text-align: center; font-size: 25px; letter-spacing: -.03em; }
body > main.card p { text-align: center; color: var(--login-muted); font-size: 13px; }
body > main.card form { margin-top: 28px; }
body > main.card label { display: grid; gap: 8px; margin: 0 0 20px; color: #5e7067; font-size: 12px; font-weight: 700; }
body > main.card input[type=password] { width: 100%; min-height: 46px; padding: 12px 13px; box-sizing: border-box; border: 1px solid var(--login-line); border-radius: 10px; outline: 0; font: inherit; transition: border-color .18s ease, box-shadow .18s ease; }
body > main.card input[type=password]:focus { border-color: var(--login-green); box-shadow: 0 0 0 4px rgba(20, 125, 87, .12); }
body > main.card button { width: 100%; min-height: 46px; padding: 12px; border: 0; border-radius: 10px; background: linear-gradient(145deg, var(--login-green), var(--login-dark)); color: #fff; font-weight: 750; cursor: pointer; box-shadow: 0 10px 20px rgba(20, 125, 87, .16); }
body > main.card button:hover { filter: brightness(1.06); }
body > main.card .error { margin: 16px 0 0; color: #b65d55; }
@media (max-width: 480px) { body > main.card { padding: 30px 22px !important; } }