/* ─── Design tokens ─── */
:root {
  --rail:    #1e1f22;
  --side:    #2b2d31;
  --main:    #313338;
  --hover:   #383a40;
  --text:    #dbdee1;
  --muted:   #80848e;
  --faint:   #6d7178;
  --green:   #248046;
  --green-h: #1a6334;
  --red:     #da373c;
  --red-h:   #a8292e;
  --gray:    #4e5058;
  --gray-h:  #6d6f78;
  --blurple: #5865f2;
  --link:    #00a8fc;
}

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

body {
  margin: 0;
  background: var(--main);
  color: var(--text);
  font-family: 'gg sans', 'Segoe UI', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.375;
}

/* ─── Scrollbars ─── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.16); }

/* ─── Buttons ─── */
.gbtn {
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  transition: background-color .12s ease, opacity .12s ease;
}
.gbtn.green { background: var(--green); }
.gbtn.green:hover:not(:disabled) { background: var(--green-h); }
.gbtn.red   { background: var(--red); }
.gbtn.red:hover:not(:disabled)   { background: var(--red-h); }
.gbtn.gray  { background: var(--gray); }
.gbtn.gray:hover:not(:disabled)  { background: var(--gray-h); }
.gbtn.blue  { background: var(--blurple); }
.gbtn.blue:hover:not(:disabled)  { filter: brightness(1.1); }
.gbtn:disabled { opacity: .38; cursor: not-allowed; }

/* ─── Form inputs ─── */
input, select {
  background: var(--rail);
  color: var(--text);
  border: 1px solid transparent;
  border-radius: 3px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: inherit;
}
input:focus, select:focus { outline: none; border-color: var(--blurple); }
input::placeholder { color: var(--faint); }

/* ─── Modal / dialog ─── */
dialog {
  background: var(--side);
  color: var(--text);
  border: none;
  border-radius: 12px;
  padding: 24px 28px;
  min-width: 360px;
  box-shadow: 0 8px 32px rgba(0,0,0,.6);
}
dialog::backdrop { background: rgba(0,0,0,.72); }

/* ─── Utility ─── */
.empty { color: var(--faint); text-align: center; padding: 40px; font-style: italic; }
.err   { color: var(--red); font-size: 13px; margin-top: 10px; min-height: 16px; }