/* DP Engine — shared styles for Play / Expand diagram player */
.dp-panel{position:relative;display:block}
.dp-panel .dp-el{transition:opacity .25s ease}
.dp-stepped .dp-el{opacity:0}
.dp-stepped .dp-el.dp-on{opacity:1}
.dp-ctrls{position:absolute;top:2px;right:4px;display:flex;gap:3px;z-index:3}
.dp-ctrl{width:18px;height:18px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(20,22,38,.78);color:#fff;font-size:9px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;padding:0}
.dp-ctrl.dp-expand{font-size:10px}
.dp-ctrl:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.65)}

/* Shared zoom modal */
#dp-modal{display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.85);backdrop-filter:blur(8px);align-items:center;justify-content:center;padding:0}
#dp-modal-content{background:var(--bg,#1a1b26);border:1px solid var(--border,#2a2b3d);border-radius:16px;width:calc(100% - 48px);height:calc(100% - 48px);position:relative;box-shadow:0 24px 80px rgba(0,0,0,.5);overflow:hidden}
#dp-modal-close{position:absolute;top:12px;right:16px;width:32px;height:32px;border-radius:50%;border:1.5px solid rgba(255,255,255,.3);background:rgba(248,113,113,.12);color:var(--r,#f87171);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2}
#dp-modal-close:hover{background:rgba(248,113,113,.25)}
.dp-mbar{display:flex;gap:6px;position:absolute;top:12px;left:16px;z-index:2;align-items:center;flex-wrap:wrap}
.dp-mbtn{height:28px;min-width:28px;padding:0 10px;border-radius:6px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:#fff;font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.dp-mbtn:hover{background:rgba(255,255,255,.18)}
.dp-speed{display:flex;gap:2px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);border-radius:6px;padding:2px;height:28px;align-items:center}
.dp-speed-lbl{color:#aaa;font-size:10px;padding:0 8px;letter-spacing:.3px;text-transform:uppercase}
.dp-step-nav{height:22px;padding:0 10px;border-radius:4px;border:none;background:transparent;color:#ddd;font-size:11px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:3px;line-height:1}
.dp-step-nav:hover:not(:disabled){background:rgba(255,255,255,.18);color:#fff}
.dp-step-nav:disabled{opacity:.35;cursor:not-allowed}
.dp-step-ind{height:22px;padding:0 10px;border-radius:4px;background:rgba(255,255,255,.12);color:#fff;font-size:11px;font-weight:600;display:flex;align-items:center;letter-spacing:.3px;font-variant-numeric:tabular-nums}
#dp-zoom-wrap{overflow:auto;width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:48px 16px 16px}
#dp-zoom-inner{transform-origin:center center;transition:transform .2s ease}
.dp-pan-btn{font-size:14px}
.dp-pan-btn.dp-pan-active{background:rgba(96,165,250,.32);border-color:rgba(96,165,250,.85);box-shadow:0 0 0 2px rgba(96,165,250,.25) inset}
#dp-zoom-wrap.dp-pan-on{cursor:grab;overflow:hidden}
#dp-zoom-wrap.dp-pan-on #dp-zoom-inner{transition:none}
#dp-zoom-wrap.dp-panning{cursor:grabbing}
#dp-zoom-wrap.dp-pan-on *{user-select:none}

@keyframes dpSlideUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes dpSlideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@keyframes dpFadeIn{from{opacity:0}to{opacity:1}}
@keyframes dpPop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}

/* ── Responsive expand modal (mobile/tablet) ─────────────────── */
@media(max-width:768px){
  #dp-modal-content{width:100%;height:100%;border-radius:0;border:none}
  #dp-modal-close{top:8px;right:8px;width:40px;height:40px;font-size:20px;background:rgba(248,113,113,.2);border:2px solid rgba(248,113,113,.5);z-index:10}
  .dp-mbar{top:8px;left:8px;gap:4px;max-width:calc(100% - 60px)}
  .dp-mbtn{height:32px;min-width:32px;font-size:14px}
  .dp-speed{display:none}
  #dp-zoom-wrap{padding:56px 8px 8px;overflow:auto}
  #dp-zoom-inner{transform-origin:top left;max-width:100%;overflow:visible}
  #dp-zoom-inner .dp-panel{max-width:100%;overflow:visible}
  #dp-zoom-inner svg{max-width:100%;height:auto}
}
@media(max-width:480px){
  #dp-modal-close{top:6px;right:6px;width:44px;height:44px;font-size:22px}
  .dp-mbar{flex-wrap:nowrap;overflow-x:auto;gap:3px}
  .dp-mbtn{height:34px;min-width:34px;padding:0 8px;font-size:15px}
  #dp-zoom-wrap{padding:52px 4px 4px}
  #dp-zoom-inner{transform:none !important}
  #dp-zoom-inner svg{width:100%;height:auto;max-width:none}
}