/* Shared by portal.html, catalog.html, register.html, retreat.html and 404.html:
   the design tokens and the rules that were copied verbatim between them.
   Each page links this before its own <style>, which keeps anything that
   differs (retreat.html, for one, sets --r to 12px). Served no-cache like the
   pages themselves (public/.htaccess), so a deploy reaches browsers at once. */

:root {
  --bg:          #0e0b16;
  --bg-deep:     #0b0913;
  --bg-card:     #16121f;
  --bg-input:    rgba(255,255,255,0.06);
  --gold:        #c9a84c;
  --gold-light:  #e2c47a;
  --cream:       #f0ebe0;
  --muted:       #9e9488;
  --border:      rgba(201,168,76,0.18);
  --border-soft: rgba(255,255,255,0.08);
  --green:       #34d399;
  --red:         #f87171;
  --r:           10px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
.serif { font-family: 'Libre Baskerville', serif; }
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
label { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
input:focus, select:focus { border-color: var(--gold); }
input::placeholder { color: rgba(255,255,255,0.18); }
select { cursor: pointer; }
select option { background: #1c1628; }
.btn:hover { background: var(--gold-light); }
.error-msg.show { display: block; }
.ac-list { position: fixed; z-index: 500; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 8px; max-height: 220px; overflow-y: auto; box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
.ac-item { padding: 8px 12px; font-size: 13px; color: var(--cream); cursor: pointer; }
.ac-item:hover, .ac-item.hi { background: rgba(201,168,76,0.12); color: var(--gold-light); }
h1 em { font-style: italic; color: var(--gold-light); }
.add-btn:hover { border-color: var(--gold); background: rgba(201,168,76,0.05); }
.typo-hint.show { display: block; }
.typo-hint button { background: none; border: none; padding: 0; color: var(--gold-light); text-decoration: underline; cursor: pointer; font-size: 12px; font-family: inherit; }