/* Модуль «Агент клуба»: «рентген» клуба (облако → роутер → агент → устройства) и мини-виджеты.
   Разметка — resources/views/site/modules/club-server.blade.php, сценарий — club-server.js.
   Стиль — светлый чертёж: сетка, тонкие синие линии, узлы-карточки; палитра общая с сайтом */
.ag, .agf {
    --ag-ease: cubic-bezier(.2, .7, .2, 1);
    --ag-spring: cubic-bezier(.3, 1.6, .5, 1);
    --ag-blue: #2f5bd8; --ag-blue-2: #5b82ec; --ag-ink-bp: #1d3d99;
    --ag-ok: #22a35a; --ag-bad: #d64545; --ag-amber: #d48a12;
    --ag-paper: #f7f9fe; --ag-gridc: rgba(47, 91, 216, .07); --ag-gridC: rgba(47, 91, 216, .12);
    --ag-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.ag-head { max-width: 820px; }
.ag-head .lead { margin-top: 18px; }

/* ── Окно ── */
.ag-app {
    position: relative; margin-top: 44px; border: 1px solid #dde4f5; border-radius: 16px; overflow: hidden; user-select: none;
    background: var(--ag-paper); box-shadow: 0 1px 2px rgba(20, 20, 19, .04), 0 30px 80px rgba(29, 61, 153, .10);
}
.ag-bar { height: 50px; display: flex; align-items: center; gap: 14px; padding: 0 18px; border-bottom: 1px solid #e3e8f4; background: #fff; font-size: 13px; }
.ag-crumb { display: flex; align-items: center; gap: 7px; color: var(--muted); white-space: nowrap; min-width: 0; overflow: hidden; }
.ag-crumb b { color: var(--ink); font-weight: 600; }
.ag-crumb > i { font-style: normal; color: var(--ph); }
.ag-ver { display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 5px; background: var(--accent-soft); color: var(--accent); font: 600 11.5px/1.5 var(--ag-mono); }
.ag-ver.is-bump { animation: ag-bump .6s var(--ag-ease); }
@keyframes ag-bump { 40% { transform: translateY(-3px) scale(1.18); background: var(--ag-ok); color: #fff; } }
.ag-status { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--ok-soft); color: var(--ok); font-size: 12px; font-weight: 500; white-space: nowrap; transition: background .3s, color .3s; }
.ag-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--ag-ok); animation: ag-ping 1.6s infinite; }
.ag-app[data-net='off'] .ag-status { background: var(--bad-soft); color: var(--bad); }
.ag-app[data-net='off'] .ag-status i { background: var(--ag-bad); animation: none; }
.ag-app[data-net='setup'] .ag-status { background: var(--warn-soft); color: var(--warn); }
.ag-app[data-net='setup'] .ag-status i { background: var(--ag-amber); }
@keyframes ag-ping { 0% { box-shadow: 0 0 0 0 rgba(34, 163, 90, .5); } 70%, 100% { box-shadow: 0 0 0 7px rgba(34, 163, 90, 0); } }
.ag-ecg { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.ag-ecg svg { width: 92px; height: 22px; }
.ag-ecg path.b { stroke: rgba(34, 163, 90, .2); animation: none; stroke-dasharray: none; }
.ag-ecg path { fill: none; stroke: var(--ag-ok); stroke-width: 1.6; stroke-linejoin: round; stroke-dasharray: 60 200; animation: ag-ecg 1.8s linear infinite; }
.ag-app[data-net='off'] .ag-ecg path { stroke: var(--ph); animation: none; stroke-dasharray: none; }
@keyframes ag-ecg { from { stroke-dashoffset: 260; } to { stroke-dashoffset: 0; } }
.ag-clock { margin-left: auto; font: 600 13px/1 var(--ag-mono); color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* ── Сцена ── */
.ag-stagewrap { position: relative; }
.ag-stage { position: relative; aspect-ratio: 1200 / 660; container-type: inline-size; }
.ag-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ag-svg--tall { display: none; }
.ag-grid-l { stroke: var(--ag-gridc); stroke-width: 1; }
.ag-grid-L { stroke: var(--ag-gridC); stroke-width: 1; }
.ag-zone { fill: rgba(255, 255, 255, .55); stroke: rgba(47, 91, 216, .35); stroke-width: 1.2; stroke-dasharray: 7 6; }
.ag-zone-t { font: 600 11px var(--ag-mono); letter-spacing: .12em; fill: rgba(47, 91, 216, .55); }
.ag-halo { opacity: .9; transform-origin: center; transform-box: fill-box; animation: ag-halo 3.2s ease-in-out infinite; }
@keyframes ag-halo { 50% { opacity: .45; transform: scale(.92); } }
.ag-e { fill: none; stroke: #b9c7ec; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s, opacity .3s; }
.ag-e.is-dash { stroke-dasharray: 2 6; stroke: #aab3c6; }
.ag-e.is-hot { stroke: var(--ag-blue); }
.ag-e.is-cut { stroke: var(--ag-bad); stroke-dasharray: 6 6; }
.ag-flow { fill: none; stroke: var(--ag-blue-2); stroke-width: 2; stroke-dasharray: 3 14; stroke-linecap: round; opacity: .9; animation: ag-flow 1.1s linear infinite; }
@keyframes ag-flow { to { stroke-dashoffset: 17; } }
.ag-app[data-net='off'] .ag-flow, .ag-app[data-net='setup'] .ag-flow { opacity: 0; }
.ag-cut { opacity: 0; transform-origin: center; transform-box: fill-box; transition: opacity .25s; }
.ag-cut circle { fill: #fff; stroke: var(--ag-bad); stroke-width: 2; }
.ag-cut path { stroke: var(--ag-bad); stroke-width: 2.4; stroke-linecap: round; }
.ag-app[data-net='off'] .ag-cut { opacity: 1; animation: ag-pop .4s var(--ag-spring); }
@keyframes ag-pop { from { transform: scale(.3); } }

/* Пакеты */
.ag-pk { fill: var(--ag-blue); }
.ag-pk-g { fill: var(--ag-blue-2); opacity: .28; }
.ag-pk.ok { fill: var(--ag-ok); } .ag-pk-g.ok { fill: var(--ag-ok); }
.ag-pk.bad { fill: var(--ag-bad); } .ag-pk-g.bad { fill: var(--ag-bad); }
.ag-pk.amber { fill: var(--ag-amber); } .ag-pk-g.amber { fill: var(--ag-amber); }

/* Подписи на линиях */
.ag-uplink, .ag-direct { position: absolute; left: var(--x); top: var(--y); z-index: 1; white-space: nowrap; font: 500 max(9.5px, .8cqw) / 1 var(--ag-mono); pointer-events: none; }
.ag-uplink { display: inline-flex; align-items: center; gap: 4px; transform: translate(14px, -50%); color: var(--ag-blue); background: var(--ag-paper); padding: 3px 6px; border-radius: 5px; }
.ag-direct { transform: translate(-50%, -100%); color: #8a93a8; }
.ag-app[data-net='off'] .ag-uplink { color: var(--bad); }

/* Узлы */
.ag-n {
    position: absolute; left: var(--x); top: var(--y); z-index: 2; transform: translate(-50%, -50%);
    width: 14.6cqw; display: flex; align-items: center; gap: .7cqw; padding: .75cqw .9cqw; border-radius: 1.1cqw;
    background: #fff; border: 1px solid #dfe5f3; box-shadow: 0 1px 2px rgba(20, 20, 19, .04), 0 .8cqw 2cqw rgba(29, 61, 153, .08);
    font-size: max(10px, 1cqw); line-height: 1.25; transition: opacity .4s, filter .4s, border-color .3s, box-shadow .3s, background .3s;
}
.ag-ico { width: 2.6cqw; height: 2.6cqw; flex: none; display: grid; place-items: center; border-radius: .75cqw; background: var(--accent-soft); color: var(--accent); transition: background .3s, color .3s; }
.ag-ico .i { width: 1.45cqw; height: 1.45cqw; min-width: 13px; min-height: 13px; }
.ag-tx { min-width: 0; display: flex; flex-direction: column; }
.ag-n b { font-weight: 600; color: var(--ink); }
.ag-n small { font-size: max(9px, .86cqw); line-height: 1.3; color: var(--muted); transition: color .3s; }

.ag-n[data-st='off'] { opacity: .38; filter: grayscale(1); box-shadow: none; }
.ag-n[data-st='nb'] { background: rgba(255, 255, 255, .7); border-style: dashed; box-shadow: none; }
.ag-n[data-st='nb'] .ag-ico { background: var(--chip); color: var(--ink-2); }
.ag-n[data-st='act'] { border-color: var(--ag-blue); box-shadow: 0 0 0 .3cqw rgba(47, 91, 216, .14), 0 .8cqw 2cqw rgba(29, 61, 153, .12); }
.ag-n[data-st='act'] .ag-ico { background: var(--ag-blue); color: #fff; }
.ag-n[data-st='ok'] { border-color: var(--ag-ok); box-shadow: 0 0 0 .3cqw rgba(34, 163, 90, .14); }
.ag-n[data-st='ok'] .ag-ico { background: var(--ag-ok); color: #fff; }
.ag-n[data-st='ok'] small { color: var(--ok); }
.ag-n[data-st='bad'] { border-color: var(--ag-bad); box-shadow: 0 0 0 .3cqw rgba(214, 69, 69, .13); }
.ag-n[data-st='bad'] .ag-ico { background: var(--ag-bad); color: #fff; }
.ag-n[data-st='bad'] small { color: var(--bad); }
.ag-n[data-st='wait'] { border-color: var(--ag-amber); }
.ag-n[data-st='wait'] .ag-ico { background: var(--warn-soft); color: var(--warn); }
.ag-n[data-st='wait'] small { color: var(--warn); }
.ag-n.is-pop { animation: ag-npop .5s var(--ag-spring); }
@keyframes ag-npop { 40% { transform: translate(-50%, -50%) scale(1.07); } }

/* Облако */
.ag-n--cloud { width: 19cqw; padding: .9cqw 1.1cqw; border-radius: 1.4cqw; background: linear-gradient(135deg, #2f5bd8, #4a74e6); border-color: transparent; color: #fff; }
.ag-n--cloud .ag-ico { background: rgba(255, 255, 255, .18); color: #fff; }
.ag-n--cloud b { color: #fff; }
.ag-n--cloud small, .ag-n--cloud[data-st] small { color: rgba(255, 255, 255, .82); }
.ag-n--cloud[data-st='bad'] { background: linear-gradient(135deg, #8b95ad, #a3abbf); }
.ag-n--cloud[data-st='ok'] .ag-ico, .ag-n--cloud[data-st='act'] .ag-ico { background: rgba(255, 255, 255, .26); }
.ag-ttl { width: 2.6cqw; height: 2.6cqw; min-width: 24px; min-height: 24px; flex: none; margin-left: auto; transform: rotate(-90deg); opacity: 0; transition: opacity .3s; }
.ag-ttl circle { fill: none; stroke-width: 4; }
.ag-ttl .t { stroke: rgba(255, 255, 255, .25); }
.ag-ttl .v { stroke: #fff; stroke-dasharray: 100; stroke-dashoffset: 0; stroke-linecap: round; }
.ag-n--cloud.has-ttl .ag-ttl { opacity: 1; }

/* Агент */
.ag-n--agent { width: 15cqw; flex-direction: column; gap: .3cqw; padding: 1cqw; text-align: center; border-color: #c9d5f3; border-width: 1.5px; }
.ag-n--agent small { white-space: normal; }
.ag-pc { position: relative; width: 9.5cqw; height: 4.6cqw; margin-bottom: .4cqw; border-radius: .9cqw; background: linear-gradient(180deg, #34363c, #1f2024); box-shadow: inset 0 0 0 1px #45474e, 0 .6cqw 1.4cqw rgba(20, 20, 19, .25); }
.ag-pc-top { position: absolute; left: .9cqw; top: .9cqw; display: flex; gap: .35cqw; }
.ag-pc-top i { width: 1.6cqw; height: .32cqw; border-radius: 9px; background: #4a4d55; }
.ag-pc-led { position: absolute; right: 1cqw; top: .8cqw; width: .6cqw; height: .6cqw; min-width: 5px; min-height: 5px; border-radius: 50%; background: #4a4d55; transition: background .3s, box-shadow .3s; }
.ag-n--agent:not([data-st='off']) .ag-pc-led { background: #3ddc84; box-shadow: 0 0 .8cqw #3ddc84; animation: ag-blink 2.4s infinite; }
.ag-n--agent[data-st='wait'] .ag-pc-led { background: var(--ag-amber); box-shadow: 0 0 .8cqw var(--ag-amber); animation-duration: .5s; }
@keyframes ag-blink { 0%, 86%, 100% { opacity: 1; } 90% { opacity: .2; } }
.ag-pc-bar { position: absolute; left: .9cqw; right: .9cqw; bottom: .8cqw; height: .4cqw; border-radius: 9px; background: #3a3c42; overflow: hidden; }
.ag-pc-bar i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, #5b82ec, #3ddc84); border-radius: inherit; }
.ag-n--agent.is-beat { animation: ag-beat .5s var(--ag-ease); }
@keyframes ag-beat { 30% { box-shadow: 0 0 0 .7cqw rgba(34, 163, 90, .16); } }

/* Створка: две половинки */
.ag-flaps { position: relative; margin-left: auto; width: 3cqw; height: 2.4cqw; flex: none; display: flex; justify-content: space-between; }
.ag-flaps::before, .ag-flaps::after { content: ''; width: .45cqw; height: 100%; border-radius: 3px; background: #c9ccd3; }
.ag-flaps i { position: absolute; top: 18%; width: 1cqw; height: 64%; border-radius: 3px; background: rgba(91, 130, 236, .45); border: 1px solid var(--ag-blue-2); transition: transform .45s var(--ag-ease); }
.ag-flaps i:first-child { left: .45cqw; transform-origin: left center; }
.ag-flaps i:last-child { right: .45cqw; transform-origin: right center; }
.ag-n--gate[data-st='ok'] .ag-flaps i:first-child { transform: scaleX(.12); }
.ag-n--gate[data-st='ok'] .ag-flaps i:last-child { transform: scaleX(.12); }

/* Эквалайзер колонок */
.ag-eq { margin-left: auto; display: flex; align-items: flex-end; gap: 2px; height: 2cqw; flex: none; }
.ag-eq i { width: .32cqw; min-width: 2px; height: 100%; border-radius: 2px; background: var(--ag-ok); transform-origin: bottom; animation: ag-eq .9s ease-in-out infinite alternate; animation-delay: calc(var(--k) * -.17s); }
@keyframes ag-eq { 0% { transform: scaleY(.25); } 100% { transform: scaleY(1); } }
.ag-n--spk[data-st='off'] .ag-eq i { animation: none; transform: scaleY(.2); }

/* Каналы реле */
.ag-chs { margin-left: auto; display: grid; grid-template-columns: repeat(4, .65cqw); gap: .25cqw; flex: none; }
.ag-n--usb .ag-chs { grid-template-columns: repeat(2, .65cqw); }
.ag-chs i { width: .65cqw; height: .65cqw; min-width: 5px; min-height: 5px; border-radius: 2px; background: #d7dcea; transition: background .15s, box-shadow .15s; }
.ag-chs i.on { background: var(--ag-ok); box-shadow: 0 0 .6cqw rgba(34, 163, 90, .8); }

/* ── Журнал агента ── */
.ag-log {
    position: absolute; z-index: 3; left: 41%; top: 68.6%; width: 19.6%; height: 28%;
    display: flex; flex-direction: column; border-radius: 12px; overflow: hidden;
    background: #14161c; color: #d8dce6; box-shadow: 0 16px 40px rgba(20, 20, 19, .22); font: 11px/1.45 var(--ag-mono);
}
.ag-log-h { display: flex; align-items: center; gap: 6px; padding: 7px 10px; background: #1d2028; color: #9aa3b8; font-size: 10.5px; letter-spacing: .02em; }
.ag-log-h span { margin-left: auto; display: flex; gap: 4px; }
.ag-log-h span i { width: 6px; height: 6px; border-radius: 50%; background: #3a3e4a; }
.ag-log ol { -webkit-mask-image: linear-gradient(transparent, #000 26px); mask-image: linear-gradient(transparent, #000 26px); flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; padding: 8px 10px; overflow: hidden; }
.ag-log li { display: flex; gap: 7px; animation: ag-line .35s var(--ag-ease); }
.ag-log time { color: #5f6a83; flex: none; }
.ag-log li span { min-width: 0; }
.ag-log li[data-t='ok'] span { color: #6ee7a0; }
.ag-log li[data-t='bad'] span { color: #ff8f8f; }
.ag-log li[data-t='warn'] span { color: #ffc773; }
.ag-log li[data-t='info'] span { color: #9db7ff; }
.ag-log li[data-t='sep'] { color: #5f6a83; }
.ag-log li[data-t='sep'] time { display: none; }
@keyframes ag-line { from { opacity: 0; transform: translateY(6px); } }

/* ── Управление шагами ── */
.ag-ctl { display: flex; align-items: stretch; gap: 16px; margin-top: 18px; }
.ag-steps { flex: 1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.ag-steps button { position: relative; width: 100%; height: 100%; display: flex; gap: 10px; align-items: flex-start; text-align: left; padding: 11px 12px 14px; border-radius: 12px; border: 1px solid var(--line-card); background: #fff; transition: border-color .2s, background .2s; overflow: hidden; }
.ag-steps button:hover { border-color: #c9d5f3; }
.ag-st-n { font: 600 12px/1.6 var(--ag-mono); color: var(--ph); }
.ag-st-t { display: flex; flex-direction: column; min-width: 0; }
.ag-st-t b { font-size: 14px; font-weight: 600; }
.ag-st-t small { font-size: 12.5px; color: var(--muted); line-height: 1.35; margin-top: 2px; }
.ag-st-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: transparent; }
.ag-st-bar i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: var(--ag-blue); }
.ag-steps li.is-on button { border-color: var(--ag-blue); background: var(--accent-soft); }
.ag-steps li.is-on .ag-st-n { color: var(--ag-blue); }
.ag-steps li.is-done .ag-st-bar i { transform: scaleX(1); background: #c9d5f3; }
.ag-ctl-btns { display: flex; flex-direction: column; gap: 8px; }

/* ── Мини-виджеты ── */
.agf-grid { margin-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.agf-card { border: 1px solid var(--line-card); border-radius: 16px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.agf-card > h3 { display: flex; align-items: center; gap: 9px; font-size: 18px; font-weight: 600; letter-spacing: -.01em; margin: 20px 22px 8px; }
.agf-card > h3 .i { color: var(--accent); }
.agf-card > p { font-size: 15px; line-height: 1.5; color: var(--ink-2); margin: 0 22px 22px; }
.agf-vis {
    position: relative; height: 210px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 18px; overflow: hidden; border-bottom: 1px solid #e6ebf6;
    background-color: var(--ag-paper);
    background-image: linear-gradient(var(--ag-gridc) 1px, transparent 1px), linear-gradient(90deg, var(--ag-gridc) 1px, transparent 1px);
    background-size: 16px 16px; font-size: 12px;
}

/* Реле */
.agf-relay { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; width: 100%; max-width: 330px; }
.agf-ch { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 7px 8px; border-radius: 9px; background: #fff; border: 1px solid #e0e6f3; transition: border-color .2s, box-shadow .2s; }
.agf-ch i { position: absolute; right: 7px; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: #d7dcea; transition: background .15s, box-shadow .15s; }
.agf-ch b { font: 600 11px var(--ag-mono); color: var(--ph); }
.agf-ch small { font-size: 10.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agf-ch[data-on] i { background: var(--ag-ok); box-shadow: 0 0 8px rgba(34, 163, 90, .8); }
.agf-ch.is-sel { border-color: var(--ag-blue); box-shadow: 0 0 0 3px rgba(47, 91, 216, .12); }
.agf-rbtns { display: flex; gap: 6px; }
.agf-rbtns span { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 7px; background: #fff; border: 1px solid #dfe5f3; font-size: 11.5px; font-weight: 500; transition: background .15s, color .15s, transform .15s; }
.agf-rbtns span.is-press { background: var(--ag-blue); color: #fff; border-color: var(--ag-blue); transform: scale(.95); }

/* Шаги действия */
.agf-seq { position: relative; width: 100%; max-width: 330px; display: flex; flex-direction: column; gap: 8px; }
.agf-seq-r { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 8px; }
.agf-seq-r small { font: 500 10.5px var(--ag-mono); color: var(--muted); }
.agf-seq-t { position: relative; height: 22px; border-radius: 6px; background: #fff; border: 1px solid #e0e6f3; overflow: hidden; }
.agf-seq-t i { position: absolute; top: 3px; bottom: 3px; left: var(--a); right: calc(100% - var(--b)); border-radius: 4px; background: linear-gradient(90deg, #5b82ec, #2f5bd8); }
.agf-head { position: absolute; top: -4px; bottom: -4px; left: 78px; width: 2px; background: var(--ag-bad); border-radius: 2px; box-shadow: 0 0 6px rgba(214, 69, 69, .6); animation: agf-sweep 3.4s linear infinite; }
@keyframes agf-sweep { from { transform: translateX(0); } to { transform: translateX(calc(min(330px, 100%) - 80px)); } }
.agf-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.agf-legend span { padding: 3px 8px; border-radius: 999px; background: #fff; border: 1px solid #e0e6f3; font-size: 11px; color: var(--ink-2); }
.agf-legend span[data-k='1'] { border-style: dashed; color: var(--muted); }

/* Музыка без интернета */
.agf-off { width: 100%; max-width: 330px; display: flex; flex-direction: column; gap: 10px; }
.agf-off-top { display: flex; justify-content: space-between; gap: 6px; }
.agf-nonet, .agf-disk { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; font-size: 11px; font-weight: 500; white-space: nowrap; }
.agf-nonet { background: var(--bad-soft); color: var(--bad); }
.agf-disk { background: var(--ok-soft); color: var(--ok); }
.agf-wave { height: 54px; display: flex; align-items: center; gap: 3px; }
.agf-wave i { flex: 1; height: var(--h); border-radius: 3px; background: linear-gradient(180deg, #5b82ec, #2f5bd8); animation: agf-wave 1.3s ease-in-out infinite alternate; animation-delay: calc(var(--k) * -.09s); }
@keyframes agf-wave { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
.agf-tracks { display: flex; flex-direction: column; gap: 3px; }
.agf-tracks li { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 7px; font-size: 11.5px; color: var(--muted); }
.agf-tracks li.is-now { background: #fff; color: var(--ink); font-weight: 500; box-shadow: 0 1px 3px rgba(29, 61, 153, .1); }
.agf-tracks li.is-now .i { color: var(--ag-ok); }

/* Огибающая громкости */
.agf-duck { position: relative; width: 100%; max-width: 330px; height: 118px; }
.agf-duck > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.agf-duck-a { fill: rgba(91, 130, 236, .14); }
.agf-duck-l { fill: none; stroke: var(--ag-blue); stroke-width: 2.2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.agf-duck-ann { fill: var(--ag-amber); opacity: .85; }
.agf-duck-m, .agf-duck-b { position: absolute; display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; white-space: nowrap; }
.agf-duck-m { left: 6px; top: 6px; color: var(--ag-blue); font-weight: 500; }
.agf-duck-b { left: 50%; top: 2px; transform: translateX(-35%); padding: 4px 8px; border-radius: 7px; background: #fff; color: var(--warn); box-shadow: 0 2px 8px rgba(20, 20, 19, .1); }
.agf-duck-p { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--ink); opacity: .55; animation: agf-play 4.4s linear infinite; }
@keyframes agf-play { from { left: 0; } to { left: 100%; } }
.agf-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.agf-chips span { padding: 3px 9px; border-radius: 999px; background: #fff; border: 1px solid #e0e6f3; font-size: 11px; color: var(--ink-2); }

/* Голос оператора */
.agf-voice { position: relative; width: 100%; max-width: 330px; display: grid; grid-template-columns: auto 1fr; grid-template-areas: 'gong wave' 'air air' 'ph ph' 'lvl lvl'; align-items: center; gap: 8px 12px; }
.agf-gong { grid-area: gong; position: relative; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--warn); box-shadow: 0 2px 8px rgba(20, 20, 19, .1); }
.agf-gong small { display: none; }
.agf-gong i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--ag-amber); opacity: 0; animation: agf-ring 2.6s ease-out infinite; }
.agf-gong i:nth-child(2) { animation-delay: .25s; } .agf-gong i:nth-child(3) { animation-delay: .5s; }
@keyframes agf-ring { 0% { transform: scale(1); opacity: .7; } 40%, 100% { transform: scale(1.9); opacity: 0; } }
.agf-vwave { grid-area: wave; height: 44px; display: flex; align-items: center; gap: 3px; }
.agf-vwave i { flex: 1; height: 100%; border-radius: 3px; background: var(--ag-ok); transform: scaleY(.12); animation: agf-voice 2.6s ease-in-out infinite; animation-delay: calc(var(--k) * .05s); }
@keyframes agf-voice { 0%, 30% { transform: scaleY(.1); } 45% { transform: scaleY(.9); } 55% { transform: scaleY(.35); } 65% { transform: scaleY(.75); } 78% { transform: scaleY(.5); } 90%, 100% { transform: scaleY(.1); } }
.agf-onair { grid-area: air; justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 3px 9px; border-radius: 999px; background: var(--bad-soft); color: var(--bad); font-size: 11px; font-weight: 600; }
.agf-onair i { width: 6px; height: 6px; border-radius: 50%; background: var(--ag-bad); animation: ag-blink 1s infinite; }
.agf-phrase { grid-area: ph; font-size: 12px; color: var(--ink); }
.agf-mlevel { grid-area: lvl; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; }
.agf-mlevel > span { flex: 1; height: 5px; border-radius: 9px; background: #e2e7f3; overflow: hidden; }
.agf-mlevel > span i { display: block; height: 100%; width: 100%; background: var(--ag-blue); border-radius: inherit; transform-origin: left; animation: agf-lvl 2.6s ease-in-out infinite; }
@keyframes agf-lvl { 0%, 20% { transform: scaleX(.75); } 32%, 88% { transform: scaleX(.2); } 100% { transform: scaleX(.75); } }

/* Экран клуба */
.agf-mon { display: flex; flex-direction: column; align-items: center; }
.agf-mon-scr { position: relative; width: 210px; height: 118px; border-radius: 8px; border: 6px solid #1f2024; background: linear-gradient(160deg, #eef3ff, #fff); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-align: center; overflow: hidden; transition: filter .3s; }
.agf-mon-ico { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--ag-ok); color: #fff; margin-bottom: 3px; animation: ag-ping 1.6s infinite; }
.agf-mon-scr b { font-size: 11.5px; font-weight: 600; padding: 0 8px; }
.agf-mon-scr small { font-size: 10px; color: var(--muted); }
.agf-mon-leg { width: 46px; height: 12px; background: linear-gradient(#2a2b30, #1f2024); clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%); }
.agf-flash { position: absolute; inset: 0; background: #fff; opacity: 0; }
.agf-shot { position: absolute; right: 6px; bottom: 6px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 6px; background: var(--ink); color: #fff; font-size: 9.5px; opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s; }
.agf-mon.is-shot .agf-flash { animation: agf-flash .5s ease-out; }
.agf-mon.is-shot .agf-shot { opacity: 1; transform: none; }
.agf-mon.is-reload .agf-mon-scr > :not(.agf-flash):not(.agf-shot) { animation: agf-reload .7s ease; }
.agf-mon.is-dark .agf-mon-scr { filter: brightness(.08); }
@keyframes agf-flash { 0% { opacity: .95; } 100% { opacity: 0; } }
@keyframes agf-reload { 0% { opacity: 1; } 35% { opacity: 0; transform: translateY(4px); } 100% { opacity: 1; } }
.agf-sbtns { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.agf-sbtns span { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 7px; background: #fff; border: 1px solid #dfe5f3; font-size: 11px; transition: background .15s, color .15s; }
.agf-sbtns span.is-press { background: var(--ag-blue); color: #fff; border-color: var(--ag-blue); }

/* Пульс */
.agf-pulse { width: 100%; max-width: 330px; }
.agf-pulse svg { width: 100%; height: 50px; display: block; }
.agf-ecg-b { fill: none; stroke: rgba(34, 163, 90, .18); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.agf-ecg { fill: none; stroke: var(--ag-ok); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 110 420; animation: agf-ecg 3s linear infinite; }
@keyframes agf-ecg { from { stroke-dashoffset: 530; } to { stroke-dashoffset: 0; } }
.agf-pl { display: flex; justify-content: space-between; align-items: center; margin: 4px 0 8px; font-size: 11.5px; }
.agf-pl span { display: inline-flex; align-items: center; gap: 6px; color: var(--ok); font-weight: 500; }
.agf-pl span i { width: 6px; height: 6px; border-radius: 50%; background: var(--ag-ok); animation: ag-ping 1.6s infinite; }
.agf-pl b { font: 600 12px var(--ag-mono); color: var(--ink-2); }
.agf-pulse dl { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; margin: 0; }
.agf-pulse dl div { display: flex; justify-content: space-between; gap: 6px; padding: 4px 8px; border-radius: 7px; background: #fff; font-size: 11px; }
.agf-pulse dt { color: var(--muted); }
.agf-pulse dd { margin: 0; font-weight: 500; white-space: nowrap; }

/* Переход галочкой */
.agf-sw { width: 100%; max-width: 330px; display: flex; flex-direction: column; gap: 16px; }
.agf-tg { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 10px; background: #fff; border: 1px solid #dfe5f3; font-size: 12.5px; font-weight: 500; }
.agf-box { width: 18px; height: 18px; flex: none; display: grid; place-items: center; border-radius: 5px; border: 1.5px solid #c3cbe0; color: transparent; transition: background .2s, border-color .2s, color .2s; }
.agf-sw.is-on .agf-box { background: var(--ag-blue); border-color: var(--ag-blue); color: #fff; }
.agf-route { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 8px; }
.agf-rt-gate { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: var(--ink); color: #fff; }
.agf-rt-lines { position: relative; height: 38px; }
.agf-rt-lines i { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: #d3d9e8; transition: background .3s; }
.agf-rt-lines i.a { top: 8px; } .agf-rt-lines i.b { bottom: 8px; }
.agf-rt-lines i::after { content: ''; position: absolute; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: inherit; opacity: 0; }
.agf-sw.is-on .agf-rt-lines i.a, .agf-sw:not(.is-on) .agf-rt-lines i.b { background: var(--ag-blue); }
.agf-sw.is-on .agf-rt-lines i.a::after, .agf-sw:not(.is-on) .agf-rt-lines i.b::after { opacity: 1; animation: agf-dot 1.2s linear infinite; }
@keyframes agf-dot { from { right: 0; } to { right: 100%; } }
.agf-rt-src { display: flex; flex-direction: column; gap: 6px; }
.agf-rt-src span { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 7px; font-size: 11px; background: #fff; color: var(--muted); border: 1px solid #e0e6f3; transition: color .3s, border-color .3s; white-space: nowrap; }
.agf-sw.is-on .agf-rt-src .a, .agf-sw:not(.is-on) .agf-rt-src .b { color: var(--ag-blue); border-color: var(--ag-blue); font-weight: 500; }

/* Без открытых портов */
.agf-tok { width: 100%; max-width: 330px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.agf-ports { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.agf-ports span { display: flex; align-items: center; gap: 5px; padding: 8px 10px; border-radius: 10px; background: #fff; border: 1px solid #e0e6f3; font-size: 11.5px; color: var(--ink-2); }
.agf-ports b { margin-left: auto; font: 600 11px var(--ag-mono); }
.agf-ports .in { border-color: #f1caca; } .agf-ports .in b, .agf-ports .in .i { color: var(--bad); }
.agf-ports .out { border-color: #bfe3cc; } .agf-ports .out b, .agf-ports .out .i { color: var(--ok); }
.agf-ports .out .i { animation: agf-up 1.2s ease-in-out infinite; }
@keyframes agf-up { 50% { transform: translateY(-3px); } }
.agf-key { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: #14161c; color: #9db7ff; }
.agf-key code { font: 600 13px var(--ag-mono); letter-spacing: .04em; color: #e8ecf5; }
.agf-renew { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--accent); font-weight: 500; }
.agf-tok.is-roll .agf-renew .i { animation: agf-spin .8s linear; }
@keyframes agf-spin { to { transform: rotate(360deg); } }

/* ── Адаптив ── */
@media (max-width: 1180px) {
    .ag-log { position: static; width: auto; height: 172px; margin: 0 14px 14px; }
    .ag-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .agf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .ag-ecg { display: none; }
    .ag-ctl { flex-direction: column; }
    .ag-ctl-btns { flex-direction: row; }
}
@media (max-width: 760px) {
    .ag-stage { aspect-ratio: 420 / 840; }
    .ag-svg--wide { display: none; } .ag-svg--tall { display: block; }
    .ag-n { left: var(--tx); top: var(--ty); width: 36cqw; gap: 2cqw; padding: 2.1cqw 2.4cqw; border-radius: 3cqw; font-size: 3.1cqw; }
    .ag-n small { font-size: 2.6cqw; }
    .ag-ico { width: 7.2cqw; height: 7.2cqw; border-radius: 2cqw; }
    .ag-ico .i { width: 4cqw; height: 4cqw; }
    .ag-n--face, .ag-n--cam { width: 27cqw; }
    .ag-n--face .ag-ico, .ag-n--cam .ag-ico { display: none; }
    .ag-n--cloud { width: 52cqw; padding: 2.4cqw 3cqw; border-radius: 3.6cqw; }
    .ag-n--agent { width: 44cqw; gap: .8cqw; padding: 2.6cqw; }
    .ag-pc { width: 26cqw; height: 12cqw; border-radius: 2.4cqw; margin-bottom: 1cqw; }
    .ag-pc-top { left: 2.4cqw; top: 2.4cqw; gap: 1cqw; } .ag-pc-top i { width: 4.4cqw; height: .9cqw; }
    .ag-pc-led { right: 2.6cqw; top: 2.2cqw; width: 1.6cqw; height: 1.6cqw; }
    .ag-pc-bar { left: 2.4cqw; right: 2.4cqw; bottom: 2.2cqw; height: 1.1cqw; }
    .ag-ttl { width: 7cqw; height: 7cqw; }
    .ag-flaps { width: 7cqw; height: 6cqw; } .ag-flaps::before, .ag-flaps::after { width: 1.2cqw; } .ag-flaps i { width: 2.6cqw; } .ag-flaps i:first-child { left: 1.2cqw; } .ag-flaps i:last-child { right: 1.2cqw; }
    .ag-n--spk { padding-right: 7.5cqw; }
    .ag-eq { position: absolute; right: 2.2cqw; top: 2.2cqw; height: 4cqw; } .ag-eq i { width: .8cqw; }
    .ag-chs { grid-template-columns: repeat(4, 1.6cqw); gap: .7cqw; } .ag-n--usb .ag-chs { grid-template-columns: repeat(2, 1.6cqw); } .ag-chs i { width: 1.6cqw; height: 1.6cqw; }
    .ag-uplink { left: var(--tx); top: var(--ty); font-size: 2.5cqw; transform: translate(8px, -50%); white-space: normal; max-width: 42cqw; line-height: 1.25; }
    .ag-n--net .ag-chs { display: none; }
    .ag-direct { display: none; }
    .ag-log { height: 168px; margin: 0 10px 10px; font-size: 10.5px; }
    .ag-bar { padding: 0 12px; gap: 10px; }
    .ag-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
    .ag-steps button { padding: 9px 10px 12px; gap: 8px; }
    .ag-st-t b { font-size: 13.5px; } .ag-st-t small { font-size: 12px; }
    .agf-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
    .ag-crumb > i, .ag-crumb > span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .ag *, .agf * { animation: none !important; transition: none !important; }
}