/* Эдем-4 — панель сценария */
:root {
  --bg: #12161d;
  --panel: #1a2029;
  --ink: #d8dee9;
  --dim: #8892a4;
  --accent: #e0a458;
  --quest: #3d6db5;
  --event: #a63d40;
  --side: #4b7a4b;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.55 system-ui, sans-serif;
}
nav {
  display: flex; gap: 18px; align-items: baseline;
  padding: 12px 20px;
  background: var(--panel);
  border-bottom: 1px solid #2a3242;
}
nav a { color: var(--dim); text-decoration: none; }
nav a:hover { color: var(--ink); }
nav .brand { color: var(--accent); font-weight: 600; }
main { padding: 20px; }
h1 { font-weight: 600; }
h2 small { color: var(--dim); font-weight: 400; }
.sub { color: var(--dim); max-width: 70ch; }
a { color: #7fa8d9; }
a:hover { color: #a9c8ec; }

/* граф */
#cy {
  height: calc(100vh - 150px);
  min-height: 500px;
  background: var(--bg);
  border: 1px solid #2a3242;
  border-radius: 8px;
}
.legend { margin-top: 8px; color: var(--dim); font-size: 13px; }
.chip {
  display: inline-block; padding: 1px 8px; border-radius: 10px;
  margin-right: 8px; color: #fff;
}
.chip.quest { background: var(--quest); }
.chip.event { background: var(--event); }
.chip.side { background: var(--side); }

/* карточки персонажей */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}
.card {
  background: var(--panel);
  border: 1px solid #2a3242;
  border-radius: 8px;
  padding: 14px 16px;
}
.card h3 { margin: 0 0 4px; font-size: 16px; }
.card .role { color: var(--dim); margin: 0 0 8px; font-size: 13px; }
.card p { margin: 6px 0; font-size: 14px; }
.badge {
  display: inline-block;
  font-size: 12px; color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 10px; padding: 0 8px; margin-bottom: 6px;
}
.relations { font-size: 13px; color: var(--dim); }
.more { font-size: 13px; }

/* таблицы */
table { border-collapse: collapse; }
.knowledge th, .detail th {
  text-align: left; vertical-align: top;
  color: var(--dim); font-weight: 500;
}
.knowledge td, .knowledge th, .detail td, .detail th {
  border: 1px solid #2a3242;
  padding: 8px 12px;
  vertical-align: top;
}
.knowledge td.act { font-size: 22px; color: var(--accent); width: 1%; }
.knowledge .learn { background: rgba(224, 164, 88, 0.06); }
.knowledge p, .detail p { margin: 0; }
.detail { width: 100%; max-width: 100ch; }
.detail th { width: 160px; }
.crumbs { margin: 0; }
.broken { color: var(--event); }
em { color: var(--dim); }