@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600&family=Inter:wght@300;400;500;600&display=swap');

/* ── CSS Custom Properties ─────────────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg0:    #08090d;
  --bg1:    #0f1117;
  --bg2:    #161a23;
  --bg3:    #1c2130;
  --bgcard: #121620;

  /* Borders */
  --border:   rgba(255, 255, 255, 0.07);
  --borderem: rgba(255, 255, 255, 0.14);

  /* Accent Colors */
  --gold:    #c8a84b;
  --golddim: #7d6929;
  --goldbg:  rgba(200, 168, 75, 0.08);

  --blue:    #4a9eff;
  --bluedim: rgba(74, 158, 255, 0.12);

  --teal:   #2ec4b6;
  --red:    #e05c5c;
  --redbg:  rgba(224, 92, 92, 0.10);

  --green:   #4caf7d;
  --greenbg: rgba(76, 175, 125, 0.10);

  --orange:   #f5a623;
  --orangebg: rgba(245, 166, 35, 0.10);

  --purple: #9b72cf;

  /* Text */
  --t1: #eae6df;
  --t2: #8a92a6;
  --t3: #454d62;

  /* Misc */
  --r:  6px;
  --rl: 10px;

  /* Fonts */
  --font-d: 'Cinzel', serif;
  --font-b: 'Inter', sans-serif;
}

/* ── Reset ──────────────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Base ───────────────────────────────────────────────────────────────────── */
body {
  background:  var(--bg0);
  color:       var(--t1);
  font-family: var(--font-b);
  font-size:   14px;
  line-height: 1.5;
  min-height:  100vh;
}

a { color: var(--blue); }

code {
  background:    var(--bg2);
  padding:       1px 6px;
  border-radius: 3px;
  font-size:     12px;
}

hr {
  border:     none;
  border-top: 1px solid var(--border);
  margin:     14px 0;
}

ol li {
  margin-left:   20px;
  margin-bottom: 6px;
  color:         var(--t2);
  line-height:   1.8;
}

/* ── Utility ────────────────────────────────────────────────────────────────── */
.section-gap { margin-bottom: 16px; }

/* ── Feedback ───────────────────────────────────────────────────────────────── */
.error {
  background:    var(--redbg);
  border:        1px solid rgba(224, 92, 92, 0.3);
  border-radius: var(--r);
  padding:       10px 14px;
  color:         var(--red);
  font-size:     13px;
  margin-bottom: 14px;
}

.success {
  background:    var(--greenbg);
  border:        1px solid rgba(76, 175, 125, 0.3);
  border-radius: var(--r);
  padding:       10px 14px;
  color:         var(--green);
  font-size:     13px;
  margin-bottom: 14px;
}

.loading {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             12px;
  padding:         60px;
  color:           var(--t2);
}

.spinner {
  width:      26px;
  height:     26px;
  border:     2px solid var(--borderem);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation:  spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.empty {
  text-align: center;
  padding:    50px 20px;
  color:      var(--t2);
}
.empty-icon {
  font-size:     36px;
  opacity:       0.25;
  margin-bottom: 10px;
}
.empty h3 {
  font-size:     14px;
  color:         var(--t1);
  margin-bottom: 4px;
}