/* The buy, admin and legal pages: the HUD page's own look (chaoshud.css) plus these. */
.page { max-width: 640px; margin: 0 auto; padding: 56px 20px 20px; }
.page.wide { max-width: 1040px; }
.page h1 { font-size: clamp(32px, 4.4vw, 44px); }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px; margin: 22px 0 0; }
.panel.on { border-color: rgba(180, 242, 35, .45); }
.panel p { color: var(--soft); margin: 0 0 12px; }
.price { font: 700 40px var(--display); margin: 0 0 2px; color: var(--ink) !important; }
.price small { font: 600 16px var(--text); color: var(--muted); }
.code { font: 700 34px ui-monospace, Consolas, monospace; letter-spacing: 2px; color: var(--ink) !important; background: var(--panel-2);
        border: 1px solid rgba(180, 242, 35, .45); border-radius: 12px; padding: 14px; text-align: center; }
.who { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 15px; margin: 18px 0 0; }
.who img { width: 36px; height: 36px; border-radius: 50%; }
.who b { color: var(--ink); }
.linkish { background: none; border: 0; color: var(--accent); font: inherit; cursor: pointer; padding: 0; text-decoration: underline; }
.consent { display: flex; gap: 12px; align-items: flex-start; margin: 18px 0 0; font-size: 15px; color: var(--ink); cursor: pointer; }
.consent input { width: 20px; height: 20px; flex: none; margin-top: 2px; accent-color: var(--accent); }
.agree { font-size: 14px; color: var(--muted); margin: 10px 0 0; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 18px 0 6px; }
button.btn { cursor: pointer; font-family: inherit; }
button.btn[disabled] { opacity: .5; cursor: default; }
input.field { font: 15px var(--text); color: var(--ink); background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 11px 14px; }
input.field:focus { outline: none; border-color: rgba(180, 242, 35, .6); }
#say { display: none; border-color: rgba(255, 190, 64, .5); color: #ffd27a; }
#toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--panel-2); border: 1px solid var(--line);
         padding: 10px 16px; border-radius: 10px; font-size: 15px; display: none; z-index: 10; }
#toast.bad { border-color: #ff6b60; color: #ffb3ad; }
table.people { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 10px; }
table.people th { text-align: left; color: var(--muted); font-weight: 600; padding: 8px 8px; border-bottom: 1px solid var(--line); }
table.people td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.chip { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 13px; border: 1px solid var(--line); color: var(--muted); }
.chip.good { border-color: rgba(180, 242, 35, .5); color: var(--accent); }
.chip.bad { border-color: rgba(255, 107, 96, .5); color: #ffb3ad; }
.legal h2 { font-size: 22px; margin: 30px 0 10px; }
.legal p, .legal li { color: var(--soft); }
.legal .box { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; color: var(--soft); }
.legal .updated { color: var(--muted); font-size: 14px; }
@media (max-width: 700px) { .hide-small { display: none; } }