.hero-agents{margin-bottom:30px}
.brand-mark{width:38px;height:38px;flex:0 0 auto;object-fit:cover;border-radius:12px;border:1px solid #1d4b73;filter:drop-shadow(0 0 7px #46d8ff77);transition:filter .15s}
.brand:hover .brand-mark{filter:drop-shadow(0 0 11px #5df08fcc)}
.brand span{font-weight:700;letter-spacing:.3px}
.tag{white-space:nowrap}
/* Agent tree: a living tree at night, agents are bulbs on the branches. */
.agent-tree{position:relative;isolation:isolate;background:var(--eye-base,#010703);border:1px solid #0f5a2a;border-radius:16px;padding:20px 20px 8px;margin-bottom:24px;box-shadow:inset 0 0 80px #000,0 0 24px #0f5a2a55}
/* Matrix rain: a canvas behind the tree (agents.js); content stays above it. */
.agent-tree .matrix-rain{position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none}
.agent-tree>*:not(.matrix-rain){position:relative;z-index:1}
.tree-hud{background:#010703cc;border-radius:10px;padding:6px 8px}
.tree-hud{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.tree-title{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px;font-weight:800;letter-spacing:3px;color:#7dffa6;text-shadow:0 0 8px #2bff7a99}
.tree-counters{display:flex;gap:14px;margin-top:8px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:#c9e6f3;flex-wrap:wrap}
.tree-counters .green{color:#6cf3a2}.tree-counters .red{color:#ff8a7c}
.tree-live{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:1px;color:#6cf3a2;background:#010703cc;border:1px solid #0f5a2a;border-radius:8px;padding:8px 10px;white-space:nowrap}
.tree-live[data-state="unknown"]{color:#ff9d92;border-color:#8c342d}
/* Интерактивная карта (Robert, 8 Oct 2026): двигаем и масштабируем внутри svg, нативной прокрутки нет. */
#agent-tree-canvas{overflow:hidden;position:relative;margin-top:8px;overscroll-behavior:contain;max-width:100%;min-width:0;touch-action:none}
.agent-tree{max-width:100%;min-width:0;box-sizing:border-box;overflow:hidden}
#agent-tree-canvas svg{display:block;max-width:none;margin:0 auto;will-change:transform;cursor:grab;touch-action:none}   /* own layer: the moving background never repaints the tree */
#agent-tree-canvas svg.grabbing{cursor:grabbing}
.eye-viewport{transform-origin:0 0}
/* Кнопки масштаба поверх карты */
.eye-zoom{position:absolute;right:10px;bottom:10px;z-index:3;display:flex;flex-direction:column;gap:6px}
.eye-zoom button{width:34px;height:34px;display:flex;align-items:center;justify-content:center;font-size:18px;line-height:1;color:#d7ffe6;background:#02110999;border:1px solid #0f5a2a;border-radius:9px;cursor:pointer;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);transition:background .15s,border-color .15s}
.eye-zoom button:hover{background:#06341ccc;border-color:#2bff7a}
.eye-zoom button:active{transform:translateY(1px)}
.eye-zoom button:focus-visible{outline:2px solid #2bff7a;outline-offset:2px}
#agent-tree-status{font-size:12px;color:#c9e6f3}#agent-tree-status:empty{display:none}
.agent-tree .trunk{fill:url(#tree-bark);stroke:#2bff7a;stroke-width:1.2}
.agent-tree .root{fill:none;stroke:#0d4a22;stroke-width:7;stroke-linecap:round}
.agent-tree .limb{fill:none;stroke:#11592a;stroke-linecap:round}
.agent-tree .limb.bough{stroke-width:7}
.agent-tree .limb.branch{stroke-width:11;stroke:#0f5228}
.agent-tree .limb.twig{stroke-width:4;stroke:#167a39}
.agent-tree .leaf{stroke:#7dffa6;stroke-width:.6;opacity:.85}
.agent-tree .leaf.shade0{fill:#0e7a35}.agent-tree .leaf.shade1{fill:#16a34a}.agent-tree .leaf.shade2{fill:#22c55e}
/* No foliage sway: animating the whole SVG repaints it every frame; the Matrix rain gives the motion. */
.agent-tree .bulb{cursor:pointer;outline:none}
.agent-tree .bulb .hit{fill:transparent}
.agent-tree .bulb .cap{fill:#8f9aa0;stroke:#2b3438;stroke-width:1}
.agent-tree .bulb .glass{stroke:#000;stroke-width:2.5;transition:filter .3s}
.agent-tree .bulb .glint{fill:#fff;opacity:.85;pointer-events:none}
.agent-tree .bulb.on .glass{stroke:#ecfff1;stroke-width:3;filter:drop-shadow(0 0 10px #b9ffd0) drop-shadow(0 0 24px #2fd17a)}
/* Pulse in steps from the rain loop (agents.js toggles .pulse ~1.4×/s; none when idle): a CSS animation would repaint the whole SVG 60×/s. */
.agent-tree .bulb.on .halo{opacity:.6}
.agent-tree svg.pulse .bulb.on .halo{opacity:1}
.agent-tree .bulb.off .glass,.agent-tree .bulb.error .glass{stroke:#1a0000;filter:drop-shadow(0 0 4px #000) drop-shadow(0 0 9px #ff3b2f)}
.agent-tree .bulb.wait .glass{filter:drop-shadow(0 0 9px #f6d35b)}
.agent-tree .bulb .error-mark{text-anchor:middle;font:900 15px ui-sans-serif,system-ui,sans-serif;fill:#fff;pointer-events:none}
.agent-tree .bulb-label{text-anchor:middle;font:600 12px ui-sans-serif,system-ui,sans-serif;fill:#f0fff4;paint-order:stroke;stroke:#000;stroke-width:4px;pointer-events:none}
.agent-tree .bulb-label.core{font-size:15px;font-weight:800}
.agent-tree svg.compact .bulb-label{font-size:14px}.agent-tree svg.compact .bulb-label.core{font-size:17px}
.agent-tree .bulb.on .bulb-label{fill:#b9ffd0}
.agent-tree .bulb.off .bulb-label,.agent-tree .bulb.error .bulb-label{fill:#ffd2cc}
.agent-tree .bulb.selected .glass,.agent-tree .bulb:focus-visible .glass{stroke:#fff;stroke-width:3}
.agent-tree .bulb:hover .glass{stroke:#fff}
.tree-tip{position:absolute;z-index:5;background:#fafbf7;color:#202d29;border:1px solid #e1e6df;border-radius:12px;padding:12px 14px;box-shadow:0 10px 30px #0008;font-size:14px;line-height:1.4}
.tree-tip strong{display:block;font-size:15px;margin-bottom:2px}
.tree-tip-meta{font-size:12px;color:#55645c;margin-bottom:6px}
.tree-tip-duty{margin:0 0 10px}
.tree-tip-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12px;color:#728077}
.tree-tip-actions button{background:#2c6045;color:#fff;border:0;border-radius:9px;padding:9px 14px;font-weight:700;cursor:pointer;min-height:40px}

.drawer-dubbing .hero h1{font-size:28px;letter-spacing:-0.5px}
.drawer-dubbing .hero p{font-size:13px}
.drawer-dubbing .workspace{grid-template-columns:1fr}
.drawer-dubbing .activity{position:static}
@media(max-width:820px){.agent-tree{padding:14px 8px 4px}.tree-live{display:none}}
/* Eye (since 5 Oct 2026): Robert's photo; the pupil is the main agent, glowing threads run to the agents. */
#agent-tree-canvas svg.eye .eye-photo{opacity:.92}
.agent-tree .eye-thread{fill:none;stroke:#2bff7a;stroke-linecap:round;opacity:.28;stroke-width:1.4}
.agent-tree .eye-thread.root{stroke-width:2}
.agent-tree .eye-thread.live{opacity:.95;stroke:#9dffc0;filter:drop-shadow(0 0 4px #2bff7a)}
.agent-tree .eye-pulse{fill:#eafff1;filter:drop-shadow(0 0 5px #5dff9a);pointer-events:none}
.agent-tree .bulb.core .hit{fill:transparent}
.agent-tree .pupil-glow{opacity:.75;transition:opacity .35s}
.agent-tree svg.pulse .bulb.core.on .pupil-glow,.agent-tree svg.pulse .bulb.core.off .pupil-glow{opacity:1}
.agent-tree .pupil-ring{fill:none;stroke:#eafff1;stroke-width:2;opacity:.75}
.agent-tree .bulb.core.off .pupil-ring{stroke:#ffd2cc}
.agent-tree .pupil-core{fill:#f4fff8}
.agent-tree .bulb.core.off .pupil-core{fill:#ffe2dc}
.agent-tree .bulb.core.selected .pupil-ring,.agent-tree .bulb.core:focus-visible .pupil-ring{stroke:#fff;stroke-width:3.5;opacity:1}
.agent-tree .bulb.more .glass{fill:#03200d;stroke:#7dffa6;stroke-width:2}
.agent-tree .bulb.more.on .glass{fill:#0d5a28}
.agent-tree .more-mark{text-anchor:middle;font:800 12px ui-sans-serif,system-ui,sans-serif;fill:#eafff1;pointer-events:none}
.agent-tree svg.compact .more-mark{font-size:14px}
.agent-tree .bulb-label.core{font-size:17px}
.eye-more-list{display:flex;flex-direction:column;gap:4px;margin-top:8px;max-height:260px;overflow:auto}
.eye-more-item{display:flex;align-items:center;gap:8px;min-height:40px;padding:6px 10px;border:1px solid #e1e6df;border-radius:9px;background:#fff;color:#202d29;font:inherit;text-align:left;cursor:pointer}
.eye-more-item .eye-dot{flex:0 0 10px;height:10px;border-radius:50%;background:#e8685a}
.eye-more-item.on .eye-dot{background:#1fbf5f}.eye-more-item.wait .eye-dot{background:#f6d35b}

/* «Око сети» follows the «Матрица» palette: hue shift from agents.js (--eye-hue); bulbs keep red/green state colours. */
#agent-tree-canvas svg.eye .eye-photo,#agent-tree-canvas svg.eye .eye-threads,#agent-tree-canvas svg.eye .eye-pupil{filter:hue-rotate(var(--eye-hue,0deg))}
.agent-tree{border-color:color-mix(in srgb,var(--mx-accent,#0f5a2a) 45%,#000);box-shadow:inset 0 0 80px #000,0 0 24px color-mix(in srgb,var(--mx-accent,#0f5a2a) 35%,transparent)}

/* Work areas (Robert, 7 Oct 2026): who works on what — tag under the bulb, dashed arc between agents of one area, legend. */
.agent-tree{--area-youtube:#4fc3ff;--area-web:#c792ff;--area-vps2:#ffb347;--area-social:#ff7fbf}
.agent-tree .area-youtube{--area:var(--area-youtube)}.agent-tree .area-web{--area:var(--area-web)}.agent-tree .area-vps2{--area:var(--area-vps2)}.agent-tree .area-social{--area:var(--area-social)}
.agent-tree .eye-area-chain{stroke:var(--area);stroke-width:2.5;stroke-dasharray:6 5;stroke-linecap:round;opacity:.9;filter:drop-shadow(0 0 3px var(--area));pointer-events:none}
.agent-tree .area-ring{fill:none;stroke:var(--area);stroke-width:2.5;opacity:.95;filter:drop-shadow(0 0 4px var(--area))}
.agent-tree .bulb-area{text-anchor:middle;font:700 11px ui-sans-serif,system-ui,sans-serif;fill:var(--area);paint-order:stroke;stroke:#000;stroke-width:4px;pointer-events:none}
.agent-tree svg.compact .bulb-area{font-size:13px}
.eye-areas{display:flex;flex-wrap:wrap;gap:6px 10px;margin:4px 0 8px;font:600 12px ui-sans-serif,system-ui,sans-serif}
.eye-area-chip{padding:3px 9px;border:1px solid var(--area);border-radius:999px;color:#eafff1;background:#000a}
.eye-area-chip b{color:var(--area)}
.tree-tip-work{font-size:12px;color:#20302a;margin-bottom:6px;padding-left:8px;border-left:3px solid var(--area,#8a9a92)}
.tree-tip-work.area-youtube{--area:#1a8fc4}.tree-tip-work.area-web{--area:#8a4fd6}.tree-tip-work.area-vps2{--area:#d68a1a}.tree-tip-work.area-social{--area:#d64f92}
/* Доступ к серверу 2 (VPS2, сеть Леонида): значок-мост на кружке + строка легенды */
.agent-tree .vps2-badge{pointer-events:none}
.agent-tree .vps2-badge-dot{fill:var(--area-vps2);stroke:#1a0f00;stroke-width:1.2;filter:drop-shadow(0 0 3px var(--area-vps2))}
.agent-tree .vps2-badge-mark{text-anchor:middle;font:800 9px ui-sans-serif,system-ui,sans-serif;fill:#1a0f00}
.agent-tree svg.compact .vps2-badge-mark{font-size:10px}
.eye-area-chip.vps2-access{--area:var(--area-vps2);border-style:dashed}
.agent-tree .bulb.far .glass{filter:blur(.6px) saturate(.75)}