/* RabbitOwO liquid-glass system and Camera-style mode selector. */
:root {
  --ios-radius-xs: 12px;
  --ios-radius-sm: 16px;
  --ios-radius-md: 22px;
  --ios-radius-lg: 30px;
  --ios-radius-pill: 999px;
  --ios-ease-standard: cubic-bezier(.22, 1, .36, 1);
  --ios-ease-emphasized: cubic-bezier(.16, 1, .3, 1);
  --ios-duration-micro: 140ms;
  --ios-duration-small: 240ms;
  --ios-duration-medium: 440ms;
  --ios-duration-large: 620ms;
  --ios-glass-clear: rgba(255, 255, 255, .08);
  --ios-glass-soft: rgba(238, 235, 242, .14);
  --ios-glass-active: rgba(245, 242, 247, .24);
  --ios-glass-dark-soft: rgba(82, 80, 90, .22);
  --ios-border-soft: rgba(255, 255, 255, .16);
  --ios-border-active: rgba(255, 255, 255, .32);
  --ios-text-primary: rgba(255, 252, 254, .96);
  --ios-text-secondary: rgba(249, 244, 248, .68);
  --rabbit-accent: #f7b8cd;
  --rabbit-accent-soft: rgba(247, 184, 205, .18);
  --rabbit-accent-glow: rgba(247, 184, 205, .12);
  --ios-glass-shadow: 0 18px 54px rgba(20, 18, 28, .16), inset 0 1px 0 rgba(255, 255, 255, .32);
}

/* One continuous mode strip. All old per-tab capsules and underlines are
   intentionally neutralized; .ios-mode-indicator is the only selection pill. */
body:not(.admin-page)[data-tab] .panel > #mainTabs.ios-mode-nav,
body:not(.admin-page) .panel > #mainTabs.ios-mode-nav {
  --mode-item-height: 40px;
  position: relative !important;
  inset: auto !important;
  z-index: 35 !important;
  isolation: isolate !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 50px !important;
  align-items: center !important;
  gap: 3px !important;
  margin: 0 0 13px !important;
  padding: 5px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: var(--ios-radius-pill) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 42%, rgba(245, 230, 255, 0.035) 100%) !important;
  box-shadow: 0 18px 48px -8px rgba(10, 8, 22, 0.38), 0 0 0 1px rgba(255, 255, 255, 0.06), inset 0 1px 1px 0 rgba(255, 255, 255, 0.40), inset 0 -1px 2px 0 rgba(0, 0, 0, 0.14) !important;
  backdrop-filter: blur(14px) saturate(160%) contrast(105%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%) contrast(105%) !important;
  scroll-behavior: smooth;
  scroll-padding-inline: 16px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
  touch-action: pan-x pan-y;
}

body:not(.admin-page) .panel > #mainTabs.ios-mode-nav::-webkit-scrollbar { display: none; }
body:not(.admin-page) .panel > #mainTabs.ios-mode-nav::before,
body:not(.admin-page) .panel > #mainTabs.ios-mode-nav::after { content: none !important; display: none !important; }

body:not(.admin-page) #mainTabs .ios-mode-indicator {
  --mode-trail-scale: 1;
  position: absolute;
  top: 5px;
  left: 0;
  z-index: 0;
  display: block;
  width: 78px;
  height: var(--mode-item-height);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: var(--ios-radius-pill);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.08) 100%) !important;
  box-shadow: 0 8px 24px -2px rgba(10, 8, 24, 0.28), 0 2px 6px rgba(0, 0, 0, 0.12), inset 0 1.5px 1px 0 rgba(255, 255, 255, 0.70), inset 0 -1px 2px 0 rgba(255, 255, 255, 0.18) !important;
  backdrop-filter: blur(6px) saturate(130%);
  -webkit-backdrop-filter: blur(6px) saturate(130%);
  pointer-events: none;
  transform: translate3d(5px, 0, 0);
  transform-origin: left center;
  scale: 1;
  transition: scale 650ms cubic-bezier(.22, 1, .36, 1), filter 650ms ease, opacity 580ms ease;
  will-change: transform;
  contain: paint;
}

body:not(.admin-page) #mainTabs .ios-mode-indicator::before {
  content: "";
  position: absolute;
  inset: 3px 8%;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .16), transparent);
  opacity: 0;
  transform: scaleX(var(--mode-trail-scale));
  filter: blur(6px);
  transition: opacity 520ms ease, transform 650ms cubic-bezier(.22, 1, .36, 1);
}

body:not(.admin-page) #mainTabs .ios-mode-indicator.is-moving::before { opacity: .55; }

body:not(.admin-page) #mainTabs .ios-mode-indicator__shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 15%, rgba(255, 255, 255, .68) 48%, transparent 80%);
  opacity: 0;
  transform: translateX(-145%);
  pointer-events: none;
}

body:not(.admin-page) #mainTabs .ios-mode-indicator.is-confirming .ios-mode-indicator__shine {
  animation: iosModeConfirmSweep 650ms cubic-bezier(.22, 1, .36, 1) both;
}

body:not(.admin-page) #mainTabs .ios-mode-ripple {
  position: absolute;
  top: 50%;
  left: var(--ripple-x, 50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .42), rgba(255, 255, 255, .12) 46%, transparent 72%);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.2);
  animation: iosModeRipple 680ms cubic-bezier(.22, 1, .36, 1) both;
}

body:not(.admin-page) .panel > #mainTabs .ios-mode-item,
body:not(.admin-page) #mainTabs .ios-mode-item:is(:hover, :focus-visible, .is-active, .active) {
  position: relative !important;
  z-index: 1 !important;
  display: inline-flex !important;
  min-width: 0 !important;
  width: auto !important;
  min-height: var(--mode-item-height) !important;
  height: var(--mode-item-height) !important;
  flex: 1 1 0 !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  margin: 0 !important;
  padding: 0 clamp(10px, 1.35vw, 14px) !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: var(--ios-radius-pill) !important;
  outline: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: rgba(255, 250, 253, .72) !important;
  font-size: clamp(.61rem, 1.15vw, .72rem) !important;
  font-weight: 580 !important;
  letter-spacing: .01em !important;
  opacity: .76;
  scale: .98;
  transform: translate3d(var(--mode-shift, 0), 0, 0) !important;
  will-change: transform, opacity;
  transition: transform 600ms cubic-bezier(.22, 1, .36, 1), scale 600ms cubic-bezier(.22, 1, .36, 1), opacity 550ms ease, color 550ms ease !important;
  scroll-snap-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

body:not(.admin-page) #mainTabs .ios-mode-item::before,
body:not(.admin-page) #mainTabs .ios-mode-item::after { content: none !important; display: none !important; }
body:not(.admin-page) #mainTabs .ios-mode-item[data-mode-distance="1"] { opacity: .88; scale: .99; }
body:not(.admin-page) #mainTabs .ios-mode-item[data-mode-distance="2"] { opacity: .78; scale: .98; }
body:not(.admin-page) #mainTabs .ios-mode-item[data-mode-distance="3"] { opacity: .68; scale: .97; }

body:not(.admin-page) #mainTabs .ios-mode-item:is(.is-preview, .is-active, [aria-current="page"]) {
  color: #ffffff !important;
  font-weight: 680 !important;
  opacity: 1 !important;
  scale: 1 !important;
  text-shadow: 0 0 14px rgba(255, 255, 255, 0.55), 0 1px 2px rgba(0, 0, 0, 0.40) !important;
}

body:not(.admin-page) #mainTabs .ios-mode-item:hover:not(.is-active) {
  color: rgba(255, 255, 255, 0.95) !important;
  opacity: .95 !important;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.35) !important;
}

body:not(.admin-page) #mainTabs .ios-mode-label {
  position: relative;
  z-index: 2;
  display: block;
  white-space: nowrap;
  transform: scale(1);
  transition: transform 600ms cubic-bezier(.22, 1, .36, 1), color 550ms ease, text-shadow 550ms ease;
}

body:not(.admin-page) #mainTabs .ios-mode-item.is-pressed .ios-mode-label,
body:not(.admin-page) #mainTabs .ios-mode-item.is-confirming .ios-mode-label {
  transform: scale(0.96);
  transition-duration: 480ms;
}
body:not(.admin-page) #mainTabs[data-mode-state="pressing"] .ios-mode-indicator {
  scale: 0.97;
  filter: brightness(1.08);
}
body:not(.admin-page) #mainTabs .ios-mode-item.is-confirming .ios-mode-label { animation: none; }

body:not(.admin-page) #mainTabs .ios-mode-item:focus-visible {
  outline: 2px solid rgba(255, 255, 255, .42) !important;
  outline-offset: -3px !important;
}

body:not(.admin-page) #mainTabs .ios-mode-item__badge {
  display: grid;
  min-width: 16px;
  height: 16px;
  place-items: center;
  padding: 0 4px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 999px;
  background: rgba(247, 184, 205, .24);
  color: rgba(255, 250, 253, .96);
  font-size: 8px;
  font-weight: 800;
}

body:not(.admin-page) #mainTabs .ios-mode-item__badge[hidden] { display: none !important; }

/* Keep the existing CAPTCHA/intro handoff authoritative even though this
   late-loaded layer owns the final menu transforms. The indicator and all
   eight modes remain hidden until their reveal group is released. */
html:not([data-rabbit-access-state="complete"]) .rabbit-site-app.is-premium-entry #mainTabs[data-reveal-group]:not(.is-revealed) .ios-mode-item {
  opacity: 0 !important;
  transform: translate3d(var(--mode-shift, 0), -12px, 0) scale(.985) !important;
}
html:not([data-rabbit-access-state="complete"]) .rabbit-site-app.is-premium-entry #mainTabs[data-reveal-group]:not(.is-revealed) .ios-mode-indicator { opacity: 0; }
html:not([data-rabbit-access-state="complete"]) .rabbit-site-app.is-premium-entry #mainTabs.is-revealed .ios-mode-indicator { opacity: 1; transition-delay: 80ms; }
html:not([data-rabbit-access-state="complete"]) .rabbit-site-app.is-premium-entry #mainTabs.is-revealed .ios-mode-item:nth-child(2) { transition-delay: 0ms !important; }
html:not([data-rabbit-access-state="complete"]) .rabbit-site-app.is-premium-entry #mainTabs.is-revealed .ios-mode-item:nth-child(3) { transition-delay: 100ms !important; }
html:not([data-rabbit-access-state="complete"]) .rabbit-site-app.is-premium-entry #mainTabs.is-revealed .ios-mode-item:nth-child(4) { transition-delay: 200ms !important; }
html:not([data-rabbit-access-state="complete"]) .rabbit-site-app.is-premium-entry #mainTabs.is-revealed .ios-mode-item:nth-child(5) { transition-delay: 300ms !important; }
html:not([data-rabbit-access-state="complete"]) .rabbit-site-app.is-premium-entry #mainTabs.is-revealed .ios-mode-item:nth-child(6) { transition-delay: 400ms !important; }
html:not([data-rabbit-access-state="complete"]) .rabbit-site-app.is-premium-entry #mainTabs.is-revealed .ios-mode-item:nth-child(7) { transition-delay: 500ms !important; }
html:not([data-rabbit-access-state="complete"]) .rabbit-site-app.is-premium-entry #mainTabs.is-revealed .ios-mode-item:nth-child(8) { transition-delay: 600ms !important; }

/* The selector is always a horizontal track. The legacy hamburger remains in
   the DOM as a compatibility hook but no longer owns mobile navigation. */
body:not(.admin-page) #menuToggle.menu-toggle { display: none !important; }
body:not(.admin-page).menu-open { overflow: auto !important; }
body:not(.admin-page) #mainTabs.is-menu-open { display: flex !important; }

/* Shared glass language for existing real components. */
body:not(.admin-page) :is(.shell > .panel, .profile-card, .mini-status, .footer-card) {
  border-color: var(--tab-frame-line) !important;
  background-color: var(--tab-frame-fill) !important;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .024), transparent 34%) !important;
  box-shadow: 0 14px 36px rgba(10, 8, 18, .10), inset 0 1px 0 rgba(255, 255, 255, .10) !important;
}

body:not(.admin-page) :is(
  .wide-card, .side-card, .list-card, .settings-card, .social-card,
  .item-card, .rank-card, .waifu-card, .donate-hero,
  .donate-card, .contact-intro, .contact-form
) {
  border-color: var(--tab-frame-line) !important;
  border-radius: var(--ios-radius-md) !important;
  background-color: var(--tab-frame-fill) !important;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .024), transparent 34%) !important;
  box-shadow: 0 14px 36px rgba(10, 8, 18, .10), inset 0 1px 0 rgba(255, 255, 255, .10) !important;
}

body:not(.admin-page) :is(
  .wide-card, .side-card, .list-card, .settings-card, .social-card,
  .item-card, .rank-card, .waifu-card, .donate-card
):is(:hover, :focus-within) {
  border-color: var(--tab-frame-line) !important;
  background-color: var(--tab-frame-fill) !important;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .024), transparent 34%) !important;
}

body:not(.admin-page) :is(button, [role="button"]):not(.ios-mode-item):not(.community-menu-launcher) {
  transition: transform var(--ios-duration-small) var(--ios-ease-standard), filter var(--ios-duration-small) ease, border-color var(--ios-duration-small) ease, background-color var(--ios-duration-small) ease, box-shadow var(--ios-duration-small) ease;
}

@media (hover: hover) and (pointer: fine) {
  body:not(.admin-page) :is(button, [role="button"]):not(.ios-mode-item):not(.community-menu-launcher):not(:disabled):hover {
    filter: brightness(1.03);
  }
}

body:not(.admin-page) :is(button, [role="button"]):not(.ios-mode-item):not(.community-menu-launcher):not(:disabled):active { transform: scale(.965); }

body:not(.admin-page) :is(input, select, textarea) {
  border-color: rgba(255, 255, 255, .14) !important;
  border-radius: var(--ios-radius-xs) !important;
  background-color: rgba(235, 231, 240, .075) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06) !important;
  transition: border-color var(--ios-duration-small) ease, background-color var(--ios-duration-small) ease, box-shadow var(--ios-duration-small) ease !important;
}

body:not(.admin-page) :is(input, select, textarea):focus {
  border-color: rgba(247, 184, 205, .44) !important;
  background-color: rgba(242, 237, 244, .11) !important;
  box-shadow: 0 0 0 3px rgba(247, 184, 205, .075), inset 0 1px 0 rgba(255, 255, 255, .09) !important;
}

body:not(.admin-page) :is(.copy-toast, .community-toast, .shimeji-chat-bubble) {
  border: 1px solid var(--ios-border-soft) !important;
  border-radius: var(--ios-radius-pill) !important;
  background: linear-gradient(180deg, rgba(224, 221, 230, .28), rgba(101, 98, 110, .20)) !important;
  box-shadow: var(--ios-glass-shadow) !important;
  backdrop-filter: blur(12px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(135%) !important;
}

/* The speech bubble stays readable without turning into an opaque blurred slab. */
body:not(.admin-page) .shimeji-chat-bubble {
  border-color: rgba(255, 255, 255, .25) !important;
  border-radius: var(--ios-radius-sm) !important;
  background: linear-gradient(155deg, rgba(255, 255, 255, .115), rgba(35, 31, 44, .18)) !important;
  box-shadow: 0 9px 26px rgba(16, 14, 23, .13), inset 0 1px 0 rgba(255, 255, 255, .22) !important;
  backdrop-filter: blur(6px) saturate(112%) !important;
  -webkit-backdrop-filter: blur(6px) saturate(112%) !important;
  text-shadow: 0 1px 2px rgba(12, 10, 18, .48);
}

body:not(.admin-page) .shimeji-chat-bubble::after {
  border-color: rgba(255, 255, 255, .19) !important;
  background: rgba(45, 40, 54, .22) !important;
}

body:not(.admin-page) #amountsList {
  display: flex !important;
  gap: 6px !important;
  padding: 5px !important;
  overflow-x: auto !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  border-radius: var(--ios-radius-pill) !important;
  background: rgba(235, 231, 240, .07) !important;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}

body:not(.admin-page) #amountsList::-webkit-scrollbar { display: none; }
body:not(.admin-page) #amountsList > button {
  flex: 0 0 auto !important;
  min-height: 38px !important;
  padding-inline: 13px !important;
  border-radius: var(--ios-radius-pill) !important;
  scroll-snap-align: center;
}

body:not(.admin-page) #amountsList > button.is-selected {
  border-color: rgba(255, 255, 255, .28) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .23), rgba(247, 184, 205, .12)) !important;
  box-shadow: 0 8px 20px rgba(21, 18, 27, .12), inset 0 1px 0 rgba(255, 255, 255, .28) !important;
}

body:not(.admin-page) #waifuTabs.waifu-tabs {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
}

body:not(.admin-page) #waifuTabs.waifu-tabs::-webkit-scrollbar { display: none; }
body:not(.admin-page) #waifuTabs .waifu-tab { scroll-snap-align: center; }

@keyframes iosModeConfirmSweep {
  0% { opacity: 0; transform: translateX(-145%); }
  28% { opacity: .9; }
  100% { opacity: 0; transform: translateX(145%); }
}

@keyframes iosModeRipple {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.2); }
  30% { opacity: .66; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(8); }
}

@keyframes iosModeLabelConfirm {
  0% { transform: scale(.96); }
  54% { transform: scale(1.035); }
  100% { transform: scale(1); }
}

@media (max-width: 760px) {
  body:not(.admin-page) .panel > #mainTabs.ios-mode-nav {
    position: relative !important;
    inset: auto !important;
    z-index: 35 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: calc(100% + 4px) !important;
    margin-inline: -2px !important;
    padding-inline: 50% !important;
    scroll-padding-inline: 50%;
    scroll-snap-type: x mandatory;
  }

  body:not(.admin-page) .panel > #mainTabs .ios-mode-item,
  body:not(.admin-page) #mainTabs .ios-mode-item:is(:hover, :focus-visible, .is-active, .active) {
    width: auto !important;
    height: var(--mode-item-height) !important;
    min-height: var(--mode-item-height) !important;
    justify-content: center !important;
    min-width: max-content !important;
    flex: 0 0 auto !important;
    padding-inline: 13px !important;
    font-size: .68rem !important;
  }

  body:not(.admin-page) #tab-settings,
  body:not(.admin-page) #tab-donate .donate-layout {
    border-radius: var(--ios-radius-lg) var(--ios-radius-lg) var(--ios-radius-sm) var(--ios-radius-sm) !important;
  }
}

@media (max-width: 390px) {
  body:not(.admin-page) .panel > #mainTabs.ios-mode-nav { --mode-item-height: 38px; min-height: 48px !important; }
  body:not(.admin-page) .panel > #mainTabs .ios-mode-item,
  body:not(.admin-page) #mainTabs .ios-mode-item:is(:hover, :focus-visible, .is-active, .active) { padding-inline: 11px !important; }
}

html:is(.is-performance-mode, .effects-lite) body:not(.admin-page) .panel > #mainTabs.ios-mode-nav,
html:is(.is-performance-mode, .effects-lite) body:not(.admin-page) :is(.copy-toast, .community-toast, .shimeji-chat-bubble) {
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

html:is(.is-performance-mode, .effects-lite) body:not(.admin-page) #mainTabs .ios-mode-indicator::before { display: none; }

@media (prefers-reduced-motion: reduce) {
  body:not(.admin-page) .panel > #mainTabs.ios-mode-nav { scroll-behavior: auto; }
  body:not(.admin-page) #mainTabs .ios-mode-indicator::before,
  body:not(.admin-page) #mainTabs .ios-mode-indicator__shine,
  body:not(.admin-page) #mainTabs .ios-mode-ripple { display: none !important; }
  body:not(.admin-page) #mainTabs .ios-mode-item,
  body:not(.admin-page) #mainTabs .ios-mode-label,
  body:not(.admin-page) :is(button, [role="button"], input, select, textarea) {
    animation: none !important;
    transition-duration: 120ms !important;
  }
}

/* 1.9.84: the IP visibility control keeps its rounded hit area, but must not
   paint a dark badge over the verification glass. This late layer wins over
   every shared button treatment loaded after access-gate.css. */
body:not(.admin-page) #rabbit-ip-toggle,
body:not(.admin-page) #rabbit-ip-toggle:is(:hover, :focus, :focus-visible, :active) {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-color: transparent !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  filter: none !important;
  outline: none !important;
}

body:not(.admin-page) #rabbit-ip-toggle::before,
body:not(.admin-page) #rabbit-ip-toggle::after {
  display: none !important;
  background: none !important;
  box-shadow: none !important;
  content: none !important;
}

/* 1.9.87 public typography: prefer a clean native UI face instead of the
   decorative mono webfonts for normal Vietnamese interface copy. Icon fonts
   remain untouched because their glyph elements are not included here. */
body:not(.admin-page),
body:not(.admin-page) :is(
  h1, h2, h3, h4, h5, h6,
  p, a, button, input, textarea, select, option,
  strong, b, small, label, time, dt, dd,
  [data-content-title], .contact-kicker, .community-kicker
) {
  font-family: "Segoe UI Variable Text", "Segoe UI", Tahoma, Arial, sans-serif !important;
}

/* Phone navigation: seven modes do not fit a camera-style, centred scroller.
   Use a stable 4 + 3 grid so every destination stays visible and the selected
   mode cannot appear to jump while the user swipes the page. */
@media (max-width: 760px) {
  body:not(.admin-page) .panel > #mainTabs.ios-mode-nav {
    display: grid !important;
    width: 100% !important;
    min-height: 0 !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 5px !important;
    margin: 0 0 14px !important;
    padding: 6px !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
    scroll-padding-inline: 0 !important;
  }

  body:not(.admin-page) #mainTabs .ios-mode-indicator {
    display: none !important;
  }

  body:not(.admin-page) .panel > #mainTabs .ios-mode-item,
  body:not(.admin-page) #mainTabs .ios-mode-item:is(:hover, :focus-visible, .is-active, .active) {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 5px !important;
    overflow: hidden !important;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    color: rgba(255, 250, 253, .76) !important;
    font-size: clamp(.58rem, 2.45vw, .68rem) !important;
    line-height: 1 !important;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 1 !important;
    scale: 1 !important;
    transform: none !important;
  }

  body:not(.admin-page) #mainTabs .ios-mode-item:is(.is-active, [aria-current="page"]) {
    border: 1px solid rgba(255, 255, 255, .32) !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, .08) 100%) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .20), inset 0 1.5px 1px rgba(255, 255, 255, .65) !important;
    backdrop-filter: blur(12px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(160%) !important;
    color: #fff !important;
    text-shadow: 0 0 10px rgba(255, 255, 255, .50) !important;
  }

  body:not(.admin-page) #mainTabs .ios-mode-label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body:not(.admin-page) #mainTabs .ios-mode-item:nth-last-child(1) {
    grid-column: 3;
  }
}

@media (max-width: 390px) {
  body:not(.admin-page) .panel > #mainTabs.ios-mode-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body:not(.admin-page) #mainTabs .ios-mode-item:nth-last-child(1) {
    grid-column: auto;
  }
}

/* Settings glass: high-contrast dark obsidian glass with crisp modern typography. */
body:not(.admin-page) #tab-settings {
  font-family: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

body:not(.admin-page) #tab-settings .settings-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: stretch !important;
}

body:not(.admin-page) #tab-settings .settings-card {
  display: flex !important;
  flex-direction: column !important;
  background: linear-gradient(155deg, rgba(16, 22, 42, .92), rgba(10, 14, 28, .96)) !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  border-radius: 18px !important;
  padding: 18px 20px 16px !important;
  box-shadow: 0 16px 42px rgba(0, 0, 0, .40), inset 0 1px 0 rgba(255, 255, 255, .14) !important;
  backdrop-filter: blur(12px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(120%) !important;
  font-family: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease !important;
}

body:not(.admin-page) #tab-settings .settings-card:is(:hover, :focus-within, :focus-visible) {
  background: linear-gradient(155deg, rgba(20, 28, 54, .94), rgba(12, 17, 34, .98)) !important;
  border-color: rgba(var(--card-accent-rgb, 140, 180, 255), .45) !important;
  box-shadow: 0 22px 50px rgba(0, 0, 0, .50), 0 0 20px rgba(var(--card-accent-rgb, 140, 180, 255), .16) !important;
  transform: translateY(-2px) !important;
}

body:not(.admin-page) #tab-settings .settings-card h3 {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 0 14px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid rgba(255, 255, 255, .10) !important;
  font-family: inherit !important;
  font-size: 16.5px !important;
  font-weight: 750 !important;
  letter-spacing: .015em !important;
  color: #ffffff !important;
}

body:not(.admin-page) #tab-settings .settings-card h3 > i {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 9px !important;
  font-size: 14px !important;
  flex-shrink: 0 !important;
  color: rgb(var(--card-accent-rgb, 56, 189, 248)) !important;
  background: rgba(var(--card-accent-rgb, 56, 189, 248), .18) !important;
  border: 1px solid rgba(var(--card-accent-rgb, 56, 189, 248), .35) !important;
}

body:not(.admin-page) #tab-settings .settings-card dl {
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  margin: 0 !important;
  width: 100% !important;
}

body:not(.admin-page) #tab-settings .settings-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100% !important;
  min-height: 44px !important;
  padding: 8px 14px !important;
  margin: 0 !important;
  border-radius: 11px !important;
  border: 1px solid rgba(255, 255, 255, .09) !important;
  background: rgba(255, 255, 255, .05) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05) !important;
  backdrop-filter: blur(8px) saturate(110%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(110%) !important;
  transition: all .18s ease !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}

body:not(.admin-page) #tab-settings .settings-row:hover {
  background: rgba(var(--card-accent-rgb, 255, 255, 255), .12) !important;
  border-color: rgba(var(--card-accent-rgb, 255, 255, 255), .35) !important;
  transform: translate3d(2px, 0, 0) !important;
}

body:not(.admin-page) #tab-settings .settings-row dt {
  margin: 0 !important;
  font-family: inherit !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #e2e8f0 !important;
  white-space: nowrap !important;
}

body:not(.admin-page) #tab-settings .settings-row dd {
  margin: 0 !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  background: rgba(255, 255, 255, .10) !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  border-radius: 8px !important;
  padding: 4px 12px !important;
  white-space: nowrap !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

body:not(.admin-page) #tab-settings .code-setting-input {
  background: rgba(6, 9, 18, .94) !important;
  border: 1px solid rgba(244, 114, 182, .40) !important;
  border-radius: 12px !important;
  color: #fbcfe8 !important;
  font-family: 'Fira Code', 'JetBrains Mono', Consolas, monospace !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  padding: 12px 14px !important;
  width: 100% !important;
  min-height: 72px !important;
  box-sizing: border-box !important;
}

@media (max-width: 760px) {
  body:not(.admin-page) #tab-settings .settings-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body:not(.admin-page) .panel > #mainTabs.ios-mode-nav,
  body:not(.admin-page) :is(.copy-toast, .community-toast, .shimeji-chat-bubble) { background: rgba(40, 36, 47, .72) !important; }
}

/* 1.9.22 unified seven-tab glass frame.
   The panel is the only full-size surface. Tab roots and layout wrappers stay
   transparent so their alpha layers cannot stack into a large purple slab. */
body:not(.admin-page) {
  --tab-frame-line: rgba(255, 255, 255, .15);
  --tab-frame-line-soft: rgba(255, 255, 255, .09);
  --tab-frame-highlight: rgba(255, 255, 255, .028);
  --tab-frame-fill: rgba(255, 255, 255, .014);
  --tab-frame-fill-inner: rgba(255, 255, 255, .022);
  --tab-frame-fill-hover: rgba(255, 255, 255, .038);
  --tab-frame-glow: rgba(18, 18, 28, .07);
  --tab-card-line: var(--tab-frame-line);
  --tab-card-fill: var(--tab-frame-fill);
  --tab-card-fill-hover: var(--tab-frame-fill-hover);
}

body:not(.admin-page)[data-tab] .shell,
body:not(.admin-page)[data-tab] .shell > :is(.sidebar, .panel, .footer),
body:not(.admin-page)[data-tab] .shell > .panel > .tab-content {
  min-width: 0 !important;
  min-inline-size: 0 !important;
}

body:not(.admin-page)[data-tab] .shell > .panel,
body:not(.admin-page).is-adaptive-frame-glow[data-tab] .shell > .panel {
  align-self: start !important;
  width: 100% !important;
  max-width: 850px !important;
  min-height: 0 !important;
  padding: clamp(15px, 2vw, 20px) !important;
  overflow: visible !important;
  border: 1px solid var(--tab-frame-line) !important;
  border-radius: 28px !important;
  outline: 0 !important;
  background-color: var(--tab-frame-fill) !important;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .024), transparent 34%) !important;
  box-shadow: 0 14px 36px rgba(10, 8, 18, .10), inset 0 1px 0 rgba(255, 255, 255, .10) !important;
  backdrop-filter: blur(2.5px) saturate(103%) !important;
  -webkit-backdrop-filter: blur(2.5px) saturate(103%) !important;
}

/* All seven sections share the same gutter and remain transition/layout hosts,
   never a second full-panel frame. */
body:not(.admin-page)[data-tab] .shell > .panel > :is(
  #tab-home,
  #tab-about,
  #tab-settings,
  #tab-socials,
  #tab-waifu,
  #tab-contact,
  #tab-donate
) {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: clamp(8px, 1.4vw, 14px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body:not(.admin-page)[data-tab] :is(
  #tab-home > .home-sections-wrapper,
  #tab-about > .about-layout,
  #tab-settings > .settings-grid,
  #tab-socials > .social-layout,
  #tab-waifu > .waifu-panels,
  #tab-waifu .waifu-layout,
  #tab-contact > .contact-layout,
  #tab-donate > .donate-layout
) {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-inline-size: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body:not(.admin-page)[data-tab] #tab-home > .home-sections-wrapper {
  padding: 0 !important;
}

/* Normalize top-level semantic cards only. Nested rows, media, QR artwork,
   forms, feed entries, and fixed viewport widgets keep their own contracts. */
body:not(.admin-page)[data-tab] :is(
  #tab-home #gearGrid > .item-card,
  #tab-home #rankGrid > .rank-card,
  #tab-home #gameGrid > .rank-card,
  #tab-about .about-layout > .wide-card,
  #tab-about .about-layout > .side-card,
  #tab-about #aboutCards > article,
  #tab-about > .about-interests,
  #tab-settings .settings-grid > .settings-card,
  #tab-socials .social-layout > .list-card,
  #tab-waifu .waifu-masthead,
  #tab-waifu .waifu-layout > .waifu-card,
  #tab-waifu .waifu-layout > .glass-card,
  #tab-contact .contact-layout > .contact-intro,
  #tab-contact .contact-layout > .community-board,
  #tab-donate .donate-column > .donate-card,
  #tab-donate .donate-column > .thanks
) {
  min-width: 0 !important;
  min-inline-size: 0 !important;
  border: 1px solid var(--tab-card-line) !important;
  background-color: var(--tab-card-fill) !important;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .024), transparent 34%) !important;
  box-shadow: 0 14px 36px rgba(10, 8, 18, .10), inset 0 1px 0 rgba(255, 255, 255, .10) !important;
  backdrop-filter: blur(3px) saturate(104%) !important;
  -webkit-backdrop-filter: blur(3px) saturate(104%) !important;
}

body:not(.admin-page)[data-tab] :is(
  #tab-home #gearGrid > .item-card,
  #tab-home #rankGrid > .rank-card,
  #tab-home #gameGrid > .rank-card,
  #tab-about .about-layout > .wide-card,
  #tab-about .about-layout > .side-card,
  #tab-about #aboutCards > article,
  #tab-about > .about-interests,
  #tab-settings .settings-grid > .settings-card,
  #tab-socials .social-layout > .list-card,
  #tab-waifu .waifu-masthead,
  #tab-waifu .waifu-layout > .waifu-card,
  #tab-waifu .waifu-layout > .glass-card,
  #tab-contact .contact-layout > .contact-intro,
  #tab-contact .contact-layout > .community-board,
  #tab-donate .donate-column > .donate-card,
  #tab-donate .donate-column > .thanks
):is(:hover, :focus-within) {
  border-color: var(--tab-card-line) !important;
  background-color: var(--tab-card-fill-hover) !important;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .024), transparent 34%) !important;
  box-shadow: 0 13px 32px rgba(10, 8, 18, .10), inset 0 1px 0 rgba(255, 255, 255, .10) !important;
}

/* The 850px content track may shrink between laptop breakpoints. A fixed
   280px sidebar previously made the grid wider than its own shell at 50% zoom. */
@media (min-width: 992px) {
  body:not(.admin-page)[data-tab] .shell {
    grid-template-columns: minmax(218px, 280px) minmax(0, 850px) !important;
  }
}

@media (max-width: 991px) {
  body:not(.admin-page)[data-tab] .shell > .panel,
  body:not(.admin-page).is-adaptive-frame-glow[data-tab] .shell > .panel {
    max-width: 100% !important;
    padding: 12px !important;
    border-radius: 22px !important;
    backdrop-filter: blur(2px) saturate(102%) !important;
    -webkit-backdrop-filter: blur(2px) saturate(102%) !important;
  }

  body:not(.admin-page)[data-tab] .shell > .panel > :is(
    #tab-home,
    #tab-about,
    #tab-settings,
    #tab-socials,
    #tab-waifu,
    #tab-contact,
    #tab-donate
  ) {
    padding: 10px !important;
  }
}

@media (max-width: 480px) {
  body:not(.admin-page)[data-tab] .shell > .panel,
  body:not(.admin-page).is-adaptive-frame-glow[data-tab] .shell > .panel {
    padding: 8px !important;
    border-radius: 18px !important;
  }

  body:not(.admin-page)[data-tab] .shell > .panel > :is(
    #tab-home,
    #tab-about,
    #tab-settings,
    #tab-socials,
    #tab-waifu,
    #tab-contact,
    #tab-donate
  ) {
    padding: 6px !important;
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body:not(.admin-page)[data-tab] .shell > .panel {
    background-color: rgba(255, 255, 255, .045) !important;
  }
}

/* 1.9.37 background-light glass unification.
   Every semantic frame inside the seven pages inherits the same transparent
   material as the large panel. No black/gray fill or black frame shadow. */
body:not(.admin-page)[data-tab] :is(
  .shell > .panel,
  .sidebar > .profile-card,
  .sidebar > .mini-status,
  .footer-card,
  #mainTabs.ios-mode-nav
) {
  border-color: var(--tab-frame-line) !important;
  background-color: var(--tab-frame-fill) !important;
  background-image: linear-gradient(180deg, var(--tab-frame-highlight), transparent 42%) !important;
  box-shadow:
    0 14px 38px var(--tab-frame-glow),
    inset 0 1px 0 rgba(255, 255, 255, .16) !important;
}

body:not(.admin-page)[data-tab] .panel > :is(
  #tab-home,
  #tab-about,
  #tab-settings,
  #tab-socials,
  #tab-waifu,
  #tab-contact,
  #tab-donate
) :is(
  .item-card,
  .rank-card,
  .wide-card,
  .side-card,
  .about-interests,
  .settings-card,
  .list-card,
  .waifu-masthead,
  .waifu-card,
  .glass-card,
  .contact-intro,
  .contact-form,
  .community-board,
  .donate-hero,
  .donate-card,
  .donate-bank-card,
  .donate-controls-card,
  .donate-qr-card,
  .donate-guide-card,
  .thanks
) {
  border-color: var(--tab-frame-line) !important;
  background-color: var(--tab-card-fill) !important;
  background-image: linear-gradient(155deg, var(--tab-frame-highlight), transparent 48%) !important;
  box-shadow:
    0 12px 32px var(--tab-frame-glow),
    inset 0 1px 0 rgba(255, 255, 255, .13) !important;
  backdrop-filter: blur(3px) saturate(104%) !important;
  -webkit-backdrop-filter: blur(3px) saturate(104%) !important;
}

body:not(.admin-page)[data-tab] .panel > :is(
  #tab-home,
  #tab-about,
  #tab-settings,
  #tab-socials,
  #tab-waifu,
  #tab-contact,
  #tab-donate
) :is(
  .about-info-card,
  .info-strip,
  .studio-eq,
  .artist-ranking,
  .artist-ranking > li,
  .settings-row,
  .code-setting-input,
  .code-setting-actions,
  .code-setting-actions > button,
  .list-card__section,
  .social-section-group,
  .social-row,
  .waifu-tabs,
  .waifu-tab,
  .waifu-metadata,
  .waifu-metadata > *,
  .waifu-reason,
  .waifu-note,
  .memory-card,
  .waifu-portrait-card,
  .community-board__tabs,
  .community-board__update,
  .community-board-post,
  .community-board-image,
  .community-board-empty,
  .contact-community-entry,
  .amounts,
  .donate-bank-rows,
  .donate-bank-rows > *,
  .payment-row,
  .pay-row,
  .donate-guide-note,
  .vietqr-info
) {
  border-color: var(--tab-frame-line-soft) !important;
  background-color: var(--tab-frame-fill-inner) !important;
  background-image: linear-gradient(145deg, var(--tab-frame-highlight), transparent 62%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10) !important;
}

body:not(.admin-page)[data-tab] .panel > :is(
  #tab-home,
  #tab-about,
  #tab-settings,
  #tab-socials,
  #tab-waifu,
  #tab-contact,
  #tab-donate
) :is(
  input,
  textarea,
  select,
  .tag-row > *,
  .pill-row > *,
  .about-interests span,
  .artist-ranking > li,
  .item-card > span,
  .rank-card > span,
  .settings-row dd,
  .code-setting-actions > button,
  .amounts > button,
  .donate-bank-rows > *,
  .payment-row,
  .pay-row,
  .community-board__tabs > button,
  .waifu-tab,
  .waifu-metadata > *
) {
  border-color: var(--tab-frame-line-soft) !important;
  background-color: var(--tab-frame-fill-inner) !important;
  background-image: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

body:not(.admin-page)[data-tab] .panel > :is(
  #tab-home,
  #tab-about,
  #tab-settings,
  #tab-socials,
  #tab-waifu,
  #tab-contact,
  #tab-donate
) :is(
  .item-card,
  .rank-card,
  .wide-card,
  .side-card,
  .about-info-card,
  .settings-card,
  .settings-row,
  .list-card,
  .social-row,
  .waifu-card,
  .waifu-note,
  .memory-card,
  .contact-intro,
  .community-board-post,
  .community-board-image,
  .donate-card,
  .donate-guide-note
):is(:hover, :focus-within) {
  border-color: var(--tab-frame-line) !important;
  background-color: var(--tab-frame-fill-hover) !important;
  box-shadow:
    0 14px 34px var(--tab-frame-glow),
    inset 0 1px 0 rgba(255, 255, 255, .15) !important;
}

body:not(.admin-page)[data-tab] .panel > :is(
  #tab-home,
  #tab-about,
  #tab-settings,
  #tab-socials,
  #tab-waifu,
  #tab-contact,
  #tab-donate
) :is(
  [class*="-card"],
  [class*="-row"],
  [class*="-panel"],
  [class*="-tabs"],
  [class*="-note"],
  [class*="-info"]
) {
  border-color: var(--tab-frame-line-soft) !important;
  outline-color: var(--tab-frame-line-soft) !important;
}

/* Owner presence indicators follow the authenticated Admin heartbeat.
   Only a live "online" response is green; every other state stays gray. */
body:not(.admin-page) .owner-presence {
  --presence-color: #9ba3ad !important;
}

body:not(.admin-page) .owner-presence[data-status="online"] {
  --presence-color: #a4e8bd !important;
}

body:not(.admin-page) .owner-presence:not([data-status="online"]) .presence-dot {
  animation: none !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .14),
    0 0 6px rgba(155, 163, 173, .24) !important;
}

body:not(.admin-page) #miniStatusCard .mini-status__avatar-frame::after,
body:not(.admin-page) #miniStatusCard .mini-status__expanded-avatar > i {
  background: #9ba3ad !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .12),
    0 0 7px rgba(155, 163, 173, .32) !important;
  filter: none !important;
  animation: none !important;
}

body:not(.admin-page) #miniStatusCard[data-owner-status="online"] .mini-status__avatar-frame::after,
body:not(.admin-page) #miniStatusCard[data-owner-status="online"] .mini-status__expanded-avatar > i {
  background: #a4e8bd !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .22),
    0 0 9px rgba(164, 232, 189, .62) !important;
  animation: presencePulse 2.8s ease-in-out infinite !important;
}

@media (prefers-reduced-motion: reduce) {
  body:not(.admin-page) #miniStatusCard[data-owner-status="online"] .mini-status__avatar-frame::after,
  body:not(.admin-page) #miniStatusCard[data-owner-status="online"] .mini-status__expanded-avatar > i {
    animation: none !important;
  }
}

/* 1.9.76 final hover-state layer. This stylesheet loads after the main bundle,
   so hover must be declared here to win over the iOS glass surface values.
   Keep click/focus as touch and keyboard fallbacks. */
body:not(.admin-page)[data-tab] :is(
  #tab-home #gearGrid > .item-card,
  #tab-home #rankGrid > .rank-card,
  #tab-home #gameGrid > .rank-card,
  #tab-about [data-about-clickable],
  #tab-settings [data-setting-clickable],
  #tab-socials .social-row,
  #tab-waifu [data-waifu-surface],
  #tab-waifu [data-waifu-click],
  .library-post
):is(:hover, :focus-visible, .is-clicked) {
  border-color: rgba(224, 226, 234, .20) !important;
  background-color: rgba(9, 12, 16, .14) !important;
  background-image: none !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .05),
    0 8px 20px rgba(0, 0, 0, .10),
    0 0 14px rgba(224, 226, 234, .06) !important;
  filter: brightness(1.025) saturate(1.01) !important;
  transform: translate3d(0, -4px, 0) !important;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms cubic-bezier(.22, 1, .36, 1),
    filter 180ms ease !important;
}

body:not(.admin-page)[data-tab] :is(
  #tab-home #gearGrid > .item-card,
  #tab-home #rankGrid > .rank-card,
  #tab-home #gameGrid > .rank-card
):is(:hover, :focus-visible, .is-clicked) > img {
  transform: translate3d(0, -5px, 0) scale(1.04) !important;
}

@media (prefers-reduced-motion: reduce) {
  body:not(.admin-page)[data-tab] [data-click-feedback]:is(:hover, :focus-visible, .is-clicked) {
    filter: brightness(1.025) !important;
    transform: none !important;
    transition-duration: .01ms !important;
  }
}

/* Final typography lock, deliberately last so legacy decorative font rules do
   not reapply farther down the cascade. */
body:not(.admin-page),
body:not(.admin-page) :is(
  h1, h2, h3, h4, h5, h6,
  p, a, button, input, textarea, select, option,
  strong, b, small, label, time, dt, dd,
  [data-content-title], .contact-kicker, .community-kicker
) {
  font-family: "Segoe UI Variable Text", "Segoe UI", Tahoma, Arial, sans-serif !important;
}