/* =====================================================================
   TD Terminal — Trading Devils Mini App theme (design/miniapp: td-tokens.css + UI kit).
   Loaded after app.css: TD tokens, local fonts and every kit component.
   ===================================================================== */

/* ---------- fonts (local) ---------- */
@font-face { font-family: "Unbounded"; font-weight: 700; font-display: swap; src: url("./vendor/fonts/unbounded-cyrillic-700-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Unbounded"; font-weight: 700; font-display: swap; src: url("./vendor/fonts/unbounded-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Unbounded"; font-weight: 800; font-display: swap; src: url("./vendor/fonts/unbounded-cyrillic-800-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Unbounded"; font-weight: 800; font-display: swap; src: url("./vendor/fonts/unbounded-latin-800-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-weight: 400; font-display: swap; src: url("./vendor/fonts/manrope-cyrillic-400-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; font-weight: 400; font-display: swap; src: url("./vendor/fonts/manrope-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-weight: 500; font-display: swap; src: url("./vendor/fonts/manrope-cyrillic-500-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; font-weight: 500; font-display: swap; src: url("./vendor/fonts/manrope-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-weight: 600; font-display: swap; src: url("./vendor/fonts/manrope-cyrillic-600-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; font-weight: 600; font-display: swap; src: url("./vendor/fonts/manrope-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-weight: 700; font-display: swap; src: url("./vendor/fonts/manrope-cyrillic-700-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; font-weight: 700; font-display: swap; src: url("./vendor/fonts/manrope-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-weight: 800; font-display: swap; src: url("./vendor/fonts/manrope-cyrillic-800-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; font-weight: 800; font-display: swap; src: url("./vendor/fonts/manrope-latin-800-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-weight: 500; font-display: swap; src: url("./vendor/fonts/jetbrains-mono-cyrillic-500-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "JetBrains Mono"; font-weight: 500; font-display: swap; src: url("./vendor/fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-weight: 700; font-display: swap; src: url("./vendor/fonts/jetbrains-mono-cyrillic-700-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "JetBrains Mono"; font-weight: 700; font-display: swap; src: url("./vendor/fonts/jetbrains-mono-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- TD tokens (design/miniapp/td-tokens.css) ---------- */
:root, :root.dark {
  /* Цвета */
  --td-red-devil: #E10600;   /* основной акцент, LIVE, primary-кнопки */
  --td-red-flame: #FF4D3D;   /* блики, вторичный красный текст */
  --td-red-ember: #9B0A0A;   /* тени, неактивные красные элементы */
  --td-red-blood: #5C0505;   /* заливка LIVE-карточек и выбранных чипов */
  --td-black-abyss: #0A0A0A; /* фон приложения */
  --td-black-coal: #161616;  /* карточки, поля */
  --td-black-ash: #2B2B2B;   /* рамки, разделители, неактивные свечи */
  --td-neutral-smoke: #8A8A8A; /* вторичный текст, подписи */
  --td-neutral-bone: #F4F1EC;  /* основной текст */

  /* Радиусы */
  --td-radius-sm: 6px;
  --td-radius-md: 12px;
  --td-radius-lg: 18px;
  --td-radius-xl: 22px;
  --td-radius-full: 100px;

  /* Отступы */
  --td-space-xs: 4px;
  --td-space-sm: 8px;
  --td-space-md: 12px;
  --td-space-lg: 16px;
  --td-space-xl: 18px;

  /* Свечение */
  --td-glow-s: 0 0 10px rgba(225, 6, 0, .5);
  --td-glow-m: 0 0 16px rgba(225, 6, 0, .45);
  --td-glow-l: 0 0 26px rgba(225, 6, 0, .45);

  /* Шрифты (local woff2 in vendor/fonts — works offline inside Telegram) */
  --td-font-display: "Unbounded", system-ui, sans-serif;
  --td-font-body: "Manrope", system-ui, sans-serif;
  --td-font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* legacy names used across app.css, mapped onto TD */
  --bg: var(--td-black-abyss);
  --card: var(--td-black-coal);
  --card-solid: var(--td-black-coal);
  --text: var(--td-neutral-bone);
  --hint: var(--td-neutral-smoke);
  --sub: #B9B4AD;
  --link: var(--td-red-flame);
  --accent: var(--td-red-devil);
  --accent-text: #FFFFFF;
  --header: var(--td-neutral-smoke);
  --danger: var(--td-red-flame);
  --sep: var(--td-black-ash);
  --line: var(--td-black-ash);
  --soft: rgb(244 241 236 / 5%);
  --accent-soft: rgb(225 6 0 / 14%);
  --font-display: var(--td-font-display);
  --font-body: var(--td-font-body);
  --font-mono: var(--td-font-mono);
  --radius: var(--td-radius-lg);
  --radius-sm: var(--td-radius-md);
  --shadow: none;
  --glow: var(--td-glow-m);
  color-scheme: dark;
}

/* text styles (App/*) */
.td-title      { font: 800 28px/1.05 var(--td-font-display); letter-spacing: -0.02em; }
.td-header     { font: 800 17px/1.2  var(--td-font-display); }
.td-countdown  { font: 800 34px/1    var(--td-font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.td-stat       { font: 800 20px/1.1  var(--td-font-display); }
.td-body       { font: 600 14px/1.35 var(--td-font-body); }
.td-caption    { font: 500 12px/1.35 var(--td-font-body); }
.td-label      { font: 700 10px/1.2  var(--td-font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--td-neutral-smoke); }
.td-mono       { font: 700 12px/1.3  var(--td-font-mono); }

html, body { background: var(--td-black-abyss); color: var(--td-neutral-bone); }
body { font-family: var(--td-font-body); font-size: 14.5px; font-weight: 500; letter-spacing: -0.003em; }
::selection { background: rgb(225 6 0 / 45%); }
.mono { font-family: var(--td-font-mono); font-size: inherit; letter-spacing: .02em; }
.muted { color: var(--td-neutral-smoke); }
.warn-text { color: var(--td-red-flame); }
a { color: var(--td-red-flame); }
.ic-sm { width: 15px; height: 15px; }

/* ---------- boot ---------- */
.boot { background: var(--td-black-abyss); flex-direction: column; gap: 18px; }
.boot-brand { display: flex; flex-direction: column; align-items: center; gap: 14px; animation: bootin .6s var(--ease); }
.boot-brand .emblem { width: 56px; height: 56px; }
.boot-word { font: 800 15px/1 var(--td-font-display); letter-spacing: .02em; color: var(--td-neutral-bone); }
.boot-bar { width: 120px; height: 2px; border-radius: 2px; background: var(--td-black-ash); overflow: hidden; position: relative; }
.boot-bar::after { content: ""; position: absolute; inset: 0; width: 40%; background: var(--td-red-devil); box-shadow: var(--td-glow-s); animation: bootbar 1.1s ease-in-out infinite; }
@keyframes bootbar { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }
@keyframes bootin { from { opacity: 0; transform: scale(.96); } }

/* ---------- brand: emblem, logo, mascots ---------- */
.emblem {
  display: block; flex: none; object-fit: cover; border-radius: 30%;
  border: 1px solid var(--td-red-devil); box-shadow: var(--td-glow-s); background: #000;
}
.brand-logo { display: inline-flex; align-items: center; gap: 10px; }
.brand-word { font: 800 calc(var(--logo-h, 30px) * .5)/1 var(--td-font-display); letter-spacing: .01em; white-space: nowrap; }
.hero-logo { position: absolute; right: -26px; top: -6px; width: 210px; height: 210px; object-fit: contain; mix-blend-mode: lighten; pointer-events: none; z-index: 0; opacity: .95; }
.mascot { display: block; object-fit: contain; flex: none; }
.mascot.head { filter: drop-shadow(0 6px 16px rgb(225 6 0 / 35%)); }
.mascot-art { display: block; }
.mascot-tile { position: relative; flex: none; display: grid; place-items: center; width: 50px; height: 50px; border-radius: var(--td-radius-md);
  background: radial-gradient(80% 80% at 50% 60%, rgb(225 6 0 / 18%), var(--td-black-abyss) 75%); border: 1px solid var(--td-black-ash); overflow: hidden; }
.mascot-tile .mascot { width: 40px !important; height: 40px !important; }
.mascot-tile.off { filter: grayscale(1) brightness(.6); }

/* ---------- type ---------- */
.large-title, .detail-title, .brand-title, .hero-title, .sheet-title, .empty-title, .app-title, .big-num, .push-hero-num {
  font-family: var(--td-font-display); letter-spacing: -0.02em;
}
.large-title { font-size: 28px; font-weight: 800; line-height: 1.05; margin-top: 10px; }
.detail-title { font-size: 26px; font-weight: 800; line-height: 1.08; margin: 10px 0 6px; overflow-wrap: anywhere; }
.title-sub { color: var(--td-neutral-smoke); font-size: 13.5px; margin-top: 6px; }
.brand-title { margin: 0; font-weight: 800; font-size: 24px; line-height: 1.06; }
.brand-title.md { font-size: 20px; }
.brand-title .brand-accent { display: block; }
.brand-accent { color: var(--td-red-devil); }
.tone-accent, .tone-red { --tone: #E10600; }
.tone-green { --tone: #F4F1EC; }
.tone-amber { --tone: #FF8A3D; }
.tone-mute { --tone: #8A8A8A; }
.big-num { font-size: 40px; font-weight: 800; line-height: 1; }

/* tag pill «● СКОРО СТРИМ» */
.tag {
  display: inline-flex; align-items: center; gap: 7px; height: 22px; padding: 0 8px; border-radius: var(--td-radius-sm);
  font: 700 10px/1 var(--td-font-mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  color: var(--tone, var(--td-neutral-smoke)); border: 1px solid var(--td-black-ash); background: var(--td-black-abyss);
}
.tag-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--tone, var(--td-red-devil)); flex: none; }
.tag-dot.pulse { animation: blink 1.2s infinite; }

/* ---------- status pill ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: var(--td-radius-sm); flex: none;
  font: 700 10px/1 var(--td-font-mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  border: 1px solid var(--td-black-ash); color: var(--td-neutral-smoke); background: transparent;
}
.p-pending, .p-neutral, .p-done { color: var(--td-neutral-smoke); border-color: var(--td-black-ash); }
.p-live { background: var(--td-red-devil); border-color: var(--td-red-devil); color: #fff; box-shadow: var(--td-glow-s); }
.p-next { background: var(--td-red-devil); border-color: var(--td-red-devil); color: #fff; }
.p-filled, .p-ok { color: var(--td-neutral-bone); border-color: #5a5a5a; }
.p-failed { color: var(--td-red-flame); border-color: var(--td-red-ember); background: rgb(92 5 5 / 35%); }
.pill.p-live::first-letter { animation: blink 1.4s infinite; }

/* ---------- headers ---------- */
.app-header { display: flex; align-items: center; gap: 10px; margin: 6px 0 16px; min-height: 40px; }
.app-title { margin: 0; font-size: 19px; font-weight: 800; line-height: 1; letter-spacing: .005em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 4px 0 18px; }
.topbar-main { min-width: 0; }
.brand-row { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 18px; }
.detail-head { margin: 4px 0 16px; }
.detail-pills { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.detail-id { font: 500 11px/1 var(--td-font-mono); color: var(--td-neutral-smoke); letter-spacing: .06em; }
.detail-kicker {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: var(--td-radius-sm);
  font: 700 10px/1 var(--td-font-mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--td-neutral-smoke); border: 1px solid var(--td-black-ash); background: transparent;
}
.detail-kicker .ic { display: none; }
.detail-sub { color: var(--td-neutral-smoke); font-size: 13.5px; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.icon-btn { background: var(--td-black-coal); border: 1px solid var(--td-black-ash); color: var(--td-neutral-bone); box-shadow: none; border-radius: var(--td-radius-md); }

/* ---------- section label ---------- */
.section { margin-bottom: 20px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 2px 10px; }
.section-head.in-card { margin: 0 0 14px; }
.section-title { font: 700 10px/1.2 var(--td-font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--td-neutral-smoke); }
.section-accent { font: 700 10px/1.2 var(--td-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--td-red-devil); }
.section-action { font: 700 12px/1 var(--td-font-body); color: var(--td-red-devil); display: inline-flex; align-items: center; gap: 4px; }
.section-action .ic { width: 14px; height: 14px; }
.section-foot { color: var(--td-neutral-smoke); font-size: 12.5px; line-height: 1.45; margin: 8px 2px 0; }
.section-divider { display: flex; align-items: center; gap: 10px; margin: 26px 0 14px; font: 700 10px/1 var(--td-font-mono); letter-spacing: .14em; color: var(--td-neutral-smoke); }
.section-divider::before, .section-divider::after { content: ""; flex: 1; height: 1px; background: var(--td-black-ash); }
.month-label { font: 700 10px/1.2 var(--td-font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--td-neutral-smoke); margin: 16px 2px 8px; }
.month-label:first-child { margin-top: 2px; }

/* ---------- cards & list rows ---------- */
.card { background: var(--td-black-coal); border: 1px solid var(--td-black-ash); border-radius: var(--td-radius-lg); box-shadow: none; overflow: hidden; }
.card.pad { padding: 14px 16px; }
.row { min-height: 52px; padding: 12px 16px; gap: 12px; }
.row + .row::before, .field + .field::before, .row + .field::before, .field + .row::before, .target + .target::before,
.file-row::before, .check-row + .check-row::before, .btn-edit::before { background: var(--td-black-ash); left: 16px; }
button.row:active, .row.tap:active, .step-main:active, .push-main:active { background: rgb(244 241 236 / 4%); }
.row-title { font-size: 14.5px; font-weight: 600; color: var(--td-neutral-bone); }
.row-sub { font-size: 12.5px; color: var(--td-neutral-smoke); }
.row-right { color: var(--td-neutral-smoke); font-size: 13px; }
.row-right .val { font-family: var(--td-font-mono); font-size: 12px; letter-spacing: .02em; }
.row-right .val.accent { color: var(--td-red-devil); }
.row.danger .row-title { color: var(--td-red-flame); }
.chev { color: var(--td-neutral-smoke); width: 16px; height: 16px; }
.menu-row .row-title { font-weight: 600; }

/* row icons: no tiles — a bare line glyph, red for live/danger */
.row-icon, .action-tile .row-icon {
  width: 30px; height: 30px; border-radius: var(--td-radius-sm); border: 0; box-shadow: none; background: transparent;
  color: var(--td-neutral-bone); display: grid; place-items: center; flex: none;
}
.row-icon .ic { width: 20px; height: 20px; }
.row-icon.t-red { color: var(--td-red-devil); }
.row-icon.t-gray { color: var(--td-neutral-smoke); }
.row-icon.t-green { color: var(--td-neutral-bone); }
.row-icon.has-emoji .emoji-ic { display: block; object-fit: contain; }
.t-blue, .t-purple, .t-teal, .t-pink, .t-gold, .t-green, .t-red, .t-gray { background-image: none; }
.emoji-ic { flex: none; }

/* lesson-card is the generic «card list item» (funnels, broadcasts) */
.lesson-card { gap: 12px; padding: 14px; }
.lesson-card .row-icon { width: 30px !important; height: 30px !important; background: transparent !important; }
.lesson-title { font-size: 15px; font-weight: 700; }
.lesson-meta { color: var(--td-neutral-smoke); font-size: 12.5px; }
.list-gap > * + * { margin-top: 10px; }

/* ---------- buttons ---------- */
.td-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  height: 46px; padding: 0 16px; border-radius: var(--td-radius-md); font: 800 14px/1 var(--td-font-body);
  transition: transform .15s var(--ease), opacity .2s, box-shadow .2s;
}
.td-btn.s { height: 38px; font-size: 13px; }
.td-btn.primary { background: var(--td-red-devil); color: #fff; box-shadow: var(--td-glow-m); }
.td-btn.ghost { background: var(--td-black-coal); color: var(--td-neutral-bone); border: 1px solid var(--td-black-ash); }
.td-btn:active { transform: scale(.97); }
.td-btn[disabled] { opacity: .5; pointer-events: none; }
.td-btn .ic { width: 16px; height: 16px; }
.btn {
  height: 52px; border-radius: var(--td-radius-md); font: 800 15px/1 var(--td-font-body);
  background: var(--td-red-devil); color: #fff; box-shadow: var(--td-glow-m);
}
.btn .ic { width: 18px; height: 18px; }
.btn.secondary { background: var(--td-black-coal); color: var(--td-neutral-bone); border: 1px solid var(--td-black-ash); box-shadow: none; }
.btn.danger { background: var(--td-black-coal); color: var(--td-red-flame); border: 1px solid var(--td-red-ember); box-shadow: none; }
.save-bar .btn { box-shadow: var(--td-glow-l); }
.btn-grid { gap: 8px; }
.inline-btn { background: var(--td-black-abyss); color: var(--td-neutral-bone); border: 1px solid var(--td-black-ash); border-radius: var(--td-radius-md); font-weight: 700; font-size: 13px; }
.inline-btn.danger { background: transparent; color: var(--td-red-flame); border-color: var(--td-red-ember); }
.action-tile { background: var(--td-black-coal); border: 1px solid var(--td-black-ash); border-radius: var(--td-radius-lg); box-shadow: none; color: var(--td-neutral-bone); }
.fab {
  width: 56px; height: 56px; border-radius: var(--td-radius-lg); background: var(--td-red-devil); color: #fff;
  box-shadow: var(--td-glow-l), 0 10px 26px rgb(0 0 0 / 60%);
}

/* ---------- fields / inputs ---------- */
.form-stack { display: flex; flex-direction: column; gap: 4px; margin-bottom: 18px; }
.form-stack > .field { padding: 0 0 14px; }
.form-stack > .field::before { display: none; }
.field { padding: 14px 16px; }
.field-label { font: 700 10px/1.2 var(--td-font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--td-neutral-smoke); margin-bottom: 8px; }
.field-label .ic { display: none; }
.field-input:not(.msg-text) {
  background-color: var(--td-black-coal); border: 1px solid var(--td-black-ash); border-radius: var(--td-radius-md);
  padding: 12px 14px; min-height: 48px; font: 600 14.5px/1.3 var(--td-font-body); color: var(--td-neutral-bone);
  transition: border-color .15s, box-shadow .15s;
}
.card .field-input:not(.msg-text) { background-color: var(--td-black-abyss); }
textarea.field-input.msg-text { background: var(--td-black-abyss); border: 1px solid var(--td-black-ash); border-radius: var(--td-radius-md); padding: 12px 14px; }
.field-input::placeholder { color: #5f5f5f; }
.field-input:focus, textarea.field-input.msg-text:focus { outline: none; border-color: var(--td-red-devil); box-shadow: var(--td-glow-s); }
.field.invalid .field-input { border-color: var(--td-red-ember); }
.field.invalid .field-label { color: var(--td-red-flame); }
.field-hint { color: var(--td-neutral-smoke); font-size: 12px; margin-top: 6px; }
.field-hint.mono-hint { font: 500 10.5px/1.45 var(--td-font-mono); letter-spacing: .02em; }
.field-error { color: var(--td-red-flame); font-size: 12px; margin-top: 6px; }
select.field-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E10600' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 14px; background-position: right 14px center; padding-right: 36px;
}
select.field-input option { background: var(--td-black-coal); color: var(--td-neutral-bone); }
input[type="datetime-local"], input[type="time"] { color-scheme: dark; }
.input-wrap { position: relative; }
.input-wrap .field-input { padding-right: 64px !important; }
.input-suffix { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font: 700 10px/1 var(--td-font-mono); letter-spacing: .1em; color: var(--td-red-devil); pointer-events: none; }
.btn-edit-fields { background: var(--td-black-abyss); border: 1px solid var(--td-black-ash); }
.btn-edit-fields .field-input { border: 0 !important; background: transparent !important; padding: 4px 0 !important; min-height: 0 !important; box-shadow: none !important; }

/* ---------- segmented / chips / day chips ---------- */
.segmented { background: var(--td-black-coal); border: 1px solid var(--td-black-ash); border-radius: var(--td-radius-md); padding: 4px; margin-bottom: 18px; }
.segmented button { height: 34px; border-radius: 9px; color: var(--td-neutral-smoke); font: 700 13px/1 var(--td-font-body); }
.segmented button.on { background: var(--td-red-devil); color: #fff; box-shadow: var(--td-glow-s); }
.chips { gap: 8px; }
.chip {
  height: 34px; padding: 0 12px; border-radius: var(--td-radius-full); font: 600 13px/1 var(--td-font-body);
  background: transparent; color: var(--td-neutral-smoke); border: 1px solid var(--td-black-ash);
}
.chip.on { background: var(--td-red-blood); color: var(--td-neutral-bone); border-color: var(--td-red-devil); box-shadow: var(--td-glow-s); }
.hours .chip, .weekdays .chip { border-radius: var(--td-radius-md); font-family: var(--td-font-mono); font-size: 12px; }
.when { display: flex; flex-direction: column; gap: 10px; }
.day-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 1px 6px; margin: 0 -1px; }
.day-chips::-webkit-scrollbar { display: none; }
.day-chip {
  flex: none; width: 50px; height: 56px; border-radius: var(--td-radius-md); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: var(--td-black-coal); border: 1px solid var(--td-black-ash); color: var(--td-neutral-smoke);
}
.day-chip span { font: 500 9.5px/1 var(--td-font-mono); letter-spacing: .08em; }
.day-chip b { font: 800 17px/1 var(--td-font-display); color: var(--td-neutral-bone); }
.day-chip.on { background: var(--td-red-devil); border-color: var(--td-red-devil); color: #fff; box-shadow: var(--td-glow-m); }
.day-chip.on b { color: #fff; }
.time-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 8px; }
.time-chip {
  height: 38px; border-radius: var(--td-radius-md); background: var(--td-black-coal); border: 1px solid var(--td-black-ash);
  font: 500 13px/1 var(--td-font-mono); color: var(--td-neutral-smoke); display: flex; align-items: center; justify-content: center; gap: 6px; position: relative;
}
.time-chip.on { background: var(--td-neutral-bone); color: var(--td-black-abyss); border-color: var(--td-neutral-bone); font-weight: 700; }
.time-chip.custom span { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.time-chip.custom input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.toggle { width: 48px; height: 28px; background: var(--td-black-ash); }
.toggle::after { width: 24px; height: 24px; background: var(--td-neutral-bone); box-shadow: none; }
.toggle.on { background: var(--td-red-devil); box-shadow: var(--td-glow-s); }
.toggle.on::after { transform: translateX(20px); }
.stepper { background: var(--td-black-abyss); border: 1px solid var(--td-black-ash); border-radius: var(--td-radius-md); }
.stepper button { color: var(--td-red-devil); }
.stepper span { font-family: var(--td-font-mono); font-size: 13px; }
.radio.on { border-color: var(--td-red-devil); }
.radio.on::after { background: var(--td-red-devil); box-shadow: var(--td-glow-s); }

/* ---------- badges & dots (mono, terminal) ---------- */
.badge { height: 22px; padding: 0 8px; border-radius: var(--td-radius-sm); border: 1px solid var(--td-black-ash); background: transparent;
  font: 700 10px/1 var(--td-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--td-neutral-smoke); }
.b-ok { color: var(--td-neutral-bone); border-color: #5a5a5a; }
.b-bad { color: var(--td-red-flame); border-color: var(--td-red-ember); }
.b-warn, .b-gold { color: #FF8A3D; border-color: rgb(255 138 61 / 40%); }
.b-info { color: #fff; background: var(--td-red-devil); border-color: var(--td-red-devil); }
.b-mute { color: var(--td-neutral-smoke); }
.dot { width: 7px; height: 7px; }
.d-ok { background: var(--td-neutral-bone); }
.d-bad { background: var(--td-red-flame); box-shadow: var(--td-glow-s); }
.d-warn { background: #FF8A3D; }
.d-mute, .d-pending { background: var(--td-black-ash); }
.d-info, .d-run { background: var(--td-red-devil); box-shadow: var(--td-glow-s); animation: blink 1.4s infinite; }
.step-mini { border: 1px solid var(--td-black-ash); border-radius: var(--td-radius-sm); background: transparent; font-family: var(--td-font-mono); font-size: 10.5px; }
.gchip { background: transparent; border: 1px solid var(--td-black-ash); border-radius: var(--td-radius-sm); color: var(--td-neutral-smoke); font-family: var(--td-font-mono); font-size: 11px; }

/* ---------- hero «next stream» ---------- */
.td-hero {
  position: relative; overflow: hidden; display: block; width: 100%; text-align: left; cursor: pointer;
  border-radius: var(--td-radius-xl); padding: 16px 16px 16px; margin-bottom: 14px; color: var(--td-neutral-bone);
  background:
    radial-gradient(120% 90% at 85% 25%, rgb(225 6 0 / 55%) 0%, rgb(155 10 10 / 35%) 35%, transparent 70%),
    linear-gradient(160deg, #3a0303 0%, #1a0202 55%, #120101 100%);
  border: 1px solid var(--td-red-devil); box-shadow: var(--td-glow-l);
}
.td-hero.empty { cursor: default; }
.td-hero::after { content: none; }
.td-hero.is-live { box-shadow: 0 0 34px rgb(225 6 0 / 60%); }
.td-hero > :not(.hero-logo):not(.hero-art) { position: relative; z-index: 1; }
.hero-pills { display: flex; gap: 6px; margin-bottom: 12px; }
.hero-kicker { font: 700 10px/1.2 var(--td-font-mono); letter-spacing: .14em; color: rgb(244 241 236 / 75%); }
.hero-count { font: 800 40px/1 var(--td-font-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; margin: 6px 0 10px; text-shadow: 0 0 22px rgb(225 6 0 / 45%); max-width: 72%; }
.hero-count.small { font-size: 22px; }
.hero-title { font: 800 17px/1.25 var(--td-font-body); letter-spacing: -0.01em; max-width: 64%; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hero-meta { font: 500 11px/1.4 var(--td-font-mono); color: rgb(244 241 236 / 65%); margin-top: 6px; max-width: 64%; }
.hero-sub { color: rgb(244 241 236 / 75%); font-size: 13px; line-height: 1.4; max-width: 66%; margin-top: 4px; }
.hero-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; }
.hero-actions .td-btn.ghost { background: rgb(10 10 10 / 55%); border-color: rgb(244 241 236 / 14%); backdrop-filter: blur(6px); }
.hero-actions > :only-child { grid-column: 1 / -1; }
.td-hero .hero-logo { width: 190px; height: 190px; right: -30px; top: -14px; }

/* push banners (pushes screen): coal card with a mascot head on the right */
.banner {
  position: relative; overflow: hidden; border-radius: var(--td-radius-xl); padding: 18px 16px; margin-bottom: 18px; min-height: 150px;
  background: radial-gradient(80% 110% at 95% 60%, rgb(225 6 0 / 30%) 0%, transparent 60%), var(--td-black-coal);
  border: 1px solid var(--td-black-ash); color: var(--td-neutral-bone);
}
.banner.tone-red { border-color: var(--td-red-devil); box-shadow: var(--td-glow-m); }
.banner::before { content: none; }
.banner-body { position: relative; z-index: 2; max-width: 66%; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.banner-sub { color: var(--td-neutral-smoke); font-size: 13px; line-height: 1.4; }
.banner .mascot-art { position: absolute; right: -6px; bottom: -14px; height: 118%; z-index: 1; pointer-events: none; filter: drop-shadow(0 10px 30px rgb(225 6 0 / 35%)); }

/* ---------- week candles ---------- */
.candles-card { padding: 14px 14px 12px; margin-bottom: 18px; }
.candles { display: grid; grid-template-columns: repeat(7, 1fr); align-items: end; height: 84px; }
.candle { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; height: 100%; }
.candle-stick { position: relative; display: flex; align-items: center; justify-content: center; width: 12px; height: 62px; }
.candle .wick { position: absolute; left: 50%; width: 2px; margin-left: -1px; background: var(--td-black-ash); border-radius: 1px; bottom: 0; }
.candle .body { position: absolute; bottom: 7px; left: 0; right: 0; border-radius: 3px; background: var(--td-black-ash); }
.candle.on .wick { background: var(--td-red-devil); }
.candle.on .body { background: var(--td-red-devil); box-shadow: var(--td-glow-s); }
.candle-label { font: 500 9.5px/1 var(--td-font-mono); letter-spacing: .06em; color: var(--td-neutral-smoke); }
.candle.on .candle-label { color: var(--td-neutral-bone); }
.candle.today .candle-label { color: var(--td-red-devil); font-weight: 700; }

/* ---------- order book (stream rows) ---------- */
.order-book { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.stream-row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; min-height: 52px; padding: 10px 12px 10px 14px;
  background: var(--td-black-coal); border: 1px solid var(--td-black-ash); border-radius: var(--td-radius-md);
  transition: transform .15s var(--ease);
}
button.stream-row:active { transform: scale(.985); }
.sr-time { font: 500 11.5px/1 var(--td-font-mono); color: var(--td-neutral-smoke); white-space: nowrap; flex: none; min-width: 64px; }
.sr-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sr-title { font: 600 14px/1.3 var(--td-font-body); color: var(--td-neutral-bone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-sub { font: 500 10px/1.3 var(--td-font-mono); color: #6f6f6f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .02em; }
.stream-row.s-live { background: var(--td-red-blood); border-color: var(--td-red-devil); box-shadow: var(--td-glow-m); }
.stream-row.s-live .sr-time { color: var(--td-red-flame); }
.stream-row.s-live .sr-sub { color: rgb(244 241 236 / 60%); }
.stream-row.s-next { border-color: var(--td-red-ember); }
.stream-row.s-done .sr-title, .stream-row.s-failed .sr-title { color: #bdb8b1; }

/* ---------- info grid (TIME / HOST / CHATS) ---------- */
.info-grid { background: var(--td-black-coal); border: 1px solid var(--td-black-ash); border-radius: var(--td-radius-lg); padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; }
.ig-row { display: grid; grid-template-columns: 80px 1fr; gap: 10px; align-items: baseline; }
.ig-label { font: 500 10px/1.3 var(--td-font-mono); letter-spacing: .1em; color: var(--td-neutral-smoke); }
.ig-value { font: 500 12px/1.4 var(--td-font-mono); color: var(--td-neutral-bone); overflow-wrap: anywhere; text-align: left; }
.ig-value.link { color: var(--td-red-flame); padding: 0; }

/* ---------- KPI tiles ---------- */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin-bottom: 16px; }
.kpi { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--td-radius-lg); background: var(--td-black-coal); border: 1px solid var(--td-black-ash); text-align: left; min-width: 0; }
.kpi-label { font: 700 9.5px/1.2 var(--td-font-mono); letter-spacing: .1em; color: var(--td-neutral-smoke); }
.kpi-value { font: 800 22px/1 var(--td-font-display); letter-spacing: -0.02em; color: var(--td-neutral-bone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-delta { font: 500 10px/1 var(--td-font-mono); color: var(--td-red-flame); }
.kpi.accent { background: linear-gradient(160deg, #3a0303, #1a0202); border-color: var(--td-red-devil); box-shadow: var(--td-glow-m); }
.kpi.accent .kpi-label { color: rgb(244 241 236 / 75%); }

/* ---------- pipeline ---------- */
.pipeline { padding: 4px 14px; }
.pipe-step { display: grid; grid-template-columns: 10px 58px 1fr 16px; gap: 10px; align-items: start; padding: 12px 0; position: relative; }
.pipe-step + .pipe-step { border-top: 1px solid var(--td-black-ash); }
.ps-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--td-black-ash); margin-top: 4px; }
.ps-time { font: 500 11px/1.4 var(--td-font-mono); color: var(--td-neutral-smoke); white-space: nowrap; }
.ps-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ps-title { font: 600 14px/1.35 var(--td-font-body); color: var(--td-neutral-bone); }
.ps-note { font-size: 12px; color: var(--td-neutral-smoke); line-height: 1.4; }
.ps-note.err { color: var(--td-red-flame); }
.ps-mark { font: 700 13px/1.3 var(--td-font-mono); color: var(--td-neutral-smoke); text-align: right; }
.ps-done .ps-dot { background: var(--td-red-devil); }
.ps-done .ps-mark { color: var(--td-red-devil); }
.ps-live .ps-dot { background: var(--td-red-devil); box-shadow: var(--td-glow-s); animation: blink 1.4s infinite; }
.ps-live .ps-time, .ps-live .ps-mark { color: var(--td-red-devil); font-weight: 700; }
.ps-bad .ps-dot { background: var(--td-red-flame); }
.ps-bad .ps-mark, .ps-bad .ps-time { color: var(--td-red-flame); }
.ps-warn .ps-dot { background: #FF8A3D; } .ps-warn .ps-mark { color: #FF8A3D; }
.ps-pending .ps-title { color: #bdb8b1; }
.tl-groups { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; }
.tl-group { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.tl-group .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--td-neutral-smoke); }
.tl-state { font: 500 10px/1 var(--td-font-mono); color: var(--td-neutral-smoke); white-space: nowrap; }
.st-ok { color: var(--td-neutral-bone); } .st-bad { color: var(--td-red-flame); } .st-run { color: var(--td-red-devil); }

/* plan card (new stream) */
.plan-card { padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.plan-row { display: grid; grid-template-columns: 64px 1fr; gap: 10px; font: 500 11px/1.3 var(--td-font-mono); color: var(--td-neutral-smoke); }
.plan-row b { color: var(--td-red-devil); font-weight: 700; }

/* ---------- groups ---------- */
.group-card { display: block; width: 100%; text-align: left; padding: 14px; }
.group-card.accent { border-color: var(--td-red-devil); box-shadow: var(--td-glow-s); }
.gc-head { display: flex; align-items: center; gap: 10px; }
.gc-icon { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--td-red-devil); background: var(--td-black-abyss); border: 1px solid var(--td-black-ash); flex: none; }
.gc-icon .ic { width: 22px; height: 22px; }
.gc-title-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gc-title { font: 700 15px/1.25 var(--td-font-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-sub { font: 500 10.5px/1.2 var(--td-font-mono); color: var(--td-neutral-smoke); }
.gc-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px; }
.gc-tile { background: var(--td-black-abyss); border: 1px solid var(--td-black-ash); border-radius: var(--td-radius-md); padding: 8px 10px; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.gc-tile span { font: 700 9px/1 var(--td-font-mono); letter-spacing: .1em; color: var(--td-neutral-smoke); }
.gc-tile b { font: 700 12px/1.2 var(--td-font-mono); color: var(--td-neutral-bone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-foot { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 12px; }
.connect-card { padding: 14px 16px; margin-top: 14px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--td-neutral-bone); border-style: dashed; }

/* ---------- «Ещё» ---------- */
.yt-status { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px; margin-bottom: 18px; text-align: left; }
.yt-status.ok { border-color: var(--td-red-devil); box-shadow: var(--td-glow-s); }
.yt-status .grow { display: flex; flex-direction: column; gap: 3px; }
.yt-status .row-sub { font-family: var(--td-font-mono); font-size: 10.5px; }
.yt-status-icon { width: 40px; height: 40px; border-radius: var(--td-radius-md); background: var(--td-red-devil); color: #fff; display: grid; place-items: center; flex: none; box-shadow: var(--td-glow-s); }
.yt-status-icon .ic { width: 18px; height: 18px; }
.brand-foot { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 26px 0 8px; font: 700 10px/1 var(--td-font-mono); letter-spacing: .16em; color: #5a5a5a; text-align: center; }
.brand-foot span:first-child { font: 800 12px/1 var(--td-font-display); letter-spacing: .04em; color: var(--td-neutral-smoke); }

/* ---------- people ---------- */
.avatar { box-shadow: none; font-family: var(--td-font-body); font-weight: 800; }
.av0, .av2, .av4, .av6 { background: var(--td-red-devil); color: #fff; }
.av1, .av3, .av5 { background: var(--td-black-ash); color: var(--td-neutral-bone); }
.stack .avatar { border-color: var(--td-black-coal); }
.team-only { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 8vh; }

/* ---------- checks / callouts / empty / skeleton / toast ---------- */
.check-mark.ok { background: rgb(244 241 236 / 8%); color: var(--td-neutral-bone); }
.check-mark.bad { background: rgb(225 6 0 / 16%); color: var(--td-red-flame); }
.callout { border: 1px solid var(--td-black-ash); border-radius: var(--td-radius-md); background: var(--td-black-coal); color: var(--td-neutral-bone); font-size: 13px; }
.callout .ic { color: var(--td-red-devil); }
.callout.warn { border-color: rgb(255 138 61 / 35%); } .callout.warn .ic { color: #FF8A3D; }
.callout.bad { border-color: var(--td-red-ember); background: rgb(92 5 5 / 30%); }
.empty { padding: 32px 20px 26px; }
.empty-mascot { width: 104px; height: 104px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(60% 60% at 50% 55%, rgb(225 6 0 / 22%), transparent 70%); }
.empty-title { font-size: 16px; font-weight: 800; }
.empty-text { color: var(--td-neutral-smoke); font-size: 13.5px; }
.empty .btn { height: 44px; }
.sk { background: linear-gradient(90deg, var(--td-black-coal) 0%, #222 50%, var(--td-black-coal) 100%); background-size: 200% 100%; }
.toast { background: var(--td-black-coal); border: 1px solid var(--td-black-ash); color: var(--td-neutral-bone); box-shadow: 0 14px 40px rgb(0 0 0 / 60%); font-weight: 600; }
.toast.ok .ic { color: var(--td-neutral-bone); } .toast.err { border-color: var(--td-red-ember); } .toast.err .ic { color: var(--td-red-flame); }
@keyframes blink { 50% { opacity: .4; } }

/* ---------- sheet ---------- */
.sheet-backdrop { background: rgb(0 0 0 / 70%); backdrop-filter: blur(3px); }
.sheet { background: var(--td-black-abyss); border-top: 1px solid var(--td-black-ash); box-shadow: 0 -20px 60px rgb(0 0 0 / 70%); }
.sheet-grip { background: var(--td-black-ash); }
.sheet-title { font-size: 18px; font-weight: 800; }
.sheet-close { background: var(--td-black-coal); color: var(--td-neutral-smoke); border: 1px solid var(--td-black-ash); }

/* ---------- tab bar ---------- */
.tabbar { background: rgb(10 10 10 / 94%); border-top: 1px solid var(--td-black-ash); box-shadow: none; padding-top: 8px;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.tab { font: 600 11px/1 var(--td-font-body); color: var(--td-neutral-smoke); gap: 6px; padding-bottom: 8px; }
.tab-icon { display: grid; place-items: center; height: 24px; }
.tab .ic { width: 22px; height: 22px; }
.tab.on { color: var(--td-neutral-bone); font-weight: 800; }
.tab.on .ic { color: var(--td-red-devil); filter: drop-shadow(0 0 6px rgb(225 6 0 / 70%)); transform: none; }
.tab.on::after { content: ""; position: absolute; bottom: 0; left: 50%; width: 18px; height: 3px; margin-left: -9px; border-radius: 2px; background: var(--td-red-devil); box-shadow: var(--td-glow-s); }
.single-tab .screen { padding-bottom: calc(var(--safe-b) + 32px); }
.web-back { color: var(--td-neutral-smoke); font-family: var(--td-font-body); font-size: 14px; }
.web-back .ic { transform: none; width: 18px; height: 18px; }

/* ---------- telegram preview (always the dark chat) ---------- */
.tg-chat { background: radial-gradient(circle at 20% 20%, rgb(255 255 255 / 4%) 0 2px, transparent 3px) 0 0 / 34px 34px, linear-gradient(160deg, #111 0%, #1a0b0b 100%);
  border: 1px solid var(--td-black-ash); border-radius: var(--td-radius-lg); }
.dark .tg-chat { background: radial-gradient(circle at 20% 20%, rgb(255 255 255 / 4%) 0 2px, transparent 3px) 0 0 / 34px 34px, linear-gradient(160deg, #111 0%, #1a0b0b 100%); }
.tg-bubble { background: #1f1f1f; color: var(--td-neutral-bone); }
.tg-btn { background: rgb(255 255 255 / 8%); border: 1px solid rgb(255 255 255 / 8%); }
.tg-time { color: var(--td-neutral-smoke); }
.tg-text a { color: #6ab3f3; }

/* ---------- marketing / pushes / funnels / emoji ---------- */
.fbar-track, .progress-track { background: var(--td-black-ash); }
.fbar-fill { background: var(--td-red-devil) !important; box-shadow: var(--td-glow-s); }
.fbar-top { font-size: 13px; }
.fbar-top b { font-family: var(--td-font-mono); font-weight: 700; font-size: 12px; }
.progress-seg.ok { background: var(--td-red-devil); } .progress-seg.bad { background: #FF8A3D; } .progress-seg.mute { background: #555; }
.mini-stats b, .funnel-side b { font-family: var(--td-font-mono); }
.step-num { background: transparent; border: 1.5px solid var(--td-red-devil); color: var(--td-red-devil); border-radius: 50%; font-family: var(--td-font-mono); font-size: 12px; box-shadow: var(--td-glow-s); }
.step-delay { color: var(--td-red-flame); font-family: var(--td-font-mono); font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; }
.step-order button { color: var(--td-neutral-smoke); }
.push-hero { gap: 14px; }
.push-hero-icon { width: 56px; height: 56px; border-radius: var(--td-radius-md); background: var(--td-black-abyss); border: 1px solid var(--td-black-ash); box-shadow: none; display: grid; place-items: center; overflow: hidden; }
.push-hero-num { font-size: 26px; font-weight: 800; }
.run-stats .ok { color: var(--td-neutral-bone); } .run-stats .bad { color: var(--td-red-flame); } .run-stats .info { color: var(--td-red-devil); }
.stat-tile b { font-family: var(--td-font-display); font-weight: 800; }
.stat-tile b.ok { color: var(--td-neutral-bone); } .stat-tile b.bad { color: var(--td-red-flame); }
.emoji-tile, .emoji-cell { background: var(--td-black-abyss); border: 1px solid var(--td-black-ash); }
.emoji-cell.on { background: var(--td-red-blood); box-shadow: 0 0 0 2px var(--td-red-devil), var(--td-glow-s); }
.emoji-hero-big { background: radial-gradient(circle at 30% 25%, rgb(225 6 0 / 25%), transparent 60%), var(--td-black-abyss); }
.ph-chip { background: var(--td-black-abyss); color: var(--td-red-flame); border: 1px solid var(--td-black-ash); font-family: var(--td-font-mono); }
.fmt-btn { background: var(--td-black-abyss); color: var(--td-neutral-bone); border: 1px solid var(--td-black-ash); }
.fmt-emoji { color: var(--td-red-flame); background: var(--td-black-abyss); }
.media-thumb { background: var(--td-black-abyss); color: var(--td-red-devil); }
.media-thumb.none { border-color: var(--td-black-ash); }
.char-count { font-family: var(--td-font-mono); font-size: 11px; }

/* ---------- centred container (Telegram Desktop / wide windows) ---------- */
:root { --app-w: 560px; --gutter: 16px; --safe-b: var(--tg-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)); }
#app { width: 100%; }
.screen-wrap { width: 100%; }
.screen {
  box-sizing: border-box; width: 100%; max-width: var(--app-w); margin-left: auto; margin-right: auto;
  padding-left: var(--gutter); padding-right: var(--gutter);
}
.web-back { display: flex; width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--app-w) - 2 * var(--gutter)); margin: 12px auto 0; padding-left: 0; }
.tabbar { padding-left: max(8px, calc((100% - var(--app-w)) / 2 + 8px)); padding-right: max(8px, calc((100% - var(--app-w)) / 2 + 8px)); }
.fab { right: max(18px, calc((100vw - var(--app-w)) / 2 + 18px)); }
.sheet { left: 0; right: 0; margin-left: auto; margin-right: auto; max-width: var(--app-w); box-sizing: border-box; }
.toast-wrap { left: 0; right: 0; margin: 0 auto; max-width: var(--app-w); }
.boot { left: 0; right: 0; }
@media (max-width: 360px) {
  .hero-count { font-size: 32px; }
  .td-hero .hero-logo { width: 150px; height: 150px; }
  .ig-row { grid-template-columns: 64px 1fr; }
}

/* ---------- TD Stream: YouTube key ---------- */
.row-title.mono { word-break: break-all; white-space: normal; font-size: 12.5px; }
.yt-key-edit { padding: 14px 16px; display: grid; gap: 12px; }
.yt-key-input { display: flex; gap: 8px; align-items: center; }
.yt-key-input .field-input { flex: 1; min-width: 0; }
.yt-key-actions { display: flex; gap: 8px; justify-content: flex-end; }
.yt-key-actions .btn { flex: 1; height: 44px; font-size: 14px; }
.yt-chip { display: inline-flex; align-self: flex-start; width: max-content; max-width: 100%; align-items: center; gap: 5px; padding: 3px 8px;
  border-radius: var(--td-radius-sm); margin-top: 8px; line-height: 1.3; font: 500 10.5px/1.3 var(--td-font-mono); border: 1px solid var(--td-black-ash); }
.yt-chip .ic { width: 12px; height: 12px; }
.yt-chip.ok { color: var(--td-neutral-bone); }
.yt-chip.warn { color: var(--td-red-flame); border-color: var(--td-red-ember); background: rgb(92 5 5 / 30%); }
.yt-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.yt-chips .yt-chip { margin-top: 0; }
.yt-ok { color: var(--td-red-devil); font-weight: 800; margin-left: 4px; }
.yt-title { flex-basis: 100%; font-size: 12px; font-weight: 600; color: var(--td-neutral-smoke); line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.yt-note { display: flex; gap: 8px; align-items: flex-start; margin: 0 16px 12px; padding: 10px 12px; border-radius: var(--td-radius-md);
  background: var(--td-black-abyss); border: 1px solid var(--td-black-ash); color: var(--td-neutral-smoke); font-size: 12.5px; line-height: 1.4; }
.yt-note .ic { flex: 0 0 auto; margin-top: 1px; color: var(--td-red-devil); }
.yt-tpl textarea.field-input { min-height: 96px; resize: vertical; line-height: 1.4; padding-top: 10px; }
.yt-legend { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 12px; color: var(--td-neutral-smoke); margin: -2px 0 12px; }
.yt-legend code { font-family: var(--td-font-mono); font-size: 11px; color: var(--td-red-flame); background: var(--td-black-abyss); border: 1px solid var(--td-black-ash); padding: 1px 5px; border-radius: var(--td-radius-sm); }
.yt-preview { border: 1px solid var(--td-black-ash); border-radius: var(--td-radius-md); padding: 12px 14px; background: var(--td-black-abyss); }
.yt-preview-head { font: 700 10px/1.3 var(--td-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--td-neutral-smoke); margin-bottom: 8px; }
.yt-preview-title { font-weight: 700; font-size: 14.5px; line-height: 1.35; margin-bottom: 6px; }
.yt-preview-desc { white-space: pre-line; font-size: 12.5px; color: var(--td-neutral-smoke); line-height: 1.45; }
.row-right:has(.inline-btn) { max-width: 64%; flex-wrap: wrap; justify-content: flex-end; }
.row-right .inline-btn { padding: 0 10px; height: 30px; }
.td-btn.s { font-size: 12.5px; padding: 0 10px; line-height: 1.15; }
.hero-count { white-space: nowrap; } .is-live .hero-count { font-size: 34px; }
.day-chip.custom { position: relative; border-style: dashed; }
.day-chip.custom input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; color-scheme: dark; }
.kpi-value { font-size: clamp(17px, 5.6vw, 22px); letter-spacing: -0.03em; }
.callout.info { background: var(--td-black-coal); color: var(--td-neutral-bone); border-color: var(--td-black-ash); }
.callout.warn { background: rgb(255 138 61 / 6%); color: var(--td-neutral-bone); }
.callout.bad { color: var(--td-neutral-bone); }

/* ---------- 3D art from Figma AI (design/miniapp/_src/build_assets.py) ---------- */
/* hero: dark terminal backdrop + Tick scene anchored to the bottom-right edge */
.td-hero {
  background:
    linear-gradient(90deg, rgb(18 1 1 / 92%) 0%, rgb(18 1 1 / 70%) 45%, rgb(18 1 1 / 0%) 75%),
    radial-gradient(120% 90% at 85% 25%, rgb(225 6 0 / 45%) 0%, transparent 65%),
    url("brand/hero-bg.webp") center 70% / cover no-repeat,
    #120101;
}
.hero-art { position: absolute; right: -8px; bottom: 0; height: calc(100% - 10px); max-height: 250px; width: auto; z-index: 0;
  pointer-events: none; filter: drop-shadow(0 10px 30px rgb(225 6 0 / 45%)); }
.hero-art-live { right: -18px; max-height: 236px; }
.hero-art-empty { max-height: 190px; right: -12px; }
.td-hero .hero-actions { position: relative; z-index: 2; }
@media (max-width: 360px) { .hero-art { max-height: 200px; } }

/* section illustrations */
.section-art { display: block; object-fit: contain; flex: none; pointer-events: none; }
.topbar.with-art { align-items: flex-end; }
.topbar-art { width: 92px; height: 92px; margin: -10px -6px -8px 0; filter: drop-shadow(0 8px 22px rgb(225 6 0 / 35%)); }
.section-banner { position: relative; overflow: hidden; display: flex; align-items: flex-end; gap: 4px; min-height: 120px; padding: 14px 0 0 16px;
  margin-bottom: 14px; border-radius: var(--td-radius-xl); color: var(--td-neutral-bone);
  background: radial-gradient(70% 120% at 92% 75%, rgb(225 6 0 / 32%), transparent 65%), var(--td-black-coal); border: 1px solid var(--td-black-ash); }
.sb-body { flex: 1; min-width: 0; padding-bottom: 16px; align-self: center; }
.sb-kicker { font: 700 10px/1.2 var(--td-font-mono); letter-spacing: .14em; color: var(--td-red-devil); }
.sb-title { font: 800 17px/1.2 var(--td-font-display); letter-spacing: -0.01em; margin-top: 6px; }
.sb-sub { color: var(--td-neutral-smoke); font-size: 12.5px; line-height: 1.4; margin-top: 4px; }
.section-banner .section-art { width: 116px; height: 116px; margin-right: -4px; filter: drop-shadow(0 10px 24px rgb(225 6 0 / 35%)); }
.connect-card.with-art { flex-direction: row; align-items: flex-end; padding-bottom: 0; }
.connect-card.with-art .grow { display: flex; flex-direction: column; gap: 6px; padding-bottom: 14px; }
.connect-card .section-art { width: 84px; height: 84px; margin-right: -8px; }
/* 3D heads include shoulders: in small tiles show them bigger, cut at the tile's bottom edge */
.mascot-tile { overflow: hidden; align-items: end; }
.mascot-tile .mascot { width: 54px !important; height: 54px !important; margin-bottom: -4px; }
.push-hero-icon { align-items: end; }
.push-hero-icon .mascot { width: 60px !important; height: 60px !important; margin-bottom: -6px; }