:root { --bg: #1b120d; --card: #271a12; --line: #4a3524; --ink: #f6ead2; --dim: #b9a27c; --gold: #d8b56a; --gold2: #b8892f; --red: #b04a3a; --ok: #5b9a62; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --bg: #f6efe2; --card: #fffaf0; --line: #d8c7a6; --ink: #2b1d12; --dim: #6e5a3d; --gold: #8a5f12; --gold2: #8a5f12; --red: #a23b2b; --ok: #2f7a3a; } }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.5 Georgia, "Times New Roman", serif; }
main { max-width: 760px; margin: 0 auto; padding: 18px 16px 60px; }
h1 { font-size: 28px; margin: 6px 0 4px; } h2 { font-size: 21px; margin: 26px 0 8px; color: var(--gold); } h3 { font-size: 17px; margin: 14px 0 4px; }
.eyebrow { letter-spacing: .28em; text-transform: uppercase; font-size: 12px; color: var(--gold); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin: 10px 0; }
.sub { color: var(--dim); font-size: 15px; margin: 4px 0; }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
input, select, button { font: inherit; border-radius: 8px; border: 1px solid var(--line); padding: 9px 12px; background: var(--bg); color: var(--ink); }
input[type=checkbox] { width: 20px; height: 20px; padding: 0; }
button { cursor: pointer; background: var(--card); } button.pri { background: linear-gradient(180deg, var(--gold2), #7c5614); color: #fff8e6; border-color: var(--gold); font-weight: 700; }
button:disabled { opacity: .5; cursor: default; }
.msg { padding: 10px 12px; border-radius: 8px; margin: 10px 0; } .msg.err { background: color-mix(in srgb, var(--red) 22%, transparent); } .msg.ok { background: color-mix(in srgb, var(--ok) 22%, transparent); }
table { width: 100%; border-collapse: collapse; font-size: 15px; } td, th { padding: 6px 4px; border-bottom: 1px solid var(--line); text-align: left; }
.tag { font-size: 12px; padding: 2px 8px; border-radius: 99px; border: 1px solid var(--line); } .tag.paid, .tag.covered, .tag.host, .tag.free { color: var(--ok); } .tag.unpaid { color: var(--red); }
footer { color: var(--dim); font-size: 13px; text-align: center; margin-top: 30px; }
a { color: var(--gold); }