*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: #f4f6f9; display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.box { background: #fff; border-radius: 10px; padding: 2rem; width: 100%; max-width: 400px; box-shadow: 0 2px 12px rgba(0,0,0,.1); }
h1 { font-size: 1.4rem; margin-bottom: 1.5rem; color: #1a1a2e; }
.field { margin-bottom: 1rem; }
label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .3rem; color: #444; }
input { width: 100%; padding: .55rem .75rem; border: 1px solid #ccc; border-radius: 5px; font-size: .9rem; }
.btn { width: 100%; padding: .65rem; border-radius: 5px; background: #4361ee; color: #fff; border: none; cursor: pointer; font-size: .95rem; margin-top: .5rem; }
.alert { padding: .65rem .9rem; border-radius: 5px; margin-bottom: 1rem; font-size: .85rem; background: #f8d7da; color: #721c24; }
.brand { text-align: center; font-size: .85rem; color: #888; margin-bottom: 1.5rem; }