/* Токены — кошелёк, магазин и друзья.
 * Отдельный файл, чтобы не раздувать cabinet.css (CLAUDE.md: монолиты не копим).
 *
 * Тема — кабинетная и только кабинетная. Ни одного «своего» цвета в коде ниже:
 * всё идёт либо из общих токенов common.css (--surface/--text/--border/--accent/
 * --radius/--ease), либо из доменной пары --tk-accent/--tk-soft, объявленной
 * здесь же. Это ровно та идиома, по которой живут .streak-card и .league-card,
 * поэтому розовая тема (body.pussy-power-mode) перекрашивает экран токенов
 * одним блоком, как перекрашивает серию и лигу.
 *
 * Иконки Streamline залиты currentColor: цвет задаём через color, не fill.
 */

/* ───────── Палитра домена ───────── */
.tk-card,
.tk-overlay {
  /* «Золото» валюты — в одном ряду со streak (#d97706) и league (#b45309). */
  --tk-accent: #b45309;
  --tk-soft: rgba(180, 83, 9, 0.1);
  --tk-line: rgba(180, 83, 9, 0.22);
}
body.pussy-power-mode .tk-card,
body.pussy-power-mode .tk-overlay {
  --tk-accent: #be185d;
  --tk-soft: rgba(190, 24, 93, 0.14);
  --tk-line: rgba(190, 24, 93, 0.28);
}

/* ───────── Карточка входа в кабинете ───────── */
.tk-card {
  display: flex;
  align-items: center;
  gap: 14px;
  /* Левая полоса — как у .league-card: карточка встаёт в один ряд с лигой. */
  border-left: 4px solid var(--tk-accent);
}
.tk-card-icon {
  /* Голая иконка без подложки — так же живёт .spinw-card-emoji у «Колеса
     фортуны», соседа по ленте. Залитая плитка 42×42, которая была здесь,
     в кабинете не встречается больше нигде и читалась чужим квадратом. */
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tk-accent);
}
.tk-card-icon svg { width: 32px; height: 32px; }
/* «+N прилетело» — пилюля у заголовка, а не точка на иконке: на монете
   в 32px она перекрывала сам рисунок. display ставит tokens.js. */
.tk-card-badge {
  display: none;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 9px;
  background: var(--danger, #dc2626);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 18px;
  vertical-align: 2px;
}
.tk-card-body { flex: 1 1 auto; min-width: 0; }
.tk-card-title { font-size: 1.125rem; margin: 0 0 4px; color: var(--text); }
.tk-card-hint {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--text-secondary);
}
.tk-card-balance {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  color: var(--text, #1e293b);
}
.tk-card-balance svg { width: 14px; height: 14px; color: var(--tk-accent); }
.tk-card-btn {
  flex: 0 0 auto;
  border: none;
  border-radius: var(--radius-sm, 10px);
  padding: 10px 18px;
  font: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  color: #fff;
  background: var(--accent, #0d9488);
  cursor: pointer;
  transition: background 0.15s, transform 0.12s;
}
.tk-card-btn:hover { background: var(--accent-hover, #0f766e); }
.tk-card-btn:active { transform: scale(0.97); }

/* ───────── Оверлей ───────── */
.tk-overlay {
  position: fixed;
  inset: 0;
  z-index: 9400;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px 40px;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.22s ease;
}
.tk-overlay.is-open { opacity: 1; }
/* Подложку розовая тема красит так же, как у .modal-overlay кабинета. */
body.pussy-power-mode .tk-overlay { background: rgba(190, 24, 93, 0.18); }

.tk-sheet {
  width: 100%;
  max-width: 480px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(0, 0, 0, 0.06));
  border-radius: var(--radius, 14px);
  box-shadow: var(--shadow-card, 0 4px 20px rgba(0, 0, 0, 0.06)), 0 24px 60px rgba(0, 0, 0, 0.18);
  padding: 18px 18px 22px;
  transform: translateY(14px) scale(0.985);
  transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
.tk-overlay.is-open .tk-sheet { transform: translateY(0) scale(1); }

.tk-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.tk-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.0625rem;
  font-weight: 700;
  margin: 0;
  color: var(--text, #0f172a);
}
.tk-title svg { width: 20px; height: 20px; color: var(--tk-accent); }
.tk-close {
  border: none;
  background: var(--bg-secondary, #f1f5f9);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  color: var(--text-secondary, #64748b);
  transition: background 0.15s;
}
.tk-close:hover { background: var(--border, #e2e8f0); }

/* ───────── Баланс ───────── */
.tk-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  padding: 16px 18px;
  border-radius: var(--radius, 14px);
  border: 1px solid var(--tk-line);
  background: var(--tk-soft);
  margin-bottom: 14px;
}
.tk-hero-main { min-width: 0; }
.tk-hero-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tk-accent);
  margin: 0 0 4px;
}
.tk-hero-value {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--tk-accent);
  font-variant-numeric: tabular-nums;
}
.tk-hero-unit { font-size: 0.9rem; font-weight: 600; opacity: 0.7; }
.tk-hero-coin {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tk-line);
  color: var(--tk-accent);
}
.tk-hero-coin svg { width: 22px; height: 22px; }
.tk-hero-meta {
  grid-column: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--tk-accent);
  opacity: 0.8;
}

/* ───────── Прилетело ───────── */
.tk-incoming {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 14px;
  margin-bottom: 14px;
  border-radius: var(--radius-sm, 10px);
  background: var(--success-soft, rgba(5, 150, 105, 0.14));
  color: var(--success, #059669);
  font-size: 0.85rem;
  font-weight: 600;
}
.tk-incoming svg { width: 18px; height: 18px; flex: 0 0 auto; }

/* ───────── Секции ───────── */
.tk-section { margin-bottom: 18px; }
.tk-section:last-child { margin-bottom: 0; }
.tk-section-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary, #64748b);
  margin: 0 0 10px;
}
.tk-section-title svg { width: 15px; height: 15px; }
.tk-section-friends {
  padding: 14px;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.06));
  border-radius: var(--radius, 14px);
  background: var(--bg-secondary, #f8fafc);
}

/* ───────── Магазин ───────── */
.tk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tk-item {
  --tk-item: var(--tk-accent);
  --tk-item-soft: var(--tk-soft);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.07));
  border-radius: var(--radius-sm, 10px);
  background: var(--surface, #fff);
  transition: border-color 0.15s var(--ease, ease), box-shadow 0.15s var(--ease, ease);
}
.tk-item:hover { border-color: var(--tk-item); box-shadow: var(--shadow-card, 0 4px 20px rgba(0, 0, 0, 0.06)); }
.tk-item.is-blocked { opacity: 0.6; }
.tk-item.is-blocked:hover { border-color: var(--border, rgba(0, 0, 0, 0.07)); box-shadow: none; }

.tk-item.accent-ice   { --tk-item: #0284c7; --tk-item-soft: rgba(2, 132, 199, 0.12); }
.tk-item.accent-gold   { --tk-item: #d97706; --tk-item-soft: rgba(217, 119, 6, 0.13); }
.tk-item.accent-violet   { --tk-item: #7c3aed; --tk-item-soft: rgba(124, 58, 237, 0.12); }
.tk-item.accent-teal   { --tk-item: #0d9488; --tk-item-soft: rgba(13, 148, 136, 0.12); }
.tk-item.accent-pink   { --tk-item: #db2777; --tk-item-soft: rgba(219, 39, 119, 0.12); }
/* В розовой теме кабинет схлопывает все акценты в один — плитки не исключение. */
body.pussy-power-mode .tk-item {
  --tk-item: var(--tk-accent);
  --tk-item-soft: var(--tk-soft);
}

.tk-item-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm, 10px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tk-item-soft);
  color: var(--tk-item);
}
.tk-item-icon svg { width: 19px; height: 19px; }
.tk-item-title {
  font-size: 0.885rem;
  font-weight: 700;
  color: var(--text, #0f172a);
  line-height: 1.25;
}
.tk-item-sub {
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--text-secondary, #64748b);
  flex: 1 1 auto;
}
.tk-item-blocked { font-size: 0.71rem; line-height: 1.35; color: var(--text-secondary, #94a3b8); }
.tk-item-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tk-price {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--text, #0f172a);
  font-variant-numeric: tabular-nums;
}
.tk-price svg { width: 14px; height: 14px; color: var(--tk-accent); }
.tk-buy {
  border: none;
  border-radius: var(--radius-sm, 10px);
  padding: 7px 14px;
  font: inherit;
  font-size: 0.79rem;
  font-weight: 700;
  color: #fff;
  /* Действие красим общим акцентом кабинета, а не цветом плитки: цветными
     остаются только иконки-иллюстрации, кнопки везде одинаковые. */
  background: var(--accent, #0d9488);
  cursor: pointer;
  transition: background 0.15s, transform 0.12s;
}
.tk-buy:hover:not(:disabled) { background: var(--accent-hover, #0f766e); }
.tk-buy:active:not(:disabled) { transform: scale(0.96); }
.tk-buy:disabled {
  background: var(--bg-secondary, #e2e8f0);
  color: var(--text-secondary, #94a3b8);
  cursor: not-allowed;
}

/* ───────── Инвентарь ───────── */
.tk-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tk-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--bg-secondary, #f1f5f9);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text, #334155);
}
.tk-chip svg { width: 14px; height: 14px; }
.tk-chip.is-ice { background: rgba(2, 132, 199, 0.11); color: #0369a1; }
body.pussy-power-mode .tk-chip { background: var(--tk-soft); color: var(--tk-accent); }
.tk-chip.is-violet { background: rgba(124, 58, 237, 0.11); color: #6d28d9; }
.tk-chip.is-teal { background: rgba(13, 148, 136, 0.11); color: #0f766e; }
.tk-chip.is-pink { background: rgba(219, 39, 119, 0.11); color: #be185d; }
.tk-chip-empty { color: var(--text-secondary, #94a3b8); font-weight: 500; }
.tk-promo-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* ───────── Друзья ───────── */
.tk-friends-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.tk-friends-head .tk-section-title { margin-bottom: 0; }
.tk-friends-count {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--text-secondary, #64748b);
  font-variant-numeric: tabular-nums;
}
.tk-friends-count b { color: var(--text, #334155); }

.tk-stack { display: inline-flex; }
.tk-stack .tk-avatar { margin-right: -7px; box-shadow: 0 0 0 2px var(--bg-secondary, #f8fafc); }
.tk-stack .tk-avatar:last-child { margin-right: 0; }

.tk-avatar {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(0, 0, 0, 0.07));
  font-size: 1rem;
  line-height: 1;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.tk-avatar-sm { width: 24px; height: 24px; font-size: 0.75rem; }
.tk-avatar-rest {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-secondary, #64748b);
}
.tk-avatar-hit { transform: scale(1.32); }

.tk-search {
  position: relative;
  display: flex;
  align-items: center;
  margin: 10px 0;
}
.tk-search svg {
  position: absolute;
  left: 11px;
  width: 16px;
  height: 16px;
  color: var(--text-secondary, #94a3b8);
  pointer-events: none;
}
.tk-search input {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px 9px 34px;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.1));
  border-radius: 10px;
  background: var(--surface, #fff);
  color: var(--text, #1e293b);
  font: inherit;
  font-size: 0.86rem;
}
.tk-search input:focus {
  outline: none;
  border-color: var(--accent, #0d9488);
  box-shadow: 0 0 0 3px var(--accent-soft, rgba(13, 148, 136, 0.12));
}

.tk-people { display: flex; flex-direction: column; gap: 2px; }
.tk-people-search:not(:empty) {
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border, rgba(0, 0, 0, 0.06));
}

/* Геометрия строки повторяет .league-row кабинета */
.tk-person {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm, 10px);
  transition: background 0.2s var(--ease, ease);
}
.tk-person:hover { background: var(--surface-hover, #f1f5f9); }
.tk-person-body { flex: 1 1 auto; min-width: 0; }
.tk-person-name {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text, #1e293b);
}
/* Обрезаем именно имя: если ellipsis повесить на флекс-контейнер, он съест
   бейдж «взаимно» вместо длинного имени. */
.tk-person-name-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tk-person-sub {
  display: block;
  font-size: 0.73rem;
  color: var(--text-secondary, #94a3b8);
}
.tk-badge {
  flex: 0 0 auto;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--accent-soft, rgba(13, 148, 136, 0.13));
  color: var(--accent, #0f766e);
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: lowercase;
}

/* Сегментированный «бросок»: один тап — токены улетели */
.tk-throw {
  flex: 0 0 auto;
  display: inline-flex;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.1));
  border-radius: 9px;
  overflow: hidden;
  background: var(--surface, #fff);
}
.tk-throw-btn {
  border: none;
  border-right: 1px solid var(--border, rgba(0, 0, 0, 0.08));
  background: none;
  padding: 6px 10px;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent, #0f766e);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: background 0.14s, color 0.14s;
}
.tk-throw-btn:last-child { border-right: none; }
.tk-throw-btn:hover:not(:disabled) { background: var(--accent, #0d9488); color: #fff; }
.tk-throw-btn:active:not(:disabled) { transform: scale(0.95); }
.tk-throw-btn:disabled { color: var(--text-secondary, #cbd5e1); cursor: not-allowed; }
.tk-throw-note { font-size: 0.71rem; color: var(--text-secondary, #94a3b8); }

.tk-person-x {
  flex: 0 0 auto;
  border: none;
  background: none;
  color: var(--text-secondary, #cbd5e1);
  font-size: 0.85rem;
  line-height: 1;
  padding: 5px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
}
.tk-person:hover .tk-person-x { opacity: 1; }
.tk-person-x:hover { color: var(--danger, #dc2626); }
.tk-person-x:focus-visible { opacity: 1; }

.tk-person-add {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--accent, #0d9488);
  background: none;
  border-radius: 9px;
  padding: 6px 11px;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent, #0f766e);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.tk-person-add svg { width: 15px; height: 15px; }
.tk-person-add:hover:not(:disabled) { background: var(--accent, #0d9488); color: #fff; }
.tk-person-add:disabled { opacity: 0.5; cursor: default; }
.tk-person-done {
  flex: 0 0 auto;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-secondary, #94a3b8);
}

/* ───────── Как заработать ───────── */
.tk-rules { display: flex; flex-direction: column; gap: 7px; }
.tk-rule {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.82rem;
  color: var(--text, #334155);
}
.tk-rule-hint {
  display: block;
  font-size: 0.72rem;
  color: var(--text-secondary, #94a3b8);
  margin-top: 1px;
}
.tk-rule-reward { flex: 0 0 auto; font-weight: 800; color: var(--tk-accent); }

/* ───────── История ───────── */
.tk-history { display: flex; flex-direction: column; }
.tk-hrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border, rgba(0, 0, 0, 0.06));
  font-size: 0.84rem;
}
.tk-hrow:last-child { border-bottom: none; }
.tk-hrow-title { color: var(--text, #334155); }
.tk-hrow-date {
  display: block;
  font-size: 0.72rem;
  color: var(--text-secondary, #94a3b8);
  margin-top: 1px;
}
.tk-hrow-delta { flex: 0 0 auto; font-weight: 800; font-variant-numeric: tabular-nums; }
.tk-hrow-delta.is-plus { color: var(--success, #059669); }
.tk-hrow-delta.is-minus { color: var(--text-secondary, #64748b); }
.tk-more {
  align-self: center;
  margin-top: 10px;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
  background: none;
  border-radius: 9px;
  padding: 7px 16px;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary, #64748b);
  cursor: pointer;
}
.tk-more:hover { background: var(--bg-secondary, #f1f5f9); }

.tk-empty, .tk-note {
  font-size: 0.79rem;
  color: var(--text-secondary, #94a3b8);
  margin: 8px 0 0;
  line-height: 1.45;
}
.tk-note-lock { color: var(--tk-accent); }

/* ───────── Тост и полёт монетки ───────── */
.tk-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 14px);
  z-index: 9500;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: min(92vw, 420px);
  padding: 12px 18px;
  border-radius: var(--radius-sm, 10px);
  background: var(--text, #1e293b);
  color: var(--surface, #fff);
  font-size: 0.87rem;
  font-weight: 600;
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.tk-toast.is-open { opacity: 1; transform: translate(-50%, 0); }
.tk-toast svg { width: 17px; height: 17px; color: currentColor; flex: 0 0 auto; }
.tk-toast.is-error { background: var(--danger, #dc2626); }

.tk-fly {
  position: fixed;
  z-index: 9600;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  color: var(--tk-accent, #b45309);
  pointer-events: none;
  animation: tkFly 0.52s cubic-bezier(0.4, 0, 0.5, 1) forwards;
}
.tk-fly svg { width: 22px; height: 22px; }
@keyframes tkFly {
  0%   { transform: translate(0, 0) scale(0.7); opacity: 0; }
  15%  { opacity: 1; }
  70%  { transform: translate(calc(var(--tk-dx) * 0.8), calc(var(--tk-dy) * 0.8 - 18px)) scale(1.1); }
  100% { transform: translate(var(--tk-dx), var(--tk-dy)) scale(0.5); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tk-overlay, .tk-sheet, .tk-toast, .tk-buy, .tk-item, .tk-avatar { transition: none; }
  .tk-fly { display: none; }
}

/* ───────── Мобильная раскладка ───────── */
@media (max-width: 480px) {
  .tk-sheet { padding: 14px 12px 18px; border-radius: 16px; }
  .tk-grid { grid-template-columns: 1fr; }
  .tk-hero-value { font-size: 1.75rem; }
  .tk-card { flex-wrap: wrap; }
  .tk-card-btn { width: 100%; }
  .tk-person { flex-wrap: wrap; row-gap: 6px; }
  .tk-person-body { flex-basis: calc(100% - 90px); }
  .tk-throw { margin-left: 44px; }
  .tk-person-x { margin-left: auto; opacity: 1; }
}

/* ───────── Квесты дня ─────────
 * По 21st.dev: Progress Card (строка), Achievement Card (сундук),
 * Achievement Unlocked (модалка). Иконки — спрайт Streamline (.sl-icon).
 * Анимация полосы — keyframes, не rAF: в скрытых вкладках rAF стоит. */
.tk-quests-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.tk-quests-meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.74rem;
  color: var(--text-secondary, #94a3b8);
}
.tk-quests-meta .sl-icon { width: 13px; height: 13px; }
.tk-quests .tk-section-title .sl-icon { width: 15px; height: 15px; }
.tk-quest-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }

.tk-quest {
  --tk-q: #059669;
  --tk-q-soft: rgba(5, 150, 105, 0.12);
  padding: 14px 14px 12px;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
  border-radius: 14px;
  background: var(--surface, #fff);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.tk-quest.is-medium { --tk-q: #2563eb; --tk-q-soft: rgba(37, 99, 235, 0.12); }
.tk-quest.is-hard { --tk-q: #7c3aed; --tk-q-soft: rgba(124, 58, 237, 0.12); }
.tk-quest.is-done { background: var(--tk-q-soft); border-color: transparent; }

.tk-quest-head { display: flex; align-items: center; gap: 10px; }
.tk-quest-ic {
  flex: 0 0 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tk-q-soft);
  color: var(--tk-q);
  --sl-accent: var(--tk-q);
}
.tk-quest.is-done .tk-quest-ic { background: var(--tk-q); color: #fff; --sl-accent: rgba(255, 255, 255, 0.55); }
.tk-quest-ic .sl-icon { width: 19px; height: 19px; }
.tk-quest-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text, #334155);
}
.tk-quest-reward {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--tk-soft);
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--tk-accent);
}
.tk-quest-reward svg, .tk-chest-reward svg { width: 13px; height: 13px; }

.tk-quest-bar {
  position: relative;
  height: 8px;
  margin: 12px 0 10px;
  border-radius: 999px;
  background: var(--tk-q-soft);
  overflow: hidden;
}
.tk-quest-bar > span {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--tk-pct, 0%);
  border-radius: inherit;
  background: var(--tk-q);
  animation: tk-quest-fill 1.2s ease-in-out;
}
@keyframes tk-quest-fill { from { width: 0; } }
@media (prefers-reduced-motion: reduce) { .tk-quest-bar > span { animation: none; } }

.tk-quest-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.tk-quest-labels { min-width: 0; }
.tk-quest-diff {
  margin: 0;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tk-q);
}
.tk-quest-hint {
  margin: 1px 0 0;
  font-size: 0.76rem;
  color: var(--text-secondary, #94a3b8);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tk-quest-count {
  flex: 0 0 auto;
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text, #334155);
}
.tk-quest-count span { font-size: 0.85rem; font-weight: 600; color: var(--text-secondary, #94a3b8); }

.tk-quest-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border, rgba(0, 0, 0, 0.08));
}
.tk-quest-go, .tk-quest-reroll {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 6px 12px;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}
.tk-quest-go { background: var(--tk-q); color: #fff; --sl-accent: rgba(255, 255, 255, 0.5); }
.tk-quest-go:hover { filter: brightness(1.08); }
.tk-quest-go .sl-icon { width: 14px; height: 14px; }
.tk-quest-reroll {
  padding: 6px 8px;
  background: none;
  border-color: var(--border, rgba(0, 0, 0, 0.1));
  color: var(--text-secondary, #64748b);
}
.tk-quest-reroll .sl-icon { width: 16px; height: 16px; }
.tk-quest-reroll:hover { background: var(--bg-secondary, #f1f5f9); }
.tk-quest-reroll:disabled { opacity: 0.5; cursor: default; }

/* Сундук — Achievement Card */
.tk-chest {
  margin-top: 12px;
  padding: 16px 14px 12px;
  border: 1px solid var(--tk-line);
  border-radius: 16px;
  background: var(--surface, #fff);
  text-align: center;
}
.tk-chest.is-open { background: var(--tk-soft); }
.tk-chest-num {
  margin: 0;
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--tk-accent);
  font-variant-numeric: tabular-nums;
}
.tk-chest-num span { font-size: 1.2rem; font-weight: 700; opacity: 0.6; }
.tk-chest-label { margin: 4px 0 0; font-size: 0.78rem; font-weight: 600; color: var(--text-secondary, #94a3b8); }
.tk-chest-badges { display: flex; align-items: flex-end; justify-content: center; gap: 14px; margin: 14px 0 12px; }
.tk-chest-badge {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(3px);
  background: var(--bg-secondary, #f1f5f9);
  color: var(--text-secondary, #94a3b8);
  --sl-accent: currentColor;
  filter: grayscale(1);
  opacity: 0.7;
}
.tk-chest-badge.is-mid { transform: translateY(-6px); width: 54px; height: 54px; }
.tk-chest-badge.is-got {
  filter: none;
  opacity: 1;
  background: var(--tk-accent);
  color: #fff;
  --sl-accent: rgba(255, 255, 255, 0.5);
  box-shadow: 0 4px 12px var(--tk-line);
}
.tk-chest-badge .sl-icon { width: 22px; height: 22px; }
.tk-chest-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px dashed var(--tk-line);
  text-align: left;
  font-size: 0.8rem;
  color: var(--text, #334155);
}
.tk-chest-gift { color: var(--tk-accent); display: inline-flex; }
.tk-chest-gift .sl-icon { width: 20px; height: 20px; }
.tk-chest-text { flex: 1 1 auto; }
.tk-chest-reward {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 800;
  color: var(--tk-accent);
}
.tk-card-quests { font-weight: 700; color: var(--tk-accent); }

/* Открытие сундука — Achievement Unlocked */
.tk-unlock {
  --tk-accent: #b45309;
  --tk-soft: rgba(180, 83, 9, 0.1);
  --tk-line: rgba(180, 83, 9, 0.22);
  position: fixed;
  inset: 0;
  z-index: 9600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  transition: opacity 0.2s ease;
}
body.pussy-power-mode .tk-unlock { --tk-accent: #be185d; --tk-soft: rgba(190, 24, 93, 0.14); --tk-line: rgba(190, 24, 93, 0.28); }
.tk-unlock.is-open { opacity: 1; }
.tk-unlock-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.55); }
.tk-unlock-dialog {
  position: relative;
  width: 100%;
  max-width: 380px;
  padding: 28px 22px 22px;
  border-radius: 18px;
  background: var(--surface, #fff);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25);
  text-align: center;
  transform: translateY(12px) scale(0.97);
  transition: transform 0.25s ease;
}
.tk-unlock.is-open .tk-unlock-dialog { transform: none; }
.tk-unlock-x {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--text-secondary, #64748b);
  cursor: pointer;
}
.tk-unlock-x:hover { background: var(--bg-secondary, #f1f5f9); }
.tk-unlock-x .sl-icon { width: 16px; height: 16px; }
.tk-unlock-badge {
  width: 92px;
  height: 92px;
  margin: 4px auto 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tk-accent);
  color: #fff;
  --sl-accent: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 0 8px var(--tk-soft), 0 10px 26px var(--tk-line);
  animation: tk-unlock-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tk-unlock-badge .sl-icon { width: 46px; height: 46px; }
@keyframes tk-unlock-pop { from { transform: scale(0.4); opacity: 0; } }
.tk-unlock-date {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.1));
  border-radius: 999px;
  font-size: 0.76rem;
  color: var(--text-secondary, #64748b);
}
.tk-unlock-date .sl-icon { width: 14px; height: 14px; }
.tk-unlock-title { margin: 12px 0 6px; font-size: 1.6rem; font-weight: 800; color: var(--text, #1e293b); }
.tk-unlock-desc { margin: 0; font-size: 0.9rem; line-height: 1.45; color: var(--text-secondary, #64748b); }
.tk-unlock-ok {
  margin-top: 20px;
  min-width: 140px;
  border: none;
  border-radius: 11px;
  padding: 11px 20px;
  background: var(--tk-accent);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.tk-unlock-ok:hover { filter: brightness(1.08); }

/* ───────── Карточка «Квесты дня» в кабинете ───────── */
.dq-card {
  --tk-accent: #b45309;
  --tk-soft: rgba(180, 83, 9, 0.1);
  --tk-line: rgba(180, 83, 9, 0.22);
  border-left: 4px solid var(--tk-accent);
}
body.pussy-power-mode .dq-card {
  --tk-accent: #be185d;
  --tk-soft: rgba(190, 24, 93, 0.14);
  --tk-line: rgba(190, 24, 93, 0.28);
}
.dq-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.dq-title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text, #1e293b);
}
.dq-title .sl-icon { width: 20px; height: 20px; color: var(--tk-accent); }
.dq-count {
  margin-left: 2px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--tk-soft);
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--tk-accent);
  font-variant-numeric: tabular-nums;
}
.dq-count:empty { display: none; }
.dq-meta { display: inline-flex; align-items: center; gap: 4px; font-size: 0.74rem; color: var(--text-secondary, #94a3b8); }
.dq-meta .sl-icon { width: 13px; height: 13px; }
.dq-empty { margin: 10px 0 0; font-size: 0.82rem; color: var(--text-secondary, #94a3b8); }
.dq-card .tk-quest { box-shadow: none; }
.dq-card .tk-chest { padding: 12px 12px 10px; }
.dq-card .tk-chest-num { font-size: 2rem; }
.dq-card .tk-chest-badges { margin: 10px 0 10px; }
.dq-wallet {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 10px;
  padding: 8px 12px;
  border: 1px solid var(--tk-line);
  border-radius: 10px;
  background: none;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--tk-accent);
  cursor: pointer;
}
.dq-wallet:hover { background: var(--tk-soft); }
.dq-wallet svg { width: 15px; height: 15px; }