/* ---------- Header ---------- */
[data-header] { display: contents; }
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in oklab, var(--background) 92%, transparent);
  backdrop-filter: saturate(1.1) blur(8px);
  -webkit-backdrop-filter: saturate(1.1) blur(8px);
  border-bottom: 1px solid var(--border);
}
.site-header__inner {
  max-width: 1280px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 2px 10px 4px; min-height: 64px; gap: 16px;
}
@media (min-width: 640px) {
  .site-header__inner { padding: 12px 0 12px 2px; }
}
.top-left {
  display: flex; align-items: center; gap: 20px; flex-wrap: nowrap;
  margin-left: -6px;
}
.top-left .wordmark {
  font-family: var(--font-display); font-size: 20px; color: var(--primary-dark);
  letter-spacing: -.01em; margin-right: 6px;
}
.top-left .wordmark .dot { color: var(--accent); }
.top-left .wordmark--logo {
  display: inline-flex; align-items: center; line-height: 0;
  margin-right: 6px;
}
.top-left .wordmark--logo img {
  display: block; height: 44px; width: auto; max-width: min(240px, 58vw);
}
@media (min-width: 640px) {
  .top-left .wordmark--logo img { height: 54px; max-width: 280px; }
}
.top-left a { color: var(--fg-muted); font-size: 13px; transition: color .15s; }
.top-left a:hover { color: var(--foreground); }
@media (max-width: 640px) {
  .top-left a:not(.wordmark) { display: none; }
}

.top-right {
  display: flex; align-items: center; gap: 8px;
  margin-right: -18px;
  margin-left: auto;
}
@media (min-width: 640px) {
  .top-right { gap: 16px; margin-right: -24px; }
}

.reading-progress {
  height: 3px; width: 100%; background: transparent; overflow: hidden;
}
.reading-progress span {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--primary), var(--primary-dark));
  transition: width 90ms linear;
}

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--radius-pill);
  color: var(--primary-dark); transition: background-color .15s;
}
.icon-btn:hover { background: var(--secondary); }
@media (min-width: 640px) { .icon-btn { width: 40px; height: 40px; } }

.avatar-btn {
  width: 32px; height: 32px; border-radius: var(--radius-pill);
  background: var(--secondary); color: var(--primary-dark);
  display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden; transition: background-color .15s, opacity .15s;
}
.avatar-btn:hover { background: var(--border); }
.avatar-btn.authed { background: var(--primary-dark); color: #fff; font-size: 13px; font-weight: 500; }
.avatar-btn.authed:hover { opacity: .9; background: var(--primary-dark); }
.avatar-btn img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Popovers ---------- */
.popover-wrap { position: relative; }
.popover {
  position: absolute; right: 0; top: calc(100% + 8px);
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  z-index: 50;
}
.popover[hidden] { display: none; }

.apps-popover { width: 288px; padding: 12px; }
@media (min-width: 640px) { .apps-popover { width: 320px; } }
.apps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.app-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; height: 88px; padding: 8px; text-align: center;
  border-radius: 10px; transition: background-color .15s;
}
.app-tile:hover { background: var(--secondary); }
.app-tile .tile-label { font-size: 12px; line-height: 1.2; color: var(--foreground); }
.app-tile svg { color: var(--primary-dark); }
.app-tile--disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
.app-tile--disabled:hover { background: transparent; }

.account-popover {
  width: calc(100vw - 24px); max-width: 300px; padding: 0;
}

.anon-card { padding: 20px; }
.anon-card h3 { font-family: var(--font-display); font-size: 18px; line-height: 1.2; color: var(--foreground); font-weight: 400; }
.anon-card p { margin-top: 8px; font-size: 13px; line-height: 1.55; color: var(--fg-muted); }
.btn-primary-block {
  display: flex; align-items: center; justify-content: center;
  width: 100%; padding: 8px 16px; margin-top: 16px;
  border-radius: var(--radius-md);
  background: var(--primary-dark); color: #fff;
  font-size: 13px; font-weight: 500;
  transition: background-color .15s;
}
.btn-primary-block:hover { background: var(--primary); }
.btn-primary-block--disabled,
.btn-primary-block--disabled:hover {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  background: var(--primary-dark);
}
.link-center {
  display: block; text-align: center; margin-top: 12px;
  font-size: 13px; color: var(--primary-dark);
}
.link-center:hover { text-decoration: underline; }
.link-center--disabled,
.link-center--disabled:hover {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  text-decoration: none;
}

.authed-card-header {
  display: flex; align-items: center; gap: 12px; padding: 20px 20px 16px;
}
.authed-avatar {
  width: 48px; height: 48px; border-radius: var(--radius-pill);
  background: var(--primary-dark); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden; font-size: 18px; font-weight: 500; flex-shrink: 0;
}
.authed-avatar img { width: 100%; height: 100%; object-fit: cover; }
.authed-meta { min-width: 0; }
.authed-meta .name { font-size: 15px; color: var(--foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.authed-meta .email { font-size: 13px; color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-group { border-top: 1px solid var(--border); padding: 8px 0; }
.menu-item {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 20px; font-size: 13px; color: var(--foreground);
  transition: background-color .15s;
}
.menu-item:hover { background: var(--secondary); }
.menu-item svg { color: var(--primary-dark); flex-shrink: 0; }
.menu-item.muted { color: var(--fg-muted); }
.menu-item.muted:hover { color: var(--foreground); }
.menu-item.muted svg { color: currentColor; }

/* ---------- Home hero ---------- */
.hero-main {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  padding: 18vh 24px 0;
}
@media (min-width: 640px) { .hero-main { padding-top: 22vh; } }
.hero-col { width: 100%; max-width: 580px; }
.wordmark {
  font-family: var(--font-display); font-size: 56px; line-height: 1;
  text-align: center; color: var(--foreground);
}
.wordmark .dot { color: var(--primary); }
.wordmark--logo.wordmark--hero {
  display: flex; justify-content: center; align-items: center;
  margin: 0; line-height: 0;
}
.wordmark--logo.wordmark--hero img {
  display: block; height: 52px; width: auto; max-width: min(280px, 78vw);
}
@media (min-width: 640px) {
  .wordmark--logo.wordmark--hero img { height: 64px; max-width: 320px; }
}
.tagline { margin-top: 20px; text-align: center; font-size: 15px; color: var(--fg-muted); }

.search-form { margin-top: 40px; }
.search-shell { position: relative; }
.search-box {
  position: relative; z-index: 1;
  display: flex; align-items: center; width: 100%; height: 52px;
  padding: 0 8px 0 20px; background: var(--card);
  border: 1px solid var(--border); border-radius: 26px;
  transition: border-color .15s, box-shadow .15s, border-radius .15s;
}
.search-box:hover { border-color: transparent; box-shadow: 0 1px 6px rgba(32,33,36,.18); }
.search-box:focus-within { border-color: transparent; box-shadow: 0 1px 6px rgba(32,33,36,.18); }
.search-shell.open .search-box {
  border-color: transparent;
  box-shadow: none;
  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
.search-shell.open {
  border-radius: 26px;
  box-shadow: 0 4px 14px rgba(32,33,36,.16);
  background: var(--card);
}
.search-box .lead-icon { margin-right: 14px; color: var(--fg-muted); flex-shrink: 0; }
.search-box input {
  flex: 1; height: 100%; background: transparent; font-size: 16px;
  color: var(--foreground); outline: none; min-width: 0;
}
.search-box input::placeholder { color: var(--fg-muted); }

.search-actions { display: flex; align-items: center; gap: 4px; margin-left: 8px; flex-shrink: 0; }
.search-icon-btn {
  width: 36px; height: 36px; border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--primary-dark); background: transparent;
  transition: background-color .15s, color .15s;
}
.search-icon-btn:hover { background: var(--secondary); }
.search-icon-btn.listening { background: var(--secondary); color: var(--primary); }

.search-suggest {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--card);
  border-bottom-left-radius: 26px;
  border-bottom-right-radius: 26px;
  padding: 4px 0 8px; z-index: 40; max-height: 60vh; overflow-y: auto;
}
.search-suggest::before {
  content: ""; display: block;
  height: 1px; margin: 0 14px 4px;
  background: var(--border);
}
.search-suggest[hidden] { display: none; }
.suggest-item {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 20px; font-size: 14px; color: var(--foreground);
  cursor: pointer; line-height: 1.4; min-height: 34px;
}
.suggest-item svg { color: var(--fg-muted); flex-shrink: 0; }
.suggest-item > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.suggest-item.active, .suggest-item:hover { background: var(--secondary); }
.suggest-item b { font-weight: 700; color: var(--foreground); }
.suggest-item mark { background: transparent; color: var(--foreground); font-weight: 400; }
.suggest-hint {
  padding: 14px 16px; font-size: 14px; color: var(--fg-muted);
}
.suggest-footer { display: flex; justify-content: flex-end; padding: 8px 16px 4px; }
.suggest-report { font-size: 12px; color: var(--fg-muted); }
.suggest-report:hover { text-decoration: underline; color: var(--foreground); }

.voice-status { margin-top: 10px; text-align: center; font-size: 12px; color: var(--fg-muted); }

.pills { display: flex; justify-content: center; gap: 12px; margin-top: 20px; }
.pill {
  padding: 6px 16px; border-radius: var(--radius-pill);
  font-size: 13px; background: var(--secondary); color: var(--fg-muted);
  transition: background-color .15s, color .15s;
}
.pill:hover { color: var(--foreground); }
.pill.active { background: var(--primary-dark); color: #fff; }
.trending { margin-top: 40px; text-align: center; font-size: 12px; color: var(--fg-muted); }

.offered-in {
  margin-top: 24px; text-align: center; font-size: 13px;
  color: var(--fg-muted); line-height: 1.9;
}
.offered-in a { color: var(--primary-dark); margin: 0 6px; transition: color .15s; }
.offered-in a:hover { text-decoration: underline; color: var(--primary); }

/* ---------- Site footer ---------- */
.site-footer {
  margin-top: 64px; border-top: 1px solid var(--border);
  background: var(--secondary); color: var(--fg-muted); font-size: 13px;
}
.site-footer .row {
  display: flex; align-items: center; justify-content: space-between;
  height: 48px; padding: 0 24px;
}
.site-footer .row + .row { border-top: 1px solid var(--border); }
.site-footer nav { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.site-footer nav.dots { gap: 8px; }
.site-footer a { transition: color .15s; }
.site-footer a:hover { color: var(--foreground); }
.site-footer .region { display: flex; align-items: center; gap: 6px; }
.dot-sep { opacity: .7; }

/* Monoline icon-only footer links (label via aria-label / title) */
.footer-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 36px;
  height: 36px;
  white-space: nowrap;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--background) 88%, var(--primary, #1399a0) 12%);
  color: var(--fg-muted);
}
.footer-link svg { flex: none; opacity: .85; }
.footer-link:hover { color: var(--foreground); border-color: color-mix(in srgb, var(--primary, #1399a0) 45%, var(--border)); }
.footer-link:hover svg { opacity: 1; }
.footer-link-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Shared results-style footer (rendered by js/header.js into [data-footer]) */
[data-footer] { display: contents; }
.results-footer {
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--foreground) 3%, var(--background));
  margin-top: auto;
  font-size: 13px; color: var(--fg-muted);
}
.rf-row {
  max-width: 1280px; margin: 0 auto;
  padding: 12px 24px;
}
.rf-location {
  display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--border);
}
.rf-loc-dot { display: inline-flex; color: var(--fg-muted); }
.rf-sep { color: var(--fg-muted); }
.rf-muted { color: var(--fg-muted); }
.rf-links {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px;
}
.rf-left, .rf-right, .rf-soft { display: flex; flex-wrap: wrap; gap: 22px; }
.rf-links--soft { justify-content: center; }
.rf-links--soft .rf-soft { justify-content: center; width: 100%; gap: 12px 16px; }
.rf-links a { color: var(--fg-muted); text-decoration: none; }
.rf-links a:hover { color: var(--foreground); }
.rf-left, .rf-right { gap: 12px 14px; }
.rf-trademark {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px 16px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--fg-muted);
  text-align: center;
}
.rf-trademark sup {
  font-size: 0.75em;
  line-height: 0;
}
@media (max-width: 640px) {
  .rf-links { flex-direction: column; gap: 10px; }
  .rf-left, .rf-right { gap: 16px; }
  .rf-links--soft .rf-soft { justify-content: center; gap: 14px 18px; }
}

@media (max-width: 860px) {
  .site-footer .row { height: auto; padding: 12px 16px; align-items: flex-start; gap: 10px; }
  .site-footer nav { gap: 10px 14px; }
}
@media (max-width: 640px) {
  .site-footer .row { flex-direction: column; gap: 10px; padding: 14px 16px; align-items: stretch; }
  .site-footer .region { justify-content: center; }
  .site-footer nav { justify-content: center; gap: 8px; }
  .site-footer nav.dots .dot-sep { display: none; }
  .site-footer nav a:not(.footer-link) { text-align: center; }
}


/* ── Ingredient-first suggestions ─────────────────────────── */
.suggest-section-head {
  display: flex; align-items: baseline; gap: 8px;
  padding: 10px 16px 4px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--fg-muted);
}
.suggest-section-head span {
  font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--fg-muted); opacity: .8;
}
.suggest-item.suggest-ing { align-items: center; min-height: 48px; gap: 10px; }
.si-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.si-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.si-blurb {
  font-size: 12px; color: var(--fg-muted); font-weight: 400;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Season signal */
.suggest-item.suggest-ing > .si-season,
.suggest-item.suggest-ing > .si-add { flex: 0 0 auto; }
.si-season {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;

  padding: 3px 9px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 600; letter-spacing: .01em;
  background: color-mix(in srgb, currentColor 10%, transparent);
  color: var(--fg-muted);
}
.si-season svg { color: inherit; width: 13px; height: 13px; }
.si-season.season-winter { color: #3E7CA8; }
.si-season.season-spring { color: #5C9A55; }
.si-season.season-summer { color: #1e9aa0; }
.si-season.season-monsoon { color: #3F8A80; }
.si-season.season-year { color: var(--fg-muted); }
.si-season.is-now {
  color: var(--primary-dark);
  background: color-mix(in srgb, var(--primary) 14%, transparent);
}

/* Compact add disc */
.si-add {
  position: relative; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 999px;
  color: var(--primary-dark);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  border: 1px solid transparent;
  transition: background .18s ease, color .18s ease, transform .18s ease, border-color .18s ease;
}
.si-add svg { width: 16px; height: 16px; color: inherit; }
.si-add .si-add-plus { display: inline-flex; transition: transform .22s ease; }
.si-add .si-add-check { display: none; }
.suggest-item.suggest-ing:hover .si-add,
.suggest-item.suggest-ing.active .si-add {
  background: var(--primary); color: var(--primary-foreground);
}
.suggest-item.suggest-ing:hover .si-add .si-add-plus,
.suggest-item.suggest-ing.active .si-add .si-add-plus { transform: rotate(90deg); }

.suggest-item.suggest-ing.added .si-name,
.suggest-item.suggest-ing.added .si-blurb { opacity: .65; }
.suggest-item.suggest-ing.added .si-add {
  background: var(--primary); color: var(--primary-foreground);
  animation: si-pop .22s ease;
}
.suggest-item.suggest-ing.added .si-add .si-add-plus { display: none; }
.suggest-item.suggest-ing.added .si-add .si-add-check { display: inline-flex; }
.suggest-item.suggest-ing.added:hover .si-add,
.suggest-item.suggest-ing.added.active .si-add {
  background: color-mix(in srgb, var(--destructive) 12%, transparent);
  color: var(--destructive);
  border-color: color-mix(in srgb, var(--destructive) 30%, transparent);
}
@keyframes si-pop {
  0% { transform: scale(.6); }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .si-add, .si-add .si-add-plus { transition: none; }
  .suggest-item.suggest-ing .si-add .si-add-plus { transform: none !important; }
  .suggest-item.suggest-ing.added .si-add { animation: none; }
}

/* ── Pantry tray (chips live inside the search shell) ─────── */
.search-shell:has(.pantry-tray:not([hidden])) {
  border-radius: 26px;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 1px 6px rgba(32,33,36,.10);
}
.search-shell:has(.pantry-tray:not([hidden])) .search-box {
  border-color: transparent;
  border-top-left-radius: 0; border-top-right-radius: 0;
  background: transparent;
  box-shadow: none;
}
.pantry-tray {
  display: flex; flex-wrap: wrap; align-items: center;
  column-gap: 8px; row-gap: 8px;
  padding: 12px 14px 10px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.pantry-tray[hidden] { display: none; }
.pantry-chip {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 0 6px 0 12px; height: 32px; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--primary) 10%, var(--card));
  border: 1px solid color-mix(in srgb, var(--primary) 26%, var(--border));
  color: var(--primary-dark); font-size: 13.5px; font-weight: 600; line-height: 1;
  max-width: min(100%, 240px);
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.pantry-chip:hover, .pantry-chip:focus-visible {
  background: color-mix(in srgb, var(--primary) 18%, var(--card));
  border-color: color-mix(in srgb, var(--primary) 42%, var(--border));
  outline: none;
}
.pantry-chip:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent); }
.pantry-chip:active { transform: scale(.97); }
.pantry-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pantry-chip-season {
  display: inline-flex; align-items: center; flex-shrink: 0; color: var(--fg-muted);
}
.pantry-chip-season svg { width: 14px; height: 14px; }
.pantry-chip-season.is-now { color: var(--primary-dark); }
.pantry-chip-x {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 20px; height: 20px; border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  transition: background .15s ease, color .15s ease;
}
.pantry-chip-x svg { width: 12px; height: 12px; }
.pantry-chip:hover .pantry-chip-x {
  background: color-mix(in srgb, var(--destructive) 16%, transparent);
  color: var(--destructive);
}
.pantry-clear {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 999px; margin-left: auto;
  color: var(--fg-muted); cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.pantry-clear svg { width: 14px; height: 14px; }
.pantry-clear:hover { color: var(--destructive); background: var(--secondary); }

@media (max-width: 640px) {
  .pantry-tray { padding: 10px 10px 8px 12px; column-gap: 6px; row-gap: 6px; }
  .pantry-chip { height: 30px; font-size: 13px; padding: 0 5px 0 10px; max-width: 100%; }
}


/* Primary action inside the search box */
.search-go {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 14px; margin-left: 4px;
  border-radius: var(--radius-pill);
  background: var(--primary); color: var(--primary-foreground);
  font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.search-go:hover { background: var(--primary-dark); }
.search-go[hidden] { display: none; }
.search-go .go-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: color-mix(in srgb, #000 18%, transparent);
  font-size: 12px; font-weight: 700;
}
.search-go-mobile { display: none; }

@media (max-width: 640px) {
  .search-go { display: none; }
  .search-go-mobile {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; margin-top: 14px; min-height: 46px;
    border-radius: var(--radius-pill);
    background: var(--primary); color: var(--primary-foreground);
    font-size: 15px; font-weight: 600; cursor: pointer;
  }
  .search-go-mobile[hidden] { display: none; }
  .si-blurb { display: none; }
  /* Keep the ingredient name readable — season collapses to its glyph. */
  .si-season-text { display: none; }
  .si-season { padding: 5px; }
}



/* ── Query-term highlighting (search results, ingredient lists) ── */
mark.pm-hl {
  background: color-mix(in srgb, var(--primary) 18%, transparent);
  color: inherit;
  font-weight: 700;
  border-radius: 3px;
  padding: 0 1px;
  box-decoration-break: clone;
}
.rr-desc mark.pm-hl, .rc-desc mark.pm-hl, .il-desc mark.pm-hl { font-weight: 600; }

/* ── Offline banner (PWA) ── */
.pm-offline-banner {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%);
  z-index: 90; display: flex; align-items: center; gap: 8px;
  max-width: calc(100vw - 24px);
  padding: 9px 16px; border-radius: var(--radius-pill, 999px);
  background: var(--foreground); color: var(--background);
  font-size: 13px; font-weight: 500; box-shadow: 0 8px 26px rgba(0,0,0,.22);
}
.pm-offline-banner[hidden] { display: none; }
.pm-offline-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--primary);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 60%, transparent);
  animation: pm-offline-pulse 2s ease-out infinite;
}
@keyframes pm-offline-pulse {
  70% { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) { .pm-offline-dot { animation: none; } }