/* BUFF OS v76 — search overlay and the two new top-bar buttons. */

/* five controls now share the bar, so on a phone they tighten up a little: still a
   thumb-sized target, but the title is not squeezed to nothing */
.topbar .nav-actions .v76-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 440px) {
  .topbar .nav-actions { gap: 7px !important; }
  .topbar .nav-actions .iconbtn { width: 40px !important; height: 40px !important; }
  .topbar .nav-actions .iconbtn svg { width: 19px; height: 19px; }
  .topbar .nav-actions .ver-pill { height: 40px !important; padding: 0 11px !important; font-size: 12px !important; }
  .topbar .nav-actions .ver-pill b { font-size: 13px; }
}
@keyframes v76spin { to { transform: rotate(360deg); } }
.v76-btn.spin svg { animation: v76spin .7s linear infinite; }

/* ---- the overlay ---- */
html.v76-open, html.v76-open body { overflow: hidden !important; }
.v76-s { position: fixed; inset: 0; z-index: 320; display: none; flex-direction: column; background: var(--bg, #0b0d12); }
.v76-s.on { display: flex; }
.v76-bar { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; padding: calc(env(safe-area-inset-top) + 10px) 14px 10px;
  border-bottom: 1px solid var(--line2, rgba(255, 255, 255, .08)); }
.v76-field { position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; height: 44px; border-radius: 14px;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1); }
.v76-field:focus-within { border-color: rgba(var(--accent-rgb), .6); }
.v76-field svg { flex: 0 0 auto; width: 19px; height: 19px; margin-left: 12px; fill: none; stroke: var(--txt3); stroke-width: 2; stroke-linecap: round; }
.v76-field input { flex: 1 1 auto; min-width: 0; height: 100%; padding: 0 8px 0 9px; border: 0; outline: none; background: transparent;
  font: inherit; font-size: 16px; font-weight: 600; color: var(--txt); -webkit-appearance: none; appearance: none; }
.v76-field input::placeholder { color: var(--txt3); font-weight: 500; }
.v76-field input::-webkit-search-cancel-button { display: none; }
.v76-field button { flex: 0 0 auto; width: 30px; height: 30px; margin-right: 7px; border: 0; border-radius: 50%; cursor: pointer;
  font-size: 12px; color: var(--txt); background: rgba(255, 255, 255, .14); }
.v76-cancel { flex: 0 0 auto; border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 15px; font-weight: 700; color: var(--accent); padding: 8px 2px; }
.v76-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 6px 14px calc(env(safe-area-inset-bottom) + 24px); }

.v76-sec { display: flex; align-items: baseline; gap: 8px; margin: 16px 2px 8px; font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--txt3); }
.v76-sec em { font-style: normal; color: var(--accent); }
.v76-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.v76-chips button { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 12px; border-radius: 13px; cursor: pointer; text-align: left;
  font: inherit; font-size: 14px; font-weight: 800; color: var(--txt); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .07); }
.v76-chips button span { font-size: 19px; }
.v76-chips button:active, .v76-rec button:active, .v76-r:active { transform: scale(.98); background: rgba(255, 255, 255, .09); }
.v76-rec { display: flex; flex-wrap: wrap; gap: 8px; }
.v76-rec button { padding: 9px 13px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; color: var(--txt2, var(--txt)); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .07); }
.v76-tip { margin: 22px 2px 0; font-size: 12.5px; line-height: 1.55; font-weight: 600; color: var(--txt3); }
.v76-tip b { color: var(--txt); font-weight: 800; }

.v76-r { width: 100%; display: flex; align-items: center; gap: 12px; padding: 11px 12px; margin-bottom: 7px; border-radius: 14px; cursor: pointer; text-align: left;
  font-family: inherit; color: var(--txt); background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .06); }
.v76-i { flex: 0 0 auto; width: 30px; text-align: center; font-size: 22px; }
.v76-b { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.v76-b b { font-size: 15px; font-weight: 800; }
.v76-b b mark, .v76-b small mark { background: rgba(var(--accent-rgb), .28); color: inherit; border-radius: 3px; padding: 0 1px; }
.v76-b small { font-size: 11.5px; line-height: 1.4; font-weight: 600; color: var(--txt3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.v76-g { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.v76-g i { font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--txt3); white-space: nowrap; }
.v76-g u { text-decoration: none; font-size: 20px; line-height: 1; font-weight: 700; color: var(--txt3); opacity: .7; }
.v76-none { display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center; padding: 56px 20px; }
.v76-none b { font-size: 16px; font-weight: 800; }
.v76-none span { font-size: 13px; font-weight: 600; color: var(--txt3); line-height: 1.5; }