/**
 * Рекламные баннеры инструментов ДелоВход — нативная вставка в статьи блога.
 * Все стили строго в неймспейсе `.dvh-tool-banner`, чтобы голые селекторы из
 * дизайна (h1, .left, .right, .row, .panel, .badge, .cta …) не протекали в контент.
 * Источник: дизайн-файл «Рекламные баннеры инструментов.html» (claude_design).
 */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&display=swap');

.dvh-tool-banner {
  --green: #2f926f;
  --green-text: #4bb98c;
  --ink: #f4f4f5;
  --dim: rgba(255,255,255,0.80);
  --card: #18181b;
  --card-2: #27272a;
  --border: #2f2f34;
  font-family: 'Manrope', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  max-width: 716px;
  margin: 0 auto;
  color: var(--ink);
}
.dvh-tool-banner *, .dvh-tool-banner *::before, .dvh-tool-banner *::after { box-sizing: border-box; }

.dvh-tool-banner .ico { stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* ============ BANNER SHELL ============ */
.dvh-tool-banner .banner {
  position: relative;
  width: 716px;
  max-width: 100%;
  height: 472px;
  overflow: hidden;
  border-radius: 18px;
  color: var(--ink);
  background:
    radial-gradient(120% 130% at 86% 8%, rgba(96,200,156,0.42), transparent 56%),
    linear-gradient(152deg, #2f926f 0%, #226e54 50%, #14422f 100%);
  display: flex;
}
.dvh-tool-banner .banner::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,0.045) 0 2px, transparent 2px 24px);
}
.dvh-tool-banner .banner::after {
  content: ''; position: absolute; right: -150px; top: -160px; width: 480px; height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.16), transparent 70%);
  pointer-events: none;
}

/* ---------- LEFT COLUMN ---------- */
.dvh-tool-banner .left {
  position: relative; z-index: 2;
  width: 386px; flex-shrink: 0;
  min-width: 0; /* чиним flexbox min-width:auto, иначе заголовок не переносится */
  padding: 34px 0 34px 40px;
  display: flex; flex-direction: column;
}
.dvh-tool-banner .logo { display: flex; align-items: center; gap: 10px; }
.dvh-tool-banner .logo-mark {
  width: 34px; height: 34px; border-radius: 10px;
  background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.28);
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 19px;
}
.dvh-tool-banner .logo-word { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; }
.dvh-tool-banner .logo-word .ru { color: rgba(255,255,255,0.6); font-weight: 700; font-size: 13px; }

.dvh-tool-banner .badge {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 18px; padding: 6px 12px; border-radius: 999px;
  background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.28);
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.dvh-tool-banner .badge .dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,0.22); }

.dvh-tool-banner h1 {
  margin: 16px 0 0;
  font-size: 32px; font-weight: 800; letter-spacing: -0.035em; line-height: 1.04;
  text-wrap: balance;
}
.dvh-tool-banner h1 .soft { color: rgba(255,255,255,0.72); }
.dvh-tool-banner .sub {
  margin: 12px 0 0;
  font-size: 13.5px; line-height: 1.45; color: var(--dim); max-width: 32ch;
}
.dvh-tool-banner .ticks { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.dvh-tool-banner .tick { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700; }
.dvh-tool-banner .tick .ic {
  width: 19px; height: 19px; border-radius: 6px; flex-shrink: 0;
  background: rgba(255,255,255,0.18); display: grid; place-items: center;
}
.dvh-tool-banner .tick .ic svg { width: 12px; height: 12px; color: #fff; }

.dvh-tool-banner .cta-row { margin-top: auto; display: flex; align-items: center; gap: 14px; padding-top: 20px; }
.dvh-tool-banner .cta {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 22px; border-radius: 12px;
  background: #fff; color: #14422f;
  font-size: 15px; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap;
  box-shadow: 0 10px 28px -8px rgba(0,0,0,0.5);
  text-decoration: none; cursor: pointer;
}
.dvh-tool-banner .cta:hover { color: #14422f; }
.dvh-tool-banner .cta svg { width: 17px; height: 17px; }
.dvh-tool-banner .free { font-size: 12px; font-weight: 700; color: var(--dim); max-width: 13ch; line-height: 1.3; }

/* ---------- RIGHT VISUAL ---------- */
.dvh-tool-banner .right { position: relative; z-index: 1; flex: 1; }
.dvh-tool-banner .panel {
  position: absolute;
  top: 50%; left: 4px; transform: translateY(-50%) rotate(-3deg);
  width: 300px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 30px 60px -22px rgba(0,0,0,0.65), 0 4px 14px rgba(0,0,0,0.4);
  overflow: hidden;
}
.dvh-tool-banner .panel-head {
  display: flex; align-items: center; gap: 9px;
  padding: 13px 15px; border-bottom: 1px solid var(--border);
}
.dvh-tool-banner .ph-ic {
  width: 26px; height: 26px; border-radius: 8px; background: rgba(47,146,111,0.18);
  display: grid; place-items: center; color: var(--green-text);
}
.dvh-tool-banner .ph-ic svg { width: 15px; height: 15px; }
.dvh-tool-banner .panel-head b { font-size: 13.5px; font-weight: 800; letter-spacing: -0.01em; }
.dvh-tool-banner .panel-head .ph-meta { margin-left: auto; font-size: 11px; font-weight: 700; color: #71717a; }

.dvh-tool-banner .float {
  position: absolute; z-index: 3;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 9px 13px;
  box-shadow: 0 18px 36px -14px rgba(0,0,0,0.6);
  display: flex; align-items: center; gap: 9px;
}
.dvh-tool-banner .float .f-ic { width: 26px; height: 26px; border-radius: 8px; background: var(--green); display: grid; place-items: center; color: #fff; }
.dvh-tool-banner .float .f-ic svg { width: 15px; height: 15px; }
.dvh-tool-banner .float .f-t1 { font-size: 12px; font-weight: 800; line-height: 1.1; white-space: nowrap; }
.dvh-tool-banner .float .f-t2 { font-size: 10px; font-weight: 700; color: #71717a; margin-top: 2px; white-space: nowrap; }

/* ===== shared small bits ===== */
.dvh-tool-banner .row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 15px; border-bottom: 1px solid var(--border);
}
.dvh-tool-banner .row:last-child { border-bottom: none; }
.dvh-tool-banner .rtext { min-width: 0; flex: 1; }
.dvh-tool-banner .rtext .t1 { font-size: 12.5px; font-weight: 700; color: #f4f4f5; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dvh-tool-banner .rtext .t2 { font-size: 10.5px; font-weight: 600; color: #71717a; margin-top: 3px; }
.dvh-tool-banner .av {
  width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
  display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 800;
}
.dvh-tool-banner .pill {
  flex-shrink: 0; font-size: 10px; font-weight: 800; padding: 4px 8px; border-radius: 999px; letter-spacing: 0.01em;
}
.dvh-tool-banner .pill.done { background: rgba(47,146,111,0.18); color: var(--green-text); }
.dvh-tool-banner .pill.ai { background: rgba(91,155,243,0.16); color: #7fb0f6; display: inline-flex; align-items: center; gap: 4px; }
.dvh-tool-banner .pill.ai svg { width: 10px; height: 10px; }
.dvh-tool-banner .pill.plan { background: #27272a; color: #a1a1aa; }
.dvh-tool-banner .pill.warn { background: rgba(217,151,74,0.18); color: #e1ab63; }

/* ===== KANBAN (CRM) ===== */
.dvh-tool-banner .kan { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; padding: 13px; }
.dvh-tool-banner .kcol { background: var(--card-2); border-radius: 10px; padding: 8px 7px; }
.dvh-tool-banner .kcol .kh { font-size: 9.5px; font-weight: 800; color: #a1a1aa; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 7px; display: flex; justify-content: space-between; }
.dvh-tool-banner .kcard { background: #18181b; border: 1px solid var(--border); border-radius: 8px; padding: 7px 8px; margin-bottom: 6px; }
.dvh-tool-banner .kcard:last-child { margin-bottom: 0; }
.dvh-tool-banner .kcard .kn { font-size: 10.5px; font-weight: 700; }
.dvh-tool-banner .kcard .ks { font-size: 11px; font-weight: 800; color: var(--green-text); margin-top: 4px; }
.dvh-tool-banner .kdot { width: 6px; height: 6px; border-radius: 50%; }

/* ===== SEO GAUGE ===== */
.dvh-tool-banner .gauge-wrap { padding: 16px 15px; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--border); }
.dvh-tool-banner .gauge { width: 84px; height: 84px; flex-shrink: 0; position: relative; }
.dvh-tool-banner .gauge svg { transform: rotate(-90deg); }
.dvh-tool-banner .gauge .gnum { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.dvh-tool-banner .gauge .gnum b { font-size: 24px; font-weight: 800; line-height: 1; }
.dvh-tool-banner .gauge .gnum span { font-size: 9px; font-weight: 700; color: #71717a; line-height: 1; margin-top: 3px; }
.dvh-tool-banner .gleg { display: flex; flex-direction: column; gap: 7px; }
.dvh-tool-banner .gleg .gl { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; }
.dvh-tool-banner .gleg .gl b { margin-left: auto; color: #a1a1aa; font-weight: 800; }
.dvh-tool-banner .gbar { width: 38px; height: 6px; border-radius: 3px; background: var(--card-2); overflow: hidden; }
.dvh-tool-banner .gbar i { display: block; height: 100%; border-radius: 3px; }

/* ===== bars (marketing) ===== */
.dvh-tool-banner .mrow { padding: 9px 15px; border-bottom: 1px solid var(--border); }
.dvh-tool-banner .mrow:last-child { border-bottom: none; }
.dvh-tool-banner .mrow .ml { display: flex; justify-content: space-between; font-size: 11px; font-weight: 700; margin-bottom: 6px; }
.dvh-tool-banner .mrow .ml b { font-weight: 800; }
.dvh-tool-banner .mtrack { height: 7px; border-radius: 4px; background: var(--card-2); overflow: hidden; }
.dvh-tool-banner .mtrack i { display: block; height: 100%; border-radius: 4px; }

/* ===== widget preview ===== */
.dvh-tool-banner .wsite { padding: 14px; }
.dvh-tool-banner .wbar { display: flex; align-items: center; gap: 5px; margin-bottom: 10px; }
.dvh-tool-banner .wbar i { width: 7px; height: 7px; border-radius: 50%; background: #3a3a40; }
.dvh-tool-banner .wbar .url { margin-left: 6px; flex: 1; height: 14px; border-radius: 5px; background: var(--card-2); }
.dvh-tool-banner .wskel { height: 9px; border-radius: 5px; background: var(--card-2); margin-bottom: 7px; }
.dvh-tool-banner .wchat {
  margin-top: 12px; margin-left: auto; width: 200px;
  background: #18181b; border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
}
.dvh-tool-banner .wchat .wch-h { background: var(--green); padding: 8px 11px; display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; color: #fff; }
.dvh-tool-banner .wbub { margin: 9px 10px; padding: 7px 9px; border-radius: 9px 9px 9px 3px; background: var(--card-2); font-size: 10.5px; font-weight: 600; color: #d4d4d8; max-width: 80%; }
.dvh-tool-banner .wfield { margin: 0 10px 10px; height: 26px; border-radius: 7px; background: var(--card-2); display: flex; align-items: center; padding: 0 9px; font-size: 10px; color: #71717a; font-weight: 600; }

/* ============ АДАПТИВ ============ */
/* На узких экранах баннер становится одной колонкой, декоративная правая
   панель скрывается, текстовая часть занимает всю ширину. */
@media (max-width: 760px) {
  .dvh-tool-banner .banner {
    width: 100%;
    height: auto;
    flex-direction: column;
  }
  .dvh-tool-banner .left {
    width: 100%;
    min-width: 0;
    padding: 28px 24px;
  }
  .dvh-tool-banner .right { display: none; }
  .dvh-tool-banner h1 { font-size: 26px; text-wrap: wrap; overflow-wrap: break-word; }
  .dvh-tool-banner .sub { max-width: none; }
  /* длинные бейджи переносим, чтобы не обрезались на узких экранах */
  .dvh-tool-banner .badge { white-space: normal; }
  .dvh-tool-banner .cta-row { margin-top: 22px; flex-wrap: wrap; }
}
@media (max-width: 380px) {
  .dvh-tool-banner .left { padding: 22px 18px; }
  .dvh-tool-banner h1 { font-size: 23px; }
  .dvh-tool-banner .cta { width: 100%; justify-content: center; }
  .dvh-tool-banner .free { max-width: none; }
}