/* SUNDUQ v410 — подсказки форматов и предпросмотр в рекламном кабинете.
   Цвета и радиусы взяты у соседних экранов кабинета (v308/v403). */

.af410Field{position:relative}
.af410Field .af410Hint{
  margin:4px 0 0;color:#9fc6dd;font-size:12px;line-height:1.4;overflow-wrap:anywhere}
.af410Field .af410Hint b{color:#dceaf6;font-weight:700}
.af410Field .af410Where{margin:2px 0 8px;color:#6f96ad;font-size:11.5px;line-height:1.4}
.af410Opt{font-style:normal;color:#6f96ad;font-size:11px;font-weight:600}

/* Поле с отклонённым файлом должно быть видно сразу, а не только по тексту. */
.af410Field--bad{border-color:#7d3040;background:#1b1017}
.af410Err{
  margin:8px 0 0;padding:8px 10px;border-radius:10px;
  border:1px solid #7d3040;background:#2a1119;color:#f4b3c0;
  font-size:12px;line-height:1.45;overflow-wrap:anywhere}

/* Поле осталось от старой схемы и в показе не участвует — гасим,
   но не прячем: у кого-то там лежит файл, и он должен это видеть. */
.af410Field--legacy{opacity:.6}

.af410Note{margin:10px 0 0;color:#6f96ad;font-size:12px;line-height:1.45}

/* ── Предпросмотр ─────────────────────────────────────────────── */
.af410Preview{
  margin:14px 0 0;padding:12px;border:1px solid #22415a;border-radius:14px;background:#0b2233}
.af410PreviewHead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.af410PreviewHead b{font-size:14px;color:#eef7ff}
.af410PreviewHead span{color:#6f96ad;font-size:12px}
.af410Tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.af410Tab{
  padding:6px 11px;border:1px solid #29485d;border-radius:999px;
  background:#10293d;color:#cdeeff;font:inherit;font-size:12px;cursor:pointer}
.af410Tab:hover{background:#143149}
.af410Tab.is-active{background:#1c4763;border-color:#4fb0e0;color:#fff;font-weight:700}
.af410Tab:focus-visible{outline:2px solid #4fb0e0;outline-offset:2px}

/* Рамка повторяет пропорции настоящего места, и картинка кадрируется так же,
   как на сайте, — иначе предпросмотр обманывал бы. */
.af410Frame{
  width:100%;max-width:520px;margin:0 auto;overflow:hidden;
  border:1px solid #22415a;border-radius:12px;background:#0d2233}
.af410Frame img{display:block;width:100%;height:100%;object-fit:cover}
.af410Lost{margin:8px 0 0;text-align:center;color:#8fb2c8;font-size:12px}
.af410Lost--warn{color:#f4b3c0}
.af410Empty{margin:0;padding:18px 12px;text-align:center;color:#6f96ad;font-size:12.5px}

@media (max-width:600px){
  .af410Preview{padding:10px}
  .af410Tab{font-size:11.5px;padding:5px 9px}
  .af410Frame{max-width:100%}
}