@font-face { font-family: 'Chakra Petch'; font-weight: 400; src: url('fonts/ChakraPetch-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Chakra Petch'; font-weight: 600 700; src: url('fonts/ChakraPetch-Bold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; font-weight: 100 800; src: url('fonts/JetBrainsMono.ttf') format('truetype'); font-display: swap; }

/* Teal follows the official Dubai Finance logo; plum is the alternative direction. */
:root, :root[data-theme="teal"] {
  --bg: #00222b; --bg-2: #003642; --panel: #01303b; --panel-2: #024150;
  --line: #9fd7e3; --line-soft: rgba(159,215,227,.22); --grid: rgba(159,215,227,.07);
  --ink: #f2fbff; --soft: #b9dbe3; --muted: #7fb0bc;
  --accent: #cda28b; --accent-ink: #00222b; --alert: #4fd1e0;
  --ok: #3ddc97; --bad: #ff7a6b; --warn: #ffcf5a;
  --stripe: linear-gradient(90deg, #005a6e, #cda28b);
}
:root[data-theme="plum"] {
  --bg: #170f2b; --bg-2: #241a3c; --panel: #1d1530; --panel-2: #2a1f42;
  --line: #c9b6e8; --line-soft: rgba(201,182,232,.22); --grid: rgba(201,182,232,.07);
  --ink: #f5f2fa; --soft: #cbbde0; --muted: #a993c9;
  --accent: #d9a845; --accent-ink: #170f2b; --alert: #e0559a;
  --stripe: linear-gradient(90deg, #88165a, #d9a845);
}
:root { --display: 'Chakra Petch', 'Segoe UI', Arial, sans-serif; --mono: 'JetBrains Mono', Consolas, monospace; color-scheme: dark; }
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html, body { background: var(--bg); color: var(--ink); font-family: var(--display); }
body { min-height: 100vh; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 48px 48px; }
body::before { content: ''; position: fixed; left: 0; right: 0; top: 0; height: 6px; background: var(--stripe); z-index: 5; }
button, input { font: inherit; color: inherit; }
.mono { font-family: var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.accent { color: var(--accent); }
.alert { color: var(--alert); }
.logo-plate { background: #fff; border-radius: 10px; padding: 8px 14px; display: inline-flex; gap: 14px; align-items: center; }
.logo-plate img { height: 44px; width: auto; display: block; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 28px; border-radius: 12px;
  border: 2px solid var(--accent); background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 20px; letter-spacing: .04em; cursor: pointer; }
.btn.ghost { background: transparent; color: var(--accent); }
.btn:disabled { opacity: .45; cursor: default; }
.btn:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--alert); outline-offset: 3px; }
.qr { background: #fff; padding: 12px; border-radius: 10px; display: inline-block; line-height: 0; }
.qr img, .qr svg { display: block; width: 100%; height: auto; }