/* WoW Portal — shared theme */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { background: #0a0a0f; color: #e8d5a3; font-family: Georgia, 'Times New Roman', serif; min-height: 100vh; }
a { color: #f0c040; }

/* ── Nav ───────────────────────────────────────────────── */
#nav-root { width: 100%; }
.nav-hero { background: linear-gradient(180deg, #1c1208 0%, #0a0a0f 100%); padding: 28px 20px; text-align: center; border-bottom: 1px solid #c8960c44; }
.nav-hero-title { font-size: 2rem; font-weight: 700; color: #f0c040; letter-spacing: 3px; text-shadow: 0 0 24px #c8960c66; }
.nav-hero-sub { font-size: 0.75rem; color: #8b7355; letter-spacing: 2px; margin-top: 6px; }
.nav-bar { background: #0d0a05; border-bottom: 1px solid #c8960c33; display: flex; align-items: center; padding: 0 16px; gap: 2px; }
.nav-item { color: #8b7355; font-size: 0.62rem; letter-spacing: 1px; padding: 9px 11px; text-decoration: none; border-bottom: 2px solid transparent; }
.nav-item:hover { color: #e8d5a3; }
.nav-item.active { color: #f0c040; border-bottom-color: #c8960c; }
.nav-login { color: #c8960c; font-size: 0.62rem; letter-spacing: 1px; padding: 9px 11px; text-decoration: none; }
.nav-spacer { flex: 1; }
.nav-online { font-size: 0.6rem; color: #3fb950; margin-right: 10px; }
.nav-username { font-size: 0.62rem; color: #c8960c; letter-spacing: 1px; margin-right: 4px; }
.nav-logout { background: none; border: none; color: #6b5a3e; font-size: 0.6rem; letter-spacing: 1px; cursor: pointer; padding: 9px 8px; font-family: inherit; }
.nav-logout:hover { color: #e8d5a3; }

/* ── Layout ────────────────────────────────────────────── */
.container { max-width: 680px; margin: 0 auto; padding: 24px 16px; display: flex; flex-direction: column; gap: 18px; }

/* ── Card ──────────────────────────────────────────────── */
.card { background: #110e08; border: 1px solid #c8960c44; border-radius: 8px; padding: 20px; }
.card-title { font-size: 0.7rem; font-weight: 700; color: #c8960c; letter-spacing: 2px; text-align: center; margin-bottom: 14px; }

/* ── Form ──────────────────────────────────────────────── */
.form { display: flex; flex-direction: column; gap: 10px; }
.field label { display: block; font-size: 0.65rem; color: #8b7355; letter-spacing: 1px; margin-bottom: 4px; }
.field input { width: 100%; background: #080605; border: 1px solid #c8960c33; border-radius: 4px; padding: 8px 10px; font-size: 0.8rem; color: #e8d5a3; font-family: inherit; outline: none; transition: border-color 0.2s; }
.field input:focus { border-color: #c8960c88; }
.row { display: flex; gap: 10px; }
.row .field { flex: 1; }
.btn { background: linear-gradient(180deg, #c8960c, #8b6508); color: #0a0a0f; border: none; border-radius: 5px; padding: 10px; font-size: 0.75rem; font-weight: 700; letter-spacing: 2px; cursor: pointer; width: 100%; font-family: inherit; margin-top: 4px; transition: opacity 0.2s; }
.btn:hover { opacity: 0.85; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.error-msg { font-size: 0.75rem; color: #f85149; text-align: center; min-height: 1.2em; }
.success-msg { font-size: 0.75rem; color: #3fb950; text-align: center; min-height: 1.2em; }

/* ── Table ─────────────────────────────────────────────── */
.data-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.data-table th { font-size: 0.62rem; color: #c8960c; letter-spacing: 1px; padding: 6px 10px; text-align: left; border-bottom: 1px solid #c8960c33; }
.data-table td { padding: 7px 10px; color: #b8a07a; border-bottom: 1px solid #c8960c11; }
.data-table tr:last-child td { border-bottom: none; }
.empty-msg { color: #6b5a3e; font-style: italic; text-align: center; padding: 18px; font-size: 0.78rem; }

/* ── Footer ────────────────────────────────────────────── */
footer { text-align: center; font-size: 0.65rem; color: #484f58; padding: 8px 0 20px; }