:root {
  --bg: #05261c;
  --bg-2: #0a3528;
  --panel: #0e4031;
  --panel-2: #135240;
  --line: rgba(246, 239, 224, 0.14);
  --cream: #f6efe0;
  --muted: rgba(246, 239, 224, 0.68);
  --faint: rgba(246, 239, 224, 0.4);
  --gold: #e3b448;
  --gold-2: #f3d37f;
  --rose: #e8577e;
  --sky: #4fb3d9;
  --lime: #8ccf5a;
  --ok: #69d38a;
  --bad: #ef6a6a;
  --ink: #0a1712;
  --a0: #e3b448;
  --a1: #e8577e;
  --a2: #4fb3d9;
  --a3: #8ccf5a;
  --display: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', system-ui, sans-serif;
  --body: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--cream);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
.display { font-family: var(--display); letter-spacing: 0.01em; }

/* checkerboard silks texture used behind headers */
.silks-bg {
  background-image:
    radial-gradient(120% 140% at 100% 0%, rgba(227, 180, 72, 0.16), transparent 55%),
    radial-gradient(90% 120% at 0% 100%, rgba(232, 87, 126, 0.12), transparent 55%);
}

#toasts { position: fixed; left: 50%; top: 14px; transform: translateX(-50%); z-index: 99; display: grid; gap: 8px; width: min(92vw, 460px); pointer-events: none; }
.toast { background: var(--cream); color: var(--ink); padding: 12px 16px; border-radius: 12px; font-weight: 600; box-shadow: 0 10px 30px rgba(0,0,0,.35); animation: tin .25s ease-out; transition: opacity .4s, transform .4s; }
.toast.error { background: #ffd9d9; color: #5a0d0d; }
.toast.out { opacity: 0; transform: translateY(-8px); }
@keyframes tin { from { opacity: 0; transform: translateY(-10px); } }

.badge { display: inline-grid; place-items: center; min-width: 2.1em; height: 2.1em; padding: 0 .35em; border-radius: .5em; font-family: var(--display); font-weight: 800; color: var(--ink); line-height: 1; }
.conn { position: fixed; right: 10px; bottom: 10px; z-index: 50; font-size: 12px; padding: 6px 10px; border-radius: 999px; background: #5a0d0d; color: #ffd9d9; display: none; }
.conn.show { display: block; }