/* Панель партнёра «Клипы» — надстройка над ../styles.css (бренд беж/оранж, Э2 2026-07-13).
   Тут ТОЛЬКО партнёрские классы; база (card/btn/hero/tabbar/toast) — общая с мини-апом. */

/* .lt/.ld в базе заданы только внутри .list-row — в карточках панели дублируем */
.card .lt { font: 600 13.5px var(--f-text); color: var(--ink); }
.card .ld { font: 400 12px/1.5 var(--f-text); color: var(--muted); margin-top: 4px; }

/* Экраны-заглушки (не одобрен / вне Telegram / ошибка) */
.blocked-wrap {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 10px; padding: 56px 20px 20px;
}
.blocked-ic { font-size: 44px; line-height: 1; }
.blocked-t { font: 800 20px var(--f-display); color: var(--ink); }
.blocked-d { font: 400 13px/1.55 var(--f-text); color: var(--muted); max-width: 280px; }
.blocked-wrap .btn { margin-top: 8px; align-self: stretch; }

/* Дашборд-герой (оранжевый .hero из базы; свой отступ пилюли) */
.phero .status-pill { background: rgba(35,24,15,.28); color: #FFF3E8; }

/* Поле подачи ролика */
.pinput {
  width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 12px;
  border: 2px solid rgba(35,24,15,.2); background: var(--paper2);
  font: 500 13.5px var(--f-text); color: var(--ink); outline: none;
}
.pinput:focus { border-color: var(--accent); }
.pinput:disabled { opacity: .55; }

/* Список роликов */
.clip-item {
  background: var(--paper); border: 2px solid var(--ink); border-radius: var(--r);
  box-shadow: var(--shadow-sm); padding: 12px 14px;
}
.clip-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.clip-pl { font: 700 12.5px var(--f-text); color: var(--ink); }
.clip-st { font: 600 11px var(--f-text); padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.clip-st.wait { background: var(--warn-bg); color: var(--warn-ink); }
.clip-st.ok { background: #E7F3EA; color: var(--green); }
.clip-st.bad { background: var(--danger-bg); color: var(--danger-ink); }
.clip-st.done { background: var(--cream); color: var(--muted); }
.clip-url {
  display: block; margin-top: 6px; font: 400 11.5px var(--f-text); color: var(--accent-d);
  text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.clip-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 5px; font: 400 11px var(--f-text); color: var(--muted); }
.clip-rej { color: var(--danger-ink); }
.clip-dt { margin-left: auto; color: var(--muted2); }

/* Э3: чипсы-фильтр по каналам + график просмотров */
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; }
.chip {
  padding: 5px 11px; border-radius: 999px; background: var(--paper);
  border: 1.5px solid rgba(35,24,15,.3); font: 600 11.5px var(--f-text);
  color: var(--ink-soft); cursor: pointer; user-select: none;
}
.chip.on { background: var(--accent); border-color: var(--ink); color: #FFF8F0; }
.clip-click { cursor: pointer; }
.clip-acc { font: 600 11px var(--f-text); color: var(--muted); margin-left: 4px; }
.clip-chart { margin-top: 9px; border-top: 1.5px dashed rgba(35,24,15,.18); padding-top: 8px; }
.clip-chart svg { width: 100%; height: 56px; display: block; }
.clip-chart polyline { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; }
.clip-chart-meta { display: flex; justify-content: space-between; font: 400 10.5px var(--f-text); color: var(--muted2); margin-top: 3px; }

/* Правила (Материалы) */
.rules { display: flex; flex-direction: column; gap: 9px; margin-top: 8px; }
.rule { display: flex; gap: 10px; font: 400 12.5px/1.5 var(--f-text); color: var(--ink-soft); }
.rule span {
  flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--cream);
  border: 1.5px solid rgba(35,24,15,.25); display: flex; align-items: center; justify-content: center;
  font: 700 11px var(--f-text); color: var(--ink);
}

/* Реф-ссылка рекрутёра (Профиль) */
.reclink {
  margin-top: 9px; padding: 10px 12px; border-radius: 12px; background: var(--cream);
  border: 1.5px dashed var(--accent); font: 600 11.5px var(--f-text); color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer;
}

/* Дашборд: три чипа в ряд (Ролики/Отслеживается/Каналы — паритет EJX) */
.tiles.three { grid-template-columns: 1fr 1fr 1fr; }
.tiles.three .tile { padding: 12px 10px; }
.tiles.three .tk { font-size: 10px; }

/* Чат с поддержкой (Э2b) */
.chat-page { height: 100%; box-sizing: border-box; display: flex; flex-direction: column; }
.chat-list {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; gap: 8px; padding: 4px 2px;
}
.chat-msg { max-width: 82%; display: flex; flex-direction: column; }
.chat-msg.me { align-self: flex-end; align-items: flex-end; }
.chat-msg.sup { align-self: flex-start; align-items: flex-start; }
.chat-b {
  padding: 9px 13px; border-radius: 15px; font: 400 13px/1.45 var(--f-text);
  border: 1.5px solid var(--ink); box-shadow: 2px 2px 0 var(--ink);
  white-space: pre-wrap; word-break: break-word;
}
.chat-msg.me .chat-b { background: var(--accent); color: #FFF8F0; border-bottom-right-radius: 5px; }
.chat-msg.sup .chat-b { background: var(--paper); color: var(--ink); border-bottom-left-radius: 5px; }
.chat-t { font: 400 10px var(--f-text); color: var(--muted2); margin-top: 3px; padding: 0 4px; }
.chat-inrow { display: flex; gap: 8px; padding-top: 10px; align-items: stretch; flex: none; }
.chat-inrow .chat-in { flex: 1; margin: 0; }
.chat-send {
  flex: none; width: 52px; margin: 0; display: flex; align-items: center; justify-content: center;
  padding: 0; font-size: 17px;
}

/* ─── Экран входа (браузер, Э2-браузер) ─── */
.login-qr { display: flex; justify-content: center; margin: 14px 0 2px; }
.login-qr svg { width: 176px; height: 176px; border: 2px solid var(--ink); border-radius: 14px; background: #fff; padding: 8px; box-shadow: 3px 3px 0 var(--ink); }
.login-wait { margin-top: 14px; text-align: center; font: 500 13px var(--f-text); color: var(--muted); }
.login-err { margin: 4px 0 12px; text-align: center; font: 500 13px var(--f-text); color: #B5462B; }
.login-dots { display: inline-block; animation: loginBlink 1.2s steps(4) infinite; overflow: hidden; vertical-align: bottom; width: 1.1em; }
@keyframes loginBlink { 0% { width: 0 } 100% { width: 1.1em } }
.login-code-lbl { margin-top: 14px; text-align: center; font: 500 13px var(--f-text); color: var(--muted); }
.login-code { text-align: center; font: 800 40px var(--f-display); letter-spacing: 8px; color: var(--ink); margin: 4px 0 12px; }
/* Вторичные способы входа (логин/пароль ↔ Telegram ↔ почта) */
.login-alt { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin-top: 16px; }
.login-alt-btn { font: 600 13px var(--f-text); color: var(--accent-d); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.login-alt-btn:active { opacity: .6; }
.login-alt-sep { color: var(--muted); font-size: 12px; }