:root{--vd-bg:#f7f9ff;--vd-card:#ffffff;--vd-accent:#1a73d9;--vd-good:#34a86e;--vd-bad:#d93025;--vd-muted:#d6e4ff;--vd-dash:#7aa7ff;--vd-text:#0b1324}
/* container */
.vd-wrap{background:var(--vd-bg);color:var(--vd-text);padding:16px;border-radius:16px;box-shadow:0 8px 24px rgba(16,24,40,.08);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif}
.vd-prompt{font-weight:700;margin-bottom:10px;color:var(--vd-text)}
/* stage */
.vd-stage{display:flex;gap:14px;flex-wrap:wrap;background:var(--vd-card);padding:14px;border-radius:12px;min-height:64px;border:1px solid var(--vd-muted);color:var(--vd-text)}
/* Order layout: pool over target */
.vd-wrap[data-vd-type="order"] .vd-stage{flex-direction:column}
/* drop zones */
.vd-pool,.vd-target{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-start;min-height:52px;padding:12px;border:2px dashed var(--vd-dash);background:#fff;border-radius:12px}
/* match columns */
.vd-col{flex:1;min-width:260px}
.vd-left .vd-slot{background:#fff;border:1px solid var(--vd-muted);border-radius:12px;padding:12px;margin-bottom:12px}
.vd-slot-label{display:block;font-size:15px;margin-bottom:8px;color:var(--vd-text);opacity:.95}
.vd-slot-drop{min-height:48px;display:flex;gap:10px;flex-wrap:wrap;padding:8px 10px;border:2px dashed var(--vd-dash);border-radius:10px;background:#fbfdff}
/* chips */
.vd-chip{border:1px solid var(--vd-muted);border-radius:999px;padding:10px 16px;background:#ffffff;color:var(--vd-text);cursor:grab;transition:transform .06s, box-shadow .2s, border-color .2s, background .2s;font-size:15px;line-height:1;box-shadow:0 1px 2px rgba(16,24,40,.06);font-weight:600}
.vd-chip:hover{box-shadow:0 2px 6px rgba(16,24,40,.12)}
.vd-chip:active{cursor:grabbing;transform:scale(0.98)}
.vd-chip:focus-visible{outline:2px solid var(--vd-accent);outline-offset:2px}
.vd-chip.vd-selected{outline:2px solid var(--vd-accent);background:#eef5ff}
.vd-dragging{opacity:.95}
/* controls */
.vd-controls{display:flex;gap:10px;align-items:center;margin-top:12px}
.vd-btn{background:var(--vd-accent);border:none;color:white;border-radius: 12px;padding: 10px 18px;font-weight: 600;cursor:pointer  font-size: 14px;
  line-height: 1.4;
}
.vd-btn.vd-reset{background:#6b7ea6}
.vd-score{margin-left:auto;font-weight:800;color:var(--vd-text)}
/* feedback */
.vd-correct{box-shadow:0 0 0 3px var(--vd-good) inset}
.vd-incorrect{box-shadow:0 0 0 3px var(--vd-bad) inset}
@media (max-width:600px){ .vd-stage{flex-direction:column} }

/* Feedback pill */
.vd-score{min-height:24px;margin-left:auto;font-weight:600;padding:8px 12px;border-radius:999px;border:1px solid transparent}
.vd-score.vd-good{background:#e6f4ea;border-color:#34a853;color:#137333}
.vd-score.vd-bad{background:#fff8e1;border-color:#fbbc04;color:#7a4b00}


/* Bell toggle */
.vd-controls{display:flex;gap:8px;align-items:center;margin-top:10px}
.vd-btn.vd-mute{min-width:36px;line-height:1;padding:6px 10px;border-radius:12px}

/* multiset dots & pager */
.vd-steps{display:flex;gap:8px;align-items:center;margin-right:8px}
.vd-step{width:10px;height:10px;border-radius:9999px;border:1px solid #D7DEEA;background:#fff;opacity:.9}
.vd-step.is-current{box-shadow:0 0 0 2px rgba(26,115,217,.15)}
.vd-step.is-done{background:#1a73d9;border-color:#1a73d9}
.vd-pager{display:flex;gap:8px;align-items:center;margin-left:auto}
.vd-pager .vd-btn{padding:.5rem .75rem;border:1px solid #dfe3ea;border-radius:8px;background:#f8fafc}
.vd-pager .vd-btn:disabled{opacity:.5}


/* multiset dots & pager */
.vd-steps{display:flex;gap:8px;align-items:center;margin-right:8px}
.vd-step{width:10px;height:10px;border-radius:9999px;border:1px solid #D7DEEA;background:#fff;opacity:.9}
.vd-step.is-current{box-shadow:0 0 0 2px rgba(26,115,217,.15)}
.vd-step.is-done{background:#1a73d9;border-color:#1a73d9}
.vd-pager{display:flex;gap:8px;align-items:center;margin-left:auto}
.vd-pager .vd-btn{padding:.5rem .75rem;border:1px solid #dfe3ea;border-radius:8px;background:#f8fafc}
.vd-pager .vd-btn:disabled{opacity:.5}

/* hide progress dots per request */
.vd-steps{display:none !important}


/* === MONOLITHIC MERGE: verbabros-skin.css (verbabros 1.4.5) inlined below === */
:root {
  --vb-primary: #1a73d9;
  --vb-dark: #0F172A;
  --vb-muted: #e8eef8;
  --vb-radius: 10px;
}
.vd-multi{ position:relative; }
.vd-wrap{ position:relative; overflow:visible; font-family:"Noto Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif; }

/* Buttons */
.vd-btn{ border-radius:var(--vb-radius); padding:8px 14px; border:1px solid transparent; line-height:1; font-weight:600; transition:filter .15s ease; }
.vd-btn:hover{ filter:brightness(.96); }
.vd-btn.vd-check,.vd-btn.is-primary{ background:var(--vb-primary); color:#fff; border-color:var(--vb-primary); }
.vd-btn.vd-reset,.vd-pager .vd-btn{ background:#f2f5fb; color:#223; border-color:#d7deea; }

/* Controls & pager */
.vd-controls{ display:flex; gap:10px; align-items:center; padding:8px 0 40px 0; }
.vd-pager{ position:absolute; right:10px; bottom:8px; display:flex; align-items:center; gap:10px; }
.vd-count{ opacity:.85; font-weight:600; }

/* Toolbar */
.vd-toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:8px 12px; margin:-10px -10px 10px -10px; border-bottom:1px solid rgba(16,24,40,.06);
}
.vd-toolbar .vd-title{ font-weight:600; color:#0F172A; opacity:.9; }
.vd-toolbar-right{ display:flex; align-items:center; gap:8px; }

/* Bell in toolbar: pink bg + dark icon */
.vd-toolbar .vd-bell-fixed{
  position:static !important;
  width:32px; height:32px;
  background:#F9C8FF !important;
  color:#0F172A !important;
  border-radius:9999px;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.12);
}
.vd-toolbar .vd-bell-fixed svg{ width:18px; height:18px; display:block; }

/* Mute slash */

/* v1.4.1: pointer + focus ring for bell */
.vd-toolbar .vd-bell-fixed{ cursor:pointer; }
.vd-toolbar .vd-bell-fixed:focus{ outline:2px solid rgba(26,115,217,.4); outline-offset:2px; }
.vd-toolbar .vd-bell-fixed svg{ pointer-events:none; } /* so click hits the button */

/* v1.4.2 — Mobile polish */
/* 1) Tokens dropped into the destination: no hover/active repaint */
.vd-stage .vd-token:hover,
.vd-stage .vd-token:active,
.vd-stage .vd-drop .vd-token,
.vd-stage .vd-target .vd-token,
.vd-stage .vd-slot .vd-token,
.vd-stage .vd-token.is-active{
  background: #fff !important;
  color: inherit !important;
  box-shadow: none !important;
  outline: 0 !important;
}

/* 2) Success/Fail message: compact, no big bubble */
.vd-controls .vd-msg,
.vd-controls .vd-result,
.vd-controls .vd-feedback,
.vd-controls .vd-success,
.vd-controls .vd-error,
.vd-controls [class*="success"],
.vd-controls [class*="correct"],
.vd-controls [class*="error"],
.vd-controls [class*="fail"]{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 0 12px !important;
  border-radius: 0 !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}
.vd-controls .vd-success,
.vd-controls [class*="success"],
.vd-controls [class*="correct"]{
  color: #15803d !important; /* green-700 */
}
.vd-controls .vd-error,
.vd-controls [class*="error"],
.vd-controls [class*="fail"]{
  color: #b91c1c !important; /* red-700 */
}
/* small icon bullets if the renderer injects a checkmark/emoji */
.vd-controls .vd-msg img,
.vd-controls .vd-result img,
.vd-controls .vd-success img,
.vd-controls .vd-error img{ width: 18px; height: 18px; }

/* v1.4.3 — Stronger mobile overrides */

/* Kill default tap highlight and focus ring on tokens */
.vd-wrap .vd-token{ -webkit-tap-highlight-color: transparent; }
.vd-wrap .vd-token:focus,
.vd-wrap .vd-token:focus-visible{ outline: 0 !important; box-shadow: none !important; }

/* When token is inside any drop/target/answer area: keep neutral look */
.vd-wrap .vd-stage [class*="drop"] .vd-token,
.vd-wrap .vd-stage [class*="target"] .vd-token,
.vd-wrap .vd-stage [class*="answer"] .vd-token,
.vd-wrap .vd-stage .vd-drop .vd-token,
.vd-wrap .vd-stage .vd-target .vd-token,
.vd-wrap .vd-stage .vd-slot .vd-token{
  background: #fff !important;
  color: inherit !important;
  box-shadow: none !important;
}

/* Remove hover/active on touch devices */
@media (hover: none){
  .vd-wrap .vd-token:hover,
  .vd-wrap .vd-token:active{
    background: #fff !important;
    color: inherit !important;
    box-shadow: none !important;
  }
}

/* Compact success / error messages (wider selector sweep) */
.vd-controls .vd-msg,
.vd-controls .vd-result,
.vd-controls .vd-feedback,
.vd-controls .vd-success,
.vd-controls .vd-error,
.vd-controls [class*="message"],
.vd-controls [class*="result"],
.vd-controls [class*="success"],
.vd-controls [class*="correct"],
.vd-controls [class*="error"],
.vd-controls [class*="fail"]{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 0 12px !important;
  border-radius: 0 !important;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}
.vd-controls [class*="success"],
.vd-controls [class*="correct"]{ color: #15803d !important; }
.vd-controls [class*="error"],
.vd-controls [class*="fail"]{ color: #b91c1c !important; }

/* v1.4.4 — Targeted to your markup (vd-target > .vd-chip) */
.vd-wrap .vd-chip{ -webkit-tap-highlight-color: transparent; }
.vd-wrap .vd-chip:focus, .vd-wrap .vd-chip:focus-visible{ outline:0 !important; box-shadow:none !important; }

/* When a chip is inside the destination (.vd-target), keep it neutral on touch & hover */
.vd-stage .vd-target .vd-chip,
.vd-stage .vd-target .vd-chip:hover,
.vd-stage .vd-target .vd-chip:active,
.vd-stage .vd-target .vd-chip:focus{
  background:#fff !important;
  color:inherit !important;
  box-shadow:none !important;
  outline:0 !important;
}

/* Also avoid hover flash for chips anywhere on touch devices */
@media (hover:none){
  .vd-wrap .vd-chip:hover,
  .vd-wrap .vd-chip:active{
    background:#fff !important;
    color:inherit !important;
    box-shadow:none !important;
  }
}

/* v1.4.5 — Remove green/red background bubble for .vd-score */
.vd-controls .vd-score{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-left: 12px !important;
  border-radius: 0 !important;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}
.vd-controls .vd-score.vd-good{ color: #15803d !important; } /* green-700 */
.vd-controls .vd-score.vd-bad{ color: #b91c1c !important; } /* red-700 */
.vd-controls .vd-score img.emoji{ width:18px; height:18px; }


/* v1.4.5-toolbarspace — add spacing under toolbar */
.vd-toolbar {
  margin-bottom: 12px !important;
}

@media (max-width: 768px) {
  .vd-toolbar {
    margin-bottom: 6px !important;
  }
}


/* v1.4.5-toolbarspace-noborder — remove toolbar bottom border */
.vd-toolbar {
  border-bottom: none !important;
}


/* === Toolbar & Bell placement/skin (monolithic patch) === */
.vd-toolbar{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-bottom:10px;border-bottom:none!important}
.vd-toolbar-right{display:flex;align-items:center;gap:8px}

/* Bell button: pink badge with dark icon */
.vd-btn.vd-mute.vd-bell-fixed{width:34px;height:34px;padding:0!important;border-radius:9999px!important;background:#F9C8FF!important;color:#0F172A!important;border:none!important;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.12)}

/* SVG icon sizing/colors */
.vd-btn.vd-mute.vd-bell-fixed svg{width:18px;height:18px;display:block;fill:currentColor}
.vd-btn.vd-mute.vd-bell-fixed svg .mute{stroke:currentColor;opacity:0}

/* When muted: show slash */
.vd-btn.vd-mute.vd-bell-fixed[aria-pressed="true"] svg .mute{opacity:1}

/* Ensure legacy bell in controls disappears if present */
.vd-controls .vd-btn.vd-mute{display:none!important}