:root { color-scheme: dark; font: 16px/1.55 "Segoe UI", sans-serif; color: #f5f0e5; background: #171717; --gold: #d8b76b; --muted: #aaa69c; }
* { box-sizing: border-box; }
body { margin: 0; }
header, main, footer { max-width: 960px; margin: auto; padding: 24px 32px; }
header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; border-bottom: 1px solid #454037; }
.brand { font: 30px Georgia, serif; color: var(--gold); text-decoration: none; }
header span, footer { color: var(--muted); font-size: 14px; }
main { padding-top: 28px; }
.mode { padding: 11px 16px; border-left: 4px solid var(--gold); background: #25231e; font-size: 14px; }
.mode.live { border-color: #9cca9d; }
.intro { margin: 28px 0 32px; max-width: 680px; }
h1, h2, h3 { font-family: Georgia, serif; line-height: 1.17; font-weight: normal; }
h1 { font-size: 34px; margin: 0 0 16px; }
h2 { font-size: 24px; margin: 0 0 18px; }
h3 { font-size: 21px; margin: 0 0 13px; }
p { max-width: 72ch; }
.intro p, .muted { color: var(--muted); }
.workspace { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 36px; }
.workspace section { margin-bottom: 34px; }
.offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 20px; }
.offer { padding: 22px; background: #202020; border-radius: 8px; border: 1px solid #3d3930; }
.offer-image { width: 100%; height: 96px; object-fit: contain; margin-bottom: 18px; }
.collection { grid-column: 1 / -1; }
.description { font-size: 14px; white-space: pre-line; overflow-wrap: anywhere; }
.price { color: var(--gold); font-size: 23px; margin: 20px 0; }
.identifier { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.cash { padding-top: 28px; border-top: 1px solid #454037; }
.account { padding: 24px; border: 1px solid #625237; border-radius: 8px; }
.balance { font-size: 34px; margin: 12px 0; color: var(--gold); }
.balance span { font-size: 17px; color: var(--muted); }
label { display: block; margin: 14px 0; font-size: 14px; }
input, select { display: block; width: 100%; font: inherit; padding: 10px; margin-top: 6px; color: #f5f0e5; background: #171717; border: 1px solid #82765f; border-radius: 4px; }
button, .button { display: inline-block; font: 600 15px/1.4 "Segoe UI", sans-serif; padding: 12px 18px; border: 1px solid var(--gold); border-radius: 5px; background: var(--gold); color: #171717; cursor: pointer; text-decoration: none; }
button:hover, .button:hover { background: #ebce8d; }
button.secondary { background: transparent; color: var(--gold); }
a { color: var(--gold); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid #f2d998; outline-offset: 4px; }
.notice { padding: 15px 18px; border-left: 4px solid #d8b76b; background: #30291e; overflow-wrap: anywhere; }
.review, .unlock { max-width: 640px; margin: 42px auto; padding: 28px; background: #202020; border: 1px solid #625237; border-radius: 8px; }
.back { display: inline-block; margin-top: 22px; }
.events { padding-left: 21px; font-size: 13px; overflow-wrap: anywhere; }
.events li { margin-bottom: 16px; }
details { color: var(--muted); font-size: 13px; }
summary { cursor: pointer; color: var(--gold); }
code { display: block; overflow-wrap: anywhere; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
footer { border-top: 1px solid #454037; margin-top: 28px; }
@media (max-width: 850px) { .workspace { grid-template-columns: 1fr; gap: 8px; } aside { grid-row: 1; } .account { margin-bottom: 24px; } }
@media (max-width: 520px) { header, main, footer { padding: 20px; } header { flex-direction: column; gap: 5px; } .review, .unlock { padding: 22px; } button { width: 100%; } }