:root {
  --bg: #0e1117;
  --bg-2: #151a23;
  --bg-3: #1d2430;
  --line: #2a3240;
  --line-2: #3a4455;
  --text: #e6edf3;
  --text-dim: #8b98a9;
  --accent: #7aa2ff;
  --accent-2: #ffb86b;
  --ok: #5ed297;
  --warn: #ffb86b;
  --bad: #ff6b7a;

  --damage:  #ff6b7a;
  --heal:    #5ed297;
  --buff:    #7aa2ff;
  --debuff:  #c678dd;
  --create_object: #ffb86b;
  --teleport: #61dafb;
  --summon:   #e5c07b;
  --control:  #f07178;

  --cat-physical: #ff8f70;
  --cat-skill:    #5ed297;
  --cat-mental:   #7aa2ff;
  --cat-social:   #c678dd;
  --cat-luck:     #ffd866;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; background: var(--bg); color: var(--text);
  font: 14px -apple-system, "SF Pro Text", "Segoe UI", Inter, system-ui, sans-serif;
  height: 100%;
}
button, input, select, textarea { font: inherit; color: inherit; background: var(--bg-3); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; }
button { cursor: pointer; }
button.primary { background: var(--accent); color: #0a0f18; border-color: transparent; font-weight: 600; }
button.ghost { background: transparent; }
button.danger { color: var(--bad); border-color: var(--line-2); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

.muted { color: var(--text-dim); }
.hr { height: 1px; background: var(--line); margin: 10px 0; }
.pill { display:inline-block; padding: 2px 10px; border-radius: 999px; background: var(--bg-3); border: 1px solid var(--line); font-size: 12px; }
.chip { display:inline-flex; gap: 6px; align-items: center; padding: 3px 8px; border-radius: 14px; background: var(--bg-3); border: 1px solid var(--line); font-size: 12px; }
.chip.core-damage  { border-color: var(--damage);  color: var(--damage); }
.chip.core-heal    { border-color: var(--heal);    color: var(--heal); }
.chip.core-buff    { border-color: var(--buff);    color: var(--buff); }
.chip.core-debuff  { border-color: var(--debuff);  color: var(--debuff); }
.chip.core-create_object { border-color: var(--create_object); color: var(--create_object); }
.chip.core-teleport { border-color: var(--teleport); color: var(--teleport); }
.chip.core-summon   { border-color: var(--summon);   color: var(--summon); }
.chip.core-control  { border-color: var(--control);  color: var(--control); }
.warning { color: var(--warn); font-size: 11px; }

/* ---- Shared top bar with back-link to /admin/ ---- */
.topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 16px; background: var(--bg-2); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10;
}
.topbar .back-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 6px; border: 1px solid var(--line);
  background: var(--bg-3); color: var(--text-dim); text-decoration: none; font-size: 12px;
}
.topbar .back-link:hover { color: var(--accent); border-color: var(--accent); }
.topbar .tool-label { color: var(--text); font-weight: 700; margin-right: 6px; }
.topbar .tool-tag { color: var(--text-dim); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); }
.topbar .nav { display: flex; flex-wrap: wrap; gap: 2px 10px; }
.topbar .nav a { color: var(--text-dim); text-decoration: none; font-size: 13px; }
.topbar .nav a:hover { color: var(--text); }
.topbar .nav a.active { color: var(--accent); }
.topbar .saving { margin-left: auto; font-size: 12px; color: var(--text-dim); }

/* "baseline" highlight for Human, used in every race list/table.
   Subtle: a thin accent bar on the left, a faint warm tint, and a small tag
   that says "baseline". Doesn't compete with the .active / selection state.
   NOTE: The div / tr treatments are kept separate on purpose. Putting
   `position: relative` on a <tr> (needed for a ::before accent bar) shifts
   the cells of sticky-column tables. For table rows we therefore rely on
   pure background + box-shadow, which don't perturb layout. */
div.is-baseline, li.is-baseline {
  position: relative;
  background: rgba(255,184,107,0.04) !important;
}
div.is-baseline::before, li.is-baseline::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--accent-2); opacity: 0.75; pointer-events: none;
}
tr.is-baseline > td               { background: rgba(255,184,107,0.06) !important; }
tr.is-baseline > td:first-child   { box-shadow: inset 3px 0 0 var(--accent-2); }
.baseline-tag {
  display: inline-block; padding: 1px 6px; border-radius: 999px;
  background: rgba(255,184,107,0.14); color: var(--accent-2);
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  margin-left: 6px; vertical-align: middle;
}

.cat-chip { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.cat-chip.Physical { background: var(--cat-physical); }
.cat-chip.Skill    { background: var(--cat-skill); }
.cat-chip.Mental   { background: var(--cat-mental); }
.cat-chip.Social   { background: var(--cat-social); }
.cat-chip.Luck     { background: var(--cat-luck); }

.budget-bar { position: relative; height: 20px; border-radius: 999px; background: var(--bg-3); overflow: hidden; }
.budget-fill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, var(--ok), var(--warn)); transition: width .2s; }
.budget-fill.over { background: linear-gradient(90deg, var(--warn), var(--bad)); }
.budget-cap { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--text); opacity: 0.7; }
.budget-label { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; font-size: 11px; font-variant-numeric: tabular-nums; font-weight: 700; }