/* Versionary — bottom bar + button set
   Light: "2b Violet on warm"   Dark: "3b 2b dark · app neutral"
   Dark mode follows the app convention: body.dark-mode */

.vbar, .vbtn-scope {
  --vb-bar-bg: #fbfaf7;
  --vb-bar-border: rgba(60,50,30,.10);
  --vb-sep: rgba(60,50,30,.14);
  --vb-tx: #1a1a2e;
  --vb-mut: #6b665a;

  --vb-pri-bg: #5b4dc7;  --vb-pri-bg-h: #4f42b3;  --vb-pri-tx: #ffffff;
  --vb-pri-shadow: 0 1px 2px rgba(91,77,199,.35), inset 0 1px 0 rgba(255,255,255,.18);

  --vb-apr-bg: #e3f4ec;  --vb-apr-bg-h: #d3eee2;  --vb-apr-tx: #046c4e;  --vb-apr-bd: rgba(5,150,105,.28);
  --vb-sec-bg: #ffffff;  --vb-sec-bg-h: #f6f4ef;  --vb-sec-tx: #1a1a2e;  --vb-sec-bd: rgba(60,50,30,.15);
  --vb-gho-tx: #5a5648;  --vb-gho-tx-h: #1a1a2e;  --vb-gho-bg-h: rgba(60,50,30,.06);
  --vb-dan-bg: #fdf0ef;  --vb-dan-bg-h: #fbe3e1;  --vb-dan-tx: #b91c1c;  --vb-dan-bd: rgba(220,38,38,.28);

  --vb-focus: rgba(91,77,199,.45);
  --vb-sans: 'Geist', system-ui, -apple-system, sans-serif;
  --vb-mono: 'JetBrains Mono', 'Space Mono', ui-monospace, monospace;
}

body.dark-mode .vbar, body.dark-mode .vbtn-scope {
  --vb-bar-bg: #111318;
  --vb-bar-border: rgba(255,255,255,.08);
  --vb-sep: rgba(255,255,255,.10);
  --vb-tx: #e8e8ec;
  --vb-mut: rgba(255,255,255,.50);

  --vb-pri-bg: #6d5ee8;  --vb-pri-bg-h: #7d6ff0;  --vb-pri-tx: #ffffff;
  --vb-pri-shadow: 0 1px 2px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.16);

  --vb-apr-bg: rgba(52,211,153,.11);  --vb-apr-bg-h: rgba(52,211,153,.18);  --vb-apr-tx: #34d399;  --vb-apr-bd: rgba(52,211,153,.28);
  --vb-sec-bg: #1a1c23;  --vb-sec-bg-h: #23252d;  --vb-sec-tx: #e8e8ec;  --vb-sec-bd: rgba(255,255,255,.10);
  --vb-gho-tx: rgba(255,255,255,.70);  --vb-gho-tx-h: #e8e8ec;  --vb-gho-bg-h: rgba(255,255,255,.06);
  --vb-dan-bg: rgba(240,82,82,.10);  --vb-dan-bg-h: rgba(240,82,82,.17);  --vb-dan-tx: #f87171;  --vb-dan-bd: rgba(240,82,82,.30);

  --vb-focus: rgba(139,123,242,.55);
}

/* ---------- bar ---------- */
.vbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 10px 14px; background: var(--vb-bar-bg); border-top: 1px solid var(--vb-bar-border);
  color: var(--vb-tx); font-family: var(--vb-sans); box-sizing: border-box;
}
.vbar-left, .vbar-right { display: flex; align-items: center; gap: 8px; }
.vbar-left { gap: 12px; }
.vbar-sep { width: 1px; height: 16px; background: var(--vb-sep); flex-shrink: 0; }
.vbar-status { font: 500 11px var(--vb-mono); color: var(--vb-mut); white-space: nowrap; }
.vbar-status b { font-weight: 500; color: var(--vb-tx); }

/* ---------- buttons ---------- */
.vbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 32px; padding: 0 14px; border-radius: 8px; border: 1px solid transparent;
  font: 500 12px var(--vb-sans); white-space: nowrap; cursor: pointer; box-sizing: border-box;
  transition: background-color .12s, border-color .12s, color .12s;
}
.vbtn svg { width: 12px; height: 12px; flex-shrink: 0; }
.vbtn:focus-visible { outline: 2px solid var(--vb-focus); outline-offset: 2px; }
.vbtn:disabled, .vbtn[aria-disabled="true"] { opacity: .45; cursor: default; pointer-events: none; }
body.dark-mode .vbtn:disabled, body.dark-mode .vbtn[aria-disabled="true"] { opacity: .4; }

.vbtn-primary { background: var(--vb-pri-bg); border-color: var(--vb-pri-bg); color: var(--vb-pri-tx); box-shadow: var(--vb-pri-shadow); }
.vbtn-primary:hover { background: var(--vb-pri-bg-h); border-color: var(--vb-pri-bg-h); }

.vbtn-approve { background: var(--vb-apr-bg); border-color: var(--vb-apr-bd); color: var(--vb-apr-tx); }
.vbtn-approve:hover { background: var(--vb-apr-bg-h); }

.vbtn-secondary { background: var(--vb-sec-bg); border-color: var(--vb-sec-bd); color: var(--vb-sec-tx); }
.vbtn-secondary:hover { background: var(--vb-sec-bg-h); }

.vbtn-ghost { background: transparent; color: var(--vb-gho-tx); }
.vbtn-ghost:hover { background: var(--vb-gho-bg-h); color: var(--vb-gho-tx-h); }

.vbtn-danger { background: var(--vb-dan-bg); border-color: var(--vb-dan-bd); color: var(--vb-dan-tx); }
.vbtn-danger:hover { background: var(--vb-dan-bg-h); }

.vbtn-icon { width: 32px; padding: 0; }
.vbtn-sm { height: 26px; padding: 0 10px; border-radius: 6px; font-size: 11px; }
.vbtn-lg { height: 36px; padding: 0 16px; font-size: 13px; }