@import url("../tokens/fonts.css");

/* ==========================================================================
   Bevel — retro desktop chrome, rebuilt with modern manners.
   Every colour, space, radius and bevel comes from tokens.css.
   Light falls from the top-left: raised = hilite top-left + shade bottom-right;
   pressed / sunk = the same two lines swapped.
   ========================================================================== */

:root {
  --bv-snap: cubic-bezier(.2, .9, .3, 1);   /* travel: knobs, toasts */
  --bv-out: cubic-bezier(.4, 0, 1, 1);      /* exits */
  --bv-t-hover: 120ms;
  --bv-t-knob: 140ms;
  --bv-t-toast: 180ms;
  --bv-t-zoom: 240ms;                       /* zoom-rect, stepped */
  --bv-zoom-steps: 6;
  --bv-hover: color-mix(in srgb, var(--chrome) 72%, var(--hilite));
  --bv-press: color-mix(in srgb, var(--chrome) 88%, var(--shade));
  --bv-raise: var(--bevel-out), inset -2px -2px 0 color-mix(in srgb, var(--shade) 35%, transparent);
  --bv-sink: var(--bevel-in), inset 2px 2px 0 color-mix(in srgb, var(--shade) 35%, transparent);
  --bv-dither: color-mix(in srgb, var(--shade) 22%, transparent);
  color-scheme: light;
}
[data-theme="dark"] { color-scheme: dark; --bv-hover: color-mix(in srgb, var(--chrome) 80%, var(--hilite)); --bv-dither: color-mix(in srgb, #000 40%, transparent); }

body {
  margin: 0;
  background: var(--desk);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 20px;
  -webkit-font-smoothing: antialiased;
}
.bv-ico { display: inline-block; flex: none; width: 16px; height: 16px; shape-rendering: crispEdges; fill: currentColor; vertical-align: middle; }
.bv-ico--lg { width: 32px; height: 32px; }

/* ---------- layout helpers & textures ---------- */
.bv-stage { box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-6); }
.bv-stage--top { align-items: flex-start; }
.bv-col { display: flex; flex-direction: column; gap: var(--space-3); }
.bv-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.bv-spacer { flex: 1; }
.bv-col > .bv-btn:not(.bv-btn--block) { align-self: flex-start; }
.bv-cap { width: 100%; font: 700 11px/16px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.bv-title { margin: 0; font: 800 22px/28px var(--font-ui); letter-spacing: -.01em; }
.bv-display { margin: 0; font: 600 40px/44px var(--font-pixel); }
.bv-mono { font: 500 12px/16px var(--font-mono); }
.bv-soft { color: var(--ink-soft); }
.bv-desk { background-color: var(--desk); background-image: conic-gradient(var(--bv-dither) 25%, transparent 0 50%, var(--bv-dither) 0 75%, transparent 0); background-size: 4px 4px; }
.bv-well { box-sizing: border-box; background: var(--well); border: 1px solid var(--stroke); box-shadow: var(--bevel-well); }
.bv-rule { height: 0; border: 0; border-top: 1px solid var(--shade); border-bottom: 1px solid var(--hilite); margin: var(--space-2) 0; }
:where(.bv-btn, .bv-iconbtn, .bv-tab, .bv-seg__opt, .bv-menubar__item, .bv-menu__item, .bv-win__box, .bv-tag__x):focus-visible { outline: 1px dotted var(--ink); outline-offset: -5px; }
.bv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Button ---------- */
.bv-btn {
  --h: 30px;
  position: relative; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--h); min-width: 72px; padding: 0 var(--space-3);
  border: 1px solid var(--stroke); border-radius: var(--radius-md);
  background: var(--chrome); color: var(--ink); box-shadow: var(--bv-raise);
  font: 600 13px/16px var(--font-ui); text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--bv-t-hover) linear;
}
.bv-btn__in { display: inline-flex; align-items: center; gap: 6px; }
.bv-btn:hover { background: var(--bv-hover); }
.bv-btn:active, .bv-btn.is-pressed { background: var(--bv-press); box-shadow: var(--bv-sink); transition: none; }
.bv-btn:active .bv-btn__in, .bv-btn.is-pressed .bv-btn__in { transform: translateY(1px); }
.bv-btn--sm { --h: 24px; min-width: 0; padding: 0 var(--space-2); font-size: 12px; }
.bv-btn--lg { --h: 38px; padding: 0 var(--space-4); font-size: 14px; }
.bv-btn--block { display: flex; width: 100%; }
.bv-btn--primary {
  background: var(--accent); color: var(--on-accent);
  --bv-raise: inset 1px 1px 0 color-mix(in srgb, var(--accent) 55%, #fff), inset -1px -1px 0 color-mix(in srgb, var(--accent) 55%, #000), inset -2px -2px 0 color-mix(in srgb, var(--accent) 80%, #000);
  --bv-sink: inset 1px 1px 0 color-mix(in srgb, var(--accent) 55%, #000), inset -1px -1px 0 color-mix(in srgb, var(--accent) 70%, #fff), inset 2px 2px 0 color-mix(in srgb, var(--accent) 80%, #000);
  box-shadow: var(--bv-raise), 0 0 0 2px var(--desk-ring, var(--chrome)), 0 0 0 3px var(--stroke);
  margin: 3px;
}
.bv-btn--primary:hover { background: color-mix(in srgb, var(--accent) 88%, var(--hilite)); }
.bv-btn--primary:active, .bv-btn--primary.is-pressed { background: color-mix(in srgb, var(--accent) 86%, #000); box-shadow: var(--bv-sink), 0 0 0 2px var(--desk-ring, var(--chrome)), 0 0 0 3px var(--stroke); }
.bv-btn--danger { background: var(--danger); color: var(--on-accent);
  --bv-raise: inset 1px 1px 0 color-mix(in srgb, var(--danger) 55%, #fff), inset -1px -1px 0 color-mix(in srgb, var(--danger) 55%, #000);
  --bv-sink: inset 1px 1px 0 color-mix(in srgb, var(--danger) 55%, #000), inset -1px -1px 0 color-mix(in srgb, var(--danger) 70%, #fff); }
.bv-btn--danger:hover { background: color-mix(in srgb, var(--danger) 88%, var(--hilite)); }
.bv-btn--danger:active, .bv-btn--danger.is-pressed { background: color-mix(in srgb, var(--danger) 86%, #000); }
.bv-btn--ghost { background: transparent; border-color: transparent; box-shadow: none; }
.bv-btn--ghost:hover { background: var(--bv-hover); border-color: var(--stroke); box-shadow: var(--bv-raise); }
.bv-btn--ghost:active, .bv-btn--ghost.is-pressed { border-color: var(--stroke); }
.bv-btn:disabled, .bv-btn.is-disabled, .bv-iconbtn:disabled {
  cursor: default; background: var(--chrome); color: var(--ink-soft); border-color: color-mix(in srgb, var(--stroke) 45%, var(--chrome));
  box-shadow: var(--bevel-out); text-shadow: 1px 1px 0 var(--hilite);
}
.bv-btn:disabled .bv-btn__in, .bv-iconbtn:disabled .bv-ico { transform: none; }
.bv-btn--ghost:disabled { background: transparent; box-shadow: none; border-color: transparent; }

/* ---------- IconButton ---------- */
.bv-iconbtn {
  --s: 30px;
  box-sizing: border-box; display: inline-grid; place-items: center; width: var(--s); height: var(--s); padding: 0;
  border: 1px solid var(--stroke); border-radius: var(--radius-sm); background: var(--chrome); color: var(--ink); box-shadow: var(--bv-raise);
  cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--bv-t-hover) linear;
}
.bv-iconbtn--sm { --s: 24px; }
.bv-iconbtn--lg { --s: 38px; }
.bv-iconbtn:hover { background: var(--bv-hover); }
.bv-iconbtn:active, .bv-iconbtn.is-pressed, .bv-iconbtn[aria-pressed="true"] { background: var(--bv-press); box-shadow: var(--bv-sink); transition: none; }
.bv-iconbtn:active .bv-ico, .bv-iconbtn.is-pressed .bv-ico, .bv-iconbtn[aria-pressed="true"] .bv-ico { transform: translateY(1px); }
.bv-iconbtn[aria-pressed="true"] { color: var(--accent); }
.bv-iconbtn--ghost { background: transparent; border-color: transparent; box-shadow: none; }
.bv-iconbtn--ghost:hover { border-color: var(--stroke); box-shadow: var(--bv-raise); }
.bv-iconbtn--ghost:active { border-color: var(--stroke); }

/* ---------- Toggle ---------- */
.bv-toggle { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; user-select: none; font-size: 14px; }
.bv-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bv-toggle__track { position: relative; box-sizing: border-box; flex: none; width: 40px; height: 22px; border: 1px solid var(--stroke); border-radius: var(--radius-md); background: var(--well); box-shadow: var(--bevel-well); }
.bv-toggle__track::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--accent); box-shadow: inset 1px 1px 0 color-mix(in srgb, var(--accent) 55%, #000); opacity: 0; transition: opacity var(--bv-t-knob) linear; }
.bv-toggle__knob { position: absolute; top: 2px; left: 2px; box-sizing: border-box; width: 16px; height: 16px; border: 1px solid var(--stroke); border-radius: 2px; background: var(--chrome); box-shadow: var(--bevel-out); transition: transform var(--bv-t-knob) var(--bv-snap); }
.bv-toggle__knob::after { content: ""; position: absolute; left: 4px; top: 3px; width: 6px; height: 8px; background: repeating-linear-gradient(90deg, var(--shade) 0 1px, transparent 1px 2px); opacity: .7; }
.bv-toggle input:checked + .bv-toggle__track::before { opacity: 1; }
.bv-toggle input:checked + .bv-toggle__track .bv-toggle__knob { transform: translateX(18px); }
.bv-toggle:active .bv-toggle__knob { box-shadow: var(--bevel-in); background: var(--bv-press); }
.bv-toggle input:focus-visible + .bv-toggle__track { outline: 1px dotted var(--ink); outline-offset: 2px; }
.bv-toggle.is-disabled { cursor: default; color: var(--ink-soft); }
.bv-toggle.is-disabled .bv-toggle__track { opacity: .55; }

/* ---------- Checkbox & Radio ---------- */
.bv-check { position: relative; display: inline-flex; align-items: flex-start; gap: var(--space-2); cursor: pointer; user-select: none; font-size: 14px; line-height: 20px; }
.bv-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bv-check__box { position: relative; box-sizing: border-box; flex: none; display: grid; place-items: center; width: 18px; height: 18px; margin-top: 1px; border: 1px solid var(--stroke); border-radius: var(--radius-sm); background: var(--well); box-shadow: var(--bevel-well); color: var(--accent); }
.bv-check__box .bv-ico { grid-area: 1 / 1; visibility: hidden; }
.bv-check input:checked + .bv-check__box .bv-ico--check, .bv-check input:indeterminate + .bv-check__box .bv-ico--minus { visibility: visible; }
.bv-check input:checked + .bv-check__box .bv-ico--check { animation: bv-stamp 120ms steps(2, end); }
.bv-check:active .bv-check__box { background: var(--bv-press); box-shadow: var(--bevel-in), inset 2px 2px 0 color-mix(in srgb, var(--shade) 40%, transparent); }
.bv-check--radio .bv-check__box { border-radius: var(--radius-round); }
.bv-check--radio .bv-check__box::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: inset -1px -1px 0 color-mix(in srgb, var(--accent) 60%, #000); transform: scale(0); }
.bv-check--radio input:checked + .bv-check__box::after { transform: scale(1); }
.bv-check input:focus-visible ~ .bv-check__label { outline: 1px dotted var(--ink); outline-offset: 1px; }
.bv-check__hint { display: block; font-size: 12px; line-height: 16px; color: var(--ink-soft); }
.bv-check.is-disabled { cursor: default; color: var(--ink-soft); }
.bv-check.is-disabled .bv-check__box { background: var(--chrome); color: var(--ink-soft); }
@keyframes bv-stamp { from { transform: scale(.6); } to { transform: none; } }

/* ---------- TextField ---------- */
.bv-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bv-field__label { font: 600 13px/16px var(--font-ui); }
.bv-field__box { position: relative; display: flex; align-items: center; gap: var(--space-2); box-sizing: border-box; min-height: 32px; padding: 0 var(--space-2); border: 1px solid var(--stroke); border-radius: var(--radius-sm); background: var(--well); box-shadow: var(--bevel-well); color: var(--ink-soft); }
.bv-field__input { flex: 1; min-width: 0; height: 30px; padding: 0; border: 0; background: transparent; color: var(--ink); font: 400 14px/20px var(--font-ui); outline: none; }
textarea.bv-field__input { height: auto; min-height: 76px; padding: 6px 0; resize: vertical; }
.bv-field__input::placeholder { color: var(--ink-soft); opacity: 1; }
.bv-field--mono .bv-field__input { font: 500 13px/20px var(--font-mono); }
.bv-field__box:focus-within { border-color: var(--accent); box-shadow: var(--bevel-well), 0 0 0 1px var(--accent); }
.bv-field__hint { display: flex; gap: 6px; align-items: center; font-size: 12px; line-height: 16px; color: var(--ink-soft); }
.bv-field.is-error .bv-field__box { border-color: var(--danger); box-shadow: var(--bevel-well), 0 0 0 1px var(--danger); }
.bv-field.is-error .bv-field__hint { color: var(--danger); font-weight: 600; }
.bv-field.is-shake .bv-field__box { animation: bv-shake 200ms steps(4, end); }
.bv-field.is-disabled .bv-field__box { background: var(--chrome); }
@keyframes bv-shake { 25% { transform: translateX(-3px); } 50% { transform: translateX(3px); } 75% { transform: translateX(-2px); } }

/* ---------- Tabs (folder tabs) ---------- */
.bv-tabs { min-width: 0; }
.bv-tabs__list { display: flex; align-items: flex-end; gap: 2px; padding: 0 var(--space-2); position: relative; z-index: 1; overflow-x: auto; scrollbar-width: none; }
.bv-tab {
  position: relative; box-sizing: border-box; flex: none; height: 26px; margin-bottom: -1px; padding: 0 var(--space-3);
  border: 1px solid var(--stroke); border-bottom-color: var(--stroke); border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: color-mix(in srgb, var(--chrome) 85%, var(--shade)); color: var(--ink-soft); font: 700 13px/16px var(--font-ui);
  box-shadow: inset 1px 1px 0 var(--hilite); cursor: pointer;
}
.bv-tab:hover { color: var(--ink); background: var(--chrome); }
.bv-tab[aria-selected="true"] { height: 30px; background: var(--chrome); color: var(--ink); border-bottom-color: var(--chrome); }
.bv-tabs__panel { box-sizing: border-box; padding: var(--space-4); border: 1px solid var(--stroke); background: var(--chrome); box-shadow: var(--bevel-out), var(--drop); }
.bv-tabs__panel[hidden] { display: none; }

/* ---------- SegmentedControl ---------- */
.bv-seg { align-self: flex-start; display: inline-flex; border: 1px solid var(--stroke); border-radius: var(--radius-md); background: var(--chrome); overflow: hidden; }
.bv-seg__opt { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 var(--space-3); border: 0; border-left: 1px solid var(--stroke); background: transparent; color: var(--ink); font: 600 13px/16px var(--font-ui); box-shadow: var(--bv-raise); cursor: pointer; }
.bv-seg__opt:first-child { border-left: 0; }
.bv-seg__opt:hover { background: var(--bv-hover); }
.bv-seg__opt[aria-checked="true"], .bv-seg__opt:active { background: var(--bv-press); box-shadow: var(--bv-sink); }
.bv-seg__opt[aria-checked="true"] > *, .bv-seg__opt:active > * { transform: translateY(1px); }
.bv-seg__opt[aria-checked="true"] { color: var(--accent); }
[data-theme="dark"] .bv-seg__opt[aria-checked="true"] { background: var(--well); }

/* ---------- Window (card) ---------- */
.bv-win { box-sizing: border-box; display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--stroke); background: var(--chrome); box-shadow: var(--bevel-out), var(--drop); }
.bv-win__bar { display: flex; align-items: center; gap: var(--space-2); height: 24px; padding: 0 6px; border-bottom: 1px solid var(--stroke); box-shadow: var(--bevel-out); flex: none; user-select: none; }
.bv-win__stripes { flex: 1; align-self: stretch; margin: 6px 0; min-width: 8px; }
.bv-win.is-active .bv-win__stripes { background: repeating-linear-gradient(180deg, var(--accent) 0 1px, transparent 1px 3px); }
.bv-win__title { display: inline-flex; align-items: center; gap: 6px; max-width: 70%; font: 700 13px/16px var(--font-ui); letter-spacing: .01em; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bv-win__title > span { overflow: hidden; text-overflow: ellipsis; }
.bv-win.is-active .bv-win__title { color: var(--ink); }
.bv-win__box { box-sizing: border-box; flex: none; display: grid; place-items: center; width: 14px; height: 14px; padding: 0; border: 1px solid var(--stroke); background: var(--chrome); box-shadow: var(--bevel-out); color: var(--ink); cursor: pointer; }
.bv-win__box .bv-ico { width: 12px; height: 12px; opacity: 0; }
.bv-win__box:hover .bv-ico, .bv-win__box:focus-visible .bv-ico { opacity: 1; }
.bv-win__box:active { box-shadow: var(--bevel-in); background: var(--bv-press); }
.bv-win:not(.is-active) .bv-win__box { visibility: hidden; }
.bv-win__tools { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; padding: 6px var(--space-2); border-bottom: 1px solid var(--shade); box-shadow: 0 1px 0 var(--hilite); }
.bv-win__body { box-sizing: border-box; flex: 1; min-height: 0; padding: var(--space-4); }
.bv-win__body--flush { padding: 0; }
.bv-win__status { display: flex; align-items: center; gap: var(--space-3); min-height: 22px; padding: 0 var(--space-2); border-top: 1px solid var(--shade); box-shadow: inset 0 1px 0 var(--hilite); font: 500 12px/16px var(--font-mono); color: var(--ink-soft); }
.bv-win__status > * { white-space: nowrap; }
.bv-win__status > * + * { padding-left: var(--space-3); border-left: 1px solid var(--shade); }
.bv-win.is-reveal .bv-win__bar ~ * { animation: bv-fade 120ms linear both; }
@keyframes bv-fade { from { opacity: 0; } }

/* zoom rects: an outline that grows from where the window came from */
.bv-zoom { position: fixed; z-index: 1000; box-sizing: border-box; border: 2px solid var(--ink); pointer-events: none; transform-origin: 0 0; animation: bv-zoom var(--bv-t-zoom) steps(var(--bv-zoom-steps), end) forwards; }
.bv-zoom--back { animation-direction: reverse; animation-duration: 160ms; }
@keyframes bv-zoom { from { transform: translate(var(--zx), var(--zy)) scale(var(--zs-x), var(--zs-y)); opacity: .9; } to { transform: none; opacity: 1; } }

/* ---------- List rows (shared by widgets and the example) ---------- */
.bv-list { margin: 0; padding: 2px; list-style: none; }
.bv-list__row { display: flex; align-items: center; gap: var(--space-2); min-height: 32px; padding: 4px var(--space-2); cursor: default; }
.bv-list__row:hover { background: var(--accent-soft); }
.bv-list__row.is-selected, .bv-list__row[aria-selected="true"] { background: var(--accent); color: var(--on-accent); }
.bv-list__row.is-selected .bv-soft, .bv-list__row[aria-selected="true"] .bv-soft { color: inherit; opacity: .85; }
.bv-list__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bv-list__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Badge & Tag ---------- */
.bv-badge { box-sizing: border-box; display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 6px; border: 1px solid var(--stroke); border-radius: var(--radius-sm); background: var(--chrome); box-shadow: var(--bevel-out); color: var(--ink); font: 700 11px/1 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.bv-badge__dot { width: 6px; height: 6px; background: var(--tone, var(--ink-soft)); box-shadow: inset -1px -1px 0 color-mix(in srgb, #000 30%, transparent); }
.bv-badge--count { min-width: 20px; justify-content: center; padding: 0 5px; background: var(--accent); color: var(--on-accent); border-color: var(--stroke); box-shadow: inset 1px 1px 0 color-mix(in srgb, var(--accent) 55%, #fff); font: 600 11px/1 var(--font-mono); letter-spacing: 0; }
.bv-badge.is-bumped { animation: bv-stamp 120ms steps(2, end); }
.bv-tag { box-sizing: border-box; display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 4px 0 8px; border: 1px solid var(--stroke); border-radius: var(--radius-sm); background: var(--well); box-shadow: var(--bevel-well); font: 500 12px/16px var(--font-mono); color: var(--ink); white-space: nowrap; }
.bv-tag--static { padding-right: 8px; }
.bv-tag__x { display: grid; place-items: center; width: 16px; height: 16px; padding: 0; border: 0; background: transparent; color: var(--ink-soft); cursor: pointer; }
.bv-tag__x:hover { color: var(--ink); background: var(--accent-soft); }
.bv-tag__x .bv-ico { width: 12px; height: 12px; }
.bv-tag.is-leaving { opacity: 0; transform: scale(.9); transition: opacity 120ms steps(2, end), transform 120ms steps(2, end); }

/* ---------- Avatar ---------- */
.bv-avatar { --s: 36px; position: relative; box-sizing: border-box; flex: none; display: inline-grid; place-items: center; width: var(--s); height: var(--s); border: 1px solid var(--stroke); border-radius: var(--radius-sm); background-color: var(--tone, var(--accent-soft)); background-image: conic-gradient(var(--bv-dither) 25%, transparent 0 50%, var(--bv-dither) 0 75%, transparent 0); background-size: 4px 4px; box-shadow: var(--bevel-out); color: var(--ink); font: 600 calc(var(--s) * .42)/1 var(--font-pixel); text-transform: uppercase; }
.bv-avatar__txt { padding: 1px 3px; background: var(--tone, var(--accent-soft)); }
.bv-avatar--sm { --s: 24px; }
.bv-avatar--lg { --s: 56px; }
.bv-avatar img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.bv-avatar__status { position: absolute; right: -3px; bottom: -3px; width: 8px; height: 8px; border: 1px solid var(--stroke); background: var(--st, var(--success)); }
.bv-avatars { display: inline-flex; }
.bv-avatars > .bv-avatar + .bv-avatar { margin-left: -6px; }
.bv-avatars > .bv-avatar { transition: transform var(--bv-t-hover) steps(2, end); }
.bv-avatars > .bv-avatar:hover { transform: translateY(-2px); z-index: 1; }

/* ---------- Toast ---------- */
.bv-toasts { position: fixed; right: var(--space-4); bottom: var(--space-4); z-index: 900; display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); max-width: calc(100vw - 2 * var(--space-4)); }
.bv-toast { box-sizing: border-box; display: flex; gap: var(--space-3); align-items: flex-start; width: 340px; max-width: 100%; padding: var(--space-3); border: 1px solid var(--stroke); border-radius: var(--radius-md); background: var(--chrome); box-shadow: var(--bevel-out), var(--drop-lg); color: var(--ink); }
.bv-toast__icon { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--stroke); background: var(--well); box-shadow: var(--bevel-well); color: var(--tone, var(--accent)); }
.bv-toast__main { flex: 1; min-width: 0; }
.bv-toast__title { font: 700 13px/18px var(--font-ui); }
.bv-toast__body { margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--ink-soft); }
.bv-toast__extra:not(:empty) { margin-top: var(--space-2); }
.bv-toast.is-entering { animation: bv-toast-in var(--bv-t-toast) var(--bv-snap) both; }
.bv-toast.is-leaving { animation: bv-toast-out 140ms var(--bv-out) both; }
@keyframes bv-toast-in { from { transform: translateY(12px); opacity: 0; } }
@keyframes bv-toast-out { to { transform: translateX(16px); opacity: 0; } }

/* ---------- Modal ---------- */
.bv-scrim { position: fixed; inset: 0; z-index: 800; display: grid; place-items: center; padding: var(--space-4); background-color: transparent; background-image: conic-gradient(color-mix(in srgb, #000 30%, transparent) 25%, transparent 0 50%, color-mix(in srgb, #000 30%, transparent) 0 75%, transparent 0); background-size: 2px 2px; }
.bv-scrim.is-entering { animation: bv-fade 120ms linear both; }
.bv-modal { width: 420px; max-width: 100%; box-shadow: var(--bevel-out), var(--drop-lg); }
.bv-modal.is-hidden { opacity: 0; }
.bv-modal__content { display: flex; gap: var(--space-4); align-items: flex-start; }
.bv-modal__glyph { flex: none; color: var(--tone, var(--accent)); }
.bv-modal__head { margin: 0 0 6px; font: 800 16px/20px var(--font-ui); }
.bv-modal__text { margin: 0; color: var(--ink-soft); }
.bv-modal__actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }

/* ---------- Progress (segmented copy bar) ---------- */
.bv-progress { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bv-progress__label { display: flex; justify-content: space-between; gap: var(--space-3); font-size: 13px; line-height: 16px; }
.bv-progress__label .bv-mono { color: var(--ink-soft); }
.bv-progress__track { position: relative; box-sizing: border-box; display: flex; gap: 2px; height: 20px; padding: 3px; border: 1px solid var(--stroke); background: var(--well); box-shadow: var(--bevel-well); overflow: hidden; }
.bv-progress--sm .bv-progress__track { height: 14px; padding: 2px; }
.bv-progress__seg { flex: 1; min-width: 0; background: transparent; }
.bv-progress__seg.is-on { background: var(--accent); box-shadow: inset 1px 1px 0 color-mix(in srgb, var(--accent) 60%, #fff), inset -1px -1px 0 color-mix(in srgb, var(--accent) 60%, #000); }
.bv-progress--danger .bv-progress__seg.is-on { background: var(--danger); box-shadow: none; }
.bv-progress.is-indeterminate .bv-progress__seg { display: none; }
.bv-progress__runner { display: none; position: absolute; top: 3px; bottom: 3px; left: 3px; width: 30%; background: repeating-linear-gradient(90deg, var(--accent) 0 10px, transparent 10px 12px); animation: bv-run 1.4s steps(14, end) infinite; }
.bv-progress.is-indeterminate .bv-progress__runner { display: block; }
@keyframes bv-run { from { transform: translateX(-100%); } to { transform: translateX(340%); } }

/* ---------- MenuBar & Menu (instant, no animation) ---------- */
.bv-menubar { position: relative; z-index: 50; display: flex; align-items: center; gap: 0; height: 26px; padding: 0 var(--space-2); border-bottom: 1px solid var(--stroke); background: var(--chrome); box-shadow: var(--bevel-out); font: 700 13px/16px var(--font-ui); }
.bv-menubar__item { height: 24px; padding: 0 10px; border: 0; background: transparent; color: var(--ink); font: inherit; cursor: default; }
.bv-menubar__item:hover { background: var(--accent-soft); }
.bv-menubar__item[aria-expanded="true"] { background: var(--accent); color: var(--on-accent); }
.bv-menubar__wrap { position: relative; }
.bv-menu { position: absolute; top: 100%; left: 0; z-index: 60; min-width: 200px; margin: 0; padding: 3px 0; list-style: none; border: 1px solid var(--stroke); background: var(--chrome); box-shadow: var(--bevel-out), var(--drop-lg); font: 400 13px/16px var(--font-ui); }
.bv-menu[hidden] { display: none; }
.bv-menu__item { display: flex; align-items: center; gap: var(--space-2); width: 100%; height: 24px; padding: 0 var(--space-3) 0 6px; border: 0; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: default; }
.bv-menu__item .bv-ico { width: 16px; visibility: hidden; }
.bv-menu__item[aria-checked="true"] .bv-ico { visibility: visible; }
.bv-menu__item:hover, .bv-menu__item:focus { background: var(--accent); color: var(--on-accent); outline: none; }
.bv-menu__item:disabled { color: var(--ink-soft); background: transparent; text-shadow: 1px 1px 0 var(--hilite); }
.bv-menu__key { margin-left: auto; padding-left: var(--space-4); font: 500 12px/16px var(--font-mono); opacity: .8; }
.bv-menu__sep { height: 0; margin: 3px 0; border-top: 1px dotted var(--shade); }
.bv-menubar__end { margin-left: auto; font: 500 12px/16px var(--font-mono); color: var(--ink); }

/* ---------- Widgets ---------- */
.bv-stat__label { font: 700 11px/16px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.bv-stat__row { display: flex; align-items: baseline; gap: var(--space-2); margin-top: 2px; }
.bv-stat__value { font: 800 30px/36px var(--font-ui); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.bv-stat__delta { display: inline-flex; align-items: center; gap: 2px; font: 600 12px/16px var(--font-mono); color: var(--ink); }
.bv-stat__delta .bv-ico { color: var(--success); width: 12px; height: 12px; }
.bv-stat__delta.is-down .bv-ico { color: var(--danger); }
.bv-stat__spark { display: block; width: 100%; height: 44px; margin-top: var(--space-3); padding: 4px; box-sizing: border-box; shape-rendering: crispEdges; }
.bv-stat__spark rect { fill: var(--accent); }
.bv-stat__spark rect.is-dim { fill-opacity: .4; }
.bv-stat__spark rect:hover { fill: var(--ink); fill-opacity: 1; }
.bv-cal__head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.bv-cal__month { flex: 1; font: 700 13px/16px var(--font-ui); text-align: center; }
.bv-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; padding: 4px; }
.bv-cal__dow { text-align: center; font: 600 11px/20px var(--font-mono); color: var(--ink-soft); }
.bv-cal__day { position: relative; display: grid; place-items: center; height: 28px; padding: 0; border: 1px solid transparent; background: transparent; color: var(--ink); font: 500 12px/1 var(--font-mono); cursor: pointer; }
.bv-cal__day:hover { background: var(--accent-soft); }
.bv-cal__day.is-out { color: var(--ink-soft); }
.bv-cal__day.is-today { border-color: var(--stroke); box-shadow: var(--bevel-out); background: var(--chrome); font-weight: 600; }
.bv-cal__day[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--stroke); box-shadow: var(--bv-sink); }
.bv-cal__day.has-dot::after { content: ""; position: absolute; bottom: 3px; width: 4px; height: 2px; background: currentColor; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .bv-progress.is-indeterminate .bv-progress__runner { width: 100%; left: 3px; right: 3px; transform: none; opacity: .5; }
}