/**
 * Вкладка «ДоДеп»: взносы молний, обмен тикетов, промокоды, статистика.
 *
 * Взнос необратим, поэтому аккаунт и гильдия выбираются явно и видны до
 * нажатия: выбранный аккаунт подсвечен, выбранная гильдия — кольцом вокруг
 * её значка.
 */

.dd-accs { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s2); }

.dd-acc {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-1);
  box-shadow: var(--hairline);
  transition: border-color var(--dur), background var(--dur);
}
.dd-acc:hover { border-color: var(--line-2); }
.dd-acc.on {
  border-color: var(--accent-line);
  background: linear-gradient(180deg, var(--accent-dim), transparent 70%), var(--bg-1);
}
.dd-acc .sw { flex: 1 1 120px; }

.dd-bal {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, .35);
  font-size: 10.5px;
  color: var(--text);
}
.dd-bal.muted { color: var(--text-dim); }

/* Гильдия у каждого аккаунта своя: значки лежат отдельной строкой под
   именем, а не втискиваются в неё. */
.dd-guilds {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding-top: var(--s2);
  border-top: 1px dashed var(--line);
  font-size: 10.5px;
  color: var(--text-mute);
}
.dd-guild {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 7px;
  background: var(--bg-3);
  color: var(--text-dim);
  font: 600 10px/1 var(--sans);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--dur), box-shadow var(--dur), transform var(--dur);
}
.dd-guild img { width: 100%; height: 100%; object-fit: cover; }
.dd-guild:hover { border-color: var(--accent-line); transform: translateY(-1px); }
.dd-guild.picked { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-dim), var(--glow); }

.dd-err {
  margin-top: 4px;
  padding: 4px 8px;
  border-left: 2px solid var(--err);
  border-radius: var(--r-sm);
  background: var(--err-dim);
  color: var(--err);
  font-size: 11px;
}

#ddByAcc { margin-top: var(--s2); }

/* ── График молний ────────────────────────────────────────────────────── */

.chart {
  display: flex;
  /* Растягиваем колонки на всю высоту: высота столбика задана в процентах,
     а процент от auto-высоты — это ноль, и график вырождался в линию. */
  align-items: stretch;
  gap: 2px;
  height: 148px;
  padding: var(--s3) var(--s3) var(--s2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--hairline);
  /* Горизонтальные линии сетки: без них столбики висят в пустоте и высоту
     на глаз не сравнить. */
  background-color: var(--bg-1);
  background-image: repeating-linear-gradient(to top, rgba(168, 85, 247, .1) 0 1px, transparent 1px 25%);
}
.chart-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  min-width: 3px;
  border-radius: 3px;
  transition: background var(--dur);
}
.chart-col:hover { background: rgba(168, 85, 247, .14); }
.chart-bar { border-radius: 2px 2px 0 0; min-height: 2px; }
.chart-bar.earn  { background: linear-gradient(180deg, var(--ok), rgba(52, 211, 153, .3)); }
.chart-bar.spend { background: linear-gradient(180deg, var(--err), rgba(251, 113, 133, .3)); }

/* ── Промокоды ────────────────────────────────────────────────────────── */

.dd-promo { display: grid; gap: 2px; max-height: 260px; overflow-y: auto; }
.dd-promo-row {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: 3px var(--s3);
  border-left: 2px solid var(--line-2);
  border-radius: 0 5px 5px 0;
  background: var(--bg-1);
  font-size: 11px;
}
.dd-promo-row.ok { border-left-color: var(--ok); }
.dd-promo-row b { font: 600 11px/1 var(--mono); color: var(--accent-hi); }
.dd-promo-row .muted { margin-left: auto; text-align: right; }

@media (max-width: 760px) {
  .dd-accs { grid-template-columns: 1fr; }
}