/* ============================================================================
   admin-design.css — /admin → Design.

   Every specimen here is drawn with the SAME tokens the app uses (loaded from
   /api/design-tokens.css, which wins because it loads last). The literal after
   each var() is a fallback for the case where that request fails — it is never
   a second source of truth. If you find yourself typing a hex here that isn't
   a fallback, it belongs in backend/design-tokens.js instead.
   ========================================================================== */

.dr-sec { scroll-margin-top: 20px; }
.dr-lede { padding: 16px 18px; color: var(--ink3); font-size: 13.5px; line-height: 1.6; }
.dr-lede b { color: var(--ink); }
.dr-lede code { font-family: var(--mono); font-size: 12px; color: var(--purple-l); }
.dr-note { font-size: 12px; color: var(--ink4); }

.dr-rules { margin: 0; padding: 4px 18px 18px 34px; color: var(--ink2); font-size: 13.5px; line-height: 1.75; }
.dr-rules li { margin-bottom: 6px; }
.dr-rules li.no { list-style: none; position: relative; }
.dr-rules li.no::before { content: '✕'; position: absolute; left: -18px; color: var(--red); font-weight: 800; }

.dr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; padding: 16px 18px; }
.dr-tok { display: flex; align-items: flex-start; gap: 11px; background: var(--panel2); border-radius: 11px; padding: 10px 12px; box-shadow: inset 0 0 0 1px var(--line); }
.dr-tok.is-over { box-shadow: inset 0 0 0 2px var(--purple); }
.dr-sw { width: 38px; height: 38px; border-radius: 9px; flex: 0 0 38px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); background-image: repeating-conic-gradient(#1b1b1f 0% 25%, #141417 0% 50%); background-size: 12px 12px; cursor: pointer; padding: 0; border: 0; }
.dr-sw > i { display: block; width: 100%; height: 100%; border-radius: 9px; }
.dr-meta { min-width: 0; flex: 1; }
.dr-name { font-family: var(--mono); font-size: 11.5px; color: var(--purple-l); }
.dr-tok .dr-note { margin-top: 2px; line-height: 1.4; }
.dr-val { width: 100%; margin-top: 6px; height: 30px; border: 0; border-radius: 7px; background: rgba(0,0,0,.34); color: var(--ink); font-family: var(--mono); font-size: 11.5px; padding: 0 8px; box-shadow: inset 0 0 0 1px var(--line); }
.dr-val:focus { outline: none; box-shadow: inset 0 0 0 2px var(--purple); }
.dr-icoval { height: auto; padding: 6px 8px; line-height: 1.45; resize: vertical; }
.dr-icobox { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: var(--ink); background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px var(--line); }

.dr-actions { display: flex; align-items: center; gap: 10px; padding: 14px 18px; }
.dr-actions .grow { flex: 1; }
.dr-spec { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px 18px; }

/* ── typography ─────────────────────────────────────────────────────────── */
.dr-face { background: var(--panel2); border-radius: 12px; padding: 16px 18px; box-shadow: inset 0 0 0 1px var(--line); }
.dr-face-h { font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink4); margin-bottom: 10px; }
.dr-face-h span { font-family: var(--mono); text-transform: none; letter-spacing: 0; color: var(--purple-l); margin-left: 8px; }
.dr-type-row { display: flex; align-items: baseline; gap: 14px; padding: 8px 18px; border-bottom: 1px solid rgba(255,255,255,.05); }
.dr-type-row:last-of-type { border-bottom: 0; }
.dr-type-row .lbl { font-family: var(--mono); font-size: 11px; color: var(--ink4); width: 140px; flex: 0 0 140px; }
.dr-caps { font-family: var(--mono); text-transform: uppercase; letter-spacing: .1em; font-size: var(--fs-micro, 11px); font-weight: 800; color: var(--ink3); }

/* ── spacing ────────────────────────────────────────────────────────────── */
.dr-sp { display: flex; align-items: center; gap: 10px; }
.dr-sp > i { display: block; height: 14px; border-radius: 3px; background: var(--accent, #B18CFF); flex: 0 0 auto; }
.dr-sp > span { font-family: var(--mono); font-size: 11px; color: var(--ink4); }

/* ── components ─────────────────────────────────────────────────────────── */
.dr-btn-primary, .dr-btn-secondary, .dr-btn-ghost, .dr-btn-danger {
  font-family: var(--sans); font-size: 13px; font-weight: 700; border: 0;
  border-radius: 10px; padding: 10px 18px; cursor: pointer;
  transition: filter var(--dur-fast, .25s) ease-in-out, background var(--dur-fast, .25s) ease-in-out;
}
.dr-btn-primary { color: #fff; background: var(--accent-deep, #7c4dff); box-shadow: inset 0 1px 0 rgba(255,255,255,.28); }
.dr-btn-secondary { color: var(--ink); background: rgba(255,255,255,.09); }
.dr-btn-ghost { color: var(--ink3); background: none; }
.dr-btn-danger { color: #fff; background: var(--danger, #ff6b6b); }
.dr-btn-primary:hover, .dr-btn-danger:hover { filter: brightness(1.1); }
.dr-btn-secondary:hover { background: rgba(255,255,255,.14); }
.dr-btn-ghost:hover { color: var(--ink); background: rgba(255,255,255,.06); }
.dr-btn-primary:active, .dr-btn-danger:active, .dr-btn-secondary:active { filter: brightness(.94); }
.dr-btn-primary[disabled] { opacity: .38; pointer-events: none; }
.dr-btn-primary.s, .dr-btn-secondary.s { padding: 6px 12px; font-size: 12px; border-radius: 8px; }
.dr-btn-primary.l { padding: 13px 24px; font-size: 14.5px; border-radius: 12px; }

.dr-chip { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; max-width: 220px; border-radius: 10px; font-size: 13px; font-weight: 700; color: var(--ink2); background: rgba(255,255,255,.06); cursor: pointer; transition: background var(--dur-fast, .25s) ease-in-out; }
/* A long value ellipsises — it must never be able to wrap the chips row. */
.dr-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* One purple for every chip icon — the icon says which control it is, the
   colour is not carrying extra meaning. The gold crown is the sole exception. */
.dr-chip svg { flex: none; color: var(--purple-l); }
.dr-tico { display: inline-flex; color: var(--purple-l); }
.dr-tico.is-gold { color: var(--gold, #F59E0B); }
.dr-chip:hover { background: rgba(255,255,255,.11); }
.dr-chip.is-on { color: var(--purple-l); background: rgba(124,77,255,.16); }
.dr-icobtn { width: 36px; height: 36px; padding: 0; border: 0; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink3); background: rgba(255,255,255,.05); cursor: pointer; transition: background var(--dur-fast, .25s) ease-in-out, color var(--dur-fast, .25s) ease-in-out; }
.dr-icobtn:hover { background: rgba(255,255,255,.1); color: var(--ink); }
.dr-icobtn.is-off { opacity: .38; pointer-events: none; }

.dr-toast { display: inline-flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: 11px; font-size: 13.5px; font-weight: 600; color: #fff; background: #201f28; box-shadow: 0 20px 50px -18px rgba(0,0,0,.7); }
.dr-toast.is-err { color: #ffb3b3; }

/* ── prompt dock, search, fields ────────────────────────────────────────── */
.dr-dock { width: 100%; border-radius: 16px; padding: 16px 18px; background: rgba(255,255,255,.035); box-shadow: inset 0 0 0 1px rgba(255,255,255,.13); }
.dr-prompt { font-size: 16px; line-height: 1.5; color: var(--ink); min-height: 46px; outline: none; }
.dr-prompt:empty::before { content: attr(data-ph); color: var(--ink4); }
.dr-dock-foot { display: flex; align-items: flex-end; gap: 12px; margin-top: 14px; }
.dr-chips { flex: 1; display: flex; flex-wrap: wrap; gap: 8px; }
.dr-dock-send { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.dr-credits { font-size: 14px; font-weight: 800; color: var(--ink); }
.dr-send { width: 46px; height: 46px; border: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #141417; background: var(--ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.6); cursor: pointer; }
.dr-search { display: flex; align-items: center; gap: 8px; width: 260px; height: 38px; padding: 0 14px; border-radius: 10px; color: var(--ink3); background: transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); transition: box-shadow var(--dur-fast, .25s) ease-in-out; }
.dr-search:focus-within { box-shadow: inset 0 0 0 1px rgba(255,255,255,.34); }
.dr-search input { flex: 1; min-width: 0; border: 0; background: none; color: var(--ink); font: 500 13.5px var(--sans); outline: none; }
.dr-search.is-bare { box-shadow: none; }
.dr-kbd { font-size: 11px; font-weight: 700; color: var(--ink4); }
.dr-fld { height: 38px; border: 0; border-radius: 8px; padding: 0 12px; background: rgba(0,0,0,.32); color: var(--ink); font: 700 15px var(--sans); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); outline: none; }
.dr-fld:focus { background: rgba(0,0,0,.5); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }

/* ── tabs ───────────────────────────────────────────────────────────────── */
.dr-tabstrip { position: relative; display: flex; align-items: center; gap: 6px; }
.dr-tabind { position: absolute; left: 0; top: 0; width: 0; height: 38px; z-index: 1; border-radius: 10px; background: var(--ink); opacity: 0; pointer-events: none; transition: transform .3s cubic-bezier(.22,.61,.36,1), width .3s cubic-bezier(.22,.61,.36,1); }
.dr-tab { position: relative; flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 10px; border-radius: 10px; font-size: 13.5px; font-weight: 700; color: var(--ink3); cursor: pointer; transition: color .3s cubic-bezier(.22,.61,.36,1); }
.dr-tab::before { content: ''; position: absolute; inset: 0; z-index: 0; border-radius: 10px; background: rgba(255,255,255,.05); transition: background var(--dur-fast, .25s) ease-in-out; }
.dr-tab:hover::before { background: rgba(255,255,255,.1); }
.dr-tab.on { color: #141417; }
.dr-tab > svg, .dr-tab > span { position: relative; z-index: 2; }

/* ── dropdown ───────────────────────────────────────────────────────────── */
.dr-ddwrap { position: relative; }
/* A menu opens OVER the page, so it belongs to the layer above it — same tint
   and blur as a floating glass panel, not a flat hole punched in the page. */
.dr-menu {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 200px; z-index: 20;
  padding: 5px; border-radius: 12px;
  background: var(--glass-tint, rgba(255,255,255,.05));
  backdrop-filter: var(--glass-blur, blur(28px) saturate(150%));
  -webkit-backdrop-filter: var(--glass-blur, blur(28px) saturate(150%));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 24px 60px -24px rgba(0,0,0,.8);
  display: none;
}
.dr-menu.open { display: block; animation: drMenuIn .3s cubic-bezier(.22,.61,.36,1) both; transform-origin: top left; }
/* The specimen copies sit in the flow, permanently open. */
.dr-menu.is-static { position: static; display: block; animation: none; min-width: 0; }
.dr-menu button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--ink2); font: 600 13px var(--sans); text-align: left; cursor: pointer; }
.dr-menu button:hover { background: rgba(255,255,255,.07); color: var(--ink); }
.dr-menu button.is-on { color: var(--ink); background: rgba(124,77,255,.18); }
.dr-menu button b { width: 12px; flex: 0 0 12px; color: var(--purple-l); }
.dr-menu button em { margin-left: auto; font-style: normal; font-weight: 600; color: var(--ink4); }
.dr-menu button i.dr-swatch {
  width: 26px; height: 18px; border-radius: 4px; flex: none;
  background: linear-gradient(135deg, #6e5a3a, #3f5a4a 55%, #2b2f38);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}
/* Three variants side by side, each over the same backdrop so the glass reads. */
.dr-ddgrid {
  display: flex; flex-wrap: wrap; gap: 18px; padding: 20px;
  border-radius: 14px;
  background:
    radial-gradient(120% 140% at 12% 0%, rgba(124,77,255,.34), transparent 60%),
    radial-gradient(120% 140% at 88% 100%, rgba(231,193,90,.22), transparent 62%),
    #17171c;
}
.dr-ddspec { display: flex; flex-direction: column; gap: 8px; min-width: 220px; }
.dr-ddspec-cap { font-size: 10.5px; font-weight: 800; letter-spacing: .07em; color: var(--ink4); }
@keyframes drMenuIn { from { opacity: 0; transform: translateY(-7px) scale(.96); } to { opacity: 1; transform: none; } }

/* ── liquid glass over a real backdrop ──────────────────────────────────── */
.dr-glassbed {
  margin: 16px 18px; border-radius: 14px; padding: 34px; display: flex; flex-wrap: wrap; gap: 18px;
  background:
    radial-gradient(560px 380px at 20% -10%, rgba(124,77,255,.5), transparent 66%),
    radial-gradient(420px 320px at 92% 108%, rgba(141,250,203,.28), transparent 68%),
    linear-gradient(135deg, #2a1f4d 0%, #1d1733 34%, #14101f 66%, #0c0a14 100%);
}
.dr-glass {
  min-width: 210px; padding: 18px 20px; border-radius: 14px; color: #fff; font-size: 14px; font-weight: 700;
  background: var(--glass-tint, rgba(255,255,255,.05));
  backdrop-filter: var(--glass-blur, blur(28px) saturate(150%));
  -webkit-backdrop-filter: var(--glass-blur, blur(28px) saturate(150%));
  box-shadow: var(--glass-shadow, 0 24px 60px -26px rgba(0,0,0,.65)), inset 0 1px 0 var(--glass-edge, rgba(255,255,255,.12));
}
.dr-glass small { display: block; margin-top: 6px; font-family: var(--mono); font-size: 11px; font-weight: 400; opacity: .72; }
.dr-glass-menu { min-width: 240px; }

/* ── scene highlights on real script text ───────────────────────────────── */
.dr-script { margin: 16px 18px; padding: 22px 24px; border-radius: 12px; background: var(--cpg-panel, #161619); font: 500 16px/1.9 var(--sans); color: var(--off-white, #f5f1fc); }
.dr-script p { margin: 0 0 14px; }
.dr-script p:last-child { margin-bottom: 0; }
.dr-scene { border-radius: 4px; padding: 3px 4px; background: var(--ssd-scene-highlight, rgba(124,77,255,.22)); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.dr-scene.is-hover { background: var(--ssd-scene-highlight-hover, rgba(124,77,255,.32)); }
.dr-scene.is-sel { background: var(--ssd-scene-highlight-selected, rgba(124,77,255,.48)); box-shadow: 0 0 0 2px var(--ssd-scene-selected-ring, rgba(199,177,255,.5)); }
.dr-cmt { border-radius: 4px; padding: 3px 4px; background: rgba(245,158,11,.26); box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* ── comments ───────────────────────────────────────────────────────────── */
.dr-cmtcard { width: 190px; border-radius: 10px; padding: 0 10px; height: 36px; overflow: hidden; cursor: pointer; background: var(--cpg-panel, #161619); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); display: flex; flex-direction: column; justify-content: center; transition: height .3s cubic-bezier(.22,.61,.36,1), box-shadow var(--dur-fast, .25s) ease-in-out; }
.dr-cmtcard:hover { box-shadow: inset 0 0 0 1px var(--accent, #b18cff); }
.dr-cmt-head { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.dr-cmt-head b { color: var(--ink); }
.dr-cmt-head i { display: none; color: var(--ink4); font-style: normal; font-size: 11px; }
.dr-av { width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(140deg, #B18CFF, #8DFACB); color: #141416; font-size: 9px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dr-cmt-body { display: none; margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--ink2); }
.dr-cmtcard.is-open { height: auto; padding: 11px 12px; justify-content: flex-start; box-shadow: inset 0 0 0 1px var(--accent, #b18cff), 0 24px 60px -26px rgba(0,0,0,.75); }
.dr-cmtcard.is-open .dr-cmt-body, .dr-cmtcard.is-open .dr-cmt-head i { display: block; }

/* ── tooltips ───────────────────────────────────────────────────────────── */
.dr-tip { position: relative; display: inline-flex; }
.dr-tip::after {
  content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%) translateY(3px);
  padding: 6px 9px; border-radius: 7px; background: #201f28; color: #fff; font: 600 12px var(--sans); white-space: nowrap;
  box-shadow: 0 12px 30px -12px rgba(0,0,0,.8); opacity: 0; pointer-events: none;
  transition: opacity .16s ease-in-out .35s, transform .16s ease-in-out .35s;
}
.dr-tip[data-place="bottom"]::after { bottom: auto; top: calc(100% + 6px); transform: translateX(-50%) translateY(-3px); }
.dr-tip:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── file tree ──────────────────────────────────────────────────────────── */
.dr-tree { margin: 16px 18px; border-radius: 12px; overflow: hidden; background: var(--panel2); box-shadow: inset 0 0 0 1px var(--line); }
.dr-tree-row { display: flex; align-items: center; gap: 9px; height: 34px; padding-right: 12px; color: var(--ink2); font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background var(--dur-fast, .25s) ease-in-out; }
.dr-tree-row:hover { background: rgba(255,255,255,.05); color: var(--ink); }
.dr-tree-row em { margin-left: auto; font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--ink4); }

/* ── loading ────────────────────────────────────────────────────────────── */
.dr-skel-card { width: 260px; display: flex; flex-direction: column; gap: 9px; }
.dr-skel { height: 12px; border-radius: 6px; background: linear-gradient(90deg, rgba(255,255,255,.05) 25%, rgba(177,140,255,.22) 50%, rgba(255,255,255,.05) 75%); background-size: 200% 100%; animation: drShimmer 1.4s linear infinite; }
@keyframes drShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.dr-spin { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--ink3); font-size: 13px; font-weight: 700; }
@keyframes drSpin { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(180deg) scale(.8); } 100% { transform: rotate(360deg) scale(1); } }

/* ── empty states ───────────────────────────────────────────────────────── */
.dr-emptyspec { display: flex; flex-direction: column; gap: 9px; flex: 1; min-width: 240px; }
.dr-emptybox {
  position: relative; height: 176px; border-radius: 16px; overflow: hidden;
  border: 1px dashed rgba(255,255,255,.18);
}
.dr-empty {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; padding: 16px;
  font: 600 14.5px/1.5 var(--sans); color: var(--ink2);
}
.dr-empty-act {
  padding: 0; border: 0; background: none; cursor: pointer; color: inherit;
  font: 700 14.5px/1.5 var(--sans);
}
.dr-empty-act.is-up { border-bottom: 1px solid currentColor; }
.dr-empty-when { font-size: 12.5px; line-height: 1.5; color: var(--ink4); }
.dr-emptybad {
  position: relative; height: 176px; border-radius: 16px; overflow: hidden;
  border: 1px dashed rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px;
  font-size: 12px; line-height: 1.4; color: var(--ink5); background: rgba(255,255,255,.04);
}

/* ── fields ─────────────────────────────────────────────────────────────── */
.dr-fieldspec { display: flex; flex-direction: column; gap: 8px; }
.dr-field { display: flex; align-items: center; gap: 10px; max-width: 560px; }
.dr-field-lbl {
  flex-shrink: 0; font-family: var(--mono, monospace); font-size: 10.5px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink4);
}
.dr-field-ctl {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 10px; border-radius: 9px; cursor: pointer;
  background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  color: var(--ink4);
}
.dr-field-val { flex: 1; min-width: 0; font: 700 13px/1 var(--sans); color: var(--ink); }
.dr-field-dot { flex-shrink: 0; width: 15px; height: 15px; border-radius: 50%; background: linear-gradient(150deg, #c8b0ff, #7C4DFF); }
.dr-field-play {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 13px; border: 0; border-radius: 9px; cursor: pointer;
  font: 700 12.5px/1 var(--sans); color: var(--ink); background: rgba(255,255,255,.08);
}
/* the shape it replaced, drawn to scale so the saving is visible */
.dr-fieldbad { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 560px; opacity: .55; }
.dr-fieldbad-h { font-size: 16px; font-weight: 800; color: var(--ink); margin-bottom: 11px; }
.dr-fieldbad-ctl {
  display: flex; align-items: center; height: 52px; padding: 0 15px; border-radius: 13px;
  font: 700 15px/1 var(--sans); color: var(--ink); background: rgba(255,255,255,.05);
}
.dr-fieldbad-btn {
  display: inline-flex; align-items: center; height: 52px; padding: 0 22px; border-radius: 13px;
  font: 800 14.5px/1 var(--sans); color: #fff; background: linear-gradient(180deg,#9a72ff,#7C4DFF);
}

/* ── motion ─────────────────────────────────────────────────────────────── */
.dr-motion { background: var(--panel2); border-radius: 11px; padding: 12px 14px; box-shadow: inset 0 0 0 1px var(--line); }
.dr-motion-h { display: flex; align-items: baseline; gap: 10px; font-family: var(--mono); font-size: 11.5px; color: var(--purple-l); margin-bottom: 9px; }
.dr-motion-h i { font-style: normal; color: var(--ink4); }
.dr-motion-track { position: relative; height: 26px; border-radius: 6px; background: rgba(255,255,255,.04); }
.dr-mv { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 6px; background: var(--accent, #b18cff); }
.dr-motion.go .dr-mv.q { animation: drRun var(--dur-quick, .15s) ease-in-out both; }
.dr-motion.go .dr-mv.f { animation: drRun var(--dur-fast, .25s) ease-in-out both; }
.dr-motion.go .dr-mv.m { animation: drRun var(--dur, .4s) var(--ease-out, cubic-bezier(.33,1,.68,1)) both; }
.dr-motion.go .dr-mv.s { animation: drRun .3s cubic-bezier(.22,.61,.36,1) both; }
@keyframes drRun { from { transform: translateX(0); } to { transform: translateX(calc(100cqw - 26px)); } }
.dr-motion-track { container-type: inline-size; }

/* ── saved ──────────────────────────────────────────────────────────────── */
.dr-saved { display: inline-flex; align-items: center; gap: 5px; color: var(--green, #4be0a0); opacity: 0; transition: opacity var(--dur-fast, .25s) ease-in-out; }
.dr-saved.on { opacity: 1; }
.dr-saved-word { font-size: 12.5px; font-weight: 700; white-space: nowrap; max-width: 0; overflow: hidden; opacity: 0; transition: max-width .3s cubic-bezier(.22,.61,.36,1), opacity .22s ease-in-out; }
.dr-saved.wide .dr-saved-word { max-width: 60px; opacity: 1; }

/* ── brand ──────────────────────────────────────────────────────────────── */
.dr-mark { display: inline-flex; color: var(--ink); }
.dr-mark.on { color: var(--accent, #b18cff); filter: drop-shadow(0 4px 10px rgba(124,77,255,.35)); }

@media (prefers-reduced-motion: reduce) {
  .dr-tabind, .dr-cmtcard, .dr-saved-word, .dr-mv { transition: none !important; animation: none !important; }
  .dr-skel { animation: none; }
}

/* ── The prompt dock's two faces ───────────────────────────────────────────
   The specimen had drifted: chips a couple of pixels short of the app's, a
   chevron on every one of them, no References, and no sign that the video step
   is a different row of controls with the keyframes beside it. It is measured
   off the real thing now — same 36px chip, same 10px corner, the chevron only
   where a setting is being scanned. */
.dr-chip { height: 36px; }
.dr-chip--icon { width: 36px; padding: 0; justify-content: center; font-size: 16px; font-weight: 800; }
.dr-chip--icon > span { overflow: visible; }
.dr-steplabel {
  margin: 4px 0 -4px; font: 700 9.5px var(--mono, monospace); letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink4);
}
.dr-steplabel + .dr-dock, .dr-steplabel + .dr-dockwrap { margin-top: 8px; }
/* The keyframes are a SIBLING of the prompt panel, never a column inside it. */
.dr-dockwrap { display: flex; align-items: stretch; gap: 12px; width: 100%; min-width: 0; }
.dr-dockwrap > .dr-dock { flex: 1; min-width: 0; }
.dr-kfcol { flex: 0 0 128px; width: 128px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.dr-kfcell { display: flex; flex-direction: column; gap: 6px; }
.dr-kf-label {
  font: 800 9.5px var(--mono, monospace); letter-spacing: .1em; text-transform: uppercase; color: var(--ink4);
}
.dr-kf-box {
  width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
  transition: box-shadow var(--dur-fast, .25s) ease-in-out;
}
.dr-kf-box:hover { box-shadow: inset 0 0 0 2px var(--purple-l); }
/* Which frame you are editing — it keeps the ring with the pointer elsewhere. */
.dr-kf-box.is-active { box-shadow: inset 0 0 0 2px var(--purple-l), 0 0 0 3px rgba(177,140,255,.16); }
.dr-kf-plus { font-size: 20px; font-weight: 300; color: var(--ink4); }

/* ── Toasts ────────────────────────────────────────────────────────────────
   The specimen is the real object at real size — same 38px row, same 10px
   corner, same kbd chips — with a line under each saying when it is the right
   one to raise. Shown in the page flow rather than only on a click, because a
   rule you have to trigger to read is a rule nobody reads. */
.dr-toastwrap { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.dr-toast {
  display: inline-flex; align-items: center; gap: 10px;
  max-width: min(420px, 92vw); height: 38px; padding: 0 8px 0 14px;
  border-radius: 10px; background: var(--panel2, #161619);
  box-shadow: 0 20px 44px -20px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.1);
  font: 600 12.5px/1 var(--sans); color: var(--ink2);
}
.dr-toast-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-toast-act, .dr-toast-x {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 8px; border: 0; border-radius: 7px; cursor: pointer;
  font: 700 12px var(--sans); color: var(--ink); background: rgba(255,255,255,.08);
  transition: background var(--dur-fast, .25s) ease-in-out;
}
.dr-toast-act:hover, .dr-toast-x:hover { background: rgba(255,255,255,.15); }
.dr-toast kbd {
  font: 600 10px/1 var(--mono, monospace); color: var(--ink4);
  padding: 3px 4px; border-radius: 4px; background: rgba(255,255,255,.07);
}
/* The one variant that carries colour — and it carries it WHOLE. Founder: "this
   entire toast should be red since it's destructive." */
.dr-toast.is-danger {
  background: var(--danger-bg, #2b1519);
  color: var(--danger-ink, #ffd0d0);
  box-shadow: 0 20px 44px -20px rgba(0,0,0,.85), inset 0 0 0 1px rgba(255,107,107,.42);
}
.dr-toast.is-danger .dr-toast-act { color: var(--danger-on, #1a0b0d); background: var(--danger, #ff6b6b); }
.dr-toast.is-danger .dr-toast-act:hover { filter: brightness(1.08); }
.dr-toast.is-danger .dr-toast-act kbd { color: var(--danger-on, #1a0b0d); background: rgba(0,0,0,.18); }
.dr-toast.is-danger .dr-toast-x { color: var(--danger-ink, #ffd0d0); background: rgba(255,107,107,.14); }
.dr-toast.is-danger .dr-toast-x:hover { background: rgba(255,107,107,.24); }
.dr-toast.is-danger .dr-toast-x kbd { color: var(--danger-ink, #ffd0d0); background: rgba(255,107,107,.16); }
.dr-toast-when { font-size: 12px; line-height: 1.5; color: var(--ink4); max-width: 70ch; }
/* The live one, raised where the app raises it. */
.dr-toast-live {
  position: fixed; right: 20px; bottom: 20px; z-index: 9600;
  animation: drToastIn .22s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes drToastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .dr-toast-live { animation: none; } }