/* 8bitz — main.css */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg:      #0d0f14;
    --bg2:     #161920;
    --bg3:     #1e222b;
    --border:  #2a2f3d;
    --text:    #d4d8e4;
    --muted:   #6b7280;
    --accent:  #4ade80;
    --danger:  #f87171;
    --warn:    #fbbf24;
    --info:    #60a5fa;
    --radius:  8px;
    --font:    'Segoe UI', system-ui, sans-serif;
}

body { background: var(--bg); color: var(--text); font-family: var(--font); font-size: 15px; line-height: 1.6; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Auth */
.auth-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.auth-box { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 2.5rem; width: 100%; max-width: 380px; }
.logo { font-size: 2rem; font-weight: 700; color: var(--accent); letter-spacing: 2px; margin-bottom: .25rem; }
.tagline { color: var(--muted); margin-bottom: 1.5rem; font-size: 0.9rem; }

label { display: flex; flex-direction: column; gap: 4px; margin-bottom: 1rem; font-size: .9rem; color: var(--muted); }
input { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); padding: .6rem .8rem; color: var(--text); font-size: 1rem; outline: none; transition: border-color .2s; }
input:focus { border-color: var(--accent); }
.hint { font-size: .75rem; color: var(--muted); }

.btn { display: block; width: 100%; padding: .75rem; border: none; border-radius: var(--radius); font-size: 1rem; cursor: pointer; font-weight: 600; transition: opacity .2s; }
.btn:hover { opacity: .85; }
.btn-primary { background: var(--accent); color: #0d0f14; }

.auth-link { text-align: center; margin-top: 1.25rem; font-size: .9rem; color: var(--muted); }

.alert { padding: .75rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; font-size: .9rem; }
.alert-error { background: rgba(248,113,113,.1); border: 1px solid var(--danger); color: var(--danger); }
.alert-success { background: rgba(74,222,128,.1); border: 1px solid var(--accent); color: var(--accent); }