.vi-shell { --vi-header-clearance: 96px; }
.vi-shell .vi-topbar { height: auto; min-height: 64px; padding-block: 10px; gap: 12px; flex-wrap: wrap; }
.vi-shell .vi-topbar-right { margin-left: auto; gap: 12px; }
.vi-beta-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; }
.vi-beta-action { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 8px 12px; border: 1px solid var(--vi-line); border-radius: 6px; background: var(--vi-surface); color: var(--vi-ink-2); font: inherit; font-size: 12px; line-height: 1.4; letter-spacing: 0; font-weight: 600; text-decoration: none; }
.vi-beta-action svg { flex-shrink: 0; }
.vi-beta-feedback { background: var(--vi-accent-soft); border-color: var(--vi-accent); color: var(--vi-accent-text); }
.vi-beta-action[aria-current="page"] { color: var(--vi-accent-text); border-color: var(--vi-accent-text); }
@media (hover: hover) and (pointer: fine) { .vi-beta-action:hover { border-color: var(--vi-accent-text); color: var(--vi-accent-text); } }
@media (max-width: 1399px) {
  .vi-shell { --vi-header-clearance: 160px; }
  .vi-shell .vi-topbar { row-gap: 8px; }
  .vi-beta-actions { order: 3; flex-basis: 100%; margin-left: 0; justify-content: flex-end; padding-top: 8px; border-top: 1px solid var(--vi-line); }
}
@media (max-width: 900px) {
  .vi-beta-action { flex: 1; min-width: 0; padding-inline: 8px; }
  .vi-beta-actions { align-items: stretch; }
}