/* BUFF OS v84 — Ask AI: the pearlescent button, the usage meter, the brief. */
.v84-ask { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 14px 0 11px; margin-left: auto; border: 0; border-radius: 22px; cursor: pointer; font: inherit; color: #3a2f22; overflow: hidden; -webkit-tap-highlight-color: transparent;
  background: linear-gradient(115deg, #fffaf0 0%, #ffe6c9 18%, #ffd3d6 34%, #d8f3ee 52%, #fff4d6 70%, #ffe2cf 86%, #fffaf0 100%); background-size: 300% 100%; animation: v84pearl 7s ease-in-out infinite;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .55) inset, 0 6px 18px rgba(255, 214, 170, .28), 0 0 22px rgba(255, 236, 200, .22); transition: transform .15s; }
.v84-ask::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .75) 50%, transparent 65%); transform: translateX(-120%); animation: v84shine 4.2s ease-in-out infinite; pointer-events: none; }
.v84-ask { white-space: nowrap; flex: 0 0 auto; } .v84-ask b { font-size: 13px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; } .v84-sp { font-size: 17px; line-height: 1; color: #b9801f; filter: drop-shadow(0 0 4px rgba(255, 255, 255, .9)); }
.v84-ask:active { transform: scale(.95); }
.tldr-h-actions .v84-ask + .tldr-share { margin-left: 0; }
@keyframes v84pearl { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes v84shine { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) { .v84-ask, .v84-ask::after { animation: none; } }

.v84-meter { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 8px 12px; border-radius: 14px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); }
.v84-ml { flex: 0 0 auto; font-size: 11px; font-weight: 800; letter-spacing: .04em; color: var(--txt2); white-space: nowrap; }
.v84-mb { position: relative; flex: 1 1 auto; height: 8px; border-radius: 5px; background: rgba(255, 255, 255, .09); overflow: hidden; }
.v84-mb i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, #fff4de, #ffd9b8, #d8f3ee); transition: width .6s cubic-bezier(.2, .9, .3, 1.1); box-shadow: 0 0 10px rgba(255, 233, 200, .55); }
.v84-meter.warm .v84-mb i { background: linear-gradient(90deg, #ffe0a8, #ffb866); } .v84-meter.hot .v84-mb i { background: linear-gradient(90deg, #ffb866, #ff7a6b); }
.v84-meter b { flex: 0 0 auto; min-width: 44px; text-align: right; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; } .v84-meter small { font-size: 10px; font-weight: 700; color: var(--txt3); }

.v84-sh .v84-k { font-size: 10.5px; font-weight: 800; letter-spacing: .09em; color: #ffd9b8; }
.v84-t { margin: 4px 40px 8px 0; font-size: 24px; font-weight: 800; letter-spacing: -.025em; line-height: 1.15; }
.v84-chip { display: inline-block; padding: 4px 11px; border-radius: 11px; font-size: 12px; font-weight: 800; background: rgba(255, 255, 255, .1); } .v84-chip.ok { color: #5fd39a; background: rgba(95, 211, 154, .14); } .v84-chip.warn { color: #ffb866; background: rgba(255, 184, 102, .14); }
.v84-h { margin: 18px 0 8px; font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--txt3); }
.v84-chips { display: flex; flex-wrap: wrap; gap: 6px; } .v84-chips span { padding: 6px 11px; border-radius: 12px; font-size: 12.5px; font-weight: 700; background: rgba(255, 255, 255, .07); } .v84-chips .done { color: #5fd39a; background: rgba(95, 211, 154, .1); }
.v84-block { margin-bottom: 12px; padding: 12px; border-radius: 18px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); }
.v84-bh { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .v84-bh b { font-size: 16px; font-weight: 800; } .v84-bh small { font-size: 11.5px; font-weight: 700; color: var(--accent); text-align: right; }
.v84-ex { display: flex; align-items: center; gap: 11px; padding: 8px; margin-bottom: 8px; border-radius: 14px; background: rgba(0, 0, 0, .25); box-shadow: inset 3px 0 0 var(--c, transparent); }
.v84-ex.tier-g { --c: #5fd39a; } .v84-ex.tier-a { --c: #ffb866; } .v84-ex.tier-r { --c: #ff7a6b; }
.v84-pic { flex: 0 0 auto; margin-left: 4px; } .v84-pic .bth { width: 64px; height: 50px; }
.v84-eb { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .v84-eb b { font-size: 14.5px; font-weight: 800; } .v84-eb span { font-size: 13px; font-weight: 700; color: var(--accent); } .v84-eb small { font-size: 11.5px; line-height: 1.3; font-weight: 600; color: var(--txt3); }
.v84-ea { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; } .v84-ea button { width: 40px; height: 36px; border-radius: 11px; border: 0; cursor: pointer; font: inherit; font-size: 14px; font-weight: 800; color: var(--accent-ink); background: var(--accent); } .v84-ea button.lg { color: var(--accent); background: transparent; border: 1.5px solid rgba(var(--accent-rgb), .6); font-size: 17px; }
.v84-ease { padding: 10px 12px; margin-bottom: 7px; border-radius: 14px; background: rgba(255, 184, 102, .08); border: 1px solid rgba(255, 184, 102, .22); } .v84-ease b { display: block; font-size: 14px; font-weight: 800; color: #ffb866; } .v84-ease span { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.35; font-weight: 600; color: var(--txt2); }
.v84-line { padding: 11px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.4; font-weight: 600; background: rgba(255, 255, 255, .05); }
.v84-tip { margin-top: 16px; padding: 12px 14px; border-radius: 14px; font-size: 13px; line-height: 1.45; font-weight: 600; background: rgba(var(--accent-rgb), .1); border: 1px solid rgba(var(--accent-rgb), .28); }
.v84-sub { margin: 8px 0 0; font-size: 13.5px; line-height: 1.45; font-weight: 600; color: var(--txt2); }
.v84-again { display: block; width: 100%; height: 46px; margin-top: 16px; border-radius: 14px; border: 0; cursor: pointer; font: inherit; font-size: 14.5px; font-weight: 800; color: var(--txt); background: rgba(255, 255, 255, .1); }
.v84-foot { margin-top: 12px; font-size: 11.5px; line-height: 1.4; font-weight: 600; color: var(--txt3); text-align: center; } .v84-foot b { color: var(--txt2); }
.v84-load { display: flex; gap: 8px; margin: 18px 0 4px; } .v84-load i { width: 12px; height: 12px; border-radius: 50%; background: #ffd9b8; animation: v84dot 1.1s ease-in-out infinite; } .v84-load i:nth-child(2) { animation-delay: .15s; } .v84-load i:nth-child(3) { animation-delay: .3s; }
@keyframes v84dot { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }

.v84-sh > .v84-meter { margin: 0 44px 12px 0; }
.v84-goal { margin-top: 12px; padding: 12px 12px 4px; border-radius: 18px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); }
.v84-gr { margin-bottom: 11px; } .v84-gr.ok .v82-bar i { box-shadow: 0 0 10px rgba(var(--accent-rgb), .7); } .v84-gr.ok .v82-rh em { color: var(--accent); }
.v84-gr .v82-rh { margin-bottom: 5px; } .v84-gr .v82-rh b { font-size: 13.5px; }

/* the pep talk, with tappable highlights */
.v84-pep { margin: 8px 0 12px; padding: 14px 15px; border-radius: 18px; font-size: 16.5px; line-height: 1.45; font-weight: 600; letter-spacing: -.01em; background: linear-gradient(160deg, rgba(255, 233, 200, .12), rgba(255, 255, 255, .03)); border: 1px solid rgba(255, 226, 190, .22); box-shadow: inset 3px 0 0 #ffd9b8; }
.v84-pep .hl { display: inline; padding: 1px 7px; margin: 0 1px; border: 0; border-radius: 8px; cursor: pointer; font: inherit; font-weight: 800; letter-spacing: -.01em; -webkit-tap-highlight-color: transparent; }
.v84-pep .hl.m { color: #3a2f22; background: linear-gradient(115deg, #fffaf0, #ffe0b8, #d8f3ee); box-shadow: 0 0 12px rgba(255, 226, 190, .35); }
.v84-pep .hl.e { color: var(--accent); background: rgba(var(--accent-rgb), .14); border-bottom: 1.5px solid rgba(var(--accent-rgb), .6); border-radius: 6px 6px 3px 3px; }
.v84-chips button.done { padding: 6px 11px; border: 0; border-radius: 12px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; color: #5fd39a; background: rgba(95, 211, 154, .1); } .v84-chips button.done small { font-size: 11px; font-weight: 700; color: var(--txt3); }
/* the goal card with the exercises inside it */
.v84-grh { display: flex; align-items: baseline; justify-content: space-between; width: 100%; margin: 0 0 6px; padding: 2px 0; border: 0; background: none; cursor: pointer; font: inherit; color: inherit; text-align: left; }
.v84-grh span { font-size: 14.5px; } .v84-grh b { font-weight: 800; } .v84-grh i { font-style: normal; font-size: 17px; color: var(--txt3); } .v84-grh em { font-style: normal; font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; } .v84-grh small { font-size: 11px; font-weight: 700; color: var(--txt3); }
.v84-gr { margin-bottom: 14px; } .v84-gr.behind .v82-bar i { background: linear-gradient(90deg, #ff7a45, #ffb866); }
.v84-need { margin: 8px 0 8px; font-size: 12px; font-weight: 800; color: var(--accent); } .v84-need.ok { color: #5fd39a; } .v84-need:empty { display: none; }
.v84-gr .v84-ex { cursor: pointer; }
.v84-lg { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; border: 1.5px solid rgba(var(--accent-rgb), .6); background: transparent; color: var(--accent); font-size: 18px; font-weight: 800; cursor: pointer; }

/* the meter at the very top of every screen, above search, refresh, version and settings */
.topbar { padding-top: calc(var(--buff-top-clearance, 58px) + 68px) !important; min-height: calc(104px + var(--buff-top-clearance, 58px)) !important; }
.v84-topwrap { position: absolute; top: calc(var(--buff-top-clearance, 58px) + 24px); left: 16px; right: 16px; z-index: 2; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
.v84-topwrap .v84-meter { margin: 0; padding: 4px 11px; border-radius: 12px; background: rgba(255, 255, 255, .06); }
.v84-meter.top .v84-ml { font-size: 10.5px; } .v84-meter.top .v84-mb { height: 6px; } .v84-meter.top b { font-size: 13px; min-width: 38px; }
.v78-rest { top: calc(env(safe-area-inset-top) + 100px); }

.v78-rest { top: calc(env(safe-area-inset-top) + 126px); }

.v84-voice { min-height: 0; margin: -6px 0 8px; font-size: 11.5px; font-weight: 700; color: var(--txt3); } .v84-voice:empty { display: none; }
.v84-need.rest { color: #ffb866; }