/* BAPC NFT Platform. Tokens shared with the sibling BAPC apps (Yānqīthā, Cradara-Karnóc). No nft.vis exists yet. */
:root {
  --onyx: #0e1118; --charcoal: #1c222c; --graphite: #303a46; --crimson: #e83d4c; --deep-red: #8c202b;
  --gold: #e7b94d; --warm-gold: #f9d780; --platinum: #d9e3e9; --text: #f4f6f8; --text-2: #b8c1cc;
  --ok: #7fd4a0; --warn: #f2b35a; --glass: rgba(28, 34, 44, .82); --glass-edge: rgba(217, 227, 233, .16);
  --cut: 14px; --radius-pill: 999px; --fast: 180ms;
  --font: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display: 'Palatino Linotype', Palatino, Georgia, serif;
  --mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background-color: var(--onyx); }
body { margin: 0; font: 16px/1.55 var(--font); color: var(--text); background-color: var(--onyx); background-image: radial-gradient(1200px 600px at 80% -10%, rgba(140, 32, 43, .35), transparent 60%), radial-gradient(900px 500px at -10% 110%, rgba(231, 185, 77, .12), transparent 60%); min-height: 100vh; }
a { color: var(--warm-gold); }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--warm-gold); outline-offset: 2px; }
.skip { position: absolute; left: -999px; top: 0; background: var(--gold); color: var(--onyx); padding: 8px 12px; }
.skip:focus { left: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.top { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; padding: 12px 20px; background: var(--glass); border-bottom: 1px solid var(--glass-edge); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-family: var(--display); font-size: 1.2rem; }
nav ul { display: flex; flex-wrap: wrap; gap: 4px 16px; list-style: none; margin: 0; padding: 0; }
nav a { color: var(--platinum); text-decoration: none; padding: 4px 2px; }
nav a[aria-current='page'] { color: var(--warm-gold); border-bottom: 2px solid var(--gold); }
.account { display: flex; gap: 10px; align-items: center; }
.who { color: var(--text-2); }
main { max-width: 1080px; margin: 0 auto; padding: 24px 16px 48px; }
h1, h2 { font-family: var(--display); font-weight: 600; line-height: 1.2; }
h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 8px 0 12px; }
.lead { color: var(--text-2); font-size: 1.1rem; max-width: 60ch; }
.muted { color: var(--text-2); }
.btn { display: inline-flex; gap: 8px; align-items: center; padding: 9px 16px; border-radius: var(--radius-pill); border: 2px solid transparent; font: inherit; cursor: pointer; text-decoration: none; transition: background var(--fast); }
.btn.primary { background: var(--gold); color: var(--onyx); font-weight: 600; }
.btn.signin { color: var(--warm-gold); border-color: var(--crimson); background: #14171f; font-weight: 600; }
.btn.ghost { color: var(--platinum); border-color: var(--graphite); background: transparent; }
.hero { padding: 24px 0 8px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; list-style: none; padding: 0; margin: 24px 0; }
.card, .panel { background: var(--glass); border: 1px solid var(--glass-edge); border-radius: var(--cut); padding: 16px 18px; }
.card h2 { font-size: 1.2rem; margin: 0 0 6px; color: var(--warm-gold); }
.panel { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--glass-edge); vertical-align: top; }
th { color: var(--platinum); font-weight: 600; }
code { font-family: var(--mono); font-size: .9em; word-break: break-all; color: var(--platinum); }
.facts { display: grid; grid-template-columns: minmax(140px, max-content) 1fr; gap: 6px 18px; }
.facts dt { color: var(--text-2); }
.facts dd { margin: 0; }
.banner { margin: 0; padding: 8px 20px; background: #2a2416; color: var(--warm-gold); border-bottom: 1px solid rgba(242, 179, 90, .35); }
input { font: inherit; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--graphite); background: var(--charcoal); color: var(--text); }
label { color: var(--platinum); }
.foot { color: var(--text-2); text-align: center; padding: 16px; border-top: 1px solid var(--glass-edge); font-size: .9rem; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }