/* КОНФИ — страницы инструментов v5: анимированные демо-панели внутри .cx-frame.
   Стиль наследуется от «Контекстной рекламы» (context.css): нулевой радиус, тёмная панель, амбер-акцент. */
.aw{position:relative;display:flex;flex-direction:column;gap:clamp(16px,1.8vw,26px);padding:clamp(20px,2.2vw,34px);min-height:clamp(300px,29vw,420px);color:#F4F2EC;background:var(--ink)}
.aw-k{font-family:var(--mono);font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--amber)}
.aw-cap{margin:0;font-family:var(--mono);font-size:11px;line-height:1.6;letter-spacing:0.03em;color:rgba(244,242,236,0.5)}
.aw-cap b{color:rgba(244,242,236,0.85);font-weight:500}
.aw-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-top:auto;padding-top:clamp(14px,1.6vw,20px);border-top:1px solid rgba(244,242,236,0.16)}
.aw-fig{display:flex;flex-direction:column;gap:7px}
.aw-fig b{font-size:clamp(22px,2vw,30px);font-weight:900;letter-spacing:-0.03em;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.aw-fig b i{font-style:normal;color:var(--amber)}
.aw-fig span{font-family:var(--mono);font-size:10px;letter-spacing:0.07em;text-transform:uppercase;color:rgba(244,242,236,0.5)}
.aw-tag{font-family:var(--mono);font-size:10px;letter-spacing:0.07em;text-transform:uppercase;color:rgba(244,242,236,0.6);border:1px solid rgba(244,242,236,0.24);padding:6px 10px;white-space:nowrap}
.aw-tag.on{color:var(--ink);background:var(--amber);border-color:var(--amber)}

/* сегменты аудитории */
.aw-dots{display:grid;grid-template-columns:repeat(14,1fr);gap:clamp(4px,0.5vw,7px)}
.aw-dots span{aspect-ratio:1;background:rgba(244,242,236,0.13);transform:scale(0)}
.cx-frame.in .aw-dots span{animation:awpop .45s var(--e-pop) forwards;animation-delay:calc(var(--i) * 11ms)}
.aw-dots span.on{background:var(--amber)}
.cx-frame.in .aw-dots span.on{animation:awpop .45s var(--e-pop) forwards,awglow 2.8s calc(700ms + var(--i) * 11ms) ease-in-out infinite}
@keyframes awpop{to{transform:none}}
@keyframes awglow{0%,100%{opacity:1}50%{opacity:.42}}
.aw-segs{display:flex;flex-wrap:wrap;gap:8px}

/* поток данных: источники → контур → сделка */
.aw-flow{display:grid;grid-template-columns:minmax(0,10.5ch) 1fr minmax(0,9ch);align-items:center;gap:clamp(10px,1.4vw,18px)}
.aw-src{display:flex;flex-direction:column;gap:clamp(9px,1.1vw,14px)}
.aw-src span{font-family:var(--mono);font-size:10.5px;letter-spacing:0.05em;text-transform:uppercase;color:rgba(244,242,236,0.62);white-space:nowrap;opacity:0;transform:translateX(-8px);transition:opacity .5s var(--e-out),transform .5s var(--e-out)}
.cx-frame.in .aw-src span{opacity:1;transform:none}
.cx-frame.in .aw-src span:nth-child(2){transition-delay:.1s}
.cx-frame.in .aw-src span:nth-child(3){transition-delay:.2s}
.cx-frame.in .aw-src span:nth-child(4){transition-delay:.3s}
.cx-frame.in .aw-src span:nth-child(5){transition-delay:.4s}
.aw-wires{display:flex;flex-direction:column;gap:clamp(9px,1.1vw,14px)}
.aw-wire{position:relative;height:14px}
.aw-wire::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(244,242,236,0.2);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--e-out)}
.cx-frame.in .aw-wire::before{transform:none}
.aw-wire i{position:absolute;left:0;top:50%;width:7px;height:7px;margin-top:-3.5px;background:var(--amber);opacity:0}
.cx-frame.in .aw-wire i{animation:awtravel 2.2s linear infinite;animation-delay:calc(var(--i) * 300ms + 500ms)}
@keyframes awtravel{0%{left:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:100%;opacity:0}}
.aw-node{display:flex;flex-direction:column;justify-content:center;gap:6px;min-height:clamp(84px,9vw,120px);padding:12px 10px;border:1px solid var(--amber);text-align:center}
.aw-node b{font-size:clamp(13px,1.1vw,16px);font-weight:800;letter-spacing:-0.01em;line-height:1.15}
.aw-node span{font-family:var(--mono);font-size:9.5px;letter-spacing:0.07em;text-transform:uppercase;color:var(--amber)}

/* звонок: волна + подмена номера */
.aw-wave{display:flex;align-items:center;gap:clamp(2px,0.35vw,4px);height:clamp(70px,7vw,104px)}
.aw-wave span{flex:1;background:rgba(244,242,236,0.26);height:calc(var(--h) * 100%);transform:scaleY(0);transform-origin:center}
.cx-frame.in .aw-wave span{animation:awrise .5s var(--e-out) forwards,awpulse 1.5s calc(var(--i) * 45ms) ease-in-out infinite alternate;animation-delay:calc(var(--i) * 18ms),calc(var(--i) * 45ms)}
@keyframes awrise{to{transform:none}}
@keyframes awpulse{from{transform:scaleY(.55);background:rgba(244,242,236,0.26)}to{transform:scaleY(1);background:var(--amber)}}
.aw-num{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.aw-num b{font-size:clamp(20px,2vw,30px);font-weight:900;letter-spacing:-0.02em;font-variant-numeric:tabular-nums;transition:opacity .18s ease-out,transform .18s ease-out}
.aw-num b.sw{opacity:0;transform:translateY(-6px)}
.aw-num em{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:0.07em;text-transform:uppercase;color:var(--amber)}

/* дашборд: столбцы + метрики */
.aw-bars{display:flex;align-items:flex-end;gap:clamp(6px,0.9vw,12px);height:clamp(110px,11vw,160px)}
.aw-bars span{position:relative;flex:1;background:rgba(244,242,236,0.2);height:calc(var(--h) * 100%);transform:scaleY(0);transform-origin:bottom;transition:transform .7s var(--e-out);transition-delay:calc(var(--i) * 70ms)}
.aw-bars span.on{background:var(--amber)}
.cx-frame.in .aw-bars span{transform:none}
.aw-axis{display:flex;gap:clamp(6px,0.9vw,12px)}
.aw-axis span{flex:1;font-family:var(--mono);font-size:9.5px;letter-spacing:0.04em;text-transform:uppercase;color:rgba(244,242,236,0.4);text-align:center}
.aw-mets{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,22px)}
.aw-mets div{display:flex;flex-direction:column;gap:8px;border-top:1px solid rgba(244,242,236,0.18);padding-top:10px}
.aw-mets b{font-size:clamp(17px,1.5vw,23px);font-weight:900;letter-spacing:-0.03em;line-height:1;font-variant-numeric:tabular-nums}
.aw-mets b i{font-style:normal;color:var(--amber)}
.aw-mets span{font-family:var(--mono);font-size:9.5px;letter-spacing:0.06em;text-transform:uppercase;color:rgba(244,242,236,0.5);line-height:1.4}

/* аудит: чек-лист находок */
.aw-list{display:flex;flex-direction:column}
.aw-row{display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:12px;padding:clamp(9px,1vw,13px) 0;border-bottom:1px solid rgba(244,242,236,0.12);opacity:0;transform:translateY(10px);transition:opacity .5s var(--e-out),transform .5s var(--e-out)}
.cx-frame.in .aw-row{opacity:1;transform:none}
.cx-frame.in .aw-row:nth-child(2){transition-delay:.14s}
.cx-frame.in .aw-row:nth-child(3){transition-delay:.28s}
.cx-frame.in .aw-row:nth-child(4){transition-delay:.42s}
.cx-frame.in .aw-row:nth-child(5){transition-delay:.56s}
.cx-frame.in .aw-row:nth-child(6){transition-delay:.7s}
.aw-row .ck{font-size:13px;color:var(--amber);opacity:0;transform:scale(0)}
.cx-frame.in .aw-row .ck{animation:awpop .45s var(--e-pop) forwards;animation-delay:calc(var(--d) * 140ms + 320ms);opacity:1}
.aw-row .t{font-size:14px;line-height:1.4;color:rgba(244,242,236,0.86);text-wrap:pretty}
.aw-row .m{font-family:var(--mono);font-size:9.5px;letter-spacing:0.06em;text-transform:uppercase;color:rgba(244,242,236,0.45);white-space:nowrap}

@media (max-width:640px){.aw-dots{grid-template-columns:repeat(10,1fr)}.aw-flow{grid-template-columns:minmax(0,9ch) 1fr}.aw-node{grid-column:1/-1;min-height:0}.aw-mets{grid-template-columns:1fr 1fr}}
@media (prefers-reduced-motion:reduce){
  .aw-dots span,.aw-wave span,.aw-bars span,.aw-row,.aw-row .ck,.aw-src span{opacity:1;transform:none;animation:none;transition:none}
  .aw-wire::before{transform:none}.aw-wire i{display:none}
}