/* Demo Studio: styles injected into product pages (badges, Dock, pointer). Everything is prefixed ds- */
.ds-badge{display:inline-flex;align-items:center;gap:4px;margin-left:6px;padding:1px 6px;border-radius:4px;background:#dc2626;color:#fff !important;
  font:700 10px/1.5 system-ui,sans-serif;letter-spacing:.06em;vertical-align:middle;white-space:nowrap}
.ds-badge code{font:600 10px ui-monospace,monospace;color:#fff;background:transparent;padding:0;letter-spacing:0}
tr.ds-demo-row>td{background:rgba(220,38,38,.07) !important}
tr.ds-demo-row>td:first-child{box-shadow:inset 3px 0 0 #dc2626}

/* ---------------------------------------------------------------- Dock */
#ds-dock{--dk-bg:#0f172a;--dk-fg:#e2e8f0;--dk-mut:#94a3b8;--dk-line:#1e293b;--dk-acc:#38bdf8;--dk-ok:#22c55e;--dk-bad:#ef4444;--dk-warn:#f59e0b;
  position:fixed;left:50%;bottom:12px;transform:translateX(-50%);z-index:2147483000;width:min(1100px,calc(100vw - 24px));
  background:var(--dk-bg);color:var(--dk-fg);border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.45);font:13px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;
  border:1px solid #334155}
#ds-dock *{box-sizing:border-box}
#ds-dock .dk-top{display:flex;align-items:center;gap:10px;padding:8px 12px;flex-wrap:wrap}
#ds-dock .dk-step{display:flex;align-items:center;gap:8px;min-width:0;flex:1 1 280px}
#ds-dock .dk-num{font:700 12px ui-monospace,monospace;padding:2px 7px;border-radius:6px;color:#fff;white-space:nowrap}
#ds-dock .dk-title{font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#ds-dock .dk-meta{display:flex;gap:10px;align-items:center;color:var(--dk-mut);font-size:12px;flex-wrap:wrap}
#ds-dock .dk-meta b{color:var(--dk-fg);font-weight:600}
#ds-dock .dk-pill{padding:2px 8px;border-radius:999px;font-weight:700;font-size:11px;white-space:nowrap;cursor:pointer}
#ds-dock .dk-pill.pending{background:#334155;color:#cbd5e1}#ds-dock .dk-pill.done{background:#14532d;color:#86efac}
#ds-dock .dk-pill.failed{background:#7f1d1d;color:#fecaca}#ds-dock .dk-pill.busy{background:#1e3a8a;color:#bfdbfe}
#ds-dock .dk-mismatch{color:var(--dk-warn);font-weight:600}
#ds-dock .dk-clock{font:600 12px ui-monospace,monospace;color:var(--dk-fg)}#ds-dock .dk-clock.over{color:var(--dk-warn)}
#ds-dock .dk-say{padding:0 14px 8px;color:#cbd5e1;font-size:13.5px;max-height:84px;overflow:auto}
#ds-dock .dk-say ul{margin:4px 0 0 18px;padding:0;color:var(--dk-mut);font-size:12px}
#ds-dock .dk-btns{display:flex;gap:6px;padding:8px 12px 10px;border-top:1px solid var(--dk-line);flex-wrap:wrap;align-items:center}
#ds-dock button,#ds-dock select{font:600 12.5px system-ui,sans-serif;border-radius:8px;border:1px solid #334155;background:#1e293b;color:var(--dk-fg);
  padding:6px 11px;cursor:pointer;line-height:1.2}
#ds-dock button:hover:not(:disabled){background:#273449}#ds-dock button:disabled{opacity:.45;cursor:default}
#ds-dock button.pri{background:#0284c7;border-color:#0284c7;color:#fff}#ds-dock button.pri:hover:not(:disabled){background:#0369a1}
#ds-dock button.go{background:#15803d;border-color:#15803d;color:#fff}
#ds-dock button.stop{background:#b91c1c;border-color:#b91c1c;color:#fff}
#ds-dock .dk-sp{flex:1}
#ds-dock .dk-icon{background:transparent;border:0;color:var(--dk-mut);padding:4px 6px}
#ds-dock .dk-err{margin:0 12px 8px;padding:7px 10px;border-radius:8px;background:#450a0a;color:#fecaca;font-size:12.5px}
#ds-dock .dk-checks{margin:0 12px 8px;padding:6px 10px;border-radius:8px;background:#111c33;font-size:12px;max-height:150px;overflow:auto}
#ds-dock .dk-checks div{display:flex;gap:8px;padding:2px 0}#ds-dock .dk-checks .p{color:var(--dk-ok)}#ds-dock .dk-checks .f{color:var(--dk-bad)}
#ds-dock .dk-checks .s{color:var(--dk-mut)}#ds-dock .dk-checks code{color:var(--dk-mut);font-size:11px;word-break:break-all}
#ds-dock.folded .dk-say,#ds-dock.folded .dk-btns,#ds-dock.folded .dk-checks,#ds-dock.folded .dk-err{display:none}
#ds-dock.noscript .dk-say{display:none}
#ds-dock.chip{left:auto;right:0;bottom:120px;transform:none;width:auto;border-radius:12px 0 0 12px;writing-mode:vertical-rl;cursor:pointer}
#ds-dock.chip>*:not(.dk-chiptext){display:none}#ds-dock .dk-chiptext{display:none;padding:12px 8px;font-weight:700}#ds-dock.chip .dk-chiptext{display:block}
#ds-dock .dk-choice{display:flex;align-items:center;gap:6px;color:var(--dk-mut);font-size:12px}
#ds-plan{position:fixed;inset:0;z-index:2147483001;background:rgba(2,6,23,.55);display:flex;align-items:center;justify-content:center;font:14px/1.45 system-ui,sans-serif}
#ds-plan .pl{background:#0f172a;color:#e2e8f0;border:1px solid #334155;border-radius:14px;width:min(620px,calc(100vw - 32px));max-height:80vh;overflow:auto;padding:18px 20px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
#ds-plan h3{margin:0 0 4px;font-size:16px}#ds-plan .mut{color:#94a3b8;font-size:12.5px}
#ds-plan ol{margin:10px 0 10px 20px;padding:0}#ds-plan li{margin:3px 0}
#ds-plan .calls{background:#111c33;border-radius:8px;padding:8px 10px;font:12px ui-monospace,monospace;color:#7dd3fc}
#ds-plan .row{display:flex;gap:8px;justify-content:flex-end;margin-top:14px;align-items:center}
#ds-plan .count{font:700 28px ui-monospace,monospace;color:#38bdf8;margin-right:auto}
#ds-plan button{font:600 13px system-ui;border-radius:8px;border:1px solid #334155;background:#1e293b;color:#e2e8f0;padding:8px 14px;cursor:pointer}
#ds-plan button.pri{background:#0284c7;border-color:#0284c7;color:#fff}
#ds-pointer{position:fixed;left:0;top:0;width:26px;height:26px;z-index:2147483002;pointer-events:none;transition:transform .7s cubic-bezier(.3,.7,.2,1),opacity .3s;
  opacity:0;filter:drop-shadow(0 2px 3px rgba(0,0,0,.4))}
.ds-ripple{position:fixed;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;border:3px solid #0ea5e9;z-index:2147483002;pointer-events:none;animation:ds-rip .7s ease-out forwards}
@keyframes ds-rip{to{transform:scale(4);opacity:0}}
.ds-hl{outline:3px solid #0ea5e9 !important;outline-offset:2px;border-radius:4px;transition:outline-color .3s}
.ds-typed{box-shadow:0 0 0 3px rgba(34,197,94,.55) !important;background-color:rgba(34,197,94,.12) !important;transition:box-shadow 1.2s,background-color 1.2s}
#ds-caption{position:fixed;z-index:2147483003;max-width:340px;padding:7px 11px;border-radius:9px;background:#0f172a;color:#f8fafc;font:600 13px/1.35 system-ui,sans-serif;
  box-shadow:0 8px 24px rgba(0,0,0,.35);pointer-events:none;opacity:0;transition:opacity .25s;border:1px solid #38bdf8}
#ds-caption.center{left:50% !important;top:38% !important;transform:translate(-50%,-50%);font-size:17px;max-width:560px;text-align:center;padding:14px 20px}
#ds-caption.ok{border-color:#22c55e}#ds-caption.bad{border-color:#ef4444}
.ds-filecard{position:absolute;z-index:2147482999;display:flex;gap:10px;align-items:center;padding:8px 12px;border-radius:10px;border:1px dashed #0ea5e9;
  background:#f0f9ff;color:#0c4a6e;font:600 12.5px system-ui,sans-serif;box-shadow:0 6px 18px rgba(2,132,199,.2)}
.ds-filecard small{display:block;font-weight:500;color:#0369a1}
#ds-ask{position:fixed;left:50%;top:30%;transform:translateX(-50%);z-index:2147483004;background:#fff;color:#0f172a;border-radius:12px;padding:16px 18px;
  box-shadow:0 20px 60px rgba(0,0,0,.35);font:14px system-ui;min-width:320px;border:2px solid #0ea5e9}
@media (max-width:640px){#ds-dock .dk-meta{display:none}#ds-dock .dk-btns button{padding:6px 8px}}
@media print{#ds-dock,#ds-pointer,#ds-caption,.ds-filecard{display:none !important}}
