*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root { --bg:#f9fafb; --text:#1a202c; --muted:#4a5568; --line:#e2e8f0; --blue:#3182ce; --error:#c53030; --success:#276749; }
body { font-family:'Inter',sans-serif; background:var(--bg); display:flex; justify-content:center; align-items:center; min-height:100vh; overflow:hidden; position:relative; color:var(--text); }
.bg { position:fixed; inset:0; z-index:-2; background-size:cover; background-position:center; transition:background-image .8s ease; }
.overlay { position:fixed; inset:0; z-index:-1; background:radial-gradient(circle,transparent 0%,rgba(249,250,251,.85) 100%); }
.card { background:rgba(255,255,255,.95); backdrop-filter:blur(10px); width:100%; max-width:420px; padding:2.5rem 2rem; border-radius:8px; border-top:5px solid #f3f4f6; box-shadow:0 10px 40px rgba(0,0,0,.12); position:relative; z-index:10; }
.brand { display:flex; justify-content:center; align-items:center; gap:.75rem; font-size:1.5rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--text); margin-bottom:1.5rem; }
.brand i { font-size:1.3rem; color:var(--muted); }
h1 { text-align:center; font-size:1rem; font-weight:600; color:var(--muted); margin-bottom:1.5rem; }
.msg { padding:.65rem 1rem; border-radius:4px; font-size:.85rem; text-align:center; font-weight:500; margin-bottom:1rem; }
.msg.error { background:#fed7d7; color:var(--error); border:1px solid #feb2b2; }
.msg.success { background:#c6f6d5; color:var(--success); border:1px solid #9ae6b4; }
.hidden { display:none !important; }
fieldset { border:0; margin-bottom:1rem; }
fieldset label { display:block; font-size:.85rem; font-weight:700; color:var(--muted); margin-bottom:.5rem; }
.label-row { display:flex; justify-content:space-between; align-items:baseline; }
.label-row label { margin-bottom:.5rem; }
.input-row { display:flex; align-items:center; gap:.5rem; }
input[type=email], input[type=password] { width:100%; padding:.75rem 1rem; border:1px solid var(--line); border-radius:4px; font-size:.95rem; color:var(--text); outline:none; transition:border-color .2s, box-shadow .2s; background:#fff; }
input[readonly] { background:#f8fafc; color:var(--muted); }
input:disabled { background:#edf2f7; cursor:not-allowed; }
input:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(66,153,225,.1); }
.link-btn { background:none; border:0; color:var(--blue); font-size:.8rem; font-weight:600; cursor:pointer; text-decoration:none; padding:0; white-space:nowrap; }
.link-btn:hover { text-decoration:underline; }
.btn { width:100%; height:44px; display:flex; justify-content:center; align-items:center; gap:.5rem; margin-top:.5rem; background:var(--text); color:#fff; border:0; border-radius:4px; font-size:1rem; font-weight:600; cursor:pointer; transition:background .2s; }
.btn:hover { background:#2d3748; }
.btn:disabled { background:#718096; cursor:not-allowed; }
.legal { margin-top:1.5rem; text-align:center; font-size:.75rem; color:#718096; line-height:1.5; }
.legal a { color:var(--blue); text-decoration:none; }
.legal a:hover { text-decoration:underline; }
.lang { position:fixed; bottom:2rem; left:50%; transform:translateX(-50%); background:#fff; border:1px solid var(--line); border-radius:4px; padding:.5rem 1rem; font-size:.9rem; color:var(--muted); display:flex; align-items:center; gap:.5rem; cursor:pointer; z-index:10; }
@media (max-width:600px) { .card { margin:1rem; padding:2rem 1.5rem; } .lang { bottom:1rem; } }