/* The generation modes on the website: the «Режимы бота» card of the effects catalogue (web/admin-modes.js) and the
   Telegram previews of their screens in the menu constructor (web/menu-modes-preview.js). The graphite palette of
   style.css; no inline styles (CSP). */

.modes-card { display: grid; gap: 10px; margin-bottom: 18px; }
.modes-card .section-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.modes-card .section-title h2 { margin: 0; }
.modes-grid { gap: 12px; }
.modes-grid .editor-section { display: grid; gap: 8px; margin: 0; }
.modes-grid legend { font-weight: 600; }
/* «Цены»: the markup and the table «API → люди платят» (web/admin-modes.js). */
.modes-card > .editor-section { display: grid; gap: 8px; margin: 0; }
.modes-card > .editor-section legend { font-weight: 600; }
#mode-markup { max-width: 140px; }
.modes-prices { width: 100%; border-collapse: collapse; font-size: 14px; }
.modes-prices th, .modes-prices td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.modes-prices .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.modes-prices thead th { color: var(--muted); font-weight: 500; font-size: 12px; }

/* A step label between the messages of a mode preview, like Telegram's date chips. */
.tgx-step { display: flex; justify-content: center; margin: 2px 0; }
.tgx-step span { padding: 2px 10px; border-radius: 999px; background: rgb(255 255 255 / .06); color: var(--muted); font-size: 12px; }

/* A clip: the first frame with a play button and its length. */
.tgx-video { position: relative; }
.tgx-play { position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgb(0 0 0 / .55); }
.tgx-play::after { content: ''; position: absolute; top: 14px; left: 18px; border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent #fff; }
.tgx-duration { position: absolute; top: 8px; left: 8px; padding: 1px 6px; border-radius: 6px; background: rgb(0 0 0 / .55); color: #fff; font-size: 12px; }