#dpb-preview-bar,
#dpb-float-root {
--dpb-bg: #1e2330;
--dpb-surface: #252b38;
--dpb-elev: #2a3140;
--dpb-line: #2c3444;
--dpb-line-strong: #3d475a;
--dpb-ink: #f3f4f6;
--dpb-muted: #9aa3b2;
--dpb-soft: #c5cbd6;
--dpb-accent: #14b8a6;
--dpb-accent-ink: #ffffff;
--dpb-accent-deep: #0f766e;
--dpb-danger: #f87171;
--dpb-chrome: #131722;
--dpb-hover: #3a4150;
--dpb-secondary-hover: #252b39;
--dpb-border-hover: #5b6578;
--dpb-border-hover-strong: #6b7588;
--dpb-accent-hover: #2dd4bf;
--dpb-accent-contrast: #042f2e;
--dpb-accent-soft: #99f6e4;
--dpb-ready: #5eead4;
--dpb-placeholder: #7d8698;
--dpb-input-focus: #12161e;
--dpb-quiet-hover: rgba(255,255,255,.04);
--dpb-note-bg: #1f2430;
--dpb-note-ink: #f3f4f6;
--dpb-radius: 10px;
/* Scheme A′: unify interactive targets — pill 36 / drawer footer 40 */
--dpb-control-h: 36px;
--dpb-drawer-control-h: 40px;
  }
  #dpb-preview-bar {
font: 13px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
color: var(--dpb-ink);
  }
  #dpb-preview-bar[data-theme="light"],
  #dpb-float-root[data-theme="light"] {
--dpb-bg: #ffffff;
--dpb-surface: #f9fafb;
--dpb-elev: #f3f4f6;
--dpb-line: #e5e7eb;
--dpb-line-strong: #d1d5db;
--dpb-ink: #111827;
--dpb-muted: #6b7280;
--dpb-soft: #4b5563;
--dpb-accent: #0f766e;
--dpb-accent-ink: #ffffff;
--dpb-accent-deep: #134e4a;
--dpb-danger: #ef4444;
--dpb-chrome: #f3f4f6;
--dpb-hover: #e5e7eb;
--dpb-secondary-hover: #e5e7eb;
--dpb-border-hover: #9ca3af;
--dpb-border-hover-strong: #6b7280;
--dpb-accent-hover: #115e59;
--dpb-accent-contrast: #ffffff;
--dpb-accent-soft: #115e59;
--dpb-ready: #0f766e;
--dpb-placeholder: #6b7280;
--dpb-input-focus: #ffffff;
--dpb-quiet-hover: rgba(17,24,39,.05);
--dpb-note-bg: #ffffff;
--dpb-note-ink: #111827;
  }
  /* ---- floating pill (default state) ---- */
  #dpb-preview-bar {
position: fixed;
right: 24px;
bottom: 24px;
left: auto;
top: auto;
z-index: 1000;
background: transparent;
border: 0;
padding: 0;
border-radius: 0;
border-top: 0;
  }
  #dpb-preview-bar .dpb-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 8px 8px 16px;
background: var(--dpb-bg);
border: 1px solid var(--dpb-line);
border-radius: 999px;
box-shadow: 0 8px 28px rgba(0,0,0,.15), 0 2px 6px rgba(0,0,0,.1);
  }
  #dpb-preview-bar .dpb-pill .dpb-pill-info {
display: inline-flex; align-items: center; gap: 8px; max-width: 260px;
  }
  #dpb-preview-bar .dpb-round {
flex: 0 0 auto; display: inline-flex; align-items: center; height: 22px;
padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 700;
font-variant-numeric: tabular-nums; color: var(--dpb-accent-soft);
background: rgba(20,184,166,.14); border: 1px solid rgba(20,184,166,.35);
  }
  #dpb-preview-bar .dpb-pill .dpb-summary {
margin: 0; min-width: 0; color: var(--dpb-soft);
font-size: 12.5px; font-weight: 500; overflow: hidden;
text-overflow: ellipsis; white-space: nowrap;
  }
  #dpb-preview-bar .dpb-pill .dpb-pill-actions {
display: inline-flex; align-items: center; gap: 6px;
  }
  #dpb-preview-bar .dpb-pill .dpb-btn-ghost {
appearance: none; cursor: pointer; height: var(--dpb-control-h); padding: 0 12px;
border-radius: 999px; border: 1px solid var(--dpb-line-strong);
background: var(--dpb-surface); color: var(--dpb-soft);
font: 650 12.5px/1 system-ui, sans-serif;
display: inline-flex; align-items: center; gap: 6px;
transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
  }
  #dpb-preview-bar .dpb-pill .dpb-btn-ghost:hover {
background: var(--dpb-elev); border-color: var(--dpb-border-hover); color: var(--dpb-ink);
  }
  #dpb-preview-bar .dpb-pill .dpb-btn-ghost:focus-visible {
outline: 2px solid var(--dpb-accent); outline-offset: 2px;
  }
  #dpb-preview-bar .dpb-pill .dpb-badge-dot {
display: none; min-width: 18px; height: 18px; padding: 0 5px;
align-items: center; justify-content: center; border-radius: 999px;
font-size: 11px; font-weight: 700; color: var(--dpb-accent-contrast);
background: var(--dpb-accent);
  }
  #dpb-preview-bar .dpb-pill .dpb-badge-dot.is-on { display: inline-flex; }
  #dpb-preview-bar .dpb-pill .dpb-btn-primary {
appearance: none; cursor: pointer; height: var(--dpb-control-h); padding: 0 16px;
border-radius: 999px; border: 1px solid var(--dpb-accent-deep);
background: var(--dpb-accent); color: var(--dpb-accent-ink);
font: 650 12.5px/1 system-ui, sans-serif;
box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
transition: background 140ms ease, transform 100ms ease;
  }
  #dpb-preview-bar .dpb-pill .dpb-btn-primary:hover { background: var(--dpb-accent-hover); color: var(--dpb-accent-contrast); }
  #dpb-preview-bar .dpb-pill .dpb-btn-primary:active { transform: translateY(1px); }
  #dpb-preview-bar .dpb-pill .dpb-btn-primary:focus-visible {
outline: 2px solid var(--dpb-accent); outline-offset: 2px;
  }
  /* Direct confirm state on pill primary when readiness allows immediate action */
  #dpb-preview-bar .dpb-pill .dpb-btn-primary.is-direct-confirm {
    box-shadow: 0 0 0 3px rgba(20,184,166,0.25);
    font-weight: 700;
  }
  /* Pill direct-confirm arm (二级保护): first click arms, second submits */
  #dpb-preview-bar .dpb-pill .dpb-btn-primary.is-armed {
    font-weight: 700;
    animation: dpb-confirm-pulse 1s ease-in-out infinite;
  }
  @keyframes dpb-confirm-pulse {
    0%,100% { box-shadow: 0 0 0 3px rgba(20,184,166,0.35); }
    50% { box-shadow: 0 0 0 7px rgba(20,184,166,0.12); }
  }
  /* secondary action surfaced on the pill (e.g. the revise label) */
  #dpb-preview-bar .dpb-pill .dpb-btn-pill-secondary {
appearance: none; cursor: pointer; height: var(--dpb-control-h); padding: 0 14px;
border-radius: 999px; border: 1px solid var(--dpb-line-strong);
background: var(--dpb-elev); color: var(--dpb-soft);
font: 650 12.5px/1 system-ui, sans-serif;
display: inline-flex; align-items: center;
transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
  }
  #dpb-preview-bar .dpb-pill .dpb-btn-pill-secondary:hover {
background: var(--dpb-hover); border-color: var(--dpb-border-hover-strong); color: var(--dpb-ink);
  }
  #dpb-preview-bar .dpb-pill .dpb-btn-pill-secondary:focus-visible {
outline: 2px solid var(--dpb-accent); outline-offset: 2px;
  }
  @media (max-width: 720px) {
#dpb-preview-bar .dpb-pill .dpb-btn-pill-secondary { display: inline-flex; font-size: 11px; padding: 0 8px; }
/* Per debate: do not hide revise on mobile; allow stacking if needed */
  }

  /* pill quick 1-line feedback — wide only; same state as drawer textarea */
  #dpb-preview-bar .dpb-pill .dpb-pill-feedback {
appearance: none; box-sizing: border-box;
width: 160px; max-width: 22vw; height: var(--dpb-control-h);
margin: 0; padding: 0 12px;
border-radius: 999px; border: 1px solid var(--dpb-line-strong);
background: var(--dpb-surface); color: var(--dpb-ink);
font: 500 12.5px/1 system-ui, sans-serif; outline: none;
transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
  }
  #dpb-preview-bar .dpb-pill .dpb-pill-feedback::placeholder { color: var(--dpb-placeholder); }
  #dpb-preview-bar .dpb-pill .dpb-pill-feedback:hover {
border-color: var(--dpb-border-hover); background: var(--dpb-elev);
  }
  #dpb-preview-bar .dpb-pill .dpb-pill-feedback:focus {
border-color: var(--dpb-accent); box-shadow: 0 0 0 3px rgba(20,184,166,.22);
background: var(--dpb-input-focus);
  }

  /* ---- drawer (expanded state) ---- */
  /* z-index 1001 > bar (1000) > float notes (999): drawer sits above pill chrome */
  #dpb-preview-bar dialog.dpb-drawer {
position: fixed;
right: 24px;
bottom: 24px;
z-index: 1001;
margin: 0;
width: 380px;
max-width: calc(100vw - 48px);
max-height: calc(100vh - 48px);
flex-direction: column;
background: var(--dpb-bg);
border: 1px solid var(--dpb-line);
border-radius: 16px;
box-shadow: 0 16px 48px rgba(0,0,0,.22), 0 4px 12px rgba(0,0,0,.12);
/* visible so abort popover can extend past the foot without being clipped */
overflow: visible;
color: var(--dpb-ink);
padding: 0;
  }
  /* non-modal <dialog>.show() is not in the top layer, so we keep the hand-rolled
     scrim (stronger than before per UX V4) so the drawer reads as a focused layer. */
  #dpb-preview-bar dialog.dpb-drawer[open] { display: flex; }
  /* show() failure / no-dialog fallback: is-open alone must reveal the drawer */
  #dpb-preview-bar.is-open dialog.dpb-drawer { display: flex; }
  #dpb-preview-bar.is-open::before {
content: "";
position: fixed; inset: 0; z-index: -1;
background: rgba(15,23,42,.5);
pointer-events: auto;  /* P1.5: intercept clicks outside drawer (close on scrim) */
  }
  body.dpb-pin-mode #dpb-preview-bar.is-open::before {
pointer-events: none;  /* P1.5: let pin-mode clicks reach prototype elements */
  }
  #dpb-preview-bar.is-open .dpb-pill { display: none; }

  #dpb-preview-bar .dpb-drawer-head {
display: flex; align-items: center; justify-content: space-between;
gap: 10px; padding: 12px 14px;
border-bottom: 1px solid var(--dpb-line);
border-radius: 16px 16px 0 0;
background: linear-gradient(180deg, var(--dpb-chrome), var(--dpb-bg));
  }
  #dpb-preview-bar .dpb-drawer-head .dpb-head-left {
display: inline-flex; align-items: center; gap: 8px; min-width: 0;
  }
  #dpb-preview-bar .dpb-drawer-head .dpb-title {
margin: 0; font-size: 13px; font-weight: 650; color: var(--dpb-ink);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  #dpb-preview-bar .dpb-drawer-head .dpb-icon-btn {
appearance: none; cursor: pointer; width: 28px; height: 28px;
border-radius: 8px; border: 1px solid transparent;
background: transparent; color: var(--dpb-muted);
font: 650 16px/1 system-ui, sans-serif;
display: inline-grid; place-items: center;
transition: background 140ms ease, color 140ms ease;
  }
  #dpb-preview-bar .dpb-drawer-head .dpb-icon-btn:hover {
background: var(--dpb-elev); color: var(--dpb-ink);
  }
  #dpb-preview-bar .dpb-drawer-head .dpb-icon-btn:focus-visible {
outline: 2px solid var(--dpb-accent); outline-offset: 1px;
  }

  #dpb-preview-bar .dpb-drawer-body {
display: flex; flex-direction: column; min-height: 0;
overflow: auto; padding: 10px 14px 14px; gap: 14px;
  }
  #dpb-preview-bar .dpb-drawer-body .dpb-subhead {
margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.05em;
color: var(--dpb-muted); text-transform: uppercase;
  }

  /* pin toggle in drawer */
  #dpb-preview-bar .dpb-pin-toggle {
appearance: none; cursor: pointer; height: var(--dpb-control-h); padding: 0 12px;
border-radius: 8px; border: 1px solid var(--dpb-line-strong);
background: var(--dpb-surface); color: var(--dpb-soft);
font: 650 12.5px/1 system-ui, sans-serif;
display: inline-flex; align-items: center; gap: 7px;
transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
  }
  #dpb-preview-bar .dpb-pin-toggle:hover {
background: var(--dpb-elev); border-color: var(--dpb-border-hover); color: var(--dpb-ink);
  }
  #dpb-preview-bar .dpb-pin-toggle.is-on {
color: var(--dpb-accent-contrast); background: var(--dpb-accent); border-color: var(--dpb-accent-deep);
  }
  #dpb-preview-bar .dpb-pin-toggle:focus-visible {
outline: 2px solid var(--dpb-accent); outline-offset: 2px;
  }
  #dpb-preview-bar .dpb-pin-row {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
  }
  #dpb-preview-bar .dpb-pin-count {
font-size: 11.5px; color: var(--dpb-muted); font-variant-numeric: tabular-nums;
  }

  /* anchor list */
  #dpb-preview-bar .dpb-anchors {
display: none; flex-direction: column; gap: 6px;
max-height: 180px; overflow: auto; padding: 8px;
border-radius: 8px; background: var(--dpb-surface);
border: 1px solid var(--dpb-line);
  }
  #dpb-preview-bar .dpb-anchors.has-items { display: flex; }
  #dpb-preview-bar .dpb-empty {
display: none; padding: 10px 4px; font-size: 12px; color: var(--dpb-muted);
text-align: center;
  }
  #dpb-preview-bar .dpb-anchors:not(.has-items) + .dpb-empty { display: block; }
  #dpb-preview-bar .dpb-anchor {
display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px;
align-items: start; padding: 6px 8px; border-radius: 8px;
background: var(--dpb-elev); border: 1px solid var(--dpb-line);
  }
  #dpb-preview-bar .dpb-anchor .n {
font-size: 11px; font-weight: 700; color: var(--dpb-accent); padding-top: 4px;
  }
  #dpb-preview-bar .dpb-anchor .meta {
min-width: 0; display: grid; gap: 4px;
  }
  #dpb-preview-bar .dpb-anchor .label {
font-size: 12px; font-weight: 650; color: var(--dpb-ink);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
appearance: none; border: 0; background: transparent; padding: 0;
text-align: left; cursor: pointer; width: 100%;
display: block; min-width: 0;
  }
  #dpb-preview-bar .dpb-anchor .label:hover { color: var(--dpb-accent); }
  #dpb-preview-bar .dpb-anchor .label:focus-visible {
outline: 2px solid var(--dpb-accent); outline-offset: 1px; border-radius: 4px;
  }
  #dpb-preview-bar .dpb-anchor .sel {
font-size: 11px; color: var(--dpb-muted);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  #dpb-preview-bar .dpb-anchor input {
width: 100%; box-sizing: border-box; height: 28px; margin: 0; padding: 0 8px;
border-radius: 6px; border: 1px solid var(--dpb-line-strong);
background: var(--dpb-surface); color: var(--dpb-ink); font: inherit; outline: none;
  }
  #dpb-preview-bar .dpb-anchor input:focus {
border-color: var(--dpb-accent); box-shadow: 0 0 0 2px rgba(20,184,166,.2);
  }
  #dpb-preview-bar .dpb-anchor .rm {
appearance: none; cursor: pointer; height: 28px; padding: 0 8px;
border: 0; border-radius: 6px; background: transparent; color: var(--dpb-muted);
font: 650 12px/1 system-ui, sans-serif;
  }
  #dpb-preview-bar .dpb-anchor .rm:hover { color: var(--dpb-danger); background: rgba(248,113,113,.08); }

  /* overall comment */
  #dpb-preview-bar .dpb-field { display: grid; gap: 6px; min-width: 0; }
  #dpb-preview-bar .dpb-label-row {
display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  }
  #dpb-preview-bar .dpb-label { font-size: 12px; font-weight: 650; color: var(--dpb-muted); }
  /* I4: neutral hint up-front; .is-on only adds emphasis (was red-danger-only). */
  #dpb-preview-bar .dpb-hint { margin: 0; font-size: 12px; color: var(--dpb-muted); display: block; }
  #dpb-preview-bar .dpb-hint.is-on { color: var(--dpb-danger); font-weight: 600; }
  /* I4 / A′: readiness chip — click focuses feedback (pill or drawer). */
  #dpb-preview-bar .dpb-pill .dpb-pill-ready {
appearance: none; cursor: pointer; border: 0; background: transparent;
padding: 0 4px; margin: 0;
font-size: 11px; color: var(--dpb-muted); white-space: nowrap;
font-family: inherit; line-height: 1.2;
border-radius: 6px;
}
  #dpb-preview-bar .dpb-pill .dpb-pill-ready:hover { color: var(--dpb-ink); }
  #dpb-preview-bar .dpb-pill .dpb-pill-ready:focus-visible {
outline: 2px solid var(--dpb-accent); outline-offset: 2px;
  }
  #dpb-preview-bar .dpb-pill .dpb-pill-ready.is-ready {
color: var(--dpb-ready); font-weight: 600;
  }
  #dpb-preview-bar textarea[name="feedback"] {
width: 100%; box-sizing: border-box; min-height: 56px; max-height: 120px;
resize: vertical; margin: 0; padding: 8px 12px; color: var(--dpb-ink);
background: var(--dpb-surface); border: 1px solid var(--dpb-line-strong);
border-radius: var(--dpb-radius); font: inherit; line-height: 1.45; outline: none;
transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
  }
  #dpb-preview-bar textarea[name="feedback"]::placeholder { color: var(--dpb-placeholder); }
  #dpb-preview-bar textarea[name="feedback"]:hover { border-color: var(--dpb-border-hover); background: var(--dpb-elev); }
  #dpb-preview-bar textarea[name="feedback"]:focus {
border-color: var(--dpb-accent); box-shadow: 0 0 0 3px rgba(20,184,166,.22); background: var(--dpb-input-focus);
  }
  #dpb-preview-bar textarea[name="feedback"][aria-invalid="true"] {
border-color: var(--dpb-danger); box-shadow: 0 0 0 3px rgba(248,113,113,.18);
  }

  /* footer actions */
  #dpb-preview-bar .dpb-drawer-foot {
position: relative; z-index: 2;
display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between;
align-items: center; padding: 12px 14px;
border-top: 1px solid var(--dpb-line);
border-radius: 0 0 16px 16px;
background: linear-gradient(180deg, var(--dpb-bg), var(--dpb-chrome));
overflow: visible;
  }
  #dpb-preview-bar .dpb-btns {
display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; align-items: center;
  }
  #dpb-preview-bar .dpb-btn {
appearance: none; cursor: pointer; box-sizing: border-box; height: var(--dpb-drawer-control-h);
min-width: 96px; padding: 0 16px; border-radius: var(--dpb-radius);
font: 650 13px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
border: 1px solid transparent;
transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 100ms ease;
  }
  #dpb-preview-bar .dpb-btn:active { transform: translateY(1px); }
  #dpb-preview-bar .dpb-btn:focus-visible { outline: 2px solid var(--dpb-accent); outline-offset: 2px; }
  #dpb-preview-bar .dpb-btn-primary {
background: var(--dpb-accent); color: var(--dpb-accent-ink); border-color: var(--dpb-accent-deep);
box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
  }
  #dpb-preview-bar .dpb-btn-primary:hover { background: var(--dpb-accent-hover); color: var(--dpb-accent-contrast); }
  #dpb-preview-bar .dpb-btn-secondary {
background: var(--dpb-elev); color: var(--dpb-ink); border-color: var(--dpb-line-strong);
  }
  #dpb-preview-bar .dpb-btn-secondary:hover { background: var(--dpb-secondary-hover); border-color: var(--dpb-border-hover); }
  #dpb-preview-bar .dpb-btn-quiet {
min-width: 72px; background: transparent; color: var(--dpb-muted); border-color: transparent;
  }
  #dpb-preview-bar .dpb-btn-quiet:hover { color: var(--dpb-ink); background: var(--dpb-quiet-hover); }
  #dpb-preview-bar .dpb-btn-danger {
min-width: 72px; background: transparent; color: var(--dpb-danger); border-color: transparent;
  }
  #dpb-preview-bar .dpb-btn-danger:hover { color: #fff; background: var(--dpb-danger); border-color: var(--dpb-danger); }
  #dpb-preview-bar .dpb-btn-danger.is-armed { color: #fff; background: var(--dpb-danger); border-color: var(--dpb-danger); font-weight: 700; }
  /* Scheme A′ abort second-confirm popover (replaces 4s arm) */
  #dpb-preview-bar .dpb-abort-wrap {
position: relative; display: inline-flex; align-items: center;
  }
  /* Default: to the right of Abort. JS may set --dpb-pop-left/bottom for clamp. */
  #dpb-preview-bar .dpb-popover {
position: absolute; left: 100%; bottom: 0; z-index: 3;
margin-left: 8px;
min-width: 200px; max-width: min(260px, 55vw);
padding: 10px 12px; border-radius: 12px;
background: var(--dpb-bg); color: var(--dpb-ink);
border: 1px solid var(--dpb-line-strong);
box-shadow: 0 12px 32px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.14);
  }
  #dpb-preview-bar .dpb-popover.is-fixed {
position: fixed; margin-left: 0; left: var(--dpb-pop-left, 0);
bottom: auto; top: var(--dpb-pop-top, 0); right: auto;
  }
  #dpb-preview-bar .dpb-popover[hidden] { display: none !important; }
  #dpb-preview-bar .dpb-popover-msg {
margin: 0 0 10px; font-size: 12.5px; line-height: 1.4; color: var(--dpb-soft);
  }
  #dpb-preview-bar .dpb-popover-actions {
display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; align-items: center;
  }
  #dpb-preview-bar .dpb-popover-actions .dpb-btn {
min-width: 0; height: var(--dpb-control-h); padding: 0 12px; font-size: 12.5px;
  }
  /* visually hidden live region (screen-reader announcements, e.g. abort popover) */
  #dpb-preview-bar .dpb-sr-only {
position: absolute; width: 1px; height: 1px; overflow: hidden;
clip-path: inset(50%); white-space: nowrap;
  }

  /* floating annotation bubbles pinned to targeted elements.
     z-index 999 < #dpb-preview-bar (1000): float-note sits above the prototype
     page content but BELOW the bar/drawer, so pin bubbles never cover the
     confirm controls (was 1001 -> covered drawer, d46682d follow-up). */
  .dpb-float-note {
position: absolute;
z-index: 999;
max-width: 240px;
min-width: 120px;
padding: 6px 10px 6px 8px;
border-radius: 10px;
background: var(--dpb-note-bg);
color: var(--dpb-note-ink);
border: 1px solid var(--dpb-line);
box-shadow: 0 8px 24px rgba(0,0,0,.32), 0 2px 6px rgba(0,0,0,.18);
font: 12px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
pointer-events: none;
transform: translateY(4px);
opacity: 0;
transition: opacity 160ms ease, transform 160ms ease;
  }
  .dpb-float-note.is-visible { opacity: 1; transform: translateY(0); }
  .dpb-float-note .dpb-float-n {
position: absolute; top: -7px; left: -7px;
width: 18px; height: 18px; border-radius: 999px;
background: var(--dpb-accent); color: var(--dpb-accent-contrast);
font-size: 11px; font-weight: 700;
display: inline-grid; place-items: center;
box-shadow: 0 1px 3px rgba(0,0,0,.3);
  }
  .dpb-float-note .dpb-float-label {
display: block; font-weight: 650; color: var(--dpb-accent-soft);
font-size: 11px; margin-bottom: 2px; word-break: break-word;
  }
  .dpb-float-note .dpb-float-comment {
color: var(--dpb-soft); word-break: break-word; white-space: pre-wrap;
  }

  .dpb-pin-target {
outline: 1.5px solid rgba(20,184,166,.9) !important;
outline-offset: 1px !important;
background-color: rgba(20,184,166,.06) !important;
cursor: crosshair !important;
  }
  .dpb-pin-hover {
outline: 1px dashed rgba(20,184,166,.45) !important;
outline-offset: 1px !important;
  }
  /* brief flash when an anchor is located from the list */
  .dpb-pin-flash {
animation: dpb-flash 900ms ease-out 1;
  }
  @keyframes dpb-flash {
0% { box-shadow: 0 0 0 0 rgba(20,184,166,.55); outline-color: rgba(20,184,166,.9) !important; }
50% { box-shadow: 0 0 0 6px rgba(20,184,166,.25); }
100% { box-shadow: 0 0 0 0 rgba(20,184,166,0); }
  }
  body.dpb-pin-mode, body.dpb-pin-mode * { cursor: crosshair !important; }
  body.dpb-pin-mode #dpb-preview-bar, body.dpb-pin-mode #dpb-preview-bar * {
cursor: default !important;
  }

  @media (max-width: 720px) {
#dpb-preview-bar { right: 12px; bottom: 12px; }
#dpb-preview-bar .dpb-drawer { width: calc(100vw - 24px); }
#dpb-preview-bar .dpb-pill .dpb-pill-info { display: none; }
/* A′: hide pill quick input on narrow; drawer textarea remains the editor */
#dpb-preview-bar .dpb-pill .dpb-pill-feedback { display: none; }
#dpb-preview-bar .dpb-drawer-body { padding: 10px 10px 14px; }
#dpb-preview-bar .dpb-drawer-foot { justify-content: flex-start; flex-wrap: wrap; }
#dpb-preview-bar .dpb-abort-wrap { flex: 0 0 auto; }
#dpb-preview-bar .dpb-btns { flex: 1 1 auto; }
#dpb-preview-bar .dpb-btns .dpb-btn { flex: 1 1 auto; min-width: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
#dpb-preview-bar .dpb-btn,
#dpb-preview-bar textarea[name="feedback"],
#dpb-preview-bar .dpb-pill .dpb-pill-feedback,
.dpb-float-note { transition: none; }
#dpb-preview-bar .dpb-btn:active { transform: none; }
.dpb-pin-flash { animation: none; }
#dpb-preview-bar .dpb-pill .dpb-btn-primary.is-armed { animation: none; }
  }