/* ART DEVOPS — INTERACTIVE DEMO */
.ad-lab,.ad-lab *{box-sizing:border-box}
.ad-lab{
position:relative;padding:100px 0;
border-bottom:1px solid var(--border-glass)}
.ad-lab .ad-lab-intro{
max-width:680px;margin:18px auto 0;
color:var(--text-muted);font:16px/1.8 var(--font-body)}
.ad-lab .ad-lab-shell{
min-width:0;padding:clamp(20px,3vw,36px);
background:var(--bg-card);border:1px solid var(--border-glass);
border-radius:26px}
.ad-lab .ad-lab-toolbar{
display:flex;align-items:center;justify-content:space-between;
flex-wrap:wrap;gap:14px;margin-bottom:24px}
.ad-lab .ad-lab-demo{
display:inline-flex;align-items:center;gap:9px;
color:var(--text-muted);font:11px/1.7 var(--font-mono)}
.ad-lab .ad-lab-demo i{color:var(--neon-accent)}
.ad-lab .ad-lab-reset{
display:inline-flex;align-items:center;gap:8px;padding:9px 12px;
background:transparent;color:var(--text-pure);
border:1px solid var(--border-glass);border-radius:10px;
font:12px/1.5 var(--font-body);cursor:pointer}
.ad-lab .ad-lab-controls{
display:flex;flex-wrap:wrap;gap:12px;margin-bottom:30px}
.ad-lab .ad-lab-button{
display:inline-flex;align-items:center;justify-content:center;gap:9px;
min-height:48px;padding:12px 18px;
background:var(--bg-surface,var(--bg-main));color:var(--text-pure);
border:1px solid var(--border-glass);border-radius:12px;
font:700 13px/1.5 var(--font-body);cursor:pointer;
transition:transform .2s,border-color .2s,opacity .2s}
.ad-lab .ad-lab-button i{color:var(--neon-accent)}
.ad-lab button:disabled{opacity:.4;cursor:not-allowed}
.ad-lab button:focus-visible{
outline:3px solid var(--neon-accent);outline-offset:3px}
.ad-lab .ad-lab-layout{
display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:28px}
.ad-lab .ad-lab-diagram{
display:flex;flex-direction:column;align-items:center;min-width:0;
padding:28px 20px;background:var(--bg-surface,var(--bg-main));
border:1px solid var(--border-glass);border-radius:20px}
.ad-lab .ad-lab-node{
position:relative;display:flex;align-items:center;justify-content:center;
gap:10px;min-width:0;padding:15px 18px;
background:var(--bg-card);color:var(--text-pure);
border:1px solid var(--border-glass);border-radius:14px;
font:700 13px/1.6 var(--font-body);text-align:center}
.ad-lab .ad-lab-node>i{color:var(--neon-accent);font-size:20px}
.ad-lab .ad-lab-users{max-width:100%}
.ad-lab .ad-lab-router{max-width:100%;border-color:var(--neon-accent)}
.ad-lab .ad-lab-wire{
position:relative;width:2px;height:40px;flex-shrink:0;
background:var(--border-glass);overflow:hidden}
.ad-lab .ad-lab-wire::after{
content:"";position:absolute;top:-14px;left:0;width:2px;height:14px;
background:var(--neon-accent);animation:adLabRequest 1.6s linear infinite}
@keyframes adLabRequest{from{top:-14px}to{top:100%}}
.ad-lab .ad-lab-branches{
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
width:100%;max-width:440px;gap:20px}
.ad-lab .ad-lab-branch{
position:relative;display:flex;flex-direction:column;align-items:center;min-width:0}
.ad-lab .ad-lab-branch::before{
content:"";position:absolute;top:0;height:1px;width:calc(50% + 11px);
background:var(--border-glass)}
.ad-lab .ad-lab-branch:first-child::before{left:50%}
.ad-lab .ad-lab-branch:last-child::before{right:50%}
.ad-lab .ad-lab-app{
flex-direction:column;width:100%;gap:9px;padding:18px 12px;
transition:border-color .3s,box-shadow .3s}
.ad-lab .ad-lab-app-heading{
display:flex;align-items:center;justify-content:center;
flex-wrap:wrap;gap:8px;min-width:0}
.ad-lab .ad-lab-app-heading i{color:var(--neon-accent)}
.ad-lab .ad-lab-version{
color:var(--text-muted);font:11px/1.5 var(--font-mono)}
.ad-lab .ad-lab-status{
display:inline-flex;align-items:center;gap:7px;
color:var(--text-pure);font:11px/1.5 var(--font-mono)}
.ad-lab .ad-lab-status::before{
content:"";width:6px;height:6px;flex-shrink:0;
border-radius:50%;background:#22c55e}
.ad-lab .ad-lab-app[data-state="updating"],
.ad-lab .ad-lab-app[data-state="checking"],
.ad-lab .ad-lab-app[data-state="recovering"]{
border-color:#f59e0b;box-shadow:0 0 20px rgba(245,158,11,.1)}
.ad-lab .ad-lab-app[data-state="updating"] .ad-lab-status::before,
.ad-lab .ad-lab-app[data-state="checking"] .ad-lab-status::before,
.ad-lab .ad-lab-app[data-state="recovering"] .ad-lab-status::before{
background:#f59e0b;animation:adLabBlink 1s ease-in-out infinite}
.ad-lab .ad-lab-app[data-state="error"]{border-color:#ef4444}
.ad-lab .ad-lab-app[data-state="error"] .ad-lab-status::before{background:#ef4444}
.ad-lab .ad-lab-branch.is-offline .ad-lab-wire::after{display:none}
.ad-lab .ad-lab-branch.is-offline .ad-lab-wire{opacity:.25}
.ad-lab .ad-lab-monitor{
display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
gap:10px;width:100%;margin-top:28px;padding:14px;
color:var(--text-pure);border:1px dashed var(--border-glass);
border-radius:12px;font:12px/1.6 var(--font-body)}
.ad-lab .ad-lab-monitor>i{color:var(--neon-accent);font-size:19px}
.ad-lab .ad-lab-monitor-status{
margin-left:auto;display:flex;align-items:center;gap:7px;
font:10px/1.7 var(--font-mono)}
.ad-lab .ad-lab-monitor-status::before{
content:"";width:6px;height:6px;border-radius:50%;background:#22c55e}
.ad-lab .ad-lab-monitor[data-state="error"]{border-color:#ef4444}
.ad-lab .ad-lab-monitor[data-state="error"] .ad-lab-monitor-status::before{
background:#ef4444}
@keyframes adLabBlink{0%,100%{opacity:.35}50%{opacity:1}}
.ad-lab .ad-lab-journal{
display:flex;flex-direction:column;min-width:0;
background:var(--bg-surface,var(--bg-main));
border:1px solid var(--border-glass);border-radius:20px;overflow:hidden}
.ad-lab .ad-lab-journal h3{
display:flex;align-items:center;gap:10px;margin:0;padding:18px 20px;
color:var(--text-pure);border-bottom:1px solid var(--border-glass);
font:700 13px/1.6 var(--font-body)}
.ad-lab .ad-lab-journal h3 i{color:var(--neon-accent)}
.ad-lab .ad-lab-log{
display:flex;flex-direction:column;gap:14px;max-height:360px;
margin:0;padding:20px;list-style:none;overflow:auto;
color:var(--text-muted);font:11px/1.9 var(--font-mono)}
.ad-lab .ad-lab-log li{
padding-left:13px;border-left:2px solid var(--border-glass);
overflow-wrap:anywhere;animation:adLabLogIn .25s ease both}
.ad-lab .ad-lab-log li:last-child{
color:var(--text-pure);border-left-color:var(--neon-accent)}
@keyframes adLabLogIn{
from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.ad-lab .ad-lab-explanation{
min-height:52px;margin:24px 0 0;padding:18px 20px;
color:var(--text-pure);background:var(--bg-surface,var(--bg-main));
border-left:3px solid var(--neon-accent);border-radius:0 12px 12px 0;
font:14px/1.8 var(--font-body)}
.ad-lab .ad-lab-disclaimer{
margin:16px 0 0;color:var(--text-muted);font:12px/1.8 var(--font-body)}
@media(hover:hover) and (pointer:fine){
.ad-lab button:not(:disabled):hover{
transform:translateY(-2px);border-color:var(--neon-accent)}}
@media(max-width:900px){
.ad-lab .ad-lab-layout{grid-template-columns:minmax(0,1fr)}
.ad-lab .ad-lab-log{max-height:220px}}
@media(max-width:600px){
.ad-lab{padding:60px 0}
.ad-lab .ad-lab-shell{padding:18px 14px;border-radius:20px}
.ad-lab .ad-lab-intro{font-size:14px}
.ad-lab .ad-lab-controls{display:grid;grid-template-columns:minmax(0,1fr);gap:9px}
.ad-lab .ad-lab-button{width:100%}
.ad-lab .ad-lab-diagram{padding:22px 12px}
.ad-lab .ad-lab-branches{grid-template-columns:minmax(0,1fr);gap:0;max-width:280px}
.ad-lab .ad-lab-branch::before{display:none}
.ad-lab .ad-lab-app{padding:16px}
.ad-lab .ad-lab-monitor-status{margin-left:0}
.ad-lab .ad-lab-explanation{padding:15px;font-size:13px}
.ad-lab .ad-lab-demo{font-size:10px}}
@media(prefers-reduced-motion:reduce){
.ad-lab .ad-lab-wire::after,
.ad-lab .ad-lab-log li,
.ad-lab .ad-lab-status::before{animation:none!important}
.ad-lab .ad-lab-button,.ad-lab .ad-lab-app{transition:none}}