*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body { font-family: system-ui, sans-serif; background: #0f0f0f; color: #e8e8e8; min-height: 100vh; }

nav { background: #1a1a1a; padding: 0.75rem 1.5rem; display: flex; align-items: center; gap: 1rem; border-bottom: 1px solid #333; }
nav a { color: #aaa; text-decoration: none; font-size: 0.9rem; }
nav a:hover { color: #fff; }
nav .brand { font-weight: 700; color: #fff; margin-right: auto; }

main { max-width: 900px; margin: 2rem auto; padding: 0 1.5rem; }

.card { background: #1a1a1a; border: 1px solid #333; border-radius: 8px; padding: 1.25rem; margin-bottom: 1rem; }
.card h2 { font-size: 1rem; font-weight: 600; margin-bottom: 0.75rem; color: #ccc; }

button, .btn { background: #2563eb; color: #fff; border: none; padding: 0.5rem 1.25rem; border-radius: 6px; cursor: pointer; font-size: 0.9rem; font-weight: 500; }
button:hover, .btn:hover { background: #1d4ed8; }
button:disabled { background: #555; cursor: not-allowed; }

input[type=text], input[type=password], textarea { width: 100%; background: #111; border: 1px solid #444; color: #e8e8e8; padding: 0.5rem 0.75rem; border-radius: 6px; font-size: 0.9rem; margin-bottom: 0.5rem; }

.code-display { font-family: monospace; font-size: 2rem; font-weight: 700; letter-spacing: 0.1em; color: #60a5fa; text-align: center; padding: 1rem; }

.progress-bar-wrap { background: #333; border-radius: 4px; height: 8px; overflow: hidden; margin-bottom: 0.25rem; }
.progress-bar { background: #2563eb; height: 100%; transition: width 0.3s; }

.balance-chip { display: inline-block; background: #1e3a5f; color: #93c5fd; padding: 0.25rem 0.75rem; border-radius: 999px; font-weight: 700; font-size: 0.95rem; }

.flash-ok  { color: #4ade80; margin-top: 0.5rem; }
.flash-err { color: #f87171; margin-top: 0.5rem; }

table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
th { text-align: left; padding: 0.4rem 0.75rem; color: #888; font-weight: 500; border-bottom: 1px solid #333; }
td { padding: 0.4rem 0.75rem; border-bottom: 1px solid #222; }

.tabs { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; }
.tab-btn { background: #222; border: 1px solid #444; color: #aaa; padding: 0.4rem 1rem; border-radius: 6px; cursor: pointer; font-size: 0.85rem; }
.tab-btn.active, .tab-btn:hover { background: #2563eb; color: #fff; border-color: #2563eb; }