/* ============================================================
   Лист персонажа D&D 5e
   Тёплая карнавальная палитра
   ============================================================ */

:root {
  /* Тёплая карнавальная палитра */
  --amber: #d4a574;
  --burgundy: #7a2c2c;
  --burgundy-deep: #5a1f1f;
  --lilac: #5e4b7a;
  --lilac-soft: #8a76a8;
  --gold: #c9a961;
  --gold-soft: #e0c585;
  --gold-leaf: #d4af37;    /* чистое золото — свечение level-up */
  --spell-star: #c4a01a;   /* золотая звезда подготовленного заклинания */

  /* День */
  --bg: #f5ebd6;
  --bg-elev: #faf2e0;
  --bg-sunken: #ede0c4;
  --ink: #3a2a1a;
  --ink-soft: #6b5340;
  --ink-mute: #97836a;
  --line: #d8c3a0;
  --line-soft: #e6d4b3;
  --accent: var(--burgundy);
  --accent-2: var(--lilac);
  --good: #4a7a3a;
  --good-dark: #5e9a4a;    /* hover на кнопке полного исцеления */
  --bad: #a83232;
  --warn: #b87a1f;

  /* Производные / алиасы */
  --surface-hi: #fff7d6;              /* подсвеченная поверхность (подготовленное заклинание) */
  --accent-warm: #c46c2e;             /* тёплый оранжевый акцент (rollable hover) */
  --accent-soft: #f6e7c8;             /* мягкий янтарный фон (кнопка Cast) */

  /* Текст на акцентных фонах */
  --on-accent: var(--bg);             /* авто-переключается вместе с --bg */
  --on-gold: #1a1530;                 /* тёмный текст на золотом фоне */

  /* Тултипы */
  --tooltip-bg: #2a2018;              /* фон тултипа (день) */
  --tooltip-color: #f7efdf;           /* текст тултипа (день) */

  /* Баннер level-up */
  --banner-good-bg: #2c4a2c;
  --banner-good-border: #1a2e1a;

  /* Цвета hover для кнопок броска заклинаний */
  --spell-hit-color: #2d6ea0;
  --spell-dmg-color: #a03c3c;
  --spell-heal-color: #3c8246;

  /* TODO(kenku-ky0 T4-T8): if browser support permits, express overlay tokens
     as color-mix(...) of base palette tokens to reduce per-theme overrides
     from ~36 hand-rolled values to ~8 base colors + alpha pairs. */
  /* Прозрачные оверлеи — варианты цветов палитры */
  --overlay-burgundy-xs: rgba(122, 44, 44, 0.04);   /* фоновый radial-gradient body */
  --overlay-lilac-xs: rgba(94, 75, 122, 0.04);       /* фоновый radial-gradient body */
  --overlay-lilac-sm: rgba(94, 75, 122, 0.06);       /* concentration block */
  --overlay-line-sm: rgba(216, 195, 160, 0.06);      /* col-left фоновый градиент */
  --overlay-line-md: rgba(216, 195, 160, 0.08);      /* col-right фоновый градиент */
  --overlay-gold-xs: rgba(201, 169, 97, 0.08);       /* dice-pool inset shadow */
  --overlay-gold-sm: rgba(201, 169, 97, 0.12);       /* luck-block, widget-ac */
  --overlay-gold-md: rgba(201, 169, 97, 0.14);       /* dice-pool formula bg */
  --overlay-gold-lg: rgba(201, 169, 97, 0.18);       /* night dice-pool formula bg */
  --overlay-gold-border: rgba(201, 169, 97, 0.35);   /* dice-pool formula border */
  --overlay-gold-border-md: rgba(201, 169, 97, 0.40); /* night dice-pool formula border */
  --overlay-gold-focus: rgba(201, 169, 97, 0.20);    /* md-field focus ring (night) */
  --overlay-gold-ac: rgba(201, 169, 97, 0.15);       /* widget-ac gradient */
  --overlay-bad-xs: rgba(168, 50, 50, 0.08);         /* death-saves banner */
  --overlay-bad-border: rgba(168, 50, 50, 0.40);     /* btn--danger border */
  --overlay-burgundy-focus: rgba(122, 44, 44, 0.15); /* focus ring на burgundy-bordered fields */
  --overlay-good-sm: rgba(74, 122, 58, 0.08);        /* saved-pulse animation */
  --overlay-good-md: rgba(74, 122, 58, 0.10);        /* worn item */
  --overlay-ink-lg: rgba(58, 42, 26, 0.40);          /* modal backdrop */
  --overlay-ink-xs: rgba(58, 42, 26, 0.04);          /* topbar name hover */
  --overlay-black-sm: rgba(0, 0, 0, 0.08);           /* feather drop-shadow */
  --overlay-black-md: rgba(0, 0, 0, 0.20);           /* dropdown box-shadow */
  --overlay-black-lg: rgba(0, 0, 0, 0.35);           /* tooltip shadow */
  --overlay-black-xs: rgba(0, 0, 0, 0.04);           /* night tooltip border-color */
  --overlay-white-xs: rgba(255, 255, 255, 0.08);     /* tooltip border, inset glow */
  --overlay-warn-sm: rgba(184, 122, 31, 0.12);       /* concentration save banner */
  --overlay-gold-leaf-sm: rgba(212, 175, 55, 0.40);  /* level-up pulse start */
  --overlay-gold-leaf-md: rgba(212, 175, 55, 0.60);  /* level-up glow */
  --overlay-gold-leaf-lg: rgba(212, 175, 55, 0.80);  /* level-up pulse peak */
  --overlay-insp-glow: rgba(255, 200, 0, 0.50);      /* инспирация — звёздное свечение */
  --overlay-spell-hit: rgba(45, 110, 160, 0.15);
  --overlay-spell-dmg: rgba(160, 60, 60, 0.15);
  --overlay-spell-heal: rgba(60, 130, 70, 0.15);

  /* Системные */
  --radius: 6px;
  --radius-lg: 10px;
  --shadow-sm: 0 1px 2px rgba(58, 42, 26, 0.08), 0 1px 0 rgba(255,255,255,0.4) inset;
  --shadow-md: 0 2px 6px rgba(58, 42, 26, 0.12), 0 1px 0 rgba(255,255,255,0.5) inset;
  --shadow-lg: 0 8px 24px rgba(58, 42, 26, 0.18);

  --font-display: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* ============================================================
   База
   ============================================================ */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Состаренная бумага — едва-едва заметная.
 * QA_2 Bug #14/#15 fix: после неудачного refactor темы здесь оставался
 * orphan-блок без селектора (background-image без `body {`) — это ломало
 * парсинг CSS дальше по файлу и каскадно роняло стилизацию кнопок и табов
 * в листе персонажа. Сейчас осталась одна валидная декларация. */
body {
  background-image:
    radial-gradient(ellipse at 20% 10%, var(--overlay-burgundy-xs) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 90%, var(--overlay-lilac-xs) 0%, transparent 50%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.23 0 0 0 0 0.16 0 0 0 0 0.10 0 0 0 0.05 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
  background-attachment: fixed;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}

textarea, input {
  font: inherit;
  color: inherit;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 6px 8px;
  resize: vertical;
}

textarea:focus, input:focus, button:focus-visible {
  outline: 2px solid var(--burgundy);
  outline-offset: 1px;
}

/* ============================================================
   Скелет — header + три колонки
   ============================================================ */

.app {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100vh;
  overflow: hidden;
}

.app__columns {
  display: grid;
  /* wave 1.11 / kenku-niv — 5-cell grid: left | resizer | center | resizer | right.
     Default fallback = три равные доли (1fr / 1fr / 1fr). Если пользователь
     ресайзил колонки, column_resize.js выставит --col-left-w/--col-right-w
     в пикселях, и центр (1fr) растянется по остатку. */
  grid-template-columns: var(--col-left-w, 1fr) 6px 1fr 6px var(--col-right-w, 1fr);
  gap: 0;
  height: 100%;
  overflow: hidden;
}

.col-resizer {
  cursor: col-resize;
  background: var(--line);
  transition: background-color 0.12s ease;
  user-select: none;
  touch-action: none;
}
.col-resizer:hover,
.col-resizer:active {
  background: var(--accent-warm);
}

@media (max-width: 1100px) {
  .app__columns { grid-template-columns: 1fr; overflow: auto; }
  .col { max-height: none !important; }
  .col-resizer { display: none; }
}

.col {
  overflow-y: auto;
  padding: 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.col::-webkit-scrollbar { width: 8px; }
.col::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }

.col--left { border-right: 1px solid var(--line); background: linear-gradient(180deg, transparent, var(--overlay-line-sm)); }
.col--center { padding: 16px 20px 80px; }
.col--right { border-left: 1px solid var(--line); background: linear-gradient(180deg, var(--overlay-line-md), transparent); position: sticky; top: 0; }

/* ============================================================
   STICKY HEADER
   ============================================================ */

.topbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(180px, 320px) auto auto;
  align-items: center;
  gap: 24px;
  padding: 10px 20px;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  z-index: 50;
}

.topbar__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.topbar__feather {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  color: var(--ink);
  transform: rotate(-10deg);
  filter: drop-shadow(1px 2px 0 var(--overlay-black-sm));
}

.topbar__name {
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.topbar__sub {
  font-size: 12px;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 4px;
}

.topbar__sub strong { color: var(--burgundy); font-weight: 600; }

.topbar__xp { display: flex; flex-direction: column; gap: 4px; }
.topbar__xp-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
  display: flex;
  justify-content: space-between;
}
.xpbar {
  height: 4px;
  background: var(--bg-sunken);
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.xpbar__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--amber));
  transition: width 400ms ease;
}

.topbar__widgets {
  display: flex;
  align-items: center;
  gap: 14px;
}

.widget {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 44px;
  padding: 4px 10px;
  border-radius: var(--radius);
  position: relative;
}

.widget__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
  font-weight: 600;
}

.widget__value {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
}

.widget--hp .widget__value { color: var(--accent); }
.widget--hp.hp-low .widget__value { color: var(--bad); animation: pulse 1.5s infinite; }
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.widget--ac { background: linear-gradient(180deg, transparent, var(--overlay-gold-ac)); }
.widget--conc.active .widget__value { color: var(--lilac); animation: shimmer 2s infinite; }
@keyframes shimmer {
  0%, 100% { text-shadow: 0 0 0 transparent; }
  50% { text-shadow: 0 0 8px var(--lilac-soft); }
}

.topbar__controls { display: flex; gap: 4px; }

.icon-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  color: var(--ink-soft);
  transition: all 150ms ease;
  border: 1px solid transparent;
}
.icon-btn:hover { background: var(--bg-sunken); border-color: var(--line); color: var(--ink); }
.icon-btn svg { width: 18px; height: 18px; }

/* ============================================================
   Секции и заголовки
   ============================================================ */

.section {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 14px 14px 16px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
  position: relative;
}

/* Виньетки в углах больших секций */
.section--ornate::before,
.section--ornate::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 1px solid var(--gold);
  opacity: 0.5;
  pointer-events: none;
}
.section--ornate::before {
  top: 6px; left: 6px;
  border-right: 0; border-bottom: 0;
}
.section--ornate::after {
  bottom: 6px; right: 6px;
  border-left: 0; border-top: 0;
}

.section__title {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--burgundy);
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 8px;
}

.section__title::before {
  content: "❋";
  color: var(--gold);
  font-size: 12px;
  opacity: 0.7;
}

.section__title-aside {
  margin-left: auto;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  text-transform: none;
}

/* ============================================================
   ЛЕВАЯ КОЛОНКА
   ============================================================ */

/* Характеристики */
.stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.stat {
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 10px;
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 6px;
  transition: all 150ms ease;
}
.stat:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }

.stat__label {
  font-family: var(--font-body);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
  font-weight: 600;
}
.stat__value {
  font-family: var(--font-body);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.stat__base {
  font-size: 11px;
  color: var(--ink-mute);
  font-family: var(--font-mono);
}
.stat__mod {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--bg-elev);
  border: 1.5px solid var(--burgundy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  color: var(--burgundy);
}

.stat__mod.neg { border-color: var(--ink-mute); color: var(--ink-mute); }

/* Спасброски и навыки общие */
.list-row {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-size: 14px;
}
.list-row + .list-row { border-top: 1px dashed var(--line-soft); }

/* wave 2.2/2.3 — кликабельные строки навыков/спасбросков (1d20+mod → DiceTray) */
.list-row--rollable { cursor: pointer; border-radius: 0.25rem; transition: background-color 0.1s ease; }
.list-row--rollable:hover { background: var(--bg-sunken); }
.list-row--rollable:active { background: var(--accent-warm); color: white; }

.prof {
  width: 14px; height: 14px;
  border: 1.5px solid var(--ink-mute);
  border-radius: 50%;
  background: transparent;
  display: inline-block;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
  transition: all 150ms ease;
}
.prof.half { background: linear-gradient(90deg, var(--burgundy) 50%, transparent 50%); border-color: var(--burgundy); }
.prof.full { background: var(--burgundy); border-color: var(--burgundy); }
.prof.expert { background: var(--burgundy); border-color: var(--burgundy); box-shadow: 0 0 0 2px var(--bg-elev), 0 0 0 3.5px var(--burgundy); }
.list-row__name { color: var(--ink); }
.list-row__abbr { color: var(--ink-mute); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; margin-left: 5px; }
.list-row__bonus {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--ink);
  min-width: 30px;
  text-align: right;
}

.list-row__shield {
  width: 14px; height: 14px;
  color: var(--ink-mute);
}

/* Пассивные */
.passives {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 12px;
  font-size: 13px;
}
.passives__name { color: var(--ink-soft); }
.passives__val { font-family: var(--font-mono); font-weight: 600; color: var(--ink); }

/* Инвентарь */
.coins {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  margin-bottom: 10px;
  text-align: center;
}
.coin {
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 6px 0;
}
.coin__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
}
.coin__val {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}
.coin--gp .coin__label { color: var(--gold); }
.coin--gp .coin__val { color: var(--gold); }

.attune {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-mute);
  margin: 8px 0;
}
.attune__dots { display: flex; gap: 4px; margin-left: auto; }
.attune__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 1.5px solid var(--lilac);
}
.attune__dot.on { background: var(--lilac); }

.inv-list { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.inv-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  padding: 4px 6px;
  border-radius: var(--radius);
}
.inv-item:hover { background: var(--bg-sunken); }
.inv-item__qty { font-family: var(--font-mono); color: var(--ink-mute); font-size: 12px; }

.carry {
  margin-top: 10px;
  font-size: 12px;
  color: var(--ink-mute);
}
.carry__bar {
  height: 4px;
  background: var(--bg-sunken);
  border-radius: 2px;
  margin-top: 4px;
  overflow: hidden;
}
.carry__fill {
  height: 100%;
  background: var(--amber);
  width: 18%;
}

/* Чипы */
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip {
  font-size: 12px;
  padding: 4px 10px;
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}
.chip--accent { background: var(--burgundy); color: var(--on-accent); border-color: var(--burgundy); }

/* ============================================================
   ЦЕНТР — БОЙ
   ============================================================ */

.combat {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-md);
  position: relative;
}

.combat__grid {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 20px;
  align-items: start;
}

.hp-block {
  text-align: center;
  padding: 8px 0 12px;
}

.hp-display {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
  position: relative;
}

.hp-display__current {
  font-family: var(--font-body);
  font-size: 64px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.03em;
}

.hp-display__sep {
  font-family: var(--font-body);
  font-size: 32px;
  color: var(--ink-mute);
  font-weight: 400;
}

.hp-display__max {
  font-family: var(--font-body);
  font-size: 32px;
  color: var(--ink-soft);
  font-weight: 500;
}

.hp-display.low .hp-display__current { color: var(--bad); }
.hp-display.full .hp-display__current { color: var(--good); }

.hp-temp {
  position: absolute;
  top: 0;
  right: -10px;
  background: var(--lilac);
  color: white;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  border: 2px solid var(--bg-elev);
}
.hp-temp.zero { display: none; }

.hp-bar {
  height: 6px;
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
  margin: 0 auto 12px;
  max-width: 320px;
}
.hp-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--burgundy-deep), var(--accent));
  transition: width 300ms ease;
}

.hp-buttons,
.hp-quick {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}

.hp-row__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  margin-right: 4px;
}

.btn {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  transition: all 150ms ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn:hover { background: var(--bg-sunken); border-color: var(--ink-mute); }
.btn:active { transform: translateY(1px); }

.btn--hp {
  font-family: var(--font-mono);
  font-weight: 600;
  min-width: 44px;
  justify-content: center;
}
.btn--minus { color: var(--bad); }
.btn--plus { color: var(--good); }

.btn--hp.flash-bad { animation: flash-bad 400ms ease; }
.btn--hp.flash-good { animation: flash-good 400ms ease; }
@keyframes flash-bad {
  0% { transform: scale(1); }
  40% { transform: scale(1.15); background: var(--bad); color: white; }
  100% { transform: scale(1); }
}
@keyframes flash-good {
  0% { transform: scale(1); }
  40% { transform: scale(1.15); background: var(--good); color: white; }
  100% { transform: scale(1); }
}

.hp-input {
  display: flex;
  justify-content: center;
  gap: 4px;
  align-items: center;
}
.hp-input input {
  width: 60px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 6px;
}
.btn--hp-action {
  min-width: 60px;
  justify-content: center;
  font-size: 12px;
  padding: 6px 10px;
}

/* Боковая панель боя */
.combat-side { display: flex; flex-direction: column; gap: 14px; }

.subblock {
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 10px;
}
.subblock__title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
  font-weight: 700;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Кружки слотов / hit dice / удачи */
.dots { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }

.dot {
  width: 16px; height: 16px;
  border: 1.5px solid var(--burgundy);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: all 150ms ease;
  flex-shrink: 0;
}
.dot.on {
  background: var(--burgundy);
  box-shadow: 0 0 0 0 var(--burgundy);
}
.dot:hover { transform: scale(1.15); }
.dot:active { transform: scale(0.9); }

.dot--lucky { border-color: var(--gold); }
.dot--lucky.on { background: var(--gold); }

.dot--success { border-color: var(--good); }
.dot--success.on { background: var(--good); }
.dot--fail { border-color: var(--bad); }
.dot--fail.on { background: var(--bad); }

.dot--hd { border-color: var(--amber); }
.dot--hd.on { background: var(--amber); }

.subblock__action {
  margin-left: auto;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--lilac);
  font-weight: 700;
}
.subblock__action:hover { text-decoration: underline; }

/* Death saves */
.death {
  display: none;
  margin-top: 10px;
  padding: 10px 12px;
  background: linear-gradient(180deg, var(--overlay-bad-xs), transparent);
  border: 1px solid var(--bad);
  border-radius: var(--radius);
}
.death.active { display: block; }
.death__row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.death__row + .death__row { margin-top: 6px; }
.death__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  width: 80px;
  font-weight: 700;
}
.death__label.success { color: var(--good); }
.death__label.fail { color: var(--bad); }

/* Состояния (chips with active state) */
.conditions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 10px;
}
.cond {
  font-size: 12px;
  padding: 5px 11px;
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all 120ms ease;
  position: relative;
}
.cond:hover {
  border-color: var(--ink-mute);
  color: var(--ink);
  z-index: 100; /* поднимаем над соседями, чтобы tooltip не перекрывался */
}
[data-tip] { position: relative; }
[data-tip]:hover { z-index: 100; } /* любой элемент с tooltip всплывает при hover */
.cond.active {
  background: var(--burgundy);
  color: var(--on-accent);
  border-color: var(--burgundy-deep);
}

/* ===================================================================
   Tooltip — единый стиль (kenku-657)
   Канонический класс: .kenku-tooltip. Класс .js-tooltip оставлен как
   алиас, потому что JS (`bindTooltips` в app.js) исторически
   присваивает именно его. Модификаторы:
     .kenku-tooltip--info  — нейтральный (default)
     .kenku-tooltip--warn  — предупреждение/опасность
   =================================================================== */
.kenku-tooltip,
.js-tooltip {
  position: fixed;
  background: var(--tooltip-bg);
  color: var(--tooltip-color);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  padding: 10px 12px;
  border-radius: var(--radius);
  white-space: normal;
  max-width: 320px;
  z-index: 9999;
  box-shadow: 0 4px 16px var(--overlay-black-lg);
  pointer-events: none;
  animation: tooltip-fade 160ms ease;
  text-align: left;
  line-height: 1.45;
  border: 1px solid var(--overlay-white-xs);
}
.kenku-tooltip--warn {
  background: var(--burgundy-deep);
  color: var(--tooltip-color);
  border-color: var(--burgundy);
}
@keyframes tooltip-fade {
  from { opacity: 0; transform: translateY(2px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Истощение */
.exhaustion {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding: 8px 10px;
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.exhaustion__label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}
.exhaustion__levels { display: flex; gap: 4px; }
.exh-pip {
  width: 20px; height: 20px;
  border: 1.5px solid var(--ink-mute);
  border-radius: 3px;
  background: transparent;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-mute);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.exh-pip.on { background: var(--burgundy); border-color: var(--burgundy); color: white; }
.exh-pip:nth-child(6).on { background: black; border-color: black; }
.exhaustion__desc {
  margin-left: auto;
  font-size: 12px;
  color: var(--ink-mute);
  font-style: italic;
}

/* Концентрация */
.conc {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(90deg, var(--overlay-lilac-sm), transparent);
}
.conc__icon { color: var(--lilac); }
.conc__icon svg { width: 16px; height: 16px; }
.conc input {
  background: transparent;
  border: 0;
  border-bottom: 1px dashed var(--line);
  padding: 3px 4px;
  font-size: 14px;
}
.conc input:focus { outline: none; border-bottom-color: var(--lilac); }
.conc__clear {
  font-size: 11px;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}
.conc__clear:hover { color: var(--bad); }

.conc-save-banner {
  display: none;
  margin-top: 8px;
  padding: 9px 12px;
  background: var(--overlay-warn-sm);
  border: 1px solid var(--warn);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--warn);
}
.conc-save-banner.show { display: block; }

/* Действия в ходу */
.actions-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}
.act-toggle {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-sunken);
  font-size: 13px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all 150ms ease;
}
.act-toggle__check {
  width: 14px; height: 14px;
  border: 1.5px solid var(--ink-mute);
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.act-toggle.used {
  opacity: 0.5;
  text-decoration: line-through;
  background: var(--bg-elev);
}
.act-toggle.used .act-toggle__check {
  background: var(--burgundy);
  border-color: var(--burgundy);
}
.act-toggle.used .act-toggle__check::after {
  content: "✓";
  color: white;
  font-size: 10px;
  font-weight: 700;
}

.btn--end-turn {
  background: var(--burgundy);
  color: var(--on-accent);
  border-color: var(--burgundy-deep);
  font-weight: 600;
}
.btn--end-turn:hover { background: var(--burgundy-deep); }

/* Атаки таблица */
.attacks-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.attacks-table th {
  text-align: left;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  padding: 6px 8px 6px 0;
  border-bottom: 1px solid var(--line);
}
.attacks-table td {
  padding: 7px 8px 7px 0;
  border-bottom: 1px dashed var(--line-soft);
}
.attacks-table .atk-name { font-weight: 600; }
.attacks-table .atk-bonus { font-family: var(--font-mono); font-weight: 600; color: var(--burgundy); }
.attacks-table .atk-dmg { font-family: var(--font-mono); }
.attacks-table .atk-props { font-size: 11px; color: var(--ink-mute); }

/* ============================================================
   ЗАКЛИНАНИЯ
   ============================================================ */

.spell-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.spell-stat {
  text-align: center;
  padding: 8px;
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.spell-stat__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  font-weight: 700;
}
.spell-stat__val {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
}

.slots-grid {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 6px 10px;
  align-items: center;
}
.slot-level {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-mute);
  text-align: right;
}

.empty-state {
  padding: 22px;
  text-align: center;
  color: var(--ink-mute);
  font-style: italic;
  font-size: 13px;
  background: var(--bg-sunken);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  line-height: 1.6;
}

/* ============================================================
   ОСОБЕННОСТИ
   ============================================================ */

.feature {
  border-bottom: 1px dashed var(--line-soft);
  padding: 8px 0;
}
.feature:last-child { border-bottom: 0; }

.feature__head {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 2px 0;
}
.feature__chev {
  width: 12px; height: 12px;
  color: var(--ink-mute);
  transition: transform 200ms ease;
}
.feature.open .feature__chev { transform: rotate(90deg); }
.feature__name { font-weight: 600; font-size: 14px; }
.feature__source {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  background: var(--bg-sunken);
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-weight: 600;
}
.feature__body {
  display: none;
  margin-top: 6px;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.feature__body em {
  display: block;
  font-size: 12px;
  color: var(--ink-mute);
  margin-top: 6px;
  font-style: italic;
  letter-spacing: 0.02em;
}
.feature.open .feature__body { display: block; animation: slide-down 200ms ease; }
@keyframes slide-down {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.feature-group__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gold);
  font-weight: 700;
  margin: 14px 0 6px;
  padding-bottom: 2px;
}
.feature-group:first-child .feature-group__label { margin-top: 0; }

/* ============================================================
   ДИТЯ — детский режим
   ============================================================ */

.kid-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.kid-field {
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 10px;
}
.kid-field--full { grid-column: 1 / -1; }
.kid-field__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
  font-weight: 700;
  margin-bottom: 5px;
}
.kid-field__val {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
/* устаревшее — поля ушли в .md-field */

.luck-block {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: linear-gradient(90deg, var(--overlay-gold-sm), transparent);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
}
.luck-block__label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--gold);
}

/* ============================================================
   Личность
   ============================================================ */

.pers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.pers-field {
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 10px;
}
.pers-field--full { grid-column: 1 / -1; }
.pers-field__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--burgundy);
  font-weight: 700;
  margin-bottom: 5px;
}
/* устаревшее — поля ушли в .md-field */

/* ============================================================
   ОТДЫХ
   ============================================================ */

.rest-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.rest-btn {
  padding: 16px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-sunken);
  text-align: left;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 200ms ease;
  font-family: var(--font-body);
}
.rest-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--burgundy); }
.rest-btn svg { width: 28px; height: 28px; color: var(--gold); flex-shrink: 0; }
.rest-btn__title { font-size: 15px; font-weight: 700; color: var(--ink); }
.rest-btn__sub { font-size: 12px; color: var(--ink-mute); font-family: var(--font-body); letter-spacing: 0.04em; text-transform: uppercase; margin-top: 2px; }

/* ============================================================
   ПРАВАЯ КОЛОНКА — журнал
   ============================================================ */

.journal {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-elev);
  margin: -16px;
  padding: 16px;
}

.tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 12px;
}
.tab {
  flex: 1;
  padding: 10px 4px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  font-weight: 700;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all 150ms ease;
}
.tab:hover { color: var(--ink-soft); }
.tab.active { color: var(--burgundy); border-bottom-color: var(--burgundy); }

.tab-pane { display: none; flex: 1; flex-direction: column; min-height: 0; }
.tab-pane.active { display: flex; }

.journal__textarea {
  flex: 1;
  width: 100%;
  resize: none;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  background: transparent;
  border: 1px solid var(--line);
  padding: 12px 14px;
  border-radius: var(--radius);
  min-height: 280px;
}
.journal__textarea:focus { outline: none; border-color: var(--burgundy); }
.journal__textarea.saved-pulse { animation: saved-pulse 300ms ease; }
@keyframes saved-pulse {
  0% { background: var(--overlay-good-sm); }
  100% { background: transparent; }
}

.journal__buttons {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  margin-top: 10px;
}
.jbtn {
  padding: 10px 6px;
  font-size: 12px;
  font-weight: 600;
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  transition: all 150ms ease;
}
.jbtn:hover { background: var(--bg-elev); border-color: var(--burgundy); color: var(--ink); transform: translateY(-1px); }
.jbtn svg { width: 16px; height: 16px; }
.jbtn--end { color: var(--bad); border-color: var(--line); }
.jbtn--end:hover { background: var(--bad); color: white; border-color: var(--bad); }

.save-status {
  margin-top: 8px;
  font-size: 12px;
  color: var(--ink-mute);
  text-align: right;
  font-style: italic;
}
.save-status.saving { color: var(--warn); }
.save-status.saved { color: var(--good); }
.save-status.error { color: var(--bad); }

.archive-list { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
.archive-item {
  padding: 10px 12px;
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 150ms ease;
}
.archive-item:hover { border-color: var(--burgundy); background: var(--bg-elev); }
.archive-item__date {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  font-weight: 700;
}
.archive-item__title {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  margin-top: 3px;
}
.archive-item__excerpt { font-size: 12px; color: var(--ink-soft); margin-top: 5px; line-height: 1.5; }

/* ============================================================
   МОДАЛКИ
   ============================================================ */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--overlay-ink-lg);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  animation: backdrop-in 200ms ease;
}
.modal-backdrop.show { display: flex; }
@keyframes backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 640px;
  width: 90vw;
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: modal-in 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.modal__title {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  color: var(--burgundy);
  margin: 0;
}
.modal__close {
  margin-left: auto;
  width: 30px; height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  color: var(--ink-soft);
}
.modal__close:hover { background: var(--bg-sunken); color: var(--ink); }

.modal__body {
  padding: 18px;
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.6;
}

.modal__foot {
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.btn--primary {
  background: var(--burgundy);
  color: var(--on-accent);
  border-color: var(--burgundy-deep);
  font-weight: 600;
}
.btn--primary:hover { background: var(--burgundy-deep); }

.rest-preview {
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  margin-top: 12px;
}
.rest-preview ul { margin: 6px 0 0; padding-left: 20px; }
.rest-preview li { margin-bottom: 4px; font-size: 13px; }

/* ============================================================
   Скелет загрузки (демо)
   ============================================================ */

.skeleton {
  background: linear-gradient(90deg, var(--bg-sunken) 0%, var(--line-soft) 50%, var(--bg-sunken) 100%);
  background-size: 200% 100%;
  animation: skeleton 1.5s infinite;
  border-radius: var(--radius);
}
@keyframes skeleton {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============================================================
   Утилиты
   ============================================================ */

.row { display: flex; align-items: center; gap: 8px; }
.row--between { justify-content: space-between; }
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.muted { color: var(--ink-mute); }
.small { font-size: 12px; }
.center { text-align: center; }
.hidden { display: none !important; }

/* ============================================================
   ПРАВКИ 2026-05-05
   ============================================================ */

/* #9 — убираем уродские стрелки number-инпутов */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* #5 — сворачиваемые секции */
.section__title.is-collapsible { cursor: pointer; user-select: none; }
.section__chev {
  margin-left: 6px;
  font-size: 11px;
  color: var(--ink-mute);
  transition: transform 200ms ease;
  display: inline-block;
  line-height: 1;
}
.section.collapsed .section__chev { transform: rotate(-90deg); }
.section.collapsed > *:not(.section__title),
.combat.collapsed > *:not(.section__title) { display: none !important; }
.section__title-aside + .section__chev { margin-left: 8px; }

/* #1 — редактор характеристик inline */
.stat { cursor: pointer; }
.stat__editor {
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 700;
  width: 56px;
  text-align: center;
  background: var(--bg-elev);
  border: 1px solid var(--burgundy);
  border-radius: var(--radius);
  color: var(--ink);
  padding: 2px 4px;
}

/* #3 — кнопка полного исцеления */
.btn--full-heal {
  background: var(--good);
  color: white;
  border-color: var(--good);
  font-size: 12px;
  padding: 5px 10px;
}
.btn--full-heal:hover { background: var(--good-dark); }

/* #6 — md-field (просмотр / редактирование с авто-резайзом + рендер md) */
.md-field {
  display: block;
  font-size: 14px;
  font-family: var(--font-body);
  line-height: 1.55;
  color: var(--ink);
  cursor: text;
  min-height: 1.5em;
}
.md-field__view {
  padding: 2px 0;
  cursor: text;
}
.md-field__view:empty::before {
  content: "—";
  color: var(--ink-mute);
}
.md-field__view p { margin: 0 0 6px; }
.md-field__view p:last-child { margin-bottom: 0; }
.md-field__view h2 { font-size: 15px; margin: 8px 0 4px; color: var(--burgundy); font-weight: 700; }
.md-field__view h3 { font-size: 14px; margin: 6px 0 3px; color: var(--ink); font-weight: 700; }
.md-field__view h4 { font-size: 13px; margin: 5px 0 3px; color: var(--ink-soft); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.md-field__view ul { margin: 4px 0 6px; padding-left: 18px; }
.md-field__view li { margin-bottom: 2px; }
.md-field__view strong { font-weight: 700; color: var(--ink); }
.md-field__view em { font-style: italic; color: var(--ink-soft); }
.md-field__view code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--bg-sunken);
  padding: 1px 5px;
  border-radius: 3px;
}

.md-field__edit {
  width: 100%;
  background: var(--bg-elev);
  border: 1px solid var(--burgundy);
  border-radius: var(--radius);
  padding: 6px 8px;
  font: inherit;
  line-height: 1.55;
  color: var(--ink);
  resize: none;
  overflow: hidden;
  min-height: 1.5em;
  display: block;
}
.md-field__edit:focus { outline: none; border-color: var(--burgundy); box-shadow: 0 0 0 2px var(--overlay-burgundy-focus); }

/* старые .kid-field textarea и .pers-field textarea: гасим, теперь через .md-field */
.kid-field .md-field, .pers-field .md-field { font-size: 14px; }

/* #7 — редактор монет */
.coins-edit {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 4px;
  margin-top: 6px;
}
.coins-edit input {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 5px 7px;
}
.coins-edit button {
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-elev);
  font-weight: 700;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.coins-edit button:hover { background: var(--bg-sunken); }
.coins-edit button.add { color: var(--good); }
.coins-edit button.sub { color: var(--bad); }
.coins-hint { font-size: 11px; color: var(--ink-mute); margin-top: 3px; font-style: italic; }
.coins-status {
  font-size: 11px;
  margin-top: 3px;
  min-height: 1em;
}
.coins-status.error { color: var(--bad); }
.coins-status.ok { color: var(--good); }

/* #4 — атаки: попап с разбором при клике */
.attacks-table tr { cursor: default; }
.attacks-table .atk-props span { cursor: help; }
/* wave 2.1 — атаки-кнопки: клик по ячейкам бонуса/урона кладёт ролл в DiceTray */
.attacks-table .atk-roll {
  cursor: pointer;
  border-radius: 0.25rem;
  transition: background-color 0.1s ease;
}
.attacks-table .atk-roll:hover {
  background: var(--bg-sunken);
}
.attacks-table .atk-roll:active {
  background: var(--accent-warm);
  color: white;
}
.attacks-table tr.atk-row td { vertical-align: top; }
.attacks-empty {
  padding: 14px;
  font-size: 12px;
  color: var(--ink-mute);
  text-align: center;
  font-style: italic;
}
.attacks-tools {
  margin-top: 8px;
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
.btn--small {
  font-size: 11px;
  padding: 4px 9px;
  border: 1px dashed var(--line);
  background: transparent;
  color: var(--ink-soft);
  border-radius: var(--radius);
}
.btn--small:hover { border-color: var(--burgundy); color: var(--burgundy); border-style: solid; }
.btn--danger { color: var(--bad); border-color: var(--overlay-bad-border); }
.btn--danger:hover { color: white; background: var(--bad); border-color: var(--bad); }

/* #2 — повышение уровня */
.levelup-block {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 10px;
}
.levelup-block__label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-mute); font-weight: 700; }
.levelup-block input { width: 50px; padding: 3px 5px; text-align: center; font-weight: 700; }
.levelup-block button {
  margin-left: auto;
  font-size: 11px;
  padding: 5px 10px;
  background: var(--gold);
  color: var(--on-gold);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.levelup-block button:hover { background: var(--amber); border-color: var(--amber); }
.levelup-modal__step {
  margin-bottom: 14px;
  padding: 10px 12px;
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.levelup-modal__step h4 {
  margin: 0 0 6px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--burgundy);
  font-weight: 700;
}
.levelup-modal__step p { margin: 4px 0; font-size: 13px; color: var(--ink-soft); }

/* #8 — инвентарь: edit/delete + модалка */
.inv-item { position: relative; cursor: pointer; }
.inv-item.worn { background: linear-gradient(90deg, var(--overlay-good-md), transparent); border-left: 2px solid var(--good); padding-left: 8px; }
.inv-item__actions {
  display: none;
  gap: 4px;
  margin-left: 6px;
}
.inv-item:hover .inv-item__actions { display: inline-flex; }
.inv-item__act {
  width: 18px; height: 18px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--bg-elev);
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.inv-item__act:hover { background: var(--burgundy); color: white; border-color: var(--burgundy); }
.inv-item__act.del:hover { background: var(--bad); border-color: var(--bad); }
.inv-add-row { margin-top: 8px; display: flex; justify-content: flex-end; }

.item-modal__grid {
  display: grid;
  grid-template-columns: 1fr 80px;
  gap: 8px 12px;
  align-items: center;
}
.item-modal__grid label { font-size: 12px; color: var(--ink-mute); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.item-modal__grid input[type="text"], .item-modal__grid input[type="number"], .item-modal__grid select, .item-modal__grid textarea {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 5px 7px;
  border-radius: var(--radius);
  font: inherit;
}
.item-modal__grid textarea { grid-column: 1 / -1; min-height: 50px; resize: vertical; }
.item-modal__grid .full { grid-column: 1 / -1; }
.item-modal__sub {
  grid-column: 1 / -1;
  margin-top: 6px;
  padding: 8px 10px;
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.item-modal__sub h4 {
  margin: 0 0 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--lilac);
  font-weight: 700;
}
.item-modal__sub-grid {
  display: grid;
  grid-template-columns: 1fr 80px;
  gap: 6px 10px;
  align-items: center;
}
.item-modal__sub-grid label { font-size: 12px; color: var(--ink-soft); }
.item-modal__sub-grid input, .item-modal__sub-grid select {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 4px 6px;
  border-radius: var(--radius);
  font: inherit;
}
.checkbox-row {
  display: flex;
  gap: 14px;
  grid-column: 1 / -1;
  font-size: 13px;
}
.checkbox-row label { display: inline-flex; align-items: center; gap: 5px; text-transform: none; letter-spacing: 0; color: var(--ink); font-weight: 500; cursor: pointer; }

/* ============================================================
   FEATURE GATING — premium flags (spec §2.3, D-2026-05-09-E)
   ============================================================ */
body:not([data-features~="ai_razbor"]) .premium--ai-razbor { display: none !important; }

/* ============================================================
   IDENTITY HEADER — inline editing (epic 2 wave 1)
   ============================================================ */
.topbar__name {
  cursor: text;
  outline: none;
  border-radius: 4px;
  padding: 1px 4px;
  margin: -1px -4px;
}
.topbar__name:hover { background: var(--overlay-ink-xs); }
.topbar__name--edit {
  background: var(--bg-elev);
  border: 1px solid var(--burgundy);
  cursor: text;
}

.levelup-block__level {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3em;
  height: 2em;
  font: inherit;
  font-weight: 700;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  padding: 0 8px;
  cursor: pointer;
}
.levelup-block__level:hover { border-color: var(--burgundy); }

.modal--narrow { max-width: 360px; }
.modal--wide { max-width: 920px; }

/* ============================================================
   kenku-kqt — Item Picker (сетка карточек предметов)
   ============================================================ */
.ip-search {
  width: 100%;
  margin: 0 0 12px 0;
  padding: 8px 12px;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 14px;
}
.ip-search:focus {
  outline: none;
  border-color: var(--burgundy);
}
.ip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  max-height: 55vh;
  overflow-y: auto;
  padding: 2px;
}
.ip-card {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
  font-family: var(--font-body);
  transition: border-color 120ms, transform 120ms, box-shadow 120ms;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 92px;
}
.ip-card:hover {
  border-color: var(--burgundy);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}
.ip-card:focus-visible {
  outline: 2px solid var(--burgundy);
  outline-offset: 2px;
}
.ip-card__title {
  font-weight: 700;
  font-size: 14px;
  color: var(--burgundy);
}
.ip-card__meta {
  font-size: 12px;
  color: var(--ink-soft, var(--ink));
  opacity: 0.85;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
}
.ip-card__foot {
  margin-top: auto;
  font-size: 11px;
  color: var(--ink-soft, var(--ink));
  opacity: 0.7;
  display: flex;
  gap: 8px;
}
.ip-card__badge {
  position: absolute;
  top: 6px;
  right: 6px;
  background: var(--burgundy);
  color: white;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 600;
}
.ip-card--taken {
  opacity: 0.6;
}
.ip-card--taken:hover {
  opacity: 1;
}
.ip-empty {
  text-align: center;
  color: var(--ink);
  opacity: 0.6;
  padding: 30px 0;
}

/* ============================================================
   PERSONALITY NOTES — collapsible "Пометки о персонаже" (epic 2 wave 2)
   ============================================================ */
.personality__notes {
  margin-top: 4px;
  border-top: 1px dashed var(--line);
  padding-top: 10px;
}
.personality__notes > summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  padding: 4px 0;
  user-select: none;
}
.personality__notes > summary:hover { color: var(--burgundy); }
.personality__notes[open] > summary { color: var(--burgundy); }
.personality__notes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
  margin-top: 10px;
}
.personality__notes-grid .pers-field--full { grid-column: 1 / -1; }

/* ============================================================
   WAVE 3 / D1 — AC BONUS WIDGET
   ============================================================ */
.widget__bonus {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: 2px;
  font-size: 10px;
  line-height: 1;
}
.widget__bonus-val {
  min-width: 1.5em;
  text-align: right;
  color: var(--ink-mute);
  font-weight: 600;
}
.widget__bonus-btn {
  width: 16px;
  height: 16px;
  padding: 0;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  border-radius: 3px;
  cursor: pointer;
  font-size: 10px;
  line-height: 14px;
  text-align: center;
}
.widget__bonus-btn:hover { background: var(--bg-sunken); }
.widget__bonus-btn--clear { color: var(--ink-mute); }

/* ============================================================
   WAVE 3 / D2 — INITIATIVE BONUS (uses .widget__bonus from D1)
   ============================================================ */
/* No additional rules — reuses D1 widget__bonus. */

/* ============================================================
   WAVE 3 / D4 — INSPIRATION TOGGLE
   ============================================================ */
.widget--insp {
  border: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  font: inherit;
  color: inherit;
}
.widget--insp:hover { background: var(--bg-sunken); }
.widget--insp .insp-star {
  color: var(--ink-mute);
  transition: color 0.15s ease;
}
.widget--insp .insp-star.on {
  color: gold;
  text-shadow: 0 0 4px var(--overlay-insp-glow);
}
.widget--insp.widget--insp-on { border-color: gold; }

/* ============================================================
   WAVE 3 / D3 — SPEEDS EDITOR
   ============================================================ */
.speeds { display: flex; flex-direction: column; gap: 6px; }
.speed-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: 6px;
  padding: 4px 6px;
  border: 1px solid transparent;
  border-radius: 4px;
}
.speed-row:hover { border-color: var(--line); }
.speed-row__label { color: var(--ink-mute); font-size: 12px; }
.speed-row__val { font-weight: 600; cursor: text; min-width: 2.5em; text-align: right; }
.speed-row__unit { color: var(--ink-mute); font-size: 11px; }
.speed-row__input {
  width: 4em;
  padding: 1px 4px;
  border: 1px solid var(--burgundy, var(--line));
  border-radius: 3px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  text-align: right;
}

/* ============================================================
   WAVE 3 / E1 — FEATURE USES COUNTER
   ============================================================ */
.feature__uses {
  margin-left: 8px;
  padding: 1px 6px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  border-radius: 10px;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}
.feature__uses:hover { background: var(--bg-sunken); border-color: var(--burgundy, var(--line)); }

/* ============================================================
   WAVE 3 / E2 — ATTUNE DOTS BINDING
   ============================================================ */
/* .attune__dot.on color stays from the canonical rule above (~line 525, var(--lilac)). */
.attune__warn {
  margin-left: 6px;
  font-size: 10px;
  color: var(--bad);
  font-weight: 600;
}

/* ============================================================
   WAVE 3 / E3 + E4 — CHIPS EDITOR (languages, proficiencies)
   ============================================================ */
.chips--editable { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.chip--editable {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-right: 4px;
}
.chip__del {
  width: 14px;
  height: 14px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 12px;
  line-height: 12px;
  opacity: 0.6;
}
.chip__del:hover { opacity: 1; color: var(--bad); }
.chips__add {
  padding: 2px 8px;
  border: 1px dashed var(--line);
  background: transparent;
  color: var(--ink-mute);
  border-radius: 12px;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.chips__add:hover { border-style: solid; color: var(--ink); }
.chips__input {
  padding: 1px 8px;
  border: 1px solid var(--burgundy, var(--line));
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 11px;
  min-width: 8em;
}

/* ============================================================
   Меню персонажа (⋮) — сброс/создание нового
   ============================================================ */
.char-menu-wrap { position: relative; display: inline-block; }
.menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  min-width: 14em;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: var(--shadow-md);
  z-index: 10;
}
.menu__item {
  display: block;
  padding: 0.5rem 1rem;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink);
  font: inherit;
}
.menu__item:hover { background: var(--bg); }
.btn--danger { background: var(--burgundy); color: white; border-color: var(--burgundy-deep); }
.btn--danger:hover { background: var(--burgundy-deep); }

/* --- Level-up ready glow on #class-level-btn (epic 4 wave 2) --- */
#class-level-btn.level-up-ready {
  position: relative;
  box-shadow: 0 0 8px 2px var(--overlay-gold-leaf-md); /* gold glow */
  animation: levelup-pulse 2s ease-in-out infinite;
}
#class-level-btn.level-up-ready::after {
  content: '↑';
  position: absolute;
  top: -0.4em;
  right: -0.3em;
  font-size: 0.7em;
  color: var(--gold-leaf);
  text-shadow: 0 0 3px var(--overlay-black-lg);
  pointer-events: none;
}
@keyframes levelup-pulse {
  0%, 100% { box-shadow: 0 0 6px 1px var(--overlay-gold-leaf-sm); }
  50%      { box-shadow: 0 0 10px 3px var(--overlay-gold-leaf-lg); }
}

/* --- Post-levelup banner (epic 4 wave 2) --- */
.banner--levelup {
  background: var(--banner-good-bg);
  color: white;
  padding: 0.75rem 2.5rem 0.75rem 1rem;
  font-family: var(--font-body, sans-serif);
  font-size: 0.95rem;
  position: relative;
  border-bottom: 1px solid var(--banner-good-border);
}
.banner__close {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: inherit;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
}
.banner__close:hover { opacity: 0.7; }

/* --- Wizard step cards & hints (epic 4 wave 2) ---
   Used by step_confirm, step_hp, step_asi, step_subclass, step_features, step_review_lvl.
   Visually matches the chargen `.step-card` family in wizard.css. */
.wizard-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
  margin: 0.75rem 0;
}

.wizard-card {
  cursor: pointer;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg);
  text-align: left;
  font: inherit;
  color: inherit;
  transition: all 150ms ease;
}

.wizard-card:hover {
  border-color: var(--burgundy);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.wizard-card--selected {
  border-color: var(--burgundy);
  background: var(--bg-elev);
  box-shadow: var(--shadow-md);
}

.wizard-card__title {
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 0.5rem 0;
}

.wizard-card__features {
  margin: 0;
  padding-left: 1.1em;
  color: var(--ink-soft);
  font-size: 0.9em;
}

.wizard-card__hint {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9em;
  font-style: italic;
}

.wizard-step__hint {
  color: var(--ink-soft);
  font-size: 0.9em;
  font-style: italic;
  margin: 0.5rem 0;
}

.wizard-step__error {
  color: white;
  background: var(--burgundy);
  border: 1px solid var(--burgundy-deep);
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  margin: 0.5rem 0;
  font-size: 0.95em;
}

/* --- Item autofill dropdown (epic 4 wave 3) --- */
.it-autofill-dropdown {
  position: absolute;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 4px;
  max-height: 240px;
  overflow-y: auto;
  z-index: 100;
  min-width: 220px;
  box-shadow: 0 4px 12px var(--overlay-black-md);
}
.it-autofill-item {
  padding: 6px 12px;
  cursor: pointer;
  font-size: 0.95rem;
}
.it-autofill-item:hover,
.it-autofill-item--active {
  background: var(--accent-soft);
}
.it-autofill-highlight {
  font-weight: bold;
  color: var(--accent);
}
.it-autofill-en {
  color: var(--ink-mute);
  font-size: 0.85rem;
  margin-left: 4px;
}

/* === Dice Tray + Roll Log (epic 3 wave 1) === */

.dice-tray {
  padding: 0.75rem;
  /* D.2 — позволяем canvas внутри tray тянуться по высоте секции */
  display: flex;
  flex-direction: column;
}
.dice-tray__toggles { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; flex-wrap: wrap; }
.dice-tgl {
  flex: 1 1 auto;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--line);
  background: var(--bg-elev);
  border-radius: 0.4rem;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--ink);
  transition: background-color 0.12s ease, border-color 0.12s ease;
}
.dice-tgl:hover { background: var(--bg-sunken); }
.dice-tgl[aria-pressed="true"] {
  background: var(--accent);
  color: var(--bg-elev);
  border-color: var(--accent);
}
/* QA_2 Bug #14 fix: orphan восстановлен как crit-state — единственная кнопка
 * dice-tgl с золотой подсветкой (Bug 7 image показывал именно крит-кубик так). */
#dt-tgl-crit[aria-pressed="true"] {
  background: var(--gold);
  color: var(--on-gold);
  border-color: var(--amber);
}

.dice-tray__canvas {
  width: 100%;
  /* D.2 — canvas заполняет всю доступную высоту правой колонки;
     старый aspect-ratio 1:1 + 340px тянул кубы в маленький квадрат. */
  flex: 1 1 auto;
  min-height: clamp(400px, 52vh, 640px);
  background: var(--bg-elev);
  border: 1px dashed var(--line);
  border-radius: 0.4rem;
  margin-bottom: 0.5rem;
  /* kenku-m86 — container нужен relative + дочерний canvas absolute fill,
     иначе <canvas class="dice-box-canvas"> рендерится с HTML5 default 300×150
     (vendor style.css не задаёт ему width/height). */
  position: relative;
  overflow: hidden;
}
.dice-tray__canvas > canvas.dice-box-canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* D.1 — Dice Picker row, theme-aware */
.dice-picker {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.dice-picker__btn {
  flex: 1 1 auto;
  min-width: 2.5rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--line);
  background: var(--bg-elev);
  color: var(--ink);
  border-radius: 0.4rem;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  transition: background-color 0.12s ease, border-color 0.12s ease, transform 0.06s ease;
}
.dice-picker__btn:hover {
  background: var(--bg-sunken);
  border-color: var(--accent);
}
/* QA_2 Bug #14 fix: orphan declaration без селектора удалён (раньше тут было
 * `border-color: var(--gold); color: var(--gold);` без `.dice-picker__btn:focus`
 * или подобного — сломанный CSS из неудачного refactor). */
.dice-picker__btn:focus-visible {
  border-color: var(--gold);
  color: var(--gold);
}
.dice-picker__btn:active {
  transform: scale(0.96);
}

/* D.3 — Pool indicator: показывает текущую очередь над canvas.
   kenku-c1a: усиление контраста — bold label, формула на акцентном
   фоне с золотым цветом текста, тонкая золотая граница плашки. */
.dice-pool {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.7rem;
  margin-bottom: 0.5rem;
  border: 1px solid var(--gold);
  background: var(--bg-sunken);
  border-radius: 0.4rem;
  font-size: 0.9rem;
  color: var(--ink);
  min-height: 2rem;
  box-shadow: inset 0 0 0 1px var(--overlay-gold-sm);
}
.dice-pool[hidden] { display: none; }
.dice-pool__label {
  color: var(--burgundy);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 0.78rem;
}
.dice-pool__formula {
  flex: 1 1 auto;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--burgundy);
  background: var(--overlay-gold-md);
  border: 1px solid var(--overlay-gold-border);
  border-radius: 0.3rem;
  padding: 0.1rem 0.5rem;
  word-break: break-all;
}
/* QA_2 Bug #14 fix: orphan declaration без селектора восстановлен как
 * подчёркнутое состояние формулы (best-effort после refactor). */
.dice-pool__formula--highlight {
  color: var(--gold);
  background: var(--overlay-gold-lg);
  border-color: var(--overlay-gold-border-md);
}
.dice-pool__clear {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: var(--bg-elev);
  color: var(--ink-soft);
  border-radius: 0.3rem;
  padding: 0.15rem 0.45rem;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
}
.dice-pool__clear:hover { color: var(--bad); border-color: var(--bad); }

/* D.4 — pulse animation при add. JS снимает класс по animationend. */
@keyframes dice-pool-bump {
  0%   { transform: scale(1);    background: var(--bg-sunken); }
  35%  { transform: scale(1.04); background: var(--line-soft); }
  100% { transform: scale(1);    background: var(--bg-sunken); }
}
.dice-pool--bump {
  animation: dice-pool-bump 220ms ease-out;
}

.dice-tray__text-result {
  padding: 0.5rem;
  border: 1px solid var(--line);
  background: var(--bg-elev);
  border-radius: 0.4rem;
  margin-bottom: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  min-height: 2rem;
  color: var(--ink);
}
.dice-tray__buttons {
  display: flex; gap: 0.5rem;
}
.dice-tray__buttons .btn { flex: 1 1 auto; }

.roll-log { padding: 0.75rem; margin-top: 1rem; }
.roll-log__list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 14rem;
  overflow-y: auto;
  font-size: 0.85rem;
}
.roll-log__list li {
  padding: 0.25rem 0.4rem;
  border-bottom: 1px solid var(--bg-sunken);
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}
.roll-log__list li:last-child { border-bottom: none; }
.roll-log__result { font-weight: bold; color: var(--accent-warm); }
.roll-log__empty { color: var(--ink-mute); font-style: italic; }
.roll-log__cluster-head {
  background: transparent;
  color: var(--ink-mute);
  font-size: 11px;
  font-style: italic;
  padding: 2px 4px;
  border-bottom: none;
  display: block;
  text-align: right;
}

/* === Spells on sheet (epic 3 wave 3.4 + 3.5) =========================== */
.spells-section .section__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 8px;
}
.spells-section__book-btn { text-decoration: none; font-size: 13px; }
.spells-known { display: flex; flex-direction: column; gap: 12px; }
.spells-known__empty, .spells-known__loading {
  padding: 12px; color: var(--ink-mute); font-style: italic;
}
.spells-known__group { display: flex; flex-direction: column; gap: 6px; }
.spells-known__group-title {
  margin: 6px 0 2px; font-size: 13px; font-weight: 700;
  color: var(--ink-mute); text-transform: uppercase; letter-spacing: .04em;
}
.spell-row {
  padding: 6px 8px; border: 1px solid var(--line);
  border-radius: 6px; background: var(--bg-elev);
}
.spell-row__head {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.spell-row__name { font-weight: 600; }
.spell-row__meta { font-size: 12px; color: var(--ink-mute); flex: 1; }
.spell-row__more {
  background: transparent; border: 1px solid var(--line);
  border-radius: 999px; padding: 1px 8px; font-size: 11px; cursor: pointer;
}
.spell-row__more:hover { background: var(--bg); }
.spell-row__star {
  background: transparent; border: none; cursor: pointer; padding: 0 4px;
  color: var(--ink-mute); font-size: 16px; line-height: 1;
}
.spell-row__star.is-on, .spell-row__star--always { color: var(--spell-star); }
.spell-row__star--always { cursor: default; }
.spell-row--prepared { background: var(--surface-hi); }
.spell-row__full { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line); font-size: 13px; }
.spell-row__props { display: grid; grid-template-columns: max-content 1fr; gap: 2px 8px; margin: 0 0 6px; }
.spell-row__props dt { color: var(--ink-mute); }
.spell-row__props dd { margin: 0; }
.spell-row__actions {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px;
}
.spell-row__cast {
  background: var(--accent-soft);
  color: var(--ink);
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms;
}
.spell-row__cast:hover {
  background: var(--accent);
  color: var(--bg);
}
/* QA_2 Bug #14 fix: два orphan-блока без селектора восстановлены как состояния
 * spell-row__cast (focus / active). Селекторы потерялись при refactor темы. */
.spell-row__cast:focus-visible {
  background: var(--bg-elev);
  color: var(--ink);
  border-color: var(--accent);
}
.spell-row__cast:active {
  background: var(--accent);
  color: var(--on-gold);
}
.spell-row__roll {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px 10px;
  font-size: 12px;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}
.spell-row__roll--hit:hover { background: var(--overlay-spell-hit); border-color: var(--spell-hit-color); }
.spell-row__roll--dmg:hover { background: var(--overlay-spell-dmg); border-color: var(--spell-dmg-color); }
.spell-row__roll--heal:hover { background: var(--overlay-spell-heal); border-color: var(--spell-heal-color); }
/* QA_2 Bug #14 fix: orphan восстановлен как focus-visible для spell-row__roll. */
.spell-row__roll:focus-visible {
  background: var(--bg-elev);
  color: var(--ink);
}
.spell-slots { margin-top: 12px; }
.spell-slots__row {
  display: flex; align-items: center; gap: 8px; padding: 4px 0;
}
.spell-slots__lvl {
  width: 50px; font-size: 12px; color: var(--ink-mute); flex-shrink: 0;
}
.spell-slots__dots {
  display: flex; gap: 4px; flex: 1; flex-wrap: wrap;
}
.spell-slots__count {
  font-size: 11px; color: var(--ink-mute); min-width: 32px; text-align: right;
}
.slot-dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--accent);
  cursor: pointer; padding: 0;
  transition: background 120ms, transform 120ms;
}
.slot-dot.is-on { background: var(--accent); }
.slot-dot:hover { transform: scale(1.18); }
.conc-active {
  display: flex; align-items: center; gap: 10px;
  margin-top: 10px; padding: 8px 12px;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: 6px;
}
.conc-active__icon { font-size: 18px; }
.conc-active__text { flex: 1; font-size: 13px; }
.conc-active__clear {
  background: transparent; color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 4px; padding: 2px 8px; font-size: 11px; cursor: pointer;
}
.conc-active__clear:hover {
  background: var(--accent); color: var(--bg);
}
/* QA_2 Bug #14 fix: orphan восстановлен как focus-visible (best-effort). */
.conc-active__clear:focus-visible {
  background: var(--overlay-gold-sm);
}

/* === Theme picker (kenku-ky0.10) === */
.theme-picker__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin: 4px 0;
}
.theme-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-elev);
  color: var(--ink);
  cursor: pointer;
  text-align: center;
  font: inherit;
}
.theme-card:hover   { border-color: var(--accent); }
.theme-card--active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; }
.theme-card__swatch         { display: block; height: 12px; border-radius: 2px; margin-bottom: 4px; border: 1px solid var(--line-soft, var(--line)); }
.theme-card__swatch--bg     { background: var(--bg); }
.theme-card__swatch--accent { background: var(--accent); }
.theme-card__swatch--gold   { background: var(--gold); }
.theme-card__name { margin-top: 6px; font-weight: 600; font-size: 0.9em; }

/* === Pro-content banner (kenku-lx9.6) === */
#pro-content-banner {
  background: var(--overlay-gold-ac);
  border-left: 4px solid var(--gold);
  padding: 8px 16px;
  margin: 8px 0;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
}
#pro-content-banner[hidden] { display: none !important; }
.pro-banner__icon { font-size: 1.2rem; }

/* ---------------------------------------------------------------
   Дополнительные опции TCoE
   --------------------------------------------------------------- */
.optional-feature { margin: 0.5em 0; padding: 0.5em; border-left: 3px solid var(--accent); }
.optional-feature h4 { margin: 0 0 0.25em; font-size: 1em; font-weight: 600; }
.optional-feature p { margin: 0; font-size: 0.9em; color: var(--ink); }