*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ══════════════════════════════════════════════════════════
   ТЕМЫ — CSS custom properties
   ══════════════════════════════════════════════════════════ */
:root {
  /* Светлая тема (дефолт) */
  --bg:              #f0f2fa;
  --bg-grad:         radial-gradient(ellipse at 50% 40%, #ffffff 0%, #dde9ff 100%);
  --surface:         #ffffff;
  --surface2:        #f6f7fb;
  --border:          rgba(0,16,61,0.12);
  --border2:         rgba(0,16,61,0.20);
  --text:            #2c2d2e;
  --muted:           #87898f;
  --vk:              #0077FF;
  --vk-hover:        #0062d4;
  --vk-light:        rgba(0,119,255,0.08);
  --green:           #34c759;
  --red:             #ff3b30;
  --gold:            #c89000;
  --gold-bg:         #fffbe6;
  --gold-border:     #e8c84a;

  /* Стол */
  --table-bg:        #ffffff;
  --table-border:    rgba(0,16,61,0.08);
  --table-shadow:    0 0 2px rgba(0,16,61,.06), 0 4px 16px rgba(0,16,61,.08), 0 16px 40px rgba(0,16,61,.08);

  /* Карточки игрока */
  --pcard-bg:        rgba(0,119,255,0.05);
  --pcard-border:    rgba(0,119,255,0.18);
  --pcard-voted-bg:  rgba(0,119,255,0.12);
  --pcard-voted-brd: rgba(0,119,255,0.40);

  /* Тени */
  --sh-sm: 0 0 1px rgba(0,16,61,.06), 0 0 4px rgba(0,16,61,.06), 0 4px 8px rgba(0,16,61,.06);
  --sh-md: 0 0 2px rgba(0,16,61,.06), 0 0 6px rgba(0,16,61,.06), 0 6px 12px rgba(0,16,61,.06);
  --sh-lg: 0 0 6px rgba(0,16,61,.06), 0 6px 20px rgba(0,16,61,.07), 0 10px 36px rgba(0,16,61,.08);

  /* Прочее */
  --vote-area-bg:    rgba(255,255,255,0.82);
  --modal-overlay:   rgba(0,0,0,0.28);
  --name-overlay-bg: rgba(240,242,250,0.92);
  --stats-bg:        rgba(255,255,255,0.88);
  --reaction-bg:     #ffffff;
}

[data-theme="dark"] {
  --bg:              #0f1117;
  --bg-grad:         linear-gradient(160deg, #0f1117 0%, #141824 100%);
  --surface:         #1c1e26;
  --surface2:        #23262f;
  --border:          rgba(255,255,255,0.08);
  --border2:         rgba(255,255,255,0.14);
  --text:            #e8e9eb;
  --muted:           #72747c;
  --vk:              #3d9bff;
  --vk-hover:        #5cacff;
  --vk-light:        rgba(61,155,255,0.14);
  --green:           #30d158;
  --red:             #ff453a;
  --gold:            #ffd60a;
  --gold-bg:         rgba(255,214,10,0.12);
  --gold-border:     rgba(255,214,10,0.35);

  --table-bg:        #1e2135;
  --table-border:    rgba(255,255,255,0.06);
  --table-shadow:    0 0 0 1px rgba(255,255,255,.05), 0 8px 32px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.4);

  --pcard-bg:        rgba(61,155,255,0.08);
  --pcard-border:    rgba(61,155,255,0.22);
  --pcard-voted-bg:  rgba(61,155,255,0.18);
  --pcard-voted-brd: rgba(61,155,255,0.50);

  --sh-sm: 0 0 0 1px rgba(255,255,255,.04), 0 2px 8px rgba(0,0,0,.4);
  --sh-md: 0 0 0 1px rgba(255,255,255,.04), 0 4px 16px rgba(0,0,0,.5);
  --sh-lg: 0 0 0 1px rgba(255,255,255,.04), 0 8px 32px rgba(0,0,0,.6);

  --vote-area-bg:    rgba(15,17,23,0.88);
  --modal-overlay:   rgba(0,0,0,0.60);
  --name-overlay-bg: var(--bg);
  --stats-bg:        rgba(28,30,38,0.95);
  --reaction-bg:     var(--surface);
}

/* ══════════════════════════════════════════════════════════
   BASE
   ══════════════════════════════════════════════════════════ */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  height: 100vh;
  overflow: hidden;
  transition: background .25s, color .25s;
}

.hidden { display: none !important; }

/* ── Кнопка переключения темы ─────────────────── */
.theme-toggle {
  align-items: center;
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: 9px;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  font-size: 1rem;
  gap: 5px;
  height: 34px;
  justify-content: center;
  padding: 0 10px;
  transition: border-color .2s, color .2s, background .2s;
  white-space: nowrap;
}
.theme-toggle:hover { border-color: var(--vk); color: var(--vk); }
.theme-toggle .theme-label {
  font-size: 0.76rem;
  font-weight: 600;
}

/* ══════════════════════════════════════════════════════════
   INPUTS, BUTTONS
   ══════════════════════════════════════════════════════════ */
.vk-input {
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 0.95rem;
  outline: none;
  padding: 11px 14px;
  transition: border-color .2s, background .2s;
  width: 100%;
}
.vk-input:focus { border-color: var(--vk); background: var(--surface); }
.vk-input::placeholder { color: var(--muted); }

.vk-textarea {
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.93rem;
  outline: none;
  padding: 11px 14px;
  resize: vertical;
  transition: border-color .2s;
  width: 100%;
}
.vk-textarea:focus { border-color: var(--vk); }
.vk-textarea::placeholder { color: var(--muted); }

.vk-btn-primary {
  background: var(--vk);
  border: none;
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 11px 22px;
  transition: background .15s, transform .1s;
  width: 100%;
}
.vk-btn-primary:hover { background: var(--vk-hover); }
.vk-btn-primary:active { transform: scale(0.98); }
.vk-btn-primary:disabled { background: var(--surface2); color: var(--muted); cursor: default; }

.vk-btn-secondary {
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 11px 20px;
  transition: background .15s;
}
.vk-btn-secondary:hover { background: var(--surface); border-color: var(--border2); }

.vk-btn-copy {
  align-items: center;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  font-size: 0.82rem;
  font-weight: 600;
  gap: 5px;
  padding: 5px 10px;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.vk-btn-copy:hover { color: var(--vk); background: var(--vk-light); }
.vk-btn-copy.copied { color: var(--green); background: rgba(52,199,89,.12); transition: color .1s, background .1s; }

.back-btn {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0;
  text-align: left;
  transition: color .15s;
  width: 100%;
}
.back-btn:hover { color: var(--text); }

/* ══════════════════════════════════════════════════════════
   ЛЕНДИНГ
   ══════════════════════════════════════════════════════════ */
.landing {
  align-items: center;
  background: var(--bg-grad);
  display: flex;
  flex-direction: column;
  gap: 24px;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
  transition: background .3s;
}

/* VK Logo */
.vk-logo-wrap { align-items: center; display: flex; gap: 10px; }
.vk-clover-svg { border-radius: 10px; flex-shrink: 0; height: 36px; width: 36px; }
.vk-logo-text { display: flex; flex-direction: column; gap: 1px; }
.vk-logo-name { color: var(--text); font-size: 0.92rem; font-weight: 700; line-height: 1.1; }
.vk-logo-sub  { color: var(--muted); font-size: 0.7rem; line-height: 1.1; }

/* Step cards */
.step-card {
  align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--sh-md);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
  width: 390px;
}

.step-title { font-size: 1.15rem; font-weight: 700; }

.avatar-label { color: var(--muted); font-size: 0.7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }

.avatar-grid { display: grid; gap: 6px; grid-template-columns: repeat(8, 1fr); }
.avatar-opt {
  aspect-ratio: 1;
  background: var(--surface2);
  border: 2px solid transparent;
  border-radius: 9px;
  cursor: pointer;
  font-size: 1.15rem;
  line-height: 1;
  padding: 4px;
  transition: border-color .15s, transform .1s;
}
.avatar-opt:hover { transform: scale(1.12); }
.avatar-opt.selected { border-color: var(--vk); background: var(--vk-light); }

.or-row  { align-items: center; display: flex; }
.or-text { color: var(--muted); font-size: 0.8rem; margin: 0 auto; }

.join-row  { display: flex; gap: 8px; }
.join-input { flex: 1; }

/* ══════════════════════════════════════════════════════════
   NAME OVERLAY
   ══════════════════════════════════════════════════════════ */
.name-overlay {
  align-items: center;
  background: var(--name-overlay-bg);
  backdrop-filter: blur(12px);
  display: flex;
  inset: 0;
  justify-content: center;
  position: fixed;
  z-index: 50;
}
.name-box {
  align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--sh-lg);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
  width: 390px;
}

/* ══════════════════════════════════════════════════════════
   GAME LAYOUT
   ══════════════════════════════════════════════════════════ */
.game { display: flex; flex-direction: column; height: 100vh; background: var(--bg-grad); }

/* ── Header ───────────────────────────────────── */
.header {
  align-items: center;
  background: transparent;
  display: flex;
  flex-shrink: 0;
  height: 60px;
  justify-content: space-between;
  padding: 0 14px;
  z-index: 10;
}

/* Floating pill groups inside the header */
.header-left, .header-right {
  align-items: center;
  background: rgba(255,255,255,0.90);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(0,16,61,0.10);
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(0,16,61,0.08), 0 0 0 0.5px rgba(0,16,61,0.06);
  display: flex;
  gap: 6px;
  padding: 6px 10px;
}
[data-theme="dark"] .header-left,
[data-theme="dark"] .header-right {
  background: rgba(22,25,36,0.92);
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 2px 16px rgba(0,0,0,0.35), 0 0 0 0.5px rgba(255,255,255,0.04);
}

.header-left  { align-items: center; display: flex; gap: 10px; }
.header-right { align-items: center; display: flex; gap: 8px; }

.owner-badge {
  background: var(--gold-bg);
  border: 1px solid var(--gold-border);
  border-radius: 6px;
  color: var(--gold);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 3px 9px;
}

/* Tabs */
.tab-group {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex;
  gap: 2px;
  padding: 3px;
}
.tab {
  background: transparent;
  border: none;
  border-radius: 7px;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 5px 12px;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.tab.active { background: var(--surface); color: var(--text); box-shadow: var(--sh-sm); }
.tab:hover:not(.active) { color: var(--text); }

.tab-content { display: flex; flex-direction: column; flex: 1; overflow: hidden; }

/* ══════════════════════════════════════════════════════════
   POKER TABLE
   ══════════════════════════════════════════════════════════ */
.table-area {
  align-items: center;
  display: flex;
  flex: 1;
  justify-content: center;
  overflow: hidden;
}

.table-wrap { height: 380px; position: relative; width: 700px; }

.poker-table {
  background: var(--table-bg);
  border: 1px solid var(--table-border);
  border-radius: 60px;
  box-shadow: var(--table-shadow);
  height: 210px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: background .3s, box-shadow .3s;
  width: 430px;
}

#seats { inset: 0; position: absolute; }

/* ── Seats ─────────────────────────────────────── */
.seat {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: absolute;
  transform: translate(-50%, -50%);
  width: 76px;
}

.seat-avatar {
  align-items: center;
  background: var(--surface);
  border: 2px solid var(--border2);
  border-radius: 50%;
  display: flex;
  font-size: 1.2rem;
  height: 42px;
  justify-content: center;
  transition: border-color .2s, box-shadow .2s;
  width: 42px;
}
.seat.is-you  .seat-avatar { border-color: var(--vk); }
.seat.voted   .seat-avatar { box-shadow: 0 0 0 2px var(--vk); }

.seat-name { color: var(--muted); font-size: 0.62rem; max-width: 76px; overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.seat.is-you .seat-name { color: var(--vk); font-weight: 600; }

.react-btn {
  background: transparent; border: none; border-radius: 6px; color: var(--muted);
  cursor: pointer; font-size: 0.72rem; padding: 2px 4px;
  transition: color .15s, background .15s;
}
.react-btn:hover { background: var(--surface2); color: var(--text); }

/* ── Player cards ───────────────────────────────── */
.card-wrap { height: 54px; perspective: 600px; width: 38px; }
.player-card {
  border-radius: 8px; height: 100%; position: relative;
  transform-style: preserve-3d; transition: transform .55s cubic-bezier(.4,0,.2,1); width: 100%;
}
.player-card.flipped { transform: rotateY(180deg); }

.card-face {
  align-items: center; backface-visibility: hidden; border-radius: 8px;
  display: flex; font-weight: 800; inset: 0; justify-content: center; position: absolute;
}

/* Рубашка */
.card-b {
  background: var(--pcard-bg);
  border: 1.5px solid var(--pcard-border);
  box-shadow: var(--sh-sm);
}
.seat.voted .card-b {
  background: var(--pcard-voted-bg);
  border-color: var(--pcard-voted-brd);
}
.seat.voted .card-b::after { content: '✓'; color: var(--vk); font-size: 0.9rem; }

/* Лицо */
.card-f {
  background: var(--surface);
  border: 1.5px solid var(--border2);
  box-shadow: var(--sh-md);
  color: var(--text);
  font-size: 1.2rem;
  transform: rotateY(180deg);
}

/* Ревоут */
.card-revote {
  align-items: center;
  background: var(--surface);
  border: 2px solid var(--vk);
  border-radius: 8px;
  box-shadow: var(--sh-lg);
  color: var(--text);
  display: flex;
  font-size: 1.2rem;
  font-weight: 800;
  height: 100%;
  inset: 0;
  justify-content: center;
  position: absolute;
  transform: rotate(18deg) translate(5px, -5px);
  transition: transform .25s ease;
  width: 100%;
  z-index: 2;
}

/* ── Table center ───────────────────────────────── */
.table-center {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
  left: 50%;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}
.table-center > * { pointer-events: auto; }

.wait-msg { color: var(--muted); font-size: 0.74rem; }

/* Reveal button */
.vk-btn-reveal {
  animation: pulse 2s infinite;
  background: var(--vk);
  border: none;
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 700;
  padding: 9px 22px;
  white-space: nowrap;
}
.vk-btn-reveal:hover { background: var(--vk-hover); animation: none; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,119,255,.5); }
  50%       { box-shadow: 0 0 0 10px rgba(0,119,255,0); }
}

/* Round/accept buttons */
.vk-btn-round {
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 6px 16px;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.vk-btn-round:hover { background: var(--surface); color: var(--text); }

/* Quick start */
.vk-btn-quick-start {
  animation: pulse 3s infinite;
  background: linear-gradient(135deg, var(--vk) 0%, #6c3be4 100%);
  border: none;
  border-radius: 12px;
  color: #fff;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: .01em;
  padding: 10px 24px;
  white-space: nowrap;
}
.vk-btn-quick-start:hover { animation: none; filter: brightness(1.12); }

/* ── Stats ──────────────────────────────────────── */
.stats {
  background: var(--stats-bg);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--sh-md);
  min-width: 136px;
  padding: 10px 14px;
}
.stats-row { align-items: center; display: flex; gap: 7px; margin-bottom: 5px; }
.stats-row:last-child { margin-bottom: 0; }
.stats-lbl   { color: var(--muted); font-size: 0.72rem; font-weight: 700; text-align: center; width: 16px; }
.stats-track { background: var(--surface2); border-radius: 4px; flex: 1; height: 6px; overflow: hidden; }
.stats-bar   { background: var(--vk); border-radius: 4px; height: 100%; transition: width .55s ease; width: 0; }
.stats-cnt   { color: var(--text); font-size: 0.72rem; font-weight: 700; text-align: right; width: 16px; }

/* ── Accept / scoring actions ───────────────────── */
.scoring-actions { align-items: center; display: flex; flex-direction: column; gap: 6px; }

.vk-btn-accept {
  animation: pulse-green 2s infinite;
  background: rgba(52,199,89,.1);
  border: 1px solid rgba(52,199,89,.45);
  border-radius: 10px;
  color: var(--green);
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 700;
  padding: 9px 22px;
  white-space: nowrap;
}
.vk-btn-accept:hover { background: rgba(52,199,89,.2); animation: none; }
.accept-wait {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  text-align: center;
}
@keyframes pulse-green {
  0%,100% { box-shadow: 0 0 0 0 rgba(52,199,89,.4); }
  50%      { box-shadow: 0 0 0 9px rgba(52,199,89,0); }
}

/* ── Vote area ──────────────────────────────────── */
.vote-area {
  align-items: center;
  background: var(--vote-area-bg);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 10px;
  padding: 12px 20px 18px;
}
.vote-hint { color: var(--muted); font-size: 0.7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.vote-cards { display: flex; gap: 12px; }

.vcard {
  background: var(--surface);
  border: 1.5px solid var(--border2);
  border-radius: 12px;
  box-shadow: var(--sh-sm);
  color: var(--muted);
  cursor: pointer;
  font-size: 1.8rem;
  font-weight: 800;
  height: 96px;
  transition: border-color .12s, background .12s, transform .12s, box-shadow .12s, color .12s;
  width: 74px;
}
.vcard:hover:not(:disabled) {
  border-color: var(--vk);
  color: var(--vk);
  background: var(--vk-light);
  transform: translateY(-5px);
  box-shadow: var(--sh-md);
}
.vcard.selected {
  background: var(--vk);
  border-color: var(--vk);
  color: #fff;
  transform: translateY(-7px);
  box-shadow: 0 8px 24px rgba(0,119,255,.4);
}
.vcard:disabled { cursor: default; opacity: 0.35; transform: none !important; }

/* ══════════════════════════════════════════════════════════
   REACTIONS
   ══════════════════════════════════════════════════════════ */
.reaction-picker {
  background: var(--reaction-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--sh-lg);
  display: flex;
  gap: 4px;
  padding: 8px 10px;
  position: fixed;
  z-index: 200;
}
.reaction-picker button {
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.4rem;
  padding: 4px 6px;
  transition: background .12s, transform .12s;
}
.reaction-picker button:hover { background: var(--surface2); transform: scale(1.2); }

.floating-emoji {
  animation: floatUp 1.5s ease forwards;
  font-size: 2rem;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 100;
}
@keyframes floatUp {
  0%   { transform: translate(-50%,-50%) scale(1); opacity: 1; }
  40%  { transform: translate(-50%,-110%) scale(1.6); opacity: 1; }
  100% { transform: translate(-50%,-200%) scale(2); opacity: 0; }
}

/* ══════════════════════════════════════════════════════════
   BACKLOG
   ══════════════════════════════════════════════════════════ */
.backlog-container {
  flex: 1;
  margin: 0 auto;
  max-width: 800px;
  overflow-y: auto;
  padding: 24px 32px;
  width: 100%;
}

.backlog-header { align-items: center; display: flex; justify-content: space-between; margin-bottom: 20px; }
.backlog-title { font-size: 1.1rem; font-weight: 700; }
.backlog-add-btn { font-size: 0.88rem; padding: 8px 18px; width: auto; }

.add-epic-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--sh-sm);
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
  padding: 16px;
}
.form-actions { display: flex; gap: 8px; }
.form-actions .vk-btn-primary  { flex: 1; width: auto; }
.form-actions .vk-btn-secondary { width: auto; }

.epic-error { color: var(--red); font-size: 0.82rem; }

.epic-list { display: flex; flex-direction: column; gap: 10px; }
.epic-group-label { color: var(--muted); font-size: 0.7rem; font-weight: 700; letter-spacing: .07em; margin-bottom: 6px; margin-top: 4px; text-transform: uppercase; }

.epic-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--sh-sm);
  padding: 14px 16px;
  transition: border-color .2s, box-shadow .2s;
}
.epic-card:hover { border-color: var(--border2); box-shadow: var(--sh-md); }

.epic-card-top { align-items: flex-start; display: flex; gap: 12px; justify-content: space-between; }
.epic-card-title { font-size: 0.95rem; font-weight: 600; margin-bottom: 3px; }
.epic-card-url { color: var(--muted); font-size: 0.75rem; max-width: 480px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.epic-card-url a { color: var(--vk); text-decoration: none; }
.epic-card-url a:hover { text-decoration: underline; }
.epic-card-meta { color: var(--muted); font-size: 0.72rem; margin-top: 4px; }
.epic-card-note {
  color: var(--muted); font-size: 0.78rem; line-height: 1.45; margin-top: 4px;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

/* RICE badges */
.rice-badges { display: flex; flex-shrink: 0; gap: 4px; }
.rice-badge {
  align-items: center; border-radius: 6px; display: flex; flex-direction: column;
  font-size: 0.7rem; font-weight: 700; gap: 2px; padding: 3px 7px;
}
.rice-badge small { font-size: 0.58rem; font-weight: 600; line-height: 1; opacity: 0.72; white-space: nowrap; }
.rice-badge.done { background: var(--vk-light); color: var(--vk); }
.rice-badge.todo { background: var(--surface2); color: var(--muted); }

.epic-status { align-items: center; display: inline-flex; font-size: 0.7rem; font-weight: 600; gap: 4px; margin-top: 8px; }
.status-queued  { color: var(--muted); }
.status-partial { color: #f0a500; }
.status-complete { color: var(--green); }

.epic-card-actions { display: flex; gap: 8px; margin-top: 10px; }

.vk-btn-start-scoring {
  background: var(--vk-light);
  border: 1px solid rgba(0,119,255,.3);
  border-radius: 8px;
  color: var(--vk);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 5px 14px;
  transition: background .15s;
  white-space: nowrap;
}
.vk-btn-start-scoring:hover { background: rgba(0,119,255,.16); }

/* ── Epic action icon buttons ─────────────────── */
.epic-delete-btn, .epic-edit-btn {
  background: transparent; border: 1px solid transparent; border-radius: 7px;
  color: var(--muted); cursor: pointer; font-size: 0.9rem; line-height: 1;
  opacity: 0; padding: 4px 7px;
  transition: opacity .15s, background .15s, border-color .15s, color .15s;
}
.epic-card:hover .epic-delete-btn,
.epic-card:hover .epic-edit-btn { opacity: 1; }

.epic-delete-btn:hover { background: rgba(255,59,48,.1); border-color: rgba(255,59,48,.3); color: var(--red); }
.epic-edit-btn:hover   { background: var(--vk-light); border-color: rgba(0,119,255,.3); color: var(--vk); }

/* ══════════════════════════════════════════════════════════
   SCORING BANNER
   ══════════════════════════════════════════════════════════ */
.scoring-banner {
  align-items: stretch;
  background: rgba(0,119,255,.05);
  border-bottom: 1px solid rgba(0,119,255,.18);
  display: flex;
  flex-shrink: 0;
  min-height: 56px;
  padding: 0;
}
[data-theme="dark"] .scoring-banner {
  background: rgba(61,155,255,.07);
  border-bottom-color: rgba(61,155,255,.2);
}

.scoring-banner-epic {
  align-items: flex-start; display: flex; flex: 1; flex-direction: column;
  gap: 2px; justify-content: center; min-width: 0; padding: 10px 16px 10px 20px;
}
.scoring-banner-divider { background: rgba(0,119,255,.18); flex-shrink: 0; width: 1px; }
.scoring-banner-criterion { align-items: center; display: flex; flex: 1; gap: 10px; min-width: 0; padding: 10px 16px; }

.scoring-criterion-badge {
  align-items: center; background: var(--vk); border-radius: 10px; color: #fff;
  display: flex; flex-shrink: 0; font-size: 1.1rem; font-weight: 800; height: 40px;
  justify-content: center; width: 40px;
}
.scoring-criterion-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.scoring-criterion-name { color: var(--text); font-size: 0.88rem; font-weight: 700; }
.scoring-criterion-desc { color: var(--muted); font-size: 0.75rem; line-height: 1.4; }
.scoring-scale-hint { color: var(--muted); font-size: 0.7rem; margin-top: 1px; opacity: 0.6; }

.scoring-epic-title-label { color: var(--muted); font-size: 0.65rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.scoring-epic-title-big   { color: var(--text); font-size: 0.95rem; font-weight: 700; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; }
.scoring-epic-url  { color: var(--vk); font-size: 0.72rem; opacity: 0.75; overflow: hidden; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; width: 100%; }
.scoring-epic-url:hover { opacity: 1; text-decoration: underline; }
.scoring-epic-note { background: rgba(0,119,255,.06); border-left: 2px solid rgba(0,119,255,.3); border-radius: 4px; color: var(--muted); font-size: 0.73rem; line-height: 1.45; margin-top: 2px; padding: 3px 8px; width: 100%; }

.scoring-stop-btn {
  align-self: center; background: rgba(255,59,48,.08); border: 1px solid rgba(255,59,48,.25);
  border-radius: 7px; color: var(--red); cursor: pointer; flex-shrink: 0;
  font-size: 0.74rem; font-weight: 600; margin-right: 14px; padding: 6px 11px;
  transition: background .15s; white-space: nowrap;
}
.scoring-stop-btn:hover { background: rgba(255,59,48,.18); }

/* ══════════════════════════════════════════════════════════
   MODALS
   ══════════════════════════════════════════════════════════ */
.modal-overlay {
  align-items: center;
  background: var(--modal-overlay);
  backdrop-filter: blur(6px);
  display: flex;
  inset: 0;
  justify-content: center;
  position: fixed;
  z-index: 100;
}
.modal-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--sh-lg);
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 90vh;
  max-width: 460px;
  overflow-y: auto;
  padding: 28px;
  width: 100%;
}
.modal-box--wide { max-width: 560px; }
.modal-title     { font-size: 1.1rem; font-weight: 700; }
.modal-sub       { color: var(--muted); font-size: 0.8rem; line-height: 1.5; margin-top: -6px; }
.modal-label     { color: var(--muted); font-size: 0.73rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.modal-epic-name { color: var(--vk); font-size: 0.9rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal-epic-meta { color: var(--muted); font-size: 0.74rem; margin-top: -8px; }

.modal-actions { display: flex; gap: 8px; }
.modal-actions .vk-btn-primary  { flex: 1; width: auto; }
.modal-actions .vk-btn-secondary { width: auto; }

/* RICE criteria list in modals */
.rice-criteria-list { display: flex; flex-direction: column; gap: 8px; }
.rice-criterion-item {
  align-items: center; background: var(--surface2); border: 1.5px solid var(--border);
  border-radius: 10px; cursor: pointer; display: flex; gap: 12px; padding: 10px 13px;
  transition: border-color .15s;
}
.rice-criterion-item:hover { border-color: var(--vk); }
.rice-criterion-item.already-done { opacity: 0.5; }
.rice-criterion-item input[type=checkbox] { accent-color: var(--vk); cursor: pointer; flex-shrink: 0; height: 16px; width: 16px; }
.rice-criterion-item .rice-badge { flex-shrink: 0; }
.rice-crit-info  { display: flex; flex-direction: column; gap: 2px; }
.rice-crit-name  { color: var(--text); font-size: 0.86rem; font-weight: 600; }
.rice-crit-desc  { color: var(--muted); font-size: 0.72rem; }

/* Quick-start tabs */
.qs-tabs { display: flex; gap: 4px; margin-bottom: 14px; }
.qs-tab {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--muted);
  cursor: pointer;
  flex: 1;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 7px 4px;
  transition: background .15s, color .15s, border-color .15s;
}
.qs-tab.active { background: var(--vk-light); border-color: var(--vk); color: var(--text); }
.qs-tab:hover:not(.active) { background: var(--surface); color: var(--text); }

.qs-panel { display: flex; flex-direction: column; gap: 8px; }

/* Criteria items inside quickStart modal */
.criteria-item {
  align-items: center;
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  gap: 10px;
  padding: 9px 13px;
  transition: border-color .15s, background .15s;
}
.criteria-item:hover { border-color: var(--border2); background: var(--surface); }
.criteria-item input[type=checkbox] { accent-color: var(--vk); cursor: pointer; flex-shrink: 0; height: 15px; width: 15px; }
.criteria-badge {
  align-items: center;
  background: var(--vk);
  border-radius: 7px;
  color: #fff;
  display: flex;
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 800;
  height: 26px;
  justify-content: center;
  width: 26px;
}
.criteria-name { color: var(--text); font-size: 0.86rem; font-weight: 600; }

/* Modal inputs */
.modal-input {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.88rem;
  outline: none;
  padding: 9px 12px;
  width: 100%;
  transition: border-color .2s;
}
.modal-input:focus { border-color: var(--vk); }
.modal-input::placeholder { color: var(--muted); }

.modal-textarea {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.88rem;
  outline: none;
  padding: 9px 12px;
  resize: vertical;
  width: 100%;
  transition: border-color .2s;
}
.modal-textarea:focus { border-color: var(--vk); }
.modal-textarea::placeholder { color: var(--muted); }

/* Epic list in QS */
.qs-epic-list { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; }
.qs-epic-item {
  align-items: center; background: var(--surface2); border: 1px solid var(--border);
  border-radius: 8px; cursor: pointer; display: flex; gap: 10px; padding: 9px 12px;
  transition: border-color .15s;
}
.qs-epic-item:hover { border-color: var(--vk); }
.qs-epic-item input[type=radio] { accent-color: var(--vk); cursor: pointer; flex-shrink: 0; }
.qs-epic-info { min-width: 0; }
.qs-epic-title { font-size: 0.88rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qs-epic-meta  { color: var(--muted); font-size: 0.72rem; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qs-epic-url   { color: var(--muted); font-size: 0.73rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qs-plain-hint { color: var(--muted); font-size: 0.8rem; line-height: 1.5; }

/* RICE Settings */
.rice-settings-form { display: flex; flex-direction: column; gap: 16px; }
.rice-settings-section {
  background: var(--surface2); border: 1.5px solid var(--border); border-radius: 12px;
  display: flex; flex-direction: column; gap: 10px; padding: 14px 16px;
}
.rice-settings-section-header { align-items: center; display: flex; gap: 10px; margin-bottom: 2px; }
.rice-settings-badge {
  align-items: center; background: var(--vk); border-radius: 7px; color: #fff; display: flex;
  flex-shrink: 0; font-size: 0.9rem; font-weight: 800; height: 30px; justify-content: center; width: 30px;
}
.rice-settings-crit-name { color: var(--text); font-size: 0.88rem; font-weight: 700; }
.rice-settings-field label { color: var(--muted); display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: .05em; margin-bottom: 4px; text-transform: uppercase; }
.rice-settings-field textarea { min-height: 52px; resize: vertical; }
.rice-hints-row  { display: flex; gap: 8px; }
.rice-hint-field { display: flex; flex-direction: column; flex: 1; gap: 4px; }
.rice-hint-field label { color: var(--muted); font-size: 0.7rem; font-weight: 700; letter-spacing: .05em; text-align: center; text-transform: uppercase; }
.rice-hint-field .vk-input { font-size: 0.83rem; padding: 8px 6px; text-align: center; }

/* ══════════════════════════════════════════════════════════
   RECENT ROOMS
   ══════════════════════════════════════════════════════════ */
.recent-rooms { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 14px; }
.recent-rooms-label { color: var(--muted); font-size: 0.7rem; font-weight: 700; letter-spacing: .06em; margin-bottom: 8px; text-transform: uppercase; }

.recent-room-item {
  align-items: center; background: var(--surface2); border: 1px solid var(--border);
  border-radius: 10px; display: flex; gap: 6px; margin-bottom: 6px; padding: 6px 6px 6px 13px;
  transition: border-color .15s, background .15s;
}
.recent-room-item:hover { background: var(--surface); border-color: var(--border2); }

.recent-room-link {
  align-items: center; color: var(--text); display: flex; flex: 1; gap: 8px;
  justify-content: space-between; min-width: 0; text-decoration: none;
}
.recent-room-link:hover .recent-room-name { color: var(--vk); }
.recent-room-name  { font-size: 0.88rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; transition: color .15s; white-space: nowrap; }
.recent-room-arrow { color: var(--muted); flex-shrink: 0; font-size: 0.85rem; }
.recent-room-actions { align-items: center; display: flex; flex-shrink: 0; gap: 2px; }

.recent-room-hide, .recent-room-delete {
  background: transparent; border: none; border-radius: 6px; color: var(--muted);
  cursor: pointer; font-size: 0.78rem; opacity: 0; padding: 4px 7px;
  transition: opacity .15s, background .15s, color .15s;
}
.recent-room-item:hover .recent-room-hide,
.recent-room-item:hover .recent-room-delete { opacity: 1; }
.recent-room-hide:hover { background: var(--surface2); color: var(--text); }
.recent-room-delete:hover { background: rgba(255,59,48,.1); color: var(--red); }

/* ══════════════════════════════════════════════════════════
   HEADER 3-DOT DROPDOWN MENU
   ══════════════════════════════════════════════════════════ */
.header-menu-wrap { position: relative; }

.header-menu-btn {
  align-items: center;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  font-size: 1.35rem;
  font-weight: 700;
  height: 34px;
  justify-content: center;
  line-height: 1;
  padding: 0;
  transition: background .15s, color .15s;
  width: 34px;
}
.header-menu-btn:hover { background: var(--surface2); color: var(--text); }

.header-menu {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--sh-lg);
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 210px;
  padding: 5px;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 200;
}

.header-menu-item {
  align-items: center;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
  display: flex;
  font-size: 0.85rem;
  font-weight: 500;
  gap: 9px;
  padding: 9px 12px;
  text-align: left;
  transition: background .12s;
  width: 100%;
  white-space: nowrap;
}
.header-menu-item:hover { background: var(--surface2); }
.header-menu-item--danger { color: var(--red); }
.header-menu-item--danger:hover { background: rgba(255,59,48,.08); }

.header-menu-sep {
  background: var(--border);
  height: 1px;
  margin: 3px 0;
}

/* keep IDs in DOM but invisible — JS still toggles .hidden on them */
.header-menu-item.hidden { display: none !important; }

/* ══════════════════════════════════════════════════════════
   SCORING BANNER: url & note
   ══════════════════════════════════════════════════════════ */
.scoring-epic-url  { color: var(--vk); font-size: 0.72rem; opacity: .7; overflow: hidden; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; width: 100%; }
.scoring-epic-url:hover { opacity: 1; text-decoration: underline; }
.scoring-epic-note { background: rgba(0,119,255,.05); border-left: 2px solid rgba(0,119,255,.3); border-radius: 4px; color: var(--muted); font-size: 0.73rem; line-height: 1.45; margin-top: 2px; padding: 3px 8px; width: 100%; }

/* ══════════════════════════════════════════════════════════
   QUICK START BUTTON (in table)
   ══════════════════════════════════════════════════════════ */
.vk-btn-quick-start {
  animation: pulse 3s infinite;
  background: linear-gradient(135deg, var(--vk) 0%, #6c3be4 100%);
  border: none; border-radius: 12px; color: #fff; cursor: pointer;
  font-size: 0.9rem; font-weight: 700; letter-spacing: .01em; padding: 10px 24px; white-space: nowrap;
}
.vk-btn-quick-start:hover { animation: none; filter: brightness(1.12); }

/* ══════════════════════════════════════════════════════════
   EPIC CARD NOTE / SETTINGS MODAL WIDE
   ══════════════════════════════════════════════════════════ */
.modal-box--wide { max-width: 560px; }
.modal-sub { color: var(--muted); font-size: 0.8rem; line-height: 1.5; margin-top: -6px; }