:root {
  --bg: #0b0f17; --card: #151b27; --card2: #1c2433; --line: #283247;
  --tx: #e8ecf3; --mut: #8b95a7; --acc: #3b82f6; --ok: #22c55e; --warn: #f59e0b; --bad: #ef4444;
  --jblue: #0b1bb0; --jblue2: #060c7a; --jgold: #ffcc33;
}
* { box-sizing: border-box }
html, body { margin: 0; background: var(--bg); color: var(--tx); font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif }
a { color: var(--acc) }
h1, h2, h3 { line-height: 1.15 }
button { font: inherit; cursor: pointer; border: 0; border-radius: 10px; padding: .65em 1.1em; background: var(--acc); color: #fff; font-weight: 650 }
button:disabled { opacity: .35; cursor: default }
button.n { background: #3a4458 }
button.ok { background: var(--ok) }
button.bad { background: var(--bad) }
button.warn { background: var(--warn); color: #111 }
button.ghost { background: transparent; color: var(--mut); border: 1px solid var(--line) }
input, select, textarea { font: inherit; color: var(--tx); background: var(--card2); border: 1px solid var(--line); border-radius: 8px; padding: .55em .7em }
textarea { resize: vertical }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px }
.mut { color: var(--mut) }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--bad); flex: none }
.dot.on { background: var(--ok) }
.sig { display: inline-flex; align-items: center; justify-content: center; background: #05070c; border: 3px solid #fff; border-radius: 10px; padding: 4px 8px; overflow: hidden }
.sig img { display: block; max-width: 100%; max-height: 100%; object-fit: contain }
.qr { background: #fff; padding: 12px; border-radius: 12px; display: inline-block; line-height: 0 }
.qr img, .qr canvas { width: 100%; height: auto; display: block }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: #111827; border: 1px solid var(--line); padding: 10px 16px; border-radius: 10px; z-index: 999; max-width: 90vw; box-shadow: 0 8px 30px rgba(0,0,0,.5) }
[hidden] { display: none !important }

/* Account UI */
.userbar { display: flex; gap: 14px; align-items: center; font-size: .92rem }
.userbar a { color: var(--tx); text-decoration: none; opacity: .85 }
.userbar a:hover { opacity: 1; text-decoration: underline }
.topnav { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); background: var(--card) }
.topnav .brand { font-weight: 900; font-size: 1.15rem; color: var(--tx); text-decoration: none; letter-spacing: -.01em }
.topnav .sp { flex: 1 }
.form { display: flex; flex-direction: column; gap: 12px }
.form label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: .92rem }
.form input { width: 100% }
.msg { padding: 10px 14px; border-radius: 10px; font-weight: 600 }
.msg.bad { background: rgba(239,68,68,.12); border: 1px solid var(--bad); color: #fca5a5 }
.msg.good { background: rgba(34,197,94,.12); border: 1px solid var(--ok); color: #86efac }
table.list { width: 100%; border-collapse: collapse }
table.list th { text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--mut); padding: 8px; border-bottom: 1px solid var(--line) }
table.list td { padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: middle }
table.list td button { padding: .4em .8em; font-size: .85rem }
.pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .78rem; font-weight: 700; background: var(--card2) }
.pill.pending { background: var(--warn); color: #111 }
.pill.active, .pill.live { background: rgba(34,197,94,.2); color: #86efac }
.pill.disabled, .pill.expired { background: rgba(239,68,68,.18); color: #fca5a5 }
.pill.admin { background: rgba(59,130,246,.25); color: #93c5fd }
.chips { display: flex; gap: 6px; flex-wrap: wrap }
.tchip { border-radius: 6px; padding: 2px 8px; font-size: .82rem; font-weight: 700; background: var(--card2); border-left: 5px solid }