/* Страница /telegram-delete-account/ — инфографика удаления аккаунта Telegram.
   Префикс tg-. Создано 03.10.2026. */

/* ——— обёртка схемы с подписью ——— */
.tg-fig{margin:20px 0;border:1px solid #dbe4f0;border-radius:14px;background:#fff;padding:14px 14px 10px}
.tg-fig svg{display:block;width:100%;height:auto}
.tg-fig figcaption{margin:8px 2px 0;font-size:13px;line-height:1.5;color:#6b7b8f;text-align:center}
.tg-fig h3{margin:0 0 10px;font-size:16px;color:#12283f}

/* ——— цепочка переходов: Sozlamalar → Maxfiylik → ... ——— */
.tg-kbd{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:12px 0}
.tg-kbd span{border:1px solid #c9d8ea;background:#f6f9fd;border-radius:8px;padding:6px 10px;font:600 13.5px/1.25 system-ui;color:#12283f}
.tg-kbd span.hit{background:#134e8e;border-color:#134e8e;color:#fff}
.tg-kbd span.bad{background:#fdecee;border-color:#f0bcc3;color:#8a2733}
.tg-kbd i{color:#8a97a8;font-style:normal;font-weight:700}

/* ——— путь удаления: три узла со стрелками ——— */
.tg-flow{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}
.tg-fl{flex:1 1 210px;position:relative;border:1px solid #dbe4f0;border-radius:12px;background:#fff;padding:12px 12px 12px 46px}
.tg-fl b{display:block;font-size:14.5px;color:#12283f;margin-bottom:3px}
.tg-fl p{margin:0;font-size:13.5px;line-height:1.5;color:#4a5568}
.tg-fl em{position:absolute;left:12px;top:12px;width:24px;height:24px;border-radius:50%;background:#134e8e;color:#fff;font:700 13px/24px system-ui;text-align:center;font-style:normal}
.tg-fl.no{background:#fdf5f6;border-color:#eec4ca}
.tg-fl.no em{background:#b23a48}
.tg-fl.ok{background:#f4fbf7;border-color:#bfe0cd}
.tg-fl.ok em{background:#1f7a4d}

/* ——— две колонки: что исчезает / что остаётся ——— */
.tg-split{display:flex;flex-wrap:wrap;gap:14px;margin:18px 0}
.tg-col{flex:1 1 280px;border:1px solid #dbe4f0;border-radius:14px;background:#fff;padding:14px}
.tg-col h3{margin:0 0 8px;font-size:16px;color:#12283f;display:flex;align-items:center;gap:8px}
.tg-col h3 u{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;text-decoration:none;font:700 14px/1 system-ui}
.tg-col.gone{border-color:#eec4ca;background:#fdf8f9}
.tg-col.gone h3 u{background:#fdecee;color:#b23a48}
.tg-col.stay{border-color:#bfe0cd;background:#f7fcf9}
.tg-col.stay h3 u{background:#eaf7f0;color:#1f7a4d}
.tg-col ul{margin:0;padding:0;list-style:none}
.tg-col li{position:relative;padding:7px 0 7px 26px;border-bottom:1px solid #eef3f9;font-size:14px;line-height:1.5;color:#3d4a5c}
.tg-col li:last-child{border-bottom:0}
.tg-col.gone li:before{content:"\2715";position:absolute;left:4px;top:8px;color:#b23a48;font:700 12px/1.4 system-ui}
.tg-col.stay li:before{content:"\2713";position:absolute;left:4px;top:8px;color:#1f7a4d;font:700 13px/1.35 system-ui}

/* ——— шкала автоудаления ——— */
.tg-line{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.tg-pt{flex:1 1 95px;border:1px solid #dbe4f0;border-radius:12px;background:#fff;padding:10px 8px;text-align:center}
.tg-pt b{display:block;font:700 19px/1.2 system-ui;color:#134e8e}
.tg-pt span{display:block;margin-top:3px;font-size:12.5px;line-height:1.35;color:#5a6b80}
.tg-pt.def{background:#fdf5f6;border-color:#eec4ca}
.tg-pt.def b{color:#b23a48}

/* ——— плашка про код подтверждения ——— */
.tg-code{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:18px 0;padding:14px;border:1px solid #c9d8ea;border-radius:14px;background:linear-gradient(180deg,#f6f9fd,#fff)}
.tg-code .tg-num{flex:0 0 auto;display:flex;gap:5px}
.tg-code .tg-num i{display:flex;align-items:center;justify-content:center;width:30px;height:38px;border-radius:8px;background:#134e8e;color:#fff;font:700 17px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-style:normal}
.tg-code p{margin:0;flex:1 1 220px;font-size:14px;line-height:1.55;color:#3d4a5c}
.tg-code p b{color:#12283f}

/* ——— мелкие метки ——— */
.tg-chip{display:inline-block;margin:0 4px 6px 0;padding:4px 10px;border-radius:999px;font:600 12.5px/1.3 system-ui;background:#f4f8fd;border:1px solid #b9cde5;color:#134e8e}
.tg-chip.warn{background:#fffbeb;border-color:#fcd34d;color:#78350f}

/* плашки .callout.warn и .callout.ok живут в edu.css, который здесь не подключается */
.callout.warn{background:#fffbeb;border:1px solid #fcd34d;color:#78350f}
.callout.ok{background:#f0fdf4;border:1px solid #86efac;color:#14532d}

@media (max-width:560px){
  .tg-fl{flex:1 1 100%}
  .tg-pt{flex:1 1 44%}
}