/* Система → Бот: шапка с состоянием и действиями, плитки опроса и денег,
   аккаунты с ручным продлением, лента платежей, настройки с тарифами.
   Тот же язык, что у «Сервера» (admin-server.css): карточки, плитки, бейджи. */

#view-bot {
  --bot-gap: 12px;
  --bot-card: linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, 0) 120px), var(--deep);
  --bot-line: rgba(148, 163, 184, .1);
  --bot-tg: #2aabee;
  display: flex; flex-direction: column; gap: var(--bot-gap); padding-bottom: 32px;
}
#view-bot.hidden { display: none !important; }

/* ---- шапка ---- */
.bot-hero {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--bot-card);
}
.bot-ava {
  width: 46px; height: 46px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, #37bbfe, #1e96c8);
}
.bot-ava svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.bot-hero.off .bot-ava { filter: grayscale(1); opacity: .55; }
.bot-id { min-width: 0; flex: 1 1 260px; }
.bot-id h2 { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; flex-wrap: wrap; }
.bot-id h2 a { color: var(--text); text-decoration: none; }
.bot-id h2 a[href]:hover { color: var(--bot-tg); }
.bot-sub { margin-top: 3px; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.bot-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.bot-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; font-weight: 650; margin-right: 6px; user-select: none; }
.bot-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bot-switch i {
  position: relative; width: 38px; height: 22px; border-radius: 11px; background: #334155; transition: background .15s;
}
.bot-switch i::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; transition: transform .15s;
}
.bot-switch input:checked + i { background: var(--ok); }
.bot-switch input:checked + i::after { transform: translateX(16px); }
.bot-switch input:focus-visible + i { box-shadow: 0 0 0 3px rgba(59, 130, 246, .45); }
.bot-switch input:disabled + i { opacity: .5; cursor: not-allowed; }

/* ---- плашки ---- */
#bot-alert:empty { display: none; }
.bot-alert {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: 12px; font-size: 13px; line-height: 1.45;
  border: 1px solid var(--border); background: var(--deep);
}
.bot-alert + .bot-alert { margin-top: 8px; }
.bot-alert b { display: block; }
.bot-alert span { color: var(--muted); }
.bot-alert.danger { border-color: rgba(248, 113, 113, .35); background: rgba(248, 113, 113, .1); }
.bot-alert.warn { border-color: rgba(251, 191, 36, .35); background: rgba(251, 191, 36, .1); }
.bot-alert.ok { border-color: rgba(52, 211, 153, .35); background: rgba(52, 211, 153, .1); }
.bot-alert .ghost { margin-left: auto; flex: none; }

/* ---- плитки ---- */
.bot-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--bot-gap); }
.bot-tile {
  padding: 11px 14px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--bot-card); min-width: 0;
}
.bot-tile h3 { margin: 0; font-size: 11.5px; font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.bot-tile b { display: block; margin-top: 4px; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bot-tile small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bot-tile.warn b { color: var(--warn); }
.bot-tile.danger b { color: var(--danger); }
.bot-tile.ok b { color: var(--ok); }
.bot-tile.dim b { color: var(--muted); }

/* ---- сетка карточек ---- */
.bot-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--bot-gap); align-items: start; }
.bot-c-acc { grid-column: span 8; }
.bot-c-pay { grid-column: span 4; }
.bot-c-set { grid-column: 1 / -1; }
.bot-card {
  background: var(--bot-card); border: 1px solid var(--border); border-radius: 14px;
  padding: 14px 16px 16px; min-width: 0; display: flex; flex-direction: column; gap: 12px; margin: 0;
}
.bot-ch { display: flex; align-items: center; gap: 10px; min-height: 30px; flex-wrap: wrap; }
.bot-ch h2 { margin: 0 auto 0 0; font-size: 13px; font-weight: 700; display: flex; align-items: baseline; gap: 8px; }
.bot-ch-sub { font-size: 12px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.bot-ch input, .bot-ch select { height: 32px; border-radius: 9px; font-size: 13px; padding: 0 10px; }
.bot-ch input { width: 220px; }
.bot-ch select { width: auto; }
.bot-hint { margin: -4px 0 0; font-size: 12px; color: var(--muted); }
.bot-empty { padding: 22px 6px; text-align: center; color: var(--muted); font-size: 13px; }

/* ---- аккаунты ---- */
.bot-acc { overflow-x: auto; }
.bot-acc table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.bot-acc th {
  text-align: left; font-size: 11px; font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: .04em;
  padding: 0 10px 8px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.bot-acc td { padding: 9px 10px; border-bottom: 1px solid var(--bot-line); vertical-align: middle; }
.bot-acc tr:last-child td { border-bottom: 0; }
.bot-acc td.r, .bot-acc th.r { text-align: right; }
.bot-who b { display: block; font-weight: 650; }
.bot-who span { display: block; font-size: 11.5px; color: var(--muted); }
.bot-who a { color: inherit; text-decoration: none; }
.bot-who a:hover { color: var(--bot-tg); }
.bot-sl { white-space: nowrap; }
.bot-sl.over { color: var(--warn); font-weight: 700; }
.bot-acc .badge { white-space: nowrap; }
.bot-acc button.ghost { height: 30px; padding: 0 10px; font-size: 12.5px; }
.bot-grant td { background: rgba(59, 130, 246, .06); }
.bot-grant-f { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; }
.bot-grant-f input { width: 76px; height: 30px; border-radius: 8px; font-size: 13px; padding: 0 8px; }
.bot-grant-f .ghost.on { background: var(--accent); color: #fff; border-color: transparent; }
.bot-grant-f .primary { height: 30px; padding: 0 12px; border-radius: 9px; font-size: 13px; }
.bot-grant-f .muted { margin-left: auto; }
.bot-more { align-self: center; }

/* ---- платежи ---- */
.bot-pays { display: flex; flex-direction: column; max-height: 560px; overflow-y: auto; }
.bot-pay { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 9px 2px; border-bottom: 1px solid var(--bot-line); font-size: 13px; }
.bot-pay:last-child { border-bottom: 0; }
.bot-pay b { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bot-pay em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.bot-pay span { font-size: 11.5px; color: var(--muted); }
.bot-pay span.r { text-align: right; white-space: nowrap; }
.bot-pay.rejected em { color: var(--danger); }
.bot-pay.admin em { color: var(--muted); }

/* ---- настройки ---- */
.bot-token { display: flex; gap: 8px; align-items: flex-end; max-width: 620px; }
.bot-token label { flex: 1; }
.bot-token .ghost { height: 38px; }
#view-bot label > span { display: flex; align-items: baseline; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--muted); margin-bottom: 5px; }
#view-bot label > span small { font-weight: 500; }
#view-bot label > span em { margin-left: auto; font-style: normal; font-weight: 500; font-variant-numeric: tabular-nums; }
#view-bot .bot-c-set input:not([type="checkbox"]) { height: 38px; border-radius: 10px; }
.bot-sec h3 { margin: 4px 0 8px; font-size: 12px; font-weight: 700; color: var(--text); text-transform: uppercase; letter-spacing: .04em; }
.bot-sec h3 small { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--muted); margin-left: 6px; }
.bot-plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--bot-gap); }
.bot-plan { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; background: rgba(148, 163, 184, .04); }
.bot-plan .wide { grid-column: 1 / -1; }
.bot-plan input { height: 34px !important; font-size: 13px; padding: 0 9px; }
.bot-plan-f { grid-column: 1 / -1; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.bot-texts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--bot-gap); }
.bot-texts h3 { grid-column: 1 / -1; margin-bottom: 0; }
.bot-texts textarea {
  width: 100%; resize: vertical; min-height: 96px; padding: 9px 11px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--deep); color: var(--text); font: 13px/1.45 inherit; font-family: inherit;
}
.bot-c-set input:focus, .bot-texts textarea:focus { outline: none; border-color: var(--accent); }
.bot-save { display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; border-top: 1px solid var(--bot-line); }
.bot-save .primary { min-width: 130px; }
#bot-dirty.on { color: var(--warn); }
.bot-c-set.ro input, .bot-c-set.ro textarea { opacity: .7; }

@media (max-width: 1280px) {
  .bot-c-acc, .bot-c-pay { grid-column: 1 / -1; }
  .bot-pays { max-height: 360px; }
  .bot-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .bot-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bot-texts { grid-template-columns: 1fr; }
  .bot-ch input { width: 100%; flex: 1 1 160px; }
}
@media (max-width: 560px) {
  .bot-plans { grid-template-columns: 1fr; }
  .bot-actions { width: 100%; }
  .bot-token { flex-direction: column; align-items: stretch; }
}
.bot-small { font-size: 11.5px; margin-top: 2px; white-space: nowrap; }