/* ==========================================================================
   Component Styles - Floating Island Navbar, Hero & Ambient Controls,
   Asymmetric Bento Grid, Interactive Blog with Filter Tabs, Command Palette
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Floating Island Navbar
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 1rem;
  left: 0;
  right: 0;
  width: 100%;
  box-sizing: border-box;
  z-index: 100;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), top 0.3s ease;
  will-change: transform;
}

/* WordPress Admin Bar: Eliminated for edge-to-edge full-screen deck experience */
#wpadminbar {
  display: none !important;
  height: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.admin-bar .site-header,
.admin-bar .site-header {
  top: 1rem !important;
}

@media screen and (max-width: 782px) {
  body.admin-bar .site-header,
  .admin-bar .site-header {
    top: calc(0.4rem + env(safe-area-inset-top, 0px)) !important;
  }
}

.nav-island {
  position: relative;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  padding: 0;
  margin: 0 auto;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid transparent;
  border-radius: 24px;
  box-shadow: none;
  width: 38px;
  min-width: 38px;
  max-width: 38px;
  height: 38px;
  min-height: 38px;
  box-sizing: border-box;
  overflow: visible;
  transform: translateY(0);
  transition: max-width 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              min-width 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              height 0.42s cubic-bezier(0.16, 1, 0.3, 1),
              padding 0.42s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.42s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.35s ease,
              border-color 0.35s ease,
              box-shadow 0.45s ease;
  will-change: max-width, box-shadow, transform;
}

.nav-island-top-row {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 38px !important;
  min-height: 38px !important;
  box-sizing: border-box !important;
  position: relative !important;
  border-bottom: 1px solid transparent;
  padding-bottom: 0;
  transition: border-color 0.32s ease, margin-bottom 0.35s ease;
}

/* Brand Wings: Symmetrical left & right expansion */
.brand-wing {
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  min-width: 0;
}

.brand-wing-left {
  grid-column: 1;
  justify-content: flex-end;
  cursor: pointer;
}

.brand-wing-left * {
  cursor: pointer;
}

.brand-center-dot {
  grid-column: 2;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  z-index: 2;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  cursor: pointer;
}

.brand-wing-right {
  grid-column: 3;
  justify-content: flex-start;
  gap: 8px;
}

.site-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  color: #ffffff;
  flex-shrink: 0;
  white-space: nowrap;
  cursor: pointer;
}

.brand-dot-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  cursor: pointer;
}

.brand-logo {
  height: 36px;
  width: 36px;
  border-radius: var(--radius-full);
  box-shadow: 0 0 10px rgba(5, 150, 105, 0.45);
  object-fit: cover;
  border: 1.5px solid var(--color-primary-light);
  display: block;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.brand-name-prefix {
  display: inline-block;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  letter-spacing: -0.02em;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  color: #ffffff;
  text-decoration: none;
  transform: translateX(-12px);
  filter: blur(4px);
  pointer-events: none;
  margin-right: 0;
  transition: max-width 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.28s ease,
              transform 0.42s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.28s ease,
              margin-right 0.42s ease;
}

.brand-name-suffix {
  display: inline-block;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  letter-spacing: -0.02em;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  color: #ffffff;
  text-decoration: none;
  transform: translateX(12px);
  filter: blur(4px);
  pointer-events: none;
  margin-left: 0;
  transition: max-width 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.28s ease,
              transform 0.42s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.28s ease,
              margin-left 0.42s ease;
}

/* Inline horizontal flags inside Right Wing */
.nav-inline-languages {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateX(12px);
  filter: blur(4px);
  pointer-events: none;
  transition: max-width 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.28s ease,
              transform 0.42s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.28s ease;
}

/* Nav Revealable Container */
.nav-revealable {
  display: inline-flex;
  align-items: center;
  gap: 1.15rem;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transform: translateX(14px);
  filter: blur(4px);
  white-space: nowrap;
  margin-left: 0;
  transition: max-width 0.48s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.42s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              margin-left 0.48s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: max-width, opacity, transform;
}

/* Smooth expansion when mousing over the island or header area:
   Single unified pill around tubywuby without shifting tubywuby */
.nav-island:hover,
.nav-island:focus-within,
.site-header:hover .nav-island,
.site-header.is-hovered .nav-island {
  width: auto !important;
  min-width: 0 !important;
  max-width: 540px !important;
  height: auto !important;
  min-height: 40px !important;
  border-radius: 24px !important;
  padding: 2px 20px !important;
  transform: translateY(0) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-top: 1.5px solid rgba(255, 255, 255, 0.35) !important;
  border-left: 1.2px solid rgba(255, 255, 255, 0.22) !important;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(14, 20, 32, 0.15) 100%
  ) !important;
  backdrop-filter: blur(8px) saturate(110%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(110%) !important;
  box-shadow: 
    0 6px 18px -4px rgba(0, 0, 0, 0.20),
    0 2px 4px rgba(0, 0, 0, 0.08),
    inset 0 1px 1.5px 0 rgba(255, 255, 255, 0.22),
    0 0 12px rgba(52, 211, 153, 0.08) !important;
  align-items: center !important;
  overflow: visible !important;
}

/* Single Top Row Pill: No divider line or separate background */
.nav-island:hover .nav-island-top-row,
.nav-island:focus-within .nav-island-top-row,
.site-header:hover .nav-island-top-row,
.site-header.is-hovered .nav-island-top-row {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  height: auto !important;
  min-height: 38px !important;
  margin-bottom: 0 !important;
}

.nav-island:hover .brand-name-prefix,
.nav-island:focus-within .brand-name-prefix,
.site-header:hover .brand-name-prefix,
.site-header.is-hovered .brand-name-prefix {
  max-width: 170px;
  opacity: 1;
  transform: translateX(0);
  filter: blur(0px);
  margin-right: 8px;
  pointer-events: auto !important;
  cursor: pointer !important;
}

.brand-name-prefix:hover,
.brand-name-suffix:hover {
  color: var(--color-primary-light, #34d399) !important;
}

[data-theme="light"] .brand-name-prefix:hover,
[data-theme="light"] .brand-name-suffix:hover {
  color: #059669 !important;
}

.nav-island:hover .brand-name-suffix,
.nav-island:focus-within .brand-name-suffix,
.site-header:hover .brand-name-suffix,
.site-header.is-hovered .brand-name-suffix {
  max-width: 50px;
  opacity: 1;
  transform: translateX(0);
  filter: blur(0px);
  margin-left: 8px;
  pointer-events: auto !important;
  cursor: pointer !important;
}

.nav-island:hover .brand-wing-right,
.nav-island:focus-within .brand-wing-right,
.site-header:hover .brand-wing-right,
.site-header.is-hovered .brand-wing-right {
  overflow: visible !important;
}

.nav-island:hover .nav-inline-languages,
.nav-island:focus-within .nav-inline-languages,
.site-header:hover .nav-inline-languages,
.site-header.is-hovered .nav-inline-languages {
  max-width: 140px;
  opacity: 1;
  transform: translateX(0);
  filter: blur(0px);
  pointer-events: auto;
  overflow: visible !important;
}

/* Language Flag Buttons - Relative anchor for help text */
.lang-flag-btn {
  position: relative !important;
  overflow: visible !important;
}

/* Language Help Text Tooltip — Matches the exact look and motion of dog-summon-name, placed safely beyond cursor reach */
.lang-flag-name {
  position: absolute;
  top: calc(100% + 18px);
  left: 50%;
  transform: translateX(-50%) translateY(-2px);
  background: rgba(8, 22, 16, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #e2e8f0;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 9999px;
  border: 1px solid rgba(16, 185, 129, 0.35);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none !important;
  transition: opacity 0.18s ease, transform 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
  z-index: 1000;
}

/* Glass caret pointing up to button anchor */
.lang-flag-name::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 0 4px 5px 4px;
  border-style: solid;
  border-color: transparent transparent rgba(8, 22, 16, 0.95) transparent;
}

.lang-flag-btn:hover .lang-flag-name {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  border-color: rgba(52, 211, 153, 0.7);
  color: #a7f3d0;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), 0 0 10px rgba(16, 185, 129, 0.35);
}

[data-theme="light"] .lang-flag-name {
  background: rgba(255, 255, 255, 0.96);
  color: #0f172a !important;
  border-color: rgba(5, 150, 105, 0.35);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .lang-flag-name::before {
  border-color: transparent transparent rgba(255, 255, 255, 0.96) transparent;
}

[data-theme="light"] .lang-flag-btn:hover .lang-flag-name {
  border-color: rgba(5, 150, 105, 0.7);
  color: #047857 !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15), 0 0 10px rgba(16, 185, 129, 0.25);
}

.nav-island:hover .brand-logo,
.nav-island:focus-within .brand-logo,
.site-header:hover .brand-logo,
.site-header.is-hovered .brand-logo {
  transform: scale(1.04);
  box-shadow: 0 0 14px rgba(52, 211, 153, 0.6);
}

/* Flag Buttons inside Nav Island */
.nav-inline-languages .lang-flag-btn {
  background: transparent !important;
  border: none !important;
  border-radius: 3px !important;
  padding: 0 !important;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  opacity: 0.75;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 0.2s ease,
              filter 0.22s ease !important;
  position: relative;
}

.nav-inline-languages .lang-flag-btn:hover {
  transform: scale(1.22) translateY(-2px) !important;
  opacity: 1 !important;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 10px rgba(52, 211, 153, 0.75)) !important;
}

.nav-inline-languages .lang-flag-btn:active {
  transform: scale(0.92) !important;
  transition: transform 0.08s ease !important;
}

.nav-inline-languages .lang-flag-btn.active {
  opacity: 1 !important;
  transform: scale(1.08) !important;
}

.nav-inline-languages .lang-flag-btn.active .waving-flag {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6), 0 0 8px rgba(52, 211, 153, 0.5) !important;
}

.nav-island:hover .nav-revealable,
.nav-island:focus-within .nav-revealable,
.site-header:hover .nav-revealable,
.site-header.is-hovered .nav-revealable {
  max-width: 520px;
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
  filter: blur(0px);
  margin-left: auto; /* Push actions to the external right edge */
  flex: 1;
  justify-content: flex-end;
  transition: max-width 0.48s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.36s 0.05s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.46s 0.03s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.32s 0.03s cubic-bezier(0.16, 1, 0.3, 1),
              margin-left 0.48s cubic-bezier(0.16, 1, 0.3, 1);
}

.brand-logo {
  height: 36px;
  width: 36px;
  border-radius: var(--radius-full);
  box-shadow: 0 0 10px rgba(5, 150, 105, 0.4);
  object-fit: cover;
  border: 1.5px solid var(--color-primary-light);
}

.brand-text {
  letter-spacing: -0.02em;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.nav-menu {
  position: relative;
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0.2rem;
  gap: 0.2rem;
  align-items: center;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.04);
}

/* Morphing Magnetic Sliding Pill Indicator */
.nav-indicator-pill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, rgba(5, 150, 105, 0.35) 0%, rgba(16, 185, 129, 0.24) 100%);
  border: 1px solid rgba(52, 211, 153, 0.55);
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.35), inset 0 1px 2px rgba(255, 255, 255, 0.2);
  pointer-events: none;
  z-index: 1;
  transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1),
              width 0.24s cubic-bezier(0.2, 0.8, 0.2, 1),
              opacity 0.18s ease;
  opacity: 0;
  will-change: transform, width;
}

.nav-menu li {
  position: relative;
  z-index: 2;
  list-style: none;
}

.nav-menu a {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: #cbd5e1;
  font-size: 0.88rem;
  font-weight: 500;
  padding: 0.4rem 0.92rem;
  border-radius: var(--radius-full);
  transition: color var(--transition-fast), transform 0.12s ease;
  white-space: nowrap;
  user-select: none;
}

.nav-menu a:hover {
  color: #ffffff;
}

.nav-menu a:active {
  transform: scale(0.93);
}

.nav-menu .current-menu-item > a {
  color: #ffffff;
  font-weight: 600;
}

.nav-item-dogs {
  display: inline-flex;
  align-items: center;
  position: relative;
  z-index: 2;
  margin-left: 0.2rem;
}

/* Instant micro-feedback on interactive nav controls */
.btn-command-palette-trigger:active,
.lang-btn:active,
.deck-hud-btn:active,
.ambient-btn:active {
  transform: scale(0.92) !important;
}

/* --------------------------------------------------------------------------
   Language Switcher (Polylang & Custom)
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Companion Dogs Dock: Free-floating avatar companions directly below the pill (No container)
   -------------------------------------------------------------------------- */
.nav-hanging-dogs {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(0) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 4px 10px !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 0 !important;
  /* Hidden by default; revealed only when hovering/focusing the top header area (rules below) */
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: 100 !important;
  width: max-content !important;
  max-width: none !important;
  box-sizing: border-box !important;
  transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.28s ease !important;
}

/* Hide dogs dock when turned off unless hovering above */
html.sb-dogs-disabled .nav-hanging-dogs,
body.sb-dogs-disabled .nav-hanging-dogs {
  display: flex !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.28s ease !important;
}

/* Invisible hit bridge between the top nav-island pill and the hanging dogs */
.nav-hanging-dogs::before {
  content: "";
  position: absolute;
  top: -16px;
  bottom: -10px;
  left: -20px;
  right: -20px;
  background: transparent;
  pointer-events: auto;
  z-index: -1;
}

/* ALWAYS show dog circles on hover above (nav-island, site-header, or dog dock) */
.nav-island:hover .nav-hanging-dogs,
.nav-island:focus-within .nav-hanging-dogs,
.site-header:hover .nav-hanging-dogs,
.site-header.is-hovered .nav-hanging-dogs,
.nav-hanging-dogs:hover,
html.sb-dogs-disabled .nav-island:hover .nav-hanging-dogs,
html.sb-dogs-disabled .nav-island:focus-within .nav-hanging-dogs,
html.sb-dogs-disabled .site-header:hover .nav-hanging-dogs,
html.sb-dogs-disabled .site-header.is-hovered .nav-hanging-dogs,
html.sb-dogs-disabled .nav-hanging-dogs:hover,
body.sb-dogs-disabled .nav-island:hover .nav-hanging-dogs,
body.sb-dogs-disabled .nav-island:focus-within .nav-hanging-dogs,
body.sb-dogs-disabled .site-header:hover .nav-hanging-dogs,
body.sb-dogs-disabled .site-header.is-hovered .nav-hanging-dogs,
body.sb-dogs-disabled .nav-hanging-dogs:hover {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateX(-50%) translateY(0) !important;
}

.nav-hanging-dogs,
.nav-hanging-dogs.dog-summon-dock,
.nav-hanging-dogs:hover,
.nav-hanging-dogs.dog-summon-dock:hover,
.site-header .nav-hanging-dogs,
.site-header:hover .nav-hanging-dogs,
.site-header .dog-summon-dock,
.site-header:hover .dog-summon-dock,
.nav-island .nav-hanging-dogs,
.nav-island:hover .nav-hanging-dogs,
.nav-island .dog-summon-dock,
.nav-island:hover .dog-summon-dock,
.welcome-stage-header .nav-hanging-dogs,
.welcome-stage-header:hover .nav-hanging-dogs,
.welcome-stage-header .dog-summon-dock,
.welcome-stage-header:hover .dog-summon-dock,
.nav-hanging-dogs.is-music-dancing,
.site-header .is-music-dancing.dog-summon-dock,
.nav-island .is-music-dancing.dog-summon-dock,
.nav-dog-dock {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.nav-hanging-dogs::before,
.nav-hanging-dogs::after,
.nav-hanging-dogs.dog-summon-dock::before,
.nav-hanging-dogs.dog-summon-dock::after,
.site-header .nav-hanging-dogs::before,
.site-header .nav-hanging-dogs::after,
.site-header .dog-summon-dock::before,
.site-header .dog-summon-dock::after,
.nav-island .nav-hanging-dogs::before,
.nav-island .nav-hanging-dogs::after,
.nav-island .dog-summon-dock::before,
.nav-island .dog-summon-dock::after {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.nav-hanging-dogs .dog-summon-btn {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
  background: rgba(14, 20, 32, 0.55) !important;
  backdrop-filter: blur(8px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(140%) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35), inset 0 1px 1.5px rgba(255, 255, 255, 0.2) !important;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.22s ease,
              border-color 0.22s ease !important;
}

.nav-hanging-dogs .dog-summon-btn:hover {
  transform: scale(1.18) translateY(-2px) !important;
  border-color: #34d399 !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), 0 0 16px rgba(16, 185, 129, 0.65), 0 0 4px rgba(5, 150, 105, 0.8) !important;
}

.nav-hanging-dogs .dog-summon-btn.active {
  transform: scale(1.12) translateY(-1px) !important;
  border-color: #34d399 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), 0 0 16px rgba(16, 185, 129, 0.7), inset 0 0 6px rgba(16, 185, 129, 0.4) !important;
}

.nav-hanging-dogs .dog-summon-btn.active:hover {
  transform: scale(1.22) translateY(-2px) !important;
  border-color: #6ee7b7 !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5), 0 0 22px rgba(16, 185, 129, 0.9) !important;
}

[data-theme="light"] .nav-hanging-dogs .dog-summon-btn.active {
  border-color: #059669 !important;
  box-shadow: 0 2px 10px rgba(5, 150, 105, 0.35), 0 0 14px rgba(16, 185, 129, 0.5) !important;
}

/* --------------------------------------------------------------------------
   External Vertical Flags Column: Outside container on right (No visual container)
   -------------------------------------------------------------------------- */
.nav-external-languages {
  position: absolute !important;
  left: calc(100% + 10px) !important;
  top: 50% !important;
  transform: translateY(-50%) scale(0.9) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.32s !important;
  z-index: 20 !important;
}

.site-header:hover .nav-external-languages,
.site-header.is-hovered .nav-external-languages,
.nav-island:hover .nav-external-languages,
.nav-island:focus-within .nav-external-languages,
.nav-external-languages:hover {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(-50%) scale(1) !important;
}

.nav-external-languages .lang-flag-btn {
  background: transparent !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 0 !important;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  opacity: 0.7;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 0.2s ease,
              filter 0.2s ease !important;
  position: relative;
}

.nav-external-languages .lang-flag-btn:hover {
  transform: scale(1.2) !important;
  opacity: 1 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.nav-external-languages .lang-flag-btn.active {
  opacity: 1 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transform: scale(1.08) !important;
}

.nav-external-languages .lang-flag-btn.active .waving-flag {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6), 0 0 10px rgba(52, 211, 153, 0.45);
}


/* Waving Flag SVG */
.waving-flag {
  width: 22px;
  height: 15px;
  border-radius: 2px;
  overflow: hidden;
  display: block;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  transform-origin: left center;
  will-change: transform;
}

/* Gentle Idle Wave Keyframes */
@keyframes flagWaveIdle {
  0%, 100% {
    transform: rotate(0deg) skewY(0deg);
  }
  25% {
    transform: rotate(-2deg) skewY(-1.2deg);
  }
  50% {
    transform: rotate(1.5deg) skewY(1deg);
  }
  75% {
    transform: rotate(-1deg) skewY(-0.6deg);
  }
}

/* Active Hover Flutter Keyframes */
@keyframes flagWaveFlutter {
  0%, 100% {
    transform: rotate(0deg) skewY(0deg) scale(1);
  }
  25% {
    transform: rotate(-3.5deg) skewY(-2.5deg) scale(1.04);
  }
  50% {
    transform: rotate(2.5deg) skewY(1.8deg) scale(0.98);
  }
  75% {
    transform: rotate(-2deg) skewY(-1.2deg) scale(1.02);
  }
}

.lang-flag-btn:nth-child(1) .waving-flag {
  animation: flagWaveIdle 3.4s ease-in-out infinite;
}

.lang-flag-btn:nth-child(2) .waving-flag {
  animation: flagWaveIdle 3.4s 0.38s ease-in-out infinite;
}

.lang-flag-btn:nth-child(3) .waving-flag {
  animation: flagWaveIdle 3.4s 0.76s ease-in-out infinite;
}

.lang-flag-btn:hover .waving-flag {
  animation: flagWaveFlutter 0.85s ease-in-out infinite !important;
}

/* --------------------------------------------------------------------------
   Language Switcher Cross-Fade Transitions (Fluid In-Place Swapping)
   Keeps persistent backdrop & video 100% visible; only fades foreground slide content
   -------------------------------------------------------------------------- */
.deck-slider {
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), filter 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, filter;
}

.deck-slider.is-lang-transitioning {
  opacity: 0 !important;
  filter: blur(4px) !important;
  pointer-events: none !important;
}

.deck-persistent-backdrop {
  opacity: 1 !important;
}

.nav-languages .lang-btn.is-switching-lang,
.mobile-nav-languages .lang-btn.is-switching-lang {
  opacity: 0.6;
  pointer-events: none;
}

/* Command Palette Trigger in Navbar */
.btn-command-palette-trigger {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--color-border-glass);
  color: #cbd5e1;
  cursor: pointer;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: 0.82rem;
  transition: all var(--transition-fast);
}

.btn-command-palette-trigger:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.25);
}

.kbd-badge {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  background: rgba(0, 0, 0, 0.35);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #94a3b8;
}

/* Hamburger toggle for mobile */
.nav-toggle-btn {
  display: none;
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 1.35rem;
  cursor: pointer;
  padding: 0.35rem;
}

/* Header Actions Wrapper (Audio Toggle & Mobile Hamburger) */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* Audio Toggle Button in Title Bar (Icon Only) */
.btn-audio-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--color-border-glass);
  color: #cbd5e1;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all var(--transition-fast);
  padding: 0;
  flex-shrink: 0;
}

.btn-audio-toggle:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.28);
  transform: scale(1.06);
}

.btn-audio-toggle.is-playing,
.btn-audio-toggle:not(.is-muted) {
  color: var(--color-primary-light);
  border-color: rgba(52, 211, 153, 0.35);
  box-shadow: 0 0 10px rgba(5, 150, 105, 0.25);
}

.btn-audio-toggle.is-muted {
  color: #94a3b8;
  border-color: var(--color-border-glass);
  box-shadow: none;
  opacity: 0.75;
}

/* --------------------------------------------------------------------------
   2. Hero Section & Background Media
   -------------------------------------------------------------------------- */
.hero-slide {
  position: relative;
  color: #ffffff;
}

.hero-video-wrapper,
.deck-video-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 100vh;
  transform: translate3d(-50%, -50%, 0);
  will-change: transform;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.hero-video-wrapper iframe,
.hero-video-wrapper video,
.hero-ambient-video,
.deck-video-wrapper video,
.deck-ambient-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 56.25vw;
  min-height: 100vh;
  min-width: 177.77vh;
  transform: translate3d(-50%, -50%, 0);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  object-fit: cover;
  object-position: center;
  border: none;
  opacity: 1 !important;
  pointer-events: none;
  transition: opacity 0.8s ease;
}

.hero-gradient-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 60% max transparency (40% surface shading at top/bottom edges for clean contrast) */
  background: linear-gradient(
    180deg,
    rgba(5, 8, 15, 0.38) 0%,
    rgba(5, 8, 15, 0.10) 22%,
    transparent 45%,
    transparent 65%,
    rgba(4, 7, 14, 0.18) 82%,
    rgba(3, 5, 12, 0.40) 100%
  );
  display: block !important;
  z-index: 1;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Hero Daytime Global Backdrop (Before 7 PM)
   Persistent hero background image across all sections except contact,
   with 30% darkening in content areas (off-hero).
   -------------------------------------------------------------------------- */
.hero-day-backdrop,
.deck-day-backdrop-global {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  opacity: 1;
  pointer-events: none;
  z-index: 0;
  filter: brightness(1);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), filter 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

.deck-day-content-darkener {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    ellipse 75% 65% at 50% 50%,
    rgba(2, 6, 23, 0.52) 0%,
    rgba(2, 6, 23, 0.38) 45%,
    rgba(2, 6, 23, 0.12) 75%,
    transparent 100%
  );
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Daytime Mode (Before 7 PM: 07:00 - 19:00) */
/* 1. On Hero slide: Show daytime background at 100% full brightness */
html:not([data-hero-time="night"]) body.is-slide-hero .deck-day-backdrop-global,
html:not([data-hero-time="night"]) body:not(.is-off-hero) .deck-day-backdrop-global,
body.hero-day-active.is-slide-hero .deck-day-backdrop-global,
body.hero-day-active:not(.is-off-hero) .deck-day-backdrop-global,
html[data-hero-time="day"] body.is-slide-hero .deck-day-backdrop-global,
html[data-hero-time="day"] body:not(.is-off-hero) .deck-day-backdrop-global {
  opacity: 1 !important;
  filter: brightness(1) !important;
}

html:not([data-hero-time="night"]) body.is-slide-hero .deck-night-backdrop-global,
html:not([data-hero-time="night"]) body:not(.is-off-hero) .deck-night-backdrop-global,
body.hero-day-active.is-slide-hero .deck-night-backdrop-global,
body.hero-day-active:not(.is-off-hero) .deck-night-backdrop-global,
html[data-hero-time="day"] body.is-slide-hero .deck-night-backdrop-global,
html[data-hero-time="day"] body:not(.is-off-hero) .deck-night-backdrop-global,
html:not([data-hero-time="night"]) body.is-slide-hero .hero-night-overlay-global,
html:not([data-hero-time="night"]) body:not(.is-off-hero) .hero-night-overlay-global,
body.hero-day-active.is-slide-hero .hero-night-overlay-global,
body.hero-day-active:not(.is-off-hero) .hero-night-overlay-global,
html[data-hero-time="day"] body.is-slide-hero .hero-night-overlay-global,
html[data-hero-time="day"] body:not(.is-off-hero) .hero-night-overlay-global {
  opacity: 0 !important;
}

/* 2. During day, sections below Hero should use "night" background (all except Get in Touch / Contact) */
html:not([data-hero-time="night"]) body.is-off-hero:not([data-active-slide="contact"]):not(.is-slide-contact) .deck-day-backdrop-global,
body.hero-day-active.is-off-hero:not([data-active-slide="contact"]):not(.is-slide-contact) .deck-day-backdrop-global,
html[data-hero-time="day"] body.is-off-hero:not([data-active-slide="contact"]):not(.is-slide-contact) .deck-day-backdrop-global {
  opacity: 0 !important;
}

html:not([data-hero-time="night"]) body.is-off-hero:not([data-active-slide="contact"]):not(.is-slide-contact) .deck-night-backdrop-global,
body.hero-day-active.is-off-hero:not([data-active-slide="contact"]):not(.is-slide-contact) .deck-night-backdrop-global,
html[data-hero-time="day"] body.is-off-hero:not([data-active-slide="contact"]):not(.is-slide-contact) .deck-night-backdrop-global {
  opacity: 1 !important;
  filter: brightness(1) !important; /* Full 100% brightness during day; only dimmed after 7pm */
}

html:not([data-hero-time="night"]) body.is-off-hero:not([data-active-slide="contact"]):not(.is-slide-contact) .hero-night-overlay-global,
body.hero-day-active.is-off-hero:not([data-active-slide="contact"]):not(.is-slide-contact) .hero-night-overlay-global,
html[data-hero-time="day"] body.is-off-hero:not([data-active-slide="contact"]):not(.is-slide-contact) .hero-night-overlay-global {
  opacity: 1 !important;
}

/* 3. Daytime on Contact / Get in Touch ("all except Get in Touch"): Dedicated Contact backdrop darkened by 20% (80% brightness) */
.deck-backdrop-layer[data-backdrop-id="contact"] .slide-backdrop,
.deck-backdrop-layer[data-backdrop-id="contact"] {
  filter: brightness(0.8) !important;
}

html:not([data-hero-time="night"]) body[data-active-slide="contact"] .deck-backdrop-layer[data-backdrop-id="contact"].active,
html:not([data-hero-time="night"]) body.is-slide-contact .deck-backdrop-layer[data-backdrop-id="contact"].active,
body.hero-day-active[data-active-slide="contact"] .deck-backdrop-layer[data-backdrop-id="contact"].active,
body.hero-day-active.is-slide-contact .deck-backdrop-layer[data-backdrop-id="contact"].active,
html[data-hero-time="day"] body[data-active-slide="contact"] .deck-backdrop-layer[data-backdrop-id="contact"].active,
html[data-hero-time="day"] body.is-slide-contact .deck-backdrop-layer[data-backdrop-id="contact"].active {
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 5 !important;
  filter: brightness(0.8) !important;
}

html:not([data-hero-time="night"]) body[data-active-slide="contact"] .deck-backdrop-layer[data-backdrop-id="contact"] .slide-backdrop,
html:not([data-hero-time="night"]) body.is-slide-contact .deck-backdrop-layer[data-backdrop-id="contact"] .slide-backdrop,
body.hero-day-active[data-active-slide="contact"] .deck-backdrop-layer[data-backdrop-id="contact"] .slide-backdrop,
body.hero-day-active.is-slide-contact .deck-backdrop-layer[data-backdrop-id="contact"] .slide-backdrop,
html[data-hero-time="day"] body[data-active-slide="contact"] .deck-backdrop-layer[data-backdrop-id="contact"] .slide-backdrop,
html[data-hero-time="day"] body.is-slide-contact .deck-backdrop-layer[data-backdrop-id="contact"] .slide-backdrop {
  filter: brightness(0.8) !important;
}

html:not([data-hero-time="night"]) body[data-active-slide="contact"] .deck-day-backdrop-global,
html:not([data-hero-time="night"]) body.is-slide-contact .deck-day-backdrop-global,
body.hero-day-active[data-active-slide="contact"] .deck-day-backdrop-global,
body.hero-day-active.is-slide-contact .deck-day-backdrop-global,
html[data-hero-time="day"] body[data-active-slide="contact"] .deck-day-backdrop-global,
html[data-hero-time="day"] body.is-slide-contact .deck-day-backdrop-global,
html:not([data-hero-time="night"]) body[data-active-slide="contact"] .deck-night-backdrop-global,
html:not([data-hero-time="night"]) body.is-slide-contact .deck-night-backdrop-global,
body.hero-day-active[data-active-slide="contact"] .deck-night-backdrop-global,
body.hero-day-active.is-slide-contact .deck-night-backdrop-global,
html[data-hero-time="day"] body[data-active-slide="contact"] .deck-night-backdrop-global,
html[data-hero-time="day"] body.is-slide-contact .deck-night-backdrop-global,
html:not([data-hero-time="night"]) body[data-active-slide="contact"] .hero-night-overlay-global,
html:not([data-hero-time="night"]) body.is-slide-contact .hero-night-overlay-global,
body.hero-day-active[data-active-slide="contact"] .hero-night-overlay-global,
body.hero-day-active.is-slide-contact .hero-night-overlay-global,
html[data-hero-time="day"] body[data-active-slide="contact"] .hero-night-overlay-global,
html[data-hero-time="day"] body.is-slide-contact .hero-night-overlay-global {
  opacity: 0 !important;
}

/* Content darkener permanently disabled so foreground elements are never dimmed */
.deck-day-content-darkener,
.deck-night-content-darkener {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Daytime: Hide other section-specific layers so the persistent hero background image shows through */
html:not([data-hero-time="night"]) .deck-backdrop-layer:not([data-backdrop-id="hero"]):not([data-backdrop-id="contact"]),
body:not(.hero-night-active) .deck-backdrop-layer:not([data-backdrop-id="hero"]):not([data-backdrop-id="contact"]),
html[data-hero-time="day"] .deck-backdrop-layer:not([data-backdrop-id="hero"]):not([data-backdrop-id="contact"]),
body.hero-day-active .deck-backdrop-layer:not([data-backdrop-id="hero"]):not([data-backdrop-id="contact"]) {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* In night mode (after 7 PM / hero-night-active), hide daytime backdrop and content darkener */
html[data-hero-time="night"] .deck-day-backdrop-global,
body.hero-night-active .deck-day-backdrop-global,
html[data-hero-time="night"] .deck-day-content-darkener,
body.hero-night-active .deck-day-content-darkener {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Hero Night Backdrop (After 7 PM or Omni Test Override - Persistent Static Backdrop Across All Sections) */
.hero-night-backdrop,
.deck-night-backdrop-global {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  filter: brightness(1);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), filter 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-night-overlay-global {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle at 50% 38%,
    rgba(2, 6, 23, 0.20) 0%,
    rgba(2, 6, 23, 0.55) 60%,
    rgba(2, 6, 23, 0.88) 100%
  );
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Content Area Darkening Overlay: disabled so foreground elements are never dimmed */
.deck-night-content-darkener {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Active Night-time Mode (After 7 PM: 19:00 - 07:00 or Omni Night Toggle) */
html[data-hero-time="night"] .hero-night-backdrop,
body.hero-night-active .hero-night-backdrop,
html[data-hero-time="night"] .deck-night-backdrop-global,
body.hero-night-active .deck-night-backdrop-global,
html[data-hero-time="night"] .hero-night-overlay-global,
body.hero-night-active .hero-night-overlay-global {
  opacity: 1 !important;
}

/* Dim ONLY the background image after 7 PM (30% darker); foreground elements are NOT dimmed */
html[data-hero-time="night"] .deck-night-backdrop-global,
body.hero-night-active .deck-night-backdrop-global,
html[data-hero-time="night"] .hero-night-backdrop,
body.hero-night-active .hero-night-backdrop {
  filter: brightness(0.70) !important;
}

/* Contact section at night: background image darkened by 20% (80% brightness) */
html[data-hero-time="night"] body[data-active-slide="contact"] .deck-night-backdrop-global,
body.hero-night-active[data-active-slide="contact"] .deck-night-backdrop-global,
html[data-hero-time="night"] body.is-slide-contact .deck-night-backdrop-global,
body.hero-night-active.is-slide-contact .deck-night-backdrop-global {
  filter: brightness(0.8) !important;
}

html[data-hero-time="night"] .deck-night-content-darkener,
body.hero-night-active .deck-night-content-darkener,
html[data-hero-time="night"] body.is-off-hero .deck-night-content-darkener,
body.hero-night-active.is-off-hero .deck-night-content-darkener {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Explicit guarantee: Foreground elements are NEVER dimmed (neither by brightness filters nor darkener overlays) */
.deck-slider,
.deck-slide,
.deck-container,
.hero-deck-container,
.hero-center-content,
.hero-title,
.hero-lead,
.hero-quotes,
.section-header,
.section-title,
.photos-title-row,
.firehose-items-count,
.photos-timeline-wrapper,
.blog-timeline-wrapper,
.photos-timeline-viewport,
.blog-timeline-viewport,
.category-timeline-viewport,
.photos-timeline-track,
.blog-timeline-track,
.timeline-column,
.timeline-date-capsule,
.timeline-col-header,
.blog-card,
.photo-album-card,
.recent-photo-timeline-card,
.recent-video-timeline-card,
.photos-bottom-topics-dock,
.blog-bottom-topics-dock,
.recent-photos-bottom-topics-dock,
.recent-videos-bottom-topics-dock,
.timeline-scroll-to-latest-btn,
.timeline-scroll-next-btn,
.sb-admin-tags-dock,
.deck-section-indicators,
.deck-copyright {
  filter: none !important;
  -webkit-filter: none !important;
}

/* Hide all daytime video wrappers, posters, and section-specific backdrop layers in night mode so the static night canopy shows across all sections */
html[data-hero-time="night"] .hero-video-wrapper,
body.hero-night-active .hero-video-wrapper,
html[data-hero-time="night"] .deck-video-wrapper,
body.hero-night-active .deck-video-wrapper,
html[data-hero-time="night"] .hero-fallback-poster,
body.hero-night-active .hero-fallback-poster,
html[data-hero-time="night"] .deck-backdrop-layer,
body.hero-night-active .deck-backdrop-layer {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 1.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

html[data-hero-time="night"] .hero-gradient-overlay,
body.hero-night-active .hero-gradient-overlay {
  background: radial-gradient(
    circle at 50% 38%,
    rgba(2, 6, 23, 0.20) 0%,
    rgba(2, 6, 23, 0.55) 60%,
    rgba(2, 6, 23, 0.88) 100%
  ) !important;
  z-index: 3 !important;
}

html[data-hero-time="night"] .hero-title,
body.hero-night-active .hero-title {
  text-shadow: 0 0 35px rgba(56, 189, 248, 0.45), 0 0 75px rgba(99, 102, 241, 0.30) !important;
}

/* --------------------------------------------------------------------------
   2. Centered 3D Volumetric Tag Cloud Stage (Together with Main Content & Quotes)
   -------------------------------------------------------------------------- */
.hero-deck-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100% !important;
  height: auto;
  max-height: 100%;
  padding: 0 clamp(0.75rem, 2vw, 2.5rem);
  box-sizing: border-box;
  position: relative;
  z-index: 5;
  pointer-events: none;
}

.hero-cloud-stage {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: min(1560px, 98vw);
  height: clamp(450px, 82vh, 840px);
  margin: 0 auto;
  overflow: visible;
  pointer-events: none;
}

/* Layered Canvases for True 3D Occlusion (Z-depth Sorting) */
.tagcloud-canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  user-select: none;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
}

.tagcloud-canvas-back {
  z-index: 1;
  pointer-events: none;
}

.tagcloud-canvas-front {
  z-index: 3;
  cursor: grab;
  touch-action: pan-y;
  pointer-events: auto;
}

.tagcloud-canvas-front:active {
  cursor: grabbing;
}

/* Centered Site Main Content (Between Back Canvas & Front Canvas) */
.hero-center-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: min(1360px, 96vw);
  padding: 0 1.25rem;
  pointer-events: none; /* Allows click-through/drag through background */
}



/* Hero Title: 2x Larger, Cinematic Headline */
.hero-center-content .hero-title {
  font-size: clamp(5.5rem, 13vw, 10.5rem);
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 0.92;
  margin-bottom: 1.5rem;
  background: linear-gradient(135deg, #ffffff 35%, var(--color-accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 8px 36px rgba(0, 0, 0, 0.85));
  text-align: center;
  pointer-events: auto;
  transition: font-size 0.4s cubic-bezier(0.16, 1, 0.3, 1), letter-spacing 0.4s ease, line-height 0.4s ease;
}

/* Returning Visitor Hero Title Typewriter & Greeting */
.hero-center-content .hero-title.hero-title-greeting {
  font-size: clamp(2.8rem, 6.5vw, 6.2rem);
  letter-spacing: -0.03em;
  line-height: 1.08;
}

.hero-typewriter-text {
  display: inline-block;
  will-change: opacity, transform;
}

.hero-typewriter-cursor {
  display: inline-block;
  width: 4px;
  height: 0.82em;
  margin-left: 8px;
  background-color: var(--color-accent, #10b981);
  border-radius: 2px;
  vertical-align: -0.05em;
  box-shadow: 0 0 16px var(--color-accent, #10b981), 0 0 6px rgba(16, 185, 129, 0.8);
  animation: heroCursorBlink 0.75s ease-in-out infinite;
  -webkit-text-fill-color: initial !important;
}

[data-theme="light"] .hero-typewriter-cursor {
  background-color: #047857;
  box-shadow: 0 0 10px rgba(4, 120, 87, 0.5);
}

@keyframes heroCursorBlink {
  0%, 45% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
  }
}

/* Centered Displayed Quote (Twice as large, clean floating text) */
.hero-quote-card {
  position: relative;
  max-width: 1050px;
  margin: 0 auto;
  padding: 0;
  background: transparent !important;
  border: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  text-align: center;
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.hero-quote {
  font-size: clamp(1.75rem, 2.8vw, 2.5rem);
  color: #f8fafc;
  font-weight: 400;
  line-height: 1.38;
  margin: 0;
  font-style: italic;
  text-align: center;
  border-left: none;
  padding-left: 0;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.95), 0 1px 4px rgba(0, 0, 0, 0.98);
  transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-quote-author {
  display: block;
  font-size: clamp(1.15rem, 1.6vw, 1.5rem);
  font-style: normal;
  margin-top: 0.85rem;
  color: var(--color-accent);
  font-family: var(--font-mono);
  letter-spacing: 0.03em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9);
  transition: color 0.2s ease, opacity 0.2s ease;
}

.hero-quote-card:hover .hero-quote-author {
  color: #34d399;
}

/* "Coming from beneath" Depth Entrance Animation */
.hero-slide .hero-center-content {
  opacity: 0;
  transform: translateY(90px) scale(0.92);
  filter: blur(14px);
  transition: 
    opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.1s cubic-bezier(0.16, 1, 0.3, 1),
    filter 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform, filter;
}

.hero-slide.active .hero-center-content {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  filter: blur(0) !important;
  transition-delay: 0.12s;
}

.hero-slide .hero-title {
  transform: translateY(35px);
  transition: transform 1.15s cubic-bezier(0.16, 1, 0.3, 1) 0.16s;
}
.hero-slide.active .hero-title {
  transform: translateY(0);
}

.hero-slide .hero-quote-card {
  transform: translateY(50px);
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.25s;
}
.hero-slide.active .hero-quote-card {
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   3. 3-Column Bento Grid ("A Few Of My Favorite Things")
   -------------------------------------------------------------------------- */
.bento-grid {
  --bento-cols: 5;
  --bento-gap: clamp(0.45rem, 0.9vh, 0.7rem);
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: var(--bento-gap) !important;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  max-height: calc(100vh - 160px);
  overflow: hidden !important;
  padding: 0.25rem;
  box-sizing: border-box;
}

@media (max-width: 1280px) {
  .bento-grid {
    --bento-cols: 4;
    --bento-gap: clamp(0.4rem, 0.8vh, 0.6rem);
    max-width: 1050px;
  }
}

@media (max-width: 900px) {
  .bento-grid {
    --bento-cols: 3;
    --bento-gap: 0.45rem;
    max-width: 760px;
  }
}

@media (max-width: 600px) {
  .bento-grid {
    --bento-cols: 2;
    --bento-gap: 0.35rem;
    max-width: 100%;
  }
}

.bento-card {
  flex: 0 0 calc((100% - (var(--bento-cols, 5) - 1) * var(--bento-gap, clamp(0.45rem, 0.9vh, 0.7rem))) / var(--bento-cols, 5)) !important;
  width: calc((100% - (var(--bento-cols, 5) - 1) * var(--bento-gap, clamp(0.45rem, 0.9vh, 0.7rem))) / var(--bento-cols, 5)) !important;
  max-width: calc((100% - (var(--bento-cols, 5) - 1) * var(--bento-gap, clamp(0.45rem, 0.9vh, 0.7rem))) / var(--bento-cols, 5)) !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(0.45rem, 0.85vh, 0.75rem);
  text-decoration: none;
  color: #ffffff;
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(125, 211, 252, 0.35) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 12px rgba(125, 211, 252, 0.1);
  transition: all var(--transition-fast);
  cursor: pointer;
  min-height: 0;
  box-sizing: border-box;
}

.bento-card:hover {
  border-color: rgba(125, 211, 252, 0.85) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 20px rgba(125, 211, 252, 0.35) !important;
  transform: translateY(-2px);
}

.bento-top-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: clamp(0.25rem, 0.5vh, 0.4rem);
}

.bento-icon-box {
  width: clamp(26px, 3vh, 32px);
  height: clamp(26px, 3vh, 32px);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--color-border-glass);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(0.8rem, 1.1vh, 0.95rem);
  color: var(--color-primary-light);
  transition: transform var(--transition-fast);
  flex-shrink: 0;
}

.bento-card:hover .bento-icon-box {
  transform: scale(1.1) rotate(4deg);
}

.bento-card.theme-emerald .bento-icon-box {
  background: rgba(5, 150, 105, 0.2);
  color: var(--color-primary-light);
  border-color: rgba(52, 211, 153, 0.3);
}

.bento-card.theme-cyan .bento-icon-box {
  background: rgba(56, 189, 248, 0.2);
  color: var(--color-accent);
  border-color: rgba(56, 189, 248, 0.3);
}

.bento-card.theme-purple .bento-icon-box {
  background: rgba(129, 140, 248, 0.2);
  color: var(--color-accent-purple);
  border-color: rgba(129, 140, 248, 0.3);
}

.bento-card.theme-amber .bento-icon-box {
  background: rgba(251, 191, 36, 0.2);
  color: var(--color-accent-amber);
  border-color: rgba(251, 191, 36, 0.3);
}

.bento-bottom-row {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 10px;
  text-align: center;
}

.bento-tag {
  display: block;
  text-align: center;
  margin: 10px auto 0 auto;
  font-family: var(--font-mono);
  font-size: clamp(0.68rem, 0.9vh, 0.78rem);
  font-weight: 500;
  color: #94a3b8;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  white-space: nowrap;
  letter-spacing: 0.02em;
  line-height: 1.2;
  transition: color var(--transition-fast);
}

.bento-bottom-row .bento-tag {
  margin-top: 0;
}

.bento-card:hover .bento-tag {
  background: transparent !important;
  border: none !important;
  color: #f1f5f9;
}

.bento-tag-coming-soon {
  font-style: italic;
  opacity: 0.85;
}

.bento-card:hover .bento-tag-coming-soon {
  opacity: 1;
}

.bento-card-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-top: clamp(0.15rem, 0.3vh, 0.25rem);
}

.bento-title {
  font-size: clamp(0.82rem, 1.15vw, 0.96rem);
  font-weight: 700;
  margin-bottom: 0.12rem;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.bento-desc {
  font-size: clamp(0.65rem, 0.9vh, 0.74rem);
  color: var(--text-muted);
  line-height: 1.25;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bento-arrow {
  display: none !important;
}

/* --------------------------------------------------------------------------
   3b. In-Deck Category Articles View & Transitions (Slide 2: Features)
   -------------------------------------------------------------------------- */
.features-categories-view {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
  overflow: hidden !important;
  max-height: 100%;
}

#features.deck-slide,
#features .deck-container {
  overflow: hidden !important;
  justify-content: center;
}

#features .section-header,
.features-categories-view .section-header {
  margin-bottom: clamp(0.35rem, 0.8vh, 0.65rem);
  width: 100%;
}

.features-categories-view.is-hidden {
  opacity: 0;
  transform: translateY(-16px) scale(0.98);
  pointer-events: none;
  display: none !important;
}

.features-articles-view {
  display: none;
  flex-direction: column;
  width: 100%;
  max-width: 1060px;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(20px) scale(0.98);
  transition: opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1), transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.features-articles-view.is-active {
  display: flex !important;
  opacity: 1;
  transform: translateY(0) scale(1);
}

.features-articles-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.85rem;
  margin-bottom: clamp(0.35rem, 0.8vh, 0.65rem);
  padding: 0 0.5rem;
  width: 100%;
  max-width: 1060px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 2;
}

.category-timeline-wrapper {
  width: 100%;
  max-width: 1060px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  position: relative;
}

.category-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: var(--radius-full);
  background: rgba(13, 17, 28, 0.65);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--color-border-glass);
  color: var(--color-primary-light);
  font-size: 0.95rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--transition-fast);
}

.category-back-btn:hover {
  background: rgba(16, 185, 129, 0.18);
  border-color: rgba(52, 211, 153, 0.5);
  color: #ffffff;
  transform: translateX(-3px);
  box-shadow: 0 4px 15px rgba(5, 150, 105, 0.25);
}

.category-back-btn i {
  transition: transform var(--transition-fast);
}

.category-back-btn:hover i {
  transform: translateX(-2px);
}

.category-active-heading {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.category-active-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--color-border-glass);
  font-size: 1.05rem;
  color: var(--color-primary-light);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.category-active-badge.theme-emerald {
  color: var(--color-primary-light);
  border-color: rgba(52, 211, 153, 0.4);
  background: rgba(6, 78, 59, 0.35);
}

.category-active-badge.theme-cyan {
  color: var(--color-accent-cyan);
  border-color: rgba(56, 189, 248, 0.4);
  background: rgba(8, 47, 73, 0.35);
}

.category-active-badge.theme-amber {
  color: var(--color-accent-amber);
  border-color: rgba(251, 191, 36, 0.4);
  background: rgba(45, 24, 4, 0.35);
}

.category-active-badge.theme-purple {
  color: var(--color-accent-purple);
  border-color: rgba(192, 132, 252, 0.4);
  background: rgba(59, 7, 100, 0.35);
}

.category-active-title {
  font-size: clamp(1.4rem, 2.5vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0;
  color: #ffffff;
  background: linear-gradient(135deg, #ffffff 40%, var(--color-accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.5));
}

/* Category Articles Grid */
.category-articles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.4rem, 0.85vh, 0.65rem);
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  max-height: calc(100vh - var(--admin-bar-height, 0px) - clamp(95px, 13vh, 125px));
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  align-items: stretch;
  padding: 0.2rem 0.35rem 1.75rem 0.35rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(52, 211, 153, 0.4) transparent;
}

.category-articles-grid .blog-thumb-wrap {
  height: clamp(58px, 7.8vh, 78px);
}

.category-articles-grid .blog-card-content {
  padding: clamp(0.35rem, 0.65vh, 0.55rem) clamp(0.5rem, 0.75vw, 0.7rem);
}

.category-articles-grid .blog-card-meta {
  font-size: 0.66rem;
  margin-bottom: 0.15rem;
}

.category-articles-grid .blog-card-title {
  font-size: clamp(0.78rem, 0.88vw, 0.88rem);
  line-height: 1.2;
  margin-bottom: 0.15rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.category-articles-grid .blog-card-excerpt {
  font-size: 0.72rem;
  line-height: 1.25;
  margin-bottom: 0.2rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.category-articles-grid .blog-card-footer {
  font-size: 0.7rem;
  padding-top: 0.1rem;
}

.category-articles-grid::-webkit-scrollbar {
  width: 6px;
}

.category-articles-grid::-webkit-scrollbar-track {
  background: transparent;
}

.category-articles-grid::-webkit-scrollbar-thumb {
  background: rgba(52, 211, 153, 0.35);
  border-radius: 9999px;
}

/* Skeleton Loading Shimmer */
.category-skeleton-card {
  display: flex;
  flex-direction: column;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid var(--color-border-glass);
  border-radius: var(--radius-md);
  padding: 0.85rem;
  min-height: 220px;
  position: relative;
  overflow: hidden;
}

.category-skeleton-thumb {
  width: 100%;
  height: 120px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.05);
  margin-bottom: 0.75rem;
}

.category-skeleton-line {
  height: 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  margin-bottom: 0.5rem;
}

.category-skeleton-line.title {
  height: 18px;
  width: 80%;
}

.category-skeleton-line.short {
  width: 50%;
}

.category-skeleton-card::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
  animation: categoryShimmer 1.5s infinite;
}

@keyframes categoryShimmer {
  100% {
    transform: translateX(100%);
  }
}

.features-reader-view {
  max-width: min(880px, 94vw);
  width: 100%;
  margin: 0 auto;
  overscroll-behavior: contain;
}

/* --------------------------------------------------------------------------
   4. Recent Posts Section with Interactive Category Filter Tabs
   -------------------------------------------------------------------------- */
.blog-filter-tabs {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.blog-tab-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--color-border-glass);
  color: #94a3b8;
  padding: 0.4rem 1rem;
  border-radius: var(--radius-full);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.blog-tab-btn:hover,
.blog-tab-btn.active {
  background: rgba(5, 150, 105, 0.25);
  border-color: rgba(52, 211, 153, 0.4);
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   Article Timeline Header & Multi-Page Sliding Track
   -------------------------------------------------------------------------- */
.blog-section-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: clamp(0.35rem, 0.8vh, 0.65rem);
}

.blog-timeline-bar,
.blog-section-header .blog-timeline-hr {
  display: none !important;
}

/* Dropped small timeline arrows */
.timeline-chevron,
#blog-timeline-prev,
#blog-timeline-next {
  display: none !important;
}

.timeline-date-capsule {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0 0.25rem;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  box-shadow: none;
  color: #f1f5f9;
  font-family: var(--font-mono);
  font-size: clamp(0.72rem, 0.85vw, 0.82rem);
  letter-spacing: 0.02em;
  min-width: auto;
  height: 28px;
  box-sizing: border-box;
  justify-content: center;
  transition: opacity var(--transition-fast);
}

.timeline-date-capsule.is-empty-date {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.timeline-cal-icon,
.timeline-paw-icon {
  color: #34d399;
  font-size: 0.8rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

.timeline-date-text {
  transition: opacity 0.2s ease, transform 0.2s ease;
  display: inline-block;
  white-space: nowrap;
}

.timeline-date-text.is-updating {
  opacity: 0;
  transform: translateY(-2px);
}

/* "Today" Timeline Date Capsule: Nice Baby Blue */
.timeline-column[data-col-date="Today"] .timeline-date-text,
.timeline-column.is-today-col .timeline-date-text,
.timeline-date-capsule.is-today .timeline-date-text,
.timeline-date-capsule[data-is-today="true"] .timeline-date-text,
.timeline-date-capsule[aria-label="Today"] .timeline-date-text {
  color: #7dd3fc !important;
  font-weight: 700 !important;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.45);
}

.timeline-column[data-col-date="Today"] .timeline-paw-icon,
.timeline-column.is-today-col .timeline-paw-icon,
.timeline-date-capsule.is-today .timeline-paw-icon,
.timeline-date-capsule[data-is-today="true"] .timeline-paw-icon,
.timeline-date-capsule[aria-label="Today"] .timeline-paw-icon {
  color: #38bdf8 !important;
  filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.65)) !important;
}

.timeline-column[data-col-date="Today"] .timeline-col-line,
.timeline-column.is-today-col .timeline-col-line {
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.65) 0%, rgba(56, 189, 248, 0.2) 60%, transparent 100%) !important;
}

/* Light Theme Support */
[data-theme="light"] .timeline-column[data-col-date="Today"] .timeline-date-text,
[data-theme="light"] .timeline-column.is-today-col .timeline-date-text,
[data-theme="light"] .timeline-date-capsule.is-today .timeline-date-text,
[data-theme="light"] .timeline-date-capsule[data-is-today="true"] .timeline-date-text,
[data-theme="light"] .timeline-date-capsule[aria-label="Today"] .timeline-date-text {
  color: #0284c7 !important;
  text-shadow: none !important;
}

[data-theme="light"] .timeline-column[data-col-date="Today"] .timeline-paw-icon,
[data-theme="light"] .timeline-column.is-today-col .timeline-paw-icon,
[data-theme="light"] .timeline-date-capsule.is-today .timeline-paw-icon,
[data-theme="light"] .timeline-date-capsule[data-is-today="true"] .timeline-paw-icon,
[data-theme="light"] .timeline-date-capsule[aria-label="Today"] .timeline-paw-icon {
  color: #0ea5e9 !important;
  filter: drop-shadow(0 0 4px rgba(14, 165, 233, 0.4)) !important;
}

/* Viewport-anchored Floating Sticky Date Capsule */
#blog-timeline-sticky-capsule,
#category-timeline-sticky-capsule,
.timeline-date-capsule.is-sticky-floating {
  position: absolute;
  top: 0.25rem;
  left: 0;
  z-index: 50;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  box-shadow: none;
  pointer-events: auto;
  will-change: transform;
  display: none;
  transform: translateX(0);
}

/* Timeline Sliding Wrapper & Pages */
.blog-timeline-wrapper {
  position: relative;
  width: 100%;
  max-width: 1060px;
  margin: 0 auto;
  display: flex;
  align-items: center;
}

/* Green Paw Cursor in Recent Articles Content Area - FA6 48px paw glyph with animated glow */
#blog,
#blog .slide-content,
#blog-timeline-wrapper,
.blog-timeline-viewport,
.blog-timeline-track,
.blog-timeline-page,
.blog-grid,
.timeline-column,
.timeline-col-cards,
.blog-card,
.blog-card *,
.category-timeline-wrapper,
.category-timeline-viewport,
.category-timeline-track,
#firehose,
#firehose .slide-content,
#photos,
#photos .slide-content,
#photos-timeline-wrapper,
.photos-timeline-viewport,
.photos-timeline-track,
.photos-timeline-page,
.photos-timeline-grid,
.photo-album-card,
.photo-album-card * {
  cursor: url('../images/paw-cursor.svg') 24 24, auto !important;
}

#blog-timeline-wrapper .blog-card a,
#blog-timeline-wrapper .blog-card-title a,
#blog-timeline-wrapper .blog-thumb-wrap,
#blog-timeline-wrapper .timeline-date-capsule,
.category-timeline-wrapper .blog-card a,
.category-timeline-wrapper .blog-card-title a,
.category-timeline-wrapper .blog-thumb-wrap,
.category-timeline-wrapper .timeline-date-capsule,
#photos-timeline-wrapper .photo-album-card,
#photos-timeline-wrapper .photo-album-card *,
#photos-timeline-wrapper .timeline-date-capsule,
#recent-photos-timeline-wrapper .photo-album-card,
#recent-photos-timeline-wrapper .photo-album-card *,
#recent-photos-timeline-wrapper .timeline-date-capsule,
#recent-videos-timeline-wrapper .photo-album-card,
#recent-videos-timeline-wrapper .photo-album-card *,
#recent-videos-timeline-wrapper .timeline-date-capsule,
.timeline-scroll-to-latest-btn,
.timeline-scroll-to-latest-btn *,
.timeline-scroll-next-btn,
.timeline-scroll-next-btn * {
  cursor: url('../images/paw-cursor-pointer.svg') 24 24, pointer !important;
}

/* Animated Paw Cursor Follower Glow (Centered on cursor, 60% more subtle) */
.paw-cursor-glow {
  position: fixed;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 999999;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(52, 211, 153, 0.18) 0%, rgba(16, 185, 129, 0.08) 35%, rgba(5, 150, 105, 0.03) 60%, transparent 75%);
  filter: blur(10px);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 0.3s ease;
  animation: pawGlowPulse 2.4s ease-in-out infinite alternate;
  will-change: transform, opacity, left, top;
}

.paw-cursor-glow.active {
  opacity: 0.38;
}

@keyframes pawGlowPulse {
  0% {
    transform: translate(-50%, -50%) scale(0.85);
    filter: blur(8px) drop-shadow(0 0 4px rgba(52, 211, 153, 0.2));
    opacity: 0.26;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.15);
    filter: blur(12px) drop-shadow(0 0 9px rgba(52, 211, 153, 0.34));
    opacity: 0.38;
  }
  100% {
    transform: translate(-50%, -50%) scale(0.95);
    filter: blur(9px) drop-shadow(0 0 6px rgba(52, 211, 153, 0.24));
    opacity: 0.30;
  }
}

.blog-timeline-viewport,
.photos-timeline-viewport,
.category-timeline-viewport {
  position: relative;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: var(--radius-md);
  touch-action: pan-y;
  user-select: none;
  -webkit-mask-image: linear-gradient(
    to right,
    #000 0%,
    #000 calc(100% - clamp(16px, 2vw, 28px)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    #000 0%,
    #000 calc(100% - clamp(16px, 2vw, 28px)),
    transparent 100%
  );
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.blog-timeline-track {
  display: flex;
  width: 100%;
  will-change: transform;
  align-items: stretch;
}

.blog-timeline-page {
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  box-sizing: border-box;
  opacity: 1;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
}

.blog-timeline-page .blog-grid {
  flex: 1;
  height: 100%;
}

.blog-timeline-page.active {
  opacity: 1;
  pointer-events: auto;
}

/* Side chevrons handled by full-height edge navigation */
.blog-side-chevron {
  display: none !important;
}

/* ==========================================================================
   Timeline Return-to-Latest Subtle Glowing Chevron (Outside Scroller on Left)
   ========================================================================== */
.timeline-scroll-to-latest-btn {
  position: absolute;
  top: 40px;
  bottom: 8px;
  left: 6px;
  width: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 0;
  z-index: 30;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-6px);
  transition: opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.32s ease,
              transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

.timeline-scroll-to-latest-btn.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
}

.timeline-latest-chevron-pill {
  width: 32px;
  height: 64px;
  border-radius: 9999px;
  background: rgba(8, 22, 16, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(52, 211, 153, 0.45);
  border-left: 2px solid #34d399;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55), 0 0 16px rgba(16, 185, 129, 0.3);
  animation: timelineChevronGlowPulse 2.6s ease-in-out infinite alternate;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.25s ease,
              border-color 0.25s ease,
              background 0.25s ease;
}

.timeline-latest-chevron-pill i {
  color: #a7f3d0;
  font-size: 1rem;
  filter: drop-shadow(0 0 6px rgba(52, 211, 153, 0.85));
  transition: transform 0.25s ease, color 0.25s ease;
}

.timeline-scroll-to-latest-btn:hover .timeline-latest-chevron-pill {
  transform: scale(1.08) translateX(-2px);
  border-color: #34d399;
  background: rgba(8, 26, 18, 0.95);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.65), 0 0 24px rgba(52, 211, 153, 0.65);
}

.timeline-scroll-to-latest-btn:hover .timeline-latest-chevron-pill i {
  color: #ffffff;
  transform: translateX(-2px);
  filter: drop-shadow(0 0 10px rgba(52, 211, 153, 1));
}

.timeline-scroll-to-latest-btn:active .timeline-latest-chevron-pill {
  transform: scale(0.95) translateX(-4px);
}

@keyframes timelineChevronGlowPulse {
  0% {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 12px rgba(16, 185, 129, 0.28);
    border-color: rgba(52, 211, 153, 0.4);
  }
  100% {
    box-shadow: 0 4px 22px rgba(0, 0, 0, 0.6), 0 0 22px rgba(52, 211, 153, 0.55);
    border-color: rgba(110, 231, 183, 0.7);
  }
}

/* Light Theme Overrides for Scroll-to-Latest Button */
[data-theme="light"] .timeline-scroll-to-latest-btn {
  background: transparent;
}

[data-theme="light"] .timeline-latest-chevron-pill {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(5, 150, 105, 0.4);
  border-left: 2px solid #059669;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12), 0 0 14px rgba(5, 150, 105, 0.22);
}

[data-theme="light"] .timeline-latest-chevron-pill i {
  color: #047857;
  filter: drop-shadow(0 0 4px rgba(5, 150, 105, 0.4));
}

[data-theme="light"] .timeline-scroll-to-latest-btn:hover .timeline-latest-chevron-pill {
  border-color: #059669;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.16), 0 0 20px rgba(5, 150, 105, 0.35);
}

[data-theme="light"] .timeline-scroll-to-latest-btn:hover .timeline-latest-chevron-pill i {
  color: #065f46;
}

@media (max-width: 1040px) {
  .timeline-scroll-to-latest-btn {
    left: 4px;
  }
}

@media (max-width: 768px) {
  .timeline-scroll-to-latest-btn {
    top: 36px;
    bottom: 6px;
    left: 4px;
    width: 28px;
  }
  .timeline-latest-chevron-pill {
    width: 26px;
    height: 48px;
  }
}

/* ==========================================================================
   Timeline Scroll-Next Subtle Glowing Chevron (Outside Scroller on Right)
   ========================================================================== */
.timeline-scroll-next-btn {
  position: absolute;
  top: 40px;
  bottom: 8px;
  right: 6px;
  width: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 0;
  z-index: 30;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(6px);
  transition: opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.32s ease,
              transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

.timeline-scroll-next-btn.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
}

.timeline-next-chevron-pill {
  width: 32px;
  height: 64px;
  border-radius: 9999px;
  background: rgba(8, 22, 16, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(52, 211, 153, 0.45);
  border-right: 2px solid #34d399;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55), 0 0 16px rgba(16, 185, 129, 0.3);
  animation: timelineChevronGlowPulse 2.6s ease-in-out infinite alternate;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.25s ease,
              border-color 0.25s ease,
              background 0.25s ease;
}

.timeline-next-chevron-pill i {
  color: #a7f3d0;
  font-size: 1rem;
  filter: drop-shadow(0 0 6px rgba(52, 211, 153, 0.85));
  transition: transform 0.25s ease, color 0.25s ease;
}

.timeline-scroll-next-btn:hover .timeline-next-chevron-pill {
  transform: scale(1.08) translateX(2px);
  border-color: #34d399;
  background: rgba(8, 26, 18, 0.95);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.65), 0 0 24px rgba(52, 211, 153, 0.65);
}

.timeline-scroll-next-btn:hover .timeline-next-chevron-pill i {
  color: #ffffff;
  transform: translateX(2px);
  filter: drop-shadow(0 0 10px rgba(52, 211, 153, 1));
}

.timeline-scroll-next-btn:active .timeline-next-chevron-pill {
  transform: scale(0.95) translateX(4px);
}

/* Light Theme Overrides for Scroll-to-Next Button */
[data-theme="light"] .timeline-scroll-next-btn {
  background: transparent;
}

[data-theme="light"] .timeline-next-chevron-pill {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(5, 150, 105, 0.4);
  border-right: 2px solid #059669;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12), 0 0 14px rgba(5, 150, 105, 0.22);
}

[data-theme="light"] .timeline-next-chevron-pill i {
  color: #047857;
  filter: drop-shadow(0 0 4px rgba(5, 150, 105, 0.4));
}

[data-theme="light"] .timeline-scroll-next-btn:hover .timeline-next-chevron-pill {
  border-color: #059669;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.16), 0 0 20px rgba(5, 150, 105, 0.35);
}

[data-theme="light"] .timeline-scroll-next-btn:hover .timeline-next-chevron-pill i {
  color: #065f46;
}

@media (max-width: 1040px) {
  .timeline-scroll-next-btn {
    right: 4px;
  }
}

@media (max-width: 768px) {
  .timeline-scroll-next-btn {
    top: 36px;
    bottom: 6px;
    right: 4px;
    width: 28px;
  }
  .timeline-next-chevron-pill {
    width: 26px;
    height: 48px;
  }
}

/* Timeline Columns: Individual Scrolling Dates aligned with Content */
.timeline-column {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
  height: 100%;
}

.timeline-col-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  margin-bottom: clamp(0.35rem, 0.7vh, 0.55rem);
  position: relative;
  width: 100%;
  flex-shrink: 0;
  z-index: 5;
}

.timeline-col-line {
  display: none !important;
}

/* Slick Glowing Green Horizontal Rule across Top of Scroller & Bento Grid */
.slick-green-scroller-hr {
  position: absolute;
  top: 38px;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  height: 1.5px;
  background: linear-gradient(90deg, rgba(52, 211, 153, 0.1) 0%, rgba(52, 211, 153, 0.7) 15%, #34d399 50%, rgba(52, 211, 153, 0.7) 85%, rgba(52, 211, 153, 0.1) 100%);
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.5), 0 0 3px rgba(52, 211, 153, 0.8);
  pointer-events: none;
  z-index: 3;
  border: none;
}

[data-theme="light"] .slick-green-scroller-hr {
  background: linear-gradient(90deg, rgba(5, 150, 105, 0.1) 0%, rgba(5, 150, 105, 0.7) 15%, #059669 50%, rgba(5, 150, 105, 0.7) 85%, rgba(5, 150, 105, 0.1) 100%);
  box-shadow: 0 0 10px rgba(5, 150, 105, 0.4), 0 0 2px rgba(5, 150, 105, 0.7);
}

.slick-green-scroller-hr.bento-slick-green-hr {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  max-width: 960px;
  width: 100%;
  margin: clamp(0.5rem, 1vh, 0.85rem) auto clamp(0.75rem, 1.4vh, 1.25rem);
}

.timeline-col-cards {
  display: flex;
  flex-direction: column;
  gap: clamp(0.55rem, 1.1vh, 0.85rem);
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
}

.timeline-col-cards .blog-card,
.timeline-col-cards .timeline-empty-card-slot {
  flex: 1 1 0%;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Empty secondary row slot when there are no more posts for the current date: invisible placeholder preserving space */
.timeline-empty-card-slot {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  border: none !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  box-sizing: border-box;
}

[data-theme="light"] .timeline-empty-card-slot {
  border: none !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.55rem, 1.1vh, 0.85rem);
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  max-height: none;
  overflow: hidden;
  align-items: stretch;
  padding: 0.25rem 0.35rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(52, 211, 153, 0.4) transparent;
}

.blog-grid::-webkit-scrollbar {
  width: 6px;
}

.blog-grid::-webkit-scrollbar-track {
  background: transparent;
}

.blog-grid::-webkit-scrollbar-thumb {
  background: rgba(52, 211, 153, 0.35);
  border-radius: 9999px;
}

.blog-grid::-webkit-scrollbar-thumb:hover {
  background: rgba(52, 211, 153, 0.6);
}

.blog-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: #ffffff;
  text-decoration: none;
  min-height: 0;
  background: var(--color-surface-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--color-border-glass);
  user-select: none;
  -webkit-user-select: none;
  transition: transform var(--transition-smooth), border-color var(--transition-smooth), box-shadow var(--transition-smooth);
}

.blog-card:hover {
  transform: translateY(-3px);
  border-color: rgba(52, 211, 153, 0.4);
  box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.6), 0 0 20px rgba(52, 211, 153, 0.15);
}

.blog-thumb-wrap {
  position: relative;
  width: 100%;
  height: clamp(75px, 9.5vh, 105px);
  overflow: hidden;
  background: #0b111e;
  flex-shrink: 0;
  display: block;
}

.blog-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.blog-card:hover .blog-thumb {
  transform: scale(1.08);
}

.blog-thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: rgba(255, 255, 255, 0.5);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.blog-card:hover .blog-thumb-placeholder {
  transform: scale(1.08);
}

.blog-read-time {
  display: none !important;
}

/* Card & Reader Badges (Access Rights stacked top-left, Topics tags top-right) */
.blog-card-badges,
.album-card-badges {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 10;
}

/* Access tags stacked top-left */
.item-access-badges,
.item-badges-left {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  z-index: 10;
  pointer-events: auto;
  max-width: calc(50% - 10px);
}

/* Topics tags top-right (stacked) */
.item-topic-badges,
.item-badges-right {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  z-index: 10;
  pointer-events: auto;
  max-width: calc(50% - 10px);
}

/* Offset topic badges in admin mode so they never collide with the (x) remove button */
body.is-admin .item-topic-badges,
body.sb-admin-browsing .item-topic-badges,
body.logged-in:not(.sb-testing-visitor) .item-topic-badges {
  right: 42px;
}

/* Direct child fallback for cards without wrapper containers */
.blog-card-badges > .article-badge-visibility,
.album-card-badges > .album-badge-visibility,
.album-card-badges > .article-badge-visibility {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 10;
  pointer-events: auto;
}

.blog-card-badges > .article-badge-favorite,
.blog-card-badges > .article-badge-tag,
.album-card-badges > .album-badge-category {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;
  pointer-events: auto;
}

body.is-admin .blog-card-badges > .article-badge-favorite,
body.sb-admin-browsing .blog-card-badges > .article-badge-favorite,
body.logged-in:not(.sb-testing-visitor) .blog-card-badges > .article-badge-favorite,
body.is-admin .blog-card-badges > .article-badge-tag,
body.sb-admin-browsing .blog-card-badges > .article-badge-tag,
body.logged-in:not(.sb-testing-visitor) .blog-card-badges > .article-badge-tag,
body.is-admin .album-card-badges > .album-badge-category,
body.sb-admin-browsing .album-card-badges > .album-badge-category,
body.logged-in:not(.sb-testing-visitor) .album-card-badges > .album-badge-category {
  right: 42px;
}

.article-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2.5px 7.5px;
  font-size: 0.65rem;
  font-weight: 700;
  font-family: var(--font-body, 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  letter-spacing: 0.01em;
  border-radius: 9999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  line-height: 1.25;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  white-space: nowrap;
}

.article-badge i {
  font-size: 0.65rem;
}

/* 1. Visibility / Access Rights Badges */

/* PRIVATE: PURPLE */
.article-badge-private {
  background: rgba(126, 34, 206, 0.88);
  color: #faf5ff;
  border: 1px solid rgba(192, 132, 252, 0.65);
  box-shadow: 0 2px 8px rgba(147, 51, 234, 0.35);
}
.article-badge-private i {
  color: #e9d5ff;
}

/* FAMILY: RED */
.article-badge-family {
  background: rgba(185, 28, 28, 0.88);
  color: #fff1f2;
  border: 1px solid rgba(248, 113, 113, 0.65);
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.35);
}
.article-badge-family i {
  color: #fca5a5;
}

/* FRIENDS: ORANGE */
.article-badge-friends {
  background: rgba(194, 65, 12, 0.88);
  color: #fff7ed;
  border: 1px solid rgba(251, 146, 60, 0.65);
  box-shadow: 0 2px 8px rgba(234, 88, 12, 0.35);
}
.article-badge-friends i {
  color: #fed7aa;
}

/* PUBLIC: GREEN */
.article-badge-public {
  background: rgba(5, 150, 105, 0.88);
  color: #ecfdf5;
  border: 1px solid rgba(52, 211, 153, 0.65);
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35);
}
.article-badge-public i {
  color: #6ee7b7;
}

/* 2. TOPICS & OTHER TAGS: LIGHT GREEN */
.article-badge-favorite,
.article-badge-tag {
  background: rgba(22, 163, 74, 0.88);
  color: #f0fdf4;
  border: 1px solid rgba(134, 239, 172, 0.65);
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.35);
}
.article-badge-favorite i,
.article-badge-tag i {
  color: #bbf7d0;
}

/* Reader View & Single Post Meta Badges */
.blog-reader-badges {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  vertical-align: middle;
}

.blog-reader-badges .blog-card-badges,
.single-post-meta .blog-card-badges {
  position: static;
  display: inline-flex;
  gap: 6px;
}

.blog-reader-badges .item-access-badges,
.blog-reader-badges .item-topic-badges,
.single-post-meta .item-access-badges,
.single-post-meta .item-topic-badges {
  position: static;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  max-width: none;
}

.blog-reader-badges .article-badge,
.single-post-meta .article-badge {
  font-size: 0.72rem;
  padding: 3px 9px;
}

.blog-card-content {
  padding: clamp(0.45rem, 0.8vh, 0.65rem) clamp(0.65rem, 1vw, 0.85rem);
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.blog-card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.2rem;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.blog-card-meta time {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: #94a3b8;
}

.blog-card-meta .badge-category,
.single-post-meta .badge-category {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.5rem;
  font-size: 0.68rem;
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.05);
  color: #94a3b8;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all var(--transition-fast);
}

.blog-card-meta .badge-category a,
.single-post-meta .badge-category a {
  color: inherit;
  text-decoration: none;
}

.blog-card:hover .blog-card-meta .badge-category,
.single-post-meta .badge-category:hover {
  color: #cbd5e1;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
}

.blog-card-title {
  font-size: clamp(0.85rem, 0.95vw, 0.98rem);
  font-weight: 700;
  line-height: 1.22;
  margin-bottom: 0.25rem;
  color: #ffffff;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex-shrink: 0;
}

.blog-card-title a {
  color: inherit;
  text-decoration: none;
}

.blog-card-title a:hover {
  color: var(--color-primary-light);
}

.blog-card-excerpt {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.32;
  margin: 0;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  word-break: break-word;
  max-height: calc(1.32 * 2em) !important;
  flex-grow: 1;
}

.blog-card-excerpt p {
  margin: 0 !important;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  word-break: break-word;
  max-height: calc(1.32 * 2em) !important;
}

.blog-card-footer,
.blog-card-explore-btn {
  display: none !important;
}

.blog-card-explore-btn,
.blog-card-footer a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  color: #34d399;
  background: rgba(52, 211, 153, 0.1);
  border: 1px solid rgba(52, 211, 153, 0.35);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.blog-card-explore-btn i,
.blog-card-footer a i {
  font-size: 1rem;
  color: #34d399;
  transition: transform var(--transition-fast), color var(--transition-fast), filter var(--transition-fast);
}

.blog-card:hover .blog-card-explore-btn,
.blog-card:hover .blog-card-footer a,
.blog-card-explore-btn:hover,
.blog-card-footer a:hover {
  background: rgba(52, 211, 153, 0.28);
  border-color: rgba(52, 211, 153, 0.75);
  box-shadow: 0 0 18px rgba(52, 211, 153, 0.5), 0 4px 12px rgba(0, 0, 0, 0.4);
  transform: translateY(-2px) scale(1.1);
}

.blog-card:hover .blog-card-explore-btn i,
.blog-card:hover .blog-card-footer a i,
.blog-card-explore-btn:hover i {
  color: #ffffff;
  filter: drop-shadow(0 0 8px rgba(52, 211, 153, 0.9));
  transform: scale(1.15) rotate(-10deg);
}

/* ==========================================================================
   In-Deck Article Reader View (Smoothly Replaces Grid Without Full Page Load)
   ========================================================================== */
.blog-grid-view {
  width: 100%;
  transition: opacity 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: opacity, transform;
}

.blog-grid-view.is-hidden {
  opacity: 0;
  transform: translateY(-16px) scale(0.98);
  pointer-events: none;
  display: none !important;
}

.blog-reader-view {
  display: none;
  flex-direction: column;
  max-width: min(1280px, 95vw);
  width: 100%;
  margin: 0 auto 1.5rem auto;
  opacity: 0;
  transform: translateY(20px) scale(0.98);
  transition: opacity 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: opacity, transform;
  overscroll-behavior: contain;
}

.blog-reader-view.is-active {
  display: flex !important;
  opacity: 1;
  transform: translateY(0) scale(1);
}

.blog-reader-header-bar {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.65rem;
  padding: 0.15rem 0.35rem;
  width: 100%;
}

.blog-reader-back-btn {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  gap: 0.55rem;
  padding: 4px 14px 4px 6px;
  background: rgba(15, 23, 42, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 9999px;
  color: #f1f5f9;
  font-family: var(--font-body);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.25, 1, 0.5, 1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.blog-reader-back-btn:hover {
  background: rgba(30, 41, 59, 0.92);
  border-color: rgba(52, 211, 153, 0.65);
  color: #ffffff;
  transform: translateX(-3px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), 0 0 16px rgba(52, 211, 153, 0.25);
}

.back-paw-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(52, 211, 153, 0.18);
  color: #34d399;
  border: 1px solid rgba(52, 211, 153, 0.4);
  font-size: 0.8rem;
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  flex-shrink: 0;
}

.blog-reader-back-btn:hover .back-paw-badge,
.back-btn:hover .back-paw-badge {
  background: rgba(52, 211, 153, 0.35);
  color: #ffffff;
  border-color: rgba(52, 211, 153, 0.9);
  transform: rotate(-18deg) scale(1.12);
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.45);
}

.back-btn-text {
  letter-spacing: 0.01em;
}

.reading-progress-halo {
  width: 26px;
  height: 26px;
  transform: rotate(-90deg);
  flex-shrink: 0;
}

.halo-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.16);
  stroke-width: 2.8;
}

.halo-fill {
  fill: none;
  stroke: #38bdf8;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-dasharray: 106.8;
  stroke-dashoffset: 106.8;
  transition: stroke-dashoffset 0.12s linear;
}

.blog-reader-header-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.blog-reader-progress-wrap {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

[data-theme="light"] .halo-track {
  stroke: rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .halo-fill {
  stroke: #0284c7;
}

[data-theme="light"] .reading-progress-percent {
  color: #0284c7;
  background: rgba(2, 132, 199, 0.08);
  border-color: rgba(2, 132, 199, 0.25);
}

.reading-progress-percent {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.3);
  padding: 2px 8px;
  border-radius: 9999px;
  letter-spacing: 0.02em;
}

.blog-reader-reading-time {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.blog-reader-stage {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(0.85rem, 1.5vw, 1.35rem);
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  position: relative;
}

.blog-reader-article-wrap {
  flex: 1 1 840px;
  max-width: 1000px;
  min-width: 0;
  max-height: min(68vh, calc(100dvh - var(--nav-height) - 130px));
  overflow-y: auto;
  overflow-x: hidden;
  background: rgba(11, 17, 30, 0.88);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--color-border-glass);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 30px rgba(52, 211, 153, 0.1);
  color: var(--text-main);
  padding: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(52, 211, 153, 0.4) transparent;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  touch-action: pan-y;
}

.blog-reader-article-wrap.is-dragging,
body.is-article-dragging,
body.is-article-dragging * {
  cursor: grabbing !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

.blog-reader-article-wrap.is-dragging * {
  pointer-events: none !important;
}

.blog-reader-article-wrap a,
.blog-reader-article-wrap button,
.blog-reader-article-wrap input,
.blog-reader-article-wrap textarea,
.blog-reader-article-wrap [role="button"] {
  cursor: pointer;
}

.blog-reader-article-wrap input,
.blog-reader-article-wrap textarea {
  cursor: text;
}

.blog-reader-article-wrap img {
  -webkit-user-drag: none;
  user-drag: none;
}

.blog-reader-article-wrap::-webkit-scrollbar {
  width: 6px;
}

.blog-reader-article-wrap::-webkit-scrollbar-button,
::-webkit-scrollbar-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.blog-reader-article-wrap::-webkit-scrollbar-corner,
::-webkit-scrollbar-corner {
  display: none !important;
  background: transparent !important;
  width: 0 !important;
  height: 0 !important;
}

.blog-reader-article-wrap::-webkit-scrollbar-track {
  background: transparent;
}

.blog-reader-article-wrap::-webkit-scrollbar-thumb {
  background: rgba(52, 211, 153, 0.35);
  border-radius: 9999px;
}

.blog-reader-article-wrap::-webkit-scrollbar-thumb:hover {
  background: rgba(52, 211, 153, 0.6);
}

.blog-reader-card,
.features-reader-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: visible !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 clamp(1.25rem, 2.5vw, 2.25rem) clamp(1.25rem, 2.5vw, 2.25rem);
  color: var(--text-main);
  transform: none !important;
  transition: none !important;
}

.blog-reader-card:hover,
.features-reader-card:hover,
.single-post-article:hover,
.blog-reader-article-wrap .spotlight-card:hover,
.features-reader-view .spotlight-card:hover {
  transform: none !important;
}

/* 2-Column Editorial Reader Layout: Left Media | Right Content */
.blog-reader-layout {
  display: grid;
  grid-template-columns: clamp(140px, 16vw, 175px) 1fr;
  gap: clamp(1.25rem, 1.8vw, 2rem);
  align-items: start;
}

.blog-reader-media-col {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  align-self: start;
  width: 100%;
  padding-top: clamp(1.25rem, 2.5vw, 2.25rem);
  z-index: 10;
}

.blog-reader-img-wrap {
  width: 100%;
  border-radius: var(--radius-md, 12px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.65), 0 0 25px rgba(52, 211, 153, 0.12);
  background: #090e18;
  aspect-ratio: 16 / 10;
  max-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 0;
}

.blog-reader-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.blog-reader-img-placeholder {
  width: 100%;
  height: 100%;
  min-height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  color: rgba(255, 255, 255, 0.45);
  background: linear-gradient(135deg, #0b1528 0%, #064e3b 100%);
}

.blog-reader-content-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.blog-reader-article-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 20;
  background: #0b111e;
  padding: clamp(1.25rem, 2.5vw, 2.25rem) 0.85rem 0.85rem 0.85rem;
  margin: 0 -0.85rem 1.25rem -0.85rem;
  border-radius: 0 0 12px 12px;
  border-bottom: 1px solid rgba(52, 211, 153, 0.25);
  box-shadow: 0 10px 28px -4px rgba(0, 0, 0, 0.6);
}

.blog-reader-meta {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.25rem;
  flex-wrap: wrap;
  width: 100%;
}

.blog-reader-date {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--color-primary-light);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 0;
}

.blog-reader-meta-dot {
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.74rem;
}

.blog-reader-title {
  font-size: clamp(1.15rem, 1.55vw, 1.4rem);
  font-weight: 800;
  line-height: 1.25;
  color: #ffffff;
  letter-spacing: -0.02em;
  margin-bottom: 0;
}

@media (max-width: 1140px) {
  .blog-reader-stage {
    flex-direction: column;
    align-items: stretch;
    gap: 1.5rem;
  }
  .blog-reader-article-wrap {
    max-width: 100%;
    flex: 1 1 auto;
    width: 100%;
  }
  .blog-reader-card {
    max-width: 100%;
  }
  .blog-reader-notes-col {
    position: static;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .blog-reader-layout {
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }
  /* Compact media row: small thumbnail left, Source / Print / Edit buttons stacked right */
  .blog-reader-media-col {
    position: static;
    max-width: 100%;
    margin: 0;
    display: grid;
    grid-template-columns: clamp(72px, 22vw, 88px) minmax(0, 1fr);
    column-gap: 0.45rem;
    row-gap: 0.25rem;
    align-items: center;
    align-content: center;
    padding-top: 0.25rem;
  }
  .blog-reader-img-wrap {
    grid-column: 1;
    grid-row: 1 / span 3;
    width: 100%;
    aspect-ratio: 16 / 10;
    max-height: 58px;
    border-radius: 7px;
  }
  .blog-reader-img-placeholder {
    min-height: 0;
    font-size: 1.15rem;
  }
  .blog-reader-media-col > *:not(.blog-reader-img-wrap) {
    grid-column: 2;
    margin-top: 0 !important;
    min-width: 0;
  }
  .blog-reader-source-btn,
  .blog-reader-print-btn,
  .blog-reader-edit-btn {
    padding: 0.22rem 0.45rem !important;
    gap: 0.35rem !important;
    border-radius: 6px !important;
    border-width: 1px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
  }
  .blog-reader-media-col .source-icon-wrap,
  .blog-reader-media-col .print-icon-wrap,
  .blog-reader-media-col .edit-icon-wrap {
    width: 18px !important;
    height: 18px !important;
    border-radius: 4px !important;
    font-size: 0.62rem !important;
  }
  .blog-reader-media-col .source-favicon {
    width: 11px !important;
    height: 11px !important;
  }
  .blog-reader-media-col .source-btn-title,
  .blog-reader-media-col .print-btn-title,
  .blog-reader-media-col .edit-btn-title {
    font-size: 0.65rem !important;
    line-height: 1.15 !important;
    font-weight: 600 !important;
  }
  .blog-reader-media-col .source-btn-domain {
    font-size: 0.58rem !important;
    line-height: 1 !important;
    margin-top: 0 !important;
  }
  .blog-reader-media-col .source-btn-arrow,
  .blog-reader-media-col .print-btn-arrow,
  .blog-reader-media-col .edit-btn-arrow {
    font-size: 0.58rem !important;
  }
  .blog-reader-article-header {
    padding-top: 0.4rem;
    margin-bottom: 0.55rem;
  }
  .blog-reader-notes-col {
    width: 100%;
    margin-top: 1rem;
  }
}

/* ==========================================================================
   Friendly "Go To Source" Button (Left Side Media Column)
   ========================================================================== */
.blog-reader-source-wrap {
  margin-top: 0.65rem;
  width: 100%;
}

.blog-reader-source-btn {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.5rem 0.65rem;
  border-radius: 10px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(5, 150, 105, 0.16) 45%,
    rgba(10, 20, 32, 0.6) 100%
  );
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1.5px solid rgba(52, 211, 153, 0.35);
  border-top: 1.5px solid rgba(167, 243, 208, 0.65);
  color: #ffffff;
  text-decoration: none;
  box-shadow: 
    0 8px 24px -4px rgba(0, 0, 0, 0.45),
    0 0 16px rgba(16, 185, 129, 0.12),
    inset 0 1px 1px rgba(255, 255, 255, 0.25);
  transition: all var(--transition-fast, 0.2s cubic-bezier(0.16, 1, 0.3, 1));
  box-sizing: border-box;
}

.blog-reader-source-btn:hover {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.14) 0%,
    rgba(16, 185, 129, 0.28) 45%,
    rgba(5, 150, 105, 0.42) 100%
  );
  border-color: rgba(52, 211, 153, 0.75);
  border-top-color: rgba(167, 243, 208, 0.9);
  transform: translateY(-2px);
  box-shadow: 
    0 12px 28px -4px rgba(0, 0, 0, 0.55),
    0 0 24px rgba(52, 211, 153, 0.35),
    inset 0 1px 1px rgba(255, 255, 255, 0.35);
  color: #ffffff;
}

.blog-reader-source-btn:active {
  transform: translateY(0);
}

.source-icon-wrap {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.source-favicon {
  width: 15px;
  height: 15px;
  object-fit: contain;
  border-radius: 3px;
}

.source-icon-fallback {
  font-size: 0.85rem;
  color: var(--color-primary-light, #34d399);
}

.source-btn-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  text-align: left;
}

.source-btn-title {
  font-size: 0.76rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.source-btn-domain {
  font-size: 0.68rem;
  font-family: var(--font-mono, monospace);
  color: var(--color-primary-light, #34d399);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.02em;
  margin-top: 1px;
}

.source-btn-arrow {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.55);
  transition: transform var(--transition-fast, 0.2s ease), color var(--transition-fast, 0.2s ease);
  flex-shrink: 0;
}

.blog-reader-source-btn:hover .source-btn-arrow {
  transform: translate(2px, -2px);
  color: var(--color-primary-light, #34d399);
}

/* ==========================================================================
   Print Article Button (Below Source Link in Reader Media Column)
   ========================================================================== */
.blog-reader-print-wrap {
  margin-top: 0.5rem;
  width: 100%;
}

.blog-reader-print-btn {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.5rem 0.65rem;
  border-radius: 10px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(52, 211, 153, 0.12) 45%,
    rgba(10, 20, 32, 0.6) 100%
  );
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1.5px solid rgba(52, 211, 153, 0.35);
  border-top: 1.5px solid rgba(167, 243, 208, 0.65);
  color: #ffffff;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 
    0 8px 24px -4px rgba(0, 0, 0, 0.45),
    0 0 16px rgba(16, 185, 129, 0.12),
    inset 0 1px 1px rgba(255, 255, 255, 0.25);
  transition: all var(--transition-fast, 0.2s cubic-bezier(0.16, 1, 0.3, 1));
  box-sizing: border-box;
  text-align: left;
}

.blog-reader-print-btn:hover {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.14) 0%,
    rgba(16, 185, 129, 0.28) 45%,
    rgba(5, 150, 105, 0.42) 100%
  );
  border-color: rgba(52, 211, 153, 0.75);
  border-top-color: rgba(167, 243, 208, 0.9);
  transform: translateY(-2px);
  box-shadow: 
    0 12px 28px -4px rgba(0, 0, 0, 0.55),
    0 0 24px rgba(52, 211, 153, 0.35),
    inset 0 1px 1px rgba(255, 255, 255, 0.35);
  color: #ffffff;
}

.blog-reader-print-btn:active {
  transform: translateY(0);
}

.print-icon-wrap {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  color: var(--color-primary-light, #34d399);
  font-size: 0.85rem;
  transition: transform var(--transition-fast, 0.2s ease), background var(--transition-fast, 0.2s ease), color var(--transition-fast, 0.2s ease);
}

.blog-reader-print-btn:hover .print-icon-wrap {
  transform: scale(1.08);
  color: #ffffff;
  background: var(--color-primary, #059669);
  border-color: var(--color-primary-light, #34d399);
}

.print-btn-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  text-align: left;
}

.print-btn-title {
  font-size: 0.76rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.print-btn-arrow {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.55);
  transition: transform var(--transition-fast, 0.2s ease), color var(--transition-fast, 0.2s ease);
  flex-shrink: 0;
}

.blog-reader-print-btn:hover .print-btn-arrow {
  transform: translateX(2px);
  color: var(--color-primary-light, #34d399);
}

/* ==========================================================================
   Admin Edit Article Button (Below Print Article in Reader Media Column)
   ========================================================================== */
.blog-reader-edit-wrap {
  margin-top: 0.5rem;
  width: 100%;
}

body:not(.is-admin):not(.sb-admin-browsing) .blog-reader-edit-wrap {
  display: none !important;
}

.blog-reader-edit-btn {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.5rem 0.65rem;
  border-radius: 10px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(56, 189, 248, 0.16) 45%,
    rgba(10, 20, 32, 0.6) 100%
  );
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1.5px solid rgba(56, 189, 248, 0.35);
  border-top: 1.5px solid rgba(186, 230, 253, 0.65);
  color: #ffffff !important;
  font-family: inherit;
  text-decoration: none !important;
  cursor: pointer;
  box-shadow: 
    0 8px 24px -4px rgba(0, 0, 0, 0.45),
    0 0 16px rgba(56, 189, 248, 0.12),
    inset 0 1px 1px rgba(255, 255, 255, 0.25);
  transition: all var(--transition-fast, 0.2s cubic-bezier(0.16, 1, 0.3, 1));
  box-sizing: border-box;
  text-align: left;
}

.blog-reader-edit-btn:hover {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.14) 0%,
    rgba(56, 189, 248, 0.32) 45%,
    rgba(2, 132, 199, 0.45) 100%
  );
  border-color: rgba(56, 189, 248, 0.85);
  border-top-color: rgba(186, 230, 253, 0.95);
  transform: translateY(-2px);
  box-shadow: 
    0 12px 28px -4px rgba(0, 0, 0, 0.55),
    0 0 24px rgba(56, 189, 248, 0.35),
    inset 0 1px 1px rgba(255, 255, 255, 0.35);
  color: #ffffff !important;
  text-decoration: none !important;
}

.blog-reader-edit-btn:active {
  transform: translateY(0);
}

.edit-icon-wrap {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  color: #38bdf8;
  font-size: 0.85rem;
  transition: transform var(--transition-fast, 0.2s ease), background var(--transition-fast, 0.2s ease), color var(--transition-fast, 0.2s ease);
}

.blog-reader-edit-btn:hover .edit-icon-wrap {
  transform: scale(1.08);
  color: #ffffff;
  background: #0284c7;
  border-color: #38bdf8;
}

.edit-btn-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.edit-btn-title {
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.2;
  color: #ffffff;
}

.edit-btn-arrow {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  transition: transform var(--transition-fast, 0.2s ease), color var(--transition-fast, 0.2s ease);
  flex-shrink: 0;
}

.blog-reader-edit-btn:hover .edit-btn-arrow {
  transform: translate(2px, -2px);
  color: #38bdf8;
}

/* ==========================================================================
   Print Source Block (Hidden on Screen, Rendered Exclusively in Print Media)
   ========================================================================== */
.article-print-source {
  display: none;
}

/* ==========================================================================
   On-the-Fly Article Translation Indicator (Left Side Media Column)
   ========================================================================== */
.blog-reader-translation-wrap {
  margin-top: 0.65rem;
  width: 100%;
}

.blog-reader-translation-card {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  width: 100%;
  padding: 0.55rem 0.65rem;
  border-radius: 10px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(56, 189, 248, 0.12) 45%,
    rgba(10, 20, 32, 0.65) 100%
  );
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1.5px solid rgba(56, 189, 248, 0.32);
  border-top: 1.5px solid rgba(125, 211, 252, 0.65);
  box-shadow: 
    0 8px 24px -4px rgba(0, 0, 0, 0.45),
    0 0 16px rgba(56, 189, 248, 0.12),
    inset 0 1px 1px rgba(255, 255, 255, 0.25);
  transition: all var(--transition-fast, 0.22s cubic-bezier(0.16, 1, 0.3, 1));
  box-sizing: border-box;
}

.blog-reader-translation-card:hover {
  border-color: rgba(56, 189, 248, 0.55);
  border-top-color: rgba(125, 211, 252, 0.85);
  box-shadow: 
    0 10px 28px -4px rgba(0, 0, 0, 0.55),
    0 0 20px rgba(56, 189, 248, 0.22),
    inset 0 1px 1px rgba(255, 255, 255, 0.35);
}

.blog-reader-translation-card.is-translating {
  border-color: rgba(56, 189, 248, 0.6);
  animation: translationPulse 1.8s infinite ease-in-out;
}

@keyframes translationPulse {
  0%, 100% {
    box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.45), 0 0 12px rgba(56, 189, 248, 0.15);
  }
  50% {
    box-shadow: 0 10px 30px -4px rgba(0, 0, 0, 0.55), 0 0 24px rgba(56, 189, 248, 0.4);
  }
}

.translation-card-main {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.translation-card-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(56, 189, 248, 0.18);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: #38bdf8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  flex-shrink: 0;
  transition: transform 0.2s ease, background 0.2s ease;
}

.blog-reader-translation-card:hover .translation-card-icon {
  transform: scale(1.08);
  background: rgba(56, 189, 248, 0.28);
  color: #7dd3fc;
}

.translation-card-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}

.translation-card-badge {
  font-family: var(--font-heading);
  font-size: 0.74rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.translation-card-origin {
  font-size: 0.64rem;
  font-family: var(--font-mono, monospace);
  color: #94a3b8;
  letter-spacing: 0.01em;
  margin-top: 1px;
}

.translation-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: 100%;
  padding: 4px 8px;
  border-radius: 9999px;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: #38bdf8;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.translation-toggle-btn:hover {
  background: rgba(56, 189, 248, 0.24);
  border-color: rgba(56, 189, 248, 0.6);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(56, 189, 248, 0.25);
}

.translation-toggle-btn:active {
  transform: translateY(0);
}

.translation-toggle-btn i {
  font-size: 0.68rem;
}

/* Light Theme Support for Translation Card */
[data-theme="light"] .blog-reader-translation-card {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(2, 132, 199, 0.28);
  border-top-color: rgba(2, 132, 199, 0.55);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .blog-reader-translation-card:hover {
  border-color: rgba(2, 132, 199, 0.55);
  box-shadow: 0 6px 24px rgba(2, 132, 199, 0.15);
}

[data-theme="light"] .translation-card-badge {
  color: #0f172a;
}

[data-theme="light"] .translation-card-origin {
  color: #64748b;
}

[data-theme="light"] .translation-card-icon {
  background: rgba(2, 132, 199, 0.12);
  border-color: rgba(2, 132, 199, 0.25);
  color: #0284c7;
}

[data-theme="light"] .translation-toggle-btn {
  background: rgba(2, 132, 199, 0.1);
  border-color: rgba(2, 132, 199, 0.28);
  color: #0284c7;
}

[data-theme="light"] .translation-toggle-btn:hover {
  background: rgba(2, 132, 199, 0.2);
  border-color: #0284c7;
  color: #0369a1;
}

.blog-reader-body {
  font-size: 1.06rem;
  line-height: 1.85;
  color: #e2e8f0;
}

.blog-reader-body p {
  margin-bottom: 1.5rem;
}

.blog-reader-body h2,
.blog-reader-body h3 {
  color: #ffffff;
  margin-top: 2.25rem;
  margin-bottom: 0.85rem;
  font-weight: 700;
}

.blog-reader-body a {
  color: var(--color-primary-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.blog-reader-body a:hover {
  color: #ffffff;
}

.blog-reader-body blockquote {
  border-left: 3px solid var(--color-primary);
  padding: 0.75rem 1.25rem;
  margin: 1.5rem 0;
  background: rgba(5, 150, 105, 0.08);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-style: italic;
  color: #f1f5f9;
}

/* ==========================================================================
   Subscriber Article Notes & In-Reader Author Responses
   ========================================================================== */
.blog-reader-notes-col {
  flex: 0 0 clamp(180px, 14vw, 230px);
  width: clamp(180px, 14vw, 230px);
  min-width: 170px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-self: stretch;
  z-index: 10;
  transition: all 0.25s ease;
}

/* Thoughts Trigger Card (Shown Before Panel) */
.notes-trigger-card {
  display: flex;
  width: 100%;
}

.notes-trigger-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  padding: 0.62rem 0.68rem;
  background: rgba(13, 20, 36, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(52, 211, 153, 0.28);
  border-radius: var(--radius-md, 16px);
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: left;
}

.notes-trigger-btn:hover {
  background: rgba(18, 28, 48, 0.9);
  border-color: rgba(52, 211, 153, 0.55);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45), 0 0 16px rgba(52, 211, 153, 0.22);
  color: #6ee7b7;
}

.notes-trigger-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(52, 211, 153, 0.15);
  color: #34d399;
  font-size: 0.8rem;
  flex-shrink: 0;
  border: 1px solid rgba(52, 211, 153, 0.3);
  transition: transform 0.25s ease, background 0.25s ease;
}

.notes-trigger-btn:hover .notes-trigger-icon {
  transform: scale(1.1);
  background: rgba(52, 211, 153, 0.25);
  color: #a7f3d0;
}

.notes-trigger-text {
  flex: 1 1 auto;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.notes-trigger-badge {
  flex-shrink: 0;
}

.notes-panel {
  background: rgba(13, 20, 36, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(52, 211, 153, 0.22);
  border-radius: var(--radius-md, 16px);
  padding: 0.85rem 0.75rem;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  height: auto;
  max-height: min(68vh, calc(100dvh - var(--nav-height) - 130px));
  align-self: flex-start;
  width: 100%;
  box-sizing: border-box;
}

.notes-list-wrap:has(.notes-list:empty) + .notes-compose-area,
.notes-panel:not(:has(.note-item)) .notes-compose-area {
  border-top: none;
  padding-top: 0.5rem;
}

.notes-header {
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.notes-header-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: #ffffff;
}

.notes-icon {
  color: #34d399;
  font-size: 1rem;
}

.notes-close-panel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.75rem;
  cursor: pointer;
  margin-left: auto;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.notes-close-panel-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.45);
  color: #fca5a5;
  transform: rotate(90deg) scale(1.08);
}

.notes-header .notes-count-badge {
  display: none !important;
}

.notes-count-badge {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: #34d399;
  background: rgba(52, 211, 153, 0.15);
  border: 1px solid rgba(52, 211, 153, 0.35);
  padding: 1px 7px;
  border-radius: 9999px;
  margin-left: auto;
}

.notes-subtitle {
  font-size: 0.76rem;
  color: var(--text-muted);
  line-height: 1.35;
}

.notes-list-wrap {
  flex: 0 1 auto;
  max-height: 380px;
  overflow-y: auto;
  padding-right: 4px;
  margin: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(52, 211, 153, 0.35) transparent;
}

.notes-list-wrap::-webkit-scrollbar {
  width: 4px;
}

.notes-list-wrap::-webkit-scrollbar-thumb {
  background: rgba(52, 211, 153, 0.35);
  border-radius: 9999px;
}

.notes-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.notes-list:not(:empty) {
  margin: 0.75rem 0;
  min-height: 40px;
}

.notes-empty-state {
  display: none !important;
}

.note-item {
  background: rgba(20, 31, 49, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm, 10px);
  padding: 0.75rem 0.85rem;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.note-item:hover {
  border-color: rgba(52, 211, 153, 0.35);
  background: rgba(26, 40, 64, 0.85);
}

.note-item.is-author-note {
  background: rgba(6, 46, 30, 0.75);
  border-color: rgba(52, 211, 153, 0.4);
}

.note-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  margin-bottom: 0.35rem;
}

.note-user-meta {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.note-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(52, 211, 153, 0.45);
  flex-shrink: 0;
}

.note-initial {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #064e3b 0%, #047857 100%);
  color: #34d399;
  font-weight: 700;
  font-size: 0.72rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(52, 211, 153, 0.45);
  flex-shrink: 0;
}

.note-name {
  font-size: 0.8rem;
  font-weight: 700;
  color: #f1f5f9;
}

.author-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.65rem;
  font-weight: 700;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.35);
  padding: 1px 6px;
  border-radius: 9999px;
  letter-spacing: 0.02em;
}

.author-badge i {
  font-size: 0.62rem;
}

.note-date {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: -0.01em;
}

.note-content {
  font-size: 0.8rem;
  color: rgba(241, 245, 249, 0.92);
  line-height: 1.45;
  word-break: break-word;
  margin: 0;
}

.note-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.35rem;
}

.note-reply-btn {
  background: transparent;
  border: none;
  color: #34d399;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 2px 7px;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.note-reply-btn:hover {
  background: rgba(52, 211, 153, 0.18);
  color: #6ee7b7;
}

.note-replies {
  margin-top: 0.5rem;
  padding-left: 0.75rem;
  border-left: 2px solid rgba(52, 211, 153, 0.32);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Note Compose Section */
.notes-compose-area {
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  padding-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.notes-reply-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.28);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 0.72rem;
  color: #38bdf8;
}

.reply-context-info {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.reply-context-cancel {
  background: transparent;
  border: none;
  color: #38bdf8;
  cursor: pointer;
  padding: 0 4px;
  font-size: 0.75rem;
  opacity: 0.8;
  transition: opacity 0.15s ease;
}

.reply-context-cancel:hover {
  opacity: 1;
}

.notes-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.notes-name-row {
  display: none !important;
  width: 100%;
}

.notes-input-wrap {
  position: relative;
  width: 100%;
}

.notes-input-icon {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.4);
}

.notes-input-name {
  width: 100%;
  background: rgba(9, 14, 26, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-sm, 8px);
  color: #ffffff;
  font-size: 0.78rem;
  padding: 5px 8px 5px 26px;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.notes-input-name:focus {
  border-color: #34d399;
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.25);
  outline: none;
}

.notes-textarea-wrap {
  width: 100%;
}

.notes-textarea {
  width: 100%;
  background: rgba(9, 14, 26, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-sm, 8px);
  color: #ffffff;
  font-size: 0.78rem;
  line-height: 1.45;
  padding: 6px 8px;
  resize: vertical;
  min-height: 52px;
  max-height: 120px;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.notes-textarea:focus {
  border-color: #34d399;
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.25);
  outline: none;
}

.notes-actions-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

.notes-sub-badge {
  display: none !important;
}

.notes-submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  border: 1px solid rgba(52, 211, 153, 0.45);
  border-radius: 9999px;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 5px 13px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.notes-submit-btn:hover {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(52, 211, 153, 0.35);
}

.notes-submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.notes-feedback {
  font-size: 0.73rem;
  padding: 5px 9px;
  border-radius: 6px;
  line-height: 1.35;
}

.notes-feedback.is-success {
  background: rgba(52, 211, 153, 0.18);
  color: #6ee7b7;
  border: 1px solid rgba(52, 211, 153, 0.35);
}

.notes-feedback.is-error {
  background: rgba(239, 68, 68, 0.18);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.35);
}

/* Non-Subscriber VIP Lock Prompt */
.notes-subscriber-lock {
  background: rgba(11, 17, 30, 0.85);
  border: 1px dashed rgba(52, 211, 153, 0.35);
  border-radius: var(--radius-md, 14px);
  padding: 1.25rem 0.9rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
}

.lock-icon-wrap {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(52, 211, 153, 0.15);
  color: #34d399;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  border: 1px solid rgba(52, 211, 153, 0.3);
  margin-bottom: 0.2rem;
}

.lock-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
}

.lock-desc {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.4;
  margin: 0;
}

.lock-subscribe-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 9999px;
  text-decoration: none;
  border: 1px solid rgba(52, 211, 153, 0.45);
  transition: all 0.2s ease;
  margin-top: 0.35rem;
}

.lock-subscribe-btn:hover {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(52, 211, 153, 0.35);
  color: #ffffff;
}

/* End-of-Article Thoughts CTA (Removed per user request) */
.article-end-thoughts-wrap,
.article-end-thoughts-btn {
  display: none !important;
}

/* Shake Animation for Short / Invalid Comments */
@keyframes notesShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

.notes-shake {
  animation: notesShake 0.42s ease-in-out;
  border-color: rgba(239, 68, 68, 0.75) !important;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.45) !important;
}

/* Light Theme Support for Thoughts / Notes */
[data-theme="light"] .notes-panel {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(5, 150, 105, 0.28);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

[data-theme="light"] .notes-header-title {
  color: #0f172a;
}

[data-theme="light"] .notes-trigger-btn {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(5, 150, 105, 0.28);
  color: #0f172a;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .notes-trigger-btn:hover {
  background: #ffffff;
  border-color: rgba(5, 150, 105, 0.55);
  color: #059669;
}

[data-theme="light"] .note-item {
  background: rgba(248, 250, 252, 0.9);
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .note-name {
  color: #0f172a;
}

[data-theme="light"] .note-content {
  color: #334155;
}

[data-theme="light"] .note-date {
  color: rgba(15, 23, 42, 0.45);
}

[data-theme="light"] .notes-input-name,
[data-theme="light"] .notes-textarea {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 0, 0, 0.15);
  color: #0f172a;
}

[data-theme="light"] .notes-close-panel-btn {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.55);
}

[data-theme="light"] .notes-subscriber-lock {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(5, 150, 105, 0.35);
}

[data-theme="light"] .lock-title {
  color: #0f172a;
}


/* --------------------------------------------------------------------------
   5. About & Newsletter Section
   -------------------------------------------------------------------------- */
.about-card {
  max-width: 740px;
  margin: 0 auto;
  padding: clamp(1.25rem, 2.2vh, 1.85rem) clamp(1.25rem, 2.5vw, 2rem);
  border-radius: 28px;
  color: #ffffff;
  text-align: center;
  max-height: none;
  overflow: hidden;
  /* Translucent liquid glass with enhanced depth, refraction, and specular luster */
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.14) 0%,
    rgba(255, 255, 255, 0.04) 38%,
    rgba(11, 18, 30, 0.42) 100%
  );
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-top: 1.5px solid rgba(255, 255, 255, 0.45);
  border-left: 1.5px solid rgba(255, 255, 255, 0.32);
  box-shadow: 
    0 24px 48px -10px rgba(0, 0, 0, 0.5),
    0 4px 16px rgba(0, 0, 0, 0.25),
    inset 0 1.5px 2px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 3px 0 rgba(0, 0, 0, 0.3);
  position: relative;
}

.about-card::after {
  display: none;
}

.about-card > * {
  position: relative;
  z-index: 1;
}

.about-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: var(--color-accent);
  padding: 0.35rem 0.95rem;
  border-radius: var(--radius-full);
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
}

.about-title {
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  margin-bottom: 0.75rem;
  background: linear-gradient(180deg, #ffffff 40%, #e2e8f0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.about-desc {
  font-size: clamp(0.92rem, 1.2vw, 1.02rem);
  color: #f8fafc;
  margin: 0 auto clamp(0.75rem, 1.4vh, 1.15rem) auto;
  line-height: 1.45;
  font-weight: 500;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 2px 5px rgba(0, 0, 0, 0.85);
}

.newsletter-embed-wrapper {
  max-width: 640px;
  margin: 0 auto 1.75rem auto;
}

.newsletter-form-wrapper {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  width: 100%;
}

.newsletter-input {
  flex: 1 1 180px;
  min-width: 170px;
  padding: 0.85rem 1.15rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(11, 17, 28, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #34d399;
  caret-color: #34d399;
  text-shadow: 0 0 10px rgba(52, 211, 153, 0.35);
  font-weight: 500;
  font-size: 0.95rem;
  font-family: var(--font-body);
  outline: none;
  transition: all var(--transition-fast);
}

.newsletter-input::placeholder {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.92rem;
  font-weight: 400;
  text-shadow: none;
  opacity: 1;
}

.newsletter-input::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.72);
  font-weight: 400;
  text-shadow: none;
  opacity: 1;
}

.newsletter-input::-moz-placeholder {
  color: rgba(255, 255, 255, 0.72);
  font-weight: 400;
  text-shadow: none;
  opacity: 1;
}

.newsletter-input:-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.72);
  font-weight: 400;
  text-shadow: none;
}

.newsletter-input:hover {
  background: rgba(11, 17, 28, 0.65);
  border-color: rgba(255, 255, 255, 0.38);
}

.newsletter-input:focus {
  border-color: rgba(52, 211, 153, 0.75);
  background: rgba(11, 17, 28, 0.75);
  box-shadow: 
    0 0 0 3px rgba(16, 185, 129, 0.25),
    0 0 16px rgba(52, 211, 153, 0.25),
    0 1px 0 0 rgba(255, 255, 255, 0.2) inset;
}

@keyframes inputShake {
  0%, 100% {
    transform: translateX(0);
  }
  20%, 60% {
    transform: translateX(-6px);
  }
  40%, 80% {
    transform: translateX(6px);
  }
}

@keyframes glassFeedbackPop {
  0% {
    opacity: 0;
    transform: translateY(-8px) scale(0.97);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.newsletter-input.has-error {
  border-color: #f87171 !important;
  background: rgba(45, 14, 20, 0.65) !important;
  box-shadow: 
    0 0 0 3px rgba(239, 68, 68, 0.28),
    0 0 18px rgba(248, 113, 113, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  animation: inputShake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

.newsletter-input.is-valid {
  border-color: rgba(52, 211, 153, 0.6) !important;
  box-shadow: 
    0 0 0 3px rgba(16, 185, 129, 0.2),
    0 0 14px rgba(52, 211, 153, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

.newsletter-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Liquid Glass Primary Button Override for Newsletter */
.newsletter-form-wrapper .btn-primary {
  padding: 0.9rem 1.65rem;
  border-radius: 14px;
  background: linear-gradient(
    135deg,
    #10b981 0%,
    #059669 60%,
    #047857 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-top: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 
    0 10px 25px -4px rgba(5, 150, 105, 0.45),
    0 1px 0 0 rgba(255, 255, 255, 0.35) inset;
  backdrop-filter: blur(12px);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: -0.01em;
  transition: all var(--transition-fast);
}

.newsletter-form-wrapper .btn-primary:hover {
  transform: translateY(-2px);
  background: linear-gradient(
    135deg,
    #34d399 0%,
    #10b981 60%,
    #059669 100%
  );
  box-shadow: 
    0 14px 30px -4px rgba(5, 150, 105, 0.6),
    0 0 20px rgba(52, 211, 153, 0.45),
    0 1px 0 0 rgba(255, 255, 255, 0.5) inset;
}

.newsletter-form-wrapper .btn-primary:active {
  transform: translateY(0);
}

.newsletter-feedback {
  margin: 1.15rem auto 0 auto;
  padding: 0.85rem 1.4rem;
  border-radius: 14px;
  font-size: 0.92rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  line-height: 1.45;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  animation: glassFeedbackPop 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 12px 32px -4px rgba(0, 0, 0, 0.55);
}

.newsletter-feedback.success {
  background: linear-gradient(135deg, rgba(6, 44, 30, 0.85) 0%, rgba(4, 28, 20, 0.9) 100%);
  border: 1px solid rgba(52, 211, 153, 0.5);
  border-top: 1px solid rgba(167, 243, 208, 0.45);
  color: #a7f3d0;
  box-shadow: 
    0 12px 30px -4px rgba(16, 185, 129, 0.4),
    0 0 24px rgba(52, 211, 153, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

.newsletter-feedback.success i {
  color: #34d399;
  font-size: 1.15rem;
  flex-shrink: 0;
  filter: drop-shadow(0 0 8px rgba(52, 211, 153, 0.7));
}

.newsletter-feedback.error {
  background: linear-gradient(135deg, rgba(50, 14, 22, 0.85) 0%, rgba(32, 8, 14, 0.9) 100%);
  border: 1px solid rgba(248, 113, 113, 0.5);
  border-top: 1px solid rgba(255, 180, 180, 0.45);
  color: #fecaca;
  box-shadow: 
    0 12px 30px -4px rgba(220, 38, 38, 0.4),
    0 0 24px rgba(239, 68, 68, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

.newsletter-feedback.error i {
  color: #f87171;
  font-size: 1.15rem;
  flex-shrink: 0;
  filter: drop-shadow(0 0 8px rgba(248, 113, 113, 0.7));
}

.newsletter-features-row {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  font-size: 0.88rem;
  color: #f1f5f9;
  flex-wrap: wrap;
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 2px 5px rgba(0, 0, 0, 0.85);
}

.newsletter-feat-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.newsletter-feat-item i {
  color: var(--color-primary-light);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.95));
}

.grecaptcha-badge {
  visibility: hidden !important;
}

/* --------------------------------------------------------------------------
   6. Contact Slide & Integrated Footer
   -------------------------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 1.75rem;
  align-items: stretch;
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
}

.contact-info-panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.15rem;
  padding: 0;
  color: #ffffff;
  height: 100%;
}

.contact-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-full);
  background: rgba(5, 150, 105, 0.18);
  border: 1px solid rgba(52, 211, 153, 0.35);
  color: var(--color-primary-light);
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
  align-self: flex-start;
}

.contact-action-card {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 1.25rem 1.45rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-border-glass);
  border-radius: var(--radius-md);
  margin-bottom: 0;
  transition: all var(--transition-fast);
  text-decoration: none;
}

.contact-action-card:last-child {
  margin-bottom: 0;
}

.contact-action-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}

.contact-item-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.contact-icon-pill {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 1.15rem;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.35);
}

.contact-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0 0 0.15rem 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-family: var(--font-mono);
}

.contact-label .call-paw-stamp {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: baseline;
  margin-left: 0.1rem;
}

.contact-label .call-paw-stamp .call-text {
  position: relative;
  z-index: 1;
  opacity: 0.55;
  transition: opacity 0.2s ease;
}

.contact-label .call-paw-stamp .paw-strike {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-12deg);
  font-size: 1.25rem;
  color: #ef4444;
  opacity: 0.5;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 0 4px rgba(239, 68, 68, 0.3));
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
}

.contact-label .call-paw-stamp:hover .paw-strike {
  transform: translate(-50%, -50%) rotate(0deg) scale(1.15);
  color: #f87171;
  opacity: 0.7;
}

.contact-val {
  font-size: 0.98rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
  user-select: text;
  -webkit-user-select: text;
  cursor: text;
}

.contact-form-card {
  padding: 1.5rem 1.65rem;
  color: #f8fafc;
  border-radius: var(--radius-lg);
  max-width: 480px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  justify-self: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  overflow: visible;
}

.contact-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.contact-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.65rem;
  background: rgba(5, 150, 105, 0.2);
  border: 1px solid rgba(52, 211, 153, 0.3);
  color: var(--color-primary-light);
  border-radius: var(--radius-full);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.contact-form-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
}

.contact-topics-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
  flex-wrap: wrap;
}

.topics-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.topic-pills {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.topic-pill {
  position: relative;
  cursor: pointer;
  margin: 0;
}

.topic-pill input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.topic-pill span {
  display: inline-block;
  padding: 0.25rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--color-border-glass);
  color: #cbd5e1;
  transition: all var(--transition-fast);
}

.topic-pill:hover span {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.topic-pill.active span,
.topic-pill input[type="radio"]:checked + span {
  background: rgba(5, 150, 105, 0.3);
  border-color: rgba(52, 211, 153, 0.5);
  color: #ffffff;
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.2);
}

/* 2-Column Row for Name & Email */
.contact-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

@media (max-width: 640px) {
  .contact-form-row {
    grid-template-columns: 1fr;
  }
}

/* Modern Floating Label Inputs */
.floating-field {
  position: relative;
}

.message-field {
  margin-bottom: 0.75rem;
}

.floating-input {
  width: 100%;
  padding: 0.85rem 0.85rem 0.3rem 0.85rem;
  background: rgba(11, 17, 28, 0.55);
  border: 1px solid var(--color-border-glass);
  border-radius: var(--radius-sm);
  color: #34d399;
  caret-color: #34d399;
  text-shadow: 0 0 10px rgba(52, 211, 153, 0.35);
  font-weight: 500;
  font-size: 0.88rem;
  outline: none;
  transition: all var(--transition-fast);
  box-sizing: border-box;
}

.floating-textarea {
  min-height: 64px;
  resize: none;
  line-height: 1.4;
  padding-top: 1.15rem;
}

.floating-label {
  position: absolute;
  top: 0.55rem;
  left: 0.85rem;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.75);
  pointer-events: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  text-shadow: none;
}

.floating-input:focus,
.floating-input:not(:placeholder-shown) {
  background: rgba(255, 255, 255, 0.09);
  border-color: var(--color-primary-light);
}

.floating-input:focus {
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.2), 0 0 14px rgba(52, 211, 153, 0.25);
}

.floating-input:focus ~ .floating-label,
.floating-input:not(:placeholder-shown) ~ .floating-label {
  top: 0.22rem;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--color-primary-light);
  letter-spacing: 0.03em;
}

.floating-input.has-error {
  border-color: #f87171 !important;
  background: rgba(45, 14, 20, 0.65) !important;
  box-shadow: 
    0 0 0 3px rgba(239, 68, 68, 0.28),
    0 0 18px rgba(248, 113, 113, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  animation: inputShake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

.floating-input.has-error ~ .floating-label {
  color: #f87171 !important;
}

.floating-input.is-valid {
  border-color: rgba(52, 211, 153, 0.6) !important;
  box-shadow: 
    0 0 0 3px rgba(16, 185, 129, 0.2),
    0 0 14px rgba(52, 211, 153, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

/* Browser Autofill Theme Normalization (Maintains vibrant green & dark glass) */
.newsletter-input:-webkit-autofill,
.newsletter-input:-webkit-autofill:hover,
.newsletter-input:-webkit-autofill:focus,
.floating-input:-webkit-autofill,
.floating-input:-webkit-autofill:hover,
.floating-input:-webkit-autofill:focus {
  -webkit-text-fill-color: #34d399 !important;
  caret-color: #34d399 !important;
  -webkit-box-shadow: 0 0 0 1000px rgba(11, 17, 28, 0.85) inset !important;
  box-shadow: 0 0 0 1000px rgba(11, 17, 28, 0.85) inset !important;
  border-color: rgba(52, 211, 153, 0.5) !important;
  transition: background-color 5000s ease-in-out 0s;
}

.char-count {
  position: absolute;
  right: 0.75rem;
  bottom: 0.35rem;
  font-size: 0.68rem;
  font-family: var(--font-mono);
  color: #64748b;
  pointer-events: none;
}

.contact-form-actions {
  display: flex;
  justify-content: flex-end;
}

.btn-contact-submit {
  width: 100%;
  padding: 0.65rem 1.25rem;
  font-size: 0.88rem;
  justify-content: center;
}

.contact-feedback {
  margin-top: 0.85rem;
  padding: 0.75rem 1.15rem;
  border-radius: 12px;
  font-size: 0.86rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  line-height: 1.45;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  animation: glassFeedbackPop 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 10px 25px -4px rgba(0, 0, 0, 0.5);
}

.contact-feedback.feedback-success {
  background: linear-gradient(135deg, rgba(6, 44, 30, 0.85) 0%, rgba(4, 28, 20, 0.9) 100%);
  border: 1px solid rgba(52, 211, 153, 0.5);
  border-top: 1px solid rgba(167, 243, 208, 0.45);
  color: #a7f3d0;
  box-shadow: 
    0 10px 25px -4px rgba(16, 185, 129, 0.35),
    0 0 20px rgba(52, 211, 153, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

.contact-feedback.feedback-success i {
  color: #34d399;
  font-size: 1.05rem;
  flex-shrink: 0;
  filter: drop-shadow(0 0 8px rgba(52, 211, 153, 0.7));
}

.contact-feedback.feedback-error {
  display: block;
  background: linear-gradient(135deg, rgba(50, 14, 22, 0.92) 0%, rgba(30, 7, 13, 0.96) 100%);
  border: 1px solid rgba(248, 113, 113, 0.55);
  border-top: 1px solid rgba(255, 180, 180, 0.5);
  color: #fecaca;
  padding: 0.85rem 1.15rem;
  box-shadow: 
    0 12px 28px -4px rgba(220, 38, 38, 0.4),
    0 0 24px rgba(239, 68, 68, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

.contact-feedback.feedback-shake {
  animation: feedbackRoastShake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes feedbackRoastShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px) rotate(-0.5deg); }
  40% { transform: translateX(7px) rotate(0.5deg); }
  60% { transform: translateX(-4px) rotate(-0.25deg); }
  80% { transform: translateX(4px) rotate(0.25deg); }
}

.roast-card-layout {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  text-align: left;
}

.roast-speaker-col {
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.roast-avatar-bubble {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid rgba(248, 113, 113, 0.65);
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45), 0 0 12px rgba(248, 113, 113, 0.3);
  position: relative;
}

.roast-avatar-bubble.roast-avatar--enzo {
  border-color: rgba(251, 191, 36, 0.7);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45), 0 0 14px rgba(251, 191, 36, 0.3);
}

.roast-avatar-bubble.roast-avatar--doodle {
  border-color: rgba(168, 85, 247, 0.7);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45), 0 0 14px rgba(168, 85, 247, 0.3);
}

.roast-avatar-bubble.roast-avatar--mariah {
  border-color: rgba(56, 189, 248, 0.7);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45), 0 0 14px rgba(56, 189, 248, 0.3);
}

.roast-avatar-bubble.roast-avatar--stefan {
  border-color: rgba(52, 211, 153, 0.7);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45), 0 0 14px rgba(52, 211, 153, 0.3);
}

.roast-avatar-bubble.roast-avatar--stella {
  border-color: rgba(236, 72, 153, 0.75);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45), 0 0 14px rgba(236, 72, 153, 0.35);
}

.roast-avatar-bubble.roast-avatar--wolfpack {
  border-color: rgba(239, 68, 68, 0.85);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45), 0 0 18px rgba(239, 68, 68, 0.4);
}

.roast-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.roast-avatar-icon-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.3), rgba(30, 41, 59, 0.7));
}

.roast-avatar-icon-wrap i {
  font-size: 1.25rem;
  color: #fca5a5;
  filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.6));
}

.roast-avatar--stefan .roast-avatar-icon-wrap i {
  color: #6ee7b7;
  filter: drop-shadow(0 0 6px rgba(52, 211, 153, 0.7));
}

.roast-content-col {
  flex: 1;
  min-width: 0;
}

.roast-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
  flex-wrap: wrap;
}

.roast-speaker-meta {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.roast-speaker-name {
  font-weight: 700;
  font-size: 0.92rem;
  color: #fff;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.roast-speaker-role {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.12rem 0.45rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.75);
  font-family: var(--font-mono, monospace);
  font-weight: 600;
}

.roast-strike-badge {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.4), rgba(185, 28, 28, 0.65));
  border: 1px solid rgba(248, 113, 113, 0.5);
  color: #fee2e2;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
  white-space: nowrap;
}

.roast-quote {
  font-size: 0.88rem;
  font-style: italic;
  line-height: 1.45;
  color: #fecaca;
  margin-bottom: 0.35rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95);
}

.roast-hint {
  font-size: 0.78rem;
  font-weight: 500;
  color: rgba(254, 202, 202, 0.88);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.3rem;
  padding-top: 0.35rem;
  border-top: 1px dashed rgba(248, 113, 113, 0.3);
}

.roast-hint i {
  font-size: 0.75rem;
  color: #f87171;
  flex-shrink: 0;
}

/* Footer Bottom Bar inside Section 5 */
.slide-footer-bar {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border-glass);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--text-muted);
  width: 100%;
}

.footer-nav {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.footer-nav a:hover {
  color: var(--color-primary-light);
}

/* --------------------------------------------------------------------------
   7. Command Palette Modal (Cmd+K / Ctrl+K)
   -------------------------------------------------------------------------- */
.command-palette-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(7, 9, 14, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 2000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 14vh;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast);
}

.command-palette-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.command-palette {
  width: 90%;
  max-width: 620px;
  background: rgba(15, 20, 32, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-md);
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.8), 0 0 40px rgba(5, 150, 105, 0.2);
  overflow: hidden;
  transform: translateY(-15px) scale(0.98);
  transition: transform var(--transition-fast);
}

.command-palette-backdrop.open .command-palette {
  transform: translateY(0) scale(1);
}

.command-palette-search-box {
  display: flex;
  align-items: center;
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid var(--color-border-glass);
  gap: 0.85rem;
}

.command-palette-search-box i {
  color: var(--color-primary-light);
  font-size: 1.15rem;
}

.command-palette-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 1.1rem;
  color: #34d399;
  caret-color: #34d399;
  text-shadow: 0 0 10px rgba(52, 211, 153, 0.35);
  font-family: inherit;
}

.command-palette-input::placeholder {
  color: #64748b;
}

.command-palette-results {
  max-height: 380px;
  overflow-y: auto;
  padding: 0.75rem 0.5rem;
}

.command-palette-section-title {
  padding: 0.5rem 1rem 0.25rem 1rem;
  font-size: 0.72rem;
  font-family: var(--font-mono);
  font-weight: 600;
  text-transform: uppercase;
  color: #64748b;
  letter-spacing: 0.06em;
}

.command-palette-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 1rem;
  border-radius: var(--radius-sm);
  color: #cbd5e1;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.command-palette-item-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.command-palette-item.is-selected,
.command-palette-item:hover {
  background: rgba(5, 150, 105, 0.2);
  color: #ffffff;
}

.command-palette-footer {
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--color-border-glass);
  background: rgba(11, 15, 25, 0.6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.76rem;
  color: #64748b;
}

/* --------------------------------------------------------------------------
   8. Mobile Navigation Drawer
   -------------------------------------------------------------------------- */
.mobile-nav-drawer {
  position: fixed;
  top: 0;
  right: -100%;
  width: 84%;
  max-width: 340px;
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  background: rgba(11, 15, 25, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 1000;
  padding: calc(1.75rem + env(safe-area-inset-top, 0px)) calc(1.5rem + env(safe-area-inset-right, 0px)) calc(1.75rem + env(safe-area-inset-bottom, 0px)) 1.5rem;
  transition: right 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.7);
  border-left: 1px solid var(--color-border-glass);
}

.mobile-nav-drawer.open {
  right: 0;
}

/* Mobile Navigation Languages */
.mobile-nav-languages {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.mobile-nav-languages ul,
.mobile-nav-languages .pll-translation-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.6rem !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.mobile-nav-languages li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.mobile-nav-languages a,
.mobile-nav-languages .lang-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  font-size: 0.92rem !important;
  font-weight: 500 !important;
  color: #cbd5e1 !important;
  padding: 0.45rem 0.85rem !important;
  border-radius: var(--radius-xs, 6px) !important;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  text-decoration: none !important;
  transition: all var(--transition-fast);
}

.mobile-nav-languages a:hover,
.mobile-nav-languages .lang-btn:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
}

.mobile-nav-languages .current-lang a,
.mobile-nav-languages .lang-btn.active {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: none !important;
  color: #cbd5e1 !important;
  font-weight: 500 !important;
}

.mobile-nav-languages img {
  display: inline-block !important;
  vertical-align: middle !important;
  width: 18px !important;
  height: 12px !important;
  border-radius: 2px !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  object-fit: cover !important;
}

.mobile-nav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.mobile-nav-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

/* --------------------------------------------------------------------------
   9. Media Queries & Comprehensive Responsive Adaptations
   -------------------------------------------------------------------------- */

/* Large Screens & Ultrawide / 4K Displays (>= 1440px and >= 1800px) */
@media (min-width: 1440px) {
  .nav-island:hover,
  .site-header:hover .nav-island,
  .site-header.is-hovered .nav-island {
    max-width: 560px;
  }
  .nav-menu a {
    font-size: 0.94rem;
    padding: 0.45rem 1.05rem;
  }
  .hero-cloud-stage {
    max-width: min(1560px, 96vw);
    height: clamp(480px, 84vh, 880px);
  }
  .bento-grid {
    --bento-cols: 5;
    --bento-gap: clamp(0.55rem, 1vh, 0.85rem);
    max-height: calc(100vh - 160px);
    overflow: hidden !important;
  }
  .blog-grid {
    gap: clamp(0.75rem, 1.2vh, 1rem);
    max-height: none;
    overflow: hidden;
  }
  .blog-thumb-wrap {
    height: clamp(85px, 11vh, 115px);
  }
  .single-post-wrapper {
    max-width: 940px;
  }
  .archive-wrapper {
    max-width: 1380px;
  }
  .archive-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}

@media (min-width: 1800px) {
  .nav-island:hover,
  .site-header:hover .nav-island,
  .site-header.is-hovered .nav-island {
    max-width: 580px;
  }
  .site-brand {
    font-size: 1.15rem;
  }
  .brand-logo {
    width: 42px;
    height: 42px;
  }
  .hero-center-content .hero-title {
    font-size: clamp(5.5rem, 9.5vw, 8.5rem);
  }
  .hero-center-content .hero-quote {
    font-size: clamp(1.6rem, 2.2vw, 2.4rem);
  }
  .hero-cloud-stage {
    max-width: min(1760px, 96vw);
    height: clamp(520px, 86vh, 960px);
  }
  .section-title {
    font-size: clamp(2.8rem, 4vw, 4.2rem);
    margin-bottom: 0.35rem;
  }
  .bento-grid {
    --bento-cols: 5;
    --bento-gap: clamp(0.65rem, 1.2vh, 1rem);
    max-height: calc(100vh - 170px);
    overflow: hidden !important;
  }
  .blog-grid {
    gap: clamp(0.85rem, 1.5vh, 1.15rem);
    max-height: none;
    overflow: hidden;
  }
  .blog-thumb-wrap {
    height: clamp(95px, 12vh, 125px);
  }
  .about-card {
    max-width: 820px;
    padding: clamp(1.75rem, 3vh, 2.5rem);
    max-height: none;
    overflow: hidden;
  }
  .contact-form-card {
    max-width: 600px;
    padding: 1.75rem 2rem;
  }
  .single-post-wrapper {
    max-width: 1020px;
  }
  .archive-wrapper {
    max-width: 1560px;
  }
}

/* Tablet & Medium Screens (<= 1024px) */
@media (max-width: 1024px) {
  .bento-grid {
    --bento-cols: 4;
    --bento-gap: 0.5rem;
    max-height: calc(100vh - 150px);
    overflow: hidden !important;
  }
  .bento-card.bento-span-2 {
    grid-column: span 1;
  }
  .blog-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    max-height: none;
    overflow: hidden;
  }
  .hero-cloud-stage {
    height: clamp(420px, 80vh, 740px);
    max-width: 100%;
  }
  .contact-grid {
    grid-template-columns: 1fr;
    max-width: 580px;
    width: 100%;
    margin: 0 auto;
    gap: 1.25rem;
    justify-items: center;
  }
  .contact-info-panel {
    width: 100%;
    max-width: 580px;
    margin: 0 auto;
    gap: 0.85rem;
    height: auto;
    display: flex;
    flex-direction: column;
  }
  .contact-action-card {
    width: 100%;
    max-width: 580px;
    margin: 0 auto;
    box-sizing: border-box;
    flex: none;
  }
  .contact-form-card {
    width: 100%;
    max-width: 580px;
    margin: 0 auto;
    justify-self: center;
    box-sizing: border-box;
    height: auto;
  }
  .about-card {
    padding: calc(2rem - 10px) calc(1.5rem - 10px);
  }
}

/* Mobile Screens (<= 768px) */
@media (max-width: 768px) {
  .site-header {
    top: calc(var(--admin-bar-height, 0px) + 0.4rem + env(safe-area-inset-top, 0px));
    padding: 0 calc(0.5rem + env(safe-area-inset-right, 0px)) 0 calc(0.5rem + env(safe-area-inset-left, 0px));
  }
  .nav-island {
    padding: 0.32rem 0.75rem 0.32rem 0.5rem;
    gap: 0.5rem;
    max-width: max-content;
    height: auto;
    width: auto;
    justify-content: space-between;
    transform: none !important;
  }
  .nav-island-top-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: auto !important;
    min-height: 0 !important;
    border-bottom: none !important;
    margin-bottom: 0 !important;
    gap: 0.25rem !important;
  }
  .brand-wing-left,
  .brand-wing-right {
    display: flex !important;
    overflow: visible !important;
  }
  .brand-center-dot {
    width: 30px !important;
    height: 30px !important;
  }
  .nav-inline-languages {
    display: none !important;
  }
  .brand-name-prefix {
    max-width: 140px;
    opacity: 1;
    transform: none;
    filter: none;
    margin-right: 0.35rem;
    font-size: 0.95rem;
    pointer-events: auto;
  }
  .brand-name-suffix {
    max-width: 40px;
    opacity: 1;
    transform: none;
    filter: none;
    margin-left: 0.35rem;
    font-size: 0.95rem;
    pointer-events: auto;
  }
  .brand-logo {
    width: 30px;
    height: 30px;
  }
  .brand-dot-wrap {
    width: 30px;
    height: 30px;
  }
  .nav-revealable,
  .nav-hanging-dogs {
    display: none !important;
  }
  .nav-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--color-border-glass);
    color: #ffffff;
    font-size: 1.05rem;
    cursor: pointer;
  }
  .btn-audio-toggle {
    width: 38px;
    height: 38px;
    font-size: 0.95rem;
  }
  .hero-cloud-stage {
    height: clamp(340px, 72vh, 580px);
    max-width: 100%;
  }
  .hero-center-content {
    max-width: 94%;
    padding: 0 0.5rem;
  }
  .hero-center-content .hero-title {
    font-size: clamp(2.3rem, 7.5vw, 3.4rem);
    margin-bottom: 0.85rem;
  }
  .hero-center-content .hero-title.hero-title-greeting {
    font-size: clamp(1.75rem, 6.2vw, 2.6rem) !important;
  }
  .hero-quote-card {
    padding: 0;
    border-radius: 0;
  }
  .hero-quote {
    font-size: clamp(1.05rem, 3.2vw, 1.35rem);
    line-height: 1.4;
  }
  .section-header {
    margin-bottom: calc(1.15rem + 15px);
    text-align: center;
  }
  .section-title {
    font-size: clamp(2.1rem, 5.8vw, 2.75rem);
  }
  .section-subtitle {
    font-size: 0.88rem;
    margin-bottom: 0.95rem;
  }
  .bento-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
    max-height: calc(100dvh - var(--admin-bar-height, 0px) - 180px);
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    padding-bottom: 1.25rem;
  }
  .blog-grid,
  .category-articles-grid {
    grid-template-columns: 1fr;
    gap: 0.85rem;
    max-height: calc(100dvh - var(--admin-bar-height, 0px) - 180px);
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    padding-bottom: 1.25rem;
  }
  .features-articles-header {
    flex-direction: row;
    align-items: center;
    gap: 0.65rem;
  }
  .blog-thumb-wrap {
    height: 160px;
  }
  .blog-card {
    max-height: none;
  }
  .blog-filter-tabs {
    gap: 0.35rem;
    margin-bottom: 1.15rem;
    overflow-x: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding-bottom: 0.35rem;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    scrollbar-width: none;
  }
  .blog-filter-tabs::-webkit-scrollbar {
    display: none;
  }
  .blog-tab-btn {
    white-space: nowrap;
    flex-shrink: 0;
    padding: 0.35rem 0.85rem;
    font-size: 0.8rem;
  }
  .about-card {
    padding: 1.5rem 1.25rem;
    border-radius: 20px;
    max-width: 440px;
    margin: 0 auto;
  }
  .about-desc {
    font-size: 0.92rem;
    margin-bottom: 1.15rem;
    text-align: center;
  }
  .newsletter-form-wrapper {
    flex-direction: column;
    gap: 0.75rem;
  }
  .newsletter-input {
    width: 100% !important;
    min-width: 100% !important;
    flex: 0 0 auto !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    padding: 0 1.15rem !important;
    box-sizing: border-box !important;
    font-size: 16px !important;
    border-radius: 12px !important;
  }
  .newsletter-form-wrapper .btn-primary {
    width: 100% !important;
    min-width: 100% !important;
    flex: 0 0 auto !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 1.5rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
  }
  .newsletter-features-row {
    margin-top: 1.15rem !important;
    display: flex !important;
    justify-content: center !important;
    gap: 1.25rem !important;
    font-size: 0.78rem !important;
  }
  /* iOS Safari zoom prevention on focus: font-size must be at least 16px */
  .floating-input,
  .floating-textarea,
  .newsletter-input,
  input[type="text"],
  input[type="email"],
  textarea {
    font-size: 16px !important;
  }
  .contact-grid {
    grid-template-columns: 1fr;
    max-width: 580px;
    width: 100%;
    margin: 0 auto;
    gap: 0.85rem;
    max-height: calc(100dvh - var(--admin-bar-height, 0px) - 170px);
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    justify-items: center;
    padding-bottom: 1.25rem;
  }
  .contact-info-panel {
    width: 100%;
    max-width: 580px;
    margin: 0 auto;
    padding: 0;
  }
  .contact-action-card {
    width: 100%;
    max-width: 580px;
    margin: 0 auto 0.65rem auto;
    padding: 0.9rem 1rem;
    box-sizing: border-box;
  }
  .contact-form-card {
    width: 100%;
    max-width: 580px;
    margin: 0 auto;
    justify-self: center;
    box-sizing: border-box;
    padding: 1.35rem 1.15rem;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }
  .contact-form-row {
    grid-template-columns: 1fr;
    gap: 0.65rem;
    margin-bottom: 0.65rem;
  }
  .slide-footer-bar {
    flex-direction: column;
    gap: 0.65rem;
    text-align: center;
    padding: 0.65rem 0;
  }
  .footer-nav {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem 0.85rem;
    font-size: 0.82rem;
  }
  .single-post-wrapper,
  .archive-wrapper,
  .page-wrapper {
    margin: calc(var(--nav-height) + 1.25rem) auto 3.5rem auto;
    padding: 0 1rem;
  }
  .single-post-article,
  .page-article {
    padding: 1.5rem 1.15rem;
  }
  .single-post-title {
    font-size: clamp(1.85rem, 6vw, 2.4rem);
  }
}

/* Compact Mobile Screens (<= 480px, iPhone SE, 360-414px) */
@media (max-width: 480px) {
  .site-header {
    top: calc(var(--admin-bar-height, 0px) + 0.25rem + env(safe-area-inset-top, 0px));
    padding: 0 calc(0.35rem + env(safe-area-inset-right, 0px)) 0 calc(0.35rem + env(safe-area-inset-left, 0px));
  }
  .nav-island {
    padding: 0.28rem 0.6rem 0.28rem 0.45rem;
    gap: 0.35rem;
    max-width: calc(100vw - 16px);
  }
  .brand-name-prefix {
    max-width: 105px;
    font-size: 0.85rem;
    margin-right: 0.25rem;
  }
  .brand-name-suffix {
    max-width: 32px;
    font-size: 0.85rem;
    margin-left: 0.25rem;
  }
  .brand-logo,
  .brand-dot-wrap {
    width: 26px;
    height: 26px;
  }
  .nav-toggle-btn {
    width: 34px;
    height: 34px;
    font-size: 0.95rem;
  }
  .btn-audio-toggle {
    width: 34px;
    height: 34px;
    font-size: 0.88rem;
  }
  .section-header {
    margin-bottom: calc(0.75rem + 15px);
  }
  .section-title {
    font-size: clamp(1.55rem, 5.2vw, 1.95rem);
    margin-bottom: 0.25rem;
  }
  .section-subtitle {
    font-size: 0.8rem;
    margin-bottom: 0.55rem;
  }
  .hero-cloud-stage {
    height: clamp(260px, 60vh, 420px);
    max-width: 100%;
  }
  .hero-center-content .hero-title {
    font-size: clamp(1.85rem, 6.8vw, 2.45rem);
    margin-bottom: 0.45rem;
  }
  .hero-center-content .hero-title.hero-title-greeting {
    font-size: clamp(1.4rem, 5.8vw, 1.95rem) !important;
  }
  .hero-typewriter-cursor {
    width: 3px;
    margin-left: 4px;
  }
  .hero-center-content .hero-quote {
    font-size: clamp(0.92rem, 3.4vw, 1.12rem);
    line-height: 1.35;
  }
  .hero-quote-author {
    font-size: 0.74rem;
    margin-top: 0.3rem;
  }
  .bento-grid {
    --bento-cols: 1;
    --bento-gap: 0.6rem;
    max-height: calc(100dvh - var(--admin-bar-height, 0px) - 165px);
    padding-bottom: 1.25rem;
  }
  .bento-card {
    padding: 0.85rem 0.95rem;
    min-height: 95px;
  }
  .bento-title {
    font-size: 0.98rem;
  }
  .bento-desc {
    font-size: 0.8rem;
  }
  .blog-grid,
  .category-articles-grid {
    grid-template-columns: 1fr;
    gap: 0.65rem;
    max-height: calc(100dvh - var(--admin-bar-height, 0px) - 170px);
    padding-bottom: 1.25rem;
  }
  .blog-thumb-wrap {
    height: 120px;
  }
  .blog-card-title {
    font-size: 0.95rem;
  }
  .blog-card-excerpt {
    font-size: 0.8rem;
    -webkit-line-clamp: 2;
  }
  .about-card {
    padding: 1.15rem 0.9rem;
    max-height: calc(100dvh - var(--admin-bar-height, 0px) - 160px);
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }
  .about-title {
    font-size: clamp(1.4rem, 4.5vw, 1.75rem);
    margin-bottom: 0.45rem;
  }
  .about-desc {
    font-size: 0.88rem;
    line-height: 1.45;
    margin-bottom: 0.95rem;
  }
  .about-badge {
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    margin-bottom: 0.75rem;
  }
  .newsletter-features-row {
    gap: 0.75rem 1rem;
    font-size: 0.78rem;
  }
  .contact-grid {
    max-height: calc(100dvh - var(--admin-bar-height, 0px) - 160px);
    padding-bottom: 1.25rem;
  }
  .contact-form-card {
    padding: 1rem 0.85rem;
  }
  .contact-action-card {
    padding: 0.7rem 0.85rem;
  }
  .contact-val {
    font-size: 0.86rem;
  }
  .contact-icon-pill {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }
  .floating-input {
    padding: 0.75rem 0.75rem 0.25rem 0.75rem;
  }
  .floating-textarea {
    min-height: 55px;
  }
  .slide-footer-bar {
    margin-top: 0.75rem;
    padding-top: 0.55rem;
  }
}

/* Very Small Mobile Screens (<= 360px, Galaxy Fold cover, older iPhones) */
@media (max-width: 360px) {
  .brand-name-prefix {
    max-width: 85px;
    font-size: 0.8rem;
  }
  .brand-name-suffix {
    max-width: 26px;
    font-size: 0.8rem;
  }
  .nav-island {
    padding: 0.24rem 0.45rem;
    gap: 0.25rem;
  }
  .hero-center-content .hero-title {
    font-size: 1.7rem;
  }
  .section-title {
    font-size: 1.45rem;
  }
}

/* Compact Viewport Heights (Laptops, 1080p scaled displays, 1366x768) */
@media (max-height: 760px) {
  .site-header {
    top: 0.5rem;
  }
  body.admin-bar .site-header,
  .admin-bar .site-header {
    top: 0.5rem !important;
  }
  .nav-island:hover,
  .site-header:hover .nav-island,
  .site-header.is-hovered .nav-island {
    padding: 2px 20px !important;
    max-width: 540px !important;
  }
  .section-header {
    margin-bottom: calc(0.5rem + 15px);
  }
  .section-title {
    font-size: clamp(2rem, 4.8vh, 2.6rem) !important;
    margin-bottom: 0.2rem;
  }
  .section-subtitle {
    font-size: 0.8rem !important;
    margin-bottom: 0.35rem;
  }
  .hero-cloud-stage {
    height: clamp(360px, 76vh, 620px);
  }
  .hero-center-content .hero-title {
    font-size: clamp(4.2rem, 8.5vw, 6.8rem);
    margin-bottom: 0.5rem;
  }
  .hero-quote-card {
    padding: 0;
  }
  .hero-quote {
    font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  }
  .bento-grid {
    max-height: none;
    overflow: hidden;
    gap: 0.65rem;
  }
  .bento-card {
    padding: 0.75rem 0.85rem;
    min-height: 85px;
  }
  .blog-grid {
    max-height: none;
    overflow: hidden;
    gap: 0.65rem;
  }
  .blog-thumb-wrap {
    height: clamp(65px, 8.5vh, 85px);
  }
  .blog-card-content {
    padding: 0.4rem 0.65rem;
  }
  .blog-card-title {
    font-size: 0.88rem;
    line-height: 1.2;
    margin-bottom: 0.2rem;
  }
  .blog-card-excerpt {
    font-size: 0.72rem;
    line-height: 1.28;
    margin: 0 0 0.25rem 0;
  }
  .about-card {
    padding: 1.15rem 1.45rem;
    max-height: none;
    overflow: hidden;
  }
  .contact-grid {
    max-height: none;
    overflow: hidden;
    gap: 0.75rem;
  }
  .contact-form-card {
    padding: 0.95rem 1.15rem;
  }
  .floating-input {
    padding: 0.75rem 0.75rem 0.25rem 0.75rem;
  }
  .floating-textarea {
    min-height: 55px;
  }
}

/* Very Short Viewport Heights (<= 560px) */
@media (max-height: 560px) {
  .site-header {
    top: 0.25rem;
  }
  body.admin-bar .site-header,
  .admin-bar .site-header {
    top: 0.25rem !important;
  }
  .nav-island:hover,
  .site-header:hover .nav-island,
  .site-header.is-hovered .nav-island {
    padding: 8px 24px !important;
    max-width: 500px !important;
  }
  .section-header {
    margin-bottom: calc(0.35rem + 15px);
  }
  .section-title {
    font-size: 1.85rem !important;
    margin-bottom: 0.15rem;
  }
  .section-subtitle {
    display: none;
  }
  .hero-cloud-stage {
    height: clamp(240px, 78vh, 380px);
  }
  .hero-center-content .hero-title {
    font-size: clamp(2.2rem, 7.5vh, 3.2rem);
    margin-bottom: 0.2rem;
  }
  .hero-quote-card {
    padding: 0;
    border-radius: 0;
  }
  .hero-quote {
    font-size: clamp(0.95rem, 2.8vh, 1.25rem);
    line-height: 1.3;
  }
  .hero-quote-author {
    font-size: 0.72rem;
    margin-top: 0.25rem;
  }
  .bento-grid {
    --bento-cols: 3;
    max-height: none;
    overflow: hidden;
    --bento-gap: 0.45rem;
  }
  .bento-card {
    padding: 0.55rem 0.65rem;
    min-height: 70px;
  }
  .bento-desc {
    display: none;
  }
  .blog-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    max-height: none;
    overflow: hidden;
    gap: 0.45rem;
  }
  .blog-thumb-wrap {
    height: 60px;
  }
  .blog-card-excerpt {
    display: none;
  }
  .about-card {
    padding: 0.75rem 1rem;
    max-height: none;
    overflow: hidden;
  }
  .about-title {
    font-size: 1.25rem;
    margin-bottom: 0.35rem;
  }
  .about-desc {
    font-size: 0.82rem;
    margin-bottom: 0.55rem;
  }
  .contact-grid {
    max-height: none;
    overflow: hidden;
    gap: 0.5rem;
  }
  .contact-form-card {
    padding: 0.65rem 0.85rem;
  }
}

/* ==========================================================================
   Vertical Screens & Portrait Orientation (Vertical Monitors, Portrait Tablets >= 641px)
   ========================================================================== */
@media (orientation: portrait) and (min-width: 641px) {
  .deck-container {
    max-width: 780px;
    margin: auto;
  }
  .hero-deck-container {
    max-width: 100% !important;
  }
  .hero-cloud-stage {
    max-width: 100%;
    margin: 0 auto;
  }
  .hero-center-content {
    align-items: center;
    text-align: center;
    margin: 0 auto;
    width: 100%;
  }
  .bento-grid {
    --bento-cols: 2;
    max-width: 720px;
    margin: 0 auto;
    --bento-gap: 1rem;
  }
  .bento-card.bento-span-2 {
    grid-column: span 2;
  }
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 720px;
    margin: 0 auto;
    gap: 1.15rem;
  }
  .about-card {
    max-width: 640px;
    margin: 0 auto;
  }
  .contact-grid {
    grid-template-columns: 1fr !important;
    max-width: 580px;
    width: 100%;
    margin: 0 auto;
    gap: 1.25rem;
    justify-items: center;
  }
  .contact-info-panel {
    width: 100%;
    max-width: 580px;
    margin: 0 auto;
    gap: 0.85rem;
    height: auto;
    display: flex;
    flex-direction: column;
  }
  .contact-action-card {
    width: 100%;
    max-width: 580px;
    margin: 0 auto;
    box-sizing: border-box;
    flex: none;
  }
  .contact-form-card {
    width: 100%;
    max-width: 580px;
    margin: 0 auto;
    justify-self: center;
    box-sizing: border-box;
    height: auto;
  }
}

/* Tall Vertical Screens (e.g. 1080x1920 or 1440x2560 vertical monitors) */
@media (orientation: portrait) and (min-height: 900px) {
  .deck-slide {
    padding-top: calc(var(--admin-bar-height, 0px) + 5.5rem);
    padding-bottom: 5.5rem;
  }
  .section-header {
    margin-bottom: calc(2rem + 15px);
  }
  .bento-grid {
    max-height: 68vh;
    gap: 1.25rem;
  }
  .blog-grid {
    max-height: 68vh;
    gap: 1.35rem;
  }
  .contact-grid {
    max-height: 72vh;
    gap: 1.5rem;
  }
  .contact-action-card {
    padding: 1.25rem 1.45rem;
  }
  .contact-form-card {
    padding: 1.75rem 1.85rem;
  }
}

/* ==========================================================================
   Zero-Refresh SPA Navigation Transitions & Reading Views
   ========================================================================== */
#sb-spa-content {
  width: 100%;
  min-height: 100%;
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: opacity, transform;
}

#sb-spa-content.is-fading-out {
  opacity: 0;
  transform: translateY(-8px) scale(0.995);
  pointer-events: none;
}

#sb-spa-content.is-fading-in {
  opacity: 0;
  transform: translateY(12px) scale(0.995);
  pointer-events: none;
}

/* Subtle Top SPA Loading Progress Bar */
.sb-spa-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--color-primary-light), #38bdf8, #a855f7);
  z-index: 999999;
  transition: width 0.2s ease, opacity 0.3s ease;
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.7);
}

.sb-spa-progress-bar.is-active {
  opacity: 1;
}

/* Single Post & Archive Overrides in Reading Mode */
body.is-reading-mode {
  overflow-y: auto !important;
  height: auto !important;
  min-height: 100vh;
}

body.is-reading-mode html {
  overflow-y: auto !important;
  height: auto !important;
}

body.is-reading-mode .deck-hud {
  display: none !important;
}

/* General Back Button */
.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  color: var(--color-primary-light);
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  text-decoration: none;
  transition: all var(--transition-fast);
}

.back-btn:hover {
  color: #ffffff;
  transform: translateX(-3px);
}

@media (prefers-reduced-motion: reduce) {
  #sb-spa-content {
    transition: opacity 0.08s linear !important;
    transform: none !important;
  }
  #sb-spa-content.is-fading-out,
  #sb-spa-content.is-fading-in {
    transform: none !important;
  }
}

/* ==========================================================================
   Reading Mode & Inner Page Templates (Single, Page, Archive)
   ========================================================================== */
body.is-reading-mode,
body.is-reading-mode html {
  overflow-y: auto !important;
  height: auto !important;
}

/* Standalone Single Post 2-Column Editorial Reader View (Matches In-Deck Layout Exactly) */
.single-post-deck-viewport {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  z-index: 1;
}

.single-post-deck-slide {
  width: 100vw;
  height: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: calc(var(--nav-height, 60px) + 0.35rem);
  padding-bottom: 1.5rem;
  box-sizing: border-box;
}

.single-post-deck-container,
body.is-article-open #blog .deck-container {
  max-width: min(1280px, 95vw);
  width: 100%;
  margin: auto;
  padding: 0 1.5rem;
  box-sizing: border-box;
}

.single-post-reader-view {
  display: flex !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  width: 100%;
  max-width: min(1280px, 95vw);
  margin: 0 auto;
}

/* Single Post */
.single-post-wrapper {
  max-width: 860px;
  margin: calc(var(--nav-height) + clamp(1.25rem, 3vw, 3rem)) auto clamp(3rem, 5vw, 5rem) auto;
  padding: 0 clamp(0.75rem, 2.5vw, 1.5rem);
  color: var(--text-main);
}
.single-post-top-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.single-post-print-btn {
  max-width: 190px;
  margin-top: 0;
}
.single-post-article {
  background: var(--color-surface-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--color-border-glass);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 3.5vw, 3rem);
  box-shadow: var(--shadow-lg);
}
.single-post-header {
  margin-bottom: 2.25rem;
}
.single-post-title {
  font-size: clamp(2.2rem, 4.5vw, 3.25rem);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 1.25rem;
  color: #ffffff;
  letter-spacing: -0.03em;
}
.single-post-meta {
  display: flex;
  gap: 1rem;
  align-items: center;
  color: var(--text-muted);
  font-size: 0.88rem;
  margin-bottom: 1.5rem;
}
.single-post-featured-image {
  width: 100%;
  border-radius: var(--radius-md);
  margin-bottom: 2.5rem;
  box-shadow: var(--shadow-md);
  max-height: 480px;
  object-fit: cover;
}
.single-post-content {
  font-size: 1.12rem;
  line-height: 1.85;
  color: #e2e8f0;
}
.single-post-content p {
  margin-bottom: 1.75rem;
}
.single-post-content a {
  color: var(--color-primary-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.single-post-content a:hover {
  color: #ffffff;
}
.single-post-content h2,
.single-post-content h3 {
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  color: #ffffff;
}

/* Page Template */
.page-wrapper {
  max-width: 900px;
  margin: calc(var(--nav-height) + clamp(1.25rem, 3vw, 3rem)) auto clamp(3rem, 5vw, 5rem) auto;
  padding: 0 clamp(0.75rem, 2.5vw, 1.5rem);
  color: var(--text-main);
}
.page-article {
  background: var(--color-surface-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--color-border-glass);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 3.5vw, 3rem);
  box-shadow: var(--shadow-lg);
}
.page-title {
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 1.5rem;
  letter-spacing: -0.03em;
}
.page-content {
  font-size: 1.12rem;
  line-height: 1.85;
  color: #e2e8f0;
}
.page-content p {
  margin-bottom: 1.6rem;
}
.page-content a {
  color: var(--color-primary-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.page-content a:hover {
  color: #ffffff;
}

/* Archive Template */
.archive-wrapper {
  max-width: 1240px;
  margin: calc(var(--nav-height) + clamp(1.25rem, 3vw, 3rem)) auto clamp(3rem, 5vw, 5rem) auto;
  padding: 0 clamp(0.75rem, 2.5vw, 1.5rem);
  color: var(--text-main);
}
.archive-header {
  margin-bottom: 2.75rem;
  text-align: center;
}
.archive-title {
  font-size: clamp(2.2rem, 4vw, 3.25rem);
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 0.75rem;
  letter-spacing: -0.03em;
}
.archive-description {
  color: var(--text-muted);
  max-width: 680px;
  margin: 0 auto;
  font-size: 1.05rem;
}
.archive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.75rem;
}

/* ==========================================================================
   Suite 2: Solar Immersion & Atmospheric Glass Tints
   ========================================================================== */
[data-solar-theme="dawn"] {
  --color-border-glass: rgba(251, 191, 36, 0.26);
  --color-primary-glow: rgba(245, 158, 11, 0.3);
  --ambient-glow: rgba(245, 158, 11, 0.15);
}

[data-solar-theme="dawn"] .glass-panel,
[data-solar-theme="dawn"] .spotlight-card {
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 35px rgba(245, 158, 11, 0.08) !important;
}

[data-solar-theme="day"] {
  --color-border-glass: rgba(56, 189, 248, 0.25);
  --color-primary-glow: rgba(56, 189, 248, 0.3);
  --ambient-glow: rgba(56, 189, 248, 0.18);
}

[data-solar-theme="sunset"] {
  --color-border-glass: rgba(125, 211, 252, 0.32);
  --color-primary-glow: rgba(125, 211, 252, 0.32);
  --ambient-glow: rgba(125, 211, 252, 0.16);
}

[data-solar-theme="sunset"] .glass-panel,
[data-solar-theme="sunset"] .spotlight-card {
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.65), 0 0 35px rgba(125, 211, 252, 0.14) !important;
}

[data-solar-theme="night"] {
  --color-border-glass: rgba(99, 102, 241, 0.26);
  --color-primary-glow: rgba(99, 102, 241, 0.3);
  --ambient-glow: rgba(129, 140, 248, 0.16);
}

/* HUD Audio Equalizer Waveform Bars */
.hud-audio-waveform {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
  padding: 0 2px;
  vertical-align: middle;
}

.hud-wave-bar {
  width: 2.5px;
  height: 4px;
  background: #38bdf8;
  border-radius: 2px;
  transition: height 0.2s ease, background-color 0.2s ease;
}

.music-vinyl-button.is-playing .hud-wave-bar,
.btn-audio-toggle.is-playing .hud-wave-bar,
.hud-audio-waveform.is-playing .hud-wave-bar {
  animation: hudWaveBounce 0.9s ease-in-out infinite alternate;
}

.hud-wave-bar.bar-1 { animation-delay: 0.0s; height: 5px; }
.hud-wave-bar.bar-2 { animation-delay: 0.25s; height: 12px; }
.hud-wave-bar.bar-3 { animation-delay: 0.12s; height: 8px; }
.hud-wave-bar.bar-4 { animation-delay: 0.35s; height: 13px; }

@keyframes hudWaveBounce {
  0% {
    height: 4px;
    opacity: 0.6;
  }
  50% {
    height: 14px;
    opacity: 1;
    background: #67e8f9;
  }
  100% {
    height: 6px;
    opacity: 0.8;
  }
}

/* Magnetic Button Transitions */
.btn-primary,
.btn-secondary,
.blog-reader-back-btn,
.music-vinyl-button,
.dog-summon-btn {
  will-change: transform;
}

.reader-takeaway-pill,
.blog-reader-meta .blog-reader-meta-dot,
.blog-reader-meta .blog-reader-reading-time {
  display: none !important;
}

.blog-reader-next-card {
  margin-top: 2.5rem;
  margin-bottom: 1.5rem;
  padding: 1.15rem 1.4rem;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.75) 0%, rgba(30, 41, 59, 0.6) 100%);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: var(--radius-md, 16px);
  cursor: pointer;
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* ==========================================================================
   Fixed "Next in Firehose" Exterior Link (Bottom Right of Reader)
   ========================================================================== */
.blog-reader-fixed-next-wrap {
  margin-top: auto;
  padding-top: 1.25rem;
  display: flex;
  width: 100%;
  z-index: 25;
  box-sizing: border-box;
}

.blog-reader-fixed-next-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  padding: 0.65rem 0.85rem;
  background: rgba(13, 20, 36, 0.78);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: var(--radius-md, 16px);
  color: #ffffff;
  font-family: var(--font-heading);
  text-decoration: none !important;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.38), 0 0 16px rgba(56, 189, 248, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: left;
  user-select: none;
}

.blog-reader-fixed-next-btn:hover {
  background: rgba(18, 28, 48, 0.92);
  border-color: #38bdf8;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45), 0 0 20px rgba(56, 189, 248, 0.35);
  color: #ffffff;
  text-decoration: none !important;
}

.blog-reader-fixed-next-btn .fixed-next-text-wrap {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.blog-reader-fixed-next-btn .fixed-next-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #38bdf8;
  display: block;
  line-height: 1.2;
}

.blog-reader-fixed-next-btn .fixed-next-title {
  font-size: 0.84rem;
  font-weight: 600;
  color: #f1f5f9;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 3px;
  line-height: 1.25;
}

.blog-reader-fixed-next-btn .fixed-next-arrow-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(56, 189, 248, 0.16);
  border: 1px solid rgba(56, 189, 248, 0.4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #38bdf8;
  font-size: 0.78rem;
  transition: all 0.22s ease;
}

.blog-reader-fixed-next-btn:hover .fixed-next-arrow-circle {
  background: rgba(56, 189, 248, 0.35);
  border-color: #38bdf8;
  color: #ffffff;
  transform: translateX(3px);
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.5);
}

@media (max-width: 1140px) {
  .blog-reader-fixed-next-wrap {
    position: fixed !important;
    bottom: 24px !important;
    right: 20px !important;
    width: auto !important;
    max-width: calc(100vw - 40px) !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    z-index: 10001 !important;
  }
  .blog-reader-fixed-next-btn {
    width: auto !important;
    min-width: 180px !important;
  }
}

.blog-reader-next-card:hover {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.88) 0%, rgba(15, 23, 42, 0.82) 100%);
  border-color: #38bdf8;
  transform: translateX(4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45), 0 0 20px rgba(56, 189, 248, 0.25);
}

.next-card-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #38bdf8;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
}

.next-card-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #f8fafc;
  line-height: 1.35;
}

.next-card-meta {
  font-size: 0.78rem;
  color: #94a3b8;
  font-family: var(--font-mono);
}

/* ==========================================================================
   Suite 4: Slide 4 Dual-Grid & Live "Now / Radar" Dashboard
   ========================================================================== */
.about-dual-grid {
  display: flex;
  justify-content: center;
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
}

.about-dual-grid .about-card {
  width: 100%;
}

.radar-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(1.25rem, 2vw, 1.85rem);
  background: rgba(11, 17, 30, 0.78);
  border: 1px solid var(--color-border-glass, rgba(255, 255, 255, 0.14));
  border-radius: var(--radius-lg, 16px);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.radar-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  margin-bottom: 1rem;
}

.radar-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.radar-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 rgba(16, 185, 129, 0.7);
  animation: radarPulse 1.8s infinite;
}

@keyframes radarPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

.radar-status-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #10b981;
}

.radar-time-display {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: #cbd5e1;
}

.radar-items-grid {
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
}

.radar-item-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #94a3b8;
  margin-bottom: 0.2rem;
}

.radar-item-val {
  font-size: 0.88rem;
  color: #f1f5f9;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.radar-item-val i {
  color: #38bdf8;
  font-size: 0.82rem;
}

.radar-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.25rem;
}

.radar-tag {
  font-size: 0.74rem;
  font-family: var(--font-mono);
  padding: 3px 9px;
  border-radius: 9999px;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: #7dd3fc;
  transition: all 0.2s ease;
}

.radar-tag:hover {
  background: rgba(56, 189, 248, 0.22);
  color: #ffffff;
  border-color: #38bdf8;
}

@media (max-width: 860px) {
  .about-dual-grid {
    max-width: 100%;
    max-height: calc(100dvh - var(--nav-height) - 70px);
    overflow-y: auto;
  }
}

/* ==========================================================================
   First-Visit Onboarding Liquid-Glass Modal
   ========================================================================== */
.welcome-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(5, 10, 22, 0.42);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s;
}

.welcome-modal-backdrop.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Never block pointer events or remain open when user navigates away from hero slide */
html:not([data-active-slide="hero"]) #welcome-modal-backdrop,
html:not([data-active-slide="hero"]) .welcome-modal-backdrop,
body:not([data-active-slide="hero"]) #welcome-modal-backdrop,
body:not([data-active-slide="hero"]) .welcome-modal-backdrop,
html:not([data-active-slide="hero"]) .welcome-onboarding-stage,
body:not([data-active-slide="hero"]) .welcome-onboarding-stage {
  pointer-events: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

.welcome-modal {
  position: relative;
  width: 100%;
  max-width: 490px;
  max-height: calc(100dvh - 2.5rem);
  overflow-y: auto;
  padding: clamp(1.4rem, 2.5vw, 2.1rem);
  border-radius: 24px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.09) 0%,
    rgba(255, 255, 255, 0.02) 40%,
    rgba(14, 21, 33, 0.50) 100%
  );
  backdrop-filter: blur(28px) saturate(190%);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-top: 1.5px solid rgba(255, 255, 255, 0.32);
  border-left: 1.2px solid rgba(255, 255, 255, 0.22);
  box-shadow: 
    0 24px 60px rgba(0, 0, 0, 0.5),
    0 0 35px rgba(52, 211, 153, 0.16),
    inset 0 1px 1.5px rgba(255, 255, 255, 0.32),
    inset 0 -1px 1.5px rgba(0, 0, 0, 0.25);
  color: #ffffff;
  transform: translateY(14px) scale(0.96);
  transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1);
}

.welcome-modal-backdrop.open .welcome-modal {
  transform: translateY(0) scale(1);
}

.welcome-modal.is-returning {
  border: 1.5px solid rgba(52, 211, 153, 0.5);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.75), 0 0 45px rgba(52, 211, 153, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.welcome-modal.is-returning .welcome-title {
  margin: 0 0 0.5rem 0 !important;
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-align: center;
}

.welcome-modal.is-returning .welcome-visitor-name {
  color: #34d399;
  text-shadow: 0 0 16px rgba(52, 211, 153, 0.55);
}

.welcome-modal-close {
  display: none !important;
}

.welcome-step {
  display: flex;
  flex-direction: column;
  animation: welcomeFadeSlide 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes welcomeFadeSlide {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.welcome-header {
  text-align: center;
  margin-bottom: 1.25rem;
}

.welcome-avatar-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(52, 211, 153, 0.12);
  border: 1.5px solid rgba(52, 211, 153, 0.45);
  box-shadow: 0 0 20px rgba(52, 211, 153, 0.35);
  color: #34d399;
  font-size: 1.45rem;
  margin-bottom: 0.85rem;
}

.welcome-avatar-badge.music-badge {
  background: rgba(56, 189, 248, 0.14);
  border-color: rgba(56, 189, 248, 0.45);
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.35);
  color: #38bdf8;
}

/* Site Header hidden while Onboarding modal is active */
.site-header.header-hidden-for-onboarding {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease;
}

/* Onboarding Stage: positions Tubywuby directly above dialog */
.welcome-onboarding-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 530px;
  z-index: 2;
}

.welcome-stage-header {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-bottom: 64px; /* Moved higher by 20px (was 44px) */
  z-index: 20;
  transform: translateY(0);
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.welcome-stage-header:hover,
.welcome-stage-header:focus-within,
.welcome-stage-header.is-hovered,
.welcome-nav-island.is-expanded {
  margin-bottom: 64px; /* Fixed constant margin so Tubywuby does not shift on hover */
}

/* Nav Island positioned above Welcome Modal */
.welcome-nav-island {
  margin: 0 auto;
}

.welcome-tubywuby-dot {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  outline: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.welcome-tubywuby-dot .brand-logo {
  box-shadow: 0 0 18px rgba(52, 211, 153, 0.65), 0 4px 12px rgba(0, 0, 0, 0.5);
  border: 2px solid rgba(52, 211, 153, 0.7);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.22s ease,
              border-color 0.22s ease;
}

/* Dog-like springy hover with emerald glow halo */
.welcome-tubywuby-dot:hover .brand-logo,
.welcome-nav-island:hover .welcome-tubywuby-dot .brand-logo,
.welcome-nav-island.is-expanded .welcome-tubywuby-dot .brand-logo {
  transform: scale(1.18) translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), 0 0 20px rgba(16, 185, 129, 0.75), 0 0 4px rgba(5, 150, 105, 0.8);
  border-color: #34d399;
}

.welcome-tubywuby-dot:active .brand-logo {
  transform: scale(0.94) !important;
  transition: transform 0.08s ease;
}

/* Expanded state for Welcome Nav Island */
.welcome-nav-island.is-expanded,
.welcome-nav-island:hover,
.welcome-nav-island:focus-within,
.welcome-stage-header:hover .welcome-nav-island,
.welcome-stage-header.is-hovered .welcome-nav-island {
  width: auto !important;
  min-width: 0 !important;
  max-width: 540px !important;
  height: auto !important;
  min-height: 44px !important;
  border-radius: 24px !important;
  padding: 2px 20px !important;
  transform: translateY(0) !important;
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
  border-top: 1.5px solid rgba(255, 255, 255, 0.40) !important;
  border-left: 1.2px solid rgba(255, 255, 255, 0.25) !important;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.07) 0%,
    rgba(14, 20, 32, 0.42) 100%
  ) !important;
  backdrop-filter: blur(20px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
  box-shadow: 
    0 16px 36px -4px rgba(0, 0, 0, 0.55),
    0 2px 6px rgba(0, 0, 0, 0.2),
    inset 0 1px 1.5px 0 rgba(255, 255, 255, 0.35),
    0 0 20px rgba(52, 211, 153, 0.22) !important;
  align-items: center !important;
  overflow: visible !important;
}

.welcome-nav-island.is-expanded .brand-name-prefix,
.welcome-nav-island:hover .brand-name-prefix,
.welcome-nav-island:focus-within .brand-name-prefix,
.welcome-stage-header:hover .brand-name-prefix,
.welcome-stage-header.is-hovered .brand-name-prefix {
  max-width: 170px !important;
  opacity: 1 !important;
  transform: translateX(0) !important;
  filter: blur(0px) !important;
  margin-right: 8px !important;
  pointer-events: auto !important;
}

.welcome-nav-island.is-expanded .brand-name-suffix,
.welcome-nav-island:hover .brand-name-suffix,
.welcome-nav-island:focus-within .brand-name-suffix,
.welcome-stage-header:hover .brand-name-suffix,
.welcome-stage-header.is-hovered .brand-name-suffix {
  max-width: 50px !important;
  opacity: 1 !important;
  transform: translateX(0) !important;
  filter: blur(0px) !important;
  margin-left: 8px !important;
  pointer-events: auto !important;
}

.welcome-nav-island.is-expanded .nav-inline-languages,
.welcome-nav-island:hover .nav-inline-languages,
.welcome-nav-island:focus-within .nav-inline-languages,
.welcome-stage-header:hover .nav-inline-languages,
.welcome-stage-header.is-hovered .nav-inline-languages {
  max-width: 110px !important;
  opacity: 1 !important;
  transform: translateX(0) !important;
  filter: blur(0px) !important;
  pointer-events: auto !important;
}

.welcome-nav-island.is-expanded .nav-hanging-dogs,
.welcome-nav-island:hover .nav-hanging-dogs,
.welcome-nav-island:focus-within .nav-hanging-dogs,
.welcome-stage-header:hover .nav-hanging-dogs,
.welcome-stage-header.is-hovered .nav-hanging-dogs {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateX(-50%) translateY(0) !important;
}

/* Attention & Shake animations when user clicks outside modal */
@keyframes welcomeModalNudge {
  0%, 100% { transform: translateY(0) scale(1); }
  20% { transform: translateY(-4px) scale(1.006); }
  40% { transform: translateY(4px) scale(0.994); }
  60% { transform: translateY(-2px) scale(1.003); }
  80% { transform: translateY(2px) scale(0.997); }
}

.welcome-modal.welcome-shake {
  animation: welcomeModalNudge 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes welcomePulseAttention {
  0%, 100% { transform: scale(1); box-shadow: none; }
  50% { 
    transform: scale(1.08); 
    box-shadow: 0 0 22px rgba(52, 211, 153, 0.7);
    border-color: rgba(52, 211, 153, 0.95);
    color: #34d399;
    background: rgba(52, 211, 153, 0.15);
  }
}

.welcome-skip-btn.welcome-pulse-attention {
  animation: welcomePulseAttention 0.6s ease both;
}

.welcome-title {
  font-size: clamp(1.25rem, 1.8vw, 1.55rem);
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 0.45rem;
  letter-spacing: -0.01em;
}

.welcome-visitor-name {
  color: #34d399;
  text-shadow: 0 0 12px rgba(52, 211, 153, 0.5);
}

.welcome-subtitle {
  font-size: 0.88rem;
  color: #cbd5e1;
  line-height: 1.45;
  margin: 0 auto;
  max-width: 440px;
}

.welcome-step-name .welcome-header {
  margin-bottom: 1.25rem;
}

.welcome-step-name .welcome-title {
  margin-bottom: 0;
}

.welcome-step-name .welcome-subtitle,
#welcome-modal-subtitle {
  display: none !important;
}

.welcome-form {
  width: 100%;
}

.welcome-input-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  width: 100%;
}

.welcome-input {
  width: 195px;
  max-width: 210px;
  height: 48px;
  padding: 0 1rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1.5px solid rgba(52, 211, 153, 0.40);
  border-top: 1.5px solid rgba(255, 255, 255, 0.25);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 12px rgba(52, 211, 153, 0.10);
  color: #ffffff;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  text-align: center;
  outline: none;
  transition: all var(--transition-fast);
}

.welcome-input::placeholder {
  color: #94a3b8;
  text-align: center;
}

.welcome-input:focus {
  border-color: #34d399;
  background: rgba(255, 255, 255, 0.10);
  box-shadow: 0 0 20px rgba(52, 211, 153, 0.45), inset 0 1px 2px rgba(255, 255, 255, 0.2);
}

.welcome-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  height: 48px;
  padding: 0 1.25rem;
  border-radius: 12px;
  background: linear-gradient(135deg, #10b981, #059669);
  border: 1.5px solid rgba(52, 211, 153, 0.6);
  border-top: 1.5px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.35);
  color: #ffffff;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.22s ease,
              background 0.22s ease,
              border-color 0.22s ease;
}

.welcome-btn-primary:hover {
  background: linear-gradient(135deg, #34d399, #10b981);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4), 0 0 20px rgba(52, 211, 153, 0.65), inset 0 1px 1px rgba(255, 255, 255, 0.5);
  border-color: #34d399;
  transform: scale(1.05) translateY(-2px);
}

.welcome-btn-primary:active {
  transform: scale(0.95);
  transition: transform 0.08s ease;
}

.welcome-input.is-invalid {
  border-color: rgba(248, 113, 113, 0.85) !important;
  box-shadow: 0 0 18px rgba(239, 68, 68, 0.45), inset 0 1px 2px rgba(255, 255, 255, 0.2) !important;
  animation: inputShake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

.welcome-name-error {
  font-size: 0.85rem;
  color: #f87171;
  margin-top: 0.65rem;
  text-align: center;
  width: 100%;
}

.welcome-name-error.has-roast {
  text-align: left;
}

.welcome-dog-roast {
  padding: 0.85rem 1rem;
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid rgba(239, 68, 68, 0.5);
  border-radius: 14px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.55), 0 0 18px rgba(239, 68, 68, 0.22);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  animation: feedbackRoastShake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  text-align: left;
}

.welcome-dog-roast .roast-card-layout {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

.welcome-dog-roast .roast-quote {
  font-size: 0.88rem;
  font-style: italic;
  line-height: 1.45;
  color: #fecaca;
  margin-bottom: 0.35rem;
}

.welcome-dog-roast .roast-hint {
  font-size: 0.78rem;
  font-weight: 500;
  color: rgba(254, 202, 202, 0.88);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.welcome-actions-row {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1.05rem;
  width: 100%;
}

.welcome-btn-secondary,
.welcome-skip-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  height: auto;
  padding: 6px 14px;
  color: #94a3b8;
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
  transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              text-decoration-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  outline: none;
  user-select: none;
}

.welcome-btn-secondary:hover,
.welcome-skip-text:hover {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #f1f5f9;
  text-decoration-color: rgba(255, 255, 255, 0.45);
  transform: translateY(-1px);
}

.welcome-btn-secondary:active,
.welcome-skip-text:active {
  transform: translateY(0);
  color: #34d399;
}

.welcome-btn-secondary:focus-visible,
.welcome-skip-text:focus-visible {
  outline: 2px solid rgba(52, 211, 153, 0.5);
  outline-offset: 4px;
  border-radius: 4px;
}

@keyframes welcomeTextPulseAttention {
  0%, 100% {
    transform: scale(1);
    color: #94a3b8;
    text-shadow: none;
  }
  50% {
    transform: scale(1.06);
    color: #34d399;
    text-shadow: 0 0 12px rgba(52, 211, 153, 0.6);
  }
}

.welcome-btn-secondary.welcome-pulse-attention,
.welcome-skip-text.welcome-pulse-attention {
  animation: welcomeTextPulseAttention 0.6s ease both;
}

.welcome-footer-actions {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}

.welcome-skip-btn {
  background: none;
  border: 1.5px solid transparent;
  color: #94a3b8;
  font-size: 0.82rem;
  cursor: pointer;
  padding: 0.4rem 0.8rem;
  border-radius: 8px;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
              color 0.2s ease,
              background 0.2s ease,
              box-shadow 0.2s ease,
              border-color 0.2s ease;
}

.welcome-skip-btn:hover {
  color: #a7f3d0;
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(52, 211, 153, 0.45);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35), 0 0 14px rgba(16, 185, 129, 0.4);
  transform: scale(1.06) translateY(-1px);
}

.welcome-skip-btn:active {
  transform: scale(0.94);
  transition: transform 0.08s ease;
}

/* Step 2: Mood Selection Tag Cloud: Organic, Modern, Slick - Containerless Typography matching Hero Section */
.welcome-mood-cloud {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.55rem 1.15rem !important;
  width: 100% !important;
  max-width: 480px !important;
  margin: 0.85rem auto 0 !important;
}

.welcome-mood-tag {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  padding: 0.35rem 0.65rem !important;
  margin: 0.1rem 0.2rem !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: rgba(241, 245, 249, 0.78) !important;
  font-family: 'Courier New', Courier, monospace, var(--sb-font-mono, monospace) !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.035em !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 12px rgba(56, 189, 248, 0.12) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  user-select: none !important;
  transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Hide icons: "just the words like in hero section for tags" */
.welcome-mood-tag .mood-icon {
  display: none !important;
}

.welcome-mood-tag .mood-title {
  color: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
}

/* Organic visual hierarchy weights (varying font sizes like hero 3D depth) */
.welcome-mood-tag.tag-weight-1,
.welcome-mood-tag:nth-child(5n+1) {
  font-size: 1.24rem !important;
  color: rgba(255, 255, 255, 0.90) !important;
}
.welcome-mood-tag.tag-weight-2,
.welcome-mood-tag:nth-child(5n+2) {
  font-size: 0.94rem !important;
  color: rgba(226, 232, 240, 0.70) !important;
}
.welcome-mood-tag.tag-weight-3,
.welcome-mood-tag:nth-child(5n+3) {
  font-size: 1.15rem !important;
  color: rgba(248, 250, 252, 0.84) !important;
}
.welcome-mood-tag.tag-weight-4,
.welcome-mood-tag:nth-child(5n+4) {
  font-size: 1.02rem !important;
  color: rgba(226, 232, 240, 0.74) !important;
}
.welcome-mood-tag.tag-weight-5,
.welcome-mood-tag:nth-child(5n) {
  font-size: 1.20rem !important;
  color: rgba(255, 255, 255, 0.88) !important;
}

/* Slick Glowing Hover Effect */
.welcome-mood-tag:hover {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #38bdf8 !important;
  transform: scale(1.15) translateY(-2px) !important;
  text-shadow: 
    0 0 16px rgba(56, 189, 248, 0.9),
    0 0 32px rgba(56, 189, 248, 0.55),
    0 1px 3px rgba(0, 0, 0, 0.9) !important;
}

.welcome-mood-tag:active {
  transform: scale(0.96) !important;
}

/* Active / Playing State: Radiant Sky Blue Hero Glow + Sleek Underline Indicator */
.welcome-mood-tag.is-active {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #38bdf8 !important;
  font-weight: 800 !important;
  transform: scale(1.08) !important;
  text-shadow: 
    0 0 20px rgba(56, 189, 248, 0.95),
    0 0 42px rgba(56, 189, 248, 0.65),
    0 0 70px rgba(56, 189, 248, 0.4) !important;
}

.welcome-mood-tag.is-active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 55%;
  max-width: 44px;
  height: 2px;
  background: #38bdf8;
  border-radius: 999px;
  box-shadow: 0 0 8px #38bdf8, 0 0 16px rgba(56, 189, 248, 0.85);
}

/* Quiet Mode: Separated, serene, containerless control */
.welcome-mood-tag.mood-quiet {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  margin-top: 1rem !important;
  padding-top: 0.75rem !important;
  border: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 0 !important;
  font-size: 0.95rem !important;
  font-style: italic !important;
  color: rgba(199, 210, 254, 0.65) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
}

.welcome-mood-tag.mood-quiet:hover {
  background: transparent !important;
  border-top-color: rgba(255, 255, 255, 0.15) !important;
  color: #c7d2fe !important;
  text-shadow: 0 0 16px rgba(199, 210, 254, 0.85), 0 0 32px rgba(165, 180, 252, 0.45) !important;
  transform: scale(1.08) translateY(-1px) !important;
}

.welcome-mood-tag.mood-quiet.is-active {
  background: transparent !important;
  border-top: 1px solid rgba(165, 180, 252, 0.25) !important;
  color: #a5b4fc !important;
  font-weight: 800 !important;
  text-shadow: 
    0 0 20px rgba(165, 180, 252, 0.95),
    0 0 40px rgba(129, 140, 248, 0.6) !important;
}

.welcome-mood-tag.mood-quiet.is-active::after {
  background: #a5b4fc;
  box-shadow: 0 0 8px #a5b4fc, 0 0 16px rgba(165, 180, 252, 0.85);
}

/* Light Theme Support */
[data-theme="light"] .welcome-mood-tag {
  color: #334155 !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9) !important;
}

[data-theme="light"] .welcome-mood-tag:hover {
  color: #0284c7 !important;
  text-shadow: 0 0 12px rgba(2, 132, 199, 0.35) !important;
}

[data-theme="light"] .welcome-mood-tag.is-active {
  color: #0284c7 !important;
  font-weight: 800 !important;
  text-shadow: 0 0 14px rgba(2, 132, 199, 0.45) !important;
}

[data-theme="light"] .welcome-mood-tag.is-active::after {
  background: #0284c7;
  box-shadow: 0 0 8px rgba(2, 132, 199, 0.6);
}

[data-theme="light"] .welcome-mood-tag.mood-quiet {
  border-top-color: rgba(0, 0, 0, 0.08) !important;
  color: #64748b !important;
}

[data-theme="light"] .welcome-mood-tag.mood-quiet:hover {
  color: #4f46e5 !important;
}

[data-theme="light"] .welcome-mood-tag.mood-quiet.is-active {
  color: #4f46e5 !important;
}

[data-theme="light"] .welcome-mood-tag.mood-quiet.is-active::after {
  background: #4f46e5;
  box-shadow: 0 0 8px rgba(79, 70, 229, 0.6);
}

.welcome-mood-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.65rem;
  width: 100%;
}

.welcome-mood-card {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.85rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
  text-align: left;
  cursor: pointer;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.22s ease,
              border-color 0.22s ease,
              background 0.22s ease;
  width: 100%;
}

.welcome-mood-card .mood-icon {
  font-size: 1.4rem;
  line-height: 1;
  flex-shrink: 0;
}

.welcome-mood-card .mood-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.welcome-mood-card .mood-title {
  font-size: 0.84rem;
  font-weight: 600;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.welcome-mood-card .mood-track {
  font-size: 0.72rem;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.welcome-mood-card:hover {
  background: rgba(52, 211, 153, 0.18);
  border-color: #34d399;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), 0 0 18px rgba(16, 185, 129, 0.5), 0 0 4px rgba(5, 150, 105, 0.6);
  transform: scale(1.04) translateY(-2px);
}

.welcome-mood-card:hover .mood-title {
  color: #34d399;
}

.welcome-mood-card.is-active,
.welcome-mood-card:active {
  background: rgba(52, 211, 153, 0.25);
  border-color: #34d399;
  box-shadow: 0 0 20px rgba(52, 211, 153, 0.4);
  transform: scale(0.96);
  transition: transform 0.08s ease;
}

.welcome-mood-card.mood-quiet:hover {
  background: rgba(148, 163, 184, 0.2);
  border-color: #94a3b8;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), 0 0 16px rgba(148, 163, 184, 0.45);
  transform: scale(1.04) translateY(-2px);
}

.welcome-mood-card.mood-quiet:hover .mood-title {
  color: #f1f5f9;
}

@media (max-width: 520px) {
  .welcome-mood-grid {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .welcome-mood-cloud {
    gap: 0.5rem;
    max-width: 100%;
  }
  .welcome-mood-tag {
    padding: 0.48rem 0.95rem;
    font-size: 0.84rem;
  }
  .welcome-modal {
    padding: 1.25rem 1rem;
  }
  .welcome-input-row {
    width: 100%;
    justify-content: center;
    gap: 0.5rem;
  }
  .welcome-input {
    width: 165px;
    max-width: 175px;
  }
  .welcome-btn-primary {
    padding: 0 1rem;
  }
  .welcome-actions-row {
    width: 100%;
  }
  .welcome-btn-secondary,
  .welcome-skip-text {
    width: auto;
    max-width: none;
    font-size: 0.82rem;
    padding: 6px 10px;
  }
}

/* ==========================================================================
   Zero-flicker suppression for identified subscribers:
   Never bother subscribers with newsletter dialogs, slide 4, or lock prompts!
   ========================================================================== */
html.is-subscriber .newsletter-prompt-backdrop,
body.is-subscriber .newsletter-prompt-backdrop,
html.is-subscriber #about,
body.is-subscriber #about,
html.is-subscriber .deck-backdrop-layer[data-backdrop-id="about"],
body.is-subscriber .deck-backdrop-layer[data-backdrop-id="about"],
html.is-subscriber .deck-hud-line[data-slide-id="about"],
body.is-subscriber .deck-hud-line[data-slide-id="about"],
html.is-subscriber .nav-item-subscribe,
body.is-subscriber .nav-item-subscribe,
html.is-subscriber .mobile-nav-subscribe,
body.is-subscriber .mobile-nav-subscribe,
html.is-subscriber .notes-subscriber-lock,
body.is-subscriber .notes-subscriber-lock {
  display: none !important;
}

html.is-subscriber .notes-compose-area,
body.is-subscriber .notes-compose-area {
  display: flex !important;
}

/* ==========================================================================
   Visitor Access Control: friend (default), family, anonymous
   Controls visibility of sections, slides, cards, and UI elements.
   ========================================================================== */

/* Elements restricted to Family only */
.visitor-family-only,
.show-for-family,
[data-visitor-access="family"] {
  display: none !important;
}
html.visitor-type-family .visitor-family-only,
body.visitor-type-family .visitor-family-only,
html.visitor-type-family .show-for-family,
body.visitor-type-family .show-for-family,
html.visitor-type-family [data-visitor-access="family"],
body.visitor-type-family [data-visitor-access="family"] {
  display: block !important;
}
html.visitor-type-family .show-for-family-flex,
body.visitor-type-family .show-for-family-flex,
html.visitor-type-family [data-visitor-access="family"][data-display="flex"],
body.visitor-type-family [data-visitor-access="family"][data-display="flex"] {
  display: flex !important;
}

/* Elements restricted to Friends only */
.visitor-friend-only,
.show-for-friends,
[data-visitor-access="friend"] {
  display: none !important;
}
html.visitor-type-friend .visitor-friend-only,
body.visitor-type-friend .visitor-friend-only,
html.visitor-type-friend .show-for-friends,
body.visitor-type-friend .show-for-friends,
html.visitor-type-friend [data-visitor-access="friend"],
body.visitor-type-friend [data-visitor-access="friend"] {
  display: block !important;
}

/* Elements restricted to Friends and Family (hidden for anonymous) */
.visitor-friends-family,
.show-for-friends-family,
[data-visitor-access="friends-family"],
[data-visitor-access="friend,family"] {
  display: none !important;
}
html.visitor-type-friend .visitor-friends-family,
body.visitor-type-friend .visitor-friends-family,
html.visitor-type-friend .show-for-friends-family,
body.visitor-type-friend .show-for-friends-family,
html.visitor-type-friend [data-visitor-access="friends-family"],
body.visitor-type-friend [data-visitor-access="friends-family"],
html.visitor-type-friend [data-visitor-access="friend,family"],
body.visitor-type-friend [data-visitor-access="friend,family"],
html.visitor-type-family .visitor-friends-family,
body.visitor-type-family .visitor-friends-family,
html.visitor-type-family .show-for-friends-family,
body.visitor-type-family .show-for-friends-family,
html.visitor-type-family [data-visitor-access="friends-family"],
body.visitor-type-family [data-visitor-access="friends-family"],
html.visitor-type-family [data-visitor-access="friend,family"],
body.visitor-type-family [data-visitor-access="friend,family"] {
  display: block !important;
}

/* Elements restricted to Anonymous visitors only */
.visitor-anonymous-only,
.show-for-anonymous,
[data-visitor-access="anonymous"] {
  display: none !important;
}
html.visitor-type-anonymous .visitor-anonymous-only,
body.visitor-type-anonymous .visitor-anonymous-only,
html.visitor-type-anonymous .show-for-anonymous,
body.visitor-type-anonymous .show-for-anonymous,
html.visitor-type-anonymous [data-visitor-access="anonymous"],
body.visitor-type-anonymous [data-visitor-access="anonymous"] {
  display: block !important;
}

/* Hide utility helpers */
html.visitor-type-anonymous .hide-for-anonymous,
body.visitor-type-anonymous .hide-for-anonymous {
  display: none !important;
}
html.visitor-type-family .hide-for-family,
body.visitor-type-family .hide-for-family {
  display: none !important;
}
html.visitor-type-friend .hide-for-friends,
body.visitor-type-friend .hide-for-friends {
  display: none !important;
}

/* ==========================================================================
   Subsequent Visit: Liquid-Glass Newsletter Invitation Dialog (Once per Session)
   ========================================================================== */
.newsletter-prompt-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(5, 10, 22, 0.52);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s;
}

.newsletter-prompt-backdrop.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.newsletter-prompt-modal {
  position: relative;
  width: 100%;
  max-width: 470px;
  max-height: calc(100dvh - 2.5rem);
  overflow-y: auto;
  padding: clamp(1.6rem, 3vw, 2.25rem) clamp(1.4rem, 2.8vw, 2.2rem);
  border-radius: 28px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.10) 0%,
    rgba(255, 255, 255, 0.02) 40%,
    rgba(11, 18, 30, 0.90) 100%
  );
  backdrop-filter: blur(32px) saturate(190%);
  -webkit-backdrop-filter: blur(32px) saturate(190%);
  border: 1px solid rgba(52, 211, 153, 0.35);
  border-top: 1.5px solid rgba(167, 243, 208, 0.7);
  box-shadow: 
    0 28px 70px rgba(0, 0, 0, 0.7),
    0 0 40px rgba(52, 211, 153, 0.18),
    inset 0 1px 1px rgba(255, 255, 255, 0.35);
  text-align: center;
  color: #ffffff;
  transform: translateY(20px) scale(0.95);
  transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
}

.newsletter-prompt-backdrop.open .newsletter-prompt-modal {
  transform: translateY(0) scale(1);
}

.newsletter-prompt-close {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.88rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.newsletter-prompt-close:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  transform: rotate(90deg);
}

.newsletter-prompt-badge {
  display: flex;
  justify-content: center;
  margin-bottom: 1.1rem;
}

.newsletter-prompt-badge-icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.28) 0%, rgba(16, 185, 129, 0.10) 100%);
  border: 1.5px solid rgba(52, 211, 153, 0.55);
  box-shadow: 0 0 24px rgba(52, 211, 153, 0.35), inset 0 0 12px rgba(52, 211, 153, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.45rem;
  color: #34d399;
}

.newsletter-prompt-header {
  margin-bottom: 1.35rem;
}

.newsletter-prompt-title {
  margin: 0 0 0.55rem 0;
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.newsletter-prompt-title .welcome-visitor-name {
  color: #34d399;
  text-shadow: 0 0 16px rgba(52, 211, 153, 0.6);
}

.newsletter-prompt-subtitle {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
}

.newsletter-prompt-form {
  width: 100%;
}

.newsletter-prompt-input-wrap {
  position: relative;
  width: 100%;
  margin-bottom: 1rem;
}

.newsletter-prompt-input-icon {
  position: absolute;
  left: 1.15rem;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.95rem;
  pointer-events: none;
  transition: color var(--transition-fast);
}

.newsletter-prompt-input {
  width: 100%;
  height: 50px;
  padding: 0 1rem 0 2.9rem;
  border-radius: 14px;
  background: rgba(5, 10, 20, 0.68);
  border: 1.5px solid rgba(255, 255, 255, 0.16);
  border-top: 1.5px solid rgba(255, 255, 255, 0.28);
  color: #ffffff;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  outline: none;
  box-sizing: border-box;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
  transition: all var(--transition-fast);
}

.newsletter-prompt-input::placeholder {
  color: #94a3b8;
}

.newsletter-prompt-input:focus {
  border-color: #34d399;
  box-shadow: 0 0 18px rgba(52, 211, 153, 0.35), inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

.newsletter-prompt-input:focus + .newsletter-prompt-input-icon,
.newsletter-prompt-input-wrap:focus-within .newsletter-prompt-input-icon {
  color: #34d399;
}

.newsletter-prompt-input.has-error {
  border-color: #f43f5e !important;
  box-shadow: 0 0 16px rgba(244, 63, 94, 0.4) !important;
}

.newsletter-prompt-feedback {
  padding: 0.65rem 0.85rem;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 500;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.newsletter-prompt-feedback.success {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(52, 211, 153, 0.4);
  color: #34d399;
}

.newsletter-prompt-feedback.error {
  background: rgba(244, 63, 94, 0.15);
  border: 1px solid rgba(244, 63, 94, 0.4);
  color: #fda4af;
}

.newsletter-prompt-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
}

.newsletter-prompt-submit-btn {
  width: 100%;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border: none;
  color: #ffffff;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.4);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.newsletter-prompt-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(16, 185, 129, 0.55);
}

.newsletter-prompt-submit-btn:active {
  transform: translateY(0);
}

.newsletter-prompt-submit-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.newsletter-prompt-dismiss-btn {
  background: transparent;
  border: none;
  padding: 0.45rem 1rem;
  color: rgba(255, 255, 255, 0.62);
  font-family: inherit;
  font-size: 0.88rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(255, 255, 255, 0.25);
  transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}

.newsletter-prompt-dismiss-btn:hover {
  color: #ffffff;
  text-decoration-color: #34d399;
}

/* Light mode overrides for newsletter prompt */
[data-theme="light"] .newsletter-prompt-backdrop {
  background: rgba(15, 23, 42, 0.35);
}

[data-theme="light"] .newsletter-prompt-modal {
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow: 0 25px 65px rgba(15, 23, 42, 0.18), 0 0 30px rgba(16, 185, 129, 0.08);
  color: #0f172a;
}

[data-theme="light"] .newsletter-prompt-title {
  color: #0f172a;
}

[data-theme="light"] .newsletter-prompt-title .welcome-visitor-name {
  color: #059669;
  text-shadow: none;
}

[data-theme="light"] .newsletter-prompt-subtitle {
  color: #475569;
}

[data-theme="light"] .newsletter-prompt-input {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #0f172a;
}

[data-theme="light"] .newsletter-prompt-input-icon {
  color: #64748b;
}

[data-theme="light"] .newsletter-prompt-close {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #64748b;
}

[data-theme="light"] .newsletter-prompt-close:hover {
  background: #e2e8f0;
  color: #0f172a;
}

[data-theme="light"] .newsletter-prompt-dismiss-btn {
  color: #64748b;
  text-decoration-color: #cbd5e1;
}

[data-theme="light"] .newsletter-prompt-dismiss-btn:hover {
  color: #0f172a;
  text-decoration-color: #059669;
}

/* ==========================================================================
   Thought Author Name Challenge Modal (Liquid-Glass)
   ========================================================================== */
.thought-name-challenge-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(5, 10, 22, 0.58);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s;
}

.thought-name-challenge-backdrop.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.thought-name-challenge-modal {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: calc(100dvh - 2.5rem);
  overflow-y: auto;
  padding: clamp(1.6rem, 3vw, 2.2rem) clamp(1.4rem, 2.8vw, 2.2rem);
  border-radius: 28px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.10) 0%,
    rgba(255, 255, 255, 0.02) 40%,
    rgba(11, 18, 30, 0.92) 100%
  );
  backdrop-filter: blur(32px) saturate(190%);
  -webkit-backdrop-filter: blur(32px) saturate(190%);
  border: 1px solid rgba(52, 211, 153, 0.35);
  border-top: 1.5px solid rgba(167, 243, 208, 0.7);
  box-shadow: 
    0 28px 70px rgba(0, 0, 0, 0.75),
    0 0 40px rgba(52, 211, 153, 0.18),
    inset 0 1px 1px rgba(255, 255, 255, 0.35);
  text-align: center;
  color: #ffffff;
  transform: translateY(20px) scale(0.95);
  transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
}

.thought-name-challenge-backdrop.open .thought-name-challenge-modal {
  transform: translateY(0) scale(1);
}

.thought-challenge-close {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.88rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.thought-challenge-close:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  transform: scale(1.08);
}

.thought-challenge-badge {
  display: flex;
  justify-content: center;
  margin-bottom: 1.1rem;
}

.thought-challenge-badge-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.25), rgba(16, 185, 129, 0.1));
  border: 1.5px solid rgba(52, 211, 153, 0.45);
  box-shadow: 0 0 24px rgba(52, 211, 153, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  color: #34d399;
}

.thought-challenge-header {
  margin-bottom: 1.35rem;
}

.thought-challenge-title {
  font-size: clamp(1.25rem, 2.2vw, 1.55rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 0.45rem;
  color: #f8fafc;
  line-height: 1.25;
}

.thought-challenge-subtitle {
  font-size: 0.88rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.68);
  max-width: 360px;
  margin: 0 auto;
}

.thought-challenge-form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.thought-challenge-input-wrap {
  position: relative;
  width: 100%;
}

.thought-challenge-input-icon {
  position: absolute;
  left: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.92rem;
  pointer-events: none;
  transition: color var(--transition-fast);
}

.thought-challenge-input {
  width: 100%;
  padding: 0.82rem 1.1rem 0.82rem 2.75rem;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #ffffff;
  font-size: 0.95rem;
  transition: all var(--transition-fast);
  outline: none;
  box-sizing: border-box;
}

.thought-challenge-input::placeholder {
  color: rgba(255, 255, 255, 0.38);
}

.thought-challenge-input:focus {
  border-color: rgba(52, 211, 153, 0.8);
  box-shadow: 0 0 16px rgba(52, 211, 153, 0.25);
  background: rgba(15, 23, 42, 0.85);
}

.thought-challenge-input:focus + .thought-challenge-input-icon,
.thought-challenge-input-wrap:focus-within .thought-challenge-input-icon {
  color: #34d399;
}

.thought-challenge-input.has-error {
  border-color: #ef4444 !important;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.35) !important;
}

/* Optional Newsletter Opt-In */
.thought-challenge-newsletter-optin {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  text-align: left;
  padding: 0.5rem 0.25rem 0.1rem;
}

.thought-challenge-checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  cursor: pointer;
  user-select: none;
}

.thought-challenge-checkbox {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.thought-challenge-checkbox-custom {
  width: 18px;
  height: 18px;
  min-width: 18px;
  border-radius: 5px;
  border: 1.5px solid rgba(52, 211, 153, 0.45);
  background: rgba(15, 23, 42, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.thought-challenge-checkbox:checked + .thought-challenge-checkbox-custom {
  background: #10b981;
  border-color: #34d399;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
}

.thought-challenge-checkbox:checked + .thought-challenge-checkbox-custom::after {
  content: '\f00c';
  font-family: 'Font Awesome 5 Free', 'Font Awesome 6 Free', sans-serif;
  font-weight: 900;
  font-size: 0.65rem;
  color: #ffffff;
}

.thought-challenge-checkbox-text {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.35;
}

.thought-challenge-email-wrap {
  position: relative;
  width: 100%;
  animation: fadeInDown 0.25s ease;
}

.thought-challenge-feedback {
  font-size: 0.84rem;
  padding: 0.6rem 0.85rem;
  border-radius: 10px;
  display: none;
  align-items: center;
  gap: 0.5rem;
  text-align: left;
  line-height: 1.4;
}

.thought-challenge-feedback.success {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(52, 211, 153, 0.35);
  color: #a7f3d0;
}

.thought-challenge-feedback.error {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #fca5a5;
}

.thought-challenge-actions {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: 0.35rem;
}

.thought-challenge-submit-btn {
  width: 100%;
  padding: 0.85rem 1.4rem;
  border-radius: 14px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border: 1px solid rgba(167, 243, 208, 0.4);
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.35);
  transition: all var(--transition-fast);
}

.thought-challenge-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.5);
  background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
}

.thought-challenge-submit-btn:active {
  transform: translateY(0);
}

.thought-challenge-submit-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none !important;
}

.thought-challenge-cancel-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0.4rem;
  transition: color var(--transition-fast);
}

.thought-challenge-cancel-btn:hover {
  color: #ffffff;
  text-decoration: underline;
}

/* ==========================================================================
   Omni Button & Admin Indicator (Floating Quick-Access for Admin Stefan)
   ========================================================================== */
.sb-omni-wrap:not(.sb-unified-dock-inner) {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 100030;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  pointer-events: auto;
  user-select: none;
}

.sb-omni-nav-row {
  display: flex;
  align-items: center;
  gap: 7px;
}

/* Logged-in Admin Status Indicator (Top of left-side stack) */
.sb-admin-indicator {
  position: relative;
  bottom: auto;
  left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 10px;
  border-radius: 9999px;
  background: linear-gradient(
    135deg,
    rgba(15, 23, 42, 0.88) 0%,
    rgba(30, 41, 59, 0.84) 100%
  );
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(52, 211, 153, 0.35);
  border-top: 1px solid rgba(52, 211, 153, 0.55);
  box-shadow: 
    0 8px 24px -4px rgba(0, 0, 0, 0.55),
    0 0 14px rgba(16, 185, 129, 0.2),
    inset 0 1px 1px rgba(255, 255, 255, 0.15);
  white-space: nowrap;
  pointer-events: auto;
  cursor: pointer;
  text-decoration: none !important;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 10;
  margin-bottom: 2px;
}

.sb-admin-indicator:hover {
  border-color: rgba(52, 211, 153, 0.65);
  box-shadow: 
    0 12px 28px -4px rgba(0, 0, 0, 0.65),
    0 0 20px rgba(16, 185, 129, 0.35),
    inset 0 1px 1px rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
}

.sb-admin-indicator-dot-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}

.sb-admin-indicator-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #10b981;
  box-shadow: 0 0 8px #10b981;
}

.sb-admin-indicator-ping {
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  background-color: rgba(16, 185, 129, 0.6);
  animation: adminStatusPing 2.2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes adminStatusPing {
  0% {
    transform: scale(0.8);
    opacity: 0.8;
  }
  70%, 100% {
    transform: scale(2.4);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sb-admin-indicator-ping {
    animation: none;
    display: none;
  }
}

.sb-admin-indicator-text {
  font-family: var(--font-body, var(--font-sans, system-ui, -apple-system, sans-serif));
  font-size: 0.74rem;
  font-weight: 700;
  color: #f8fafc;
  letter-spacing: 0.02em;
}

.sb-admin-indicator-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 9999px;
  background: rgba(220, 38, 38, 0.22);
  border: 1px solid rgba(248, 113, 113, 0.45);
  color: #fca5a5;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-left: 2px;
}

.sb-omni-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px;
  border-radius: 9999px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.16) 0%,
    rgba(16, 185, 129, 0.08) 30%,
    rgba(15, 23, 42, 0.85) 100%
  );
  backdrop-filter: blur(24px) saturate(190%);
  -webkit-backdrop-filter: blur(24px) saturate(190%);
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  border-top: 1.5px solid rgba(255, 255, 255, 0.45);
  box-shadow: 
    0 10px 28px -4px rgba(0, 0, 0, 0.6),
    0 0 16px rgba(52, 211, 153, 0.25),
    inset 0 1px 1px rgba(255, 255, 255, 0.35);
  color: #ffffff;
  font-family: var(--font-sans, system-ui, -apple-system, sans-serif);
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  outline: none;
  text-decoration: none !important;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: visible;
}

.sb-omni-btn:hover {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.22) 0%,
    rgba(16, 185, 129, 0.16) 30%,
    rgba(15, 23, 42, 0.95) 100%
  );
  border-color: rgba(52, 211, 153, 0.75);
  box-shadow: 
    0 14px 34px -4px rgba(0, 0, 0, 0.7),
    0 0 24px rgba(52, 211, 153, 0.45),
    inset 0 1px 2px rgba(255, 255, 255, 0.5);
  transform: translateY(-2px) scale(1.04);
}

.sb-omni-btn:active {
  transform: translateY(1px) scale(0.97);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.sb-omni-halo {
  position: absolute;
  inset: -3px;
  border-radius: 9999px;
  background: radial-gradient(circle, rgba(52, 211, 153, 0.45) 0%, transparent 70%);
  opacity: 0.4;
  animation: omniPulse 3s infinite ease-in-out;
  pointer-events: none;
  z-index: -1;
}

@keyframes omniPulse {
  0%, 100% {
    transform: scale(0.98);
    opacity: 0.3;
  }
  50% {
    transform: scale(1.08);
    opacity: 0.65;
  }
}

.sb-omni-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(52, 211, 153, 0.22);
  color: #6ee7b7;
  font-size: 0.76rem;
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.35);
}

.sb-omni-label {
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #f8fafc;
  text-transform: uppercase;
  font-size: 0.75rem;
}

/* Drop redundant Omni text label from admin buttons (Dashboard button retains its label) */
.sb-omni-btn:not(.sb-omni-dashboard-btn) .sb-omni-label {
  display: none !important;
}

.sb-omni-badge {
  display: inline-flex;
  align-items: center;
  padding: 2.5px 8.5px;
  border-radius: 9999px;
  background: rgba(52, 211, 153, 0.18);
  border: 1px solid rgba(52, 211, 153, 0.4);
  color: #a7f3d0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Omni Returning Visitor Button */
.sb-omni-btn.sb-omni-returning-btn {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.16) 0%,
    rgba(59, 130, 246, 0.12) 30%,
    rgba(15, 23, 42, 0.85) 100%
  );
  border-color: rgba(59, 130, 246, 0.35);
}

.sb-omni-btn.sb-omni-returning-btn .sb-omni-halo {
  background: radial-gradient(circle, rgba(59, 130, 246, 0.45) 0%, transparent 70%);
}

.sb-omni-btn.sb-omni-returning-btn .sb-omni-badge {
  background: rgba(59, 130, 246, 0.18);
  border-color: rgba(147, 197, 253, 0.4);
  color: #93c5fd;
}

.sb-omni-btn.sb-omni-returning-btn:hover {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.22) 0%,
    rgba(59, 130, 246, 0.2) 30%,
    rgba(15, 23, 42, 0.95) 100%
  );
  border-color: rgba(96, 165, 250, 0.75);
  box-shadow: 
    0 14px 34px -4px rgba(0, 0, 0, 0.7),
    0 0 24px rgba(59, 130, 246, 0.45),
    inset 0 1px 2px rgba(255, 255, 255, 0.5);
}

[data-theme="light"] .sb-omni-btn.sb-omni-returning-btn {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.96) 0%,
    rgba(239, 246, 255, 0.92) 100%
  );
  border-color: rgba(147, 197, 253, 0.8);
}

[data-theme="light"] .sb-omni-btn.sb-omni-returning-btn .sb-omni-badge {
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.3);
  color: #1d4ed8;
}

[data-theme="light"] .sb-omni-btn.sb-omni-returning-btn:hover {
  border-color: rgba(37, 99, 235, 0.6);
  box-shadow: 
    0 14px 34px -4px rgba(15, 23, 42, 0.15),
    0 0 24px rgba(59, 130, 246, 0.3);
}

/* Omni Dogs Companion Toggle Button */
.sb-omni-btn.sb-omni-dogs-btn {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(245, 158, 11, 0.14) 30%,
    rgba(15, 23, 42, 0.88) 100%
  );
  border-color: rgba(245, 158, 11, 0.38);
}

.sb-omni-btn.sb-omni-dogs-btn .sb-omni-halo {
  background: radial-gradient(circle, rgba(245, 158, 11, 0.45) 0%, transparent 70%);
}

.sb-omni-btn.sb-omni-dogs-btn .sb-omni-icon {
  background: rgba(245, 158, 11, 0.22);
  color: #fbbf24;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.35);
}

.sb-omni-btn.sb-omni-dogs-btn .sb-omni-badge {
  background: rgba(245, 158, 11, 0.18);
  border-color: rgba(252, 211, 77, 0.4);
  color: #fde68a;
}

.sb-omni-btn.sb-omni-dogs-btn:hover {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.24) 0%,
    rgba(245, 158, 11, 0.22) 30%,
    rgba(15, 23, 42, 0.95) 100%
  );
  border-color: rgba(245, 158, 11, 0.85);
  box-shadow: 
    0 14px 34px -4px rgba(0, 0, 0, 0.7),
    0 0 24px rgba(245, 158, 11, 0.45),
    inset 0 1px 2px rgba(255, 255, 255, 0.5);
}

/* Hidden / Muted Dogs State */
.sb-omni-btn.sb-omni-dogs-btn.is-dogs-hidden {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(239, 68, 68, 0.08) 30%,
    rgba(15, 23, 42, 0.88) 100%
  );
  border-color: rgba(248, 113, 113, 0.35);
}

.sb-omni-btn.sb-omni-dogs-btn.is-dogs-hidden .sb-omni-halo {
  opacity: 0.12;
  background: radial-gradient(circle, rgba(239, 68, 68, 0.3) 0%, transparent 70%);
}

.sb-omni-btn.sb-omni-dogs-btn.is-dogs-hidden .sb-omni-icon {
  background: rgba(239, 68, 68, 0.18);
  color: #f87171;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.25);
}

.sb-omni-btn.sb-omni-dogs-btn.is-dogs-hidden .sb-omni-badge {
  background: rgba(239, 68, 68, 0.18);
  border-color: rgba(248, 113, 113, 0.4);
  color: #fca5a5;
}

[data-theme="light"] .sb-omni-btn.sb-omni-dogs-btn {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.96) 0%,
    rgba(254, 243, 199, 0.92) 100%
  );
  border-color: rgba(245, 158, 11, 0.5);
  color: #1e293b;
}

[data-theme="light"] .sb-omni-btn.sb-omni-dogs-btn .sb-omni-label {
  color: #1e293b;
}

[data-theme="light"] .sb-omni-btn.sb-omni-dogs-btn .sb-omni-badge {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(217, 119, 6, 0.4);
  color: #b45309;
}

[data-theme="light"] .sb-omni-btn.sb-omni-dogs-btn:hover {
  border-color: rgba(217, 119, 6, 0.8);
  box-shadow: 
    0 14px 34px -4px rgba(15, 23, 42, 0.15),
    0 0 24px rgba(245, 158, 11, 0.35);
}

[data-theme="light"] .sb-omni-btn.sb-omni-dogs-btn.is-dogs-hidden {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.96) 0%,
    rgba(254, 226, 226, 0.92) 100%
  );
  border-color: rgba(239, 68, 68, 0.45);
}

[data-theme="light"] .sb-omni-btn.sb-omni-dogs-btn.is-dogs-hidden .sb-omni-badge {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(220, 38, 38, 0.3);
  color: #b91c1c;
}

/* Omni Master Mute Button (Floating Quick-Access on Left) */
.sb-omni-btn.sb-omni-mute-btn {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(56, 189, 248, 0.14) 30%,
    rgba(15, 23, 42, 0.88) 100%
  );
  border-color: rgba(56, 189, 248, 0.38);
}

.sb-omni-btn.sb-omni-mute-btn .sb-omni-halo {
  background: radial-gradient(circle, rgba(56, 189, 248, 0.45) 0%, transparent 70%);
}

.sb-omni-btn.sb-omni-mute-btn .sb-omni-icon {
  background: rgba(56, 189, 248, 0.22);
  color: #38bdf8;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.35);
}

.sb-omni-btn.sb-omni-mute-btn .sb-omni-badge {
  background: rgba(56, 189, 248, 0.18);
  border-color: rgba(56, 189, 248, 0.4);
  color: #bae6fd;
}

.sb-omni-btn.sb-omni-mute-btn:hover {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.24) 0%,
    rgba(56, 189, 248, 0.22) 30%,
    rgba(15, 23, 42, 0.95) 100%
  );
  border-color: rgba(56, 189, 248, 0.85);
  box-shadow: 
    0 14px 34px -4px rgba(0, 0, 0, 0.7),
    0 0 24px rgba(56, 189, 248, 0.45),
    inset 0 1px 2px rgba(255, 255, 255, 0.5);
}

/* Active Omni Muted State */
.sb-omni-btn.sb-omni-mute-btn.is-muted,
body.is-omni-muted .sb-omni-btn.sb-omni-mute-btn {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(239, 68, 68, 0.18) 30%,
    rgba(15, 23, 42, 0.92) 100%
  );
  border-color: rgba(248, 113, 113, 0.55);
}

.sb-omni-btn.sb-omni-mute-btn.is-muted .sb-omni-halo,
body.is-omni-muted .sb-omni-btn.sb-omni-mute-btn .sb-omni-halo {
  opacity: 0.35;
  background: radial-gradient(circle, rgba(239, 68, 68, 0.45) 0%, transparent 70%);
}

.sb-omni-btn.sb-omni-mute-btn.is-muted .sb-omni-icon,
body.is-omni-muted .sb-omni-btn.sb-omni-mute-btn .sb-omni-icon {
  background: rgba(239, 68, 68, 0.24);
  color: #f87171;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.4);
}

.sb-omni-btn.sb-omni-mute-btn.is-muted .sb-omni-badge,
body.is-omni-muted .sb-omni-btn.sb-omni-mute-btn .sb-omni-badge {
  background: rgba(239, 68, 68, 0.22);
  border-color: rgba(248, 113, 113, 0.5);
  color: #fca5a5;
  font-weight: 700;
}

[data-theme="light"] .sb-omni-btn.sb-omni-mute-btn {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(224, 242, 254, 0.92) 100%);
  border-color: rgba(56, 189, 248, 0.5);
  color: #1e293b;
}

[data-theme="light"] .sb-omni-btn.sb-omni-mute-btn.is-muted {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(254, 226, 226, 0.92) 100%);
  border-color: rgba(239, 68, 68, 0.45);
}

[data-theme="light"] .sb-omni-btn.sb-omni-mute-btn.is-muted .sb-omni-badge {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(220, 38, 38, 0.3);
  color: #b91c1c;
}

/* Visitor Switcher Divider and Mute Button */
.visitor-switcher-divider {
  width: 80%;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  margin: 4px auto;
  border-radius: 9999px;
}

.visitor-switcher-btn.visitor-switcher-mute-btn {
  border-color: rgba(56, 189, 248, 0.28);
}

.visitor-switcher-btn.visitor-switcher-mute-btn:hover {
  border-color: rgba(56, 189, 248, 0.65);
  background: rgba(56, 189, 248, 0.12);
}

.visitor-switcher-btn.visitor-switcher-mute-btn.is-muted,
body.is-omni-muted .visitor-switcher-btn.visitor-switcher-mute-btn {
  border-color: rgba(239, 68, 68, 0.45) !important;
  background: rgba(239, 68, 68, 0.15) !important;
}

.visitor-switcher-btn.visitor-switcher-mute-btn.is-muted .switcher-btn-icon,
body.is-omni-muted .visitor-switcher-btn.visitor-switcher-mute-btn .switcher-btn-icon {
  color: #f87171 !important;
}

.visitor-switcher-btn.visitor-switcher-mute-btn.is-muted .switcher-btn-text,
body.is-omni-muted .visitor-switcher-btn.visitor-switcher-mute-btn .switcher-btn-text {
  color: #fca5a5 !important;
}

/* Mobile drawer Omni mute button */
.mobile-omni-mute-btn.is-muted {
  border-color: rgba(239, 68, 68, 0.45) !important;
  color: #f87171 !important;
}

/* Omni Hero Night Test Button in Left Rail Dock */
.visitor-switcher-btn.sb-omni-hero-night-btn {
  border-color: rgba(167, 139, 250, 0.28);
}
.visitor-switcher-btn.sb-omni-hero-night-btn:hover {
  border-color: rgba(167, 139, 250, 0.65);
  background: rgba(167, 139, 250, 0.12);
}
.visitor-switcher-btn.sb-omni-hero-night-btn.is-active,
body.hero-night-active .visitor-switcher-btn.sb-omni-hero-night-btn {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.85) 0%, rgba(139, 92, 246, 0.95) 100%) !important;
  border-color: rgba(196, 181, 253, 0.75) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.45), 0 0 12px rgba(167, 139, 250, 0.35) !important;
}
.visitor-switcher-btn.sb-omni-hero-night-btn.is-active .switcher-btn-icon,
body.hero-night-active .visitor-switcher-btn.sb-omni-hero-night-btn .switcher-btn-icon {
  color: #ffffff !important;
}
.mobile-omni-heronight-btn.is-active,
body.hero-night-active .mobile-omni-heronight-btn {
  border-color: rgba(196, 181, 253, 0.75) !important;
  color: #c4b5fd !important;
}

/* Global suppression when dogs are toggled off by visitor */
html.sb-dogs-disabled body #dog-companions-root,
html.sb-dogs-disabled body #enzo-companion-root,
html.sb-dogs-disabled body .enzo-character-wrap,
html.sb-dogs-disabled body .enzo-speech-bubble,
html.sb-dogs-disabled body .dog-floating-treat-btn,
body.sb-dogs-disabled #dog-companions-root,
body.sb-dogs-disabled #enzo-companion-root,
body.sb-dogs-disabled .enzo-character-wrap,
body.sb-dogs-disabled .enzo-speech-bubble,
body.sb-dogs-disabled .dog-floating-treat-btn {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html.sb-dogs-disabled body .mobile-dog-dock {
  display: none !important;
}

/* Omni-present Site-Wide Floating Theme Toggle Button */
.sb-floating-theme-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.16) 0%,
    rgba(16, 185, 129, 0.08) 30%,
    rgba(15, 23, 42, 0.85) 100%
  ) !important;
  backdrop-filter: blur(24px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(190%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.22) !important;
  border-top: 1.5px solid rgba(255, 255, 255, 0.45) !important;
  box-shadow: 
    0 10px 28px -4px rgba(0, 0, 0, 0.6),
    0 0 16px rgba(52, 211, 153, 0.25),
    inset 0 1px 1px rgba(255, 255, 255, 0.35) !important;
  color: #fbbf24 !important;
  font-size: 1rem !important;
  cursor: pointer !important;
  outline: none !important;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.22s ease,
              border-color 0.22s ease,
              background 0.22s ease,
              color 0.2s ease !important;
  overflow: visible !important;
}

.sb-floating-theme-btn:hover {
  transform: scale(1.18) translateY(-2px) rotate(15deg) !important;
  border-color: rgba(52, 211, 153, 0.75) !important;
  box-shadow: 
    0 14px 34px -4px rgba(0, 0, 0, 0.7),
    0 0 24px rgba(52, 211, 153, 0.5),
    inset 0 1px 2px rgba(255, 255, 255, 0.5) !important;
  color: #fef08a !important;
}

.sb-floating-theme-btn:active {
  transform: scale(0.94) !important;
  transition: transform 0.08s ease !important;
}

[data-theme="light"] .sb-floating-theme-btn {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(241, 245, 249, 0.88) 100%
  ) !important;
  border-color: rgba(15, 23, 42, 0.16) !important;
  border-top-color: rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 10px 24px -4px rgba(0, 0, 0, 0.15), 0 0 14px rgba(16, 185, 129, 0.2) !important;
  color: #d97706 !important;
}

[data-theme="light"] .sb-floating-theme-btn:hover {
  border-color: rgba(16, 185, 129, 0.6) !important;
  color: #b45309 !important;
}

/* Mobile Drawer Omni Trigger */
.mobile-omni-visitor-btn {
  background: rgba(16, 185, 129, 0.12) !important;
  border: 1px solid rgba(52, 211, 153, 0.35) !important;
  color: #6ee7b7 !important;
}

.mobile-omni-visitor-btn:hover {
  background: rgba(16, 185, 129, 0.25) !important;
  border-color: rgba(52, 211, 153, 0.65) !important;
  color: #a7f3d0 !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .sb-omni-wrap {
    bottom: 16px;
    left: 14px;
    gap: 6px;
  }
  .sb-admin-indicator {
    padding: 4px 10px 4px 8px;
    gap: 6px;
    margin-bottom: 1px;
  }
  .sb-admin-indicator-text {
    font-size: 0.70rem;
  }
  .sb-admin-indicator-badge {
    font-size: 0.58rem;
    padding: 1px 5px;
  }
  .sb-omni-btn {
    padding: 5px 12px;
    gap: 6px;
    font-size: 0.78rem;
  }
  .sb-omni-badge {
    display: none;
  }
}

/* ==========================================================================
   Comprehensive Light Mode Component Overrides
   ========================================================================== */

/* Theme Toggle Button */
.theme-toggle-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 3px 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fbbf24;
  font-size: 0.92rem;
  line-height: 1;
  transition: transform 0.2s ease, color 0.2s ease;
  border-radius: 6px;
  outline: none;
}
.theme-toggle-btn:hover {
  transform: scale(1.18) rotate(15deg);
}
.theme-toggle-btn:focus-visible {
  outline: 2px solid var(--color-primary-light);
}

[data-theme="light"] .theme-toggle-btn {
  color: #475569;
}
[data-theme="light"] .theme-toggle-btn:hover {
  color: #0f172a;
}

.mobile-theme-toggle-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.45rem 0.85rem !important;
  border-radius: var(--radius-xs, 6px) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #fbbf24 !important;
  font-size: 1.1rem !important;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.mobile-theme-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.16) !important;
}

[data-theme="light"] .mobile-theme-toggle-btn {
  background: rgba(15, 23, 42, 0.06) !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
  color: #475569 !important;
}

[data-theme="light"] .mobile-nav-languages .lang-btn {
  background: rgba(15, 23, 42, 0.05) !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
  color: #334155 !important;
}
[data-theme="light"] .mobile-nav-languages .lang-btn:hover {
  background: rgba(15, 23, 42, 0.10) !important;
  color: #0f172a !important;
}

/* 1. Header & Floating Island */
[data-theme="light"] .brand-name-prefix,
[data-theme="light"] .brand-name-suffix,
[data-theme="light"] .site-brand {
  color: #0f172a;
}

[data-theme="light"] .nav-island:hover,
[data-theme="light"] .nav-island:focus-within,
[data-theme="light"] .site-header:hover .nav-island,
[data-theme="light"] .site-header.is-hovered .nav-island {
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  border-top: 1.5px solid rgba(255, 255, 255, 0.95) !important;
  border-left: 1.2px solid rgba(255, 255, 255, 0.8) !important;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.25) 0%,
    rgba(241, 245, 249, 0.22) 100%
  ) !important;
  box-shadow: 
    0 12px 32px -4px rgba(15, 23, 42, 0.10),
    0 2px 6px rgba(15, 23, 42, 0.05),
    inset 0 1px 1.5px 0 rgba(255, 255, 255, 0.9),
    0 0 16px rgba(5, 150, 105, 0.12) !important;
}

.nav-island:hover .nav-inline-languages,
.nav-island:focus-within .nav-inline-languages,
.site-header:hover .nav-inline-languages,
.site-header.is-hovered .nav-inline-languages {
  max-width: 145px !important;
}

[data-theme="light"] .nav-toggle-btn {
  color: #0f172a;
}

/* 2. Hero Slide Quotes & Scrim */
[data-theme="light"] .hero-slide {
  background: #f8fafc;
}

[data-theme="light"] .hero-video-wrapper {
  opacity: 0.18;
  filter: contrast(1.1) saturate(0.85);
  transition: opacity 0.6s ease, filter 0.6s ease;
}

[data-theme="light"] .hero-gradient-overlay {
  background: radial-gradient(
    circle at 50% 45%,
    rgba(248, 250, 252, 0.65) 0%,
    rgba(241, 245, 249, 0.82) 55%,
    rgba(226, 232, 240, 0.95) 100%
  ) !important;
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
}

[data-theme="light"] .hero-center-content .hero-title {
  background: linear-gradient(135deg, #0f172a 30%, #047857 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 10px rgba(15, 23, 42, 0.08));
}

[data-theme="light"] .hero-quote {
  color: #1e293b;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.9);
  font-weight: 450;
}

[data-theme="light"] .hero-quote-author {
  color: #047857;
  font-weight: 600;
  text-shadow: none;
}

/* 3. Bento Grid & Cards (Apple / Stripe Editorial Solid Whites & Layered Elevations) */
[data-theme="light"] .bento-card {
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 8px 24px -4px rgba(15, 23, 42, 0.05);
  color: #0f172a;
}

[data-theme="light"] .bento-card:hover {
  border-color: #a7f3d0 !important;
  box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.03), 0 16px 36px -6px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(5, 150, 105, 0.25) !important;
}

[data-theme="light"] .bento-title {
  color: #0f172a;
  font-weight: 700;
}

[data-theme="light"] .bento-desc {
  color: #475569;
  line-height: 1.45;
}

[data-theme="light"] .bento-tag {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #64748b;
  font-weight: 600;
}

[data-theme="light"] .bento-card:hover .bento-tag {
  background: transparent !important;
  border: none !important;
  color: #0f172a;
}

[data-theme="light"] .bento-tag-coming-soon {
  color: #64748b;
  font-style: italic;
  opacity: 0.85;
}

[data-theme="light"] .bento-arrow {
  display: none !important;
}

/* Category Badge Pills on Bento Cards */
[data-theme="light"] .bento-card.theme-emerald .bento-icon-box {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}

[data-theme="light"] .bento-card.theme-cyan .bento-icon-box {
  background: #f0f9ff;
  color: #0284c7;
  border: 1px solid #bae6fd;
}

[data-theme="light"] .bento-card.theme-purple .bento-icon-box {
  background: #f5f3ff;
  color: #6d28d9;
  border: 1px solid #ddd6fe;
}

[data-theme="light"] .bento-card.theme-amber .bento-icon-box {
  background: #fffbeb;
  color: #b45309;
  border: 1px solid #fde68a;
}

/* 4. In-Deck Category Explorer & Article Reader */
[data-theme="light"] .category-active-title {
  color: #0f172a;
  background: linear-gradient(135deg, #0f172a 40%, #059669 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-theme="light"] .category-active-badge.theme-emerald {
  background: #ecfdf5;
  color: #047857;
  border-color: #a7f3d0;
}

[data-theme="light"] .category-active-badge.theme-cyan {
  background: #f0f9ff;
  color: #0284c7;
  border-color: #bae6fd;
}

[data-theme="light"] .category-active-badge.theme-purple {
  background: #f5f3ff;
  color: #6d28d9;
  border-color: #ddd6fe;
}

[data-theme="light"] .category-active-badge.theme-amber {
  background: #fffbeb;
  color: #b45309;
  border-color: #fde68a;
}

[data-theme="light"] .category-back-btn,
[data-theme="light"] .blog-reader-back-btn {
  background: #ffffff;
  border: 1px solid rgba(203, 213, 225, 0.9);
  color: #0f172a;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}

[data-theme="light"] .category-back-btn:hover,
[data-theme="light"] .blog-reader-back-btn:hover {
  background: #ecfdf5;
  border-color: #059669;
  color: #047857;
}

[data-theme="light"] .blog-reader-card {
  background: #ffffff !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  box-shadow: 0 20px 60px -15px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(15, 23, 42, 0.03) !important;
}

[data-theme="light"] .blog-reader-title,
[data-theme="light"] h1.blog-reader-title,
[data-theme="light"] #features-reader-title,
[data-theme="light"] #blog-reader-title,
[data-theme="light"] .blog-reader-card h1 {
  color: #0f172a !important;
}

[data-theme="light"] .blog-reader-date {
  color: #047857 !important;
}

[data-theme="light"] .blog-reader-reading-time {
  color: #64748b !important;
}

[data-theme="light"] .blog-reader-meta-dot {
  color: #94a3b8 !important;
}

[data-theme="light"] .blog-reader-body {
  color: #334155 !important;
}

[data-theme="light"] .blog-reader-body p {
  color: #334155 !important;
}

[data-theme="light"] .blog-reader-body h1,
[data-theme="light"] .blog-reader-body h2,
[data-theme="light"] .blog-reader-body h3,
[data-theme="light"] .blog-reader-body h4,
[data-theme="light"] .blog-reader-body h5,
[data-theme="light"] .blog-reader-body h6 {
  color: #0f172a !important;
}

[data-theme="light"] .blog-reader-body a {
  color: #059669 !important;
}

[data-theme="light"] .blog-reader-body blockquote {
  background: #ecfdf5 !important;
  color: #1e293b !important;
  border-left-color: #059669 !important;
}

[data-theme="light"] .blog-reader-meta {
  color: #64748b !important;
}

[data-theme="light"] .blog-reader-source-btn {
  background: #f1f5f9 !important;
  border-color: rgba(203, 213, 225, 0.8) !important;
  color: #0f172a !important;
}

[data-theme="light"] .blog-reader-source-btn:hover {
  background: #ecfdf5 !important;
  border-color: #059669 !important;
  color: #047857 !important;
}

[data-theme="light"] .blog-reader-print-btn {
  background: #f1f5f9 !important;
  border-color: rgba(203, 213, 225, 0.8) !important;
  color: #0f172a !important;
}

[data-theme="light"] .blog-reader-print-btn .print-btn-title {
  color: #0f172a !important;
}

[data-theme="light"] .blog-reader-print-btn:hover {
  background: #ecfdf5 !important;
  border-color: #059669 !important;
  color: #047857 !important;
}

[data-theme="light"] .blog-reader-print-btn:hover .print-btn-title {
  color: #047857 !important;
}


[data-theme="light"] .blog-reader-header-meta {
  color: #64748b !important;
}

[data-theme="light"] .blog-reader-next-card {
  background: #f8fafc !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
}
[data-theme="light"] .next-card-label {
  color: #059669 !important;
}
[data-theme="light"] .next-card-title {
  color: #0f172a !important;
}
[data-theme="light"] .next-card-meta {
  color: #64748b !important;
}

/* Light Mode overrides for Single Post, Page, and Archive templates */
[data-theme="light"] .single-post-article,
[data-theme="light"] .page-article {
  background: #ffffff !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  box-shadow: 0 20px 60px -15px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(15, 23, 42, 0.03) !important;
}

[data-theme="light"] .single-post-title,
[data-theme="light"] h1.single-post-title,
[data-theme="light"] .page-title,
[data-theme="light"] h1.page-title,
[data-theme="light"] .archive-title,
[data-theme="light"] h1.archive-title {
  color: #0f172a !important;
}

[data-theme="light"] .single-post-meta,
[data-theme="light"] .single-post-meta time,
[data-theme="light"] .archive-description {
  color: #64748b !important;
}

[data-theme="light"] .single-post-content,
[data-theme="light"] .page-content {
  color: #334155 !important;
}

[data-theme="light"] .single-post-content p,
[data-theme="light"] .page-content p {
  color: #334155 !important;
}

[data-theme="light"] .single-post-content h1,
[data-theme="light"] .single-post-content h2,
[data-theme="light"] .single-post-content h3,
[data-theme="light"] .single-post-content h4,
[data-theme="light"] .single-post-content h5,
[data-theme="light"] .single-post-content h6,
[data-theme="light"] .page-content h1,
[data-theme="light"] .page-content h2,
[data-theme="light"] .page-content h3,
[data-theme="light"] .page-content h4,
[data-theme="light"] .page-content h5,
[data-theme="light"] .page-content h6 {
  color: #0f172a !important;
}

[data-theme="light"] .single-post-content a,
[data-theme="light"] .page-content a {
  color: #059669 !important;
}

[data-theme="light"] .single-post-content a:hover,
[data-theme="light"] .page-content a:hover {
  color: #047857 !important;
}

[data-theme="light"] .single-post-content blockquote,
[data-theme="light"] .page-content blockquote {
  background: #ecfdf5 !important;
  color: #1e293b !important;
  border-left-color: #059669 !important;
}

[data-theme="light"] .single-post-content code,
[data-theme="light"] .page-content code {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

[data-theme="light"] .single-post-content pre,
[data-theme="light"] .page-content pre {
  background: #f8fafc !important;
  color: #0f172a !important;
  border: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .back-btn {
  color: #059669 !important;
}

[data-theme="light"] .back-btn:hover {
  color: #047857 !important;
}

[data-theme="light"] .back-paw-badge {
  background: rgba(5, 150, 105, 0.12) !important;
  color: #047857 !important;
  border-color: rgba(5, 150, 105, 0.25) !important;
}

/* 5. Slide 3 Recent Articles & Timeline Track */
[data-theme="light"] .timeline-date-capsule {
  background: transparent;
  border: none;
  color: #0f172a;
  box-shadow: none;
}

[data-theme="light"] #blog-timeline-sticky-capsule,
[data-theme="light"] #category-timeline-sticky-capsule,
[data-theme="light"] .timeline-date-capsule.is-sticky-floating {
  background: transparent;
  border: none;
  box-shadow: none;
  color: #0f172a;
}

[data-theme="light"] .timeline-date-text {
  color: #0f172a;
}

[data-theme="light"] .timeline-cal-icon,
[data-theme="light"] .timeline-paw-icon {
  color: #059669;
}

[data-theme="light"] .blog-tab-btn {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(203, 213, 225, 0.9);
  color: #475569;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

[data-theme="light"] .blog-tab-btn:hover {
  background: #ffffff;
  color: #0f172a;
  border-color: #94a3b8;
}

[data-theme="light"] .blog-tab-btn.active {
  background: #059669;
  border-color: #047857;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.3);
}

[data-theme="light"] .blog-card {
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 8px 24px -4px rgba(15, 23, 42, 0.05);
}

[data-theme="light"] .blog-card:hover {
  border-color: #a7f3d0;
  box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.03), 0 16px 32px -6px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(5, 150, 105, 0.25);
}

[data-theme="light"] .blog-card-title,
[data-theme="light"] .blog-card-title a {
  color: #0f172a;
}

[data-theme="light"] .blog-card-title a:hover {
  color: #059669;
}

[data-theme="light"] .blog-card-excerpt {
  color: #475569;
}

[data-theme="light"] .blog-card-meta {
  color: #64748b;
}

[data-theme="light"] .blog-card-meta span {
  color: #64748b;
}

[data-theme="light"] .blog-card-category {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}

[data-theme="light"] .blog-card-explore-btn {
  background: #ecfdf5;
  color: #047857;
  border-color: #a7f3d0;
}

[data-theme="light"] .blog-card-explore-btn:hover {
  background: #059669;
  border-color: #047857;
  color: #ffffff;
}

/* Light Theme Private: PURPLE */
[data-theme="light"] .article-badge-private {
  background: rgba(243, 232, 255, 0.95);
  color: #6b21a8;
  border-color: rgba(168, 85, 247, 0.5);
  box-shadow: 0 2px 8px rgba(147, 51, 234, 0.12);
}
[data-theme="light"] .article-badge-private i {
  color: #7e22ce;
}

/* Light Theme Family: RED */
[data-theme="light"] .article-badge-family {
  background: rgba(254, 226, 226, 0.95);
  color: #b91c1c;
  border-color: rgba(239, 68, 68, 0.5);
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.12);
}
[data-theme="light"] .article-badge-family i {
  color: #dc2626;
}

/* Light Theme Friends: ORANGE */
[data-theme="light"] .article-badge-friends {
  background: rgba(255, 237, 213, 0.95);
  color: #c2410c;
  border-color: rgba(249, 115, 22, 0.5);
  box-shadow: 0 2px 8px rgba(234, 88, 12, 0.12);
}
[data-theme="light"] .article-badge-friends i {
  color: #ea580c;
}

/* Light Theme Public: GREEN */
[data-theme="light"] .article-badge-public {
  background: rgba(209, 250, 229, 0.95);
  color: #047857;
  border-color: rgba(16, 185, 129, 0.5);
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.12);
}
[data-theme="light"] .article-badge-public i {
  color: #059669;
}

/* Light Theme Topics: LIGHT GREEN */
[data-theme="light"] .article-badge-favorite,
[data-theme="light"] .article-badge-tag {
  background: rgba(220, 252, 231, 0.95);
  color: #15803d;
  border-color: rgba(74, 222, 128, 0.55);
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.12);
}
[data-theme="light"] .article-badge-favorite i,
[data-theme="light"] .article-badge-tag i {
  color: #16a34a;
}

/* 6. Slide 4 About & Newsletter */
[data-theme="light"] .about-card {
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(15, 23, 42, 0.03);
  color: #0f172a;
}

[data-theme="light"] .about-badge {
  background: #f0f9ff;
  border-color: #bae6fd;
  color: #0284c7;
}

[data-theme="light"] .about-title {
  background: linear-gradient(180deg, #0f172a 40%, #1e293b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-theme="light"] .about-desc {
  color: #334155;
  text-shadow: none;
}

[data-theme="light"] .newsletter-input {
  background: #ffffff;
  border: 1px solid rgba(203, 213, 225, 0.9);
  color: #0f172a;
}

[data-theme="light"] .newsletter-input::placeholder {
  color: #94a3b8;
}

[data-theme="light"] .newsletter-input:focus {
  border-color: #059669;
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.15);
}

[data-theme="light"] .newsletter-features-row {
  color: #475569;
  text-shadow: none;
}

[data-theme="light"] .newsletter-feat-item {
  color: #475569;
}

[data-theme="light"] .newsletter-feat-item i {
  color: #059669;
  filter: none;
}

/* 7. Slide 5 Contact */
[data-theme="light"] .contact-status-badge {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #047857;
}

[data-theme="light"] .contact-action-card {
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

[data-theme="light"] .contact-action-card:hover {
  background: #ffffff;
  border-color: #a7f3d0;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .contact-label {
  color: #64748b;
}

[data-theme="light"] .contact-val {
  color: #0f172a;
}

[data-theme="light"] .contact-icon-pill {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.25);
}

[data-theme="light"] .contact-form-card {
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.08);
  color: #0f172a;
}

[data-theme="light"] .contact-card-badge {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #047857;
}

[data-theme="light"] .contact-form-title {
  color: #0f172a;
}

[data-theme="light"] .topics-label {
  color: #64748b;
}

[data-theme="light"] .topic-pill span {
  background: #f1f5f9;
  border-color: rgba(203, 213, 225, 0.8);
  color: #475569;
}

[data-theme="light"] .topic-pill:hover span {
  background: #e2e8f0;
  color: #0f172a;
}

[data-theme="light"] .topic-pill.active span,
[data-theme="light"] .topic-pill input[type="radio"]:checked + span {
  background: #ecfdf5;
  border-color: #059669;
  color: #047857;
  box-shadow: 0 2px 6px rgba(5, 150, 105, 0.15);
}

[data-theme="light"] .floating-input {
  background: #ffffff;
  border: 1px solid rgba(203, 213, 225, 0.9);
  color: #0f172a;
}

[data-theme="light"] .floating-label {
  color: #64748b;
}

[data-theme="light"] .floating-input:focus ~ .floating-label,
[data-theme="light"] .floating-input:not(:placeholder-shown) ~ .floating-label {
  color: #059669;
}

[data-theme="light"] .char-count {
  color: #64748b;
}

/* Omni Floating Music Pill in Light Mode */
[data-theme="light"] .sb-omni-btn {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.96) 0%,
    rgba(241, 245, 249, 0.92) 100%
  );
  border: 1.5px solid rgba(203, 213, 225, 0.9);
  border-top: 1.5px solid rgba(255, 255, 255, 0.98);
  box-shadow: 
    0 10px 25px -4px rgba(15, 23, 42, 0.10),
    0 0 16px rgba(5, 150, 105, 0.15),
    inset 0 1px 1px rgba(255, 255, 255, 0.9);
  color: #0f172a;
}

[data-theme="light"] .sb-omni-btn:hover {
  background: #ffffff;
  border-color: rgba(5, 150, 105, 0.6);
  box-shadow: 
    0 12px 30px -4px rgba(15, 23, 42, 0.14),
    0 0 20px rgba(5, 150, 105, 0.25);
}

[data-theme="light"] .sb-omni-label {
  color: #0f172a;
}

[data-theme="light"] .sb-omni-icon {
  color: #059669;
}

[data-theme="light"] .sb-omni-badge {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}

/* 8. Command Palette Modal */
[data-theme="light"] .command-palette {
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(15, 23, 42, 0.12);
  box-shadow: 0 25px 60px rgba(15, 23, 42, 0.16);
}

[data-theme="light"] .command-palette-search-box {
  border-bottom: 1px solid rgba(15, 23, 42, 0.10);
}

[data-theme="light"] .command-palette-input {
  color: #0f172a;
}

[data-theme="light"] .command-palette-input::placeholder {
  color: #94a3b8;
}

[data-theme="light"] .kbd-badge {
  background: rgba(15, 23, 42, 0.08);
  color: #475569;
  border: 1px solid rgba(15, 23, 42, 0.12);
}

[data-theme="light"] .command-item {
  color: #0f172a;
}

[data-theme="light"] .command-item:hover,
[data-theme="light"] .command-item.selected {
  background: rgba(5, 150, 105, 0.08);
  color: #047857;
}

[data-theme="light"] .command-palette-footer {
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  color: #64748b;
}

/* 9. Welcome Onboarding Modal */
[data-theme="light"] .welcome-modal-backdrop {
  background: rgba(15, 23, 42, 0.16);
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
}

[data-theme="light"] .welcome-modal {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.78) 0%,
    rgba(255, 255, 255, 0.58) 45%,
    rgba(241, 245, 249, 0.70) 100%
  );
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-top: 1.5px solid rgba(255, 255, 255, 0.95);
  border-left: 1.2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 
    0 20px 50px rgba(0, 0, 0, 0.08),
    0 0 30px rgba(52, 211, 153, 0.12),
    inset 0 1px 2px rgba(255, 255, 255, 0.95);
}

[data-theme="light"] .welcome-modal.is-returning {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.82) 0%,
    rgba(241, 245, 249, 0.72) 100%
  );
  border: 1.5px solid rgba(5, 150, 105, 0.4);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12), 0 0 32px rgba(5, 150, 105, 0.18);
}

[data-theme="light"] .welcome-modal.is-returning .welcome-visitor-name {
  color: #059669;
  text-shadow: none;
}

[data-theme="light"] .welcome-title {
  color: #0f172a;
}

[data-theme="light"] .welcome-subtitle {
  color: #475569;
}

[data-theme="light"] .welcome-input {
  background: rgba(255, 255, 255, 0.70);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1.5px solid rgba(15, 23, 42, 0.15);
  border-top: 1.5px solid rgba(255, 255, 255, 0.9);
  color: #0f172a;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .welcome-mood-card {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(15, 23, 42, 0.10);
  color: #0f172a;
}

[data-theme="light"] .welcome-mood-card:hover {
  background: rgba(5, 150, 105, 0.08);
  border-color: #059669;
}

[data-theme="light"] .mood-title {
  color: #0f172a;
}

[data-theme="light"] .mood-track {
  color: #64748b;
}

[data-theme="light"] .welcome-modal-close,
[data-theme="light"] .welcome-skip-btn {
  color: #64748b;
}

[data-theme="light"] .welcome-btn-secondary,
[data-theme="light"] .welcome-skip-text {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  color: #64748b;
  text-decoration-color: transparent;
}

[data-theme="light"] .welcome-btn-secondary:hover,
[data-theme="light"] .welcome-skip-text:hover {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #0f172a;
  text-decoration-color: rgba(15, 23, 42, 0.45);
}

[data-theme="light"] .welcome-btn-secondary:active,
[data-theme="light"] .welcome-skip-text:active {
  color: #059669;
}

[data-theme="light"] .welcome-nav-island.is-expanded,
[data-theme="light"] .welcome-nav-island:hover,
[data-theme="light"] .welcome-nav-island:focus-within,
[data-theme="light"] .welcome-stage-header:hover .welcome-nav-island {
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  border-top: 1.5px solid rgba(255, 255, 255, 0.95) !important;
  border-left: 1.2px solid rgba(255, 255, 255, 0.8) !important;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.96) 0%,
    rgba(241, 245, 249, 0.92) 100%
  ) !important;
  box-shadow: 
    0 16px 36px -4px rgba(0, 0, 0, 0.12),
    0 2px 6px rgba(0, 0, 0, 0.05),
    inset 0 1px 1.5px 0 rgba(255, 255, 255, 0.9),
    0 0 20px rgba(52, 211, 153, 0.15) !important;
}

/* 10. Mobile Drawer */
[data-theme="light"] .mobile-nav-drawer {
  background: rgba(255, 255, 255, 0.97);
  border-left: 1px solid rgba(15, 23, 42, 0.10);
  color: #0f172a;
}

[data-theme="light"] .mobile-drawer-title {
  color: #0f172a !important;
}

[data-theme="light"] .mobile-nav-close {
  color: #0f172a !important;
}

[data-theme="light"] .mobile-nav-subscribe {
  color: #0f172a !important;
}

/* ==========================================================================
   Dog Companions Overlay - Always rendered in front of welcome onboarding modal
   ========================================================================== */
#enzo-companion-root,
#dog-companions-root {
  z-index: 100010 !important;
}

.enzo-character-wrap {
  z-index: 100020 !important;
}

.dog-paw-print {
  z-index: 100015 !important;
}

.enzo-speech-bubble {
  z-index: 100025 !important;
}

.enzo-particle,
.dog-flying-treat,
.sleep-z-particle {
  z-index: 100040 !important;
}

/* ==========================================================================
   Omnipresent Admin Dashboard Button (Replaces WP Admin Bar)
   ========================================================================== */
.sb-omni-dashboard-wrap {
  position: fixed;
  top: 1rem;
  right: 1.25rem;
  z-index: 99990;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem;
  border-radius: var(--radius-full, 9999px);
  background: rgba(10, 15, 29, 0.78);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(52, 211, 153, 0.32);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45), 0 0 12px rgba(16, 185, 129, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: auto;
  user-select: none;
}

.sb-omni-dashboard-wrap:hover {
  border-color: rgba(52, 211, 153, 0.7);
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.55), 0 0 20px rgba(16, 185, 129, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.sb-omni-dashboard-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 8px 16px;
  border-radius: var(--radius-full, 9999px);
  text-decoration: none !important;
  color: #f1f5f9;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sb-omni-dashboard-btn:hover {
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.65);
  box-shadow: 0 14px 34px -4px rgba(0, 0, 0, 0.7), 0 0 20px rgba(56, 189, 248, 0.35);
  transform: translateY(-2px) scale(1.04);
}

.sb-omni-dashboard-icon,
.sb-omni-dashboard-btn .sb-omni-wp-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s ease;
}

.sb-omni-dashboard-btn:hover .sb-omni-dashboard-icon,
.sb-omni-dashboard-btn:hover .sb-omni-wp-icon {
  transform: rotate(25deg) scale(1.15);
  background: rgba(56, 189, 248, 0.38);
  color: #7dd3fc;
}

.sb-omni-wp-icon-svg {
  display: block;
  fill: currentColor;
}

.sb-omni-home-btn,
.sb-omni-wrap .sb-omni-home-btn,
.sb-omni-edit-btn,
.sb-omni-wrap .sb-omni-edit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.16) 0%,
    rgba(56, 189, 248, 0.1) 30%,
    rgba(15, 23, 42, 0.85) 100%
  );
  backdrop-filter: blur(24px) saturate(190%);
  -webkit-backdrop-filter: blur(24px) saturate(190%);
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  border-top: 1.5px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 10px 28px -4px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.35);
  color: #94a3b8;
  font-size: 0.85rem;
  text-decoration: none !important;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sb-omni-home-btn:hover,
.sb-omni-wrap .sb-omni-home-btn:hover,
.sb-omni-edit-btn:hover,
.sb-omni-wrap .sb-omni-edit-btn:hover {
  background: rgba(56, 189, 248, 0.25);
  border-color: rgba(56, 189, 248, 0.7);
  color: #38bdf8;
  transform: translateY(-2px) scale(1.08);
  box-shadow: 0 14px 34px -4px rgba(0, 0, 0, 0.7), 0 0 20px rgba(56, 189, 248, 0.4);
}

.sb-omni-home-btn:active,
.sb-omni-wrap .sb-omni-home-btn:active,
.sb-omni-edit-btn:active,
.sb-omni-wrap .sb-omni-edit-btn:active {
  transform: translateY(1px) scale(0.96);
}

/* Light Theme Support */
[data-theme="light"] .sb-omni-dashboard-wrap {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(5, 150, 105, 0.28);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08), 0 0 12px rgba(16, 185, 129, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

[data-theme="light"] .sb-omni-dashboard-wrap:hover {
  border-color: rgba(5, 150, 105, 0.6);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.12), 0 0 18px rgba(16, 185, 129, 0.25);
}

[data-theme="light"] .sb-omni-dashboard-btn {
  color: #0f172a;
}

[data-theme="light"] .sb-omni-dashboard-btn:hover {
  color: #0284c7;
  border-color: rgba(2, 132, 199, 0.6);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 0 18px rgba(2, 132, 199, 0.25);
}

[data-theme="light"] .sb-omni-dashboard-icon,
[data-theme="light"] .sb-omni-dashboard-btn .sb-omni-wp-icon {
  background: rgba(2, 132, 199, 0.14);
  color: #0284c7;
}

[data-theme="light"] .sb-omni-dashboard-btn:hover .sb-omni-dashboard-icon,
[data-theme="light"] .sb-omni-dashboard-btn:hover .sb-omni-wp-icon {
  background: rgba(2, 132, 199, 0.25);
  color: #0369a1;
}

[data-theme="light"] .sb-omni-home-btn,
[data-theme="light"] .sb-omni-wrap .sb-omni-home-btn,
[data-theme="light"] .sb-omni-edit-btn,
[data-theme="light"] .sb-omni-wrap .sb-omni-edit-btn {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(0, 0, 0, 0.12);
  color: #475569;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .sb-omni-home-btn:hover,
[data-theme="light"] .sb-omni-wrap .sb-omni-home-btn:hover,
[data-theme="light"] .sb-omni-edit-btn:hover,
[data-theme="light"] .sb-omni-wrap .sb-omni-edit-btn:hover {
  background: rgba(2, 132, 199, 0.12);
  border-color: #0284c7;
  color: #0284c7;
  box-shadow: 0 6px 20px rgba(2, 132, 199, 0.2);
}

[data-theme="light"] .sb-admin-indicator {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.94) 0%,
    rgba(241, 245, 249, 0.92) 100%
  );
  border-color: rgba(5, 150, 105, 0.35);
  border-top-color: rgba(5, 150, 105, 0.55);
  box-shadow: 
    0 6px 20px -2px rgba(0, 0, 0, 0.08),
    0 0 12px rgba(16, 185, 129, 0.15),
    inset 0 1px 1px rgba(255, 255, 255, 0.8);
}

[data-theme="light"] .sb-admin-indicator:hover {
  border-color: rgba(5, 150, 105, 0.65);
  box-shadow: 
    0 8px 24px -2px rgba(0, 0, 0, 0.12),
    0 0 16px rgba(16, 185, 129, 0.25);
}

[data-theme="light"] .sb-admin-indicator-text {
  color: #0f172a;
}

[data-theme="light"] .sb-admin-indicator-badge {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(5, 150, 105, 0.32);
  color: #059669;
}

/* Mobile Screens (<= 768px): Compact Circular Button */
@media (max-width: 768px) {
  .sb-omni-dashboard-wrap {
    top: calc(0.45rem + env(safe-area-inset-top, 0px));
    right: calc(0.5rem + env(safe-area-inset-right, 0px));
    padding: 0;
    gap: 0;
  }
  .sb-omni-dashboard-btn {
    padding: 0;
    width: 36px;
    height: 36px;
    justify-content: center;
  }
  .sb-omni-dashboard-label {
    display: none;
  }
  .sb-omni-dashboard-icon {
    width: 28px;
    height: 28px;
  }
}

/* ==========================================================================
   Print Stylesheet for Clean Article & Page Printing
   ========================================================================== */
@media print {
  @page {
    size: auto;
    margin: 0; /* Suppresses browser default header (title/date) and footer (URL/page numbers) */
  }

  /* Hide all non-printable chrome: navigation, deck controls, HUD, audio, dogs, modals, widgets */
  .site-header,
  header.site-header,
  .nav-island,
  .welcome-stage-header,
  .welcome-nav-island,
  .deck-section-indicators,
  .deck-copyright,
  .deck-persistent-backdrop,
  .sb-omni-wrap,
  .sb-omni-dashboard-wrap,
  #wpadminbar,
  .paw-cursor-glow,
  #paw-cursor-glow,
  .dog-companion-container,
  #enzo-companion-root,
  #dog-companions-root,
  .enzo-character-wrap,
  .dog-summon-btn,
  .dog-summon-bar,
  .music-dock-wrap,
  .music-vinyl-container,
  .music-player,
  #ambientMusicPlayer,
  #ambientMusicDock,
  .welcome-modal-backdrop,
  .newsletter-prompt-backdrop,
  .command-palette-backdrop,
  .mobile-nav-drawer,
  .mobile-nav-overlay,
  .blog-reader-back-btn,
  .blog-reader-notes-col,
  .blog-reader-source-wrap,
  .blog-reader-print-wrap,
  .blog-reader-translation-wrap,
  .blog-reader-next-card,
  .timeline-scroll-to-latest-btn,
  .timeline-scroll-next-btn,
  .timeline-date-capsule,
  .slick-green-scroller-hr,
  .blog-reader-header-bar,
  .blog-reader-progress-wrap,
  .notes-trigger-card,
  .notes-panel,
  .bento-grid,
  .features-categories-view,
  .features-articles-view,
  .hero-slide,
  .deck-slide:not(.active),
  .back-btn,
  .single-post-top-nav,
  .single-post-print-btn,
  .blog-reader-print-btn,
  .notes-actions-row,
  .notes-feedback,
  .toast-container,
  .blog-reader-img-placeholder,
  /* Hide all admin visibility, rights, tier selectors, and tag buttons in print */
  .sb-viewer-access-group,
  .single-post-access-group,
  .blog-reader-access-group,
  .sb-viewer-tier-btn,
  .article-admin-add-tag-btn,
  #single-post-add-tag-btn,
  #blog-reader-add-tag-btn,
  .sb-article-tag-popover,
  .article-badge-remove-btn,
  .sb-section-visibility-badge,
  .section-visibility-badge,
  .item-access-badges,
  .item-topic-badges,
  .blog-reader-badges,
  .blog-card-badges,
  .photos-gate-card {
    display: none !important;
  }

  /* When an article reader is open, hide the background timeline grid, categories, and section header */
  body.is-article-open .blog-grid-view,
  body.is-article-open .features-categories-view,
  body.is-article-open .features-articles-view,
  body.is-article-open .section-header,
  body.is-article-open .blog-timeline-wrapper {
    display: none !important;
  }

  /* Reset layout constraints so multi-page content flows naturally without clipping */
  html, body {
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
    position: static !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #111827 !important;
    font-size: 11pt !important;
    line-height: 1.6 !important;
    padding: 1.5cm 1.8cm !important;
    box-sizing: border-box !important;
  }

  .deck-viewport,
  .deck-slider,
  .deck-slide,
  .deck-container,
  .sb-spa-content,
  .blog-reader-view,
  .blog-reader-view.is-active,
  .blog-reader-stage,
  .blog-reader-article-wrap,
  .single-post-wrapper,
  .single-post-article,
  .spotlight-card,
  .blog-reader-card,
  .features-reader-card {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
    transform: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .spotlight-card::before,
  .spotlight-card::after,
  .blog-reader-card::before,
  .blog-reader-card::after,
  .single-post-article::before,
  .single-post-article::after {
    display: none !important;
    content: none !important;
  }

  /* Reset reader sticky header so it doesn't print as a solid dark block or obscure text */
  .blog-reader-article-header,
  .single-post-header {
    position: static !important;
    background: transparent !important;
    background-color: transparent !important;
    padding: 0 !important;
    margin: 0 0 1rem 0 !important;
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
  }

  .blog-reader-meta,
  .single-post-meta {
    display: block !important;
    margin-bottom: 0.4rem !important;
  }

  .blog-reader-layout {
    display: block !important;
  }

  .blog-reader-media-col {
    display: block !important;
    max-width: 240px !important;
    margin: 0 0 1.25rem 1.5rem !important;
    float: right !important;
    padding-top: 0 !important;
  }

  /* If there is no real image or only a placeholder, hide media column completely */
  .blog-reader-media-col:has(.blog-reader-img-placeholder[style*="display: flex"]),
  .blog-reader-media-col:has(img[style*="display: none"]),
  .blog-reader-img-placeholder {
    display: none !important;
  }

  .blog-reader-img-wrap {
    max-height: 200px !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    border: 1px solid #e2e8f0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .blog-reader-img,
  .single-post-featured-image {
    max-height: 200px !important;
    object-fit: contain !important;
    border-radius: 6px !important;
    box-shadow: none !important;
  }

  .single-post-featured-image {
    display: block !important;
    max-width: 240px !important;
    float: right !important;
    margin: 0 0 1.25rem 1.5rem !important;
  }

  .blog-reader-content-col {
    width: 100% !important;
    color: #111827 !important;
  }

  .blog-reader-title,
  .single-post-title {
    color: #000000 !important;
    font-size: 20pt !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    margin: 0 0 0.5rem 0 !important;
  }

  .blog-reader-date,
  .single-post-meta time {
    color: #4b5563 !important;
    font-size: 10pt !important;
    font-family: inherit !important;
    margin: 0 0 0.4rem 0 !important;
    display: block !important;
  }

  .blog-reader-body,
  .single-post-content {
    color: #1f2937 !important;
    font-size: 11pt !important;
    line-height: 1.7 !important;
  }

  .blog-reader-body p,
  .single-post-content p {
    color: #1f2937 !important;
    margin-bottom: 1rem !important;
  }

  .blog-reader-body a,
  .single-post-content a {
    color: #059669 !important;
    text-decoration: underline !important;
  }

  /* Page break rules for clean document structure */
  h1, h2, h3, h4 {
    page-break-after: avoid;
    break-after: avoid;
  }

  p, blockquote {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Article Print Source Block (QR Code & Source URL) */
  .article-print-source {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 1.25rem !important;
    margin: 2rem 0 1rem 0 !important;
    padding: 1rem 1.25rem !important;
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  .print-source-qr {
    width: 96px !important;
    height: 96px !important;
    min-width: 96px !important;
    background: #ffffff !important;
    padding: 4px !important;
    border: 1px solid #94a3b8 !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  .print-source-qr svg,
  .print-source-qr canvas:not([style*="display: none"]),
  .print-source-qr img:not([style*="display: none"]) {
    display: block !important;
    width: 86px !important;
    height: 86px !important;
    max-width: 86px !important;
    max-height: 86px !important;
    shape-rendering: crispEdges !important;
  }

  .print-source-details {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.25rem !important;
    min-width: 0 !important;
  }

  .print-source-badge {
    display: inline-block !important;
    font-size: 8pt !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #475569 !important;
  }

  .print-source-title {
    font-size: 11pt !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    line-height: 1.3 !important;
    margin-bottom: 2px !important;
  }

  .print-source-url {
    font-family: 'JetBrains Mono', monospace, Consolas, Courier !important;
    font-size: 8.5pt !important;
    color: #0369a1 !important;
    text-decoration: underline !important;
    word-break: break-all !important;
    line-height: 1.4 !important;
  }

  .print-source-origin-note {
    font-size: 8pt !important;
    color: #64748b !important;
    margin-top: 2px !important;
  }

  .print-source-hint {
    font-size: 7.5pt !important;
    font-style: italic !important;
    color: #64748b !important;
    margin-top: 2px !important;
  }
}

/* ==========================================================================
   PHOTOS SECTION - SELECTED PHOTO ALBUMS (FAMILY & FRIENDS GATEWAY)
   Section 4: Curated Photo Gateway
   ========================================================================== */

.photos-gateway-slide {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.photos-gateway-slide .deck-container {
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1080px;
  height: 100%;
  max-height: 100vh;
  transform: none !important;
}

.backdrop-albums {
  background: radial-gradient(circle at 60% 40%, rgba(6, 78, 59, 0.45) 0%, rgba(2, 6, 23, 0.95) 100%),
              url('../images/cropped-IMG_9981-rotated-1.jpg') center/cover no-repeat;
  filter: blur(30px) brightness(0.32);
  transform: scale(1.08);
}

/* Header & Eyebrow */
.photos-header {
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.photos-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.5rem;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 4px 12px;
  border-radius: 9999px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 0.78rem;
  flex-wrap: wrap;
}

.photos-status-dot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 8px;
  height: 8px;
}

.photos-ping {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(52, 211, 153, 0.45);
  animation: adminPulse 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.photos-dot {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.8);
}

.photos-badge {
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #a7f3d0;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.photos-access-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 600;
  transition: all 0.25s ease;
}

.photos-access-pill.unlocked {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #6ee7b7;
}

.photos-access-pill.unlocked i {
  color: #10b981;
}

.photos-access-pill.access-admin,
.photos-access-pill.unlocked:has(.fa-crown) {
  background: rgba(220, 38, 38, 0.18) !important;
  border: 1px solid rgba(239, 68, 68, 0.45) !important;
  color: #fca5a5 !important;
}

.photos-access-pill.access-admin i,
.photos-access-pill.unlocked:has(.fa-crown) i {
  color: #ef4444 !important;
}

.photos-access-pill.locked {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #fcd34d;
}

.photos-access-pill.public,
.photos-access-pill.access-anonymous {
  background: rgba(14, 165, 233, 0.15);
  border: 1px solid rgba(14, 165, 233, 0.35);
  color: #7dd3fc;
  cursor: pointer;
}

.photos-access-pill.public i,
.photos-access-pill.access-anonymous i {
  color: #38bdf8;
}

.photos-access-pill.public:hover,
.photos-access-pill.access-anonymous:hover {
  background: rgba(14, 165, 233, 0.25);
  border-color: rgba(14, 165, 233, 0.55);
  transform: translateY(-1px);
}

.photo-album-card.is-role-hidden {
  display: none !important;
}

.photos-admin-toggle-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #cbd5e1;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 0.72rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: all 0.2s ease;
}

.photos-admin-toggle-btn:hover {
  background: rgba(16, 185, 129, 0.2);
  border-color: rgba(16, 185, 129, 0.4);
  color: #a7f3d0;
}

.photos-admin-toggle-btn.is-previewing {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.4);
  color: #fca5a5;
}

.photos-header {
  margin-bottom: clamp(0.35rem, 0.8vh, 0.65rem);
  flex-shrink: 0;
  width: 100%;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.photos-title-row {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.85rem !important;
  flex-wrap: wrap !important;
  width: auto !important;
  max-width: 100% !important;
  margin-bottom: 0.35rem !important;
  text-align: center !important;
  position: relative !important;
}

.photos-title-wrap {
  text-align: center;
  display: inline-flex;
  align-items: center;
}

.photos-title-wrap .section-title,
.photos-title-row .section-title,
.photos-header .section-title {
  font-size: clamp(2.65rem, 4.56vw, 4.1rem) !important;
  margin: 0 !important;
  text-align: center !important;
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 0.35rem !important;
  line-height: 1.2 !important;
}

.photos-title-row .section-title .sb-section-visibility-badge {
  align-self: center !important;
}

/* Firehose Section Header Item Count in Brackets */
.section-title .firehose-items-count,
.photos-title-row .firehose-items-count,
.firehose-items-count {
  display: inline-flex !important;
  align-self: baseline !important;
  vertical-align: baseline !important;
  font-size: clamp(0.75rem, 1.1vw, 1rem) !important;
  font-weight: 600 !important;
  font-family: var(--font-heading, 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-variant-numeric: lining-nums tabular-nums !important;
  font-feature-settings: "lnum" 1, "tnum" 1 !important;
  letter-spacing: 0.01em !important;
  line-height: 1 !important;
  padding: 0 0 0 0.25rem !important;
  margin: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: rgba(255, 255, 255, 0.55) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.55) !important;
  user-select: none !important;
  transition: color 0.2s ease !important;
}

.section-title .firehose-items-count *,
.photos-title-row .firehose-items-count *,
.firehose-items-count * {
  display: inline !important;
  -webkit-text-fill-color: currentColor !important;
  text-fill-color: currentColor !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.firehose-items-count .firehose-count-num {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
  font-weight: inherit !important;
  font-size: inherit !important;
}

.firehose-items-count .firehose-count-label {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
  font-weight: 500 !important;
  font-size: inherit !important;
  letter-spacing: normal !important;
  white-space: nowrap !important;
  margin-left: 0.35em !important;
}

.firehose-items-count.is-omitting-seen {
  color: rgba(56, 189, 248, 0.75) !important;
  -webkit-text-fill-color: rgba(56, 189, 248, 0.75) !important;
}

@media (max-height: 760px) {
  .photos-title-wrap .section-title,
  .photos-title-row .section-title,
  .photos-header .section-title {
    font-size: clamp(2.4rem, 5.76vh, 3.12rem) !important;
  }
}

@media (max-height: 560px) {
  .photos-title-wrap .section-title,
  .photos-title-row .section-title,
  .photos-header .section-title {
    font-size: 2.2rem !important;
  }
}

/* Category Filter Tabs Bar (Dropped - Timeline is chronological) */
.photos-filter-bar {
  display: none !important;
}

.photos-filter-tabs {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 3px 5px;
  border-radius: 9999px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.photos-tab-btn {
  background: transparent;
  border: 1px solid transparent;
  color: #94a3b8;
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.photos-tab-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
  color: #f1f5f9;
}

.photos-tab-btn.active {
  background: linear-gradient(135deg, rgba(5, 150, 105, 0.35) 0%, rgba(16, 185, 129, 0.22) 100%);
  border-color: rgba(52, 211, 153, 0.5);
  color: #ffffff;
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.25);
}

.photos-tab-btn.active i {
  color: #34d399;
}

.photos-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.2rem;
  padding: 0 5px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.08);
  color: #94a3b8;
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  font-weight: 700;
  transition: all 0.2s ease;
}

.photos-tab-btn.active .photos-tab-count {
  background: rgba(16, 185, 129, 0.35);
  color: #a7f3d0;
  border: 1px solid rgba(52, 211, 153, 0.4);
}

.photos-actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

@media (max-width: 860px) {
  .photos-title-row {
    flex-wrap: wrap;
    gap: 0.65rem;
  }
  .photos-filter-bar {
    order: 3;
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 2px;
  }
  .photos-filter-tabs {
    flex-wrap: nowrap;
    white-space: nowrap;
  }
}

/* Firehose, Recent Articles, Recent Photos & Recent Videos Timeline Sliding Wrappers (Reduced by 100px) */
.photos-timeline-wrapper,
.blog-timeline-wrapper {
  position: relative;
  width: 100%;
  max-width: 1060px;
  margin: 0 auto;
  display: flex !important;
  align-items: center !important;
  height: clamp(320px, calc(63vh - 100px), 470px) !important;
  max-height: clamp(320px, calc(63vh - 100px), 470px) !important;
  min-height: 0;
}

.photos-timeline-viewport,
.blog-timeline-viewport,
.category-timeline-viewport {
  position: relative;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: var(--radius-md);
  touch-action: pan-y;
  user-select: none;
  height: 100% !important;
  min-height: 0 !important;
  /* At start (default): Left edge not feathered, right edge feathered */
  -webkit-mask-image: linear-gradient(
    to right,
    #000 0%,
    #000 calc(100% - clamp(16px, 2vw, 28px)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    #000 0%,
    #000 calc(100% - clamp(16px, 2vw, 28px)),
    transparent 100%
  );
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Scrolled past start: Both left and right edges feathered */
.photos-timeline-viewport.is-scrolled,
.blog-timeline-viewport.is-scrolled,
.category-timeline-viewport.is-scrolled {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 clamp(16px, 2vw, 28px),
    #000 calc(100% - clamp(16px, 2vw, 28px)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 clamp(16px, 2vw, 28px),
    #000 calc(100% - clamp(16px, 2vw, 28px)),
    transparent 100%
  );
}

/* At end: Left edge feathered, right edge not feathered */
.photos-timeline-viewport.is-scrolled.is-at-end,
.blog-timeline-viewport.is-scrolled.is-at-end,
.category-timeline-viewport.is-scrolled.is-at-end {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 clamp(16px, 2vw, 28px),
    #000 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 clamp(16px, 2vw, 28px),
    #000 100%
  );
}

/* Content fits without overflow: Neither edge feathered */
.photos-timeline-viewport.is-at-start.is-at-end,
.blog-timeline-viewport.is-at-start.is-at-end,
.category-timeline-viewport.is-at-start.is-at-end {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

.photos-timeline-track,
.blog-timeline-track {
  display: flex;
  width: 100%;
  will-change: transform;
  align-items: stretch;
  height: 100% !important;
  min-height: 0 !important;
}

.photos-timeline-page,
.blog-timeline-page {
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  box-sizing: border-box;
  opacity: 1;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  height: 100% !important;
  min-height: 0 !important;
  content-visibility: auto;
  contain-intrinsic-size: 100vw 480px;
}

.photos-timeline-grid,
.blog-timeline-wrapper .blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.55rem, 1.1vh, 0.85rem);
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  max-height: none;
  overflow: hidden;
  align-items: stretch;
  padding: 0.25rem 0.35rem;
  height: 100% !important;
  min-height: 0 !important;
}

/* ==========================================================================
   FIREHOSE SCROLLER: 10% Wider Viewport & 20% Narrower Items (4-Column Layout)
   - Widen Firehose scroller by 10% (wrapper 1166px, viewport/grid 1078px)
   - Reduce item width by ~20% (4 columns per page, ~260px each)
   ========================================================================== */
#firehose .photos-timeline-wrapper,
#photos.photos-gateway-slide .photos-timeline-wrapper,
#photos-timeline-wrapper,
#blog-timeline-wrapper,
#recent-photos-timeline-wrapper,
#recent-videos-timeline-wrapper,
#blog .photos-timeline-wrapper,
#recent-photos .photos-timeline-wrapper,
#recent-videos .photos-timeline-wrapper {
  max-width: 1166px !important;
}

#firehose .photos-timeline-viewport,
#photos.photos-gateway-slide .photos-timeline-viewport,
#photos-timeline-viewport,
#blog-timeline-viewport,
#recent-photos-timeline-viewport,
#recent-videos-timeline-viewport,
#blog .photos-timeline-viewport,
#recent-photos .photos-timeline-viewport,
#recent-videos .photos-timeline-viewport {
  max-width: 1078px !important;
}

#firehose .slick-green-scroller-hr,
#photos.photos-gateway-slide .slick-green-scroller-hr,
#photos-timeline-viewport .slick-green-scroller-hr,
#blog .slick-green-scroller-hr,
#recent-photos .slick-green-scroller-hr,
#recent-videos .slick-green-scroller-hr {
  max-width: 1078px !important;
}

#firehose .photos-timeline-grid,
#photos.photos-gateway-slide .photos-timeline-grid,
#photos-timeline-viewport .photos-timeline-grid,
#blog .photos-timeline-grid,
#recent-photos .photos-timeline-grid,
#recent-videos .photos-timeline-grid,
#blog-timeline-wrapper .blog-grid,
#recent-photos-timeline-wrapper .blog-grid,
#recent-videos-timeline-wrapper .blog-grid {
  max-width: 1078px !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: clamp(0.42rem, 0.8vw, 0.72rem) !important;
}

#firehose .photos-bottom-topics-dock,
#photos.photos-gateway-slide .photos-bottom-topics-dock,
#blog .photos-bottom-topics-dock,
#recent-photos .photos-bottom-topics-dock,
#recent-videos .photos-bottom-topics-dock {
  max-width: 1056px !important;
}

#firehose .timeline-scroll-to-latest-btn,
#photos.photos-gateway-slide .timeline-scroll-to-latest-btn,
#photos-timeline-wrapper .timeline-scroll-to-latest-btn,
#blog-timeline-wrapper .timeline-scroll-to-latest-btn,
#recent-photos-timeline-wrapper .timeline-scroll-to-latest-btn,
#recent-videos-timeline-wrapper .timeline-scroll-to-latest-btn {
  left: 6px !important;
}

#firehose .timeline-scroll-next-btn,
#photos.photos-gateway-slide .timeline-scroll-next-btn,
#photos-timeline-wrapper .timeline-scroll-next-btn,
#blog-timeline-wrapper .timeline-scroll-next-btn,
#recent-photos-timeline-wrapper .timeline-scroll-next-btn,
#recent-videos-timeline-wrapper .timeline-scroll-next-btn {
  right: 6px !important;
}

@media (max-width: 1200px) {
  #firehose .timeline-scroll-to-latest-btn,
  #photos.photos-gateway-slide .timeline-scroll-to-latest-btn,
  #photos-timeline-wrapper .timeline-scroll-to-latest-btn {
    left: 4px !important;
  }
  #firehose .timeline-scroll-next-btn,
  #photos.photos-gateway-slide .timeline-scroll-next-btn,
  #photos-timeline-wrapper .timeline-scroll-next-btn {
    right: 4px !important;
  }
}

@media (max-width: 900px) {
  #firehose .photos-timeline-grid,
  #photos.photos-gateway-slide .photos-timeline-grid,
  #photos-timeline-viewport .photos-timeline-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 640px) {
  #firehose .photos-timeline-grid,
  #photos.photos-gateway-slide .photos-timeline-grid,
  #photos-timeline-viewport .photos-timeline-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Reduced column width when filtered in Firehose */
#firehose .photos-timeline-track.is-topic-filtered .timeline-column,
#firehose .photos-timeline-track.is-seen-filtered .timeline-column,
#photos.photos-gateway-slide .photos-timeline-track.is-topic-filtered .timeline-column,
#photos.photos-gateway-slide .photos-timeline-track.is-seen-filtered .timeline-column,
#photos-timeline-track.is-topic-filtered .timeline-column,
#photos-timeline-track.is-seen-filtered .timeline-column {
  flex: 0 0 clamp(220px, 17vw, 256px) !important;
  width: clamp(220px, 17vw, 256px) !important;
  max-width: clamp(220px, 17vw, 256px) !important;
}

.photos-timeline-wrapper .timeline-column,
.blog-timeline-wrapper .timeline-column {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  height: 100% !important;
  min-height: 0 !important;
}

.photos-timeline-wrapper .timeline-col-cards,
.blog-timeline-wrapper .timeline-col-cards {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  height: 100% !important;
  min-height: 0 !important;
  gap: clamp(0.55rem, 1.1vh, 0.85rem) !important;
}

/* Photo Timeline Track Empty Card Slots: invisible space placeholder */
.photos-timeline-wrapper .timeline-empty-card-slot,
.photos-timeline-grid .timeline-empty-card-slot,
.photos-timeline-track .timeline-empty-card-slot,
.blog-timeline-wrapper .timeline-empty-card-slot {
  flex: 1 1 0% !important;
  width: 100% !important;
  min-height: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  border: none !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

/* Cards inside 2-Row Timeline Track */
.photos-timeline-wrapper .photo-album-card,
.blog-timeline-wrapper .blog-card {
  position: relative;
  flex: 1 1 0% !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: clamp(130px, 17vh, 210px) !important;
  height: 100% !important;
  margin: 0 !important;
  border-radius: var(--radius-md) !important;
  background: var(--color-surface-card) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--color-border-glass) !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
  overflow: hidden !important;
  transition: transform var(--transition-smooth), border-color var(--transition-smooth), box-shadow var(--transition-smooth) !important;
}

.photos-timeline-wrapper .photo-album-card:hover,
.photos-timeline-wrapper .photo-album-card:focus-visible,
.blog-timeline-wrapper .blog-card:hover,
.blog-timeline-wrapper .blog-card:focus-visible {
  transform: translateY(-3px) !important;
  border-color: rgba(52, 211, 153, 0.4) !important;
  box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.6), 0 0 20px rgba(52, 211, 153, 0.15) !important;
}

/* Tactile Click/Press & Selection Glow for Firehose Timeline Cards */
.photos-timeline-wrapper .photo-album-card:active,
.photos-timeline-wrapper .photo-album-card.firehose-card-activating,
.photo-album-card.firehose-card-activating,
.recent-photo-timeline-card.firehose-card-activating,
.recent-video-timeline-card.firehose-card-activating {
  transform: scale(0.965) translateY(1px) !important;
  border-color: rgba(52, 211, 153, 0.85) !important;
  box-shadow: 0 0 28px rgba(16, 185, 129, 0.55), 0 8px 24px rgba(0, 0, 0, 0.6) !important;
  transition: transform 0.12s cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 0.15s ease,
              box-shadow 0.15s ease !important;
  z-index: 10 !important;
}

.photo-album-card.firehose-card-activating::after,
.recent-photo-timeline-card.firehose-card-activating::after,
.recent-video-timeline-card.firehose-card-activating::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at center, rgba(52, 211, 153, 0.25) 0%, transparent 70%);
  opacity: 1;
  pointer-events: none;
  animation: sbCardPulse 0.4s ease-out forwards;
}

@keyframes sbCardPulse {
  0% { opacity: 0; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.02); }
  100% { opacity: 0.6; transform: scale(1); }
}

/* Firehose Article Morph Transition Overlay */
.firehose-article-morph-overlay {
  position: fixed;
  inset: 0;
  z-index: 100070;
  pointer-events: none;
}

.firehose-article-morph-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 7, 13, 0.85);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  opacity: 0;
  transition: opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

.firehose-article-morph-overlay.is-animating .firehose-article-morph-backdrop {
  opacity: 1;
}

.firehose-article-morph-card {
  position: fixed;
  z-index: 2;
  background: rgba(14, 21, 33, 0.92);
  backdrop-filter: blur(28px) saturate(190%);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  border: 1px solid rgba(52, 211, 153, 0.45);
  border-radius: var(--radius-md, 16px);
  box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.75), 0 0 30px rgba(16, 185, 129, 0.3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  transition: top 0.34s cubic-bezier(0.16, 1, 0.3, 1),
              left 0.34s cubic-bezier(0.16, 1, 0.3, 1),
              width 0.34s cubic-bezier(0.16, 1, 0.3, 1),
              height 0.34s cubic-bezier(0.16, 1, 0.3, 1),
              border-radius 0.34s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.22s ease;
  will-change: top, left, width, height, border-radius, opacity;
}

.firehose-article-morph-card.is-expanded {
  box-shadow: 0 30px 80px -15px rgba(0, 0, 0, 0.9), 0 0 45px rgba(16, 185, 129, 0.25);
  border-radius: 20px;
}

.firehose-article-morph-overlay.is-finished {
  opacity: 0;
  transition: opacity 0.22s ease-out;
}

.firehose-article-morph-card .morph-card-inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  transition: all 0.34s cubic-bezier(0.16, 1, 0.3, 1);
}

.firehose-article-morph-card.is-expanded .morph-card-inner {
  display: grid;
  grid-template-columns: clamp(140px, 16vw, 175px) 1fr;
  gap: clamp(1.25rem, 1.8vw, 2rem);
  align-items: start;
  padding: clamp(1.25rem, 2.5vw, 2.25rem);
}

.firehose-article-morph-card .morph-card-media-col {
  width: 100%;
  flex: 0 0 auto;
}

.firehose-article-morph-card.is-expanded .morph-card-media-col {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  align-self: start;
  width: 100%;
  z-index: 10;
}

.firehose-article-morph-card .morph-card-thumb-wrap {
  position: relative;
  width: 100%;
  height: clamp(98px, 12.5vh, 124px);
  overflow: hidden;
  background: #090e18;
  border-radius: var(--radius-md, 12px) var(--radius-md, 12px) 0 0;
  transition: all 0.34s cubic-bezier(0.16, 1, 0.3, 1);
}

.firehose-article-morph-card.is-expanded .morph-card-thumb-wrap {
  aspect-ratio: 16 / 10;
  height: auto;
  max-height: 120px;
  border-radius: var(--radius-md, 12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.65), 0 0 25px rgba(52, 211, 153, 0.12);
}

.firehose-article-morph-card .morph-card-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.firehose-article-morph-card.is-expanded .morph-card-thumb {
  border-radius: var(--radius-md, 12px);
}

.firehose-article-morph-card .morph-card-placeholder {
  width: 100%;
  height: 100%;
  min-height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  color: rgba(255, 255, 255, 0.45);
  background: linear-gradient(135deg, #0b1528 0%, #064e3b 100%);
}

.firehose-article-morph-card .morph-card-content-col {
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
  transition: all 0.34s cubic-bezier(0.16, 1, 0.3, 1);
}

.firehose-article-morph-card.is-expanded .morph-card-content-col {
  padding: 0;
}

.firehose-article-morph-card .morph-card-badges {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.firehose-article-morph-card .morph-card-title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  line-height: 1.25;
  letter-spacing: -0.02em;
  transition: font-size 0.34s cubic-bezier(0.16, 1, 0.3, 1);
}

.firehose-article-morph-card.is-expanded .morph-card-title {
  font-size: clamp(1.15rem, 1.55vw, 1.4rem);
  font-weight: 800;
}

.firehose-article-morph-card .morph-card-date {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--color-primary-light);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.photo-album-card:not(.has-card-content) .blog-card-content,
.photo-album-card:not(.has-card-content) .album-card-content {
  display: none !important;
}

.photos-timeline-wrapper .photo-album-card:not(.has-card-content) .blog-thumb-wrap,
.blog-timeline-wrapper .blog-card:not(.has-card-content) .blog-thumb-wrap {
  position: relative;
  width: 100%;
  height: 100% !important;
  flex: 1 1 auto !important;
  min-height: clamp(120px, 16vh, 180px) !important;
  max-height: none !important;
  overflow: hidden !important;
  background: #0b111e;
  display: block !important;
}

.photos-timeline-wrapper .photo-album-card.has-card-content .blog-thumb-wrap,
.photos-timeline-wrapper .photo-album-card .blog-thumb-wrap,
.blog-timeline-wrapper .blog-card.has-card-content .blog-thumb-wrap,
.blog-timeline-wrapper .blog-card .blog-thumb-wrap {
  position: relative;
  width: 100%;
  height: clamp(72px, 9.2vh, 92px) !important;
  min-height: clamp(72px, 9.2vh, 92px) !important;
  max-height: clamp(72px, 9.2vh, 92px) !important;
  flex: 0 0 auto !important;
  overflow: hidden !important;
  background: #0b111e;
  display: block !important;
}

.photos-timeline-wrapper .photo-album-card .blog-thumb {
  width: 100%;
  height: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.photos-timeline-wrapper .photo-album-card:hover .blog-thumb {
  transform: scale(1.05);
}

/* Firehose Item Type Badge on Thumbnail */
.firehose-card-type-badge {
  position: static !important;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2.5px 8px;
  border-radius: 9999px;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(15, 23, 42, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #f1f5f9;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  pointer-events: auto !important;
  cursor: pointer !important;
  line-height: 1;
  transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
  user-select: none;
  z-index: 5;
}

.firehose-card-type-badge:hover {
  transform: translateY(-1px) scale(1.05);
  background: rgba(15, 23, 42, 0.96);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.55);
}

.firehose-card-type-badge.type-article {
  border-color: rgba(56, 189, 248, 0.4);
  color: #bae6fd;
}
.firehose-card-type-badge.type-article i {
  color: #38bdf8;
}

.firehose-card-type-badge.type-video {
  border-color: rgba(192, 132, 252, 0.4);
  color: #e9d5ff;
}
.firehose-card-type-badge.type-video i {
  color: #c084fc;
}

.firehose-card-type-badge.type-photo {
  border-color: rgba(251, 191, 36, 0.4);
  color: #fef3c7;
}
.firehose-card-type-badge.type-photo i {
  color: #fbbf24;
}

.firehose-card-type-badge.type-album {
  border-color: rgba(52, 211, 153, 0.4);
  color: #a7f3d0;
}
.firehose-card-type-badge.type-album i {
  color: #34d399;
}

.photos-timeline-wrapper .photo-album-card .blog-thumb-wrap .album-card-badges,
.recent-photos-timeline .blog-thumb-wrap .album-card-badges,
.recent-videos-timeline .blog-thumb-wrap .album-card-badges {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  pointer-events: none;
}

.photos-timeline-wrapper .photo-album-card .blog-thumb-wrap .item-access-badges,
.photos-timeline-wrapper .photo-album-card .blog-thumb-wrap .item-badges-left {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 5px !important;
  z-index: 12 !important;
  max-width: calc(100% - 16px) !important;
  pointer-events: none !important;
}

/* Hide count badge on thumbnail because reading time / photo count is in card meta row */
.photos-timeline-wrapper .photo-album-card.has-card-content .album-badge-count,
.photo-album-card.has-card-content .album-badge-count {
  display: none !important;
}

.photos-timeline-wrapper .photo-album-card .blog-thumb-wrap .video-card-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.7);
  width: 44px;
  height: 44px;
  background: #10b981;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 1.15rem;
  padding-left: 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 20px rgba(16, 185, 129, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.25s ease,
              background 0.25s ease,
              box-shadow 0.25s ease;
  z-index: 4;
  pointer-events: none;
}

.photos-timeline-wrapper .photo-album-card:hover .video-card-play-btn,
.photos-timeline-wrapper .photo-album-card:focus-visible .video-card-play-btn {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1.18);
  background: #059669;
  border-color: #ffffff;
  color: #ffffff;
  box-shadow: 0 8px 30px rgba(16, 185, 129, 0.8), 0 0 30px rgba(52, 211, 153, 0.7);
}

.photos-timeline-wrapper .photo-album-card .blog-card-content,
.blog-timeline-wrapper .blog-card .blog-card-content {
  padding: 0.42rem 0.65rem 0.45rem 0.65rem !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  justify-content: flex-start !important;
  gap: 0.18rem !important;
  background: rgba(11, 17, 30, 0.45) !important;
}

/* Card Content Meta Row */
.firehose-card-meta-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-height: 1rem;
  margin-bottom: 0.08rem;
}

.firehose-card-type-pill {
  display: none !important;
}

.firehose-card-meta-detail {
  font-size: 0.67rem;
  color: #94a3b8;
  font-weight: 500;
  white-space: nowrap;
}

.photos-timeline-wrapper .photo-album-card .blog-card-title,
.blog-timeline-wrapper .blog-card .blog-card-title {
  font-family: var(--font-heading);
  font-size: clamp(0.75rem, 0.86vw, 0.84rem);
  font-weight: 700;
  line-height: 1.22;
  margin: 0;
  color: #ffffff;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  word-break: break-word;
  max-height: calc(1.22 * 2em) !important;
}

.photos-timeline-wrapper .photo-album-card .blog-card-title a,
.blog-timeline-wrapper .blog-card .blog-card-title a {
  color: inherit !important;
  text-decoration: none !important;
}

.photos-timeline-wrapper .photo-album-card .blog-card-excerpt,
.blog-timeline-wrapper .blog-card .blog-card-excerpt {
  font-size: clamp(0.63rem, 0.72vw, 0.69rem);
  color: #94a3b8;
  line-height: 1.25;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  word-break: break-word;
  max-height: calc(1.25 * 2em) !important;
  margin: 0;
}

.photos-timeline-wrapper .photo-album-card .blog-card-excerpt p,
.blog-timeline-wrapper .blog-card .blog-card-excerpt p {
  margin: 0 !important;
  font-size: inherit;
  color: inherit;
  line-height: inherit;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  word-break: break-word;
  max-height: calc(1.25 * 2em) !important;
}

/* Redundant footer row removed */
.firehose-card-footer-row {
  display: none !important;
}

/* Albums Grid & Container (Legacy Fallback) */
.photos-albums-grid-wrap {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0.25rem 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.photos-albums-grid {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(0.75rem, 1.2vh, 1rem);
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}

@media (max-width: 860px) {
  .photos-albums-grid {
    gap: 0.75rem;
  }
}

/* Standalone Photo Album Cards (Fallback) */
.photos-albums-grid .photo-album-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 0 1 calc((960px - 2.5rem) / 3);
  width: 100%;
  max-width: calc((960px - 2.5rem) / 3);
  min-width: 270px;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(52, 211, 153, 0.25) !important;
  border-radius: 16px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow: hidden;
  cursor: pointer;
  outline: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 16px rgba(52, 211, 153, 0.08);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.28s ease,
              border-color 0.3s ease,
              box-shadow 0.3s ease;
}

.photos-albums-grid .photo-album-card:hover,
.photos-albums-grid .photo-album-card:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(52, 211, 153, 0.85) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 25px rgba(52, 211, 153, 0.35) !important;
}

.photo-album-card.is-filtering-out {
  opacity: 0;
  transform: scale(0.95);
  pointer-events: none;
}

.photo-album-card.is-hidden {
  display: none !important;
}

.album-card-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.album-card-media {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: clamp(140px, 18vh, 180px);
  aspect-ratio: 16 / 10;
  background: #020617;
  overflow: hidden;
}

.album-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.photo-album-card:hover .album-cover-img {
  transform: scale(1.05);
}

.album-card-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0.55rem 0.65rem;
  background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, transparent 45%, rgba(0,0,0,0.7) 100%);
  transition: opacity 0.25s ease;
}

.album-card-badges {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 10;
}

.album-badge-tag {
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #e2e8f0;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 9999px;
  letter-spacing: 0.02em;
}

/* Category Badges & Admin Tags on Album Cards:
   Visible when Stefan (admin) is browsing; hidden for visitors.
   Visibility/Access tags in RED; All others in ORANGE. */
.album-badge-category,
.item-tag-badge {
  display: none !important;
}

/* Visibility / Access Rights Badges & Topic Badges for Admin Browsing:
   - Private: PURPLE
   - Family: RED
   - Friends: ORANGE
   - Public: GREEN
   - Topics & Categories: LIGHT GREEN */

/* PRIVATE: PURPLE */
.article-badge-private,
body.sb-admin-browsing .article-badge-private,
body.logged-in:not(.sb-testing-visitor) .article-badge-private,
.item-tag-badge.article-badge-private {
  display: inline-flex !important;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 9999px;
  letter-spacing: 0.02em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  white-space: nowrap;
  background: rgba(126, 34, 206, 0.88) !important;
  border: 1px solid rgba(192, 132, 252, 0.65) !important;
  color: #faf5ff !important;
  box-shadow: 0 2px 8px rgba(147, 51, 234, 0.35) !important;
}

.article-badge-private i,
body.sb-admin-browsing .article-badge-private i,
body.logged-in:not(.sb-testing-visitor) .article-badge-private i,
.item-tag-badge.article-badge-private i {
  color: #e9d5ff !important;
}

/* FAMILY: RED */
.article-badge-family,
body.sb-admin-browsing .article-badge-family,
body.logged-in:not(.sb-testing-visitor) .article-badge-family,
.item-tag-badge.article-badge-family {
  display: inline-flex !important;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 9999px;
  letter-spacing: 0.02em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  white-space: nowrap;
  background: rgba(185, 28, 28, 0.88) !important;
  border: 1px solid rgba(248, 113, 113, 0.65) !important;
  color: #fff1f2 !important;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.35) !important;
}

.article-badge-family i,
body.sb-admin-browsing .article-badge-family i,
body.logged-in:not(.sb-testing-visitor) .article-badge-family i,
.item-tag-badge.article-badge-family i {
  color: #fca5a5 !important;
}

/* FRIENDS: ORANGE */
.article-badge-friends,
body.sb-admin-browsing .article-badge-friends,
body.logged-in:not(.sb-testing-visitor) .article-badge-friends,
.item-tag-badge.article-badge-friends {
  display: inline-flex !important;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 9999px;
  letter-spacing: 0.02em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  white-space: nowrap;
  background: rgba(194, 65, 12, 0.88) !important;
  border: 1px solid rgba(251, 146, 60, 0.65) !important;
  color: #fff7ed !important;
  box-shadow: 0 2px 8px rgba(234, 88, 12, 0.35) !important;
}

.article-badge-friends i,
body.sb-admin-browsing .article-badge-friends i,
body.logged-in:not(.sb-testing-visitor) .article-badge-friends i,
.item-tag-badge.article-badge-friends i {
  color: #fed7aa !important;
}

/* PUBLIC: GREEN */
.article-badge-public,
body.sb-admin-browsing .article-badge-public,
body.logged-in:not(.sb-testing-visitor) .article-badge-public,
.item-tag-badge.article-badge-public {
  display: inline-flex !important;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 9999px;
  letter-spacing: 0.02em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  white-space: nowrap;
  background: rgba(5, 150, 105, 0.88) !important;
  border: 1px solid rgba(52, 211, 153, 0.65) !important;
  color: #ecfdf5 !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35) !important;
}

.article-badge-public i,
body.sb-admin-browsing .article-badge-public i,
body.logged-in:not(.sb-testing-visitor) .article-badge-public i,
.item-tag-badge.article-badge-public i {
  color: #6ee7b7 !important;
}

/* TOPICS & CATEGORIES: LIGHT GREEN */
body.sb-admin-browsing .album-badge-category,
body.sb-admin-browsing .item-tag-badge:not(.article-badge-visibility):not(.article-badge-friends):not(.article-badge-family):not(.article-badge-private):not(.article-badge-public),
body.logged-in:not(.sb-testing-visitor) .album-badge-category,
body.logged-in:not(.sb-testing-visitor) .item-tag-badge:not(.article-badge-visibility):not(.article-badge-friends):not(.article-badge-family):not(.article-badge-private):not(.article-badge-public),
.album-category-the-herd,
.album-category-renos,
.album-category-renovations,
.album-category-firehose,
.album-category-videos,
.article-badge-tag,
.article-badge-favorite {
  display: inline-flex !important;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 9999px;
  letter-spacing: 0.02em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  white-space: nowrap;
  background: rgba(22, 163, 74, 0.88);
  border: 1px solid rgba(134, 239, 172, 0.65);
  color: #f0fdf4;
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.35);
}

/* Theme-specific Pill Colors for Card Topic Badges */
.album-badge-category.theme-amber,
.album-category-renos,
.album-category-renovations,
.album-category-crypto-defi,
.article-badge-tag.theme-amber {
  background: rgba(180, 83, 9, 0.88) !important;
  border: 1px solid rgba(251, 191, 36, 0.65) !important;
  color: #fef3c7 !important;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35) !important;
}

.album-badge-category.theme-cyan,
.album-category-creativity-film,
.album-category-the-planet,
.article-badge-tag.theme-cyan {
  background: rgba(8, 145, 178, 0.88) !important;
  border: 1px solid rgba(103, 232, 249, 0.65) !important;
  color: #ecfeff !important;
  box-shadow: 0 2px 8px rgba(6, 182, 212, 0.35) !important;
}

.album-badge-category.theme-purple,
.album-category-leben,
.album-category-trips,
.article-badge-tag.theme-purple {
  background: rgba(126, 34, 206, 0.88) !important;
  border: 1px solid rgba(216, 180, 254, 0.65) !important;
  color: #faf5ff !important;
  box-shadow: 0 2px 8px rgba(168, 85, 247, 0.35) !important;
}

.album-badge-category.theme-emerald,
.album-category-the-herd,
.album-category-code-technology,
.album-category-soccer,
.album-category-animal-rights,
.article-badge-tag.theme-emerald {
  background: rgba(22, 163, 74, 0.88) !important;
  border: 1px solid rgba(134, 239, 172, 0.65) !important;
  color: #f0fdf4 !important;
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.35) !important;
}

/* Fallback icon colors when no inline style is present */
.album-badge-category.theme-amber i,
.album-category-renos i,
.album-category-crypto-defi i,
.article-badge-tag.theme-amber i {
  color: #fde68a;
}
.album-badge-category.theme-cyan i,
.album-category-creativity-film i,
.album-category-the-planet i,
.article-badge-tag.theme-cyan i {
  color: #a5f3fc;
}
.album-badge-category.theme-purple i,
.album-category-leben i,
.album-category-trips i,
.article-badge-tag.theme-purple i {
  color: #e9d5ff;
}
.album-badge-category.theme-emerald i,
.album-category-the-herd i,
.album-category-code-technology i,
.album-category-soccer i,
.album-category-animal-rights i,
.article-badge-tag.theme-emerald i {
  color: #bbf7d0;
}

body.sb-admin-browsing .album-badge-category i:not([style*="color"]),
body.sb-admin-browsing .item-tag-badge:not(.article-badge-visibility):not(.article-badge-friends):not(.article-badge-family):not(.article-badge-private):not(.article-badge-public) i:not([style*="color"]),
body.logged-in:not(.sb-testing-visitor) .album-badge-category i:not([style*="color"]),
body.logged-in:not(.sb-testing-visitor) .item-tag-badge:not(.article-badge-visibility):not(.article-badge-friends):not(.article-badge-family):not(.article-badge-private):not(.article-badge-public) i:not([style*="color"]),
.album-category-the-herd i:not([style*="color"]),
.album-category-renovations i:not([style*="color"]),
.album-category-firehose i:not([style*="color"]),
.album-category-videos i:not([style*="color"]),
.article-badge-tag i:not([style*="color"]),
.article-badge-favorite i:not([style*="color"]) {
  color: #bbf7d0;
}

body.sb-testing-visitor .album-badge-category,
body.sb-testing-visitor .item-tag-badge:not(.article-badge-visibility):not(.article-badge-friends):not(.article-badge-family):not(.article-badge-private):not(.article-badge-public) {
  display: none !important;
}

.album-badge-count {
  position: absolute !important;
  bottom: 8px !important;
  right: 8px !important;
  left: auto !important;
  top: auto !important;
  z-index: 12 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  background: rgba(15, 23, 42, 0.78) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #f1f5f9 !important;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 9999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
  pointer-events: none !important;
}

.album-badge-count i {
  color: #34d399 !important;
}

.album-card-content {
  padding: 0.65rem 0.85rem 0.75rem 0.85rem;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  position: relative;
}

.album-card-header {
  margin-bottom: 0.2rem;
}

.album-meta-badge {
  display: none !important;
}

.album-card-title {
  font-size: clamp(0.88rem, 0.95vw, 0.98rem);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.25;
  margin: 0 0 0.25rem 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s ease;
}

.photo-album-card:hover .album-card-title {
  color: #6ee7b7;
}

.album-card-desc {
  font-size: 0.76rem;
  line-height: 1.35;
  color: #94a3b8;
  margin: 0;
  padding-right: 36px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.album-card-footer {
  display: none !important;
}

/* Circular green action button in bottom right corner matching .bento-arrow in Favorite Things */
.album-card-zoom-badge {
  position: absolute;
  bottom: 0.65rem;
  right: 0.65rem;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(52, 211, 153, 0.1);
  border: 1px solid rgba(52, 211, 153, 0.35);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #34d399;
  opacity: 1 !important;
  transform: none !important;
  transition: all 0.25s ease;
  z-index: 2;
}

.album-card-zoom-badge span {
  display: none !important;
}

.photo-album-card:hover .album-card-zoom-badge {
  background: rgba(52, 211, 153, 0.28);
  border-color: rgba(52, 211, 153, 0.75);
  color: #ffffff;
  box-shadow: 0 0 18px rgba(52, 211, 153, 0.5), 0 4px 12px rgba(0, 0, 0, 0.4);
  transform: translateY(-2px) scale(1.1) !important;
}

.photo-album-card:hover .album-card-zoom-badge i {
  color: #ffffff;
  filter: drop-shadow(0 0 8px rgba(52, 211, 153, 0.9));
  transform: scale(1.15) rotate(-10deg);
}

/* Family & Friends Unlock Modal Overlay */
.photos-gate-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 1.5rem;
  background: rgba(10, 15, 29, 0.76);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.photos-gate-card {
  position: relative;
  max-width: 480px;
  width: 100%;
  padding: 2.25rem 2rem;
  text-align: center;
  border-radius: 20px;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(16, 185, 129, 0.25);
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.7), 0 0 32px -8px rgba(16, 185, 129, 0.2);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.photos-gate-close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #94a3b8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.9rem;
  z-index: 2;
}

.photos-gate-close-btn:hover {
  background: rgba(239, 68, 68, 0.25);
  border-color: rgba(239, 68, 68, 0.5);
  color: #fca5a5;
  transform: scale(1.08);
}

.photos-gate-icon-halo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.25) 0%, rgba(16, 185, 129, 0.05) 70%, transparent 100%);
  border: 1px solid rgba(16, 185, 129, 0.35);
  margin-bottom: 1.25rem;
  box-shadow: 0 0 24px rgba(16, 185, 129, 0.3);
}

.photos-gate-icon {
  font-size: 1.85rem;
  color: #34d399;
}

.photos-gate-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 0.5rem 0;
  letter-spacing: -0.01em;
}

.photos-gate-desc {
  font-size: 0.85rem;
  line-height: 1.55;
  color: #94a3b8;
  margin: 0 0 1.5rem 0;
}

.photos-gate-form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.photos-gate-input-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.photos-gate-input-wrap {
  position: relative;
  flex: 1;
}

.photos-gate-key-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.85rem;
  color: #64748b;
  pointer-events: none;
}

.photos-gate-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.65rem 0.85rem 0.65rem 2.25rem;
  background: rgba(2, 6, 23, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  color: #f8fafc;
  font-size: 0.85rem;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.photos-gate-input:focus {
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25);
}

.photos-gate-submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #10b981;
  color: #022c22;
  font-weight: 700;
  font-size: 0.82rem;
  padding: 0.65rem 1rem;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
  white-space: nowrap;
}

.photos-gate-submit-btn:hover {
  background: #34d399;
  transform: translateY(-1px);
}

.photos-gate-feedback {
  font-size: 0.78rem;
  padding: 6px 12px;
  border-radius: 8px;
  text-align: center;
}

.photos-gate-feedback.success {
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #a7f3d0;
}

.photos-gate-feedback.error {
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #fca5a5;
}

.photos-gate-divider {
  position: relative;
  text-align: center;
  margin: 0.4rem 0;
}

.photos-gate-divider::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}

.photos-gate-divider span {
  position: relative;
  background: rgba(15, 23, 42, 0.95);
  padding: 0 10px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
}

.photos-gate-quick-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #e2e8f0;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.65rem 1rem;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.photos-gate-quick-btn i {
  color: #f43f5e;
  transition: transform 0.2s ease;
}

.photos-gate-quick-btn:hover {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.35);
  color: #ffffff;
}

.photos-gate-quick-btn:hover i {
  transform: scale(1.2);
}

/* Light Theme Adaptations */
[data-theme="light"] .photo-album-card {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .album-card-title {
  color: #0f172a;
}

[data-theme="light"] .album-card-desc {
  color: #475569;
}

[data-theme="light"] .album-card-footer {
  border-top-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .photos-gate-card {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(16, 185, 129, 0.3);
}

[data-theme="light"] .photos-gate-title {
  color: #0f172a;
}

[data-theme="light"] .photos-gate-desc {
  color: #475569;
}

[data-theme="light"] .photos-gate-input {
  background: #f8fafc;
  border-color: rgba(0, 0, 0, 0.15);
  color: #0f172a;
}

[data-theme="light"] .photos-gate-quick-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.12);
  color: #1e293b;
}

[data-theme="light"] .photos-gate-divider span {
  background: #ffffff;
  color: #94a3b8;
}

/* ==========================================================================
   PHOTO FIREHOSE & NATIVE LIGHTBOX
   Section 5: Google Photos Album Stream
   ========================================================================== */

/* Slide layout & backdrop */
.photo-firehose-slide {
  position: relative;
  z-index: 10;
}

.backdrop-photos {
  background: radial-gradient(circle at 50% 30%, rgba(15, 23, 42, 0.4) 0%, rgba(2, 6, 23, 0.95) 100%),
              url('../img/photos/IMG_1363.jpg') center/cover no-repeat;
  filter: blur(28px) brightness(0.35);
  transform: scale(1.08);
}

/* Header & Eyebrow */
.photo-firehose-header {
  margin-bottom: 1.25rem;
}

.photo-firehose-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.5rem;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 4px 12px;
  border-radius: 9999px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 0.78rem;
}

.photo-firehose-status-dot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 8px;
  height: 8px;
}

.photo-firehose-ping {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(52, 211, 153, 0.45);
  animation: adminPulse 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.photo-firehose-dot {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 8px #10b981;
}

.photo-firehose-badge {
  color: #34d399;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.72rem;
}

.photo-firehose-album-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #94a3b8;
  text-decoration: none !important;
  transition: all 0.2s ease;
  font-family: var(--font-mono, monospace);
  font-size: 0.75rem;
}

.photo-firehose-album-link:hover {
  color: #38bdf8;
  transform: translateX(1px);
}

.photo-firehose-album-link i.fa-google {
  color: #38bdf8;
}

.photo-firehose-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 1rem;
}

.photo-firehose-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.photo-firehose-title {
  font-size: clamp(1.8rem, 3.2vw, 2.75rem);
  font-weight: 800;
  margin: 0;
  color: #ffffff;
  letter-spacing: -0.02em;
}

.photo-firehose-tagline {
  margin: 0;
  color: #94a3b8;
  font-size: 0.92rem;
  max-width: 600px;
}

.photo-firehose-actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.photo-count-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 6px 14px;
  border-radius: 9999px;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(52, 211, 153, 0.3);
  color: #a7f3d0;
  font-size: 0.82rem;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.photo-firehose-refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 6px 12px;
  border-radius: 9999px;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: #38bdf8;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
}

.photo-firehose-refresh-btn:hover {
  background: rgba(56, 189, 248, 0.2);
  border-color: #38bdf8;
  transform: translateY(-1px);
}

.photos-slick-green-hr {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  max-width: 960px;
  width: 100%;
  height: 1.5px;
  margin: clamp(0.5rem, 1vh, 0.75rem) auto clamp(0.75rem, 1.2vh, 1.15rem);
  background: linear-gradient(90deg, rgba(52, 211, 153, 0.1) 0%, rgba(52, 211, 153, 0.7) 15%, #34d399 50%, rgba(52, 211, 153, 0.7) 85%, rgba(52, 211, 153, 0.1) 100%);
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.5), 0 0 3px rgba(52, 211, 153, 0.8);
}

/* Grid & Cards Container */
.photo-firehose-grid-wrap {
  width: 100%;
  max-height: calc(100vh - 240px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.5rem 0.5rem 2rem 0.25rem;
  box-sizing: border-box;
}

.photo-firehose-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 1.5rem;
  width: 100%;
}

/* Photo Card */
.photo-card {
  position: relative;
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.68);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  border-top: 1.5px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 12px 32px -4px rgba(0, 0, 0, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.2);
  overflow: hidden;
  cursor: pointer;
  outline: none;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  aspect-ratio: 4 / 3;
}

.photo-card:hover,
.photo-card:focus-visible {
  transform: translateY(-4px) scale(1.02);
  border-color: rgba(52, 211, 153, 0.65);
  box-shadow: 0 20px 40px -4px rgba(0, 0, 0, 0.7), 0 0 24px rgba(16, 185, 129, 0.25), inset 0 1px 2px rgba(255, 255, 255, 0.35);
}

.photo-card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.photo-card-media {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.photo-firehose-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
  background: #0f172a;
}

.photo-card:hover .photo-firehose-img,
.photo-card:focus-visible .photo-firehose-img {
  transform: scale(1.06);
}

/* Hover Overlay & Zoom Badge */
.photo-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(2, 6, 23, 0.75) 100%);
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 1rem;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.photo-card:hover .photo-card-overlay,
.photo-card:focus-visible .photo-card-overlay {
  opacity: 1;
}

.photo-card-zoom-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 6px 14px;
  border-radius: 9999px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(52, 211, 153, 0.5);
  color: #34d399;
  font-size: 0.8rem;
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 10px rgba(16, 185, 129, 0.3);
  transform: translateY(6px);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.photo-card:hover .photo-card-zoom-badge,
.photo-card:focus-visible .photo-card-zoom-badge {
  transform: translateY(0);
}

/* ==========================================================================
   PHOTO LIGHTBOX MODAL (Full-screen Focused View)
   ========================================================================== */
.photo-lightbox-modal {
  position: fixed;
  inset: 0;
  z-index: 100060;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.32s ease;
}

.photo-lightbox-modal.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body.is-photo-lightbox-open {
  overflow: hidden !important;
}

.photo-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.94);
  backdrop-filter: blur(28px) saturate(190%);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  cursor: zoom-out;
  opacity: 0;
  transition: opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

.photo-lightbox-modal.is-active .photo-lightbox-backdrop {
  opacity: 1;
}

.photo-lightbox-container {
  position: relative;
  z-index: 10;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1rem 2rem 1.5rem;
  box-sizing: border-box;
  pointer-events: none;
}

.photo-lightbox-container > * {
  pointer-events: auto;
}

/* Legacy Topbar: suppressed */
.photo-lightbox-topbar,
.photo-lightbox-brand,
.photo-lightbox-pill,
.photo-lightbox-tools {
  display: none !important;
}

/* Lightbox Floating Meta Bar (Album Name, Date Taken, Photo Counter) */
.photo-lightbox-meta-bar {
  position: absolute;
  top: 1.25rem;
  left: 1.5rem;
  right: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  z-index: 25;
  pointer-events: none;
}

.photo-lightbox-meta-left,
.photo-lightbox-meta-center,
.photo-lightbox-meta-right {
  display: flex;
  align-items: center;
  pointer-events: auto;
}

.photo-lightbox-meta-center {
  flex: 1;
  justify-content: center;
}

.photo-lightbox-album-badge,
.photo-lightbox-date-badge,
.photo-lightbox-counter-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 6px 14px;
  border-radius: 9999px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
  font-size: 0.82rem;
  color: #f1f5f9;
  letter-spacing: -0.01em;
  transition: all 0.25s ease;
}

.photo-lightbox-album-badge i {
  color: #34d399;
  font-size: 0.85rem;
}

.photo-lightbox-album-name {
  display: inline-block !important;
  font-weight: 600;
  max-width: 380px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.photo-lightbox-date-badge {
  color: #e2e8f0;
}

.photo-lightbox-date-badge i {
  color: #38bdf8;
  font-size: 0.82rem;
}

.photo-lightbox-date-text {
  font-weight: 500;
}

.photo-lightbox-counter-badge {
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  color: #34d399;
}

.photo-lightbox-counter-badge i {
  color: #94a3b8;
  font-size: 0.78rem;
}

@media (max-width: 768px) {
  .photo-lightbox-meta-bar {
    top: 0.65rem;
    left: 0.75rem;
    right: 0.75rem;
    gap: 0.35rem;
  }
  .photo-lightbox-album-badge {
    padding: 4px 10px;
    font-size: 0.74rem;
  }
  .photo-lightbox-album-name {
    max-width: 140px;
  }
  .photo-lightbox-date-badge,
  .photo-lightbox-counter-badge {
    padding: 4px 10px;
    font-size: 0.74rem;
  }
}

.photo-lightbox-pill {
  padding: 3px 10px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #cbd5e1;
  font-family: var(--font-mono, monospace);
  font-size: 0.75rem;
  font-weight: 600;
}

.photo-lightbox-tools {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.photo-lightbox-tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.75);
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-size: 0.95rem;
  cursor: pointer;
  text-decoration: none !important;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  backdrop-filter: blur(12px);
}

.photo-lightbox-tool-btn:hover {
  background: rgba(52, 211, 153, 0.25);
  border-color: #34d399;
  color: #34d399;
  transform: scale(1.1);
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.35);
}

.photo-lightbox-close-btn {
  border-color: rgba(52, 211, 153, 0.4);
  color: #34d399;
}

.photo-lightbox-close-btn:hover {
  background: rgba(16, 185, 129, 0.25);
  border-color: #34d399;
  color: #34d399;
  transform: scale(1.1) rotate(90deg);
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.45);
}

/* Stage & Viewport */
.photo-lightbox-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  position: relative;
  min-height: 0;
  box-sizing: border-box;
}

.photo-lightbox-viewport {
  position: relative;
  flex: 0 1 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 0;
  transform-origin: var(--card-origin-x, 50vw) var(--card-origin-y, 50vh);
  transform: scale(0.8);
  opacity: 0;
  filter: blur(8px);
  transition: transform 0.36s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.3s ease;
  will-change: transform, opacity, filter;
}

.photo-lightbox-modal.is-active .photo-lightbox-viewport {
  transform: scale(1);
  opacity: 1;
  filter: blur(0);
}

.photo-lightbox-modal:not(.is-active) .photo-lightbox-viewport {
  transform: scale(0.85);
  opacity: 0;
  filter: blur(6px);
  transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.2s ease,
              filter 0.2s ease;
}

.photo-lightbox-frame {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  max-height: 100%;
}

/* Subtle Close "X" Button (Bottom center of image) */
.photo-lightbox-img-close-btn {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 25;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: 
    opacity 0.25s ease,
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.2s ease;
}

.photo-lightbox-img-close-btn:hover {
  background: rgba(239, 68, 68, 0.4);
  border-color: rgba(248, 113, 113, 0.75);
  color: #ffffff;
  transform: translateX(-50%) scale(1.1) rotate(90deg);
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.4), 0 4px 16px rgba(0, 0, 0, 0.5);
}

.photo-lightbox-image,
.photo-lightbox-video {
  max-width: min(calc(100vw - 180px), 1100px);
  max-height: calc(100vh - 150px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.85), 0 0 40px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity, filter;
  background: #000;
}

.photo-lightbox-image.is-loaded,
.photo-lightbox-video.is-loaded {
  opacity: 1;
  transform: translateX(0) scale(1);
  filter: blur(0);
}

/* Incoming slide-in initial states */
.photo-lightbox-image.slide-in-right {
  opacity: 0 !important;
  transform: translateX(65px) scale(0.94) !important;
  filter: blur(4px) !important;
  transition: none !important;
}

.photo-lightbox-image.slide-in-left {
  opacity: 0 !important;
  transform: translateX(-65px) scale(0.94) !important;
  filter: blur(4px) !important;
  transition: none !important;
}

/* Outgoing clone transition */
.photo-lightbox-image-outgoing {
  pointer-events: none;
  z-index: 4;
  border-radius: 12px;
  box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.85), 0 0 40px rgba(0, 0, 0, 0.5);
  opacity: 1;
  transform: translateX(0) scale(1);
  filter: blur(0);
  transition: opacity 0.28s cubic-bezier(0.25, 1, 0.5, 1),
              transform 0.28s cubic-bezier(0.25, 1, 0.5, 1),
              filter 0.28s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform, opacity, filter;
}

.photo-lightbox-image-outgoing.slide-out-left {
  opacity: 0 !important;
  transform: translateX(-65px) scale(0.94) !important;
  filter: blur(4px) !important;
}

.photo-lightbox-image-outgoing.slide-out-right {
  opacity: 0 !important;
  transform: translateX(65px) scale(0.94) !important;
  filter: blur(4px) !important;
}

.photo-lightbox-spinner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.photo-spinner-ring {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid rgba(52, 211, 153, 0.2);
  border-top-color: #34d399;
  animation: photoSpinnerRotate 0.8s linear infinite;
}

@keyframes photoSpinnerRotate {
  to { transform: rotate(360deg); }
}

/* Navigation Side Arrows (Subtle, on the edges of the photo) */
.photo-lightbox-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  min-width: 46px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.15rem;
  cursor: pointer;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
  z-index: 30;
  opacity: 0.85;
  pointer-events: auto;
  transition: 
    opacity 0.25s ease,
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.2s ease;
}

.photo-lightbox-prev-btn {
  left: 14px;
}

.photo-lightbox-next-btn {
  right: 14px;
}

.photo-lightbox-nav-btn:hover:not(:disabled) {
  background: rgba(16, 185, 129, 0.35);
  border-color: rgba(52, 211, 153, 0.65);
  color: #ffffff;
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.5), 0 0 16px rgba(16, 185, 129, 0.35);
}

.photo-lightbox-nav-btn:active:not(:disabled) {
  transform: translateY(-50%) scale(0.94);
}

.photo-lightbox-prev-btn:hover:not(:disabled) i {
  transform: translateX(-2px);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.photo-lightbox-next-btn:hover:not(:disabled) i {
  transform: translateX(2px);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.photo-lightbox-nav-btn:disabled {
  opacity: 0 !important;
  pointer-events: none;
}

/* Show arrows and X on mouse-over of image or controls */
.photo-lightbox-frame:hover .photo-lightbox-img-close-btn,
.photo-lightbox-frame:hover .photo-lightbox-nav-btn:not(:disabled),
.photo-lightbox-frame:has(.photo-lightbox-image.is-loaded):hover .photo-lightbox-img-close-btn,
.photo-lightbox-frame:has(.photo-lightbox-image.is-loaded):hover .photo-lightbox-nav-btn:not(:disabled),
.photo-lightbox-stage:has(.photo-lightbox-frame:hover) .photo-lightbox-nav-btn:not(:disabled),
.photo-lightbox-stage:has(.photo-lightbox-nav-btn:hover) .photo-lightbox-nav-btn:not(:disabled),
.photo-lightbox-stage:has(.photo-lightbox-nav-btn:hover) .photo-lightbox-img-close-btn,
.photo-lightbox-stage.is-image-hovered .photo-lightbox-nav-btn:not(:disabled),
.photo-lightbox-stage.is-image-hovered .photo-lightbox-img-close-btn {
  opacity: 1;
  pointer-events: auto;
}

/* Touchscreens: preserve accessibility */
@media (hover: none), (pointer: coarse) {
  .photo-lightbox-nav-btn:not(:disabled),
  .photo-lightbox-img-close-btn,
  .photo-lightbox-image.is-loaded ~ .photo-lightbox-img-close-btn,
  .photo-lightbox-frame:has(.photo-lightbox-image.is-loaded) .photo-lightbox-img-close-btn {
    opacity: 0.85;
    pointer-events: auto;
  }
}

/* Footer / Keyboard Hint (Dropped) */
.photo-lightbox-footer {
  display: none !important;
}

.photo-lightbox-hint {
  display: none !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .photo-firehose-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .photo-firehose-title {
    font-size: 1.6rem;
  }
  .photo-firehose-tagline {
    font-size: 0.82rem;
  }
  .photo-lightbox-container {
    padding: 1rem;
  }
  .photo-lightbox-stage {
    gap: 0;
  }
  .photo-lightbox-image {
    max-width: 100vw;
  }
  .photo-lightbox-nav-btn {
    width: 42px;
    height: 42px;
    min-width: 42px;
    font-size: 1.05rem;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
  }
  .photo-lightbox-prev-btn {
    left: 8px;
  }
  .photo-lightbox-next-btn {
    right: 8px;
  }
  .photo-lightbox-nav-btn:hover:not(:disabled) {
    transform: translateY(-50%) scale(1.1);
  }
  .photo-lightbox-viewport {
    padding: 0;
  }
  .photo-lightbox-img-close-btn {
    top: auto;
    bottom: 8px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 32px;
    height: 32px;
    font-size: 0.9rem;
  }
}

/* ==========================================================================
   PHOTO CAPTIONS & IN-PLACE ADMIN EDITOR
   ========================================================================== */

/* Card Caption Bar (Bottom strip of card) */
.photo-card-caption-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.6rem 0.85rem;
  background: linear-gradient(180deg, transparent 0%, rgba(2, 6, 23, 0.85) 40%, rgba(2, 6, 23, 0.95) 100%);
  display: flex;
  align-items: center;
  z-index: 4;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.photo-card-caption-text {
  font-size: 0.82rem;
  color: #f1f5f9;
  font-weight: 500;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
}

/* Card Quick Edit Button */
.photo-card-edit-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(52, 211, 153, 0.4);
  color: #34d399;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 6;
  opacity: 0;
  transform: scale(0.9);
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.photo-card:hover .photo-card-edit-btn,
.photo-card:focus-visible .photo-card-edit-btn {
  opacity: 1;
  transform: scale(1);
}

.photo-card-edit-btn:hover {
  background: #059669;
  color: #ffffff;
  border-color: #34d399;
  transform: scale(1.1);
}

/* Lightbox Caption Bar */
.photo-lightbox-caption-bar {
  width: auto;
  max-width: 100%;
  margin: 0.5rem auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

.photo-lightbox-caption-display {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: auto;
  max-width: min(92vw, 680px);
  padding: 7px 20px;
  border-radius: 9999px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
}

.photo-lightbox-caption-text {
  font-size: 0.95rem;
  font-weight: 500;
  color: #f8fafc;
  line-height: 1.4;
  text-align: center;
  margin: 0;
  letter-spacing: -0.01em;
}

.photo-lightbox-edit-btn,
.photo-lightbox-add-caption-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 4px 12px;
  border-radius: 9999px;
  background: rgba(52, 211, 153, 0.15);
  border: 1px solid rgba(52, 211, 153, 0.4);
  color: #34d399;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.photo-lightbox-edit-btn:hover,
.photo-lightbox-add-caption-btn:hover {
  background: rgba(52, 211, 153, 0.3);
  border-color: #34d399;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
}

.photo-lightbox-add-caption-btn {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: #cbd5e1;
}

.photo-lightbox-add-caption-btn:hover {
  background: rgba(52, 211, 153, 0.2);
  border-color: #34d399;
  color: #34d399;
}

/* ==========================================================================
   Polaroid Single-Click Admin Toggle Button (Photo & Video Lightboxes)
   ========================================================================== */
.sb-polaroid-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 4px 11px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #cbd5e1;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  flex-shrink: 0;
}

.sb-polaroid-toggle-btn .sb-polaroid-icon {
  font-size: 0.82rem;
  transition: transform 0.2s ease, color 0.2s ease;
}

.sb-polaroid-toggle-btn:hover {
  background: rgba(245, 158, 11, 0.16);
  border-color: rgba(245, 158, 11, 0.5);
  color: #fbbf24;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25);
}

.sb-polaroid-toggle-btn:hover .sb-polaroid-icon {
  transform: scale(1.12);
  color: #fbbf24;
}

/* Active State: Item IS in Hero Polaroids */
.sb-polaroid-toggle-btn.is-in-polaroids {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.28), rgba(217, 119, 6, 0.38));
  border-color: rgba(245, 158, 11, 0.65);
  color: #fef3c7;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}

.sb-polaroid-toggle-btn.is-in-polaroids .sb-polaroid-icon {
  color: #fbbf24;
}

.sb-polaroid-toggle-btn.is-in-polaroids:hover {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.25), rgba(185, 28, 28, 0.35));
  border-color: rgba(239, 68, 68, 0.6);
  color: #fee2e2;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.3);
}

.sb-polaroid-toggle-btn.is-in-polaroids:hover .sb-polaroid-icon {
  color: #f87171;
}

.sb-polaroid-toggle-btn.is-loading {
  opacity: 0.65;
  pointer-events: none;
  cursor: wait;
}

/* Video Lightbox placement adjustment */
.video-lightbox-polaroid-btn {
  height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 0.76rem;
}

/* Lightbox Caption Edit Form */
.photo-lightbox-caption-form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: 100%;
  max-width: 520px;
  padding: 0.9rem 1.1rem;
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.88);
  border: 1px solid rgba(52, 211, 153, 0.45);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.65), 0 0 20px rgba(16, 185, 129, 0.2);
  box-sizing: border-box;
}

.photo-caption-input-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.photo-caption-input {
  width: 100%;
  background: rgba(2, 6, 23, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  padding: 8px 12px;
  color: #ffffff;
  font-family: inherit;
  font-size: 0.92rem;
  line-height: 1.4;
  resize: vertical;
  min-height: 52px;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.photo-caption-input:focus {
  outline: none;
  border-color: #34d399;
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.25);
}

.photo-caption-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
  color: #94a3b8;
  font-family: var(--font-mono, monospace);
  padding: 0 2px;
}

.photo-caption-btn-group {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.photo-caption-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.photo-caption-save-btn {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
  color: #ffffff;
  border: 1px solid rgba(52, 211, 153, 0.5);
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
}

.photo-caption-save-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #047857 0%, #059669 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.45);
}

.photo-caption-cancel-btn {
  background: transparent;
  color: #94a3b8;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.photo-caption-cancel-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

/* Toast feedback */
.sb-photo-toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 10px 20px;
  border-radius: 9999px;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid #10b981;
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 16px rgba(16, 185, 129, 0.4);
  z-index: 100080;
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}

.sb-photo-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.sb-photo-toast i {
  color: #34d399;
  font-size: 1rem;
}

/* ==========================================================================
   Hero Screen Flying 3D Polaroid Stage
   Polaroids fly in from 3D space, "stick" firmly to the backdrop with
   authentic physical slap/bounce, hold for 3 seconds, and fade away.
   ========================================================================== */
/* ==========================================================================
   Hero Screen Flying 3D Polaroid Stage
   Polaroid drops in naturally from behind the viewer in the foreground,
   plunging behind "Hello World" and 3D tags, to land on the ground image behind.
   Authentic vintage worn edges, 8-second stay, and a gentle 5-second fade away.
   ========================================================================== */
.hero-flying-polaroids-stage {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1; /* Strictly behind .hero-deck-container (z-index: 5) and in front of backdrop */
  perspective: 1400px;
  perspective-origin: 50% 30%;
  overflow: hidden;
}

/* Individual Polaroid Card: Clean Vintage Off-White (NOT yellow), subtle organic wear */
.hero-flying-polaroid {
  position: absolute;
  width: clamp(175px, 15vw, 240px);
  /* Classic vintage neutral off-white cardstock background (NOT yellow) */
  background: radial-gradient(ellipse at 50% 45%, #fdfdfc 0%, #f7f6f3 55%, #edeae3 88%, #e2ded5 100%);
  /* Classic vintage Polaroid 600 proportions: equal borders with wide blank bottom chin */
  padding: 10px 10px 12px 10px;
  /* Authentic organic worn edges: subtle radii mimicking gentle cardstock wear */
  border-radius: 4px 3px 4px 2px / 3px 4px 2px 3px;
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
  pointer-events: auto;
  transform-style: preserve-3d;
  transform-origin: center center;
  opacity: 0;
  outline: none !important;
  will-change: transform, opacity, filter, box-shadow;
  
  /* Natural vintage cardstock edge borders (neutral, not yellow) */
  border: 1px solid #d5d1c8;
  border-top: 1px solid #e8e5dc;
  border-bottom: 2.5px solid #beb8ac;
  border-right: 1.5px solid #c8c2b7;
  
  /* Multi-layer contact shadow + subtle paper patina */
  box-shadow: 
    0 1px 2px rgba(0, 0, 0, 0.35),
    0 8px 20px -3px rgba(0, 0, 0, 0.5),
    0 20px 42px -6px rgba(0, 0, 0, 0.4),
    /* Paper fiber edge highlights */
    inset 0 0 1px 1px rgba(255, 255, 255, 0.85),
    inset 1px 1px 2px rgba(255, 255, 255, 0.95),
    /* Soft neutral aged cardstock edge discoloration (NOT yellow) */
    inset -1px -1px 3px rgba(110, 105, 95, 0.18),
    inset 0 -8px 14px rgba(90, 85, 75, 0.1);
}

/* Worn paper grain & delicate corner wear overlay (NOT yellow) */
.hero-flying-polaroid::after,
.hero-polaroid-centered-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  /* Delicate neutral paper fiber & subtle corner handling wear - NOT yellow */
  background: 
    radial-gradient(circle at 10% 92%, rgba(60, 55, 50, 0.07) 0%, transparent 20%),
    radial-gradient(circle at 90% 92%, rgba(60, 55, 50, 0.07) 0%, transparent 20%),
    radial-gradient(circle at 92% 8%, rgba(60, 55, 50, 0.05) 0%, transparent 18%),
    radial-gradient(circle at 8% 8%, rgba(60, 55, 50, 0.05) 0%, transparent 18%),
    linear-gradient(118deg, transparent 48%, rgba(255, 255, 255, 0.22) 49%, rgba(80, 75, 70, 0.06) 50.5%, transparent 51.5%);
  box-shadow: 
    inset 0 0 8px rgba(80, 75, 70, 0.08),
    inset 0 0 1px 1px rgba(255, 255, 255, 0.5);
  mix-blend-mode: multiply;
}

.hero-flying-polaroid:focus,
.hero-flying-polaroid:focus-visible {
  outline: none !important;
}

/* 1. Drop-in phase: starts from high overhead/behind viewer in foreground, naturally dropping onto ground */
.hero-flying-polaroid.is-dropping {
  animation: heroPolaroidDropIn 1.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes heroPolaroidDropIn {
  0% {
    /* Starts high overhead & behind the viewer, large and blurred - NEVER moving towards viewer */
    transform: 
      translate3d(var(--fly-x, 0px), -85vh, 1200px)
      rotateX(var(--fly-rx, -45deg))
      rotateY(var(--fly-ry, 20deg))
      rotateZ(var(--fly-rz, -15deg))
      scale(3.5);
    filter: blur(14px);
    opacity: 0;
    box-shadow: 0 60px 120px rgba(0, 0, 0, 0.6);
  }
  12% {
    opacity: 1;
    filter: blur(8px);
  }
  84% {
    /* Hits the ground surface behind tags */
    transform: 
      translate3d(0, 0, 0)
      rotateX(var(--land-rx, 0deg))
      rotateY(var(--land-ry, 0deg))
      rotateZ(var(--land-rz, 0deg))
      scale(1);
    filter: blur(0px);
    opacity: 1;
  }
  92% {
    /* Subtle physical paper rebound bounce off ground surface */
    transform: 
      translate3d(0, -6px, 12px)
      rotateX(calc(var(--land-rx, 0deg) + 2deg))
      rotateY(var(--land-ry, 0deg))
      rotateZ(var(--land-rz, 0deg))
      scale(1.02);
    filter: blur(0px);
    opacity: 1;
  }
  100% {
    /* Firmly resting flat on ground */
    transform: 
      translate3d(0, 0, 0)
      rotateX(var(--land-rx, 0deg))
      rotateY(var(--land-ry, 0deg))
      rotateZ(var(--land-rz, 0deg))
      scale(1);
    filter: blur(0px);
    opacity: 1;
  }
}

/* 2. "Stuck" on ground image behind text phase: firm contact on ground */
.hero-flying-polaroid.is-stuck {
  opacity: 1;
  transform: 
    translate3d(0, 0, 0)
    rotateX(var(--land-rx, 0deg))
    rotateY(var(--land-ry, 0deg))
    rotateZ(var(--land-rz, 0deg))
    scale(1);
  filter: blur(0);
  box-shadow: 
    0 1px 2px rgba(0, 0, 0, 0.35),
    0 8px 20px -3px rgba(0, 0, 0, 0.5),
    0 20px 42px -6px rgba(0, 0, 0, 0.4),
    inset 0 0 1px 1px rgba(255, 255, 255, 0.85),
    inset 1px 1px 2px rgba(255, 255, 255, 0.95),
    inset -1px -1px 3px rgba(110, 105, 95, 0.18),
    inset 0 -8px 14px rgba(90, 85, 75, 0.1);
}

/* 3. Hovering while stuck: lifts forward toward viewer in 3D while preserving worn integrity (NO GREEN!) */
.hero-flying-polaroid.is-hovered {
  transform: 
    translate3d(0, -6px, 45px)
    rotateX(calc(var(--land-rx, 0deg) * 0.3))
    rotateY(calc(var(--land-ry, 0deg) * 0.3))
    rotateZ(var(--land-rz, 0deg))
    scale(1.06) !important;
  box-shadow: 
    0 30px 60px -10px rgba(0, 0, 0, 0.75),
    0 16px 30px -6px rgba(0, 0, 0, 0.5),
    0 0 35px rgba(0, 0, 0, 0.35),
    inset 0 0 1px 1px rgba(255, 255, 255, 0.95),
    inset -1px -1px 3px rgba(110, 105, 95, 0.2),
    inset 0 -8px 14px rgba(90, 85, 75, 0.12) !important;
  z-index: 100;
  transition: 
    transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.35s ease;
}

/* 4. Fade away phase: fades away over 5 seconds */
.hero-flying-polaroid.is-fading-out {
  opacity: 0;
  transform: 
    translate3d(0, 8px, -25px)
    rotateX(var(--land-rx, 0deg))
    rotateY(var(--land-ry, 0deg))
    rotateZ(var(--land-rz, 0deg))
    scale(0.95);
  filter: blur(4px) grayscale(25%);
  box-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.1),
    inset 0 0 1px 1px rgba(255, 255, 255, 0.3);
  transition: 
    opacity 5s cubic-bezier(0.4, 0, 0.2, 1),
    transform 5s ease-out,
    filter 5s ease-out,
    box-shadow 5s ease-out;
}

/* Polaroid image square */
.hero-flying-polaroid .hero-polaroid-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #111215;
  border-radius: 2px;
  /* Chemical emulsion seal shadow with clean dark contrast */
  box-shadow: 
    inset 0 2px 5px rgba(0, 0, 0, 0.8),
    inset 0 0 0 1px rgba(45, 45, 45, 0.7),
    0 1px 1px rgba(255, 255, 255, 0.5);
}

.hero-flying-polaroid .hero-polaroid-img,
.hero-flying-polaroid .hero-polaroid-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  background: #000;
}

/* Specular photo sheen across emulsion */
.hero-flying-polaroid .hero-polaroid-sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.16) 0%,
    rgba(255, 255, 255, 0.03) 40%,
    transparent 65%
  );
  border-radius: 2px;
}

/* Hide on mobile to give unobstructed room to touch */
@media (max-width: 768px) {
  .hero-flying-polaroids-stage {
    display: none !important;
  }
}

/* ==========================================================================
   Hero Centered Polaroid
   Clicking a Polaroid brings ONLY that polaroid into center screen over
   the hero section. NO screen-filling dark backdrop or modal!
   Hero section stays 100% visible behind the centered polaroid.
   ========================================================================== */
.hero-polaroid-centered-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 50;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  overflow: visible;
}

.hero-polaroid-centered-wrap.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Just the Polaroid Card, centered over the hero section - Classic Off-White, Not Yellow */
.hero-polaroid-centered-card {
  position: relative;
  width: clamp(260px, 23vw, 340px);
  /* Classic vintage neutral off-white cardstock background (NOT yellow) */
  background: radial-gradient(ellipse at 50% 45%, #fdfdfc 0%, #f7f6f3 55%, #edeae3 88%, #e2ded5 100%);
  padding: 13px 13px 14px 13px;
  /* Authentic organic worn edges: irregular radii mimicking subtle cardstock wear */
  border-radius: 5px 3px 5px 3px / 3px 5px 3px 4px;
  box-sizing: border-box;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  outline: none !important;
  transform: scale(0.7) rotateZ(3deg);
  opacity: 0;
  transform-origin: center center;
  will-change: transform, opacity, filter, box-shadow;
  
  /* Natural vintage cardstock edge borders */
  border: 1px solid #d5d1c8;
  border-top: 1px solid #e8e5dc;
  border-bottom: 3px solid #beb8ac;
  border-right: 2px solid #c8c2b7;
  
  box-shadow: 
    0 24px 50px -10px rgba(0, 0, 0, 0.75),
    0 12px 24px -5px rgba(0, 0, 0, 0.5),
    0 0 35px rgba(0, 0, 0, 0.35),
    inset 0 0 1px 1px rgba(255, 255, 255, 0.85),
    inset 2px 2px 3px rgba(255, 255, 255, 0.95),
    inset -1px -1px 3px rgba(110, 105, 95, 0.22),
    inset 0 -8px 14px rgba(90, 85, 75, 0.14);
}

.hero-polaroid-centered-card:focus,
.hero-polaroid-centered-card:focus-visible {
  outline: none !important;
}

.hero-polaroid-centered-wrap.is-open .hero-polaroid-centered-card {
  transform: scale(1) rotateZ(-1.8deg);
  opacity: 1;
}

/* Hover: NO MOVEMENT! Centered image stays completely still on hover */
.hero-polaroid-centered-card:hover {
  /* Do not move or scale on hover */
  box-shadow: 
    0 28px 58px -10px rgba(0, 0, 0, 0.8),
    0 14px 28px -5px rgba(0, 0, 0, 0.55),
    0 0 35px rgba(0, 0, 0, 0.35),
    inset 0 0 1px 1px rgba(255, 255, 255, 0.95),
    inset 2px 2px 3px rgba(255, 255, 255, 0.95),
    inset -1px -1px 3px rgba(110, 105, 95, 0.22),
    inset 0 -8px 14px rgba(90, 85, 75, 0.14) !important;
}

/* Vintage handwritten blue ballpoint pen date on Polaroid bottom chin */
.hero-polaroid-caption {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 8px;
  margin-bottom: 2px;
  padding: 0 4px;
  box-sizing: border-box;
  font-family: 'Caveat', 'Segoe Print', 'Bradley Hand', 'Comic Sans MS', cursive, sans-serif;
  font-size: clamp(1.15rem, 1.45vw, 1.35rem);
  font-weight: 700;
  letter-spacing: 0.03em;
  /* Authentic blue ballpoint pen ink color */
  color: #1a4da2;
  text-shadow: 0 0.2px 0.5px rgba(26, 77, 162, 0.35);
  text-align: center;
  user-select: none;
  pointer-events: none;
  transform: rotate(-1.5deg);
  line-height: 1.1;
  filter: contrast(1.15);
}

.hero-flying-polaroid .hero-polaroid-caption {
  margin-top: 5px;
  margin-bottom: 1px;
  font-size: clamp(0.78rem, 0.95vw, 0.92rem);
  color: #1a4da2;
  transform: rotate(-1deg);
}

/* Image Wrap in Centered Card */
.hero-polaroid-centered-card .hero-polaroid-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #111215;
  border-radius: 2px;
  box-shadow: 
    inset 0 2px 5px rgba(0, 0, 0, 0.8),
    inset 0 0 0 1px rgba(45, 45, 45, 0.7),
    0 1px 1px rgba(255, 255, 255, 0.5);
}

.hero-polaroid-centered-card .hero-polaroid-img,
.hero-polaroid-centered-card .hero-polaroid-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
}

.hero-polaroid-video-icon {
  display: inline-flex;
  align-items: center;
  margin-right: 4px;
  font-size: 0.82em;
  color: #10b981;
}

.hero-polaroid-centered-card .hero-polaroid-sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.16) 0%,
    rgba(255, 255, 255, 0.03) 40%,
    transparent 65%
  );
  border-radius: 2px;
}

.hero-polaroid-sound-btn,
.hero-polaroid-close-btn {
  position: absolute;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 20;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  font-size: 0.95rem;
}

.hero-polaroid-sound-btn {
  bottom: 12px;
  right: 12px;
}

.hero-polaroid-sound-btn:hover {
  background: rgba(16, 185, 129, 0.85);
  border-color: rgba(52, 211, 153, 0.9);
  transform: scale(1.1);
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.5);
}

.hero-polaroid-close-btn {
  top: 10px;
  right: 10px;
}

.hero-polaroid-close-btn:hover {
  background: rgba(239, 68, 68, 0.85);
  border-color: rgba(248, 113, 113, 0.9);
  transform: scale(1.1) rotate(90deg);
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.5);
}

/* ==========================================================================
   FIREHOSE VIDEO CARDS & LIGHTBOX MODAL (Bunny.net Stream Player)
   ========================================================================== */

/* Video Album Card in Firehose Grid */
.video-album-card .album-card-media {
  position: relative;
  overflow: hidden;
}

.video-album-card .album-category-videos {
  background: rgba(185, 28, 28, 0.88) !important;
  color: #fff1f2 !important;
  border: 1px solid rgba(248, 113, 113, 0.65) !important;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.35) !important;
}

.video-card-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.7);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #10b981;
  border: 2px solid rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 1.15rem;
  padding-left: 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 20px rgba(16, 185, 129, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.25s ease,
              background 0.25s ease,
              box-shadow 0.25s ease;
  z-index: 4;
  pointer-events: none;
}

.video-album-card:hover .video-card-play-btn,
.video-album-card:focus-visible .video-card-play-btn,
.photo-album-card:hover .video-card-play-btn,
.photo-album-card:focus-visible .video-card-play-btn,
.recent-video-timeline-card:hover .video-card-play-btn,
.recent-video-timeline-card:focus-visible .video-card-play-btn {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1.15);
  background: #059669;
  border-color: #ffffff;
  color: #ffffff;
  box-shadow: 0 8px 30px rgba(16, 185, 129, 0.8), 0 0 30px rgba(52, 211, 153, 0.7);
}

/* Video Lightbox Modal */
.video-lightbox-modal {
  position: fixed;
  inset: 0;
  z-index: 100065;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.32s ease;
}

.video-lightbox-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.video-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 7, 13, 0.88);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.video-lightbox-modal.is-open .video-lightbox-backdrop {
  opacity: 1;
}

.video-lightbox-container {
  position: relative;
  z-index: 2;
  width: auto;
  max-width: 96vw;
  background: transparent;
  border: none;
  box-shadow: none;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: 1.25rem;
  transform-origin: var(--card-origin-x, 50vw) var(--card-origin-y, 50vh);
  transform: scale(0.76) translateY(12px);
  opacity: 0;
  filter: blur(8px);
  transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity, filter;
}

.video-lightbox-modal.is-open .video-lightbox-container {
  transform: scale(1) translateY(0);
  opacity: 1;
  filter: blur(0);
}

.video-lightbox-modal:not(.is-open) .video-lightbox-container {
  transform: scale(0.82) translateY(10px);
  opacity: 0;
  filter: blur(6px);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.22s ease,
              filter 0.22s ease;
}

/* Video Player Box / Card */
.video-lightbox-player-card {
  position: relative;
  width: clamp(340px, 64vw, 980px);
  background: rgba(11, 17, 30, 0.95);
  border: 1px solid rgba(52, 211, 153, 0.3);
  border-radius: 18px;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.75), 0 0 35px rgba(16, 185, 129, 0.12);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-shrink: 1;
}

/* Bottom Bar (Moved below stage as requested) */
.video-lightbox-bottombar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.35rem;
  background: rgba(15, 23, 42, 0.94);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
  position: relative;
  z-index: 20;
  min-height: 56px;
}

/* Left Zone: Paw Glyph + Month/Year + Duration Pill */
.video-lightbox-left {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex: 0 0 auto;
  z-index: 2;
}

.video-lightbox-icon {
  font-size: 1.25rem;
  color: #34d399;
  filter: drop-shadow(0 0 8px rgba(52, 211, 153, 0.4));
  flex-shrink: 0;
}

.video-lightbox-date {
  font-size: 0.88rem;
  font-weight: 600;
  color: #cbd5e1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  flex-shrink: 0;
}

.video-lightbox-duration-pill {
  font-size: 0.75rem;
  font-family: var(--font-mono, monospace);
  font-weight: 600;
  color: #34d399;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(52, 211, 153, 0.3);
  padding: 2px 8px;
  border-radius: 9999px;
  flex-shrink: 0;
}

/* Center Zone: Video Title Centered */
.video-lightbox-center {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin: 0 0.85rem;
  z-index: 1;
}

.video-lightbox-title-area {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  max-width: 100%;
}

.video-lightbox-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #f8fafc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
  text-align: center;
  transition: color 0.18s ease;
}

.video-lightbox-title.is-admin-clickable {
  cursor: pointer;
}

.video-lightbox-title.is-admin-clickable:hover {
  color: #34d399;
}

/* Admin Title Edit Button (Pencil Icon) */
.video-lightbox-edit-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #94a3b8;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.78rem;
  flex-shrink: 0;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.video-lightbox-edit-btn:hover {
  background: rgba(52, 211, 153, 0.2);
  border-color: rgba(52, 211, 153, 0.5);
  color: #34d399;
  transform: scale(1.08);
}

/* In-Place Title Edit Form */
.video-lightbox-title-form {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  min-width: 0;
}

.video-lightbox-title-input {
  flex: 1 1 auto;
  min-width: 140px;
  max-width: 480px;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(52, 211, 153, 0.5);
  border-radius: 8px;
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.3rem 0.65rem;
  outline: none;
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.2);
  transition: border-color 0.18s, box-shadow 0.18s;
}

.video-lightbox-title-input:focus {
  border-color: #34d399;
  box-shadow: 0 0 14px rgba(52, 211, 153, 0.4);
}

.video-lightbox-title-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.8rem;
  flex-shrink: 0;
  border: none;
  transition: all 0.18s ease;
}

.video-lightbox-title-save-btn {
  background: #10b981;
  color: #ffffff;
}

.video-lightbox-title-save-btn:hover {
  background: #059669;
  transform: scale(1.08);
}

.video-lightbox-title-save-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.video-lightbox-title-cancel-btn {
  background: rgba(255, 255, 255, 0.08);
  color: #94a3b8;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.video-lightbox-title-cancel-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.4);
  color: #fca5a5;
  transform: scale(1.08);
}

/* Right Zone: Fullscreen + Close X (Show on mouse-over) */
.video-lightbox-right {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-left: auto;
  flex: 0 0 auto;
  z-index: 2;
}

.video-lightbox-hover-tools {
  opacity: 0;
  pointer-events: none;
  transform: translateY(2px);
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

/* They show on mouse-over of the video player card or on focus */
.video-lightbox-player-card:hover .video-lightbox-hover-tools,
.video-lightbox-player-card.is-hovered .video-lightbox-hover-tools,
.video-lightbox-hover-tools:focus-within {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

@media (hover: none) {
  .video-lightbox-hover-tools {
    opacity: 0.92;
    pointer-events: auto;
    transform: none;
  }
}

/* Tool Buttons in Bottom Right */
.video-lightbox-tool-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #cbd5e1;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  font-size: 0.9rem;
}

.video-lightbox-fullscreen-btn:hover {
  background: rgba(52, 211, 153, 0.2);
  border-color: rgba(52, 211, 153, 0.6);
  color: #34d399;
  transform: scale(1.08);
  box-shadow: 0 0 14px rgba(52, 211, 153, 0.35);
}

.video-lightbox-close-btn:hover {
  background: rgba(239, 68, 68, 0.9);
  border-color: rgba(239, 68, 68, 1);
  color: #ffffff;
  transform: rotate(90deg) scale(1.08);
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.55);
}

/* Stage & Player Wrapper */
.video-lightbox-stage {
  flex: 1 1 0%;
  min-width: 0;
  position: relative;
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.video-lightbox-player-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000000;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Custom HTML5 Video Player Container */
.custom-video-player {
  position: relative;
  width: 100%;
  height: 100%;
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  user-select: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.video-lightbox-media {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000000;
  display: block;
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
}

/* Big Emerald Green Center Play / Pause Button */
.video-center-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: #10b981;
  border: 3px solid rgba(255, 255, 255, 0.85);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  cursor: pointer;
  z-index: 5;
  box-shadow: 0 0 35px rgba(16, 185, 129, 0.75), 0 10px 30px rgba(0, 0, 0, 0.6);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease, opacity 0.25s ease, box-shadow 0.25s ease;
}

.video-center-play-btn .video-center-play-icon {
  margin-left: 0;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.35));
}

.video-center-play-btn:hover {
  background: #059669;
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow: 0 0 50px rgba(16, 185, 129, 0.95), 0 12px 35px rgba(0, 0, 0, 0.7);
}

.video-center-play-btn:active {
  transform: translate(-50%, -50%) scale(0.95);
}

/* When playing: hide center play button */
.custom-video-player.is-playing .video-center-play-btn {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.85);
}

/* When paused or ended: show green center play button */
.custom-video-player.is-paused .video-center-play-btn,
.custom-video-player.is-ended .video-center-play-btn {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

/* Animated Play/Pause Feedback Badge (Emerald Green) */
.video-play-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 40px rgba(16, 185, 129, 0.85), 0 8px 30px rgba(0, 0, 0, 0.5);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  pointer-events: none;
  z-index: 6;
  opacity: 0;
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.video-play-indicator.is-flashing {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.15);
}

/* Drop video controls on mouse-over: ONLY show full-screen button */
.video-hover-controls {
  position: absolute;
  bottom: 1.15rem;
  right: 1.15rem;
  z-index: 7;
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.custom-video-player:hover .video-hover-controls,
.custom-video-player:focus-within .video-hover-controls {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.video-fullscreen-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(13, 20, 36, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(52, 211, 153, 0.45);
  color: #f1f5f9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6), 0 0 16px rgba(16, 185, 129, 0.25);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.video-fullscreen-btn:hover {
  background: #10b981;
  border-color: #34d399;
  color: #ffffff;
  transform: scale(1.12);
  box-shadow: 0 0 25px rgba(16, 185, 129, 0.65), 0 12px 30px rgba(0, 0, 0, 0.7);
}

.video-fullscreen-btn:active {
  transform: scale(0.95);
}

/* Video Thoughts Column (Outside Beside Video Player) */
/* Video & Photo Thoughts Column */
.video-lightbox-thoughts-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  min-height: 100%;
  flex-shrink: 0;
  position: relative;
  gap: 0.65rem;
}

.photo-lightbox-thoughts-col {
  position: absolute;
  top: 5rem;
  right: 2rem;
  bottom: 5rem;
  z-index: 35;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.65rem;
  pointer-events: auto;
}

/* Collapsed State: Thoughts Button Outside Player / Photo */
.video-side-thoughts-trigger,
.photo-side-thoughts-trigger {
  display: flex;
  align-items: center;
}

.video-side-thoughts-btn,
.photo-side-thoughts-btn {
  background: rgba(13, 20, 36, 0.92);
  border: 1px solid rgba(52, 211, 153, 0.35);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: #f1f5f9;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0.65rem 1.15rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 16px rgba(16, 185, 129, 0.15);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.video-side-thoughts-btn .video-side-thoughts-icon,
.photo-side-thoughts-btn .photo-side-thoughts-icon {
  color: #34d399;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
}

.video-side-thoughts-btn:hover,
.photo-side-thoughts-btn:hover {
  background: rgba(16, 185, 129, 0.2);
  border-color: rgba(52, 211, 153, 0.7);
  color: #34d399;
  transform: translateY(-2px);
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.6), 0 0 24px rgba(52, 211, 153, 0.35);
}

.video-thoughts-badge,
.photo-thoughts-badge {
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  font-weight: 700;
  color: #047857;
  background: #34d399;
  padding: 1px 7px;
  border-radius: 9999px;
  line-height: 1.2;
}

/* Caption bar inline thoughts trigger button */
.photo-caption-thoughts-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 4px 12px;
  border-radius: 9999px;
  background: rgba(52, 211, 153, 0.15);
  border: 1px solid rgba(52, 211, 153, 0.4);
  color: #34d399;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.photo-caption-thoughts-btn:hover {
  background: rgba(52, 211, 153, 0.3);
  border-color: #34d399;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
}

/* Expanded State: Standalone Thoughts Card */
.video-thoughts-card,
.photo-thoughts-card {
  width: clamp(290px, 24vw, 340px);
  background: rgba(12, 18, 32, 0.97);
  border: 1px solid rgba(52, 211, 153, 0.28);
  border-radius: 18px;
  padding: 1.15rem 1.25rem 1.25rem;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.75), 0 0 35px rgba(16, 185, 129, 0.12);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  display: flex;
  flex-direction: column;
  height: auto;
  align-self: flex-start;
  box-sizing: border-box;
  animation: sbVideoThoughtsFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.photo-thoughts-card {
  max-height: calc(100vh - 7rem);
}

@keyframes sbVideoThoughtsFadeIn {
  from {
    opacity: 0;
    transform: scale(0.96) translateX(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateX(0);
  }
}

.video-thoughts-header,
.photo-thoughts-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.85rem;
}

.video-thoughts-header-title,
.photo-thoughts-header-title {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.video-thoughts-icon,
.photo-thoughts-icon {
  color: #10b981;
  font-size: 1.25rem;
}

.video-thoughts-title-text,
.photo-thoughts-title-text {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.01em;
}

.video-thoughts-close-btn,
.photo-thoughts-close-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #cbd5e1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  font-size: 0.85rem;
}

.video-thoughts-close-btn:hover,
.photo-thoughts-close-btn:hover {
  background: rgba(239, 68, 68, 0.25);
  border-color: rgba(239, 68, 68, 0.5);
  color: #fca5a5;
  transform: rotate(90deg);
}

.video-thoughts-divider,
.photo-thoughts-divider {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin-bottom: 1rem;
}

/* Comments List (Only shown if comments exist) */
.video-thoughts-list-wrap,
.photo-thoughts-list-wrap {
  flex: 1 1 auto;
  overflow-y: auto;
  max-height: 240px;
  margin-bottom: 0.85rem;
  padding-right: 0.25rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(52, 211, 153, 0.35) transparent;
}

.video-thoughts-list-wrap::-webkit-scrollbar,
.photo-thoughts-list-wrap::-webkit-scrollbar {
  width: 4px;
}

.video-thoughts-list-wrap::-webkit-scrollbar-thumb,
.photo-thoughts-list-wrap::-webkit-scrollbar-thumb {
  background: rgba(52, 211, 153, 0.35);
  border-radius: 9999px;
}

.video-thoughts-list,
.photo-thoughts-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Compose Area: Textarea & Send Button */
.video-thoughts-compose,
.photo-thoughts-compose {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.video-reply-context,
.photo-reply-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(52, 211, 153, 0.3);
  border-radius: 8px;
  padding: 0.35rem 0.65rem;
  margin-bottom: 0.6rem;
  font-size: 0.78rem;
  color: #a7f3d0;
}

.video-reply-context .reply-context-info,
.photo-reply-context .reply-context-info {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.video-reply-context .reply-context-cancel,
.photo-reply-context .reply-context-cancel {
  background: transparent;
  border: none;
  color: #cbd5e1;
  cursor: pointer;
  padding: 2px 4px;
  font-size: 0.75rem;
  transition: color 0.2s ease;
}

.video-reply-context .reply-context-cancel:hover,
.photo-reply-context .reply-context-cancel:hover {
  color: #fca5a5;
}

.video-thoughts-input-wrap,
.photo-thoughts-input-wrap {
  margin-bottom: 0;
}

.video-thoughts-textarea,
.photo-thoughts-textarea {
  width: 100%;
  min-height: 78px;
  max-height: 140px;
  background: rgba(8, 13, 23, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  padding: 0.75rem 0.9rem;
  color: #f1f5f9;
  font-family: inherit;
  font-size: 0.88rem;
  line-height: 1.45;
  resize: vertical;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.video-thoughts-textarea::placeholder,
.photo-thoughts-textarea::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.video-thoughts-textarea:focus,
.photo-thoughts-textarea:focus {
  border-color: #34d399;
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.2);
}

.video-thoughts-actions-row,
.photo-thoughts-actions-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 0.85rem;
}

.video-thoughts-submit-btn,
.photo-thoughts-submit-btn {
  background: #059669;
  border: 1px solid rgba(52, 211, 153, 0.5);
  color: #ffffff;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.88rem;
  padding: 0.55rem 1.4rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(5, 150, 105, 0.35);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.video-thoughts-submit-btn:hover,
.photo-thoughts-submit-btn:hover {
  background: #10b981;
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.55);
  transform: translateY(-1px);
}

.video-thoughts-submit-btn:disabled,
.photo-thoughts-submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.video-thoughts-feedback,
.photo-thoughts-feedback {
  margin-top: 0.6rem;
  font-size: 0.78rem;
  line-height: 1.35;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
}

.video-thoughts-feedback.is-error,
.photo-thoughts-feedback.is-error {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #fca5a5;
}

.video-thoughts-feedback.is-success,
.photo-thoughts-feedback.is-success {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(52, 211, 153, 0.35);
  color: #6ee7b7;
}

@media (max-width: 768px) {
  .photo-lightbox-thoughts-col {
    position: fixed;
    top: auto;
    bottom: 4.5rem;
    right: 1rem;
    left: auto;
    z-index: 40;
  }
  .photo-thoughts-card {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    left: 1rem;
    width: auto;
    max-width: calc(100vw - 2rem);
    max-height: 70vh;
    z-index: 45;
  }
}

/* Fullscreen Mode Styling */
.custom-video-player:fullscreen {
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  background: #000000 !important;
}

.custom-video-player:fullscreen .video-lightbox-media {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

:is(.video-lightbox-container:fullscreen, .video-lightbox-container.is-fullscreen, .video-lightbox-modal.is-fullscreen .video-lightbox-container) {
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  border-radius: 0 !important;
  border: none !important;
  margin: 0 !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: row !important;
  background: #000000 !important;
  transform: none !important;
}

@media (max-width: 900px) {
  .video-lightbox-container {
    flex-direction: column;
    align-items: center;
    max-height: 94vh;
    overflow-y: auto;
    width: 94vw;
  }

  .video-lightbox-player-card {
    width: 100%;
    max-width: 100%;
  }

  .video-lightbox-thoughts-col {
    width: 100%;
    align-items: center;
  }

  .video-thoughts-card {
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  .video-lightbox-modal {
    padding: 0.5rem;
  }
  .video-lightbox-container {
    border-radius: 12px;
  }
  .video-lightbox-stage,
  .video-lightbox-player-wrap {
    border-radius: 12px 12px 0 0;
  }
  .video-lightbox-bottombar {
    padding: 0.65rem 0.85rem;
    border-radius: 0 0 12px 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .video-lightbox-center {
    position: static;
    transform: none;
    order: 3;
    width: 100%;
    max-width: 100%;
    justify-content: center;
  }
  .video-lightbox-left {
    order: 1;
  }
  .video-lightbox-right {
    order: 2;
  }
  .video-lightbox-title {
    font-size: 0.92rem;
  }
}


/* ============================================================
   RECENT PHOTOS & RECENT VIDEOS SECTIONS (inside #blog slide)
   ============================================================ */

/* ── Shared section wrapper ─────────────────────────────── */
.recent-media-section {
  width: 100%;
  padding: 0 clamp(1rem, 3vw, 2.5rem);
  margin-top: clamp(1.5rem, 3vh, 2.5rem);
  flex-shrink: 0;
}

.recent-media-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
}

.recent-media-title {
  font-size: clamp(1.6rem, 2.8vw, 2.8rem) !important;
  margin: 0 !important;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #ffffff;
  font-weight: 800;
}

.recent-media-title .section-title-accent {
  color: #10b981;
  font-weight: 800;
  margin-left: 0.3em;
}

.recent-media-view-all {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: #10b981;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  opacity: 0.82;
  transition: opacity 0.2s, gap 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}
.recent-media-view-all:hover {
  opacity: 1;
  gap: 0.65em;
}

.recent-media-empty {
  color: rgba(255,255,255,0.45);
  font-size: 0.85rem;
  padding: 0.5rem 0;
}

/* ── RECENT PHOTOS strip ────────────────────────────────── */
.recent-photos-strip {
  display: flex;
  flex-direction: row;
  gap: clamp(0.5rem, 1vw, 0.75rem);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(16,185,129,0.35) transparent;
  padding-bottom: 0.4rem;
  /* At start (default): Left edge not feathered, right edge feathered */
  -webkit-mask-image: linear-gradient(
    to right,
    #000 0%,
    #000 calc(100% - clamp(12px, 1.8vw, 22px)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    #000 0%,
    #000 calc(100% - clamp(12px, 1.8vw, 22px)),
    transparent 100%
  );
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.recent-photos-strip.is-scrolled {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 clamp(12px, 1.8vw, 22px),
    #000 calc(100% - clamp(12px, 1.8vw, 22px)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 clamp(12px, 1.8vw, 22px),
    #000 calc(100% - clamp(12px, 1.8vw, 22px)),
    transparent 100%
  );
}

.recent-photos-strip.is-scrolled.is-at-end {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 clamp(12px, 1.8vw, 22px),
    #000 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 clamp(12px, 1.8vw, 22px),
    #000 100%
  );
}

.recent-photos-strip.is-at-start.is-at-end {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
.recent-photos-strip::-webkit-scrollbar {
  height: 4px;
}
.recent-photos-strip::-webkit-scrollbar-track {
  background: transparent;
}
.recent-photos-strip::-webkit-scrollbar-thumb {
  background: rgba(16,185,129,0.35);
  border-radius: 4px;
}

.recent-photo-thumb {
  position: relative;
  flex-shrink: 0;
  width: clamp(100px, 13vw, 160px);
  height: clamp(100px, 13vw, 160px);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(16,185,129,0.07);
  border: 1.5px solid rgba(16,185,129,0.18);
  scroll-snap-align: start;
  cursor: pointer;
  padding: 0;
  transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1),
              border-color 0.18s,
              box-shadow 0.18s;
}
.recent-photo-thumb:hover,
.recent-photo-thumb:focus-visible {
  transform: scale(1.055) translateY(-2px);
  border-color: rgba(16,185,129,0.6);
  box-shadow: 0 8px 24px rgba(16,185,129,0.2);
  outline: none;
}

.recent-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.3s;
}

.recent-photo-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.3rem 0.5rem;
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 100%);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 500;
  line-height: 1.3;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

/* ── RECENT VIDEOS strip ────────────────────────────────── */
.recent-videos-strip {
  display: flex;
  flex-direction: row;
  gap: clamp(0.75rem, 1.5vw, 1.1rem);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(16,185,129,0.35) transparent;
  padding-bottom: 0.4rem;
  /* At start (default): Left edge not feathered, right edge feathered */
  -webkit-mask-image: linear-gradient(
    to right,
    #000 0%,
    #000 calc(100% - clamp(12px, 1.8vw, 22px)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    #000 0%,
    #000 calc(100% - clamp(12px, 1.8vw, 22px)),
    transparent 100%
  );
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.recent-videos-strip.is-scrolled {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 clamp(12px, 1.8vw, 22px),
    #000 calc(100% - clamp(12px, 1.8vw, 22px)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 clamp(12px, 1.8vw, 22px),
    #000 calc(100% - clamp(12px, 1.8vw, 22px)),
    transparent 100%
  );
}

.recent-videos-strip.is-scrolled.is-at-end {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 clamp(12px, 1.8vw, 22px),
    #000 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 clamp(12px, 1.8vw, 22px),
    #000 100%
  );
}

.recent-videos-strip.is-at-start.is-at-end {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
.recent-videos-strip::-webkit-scrollbar {
  height: 4px;
}
.recent-videos-strip::-webkit-scrollbar-thumb {
  background: rgba(16,185,129,0.35);
  border-radius: 4px;
}

.recent-video-card {
  flex-shrink: 0;
  width: clamp(200px, 22vw, 280px);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(10,20,14,0.72);
  border: 1.5px solid rgba(16,185,129,0.14);
  scroll-snap-align: start;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1),
              border-color 0.18s,
              box-shadow 0.18s;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.recent-video-card:hover {
  transform: scale(1.04) translateY(-3px);
  border-color: rgba(16,185,129,0.5);
  box-shadow: 0 10px 30px rgba(16,185,129,0.18);
}

/* Thumbnail area */
.recent-video-thumb-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0a140e;
  overflow: hidden;
}
.recent-video-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease, opacity 0.3s;
}
.recent-video-card:hover .recent-video-thumb {
  transform: scale(1.05);
}

.recent-video-thumb-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0a140e 0%, #064e3b 100%);
  color: rgba(16,185,129,0.5);
  font-size: 2rem;
}

/* Play badge overlay */
.recent-video-play-badge {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.28);
  transition: background 0.18s;
}
.recent-video-play-badge i {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(16,185,129,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.9rem;
  padding-left: 3px;
  box-shadow: 0 4px 16px rgba(16,185,129,0.5);
  transition: background 0.18s, transform 0.18s;
}
.recent-video-card:hover .recent-video-play-badge {
  background: rgba(0,0,0,0.15);
}
.recent-video-card:hover .recent-video-play-badge i {
  background: #10b981;
  transform: scale(1.12);
}

/* Duration pill */
.recent-video-duration {
  position: absolute;
  bottom: 6px;
  right: 7px;
  background: rgba(0,0,0,0.72);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
}

/* Meta area */
.recent-video-meta {
  padding: clamp(0.5rem, 1.2vw, 0.85rem);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
}

.recent-video-badge {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #10b981;
  opacity: 0.85;
}

.recent-video-badge.item-tag-badge {
  display: none !important;
}

body.sb-admin-browsing .recent-video-badge.item-tag-badge,
body.logged-in:not(.sb-testing-visitor) .recent-video-badge.item-tag-badge {
  display: inline-block !important;
  background: rgba(194, 65, 12, 0.88) !important;
  border: 1px solid rgba(251, 146, 60, 0.65) !important;
  color: #fff7ed !important;
  box-shadow: 0 2px 8px rgba(234, 88, 12, 0.35) !important;
  padding: 2px 7px;
  border-radius: 9999px;
}

body.sb-testing-visitor .recent-video-badge.item-tag-badge {
  display: none !important;
}

.recent-video-title {
  font-size: clamp(0.78rem, 1.1vw, 0.92rem);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.35;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.recent-video-desc {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.52);
  line-height: 1.4;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.recent-video-date {
  font-size: 0.68rem;
  color: rgba(16,185,129,0.7);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.3em;
  margin-top: auto;
}

/* Cursor overrides to match theme paw cursor */
.recent-photo-thumb,
.recent-photo-thumb *,
.recent-video-card,
.recent-video-card * {
  cursor: url('../images/paw-cursor-pointer.svg') 24 24, pointer !important;
}

/* ── Blog slide zero-scroll layout — strictly no scrolling or transient scrollbars ─ */
.blog-grid-view {
  overflow: hidden !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
}

.blog-grid-view::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

#blog .deck-container {
  overflow: hidden !important;
  scrollbar-width: none !important;
}

#blog .deck-container::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.blog-bottom-topics-dock {
  overflow: hidden !important;
  scrollbar-width: none !important;
}

.blog-bottom-topics-dock::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* ── Firehose, Recent Articles, Recent Photos & Recent Videos Timeline Slides (Reduced by 100px) ── */
#photos .photos-timeline-wrapper,
#firehose .photos-timeline-wrapper,
#blog-timeline-wrapper,
#recent-photos-timeline-wrapper,
#recent-videos-timeline-wrapper,
#blog .photos-timeline-wrapper,
#recent-photos .photos-timeline-wrapper,
#recent-videos .photos-timeline-wrapper {
  height: clamp(320px, calc(63vh - 100px), 470px) !important;
  max-height: clamp(320px, calc(63vh - 100px), 470px) !important;
  min-height: 0 !important;
}

#blog-timeline-viewport,
#recent-photos-timeline-viewport,
#recent-videos-timeline-viewport,
#blog .photos-timeline-viewport,
#recent-photos .photos-timeline-viewport,
#recent-videos .photos-timeline-viewport {
  height: 100% !important;
  max-height: none !important;
  min-height: 0 !important;
}

#blog-timeline-track,
#recent-photos-timeline-track,
#recent-videos-timeline-track,
#blog .photos-timeline-track,
#recent-photos .photos-timeline-track,
#recent-videos .photos-timeline-track {
  height: 100% !important;
  max-height: none !important;
  min-height: 0 !important;
}

#blog .photos-timeline-page,
#recent-photos .photos-timeline-page,
#recent-videos .photos-timeline-page {
  height: 100% !important;
  max-height: none !important;
  min-height: 0 !important;
}

#blog .photos-timeline-grid,
#recent-photos .photos-timeline-grid,
#recent-videos .photos-timeline-grid {
  height: 100% !important;
  max-height: none !important;
  min-height: 0 !important;
}

#blog .timeline-column,
#recent-photos .timeline-column,
#recent-videos .timeline-column {
  height: 100% !important;
  max-height: none !important;
  min-height: 0 !important;
}

#blog .timeline-col-cards,
#recent-photos .timeline-col-cards,
#recent-videos .timeline-col-cards {
  height: 100% !important;
  max-height: none !important;
  min-height: 0 !important;
  gap: clamp(0.35rem, 0.7vh, 0.55rem) !important;
}

/* Approximate 4x3 Cards matching Firehose height & proportions */
#blog-timeline-wrapper .blog-card,
#recent-photos-timeline-wrapper .photo-album-card,
#recent-photos-timeline-wrapper .recent-photo-timeline-card,
#recent-videos-timeline-wrapper .recent-video-timeline-card,
#recent-videos-timeline-wrapper .video-album-card,
#recent-videos-timeline-wrapper .photo-album-card,
#blog .blog-card,
#recent-photos .photo-album-card,
#recent-photos .recent-photo-timeline-card,
#recent-videos .recent-video-timeline-card,
#recent-videos .video-album-card,
#recent-videos .photo-album-card {
  aspect-ratio: auto !important;
  flex: 1 1 0% !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  border-radius: var(--radius-md) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}

/* Thumbnail Area within Card */
#blog-timeline-wrapper .blog-card .blog-thumb-wrap,
#recent-photos-timeline-wrapper .photo-album-card .blog-thumb-wrap,
#recent-videos-timeline-wrapper .recent-video-timeline-card .blog-thumb-wrap,
#recent-videos-timeline-wrapper .recent-video-card .recent-video-thumb-wrap,
#blog .blog-card .blog-thumb-wrap,
#recent-photos .photo-album-card .blog-thumb-wrap,
#recent-videos .recent-video-timeline-card .blog-thumb-wrap {
  flex: 1 1 auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 70px !important;
  max-height: none !important;
  position: relative !important;
  overflow: hidden !important;
  display: block !important;
  background: #090e17 !important;
}

/* Full Image when Card has no text content */
#blog-timeline-wrapper .blog-card:not(.has-card-content) .blog-thumb-wrap,
#recent-photos-timeline-wrapper .photo-album-card:not(.has-card-content) .blog-thumb-wrap,
#recent-videos-timeline-wrapper .recent-video-timeline-card:not(.has-card-content) .blog-thumb-wrap,
#blog .blog-card:not(.has-card-content) .blog-thumb-wrap,
#recent-photos .photo-album-card:not(.has-card-content) .blog-thumb-wrap,
#recent-videos .recent-video-timeline-card:not(.has-card-content) .blog-thumb-wrap {
  height: 100% !important;
  flex: 1 1 100% !important;
}

#blog-timeline-wrapper .blog-card .blog-thumb,
#recent-photos-timeline-wrapper .photo-album-card .blog-thumb,
#recent-videos-timeline-wrapper .recent-video-timeline-card .blog-thumb,
#blog .blog-card .blog-thumb,
#recent-photos .photo-album-card .blog-thumb,
#recent-videos .recent-video-timeline-card .blog-thumb {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

#blog-timeline-wrapper .blog-card .blog-thumb-placeholder,
#recent-photos-timeline-wrapper .photo-album-card .blog-thumb-placeholder,
#recent-videos-timeline-wrapper .recent-video-timeline-card .blog-thumb-placeholder,
#blog .blog-card .blog-thumb-placeholder,
#recent-photos .photo-album-card .blog-thumb-placeholder,
#recent-videos .recent-video-timeline-card .blog-thumb-placeholder {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex;
  align-items: center !important;
  justify-content: center !important;
}

#blog-timeline-wrapper .blog-card .blog-thumb-placeholder[style*="display: none"],
#recent-photos-timeline-wrapper .photo-album-card .blog-thumb-placeholder[style*="display: none"],
#recent-videos-timeline-wrapper .recent-video-timeline-card .blog-thumb-placeholder[style*="display: none"],
#blog .blog-card .blog-thumb-placeholder[style*="display: none"],
#recent-photos .photo-album-card .blog-thumb-placeholder[style*="display: none"],
#recent-videos .recent-video-timeline-card .blog-thumb-placeholder[style*="display: none"] {
  display: none !important;
}

#recent-videos-timeline-wrapper .video-card-play-btn,
#recent-videos .video-card-play-btn {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: none !important;
  z-index: 4 !important;
}

/* Content area below thumbnail */
#blog-timeline-wrapper .blog-card .blog-card-content,
#recent-photos-timeline-wrapper .photo-album-card .blog-card-content,
#recent-videos-timeline-wrapper .recent-video-timeline-card .blog-card-content,
#blog .blog-card .blog-card-content,
#recent-photos .photo-album-card .blog-card-content,
#recent-videos .recent-video-timeline-card .blog-card-content {
  flex: 0 0 auto !important;
  padding: 8px 12px 10px 12px !important;
  background: rgba(10, 16, 28, 0.94) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-sizing: border-box !important;
}

#blog-timeline-wrapper .blog-card .blog-card-title,
#recent-photos-timeline-wrapper .photo-album-card .blog-card-title,
#recent-videos-timeline-wrapper .recent-video-timeline-card .blog-card-title,
#blog .blog-card .blog-card-title,
#recent-photos .photo-album-card .blog-card-title,
#recent-videos .recent-video-timeline-card .blog-card-title {
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#blog-timeline-wrapper .blog-card .blog-card-excerpt,
#recent-photos-timeline-wrapper .photo-album-card .blog-card-excerpt,
#recent-videos-timeline-wrapper .recent-video-timeline-card .blog-card-excerpt,
#blog .blog-card .blog-card-excerpt,
#recent-photos .photo-album-card .blog-card-excerpt,
#recent-videos .recent-video-timeline-card .blog-card-excerpt {
  font-size: 0.76rem !important;
  line-height: 1.35 !important;
  margin: 3px 0 0 0 !important;
  color: rgba(226, 232, 240, 0.72) !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Empty Slot in Timeline Grid */
#blog-timeline-wrapper .timeline-empty-card-slot,
#recent-photos-timeline-wrapper .timeline-empty-card-slot,
#recent-videos-timeline-wrapper .timeline-empty-card-slot,
#blog .timeline-empty-card-slot,
#recent-photos .timeline-empty-card-slot,
#recent-videos .timeline-empty-card-slot {
  aspect-ratio: auto !important;
  flex: 1 1 0% !important;
  height: 100% !important;
  min-height: 0 !important;
}

.recent-photo-timeline-card,
.recent-video-timeline-card {
  cursor: url('../images/paw-cursor-pointer.svg') 24 24, pointer !important;
}

.recent-photo-timeline-card *,
.recent-video-timeline-card * {
  cursor: url('../images/paw-cursor-pointer.svg') 24 24, pointer !important;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .recent-photo-thumb {
    width: clamp(88px, 22vw, 130px);
    height: clamp(88px, 22vw, 130px);
  }
  .recent-video-card {
    width: clamp(175px, 55vw, 240px);
  }
  .recent-media-section {
    padding: 0 clamp(0.75rem, 2vw, 1rem);
  }
}

/* ==========================================================================
   Master Control Dock: Unified Visitor Switcher + Omni Testing Suite
   ========================================================================== */
.sb-master-control-dock {
  position: fixed;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100030;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
  transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1), transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.sb-master-control-dock .sb-unified-dock-inner {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 236px;
  max-width: calc(100vw - 32px);
  background: rgba(10, 16, 28, 0.90);
  border: 1px solid rgba(52, 211, 153, 0.26);
  border-top: 1px solid rgba(52, 211, 153, 0.50);
  border-radius: 18px;
  padding: 8px;
  backdrop-filter: blur(24px) saturate(190%);
  -webkit-backdrop-filter: blur(24px) saturate(190%);
  box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.65), 0 0 24px rgba(16, 185, 129, 0.12), inset 0 1px 1px rgba(255, 255, 255, 0.1);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}

/* Minimized Dock State */
.sb-master-control-dock.is-minimized .sb-unified-dock-inner {
  transform: translateX(calc(-100% - 30px));
  opacity: 0;
  pointer-events: none;
}

.sb-dock-reopen-btn {
  display: none;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(11, 18, 32, 0.92);
  border: 1.5px solid rgba(52, 211, 153, 0.5);
  color: #34d399;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55), 0 0 14px rgba(16, 185, 129, 0.3);
  transition: all 0.25s ease;
  z-index: 100031;
}

.sb-master-control-dock.is-minimized .sb-dock-reopen-btn {
  display: flex;
}

.sb-dock-reopen-btn:hover {
  transform: translateY(-50%) scale(1.1);
  color: #ffffff;
  border-color: #34d399;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.65), 0 0 20px rgba(52, 211, 153, 0.5);
}

/* Dock Header */
.sb-dock-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 2px 2px 5px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sb-dock-header .sb-admin-indicator {
  padding: 3px 8px;
  margin-bottom: 0;
  gap: 6px;
  border-radius: 9999px;
  text-decoration: none !important;
}

.sb-dock-header .sb-admin-indicator-text {
  font-size: 0.70rem;
  font-weight: 700;
}

.sb-dock-header .sb-admin-indicator-badge {
  font-size: 0.58rem;
  padding: 1px 5px;
}

.sb-dock-title-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sb-dock-header-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}

.sb-dock-minimize-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #94a3b8;
  font-size: 0.62rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sb-dock-minimize-btn:hover {
  background: rgba(52, 211, 153, 0.2);
  border-color: rgba(52, 211, 153, 0.5);
  color: #ffffff;
}

/* Quick Controls Rows */
.sb-dock-nav-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 0 2px 0;
}

.sb-dock-toggles-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 3px 0 5px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sb-dock-mini-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 7px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
  font-size: 0.68rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none !important;
  transition: all 0.2s ease;
  flex: 1 1 auto;
}

.sb-dock-mini-btn:hover {
  background: rgba(52, 211, 153, 0.15);
  border-color: rgba(52, 211, 153, 0.45);
  color: #ffffff;
  transform: translateY(-1px);
}

.sb-dock-mini-btn .sb-omni-icon {
  width: 16px;
  height: 16px;
  font-size: 0.65rem;
  background: transparent;
  box-shadow: none;
}

.sb-dock-mini-btn.sb-omni-dashboard-btn .sb-omni-icon {
  color: #38bdf8;
}
.sb-dock-mini-btn.sb-omni-home-btn {
  flex: 0 0 28px;
  padding: 5px 0;
  color: #38bdf8;
}
.sb-dock-mini-btn.sb-omni-edit-btn {
  flex: 0 0 28px;
  padding: 5px 0;
  color: #f59e0b;
}

/* Dual Quick Toggles */
.sb-dock-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 5px 6px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #cbd5e1 !important;
  font-size: 0.70rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none !important;
  transition: all 0.2s ease;
  overflow: hidden;
  white-space: nowrap;
  box-shadow: none !important;
  width: 100%;
}

.sb-dock-toggle-btn:hover {
  background: rgba(52, 211, 153, 0.15) !important;
  border-color: rgba(52, 211, 153, 0.45) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

.sb-dock-toggle-btn .sb-omni-icon,
.sb-dock-toggle-btn .switcher-btn-icon {
  width: 15px;
  height: 15px;
  font-size: 0.68rem;
  background: transparent !important;
  box-shadow: none !important;
}

.sb-dock-toggle-btn.sb-omni-dogs-btn .sb-omni-icon {
  color: #f59e0b;
}

.sb-dock-toggle-btn.sb-omni-mute-btn .switcher-btn-icon {
  color: #34d399;
}

.sb-dock-toggle-btn.sb-omni-mute-btn.is-muted,
body.is-omni-muted .sb-dock-toggle-btn.sb-omni-mute-btn {
  border-color: rgba(239, 68, 68, 0.45) !important;
  background: rgba(239, 68, 68, 0.15) !important;
  color: #fca5a5 !important;
}

.sb-dock-toggle-btn.sb-omni-mute-btn.is-muted .switcher-btn-icon,
body.is-omni-muted .sb-dock-toggle-btn.sb-omni-mute-btn .switcher-btn-icon {
  color: #f87171 !important;
}

.sb-dock-toggle-btn .sb-omni-badge,
.sb-dock-toggle-btn .switcher-btn-text {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  color: inherit !important;
}

.sb-dock-toggle-btn .sb-omni-halo {
  display: none !important;
}

/* Collapsible Sections */
.sb-dock-section {
  display: flex;
  flex-direction: column;
  padding-top: 4px;
}

.sb-dock-section + .sb-dock-section {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 4px;
}

.sb-dock-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 4px 6px;
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.sb-dock-section-head:hover {
  color: #f1f5f9;
  background: rgba(255, 255, 255, 0.05);
}

.sb-dock-section-head-title {
  display: flex;
  align-items: center;
  gap: 5px;
}

.sb-dock-section-chevron {
  font-size: 0.60rem;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.sb-dock-section.is-collapsed .sb-dock-section-chevron {
  transform: rotate(-90deg);
}

.sb-dock-section-body {
  max-height: 420px;
  opacity: 1;
  overflow: visible;
  transition: max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, margin 0.25s ease;
}

.sb-dock-section.is-collapsed .sb-dock-section-body {
  max-height: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  margin: 0 !important;
}

.sb-dock-active-role-tag {
  padding: 1px 6px;
  border-radius: 9999px;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(168, 85, 247, 0.16);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.4);
  margin-left: auto;
  margin-right: 6px;
}

.sb-dock-active-role-tag.is-role-admin {
  background: rgba(251, 191, 36, 0.16);
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.4);
}
.sb-dock-active-role-tag.is-role-family {
  background: rgba(244, 63, 94, 0.16);
  color: #f43f5e;
  border-color: rgba(244, 63, 94, 0.4);
}
.sb-dock-active-role-tag.is-role-friend {
  background: rgba(56, 189, 248, 0.16);
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.4);
}
.sb-dock-active-role-tag.is-role-anonymous {
  background: rgba(148, 163, 184, 0.16);
  color: #94a3b8;
  border-color: rgba(148, 163, 184, 0.4);
}

/* 2-Column Button Grid */
.sb-dock-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding-top: 3px;
}

/* Dock Action Buttons */
.sb-dock-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 5px !important;
  padding: 5px 6px !important;
  border-radius: 9px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #94a3b8 !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  outline: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  width: auto !important;
  height: auto !important;
  box-shadow: none !important;
}

.sb-dock-btn:hover,
.sb-dock-btn:focus-visible {
  color: #ffffff !important;
  background: rgba(52, 211, 153, 0.12) !important;
  border-color: rgba(52, 211, 153, 0.35) !important;
  transform: translateY(-1px) !important;
}

.sb-dock-btn:active {
  transform: translateY(0) scale(0.98) !important;
}

.sb-dock-btn .switcher-btn-icon,
.sb-dock-btn .sb-omni-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 14px !important;
  height: 14px !important;
  font-size: 0.70rem !important;
  color: inherit !important;
  flex-shrink: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

.sb-dock-btn .switcher-btn-text,
.sb-dock-btn .sb-omni-badge {
  font-size: 0.67rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  color: inherit !important;
}

/* Active State for Visitor Roles */
.sb-dock-btn.visitor-switcher-btn.is-active {
  color: #ffffff !important;
  background: linear-gradient(135deg, rgba(5, 150, 105, 0.9) 0%, rgba(16, 185, 129, 0.95) 100%) !important;
  border-color: rgba(110, 231, 183, 0.75) !important;
  box-shadow: 0 4px 14px rgba(5, 150, 105, 0.4), 0 0 10px rgba(52, 211, 153, 0.25) !important;
  transform: scale(1.02) !important;
}

.sb-dock-btn.visitor-switcher-btn[data-visitor-role="admin"] .switcher-btn-icon { color: #fbbf24; }
.sb-dock-btn.visitor-switcher-btn[data-visitor-role="admin"].is-active .switcher-btn-icon { color: #ffffff; }

.sb-dock-btn.visitor-switcher-btn[data-visitor-role="family"] .switcher-btn-icon { color: #f43f5e; }
.sb-dock-btn.visitor-switcher-btn[data-visitor-role="family"].is-active .switcher-btn-icon { color: #ffffff; }

.sb-dock-btn.visitor-switcher-btn[data-visitor-role="friend"] .switcher-btn-icon { color: #38bdf8; }
.sb-dock-btn.visitor-switcher-btn[data-visitor-role="friend"].is-active .switcher-btn-icon { color: #ffffff; }

.sb-dock-btn.visitor-switcher-btn[data-visitor-role="anonymous"] .switcher-btn-icon { color: #94a3b8; }
.sb-dock-btn.visitor-switcher-btn[data-visitor-role="anonymous"].is-active .switcher-btn-icon { color: #ffffff; }

/* Guest Stars Dock Buttons & Active States */
.sb-dock-btn.sb-guest-star-btn {
  position: relative !important;
}

.sb-dock-btn.sb-guest-star-btn.is-active {
  color: #ffffff !important;
  transform: scale(1.02) !important;
}

.sb-dock-btn.sb-guest-star-btn[data-guest-id="jason"].is-active {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.4) 0%, rgba(217, 119, 6, 0.6) 100%) !important;
  border-color: rgba(251, 191, 36, 0.8) !important;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35), 0 0 10px rgba(251, 191, 36, 0.25) !important;
}

.sb-dock-btn.sb-guest-star-btn[data-guest-id="gazoo"].is-active {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.4) 0%, rgba(5, 150, 105, 0.6) 100%) !important;
  border-color: rgba(52, 211, 153, 0.8) !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35), 0 0 10px rgba(52, 211, 153, 0.25) !important;
}

.sb-dock-btn.sb-guest-star-btn[data-guest-id="growler"].is-active {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.4) 0%, rgba(219, 39, 119, 0.6) 100%) !important;
  border-color: rgba(244, 114, 182, 0.8) !important;
  box-shadow: 0 4px 14px rgba(236, 72, 153, 0.35), 0 0 10px rgba(244, 114, 182, 0.25) !important;
}

.sb-dock-btn.sb-guest-star-btn[data-guest-id="stella"].is-active {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.4) 0%, rgba(79, 70, 229, 0.6) 100%) !important;
  border-color: rgba(129, 140, 248, 0.8) !important;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35), 0 0 10px rgba(129, 140, 248, 0.25) !important;
}

/* ==========================================================================
   Guest Star Hover Help Flyout Popover
   ========================================================================== */
.sb-guest-star-popover {
  position: fixed;
  z-index: 100050;
  width: 290px;
  max-width: calc(100vw - 32px);
  padding: 12px 14px;
  background: rgba(13, 20, 36, 0.96);
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 12px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.65), 0 0 1px rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  pointer-events: none !important;
  opacity: 0;
  transform: translateY(-50%) translateX(-6px);
  transition: opacity 0.16s ease, transform 0.16s ease;
  font-family: inherit;
}
.sb-guest-star-popover.is-visible {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
[data-theme="light"] .sb-guest-star-popover {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.16);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.16), 0 0 1px rgba(0, 0, 0, 0.12);
}
.sb-guest-star-popover .sb-popover-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
[data-theme="light"] .sb-guest-star-popover .sb-popover-title {
  color: #0f172a;
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
.sb-guest-star-popover .sb-popover-row {
  margin-top: 6px;
  font-size: 0.72rem;
  line-height: 1.4;
}
.sb-guest-star-popover .sb-popover-label {
  font-weight: 700;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 2px;
}
.sb-guest-star-popover .sb-popover-desc {
  color: #cbd5e1;
}
[data-theme="light"] .sb-guest-star-popover .sb-popover-desc {
  color: #334155;
}

/* ==========================================================================
   Jason Sudeikis Dancing Companion Widget
   ========================================================================== */
#sb-jason-companion {
  position: fixed;
  bottom: 24px;
  right: 32px;
  z-index: 2147483647 !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  user-select: none;
  transform: translateY(120%) scale(0.8);
  opacity: 0;
  transition: transform 0.65s cubic-bezier(0.18, 0.89, 0.32, 1.28), opacity 0.4s ease;
}

#sb-jason-companion.is-visible {
  transform: translateY(0) scale(1);
  opacity: 1;
}

#sb-jason-companion.is-exiting {
  pointer-events: none !important;
  opacity: 0;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease-in;
}

#sb-jason-companion.is-exiting-right {
  transform: translateX(250%) scale(0.95);
}

#sb-jason-companion.is-exiting-left {
  transform: translateX(-250%) scale(0.95);
}

.sb-jason-figure-wrap {
  position: relative;
  pointer-events: auto;
  cursor: pointer;
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.5));
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.sb-jason-figure-wrap:hover {
  transform: scale(1.05) translateY(-4px);
}

.sb-jason-figure-wrap:active,
.sb-jason-figure-wrap.is-bouncing {
  animation: sbJasonGroove 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes sbJasonGroove {
  0% { transform: scale(1) translateY(0); }
  25% { transform: scale(1.12, 0.9) translateY(-14px) rotate(4deg); }
  50% { transform: scale(0.95, 1.08) translateY(-6px) rotate(-4deg); }
  75% { transform: scale(1.05, 0.98) translateY(-2px) rotate(2deg); }
  100% { transform: scale(1) translateY(0); }
}

.sb-jason-gif {
  display: block;
  width: 144px;
  height: auto;
  max-height: 192px;
  object-fit: contain;
  pointer-events: auto;
}

@media (max-width: 768px) {
  #sb-jason-companion {
    bottom: 80px;
    right: 14px;
  }
  .sb-jason-gif {
    width: 100px;
    max-height: 144px;
  }
}

/* Jason Speech Bubble - Dropped / Disabled per user preference */
.sb-jason-bubble {
  display: none !important;
}

.sb-jason-close-btn {
  display: none !important;
}

/* ==========================================================================
   Guest Stars Drag and Drop onto Music Buckets
   ========================================================================== */
.sb-dock-btn.sb-guest-star-btn {
  cursor: grab !important;
  user-select: none;
  -webkit-user-drag: element;
}

.sb-dock-btn.sb-guest-star-btn:active,
.sb-dock-btn.sb-guest-star-btn.is-dragging {
  cursor: grabbing !important;
  opacity: 0.55 !important;
  transform: scale(0.95) !important;
}

/* Bucket Drop Hover Target Highlight */
.sb-smoky-bucket-pill.sb-bucket-drag-over,
.welcome-mood-tag.sb-bucket-drag-over,
.sb-bucket-selection-list.sb-bucket-drag-over {
  border-color: #f59e0b !important;
  background: rgba(245, 158, 11, 0.25) !important;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.75), inset 0 0 8px rgba(245, 158, 11, 0.35) !important;
  transform: scale(1.06) !important;
  transition: all 0.15s ease !important;
}

/* Guest Star Badge on Music Buckets */
.sb-bucket-guest-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  margin-left: 6px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  vertical-align: middle;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  transition: transform 0.18s ease, filter 0.18s ease;
  animation: sbGuestBadgeIn 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.sb-bucket-guest-badge:hover {
  transform: scale(1.08);
  filter: brightness(1.15);
}

.sb-bucket-guest-badge .sb-badge-remove-btn {
  background: transparent;
  border: none;
  color: inherit;
  font-size: 11px;
  font-weight: bold;
  line-height: 1;
  padding: 0 0 0 2px;
  margin: 0;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.15s ease;
}

.sb-bucket-guest-badge:hover .sb-badge-remove-btn {
  opacity: 1;
}

.sb-bucket-guest-badge.guest-jason {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.95), rgba(217, 119, 6, 0.95));
  color: #ffffff;
  border: 1px solid rgba(251, 191, 36, 0.85);
  box-shadow: 0 2px 10px rgba(245, 158, 11, 0.4);
}

.sb-bucket-guest-badge.guest-gazoo {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.95), rgba(5, 150, 105, 0.95));
  color: #ffffff;
  border: 1px solid rgba(52, 211, 153, 0.85);
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.4);
}

.sb-bucket-guest-badge.guest-growler,
.sb-bucket-guest-badge.guest-growlet {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.95), rgba(219, 39, 119, 0.95));
  color: #ffffff;
  border: 1px solid rgba(244, 114, 182, 0.85);
  box-shadow: 0 2px 10px rgba(236, 72, 153, 0.4);
}

.sb-bucket-guest-badge.guest-stella {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.95), rgba(79, 70, 229, 0.95));
  color: #ffffff;
  border: 1px solid rgba(129, 140, 248, 0.85);
  box-shadow: 0 2px 10px rgba(99, 102, 241, 0.4);
}

@keyframes sbGuestBadgeIn {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Light Theme Styling */
[data-theme="light"] .sb-master-control-dock .sb-unified-dock-inner {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(203, 213, 225, 0.85);
  box-shadow: 0 16px 40px -10px rgba(15, 23, 42, 0.12), 0 0 16px rgba(5, 150, 105, 0.1);
}

[data-theme="light"] .sb-dock-header {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .sb-dock-quick-row {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .sb-dock-section + .sb-dock-section {
  border-top-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .sb-dock-mini-btn,
[data-theme="light"] .sb-dock-btn {
  color: #475569;
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .sb-dock-mini-btn:hover,
[data-theme="light"] .sb-dock-btn:hover {
  color: #0f172a;
  background: rgba(5, 150, 105, 0.1);
  border-color: rgba(5, 150, 105, 0.3);
}

[data-theme="light"] .sb-dock-btn.visitor-switcher-btn.is-active {
  color: #ffffff;
  background: #059669;
}

[data-theme="light"] .sb-dock-reopen-btn {
  background: rgba(255, 255, 255, 0.95);
  border-color: #059669;
  color: #059669;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

/* Auto-hide during full-screen modal overlays (except for admin who retains master control dock during articles) */
body.is-article-open:not(.is-admin):not(.sb-admin-browsing) .sb-master-control-dock,
body.is-reading-mode:not(.is-admin):not(.sb-admin-browsing) .sb-master-control-dock,
html:not([data-visitor-type="admin"]) body.is-article-open .sb-master-control-dock,
html:not([data-visitor-type="admin"]) body.is-reading-mode .sb-master-control-dock,
body.is-photo-lightbox-open .sb-master-control-dock,
body.is-video-lightbox-open .sb-master-control-dock,
body.is-welcome-open .sb-master-control-dock {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(-50%) translateX(-12px) !important;
}

/* Retain side controls for Admin during article reading */
body.is-admin.is-article-open .sb-master-control-dock,
body.sb-admin-browsing.is-article-open .sb-master-control-dock,
html[data-visitor-type="admin"] body.is-article-open .sb-master-control-dock,
body.is-admin.is-reading-mode .sb-master-control-dock,
body.sb-admin-browsing.is-reading-mode .sb-master-control-dock,
html[data-visitor-type="admin"] body.is-reading-mode .sb-master-control-dock {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(-50%) translateX(0) !important;
  z-index: 100030 !important;
}

/* ==========================================================================
   Mobile View (<= 768px): Hide All Admin Controls & Decorations
   Pure, clean visitor experience on mobile phones
   ========================================================================== */
@media (max-width: 768px) {
  /* 1. Master Control Dock, Unified Visitor Switcher & Reopen Triggers */
  .sb-master-control-dock,
  #sbVisitorSwitcher,
  .sb-dock-reopen-btn,
  #sbMasterDockReopen,
  #sb-omni-wrap,
  .sb-omni-wrap,
  .visitor-switcher-dock,
  .sb-unified-dock-inner {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  /* 2. Admin Tags Dock */
  .sb-admin-tags-dock,
  #sbAdminTagsDock {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* 3. Section Visibility Badges (Public, Admin, Family, Friend pills next to titles) */
  .sb-section-visibility-badge,
  .section-title .sb-section-visibility-badge,
  .photos-title-row .sb-section-visibility-badge,
  .deck-slide > .sb-section-visibility-badge {
    display: none !important;
    visibility: hidden !important;
  }

  /* 4. Item Access Tier Badges & Decorative Circles on Cards */
  .album-card-badges .item-topic-badges,
  .album-card-badges .album-badge-category,
  .album-card-badges .album-badge-visibility,
  .album-card-badges .article-badge-visibility,
  .album-card-badges .item-tag-badge:not(.firehose-card-type-badge),
  .album-card-badges [data-tag-category],
  .item-badges-right,
  .photo-album-card .album-badge-visibility,
  .blog-card .album-badge-visibility {
    display: none !important;
    visibility: hidden !important;
  }

  .album-card-badges .item-access-badges {
    display: flex !important;
    visibility: visible !important;
  }

  .album-card-badges .firehose-card-type-badge {
    display: inline-flex !important;
    visibility: visible !important;
  }

  /* 5. WordPress Admin Bar */
  #wpadminbar {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
  }

  html,
  html.admin-bar,
  body,
  body.admin-bar {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* 6. Reality Tuner & Admin Debug Indicators */
  .reality-tuner-dock,
  #sb-reality-tuner-wrap,
  .sb-admin-indicator,
  .sb-admin-badge,
  .sb-latest-badge {
    display: none !important;
    visibility: hidden !important;
  }
}

/* ==========================================================================
   Mobile View (<= 768px): Hide Hero Section & Hero Indicators
   Direct mobile visitors immediately to content (Firehose / Features)
   ========================================================================== */
@media (max-width: 768px) {
  #hero,
  .hero-slide,
  .deck-hud-line[data-slide-id="hero"],
  .deck-backdrop-layer[data-backdrop-id="hero"] {
    display: none !important;
  }
}

.sb-admin-tags-dock {
  position: fixed;
  right: 24px;
  left: auto;
  top: 86px;
  bottom: auto;
  width: 240px;
  height: 420px;
  max-height: min(440px, calc(100vh - 280px));
  z-index: 99990;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
  transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1), transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), width 0.28s ease;
}

.sb-admin-tags-dock.is-dragging {
  transition: none !important;
  user-select: none !important;
  cursor: grabbing !important;
}

/* Visibility: only shown for admin */
body:not(.is-admin):not(.sb-admin-browsing) .sb-admin-tags-dock {
  display: none !important;
  pointer-events: none !important;
}

/* Auto-hide during full-screen modal overlays (keep active for articles so admin can tag them) */
body.is-photo-lightbox-open .sb-admin-tags-dock,
body.is-video-lightbox-open .sb-admin-tags-dock,
body.is-welcome-open .sb-admin-tags-dock {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateX(16px) !important;
}

/* Article In-Reader Admin Tagging Button */
.article-admin-add-tag-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px dashed rgba(52, 211, 153, 0.45);
  color: #34d399;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 2px 9px;
  border-radius: 9999px;
  cursor: pointer;
  vertical-align: middle;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.article-admin-add-tag-btn:hover {
  background: rgba(16, 185, 129, 0.24);
  border-color: rgba(52, 211, 153, 0.85);
  color: #6ee7b7;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
}

.article-admin-add-tag-btn:active {
  transform: translateY(0);
}

/* Visibility: only shown for admin */
body:not(.is-admin):not(.sb-admin-browsing) .article-admin-add-tag-btn {
  display: none !important;
}

/* Article Tag Manager Popover */
.sb-article-tag-popover {
  position: absolute;
  z-index: 99999;
  width: 310px;
  max-width: calc(100vw - 32px);
  background: rgba(11, 18, 32, 0.96);
  border: 1px solid rgba(52, 211, 153, 0.35);
  border-radius: 16px;
  padding: 12px;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 20px 48px -10px rgba(0, 0, 0, 0.8), 0 0 24px rgba(16, 185, 129, 0.18);
  animation: sbTagPopoverIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes sbTagPopoverIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.sb-article-tag-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sb-article-tag-popover-title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #a7f3d0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sb-article-tag-popover-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  padding: 2px 6px;
  font-size: 0.85rem;
  border-radius: 6px;
}

.sb-article-tag-popover-close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.sb-article-tag-popover-section-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.55);
  margin: 8px 0 5px 0;
}

.sb-article-tag-access-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}

.sb-article-tag-access-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #cbd5e1;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.16s ease;
}

.sb-article-tag-access-btn:hover {
  background: rgba(52, 211, 153, 0.15);
  border-color: rgba(52, 211, 153, 0.4);
  color: #fff;
}

.sb-article-tag-access-btn.is-active {
  background: rgba(16, 185, 129, 0.25);
  border-color: #10b981;
  color: #34d399;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
}

.sb-article-tag-filter {
  width: 100%;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 6px 10px;
  color: #fff;
  font-size: 0.75rem;
  margin-bottom: 8px;
  outline: none;
  box-sizing: border-box;
}

.sb-article-tag-filter:focus {
  border-color: #34d399;
}

.sb-article-tag-topics-list {
  max-height: 160px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 8px;
}

.sb-article-tag-topic-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  color: #e2e8f0;
  font-size: 0.72rem;
  cursor: pointer;
  transition: background 0.14s ease;
}

.sb-article-tag-topic-item:hover {
  background: rgba(52, 211, 153, 0.12);
  color: #fff;
}

.sb-article-tag-topic-item.is-active {
  background: rgba(16, 185, 129, 0.18);
  color: #34d399;
  font-weight: 600;
}

.sb-article-tag-topic-item .topic-check {
  font-size: 0.7rem;
  color: #34d399;
  opacity: 0;
}

.sb-article-tag-topic-item.is-active .topic-check {
  opacity: 1;
}

/* Badge remove button on hover for admin */
body.is-admin .item-tag-badge,
body.sb-admin-browsing .item-tag-badge {
  position: relative;
}

/* Topic tags on items: click-to-remove hover styles for admin */
body.is-admin .item-topic-badges .item-tag-badge,
body.sb-admin-browsing .item-topic-badges .item-tag-badge,
body.is-admin .album-card-badges .album-badge-category,
body.sb-admin-browsing .album-card-badges .album-badge-category,
body.is-admin .article-badge-tag,
body.sb-admin-browsing .article-badge-tag,
body.is-admin .is-admin-topic-tag,
body.sb-admin-browsing .is-admin-topic-tag {
  cursor: pointer !important;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

body.is-admin .item-topic-badges .item-tag-badge:hover,
body.sb-admin-browsing .item-topic-badges .item-tag-badge:hover,
body.is-admin .album-card-badges .album-badge-category:hover,
body.sb-admin-browsing .album-card-badges .album-badge-category:hover,
body.is-admin .article-badge-tag:hover,
body.sb-admin-browsing .article-badge-tag:hover,
body.is-admin .is-admin-topic-tag:hover,
body.sb-admin-browsing .is-admin-topic-tag:hover {
  filter: brightness(1.15) !important;
  transform: translateY(-1px) !important;
  text-decoration: none !important;
}

body.is-admin .item-topic-badges .item-tag-badge:hover .badge-text,
body.sb-admin-browsing .item-topic-badges .item-tag-badge:hover .badge-text,
body.is-admin .album-card-badges .album-badge-category:hover .badge-text,
body.sb-admin-browsing .album-card-badges .album-badge-category:hover .badge-text,
body.is-admin .article-badge-tag:hover .badge-text,
body.sb-admin-browsing .article-badge-tag:hover .badge-text,
body.is-admin .is-admin-topic-tag:hover .badge-text,
body.sb-admin-browsing .is-admin-topic-tag:hover .badge-text {
  text-decoration: none !important;
}

.article-badge-remove-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  background: rgba(0, 0, 0, 0.45);
  border: none;
  color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  width: 14px;
  height: 14px;
  font-size: 8px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  vertical-align: middle;
}

.article-badge-remove-btn:hover {
  background: #ef4444;
  color: #fff;
}

/* Main Container */
.tags-dock-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: rgba(11, 18, 32, 0.88);
  border: 1px solid rgba(52, 211, 153, 0.26);
  border-radius: 20px;
  padding: 12px 10px;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 
    0 16px 40px -10px rgba(0, 0, 0, 0.65),
    0 0 24px rgba(16, 185, 129, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: hidden;
  box-sizing: border-box;
  overscroll-behavior: contain;
}

/* Header */
.tags-dock-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 8px;
  cursor: grab;
  touch-action: none;
}

.tags-dock-header:active,
.sb-admin-tags-dock.is-dragging .tags-dock-header {
  cursor: grabbing;
}

.tags-dock-drag-grip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  font-size: 0.72rem;
  margin-right: 2px;
  cursor: grab;
  transition: color 0.18s ease;
}

.tags-dock-header:hover .tags-dock-drag-grip {
  color: #34d399;
}

.tags-dock-title-group {
  display: flex;
  align-items: center;
  gap: 7px;
}

.tags-dock-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  font-size: 0.72rem;
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.2);
}

.tags-dock-title {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #f1f5f9;
  text-transform: uppercase;
}

.tags-dock-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 6px;
  border-radius: 9999px;
  background: rgba(52, 211, 153, 0.18);
  border: 1px solid rgba(52, 211, 153, 0.35);
  color: #a7f3d0;
  font-size: 0.64rem;
  font-weight: 700;
}

.tags-dock-header-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}

.tags-dock-collapse-btn,
.tags-dock-version-btn,
.tags-dock-sort-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: #94a3b8;
  font-size: 0.68rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tags-dock-collapse-btn:hover,
.tags-dock-version-btn:hover,
.tags-dock-sort-btn:hover {
  background: rgba(52, 211, 153, 0.15);
  border-color: rgba(52, 211, 153, 0.35);
  color: #ffffff;
}

.tags-dock-sort-btn.is-active {
  background: rgba(16, 185, 129, 0.22);
  border-color: rgba(52, 211, 153, 0.5);
  color: #34d399;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.25);
}

/* Search Wrap */
.tags-dock-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 7px;
}

.tags-dock-search-icon {
  position: absolute;
  left: 9px;
  font-size: 0.68rem;
  color: #64748b;
  pointer-events: none;
}

.tags-dock-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 5px 22px 5px 26px;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: #f8fafc;
  font-size: 0.72rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.tags-dock-search-input:focus {
  border-color: rgba(52, 211, 153, 0.5);
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.2);
}

.tags-dock-search-clear {
  position: absolute;
  right: 6px;
  background: transparent;
  border: none;
  color: #64748b;
  font-size: 0.65rem;
  cursor: pointer;
  padding: 2px;
}

.tags-dock-search-clear:hover {
  color: #f1f5f9;
}

/* Category Tabs */
.tags-dock-category-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.tags-dock-category-tabs::-webkit-scrollbar {
  display: none;
}

.tags-dock-tab {
  flex: 1;
  text-align: center;
  padding: 5px 8px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.04);
  color: #94a3b8;
  font-size: 0.68rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.tags-dock-tab:hover {
  background: rgba(52, 211, 153, 0.1);
  color: #ffffff;
}

.tags-dock-tab.is-active {
  background: rgba(16, 185, 129, 0.22);
  border-color: rgba(52, 211, 153, 0.45);
  color: #34d399;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.2);
}

/* Scrollable List */
.tags-dock-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 3px;
  min-height: 80px;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Individual Draggable Tag Chip */
.sb-dock-tag {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 9px 6px 7px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(15, 23, 42, 0.6);
  color: #cbd5e1;
  font-size: 0.74rem;
  cursor: grab;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.sb-dock-tag:hover {
  color: #ffffff;
  background: rgba(52, 211, 153, 0.12);
  border-color: rgba(52, 211, 153, 0.35);
  transform: translateX(3px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3), 0 0 12px rgba(16, 185, 129, 0.15);
}

.sb-dock-tag.is-dragging {
  opacity: 0.45;
  cursor: grabbing;
  transform: scale(0.96);
  border-color: #34d399;
}

.sb-dock-tag.is-stamping {
  background: linear-gradient(135deg, rgba(5, 150, 105, 0.9) 0%, rgba(16, 185, 129, 0.95) 100%) !important;
  border-color: #6ee7b7 !important;
  color: #ffffff !important;
  box-shadow: 0 0 16px rgba(52, 211, 153, 0.5) !important;
  animation: pulse-stamping 1.8s infinite ease-in-out;
}

@keyframes pulse-stamping {
  0%, 100% { box-shadow: 0 0 14px rgba(52, 211, 153, 0.4); }
  50% { box-shadow: 0 0 24px rgba(52, 211, 153, 0.75); }
}

.dock-tag-grip {
  display: inline-flex;
  align-items: center;
  color: #475569;
  font-size: 0.64rem;
  transition: color 0.2s;
}

.sb-dock-tag:hover .dock-tag-grip {
  color: #34d399;
}

.dock-tag-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  font-size: 0.7rem;
  color: #10b981;
}

.dock-tag-name {
  flex: 1;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: text;
}

.dock-tag-rename-input {
  width: 100%;
  min-width: 60px;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid #10b981;
  border-radius: 4px;
  color: #ffffff;
  font-size: 0.74rem;
  font-weight: 600;
  font-family: inherit;
  padding: 1px 5px;
  outline: none;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
}

.item-tag-badge .dock-tag-rename-input,
.article-badge .dock-tag-rename-input {
  font-size: 0.7rem;
  padding: 0 4px;
  height: 18px;
  line-height: 18px;
}

.dock-tag-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.06);
  color: #94a3b8;
  font-size: 0.62rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s ease;
}

.sb-dock-tag:hover .dock-tag-count {
  background: rgba(16, 185, 129, 0.25);
  color: #6ee7b7;
}

.dock-tag-count:hover {
  background: rgba(52, 211, 153, 0.4) !important;
  color: #ffffff !important;
  transform: scale(1.08);
}

/* Visibility / Access Rights Tag Accents in Admin Dock:
   - Private: PURPLE
   - Family: RED
   - Friends: ORANGE
   - Public: GREEN
   - Topics & Other Tags: LIGHT GREEN */
.sb-dock-tag[data-tag-slug="private"] .dock-tag-icon {
  color: #c084fc;
}

.sb-dock-tag[data-tag-slug="family"] .dock-tag-icon {
  color: #ef4444;
}

.sb-dock-tag[data-tag-slug="friends"] .dock-tag-icon {
  color: #f97316;
}

.sb-dock-tag[data-tag-slug="public"] .dock-tag-icon {
  color: #10b981;
}

/* Topics, Categories & Other Tags: LIGHT GREEN */
.sb-dock-tag:not([data-tag-slug="friends"]):not([data-tag-slug="family"]):not([data-tag-slug="private"]):not([data-tag-slug="public"]) .dock-tag-icon {
  color: #4ade80;
}

/* Add Tag Form */
.tags-dock-add-form {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.tags-dock-add-input {
  flex: 1;
  box-sizing: border-box;
  padding: 4px 8px;
  background: rgba(15, 23, 42, 0.5);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: #f1f5f9;
  font-size: 0.68rem;
  outline: none;
  transition: all 0.2s ease;
}

.tags-dock-add-input:focus {
  border-style: solid;
  border-color: rgba(52, 211, 153, 0.5);
  background: rgba(15, 23, 42, 0.85);
}

.tags-dock-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid rgba(52, 211, 153, 0.3);
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  font-size: 0.68rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tags-dock-add-btn:hover {
  background: #10b981;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.4);
}

/* Footer Hint */
.tags-dock-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 6px;
  margin-top: 4px;
}

.tags-dock-hint {
  font-size: 0.62rem;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* Collapsed Dock State */
.sb-admin-tags-dock.is-collapsed {
  width: 44px;
  bottom: auto;
  height: 44px;
}

.sb-admin-tags-dock.is-collapsed .tags-dock-container {
  display: none;
}

.tags-dock-tab-handle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(11, 18, 32, 0.88);
  border: 1px solid rgba(52, 211, 153, 0.35);
  color: #34d399;
  font-size: 0.9rem;
  cursor: grab;
  touch-action: none;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 14px rgba(16, 185, 129, 0.2);
  transition: all 0.2s ease;
}

.tags-dock-tab-handle:active,
.sb-admin-tags-dock.is-dragging .tags-dock-tab-handle {
  cursor: grabbing;
}

.tags-dock-tab-handle:hover {
  background: rgba(16, 185, 129, 0.25);
  border-color: #34d399;
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 20px rgba(52, 211, 153, 0.4);
}

.sb-admin-tags-dock.is-collapsed .tags-dock-tab-handle {
  display: flex;
}

/* ==========================================================================
   Drag & Drop Targets Styling & Feedback
   ========================================================================== */
body.is-dragging-tag .blog-card,
body.is-dragging-tag .photo-card,
body.is-dragging-tag .recent-photo-timeline-card,
body.is-dragging-tag .recent-video-timeline-card,
body.is-dragging-tag .hero-polaroid-item,
body.is-dragging-tag .photo-album-card,
body.is-dragging-tag .video-album-card,
body.is-dragging-tag .photo-lightbox-card,
body.is-dragging-tag .video-lightbox-player-card,
body.is-dragging-tag .bento-card {
  outline: 2px dashed rgba(52, 211, 153, 0.45) !important;
  outline-offset: 4px;
  cursor: copy !important;
  transition: outline 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease !important;
}

body.is-dragging-tag .blog-card.is-drag-over,
body.is-dragging-tag .photo-card.is-drag-over,
body.is-dragging-tag .recent-photo-timeline-card.is-drag-over,
body.is-dragging-tag .recent-video-timeline-card.is-drag-over,
body.is-dragging-tag .hero-polaroid-item.is-drag-over,
body.is-dragging-tag .photo-album-card.is-drag-over,
body.is-dragging-tag .video-album-card.is-drag-over,
body.is-dragging-tag .photo-lightbox-card.is-drag-over,
body.is-dragging-tag .video-lightbox-player-card.is-drag-over,
body.is-dragging-tag .bento-card.is-drag-over {
  outline: 2px solid #10b981 !important;
  outline-offset: 6px !important;
  box-shadow: 0 0 32px rgba(16, 185, 129, 0.6), inset 0 0 20px rgba(16, 185, 129, 0.25) !important;
  transform: scale(1.025) !important;
}

/* ==========================================================================
   Item Dragging onto Tags Styling & Feedback (Reciprocal Tagging)
   ========================================================================== */
body.is-admin .sb-admin-item-draggable,
body.sb-admin-browsing .sb-admin-item-draggable {
  -webkit-user-drag: element;
  user-drag: element;
  cursor: grab;
}

body.is-admin .sb-admin-item-draggable:active,
body.sb-admin-browsing .sb-admin-item-draggable:active {
  cursor: grabbing;
}

body.is-admin .sb-admin-item-draggable img,
body.is-admin .sb-admin-item-draggable a,
body.sb-admin-browsing .sb-admin-item-draggable img,
body.sb-admin-browsing .sb-admin-item-draggable a {
  -webkit-user-drag: none;
  user-drag: none;
}

body.is-admin .sb-admin-item-draggable button,
body.is-admin .sb-admin-item-draggable input,
body.is-admin .sb-admin-item-draggable .sb-item-remove-btn,
body.is-admin .sb-admin-item-draggable .article-badge-remove-btn,
body.sb-admin-browsing .sb-admin-item-draggable button,
body.sb-admin-browsing .sb-admin-item-draggable input,
body.sb-admin-browsing .sb-admin-item-draggable .sb-item-remove-btn,
body.sb-admin-browsing .sb-admin-item-draggable .article-badge-remove-btn {
  cursor: pointer !important;
}

/* Card currently being dragged */
.sb-admin-item-draggable.is-being-dragged {
  opacity: 0.55 !important;
  transform: scale(0.98) !important;
  outline: 2px dashed #10b981 !important;
  outline-offset: 4px !important;
  box-shadow: 0 0 24px rgba(16, 185, 129, 0.4) !important;
}

/* Explicit Guarantee: Active article readers and single post views must NEVER show drag outlines, dotted borders, or dimming */
.blog-reader-view,
.blog-reader-card,
.blog-reader-stage,
.blog-reader-article-wrap,
.single-post-deck-viewport,
.single-post-deck-slide,
.single-post-deck-container,
.single-post-reader-view,
.single-post-article,
.features-reader-view,
.features-reader-card {
  outline: none !important;
  -webkit-user-drag: none !important;
  user-drag: none !important;
}

.blog-reader-view.is-being-dragged,
.blog-reader-card.is-being-dragged,
.blog-reader-stage.is-being-dragged,
.single-post-reader-view.is-being-dragged,
.single-post-article.is-being-dragged,
.features-reader-view.is-being-dragged,
.features-reader-card.is-being-dragged {
  opacity: 1 !important;
  transform: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Body state when an item card is being dragged */
body.is-dragging-item .sb-admin-tags-dock {
  border-color: rgba(52, 211, 153, 0.6) !important;
  box-shadow: 0 0 32px rgba(16, 185, 129, 0.4), 0 20px 50px rgba(0, 0, 0, 0.75) !important;
}

body.is-dragging-item .sb-dock-tag {
  border: 1px dashed rgba(52, 211, 153, 0.45) !important;
  cursor: copy !important;
}

body.is-dragging-item .sb-dock-tag:hover,
body.is-dragging-item .sb-dock-tag.is-item-drag-over {
  transform: scale(1.06) translateX(4px) !important;
  border: 1px solid #10b981 !important;
  background: rgba(16, 185, 129, 0.25) !important;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.5) !important;
  color: #ffffff !important;
}

body.is-dragging-item .tags-dock-tab-handle {
  animation: pulseTabHandle 1.2s infinite ease-in-out !important;
}

@keyframes pulseTabHandle {
  0%, 100% { transform: scale(1); box-shadow: 0 0 10px rgba(16, 185, 129, 0.4); }
  50% { transform: scale(1.12); box-shadow: 0 0 25px rgba(16, 185, 129, 0.85); }
}

@keyframes dockTagDropSuccess {
  0% { transform: scale(1); }
  35% { transform: scale(1.15); background: rgba(16, 185, 129, 0.5); box-shadow: 0 0 24px rgba(52, 211, 153, 0.8); }
  100% { transform: scale(1); }
}

.dock-tag-drop-success {
  animation: dockTagDropSuccess 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Any tag badge or tag cloud item acting as drop target */
body.is-dragging-item .item-tag-badge,
body.is-dragging-item .tag-cloud-item {
  cursor: copy !important;
}

body.is-dragging-item .item-tag-badge.is-item-drag-over,
body.is-dragging-item .tag-cloud-item.is-item-drag-over {
  transform: scale(1.15) !important;
  box-shadow: 0 0 18px rgba(16, 185, 129, 0.7) !important;
  border-color: #10b981 !important;
}

/* Stamping mode cursor and hover styles */
body.is-stamping-tag .blog-card,
body.is-stamping-tag .photo-card,
body.is-stamping-tag .recent-photo-timeline-card,
body.is-stamping-tag .recent-video-timeline-card,
body.is-stamping-tag .hero-polaroid-item,
body.is-stamping-tag .photo-album-card,
body.is-stamping-tag .video-album-card,
body.is-stamping-tag .bento-card {
  cursor: pointer !important;
}

body.is-stamping-tag .blog-card:hover,
body.is-stamping-tag .photo-card:hover,
body.is-stamping-tag .recent-photo-timeline-card:hover,
body.is-stamping-tag .recent-video-timeline-card:hover,
body.is-stamping-tag .hero-polaroid-item:hover,
body.is-stamping-tag .photo-album-card:hover,
body.is-stamping-tag .video-album-card:hover,
body.is-stamping-tag .bento-card:hover {
  outline: 2px solid #34d399 !important;
  outline-offset: 4px;
  box-shadow: 0 0 20px rgba(52, 211, 153, 0.45) !important;
}

/* Drop Success Animation */
@keyframes tagDropSuccessPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.8), 0 0 30px rgba(16, 185, 129, 0.6);
    transform: scale(1.03);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(52, 211, 153, 0), 0 0 40px rgba(16, 185, 129, 0.8);
    transform: scale(1.02);
  }
  100% {
    box-shadow: none;
    transform: scale(1);
  }
}

.tag-drop-success {
  animation: tagDropSuccessPulse 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

/* Dynamic Tag Badge appended on drop */
.dock-dropped-tag-badge {
  display: inline-flex !important;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 9999px;
  letter-spacing: 0.02em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  white-space: nowrap;
  background: rgba(5, 150, 105, 0.88);
  border: 1px solid rgba(110, 231, 183, 0.7);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.35);
  animation: badgePopIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes badgePopIn {
  from {
    transform: scale(0.6);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Ensure item-tag-badge is visible in admin testing */
body.is-admin .item-tag-badge,
body.sb-admin-browsing .item-tag-badge {
  display: inline-flex !important;
}

/* Responsive adjustment for compact screens */
@media (max-width: 768px) {
  .sb-admin-tags-dock {
    right: 12px;
    left: auto;
    top: 80px;
  }
  .sb-admin-tags-dock:not(.is-collapsed) {
    width: 220px;
  }
}

/* ==========================================================================
   Access Tag Visitors Popover (Liquid Glass Hover Inspection)
   ========================================================================== */
.sb-access-visitors-popover {
  position: fixed;
  z-index: 100050;
  width: 320px;
  max-width: calc(100vw - 32px);
  border-radius: 16px;
  padding: 1px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px) scale(0.98);
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.22s;
  box-sizing: border-box;
}

.sb-access-visitors-popover.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.access-popover-glass {
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.96) 0%, rgba(9, 14, 26, 0.98) 100%);
  backdrop-filter: blur(24px) saturate(190%);
  -webkit-backdrop-filter: blur(24px) saturate(190%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.75), 0 0 1px 1px rgba(255, 255, 255, 0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Header */
.access-popover-header {
  padding: 14px 16px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.02);
}

.access-popover-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.access-popover-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.access-popover-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.01em;
}

.access-popover-badge {
  margin-left: auto;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.08);
  color: #94a3b8;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.access-popover-desc {
  font-size: 0.73rem;
  color: #94a3b8;
  margin: 6px 0 0;
  line-height: 1.4;
}

/* Search Box inside Popover */
.access-popover-search-wrap {
  display: flex;
  align-items: center;
  position: relative;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.25);
}

.access-popover-search-icon {
  position: absolute;
  left: 22px;
  color: #64748b;
  font-size: 0.72rem;
  pointer-events: none;
}

.access-popover-search-input {
  width: 100%;
  height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(15, 23, 42, 0.7);
  color: #f1f5f9;
  font-size: 0.76rem;
  padding: 0 28px 0 30px;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}

.access-popover-search-input:focus {
  border-color: rgba(52, 211, 153, 0.5);
  background: rgba(15, 23, 42, 0.95);
}

.access-popover-search-clear {
  position: absolute;
  right: 20px;
  width: 18px;
  height: 18px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.12);
  border: none;
  color: #94a3b8;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.access-popover-search-clear:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

/* Body & List */
.access-popover-body {
  padding: 6px 8px;
  max-height: 250px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.access-popover-body::-webkit-scrollbar {
  width: 4px;
}

.access-popover-body::-webkit-scrollbar-track {
  background: transparent;
}

.access-popover-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 4px;
}

.access-popover-body::-webkit-scrollbar-thumb:hover {
  background: rgba(52, 211, 153, 0.45);
}

.access-popover-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.access-visitor-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 8px;
  border-radius: 8px;
  transition: background 0.15s ease;
}

.access-visitor-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.access-visitor-item.is-admin {
  background: rgba(192, 132, 252, 0.08);
  border: 1px solid rgba(192, 132, 252, 0.2);
}

.visitor-avatar {
  width: 24px;
  height: 24px;
  min-width: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 700;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
  letter-spacing: -0.02em;
}

.visitor-info {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.visitor-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: #f1f5f9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.visitor-role-badge {
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(192, 132, 252, 0.22);
  color: #d8b4fe;
  border: 1px solid rgba(192, 132, 252, 0.35);
  margin-left: auto;
}

.access-popover-empty {
  padding: 18px 12px;
  text-align: center;
  color: #64748b;
  font-size: 0.74rem;
}

/* Info Card (Public View) */
.access-popover-info-card {
  padding: 16px 14px;
  text-align: center;
}

.info-card-icon {
  font-size: 1.8rem;
  color: #10b981;
  margin-bottom: 8px;
}

.info-card-text strong {
  display: block;
  font-size: 0.82rem;
  color: #ffffff;
  margin-bottom: 4px;
}

.info-card-text p {
  margin: 0;
  font-size: 0.72rem;
  color: #94a3b8;
  line-height: 1.45;
}

/* Footer */
.access-popover-footer {
  padding: 8px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.25);
  font-size: 0.68rem;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.access-popover-footer-tip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* Tier-Specific Themes */
.sb-access-visitors-popover.tier-family .access-popover-icon {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}
.sb-access-visitors-popover.tier-family .access-popover-badge {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.35);
}
.sb-access-visitors-popover.tier-family .visitor-avatar {
  background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
}
.sb-access-visitors-popover.tier-family {
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.75), 0 0 16px rgba(239, 68, 68, 0.18);
}

.sb-access-visitors-popover.tier-friends .access-popover-icon {
  background: rgba(249, 115, 22, 0.2);
  color: #f97316;
}
.sb-access-visitors-popover.tier-friends .access-popover-badge {
  background: rgba(249, 115, 22, 0.15);
  color: #fb923c;
  border-color: rgba(249, 115, 22, 0.35);
}
.sb-access-visitors-popover.tier-friends .visitor-avatar {
  background: linear-gradient(135deg, #f97316 0%, #c2410c 100%);
}
.sb-access-visitors-popover.tier-friends {
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.75), 0 0 16px rgba(249, 115, 22, 0.18);
}

.sb-access-visitors-popover.tier-private .access-popover-icon {
  background: rgba(192, 132, 252, 0.2);
  color: #c084fc;
}
.sb-access-visitors-popover.tier-private .access-popover-badge {
  background: rgba(192, 132, 252, 0.15);
  color: #d8b4fe;
  border-color: rgba(192, 132, 252, 0.35);
}
.sb-access-visitors-popover.tier-private .visitor-avatar {
  background: linear-gradient(135deg, #c084fc 0%, #7e22ce 100%);
}
.sb-access-visitors-popover.tier-private {
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.75), 0 0 16px rgba(192, 132, 252, 0.18);
}

.sb-access-visitors-popover.tier-public .access-popover-icon {
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
}
.sb-access-visitors-popover.tier-public .access-popover-badge {
  background: rgba(16, 185, 129, 0.15);
  color: #6ee7b7;
  border-color: rgba(16, 185, 129, 0.35);
}
.sb-access-visitors-popover.tier-public .visitor-avatar {
  background: linear-gradient(135deg, #10b981 0%, #047857 100%);
}
.sb-access-visitors-popover.tier-public {
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.75), 0 0 16px rgba(16, 185, 129, 0.18);
}

/* ==========================================================================
   Admin Item Removal (Mouseover (x) and Click to Approve)
   ========================================================================== */

/* Remove Button hidden by default for non-admins (positioned at bottom-right of item card) */
.sb-item-remove-btn {
  display: none !important;
  position: absolute;
  top: auto;
  bottom: 10px;
  right: 10px;
  z-index: 45;
  height: 28px;
  min-width: 28px;
  border-radius: 9999px;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(239, 68, 68, 0.45);
  color: #f87171;
  font-size: 0.75rem;
  padding: 0 7px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.85);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.2s ease,
              border-color 0.2s ease,
              color 0.2s ease,
              box-shadow 0.2s ease,
              padding 0.25s ease;
  user-select: none;
  -webkit-user-select: none;
}

/* Admin visibility */
body.is-admin .sb-item-remove-btn,
body.sb-admin-browsing .sb-item-remove-btn,
body.logged-in:not(.sb-testing-visitor) .sb-item-remove-btn {
  display: inline-flex !important;
}

/* Shift zoom badge on album cards in admin mode to avoid bottom-right overlap */
body.is-admin .photo-album-card .album-card-zoom-badge,
body.sb-admin-browsing .photo-album-card .album-card-zoom-badge,
body.logged-in:not(.sb-testing-visitor) .photo-album-card .album-card-zoom-badge {
  right: 44px !important;
}

/* ==========================================================================
   Liquid Glass Tooltip: Permanently Suppressed
   ========================================================================== */
#sbLiquidGlassTooltip,
.sb-liquid-glass-tooltip,
.sb-liquid-glass-tooltip.is-visible {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: scale(0) !important;
}

/* Card hover reveals (x) */
.blog-card:hover .sb-item-remove-btn,
.photo-card:hover .sb-item-remove-btn,
.photo-album-card:hover .sb-item-remove-btn,
.video-album-card:hover .sb-item-remove-btn,
.recent-video-timeline-card:hover .sb-item-remove-btn,
.recent-photo-timeline-card:hover .sb-item-remove-btn,
.hero-polaroid-item:hover .sb-item-remove-btn,
.spotlight-card:hover .sb-item-remove-btn,
.bento-card:hover .sb-item-remove-btn,
.sb-item-remove-btn.is-confirming,
.sb-item-remove-btn:focus-visible {
  opacity: 0.92;
  pointer-events: auto;
  transform: scale(1);
}

.sb-item-remove-btn:hover {
  opacity: 1;
  color: #ffffff;
  background: rgba(220, 38, 38, 0.75);
  border-color: #ef4444;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.5);
  transform: scale(1.05);
}

/* Icon & Label toggles */
.sb-item-remove-btn .sb-item-remove-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.sb-item-remove-btn .sb-item-remove-label {
  display: none;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
  gap: 5px;
  align-items: center;
}

/* First click: Enter Confirmation State */
.sb-item-remove-btn.is-confirming {
  opacity: 1 !important;
  pointer-events: auto !important;
  background: #dc2626 !important;
  border-color: #f87171 !important;
  color: #ffffff !important;
  padding: 0 11px !important;
  box-shadow: 0 0 16px rgba(220, 38, 38, 0.75), 0 4px 12px rgba(0, 0, 0, 0.5) !important;
  transform: scale(1.04) !important;
  animation: sb-pulse-approve 1.5s infinite alternate ease-in-out;
}

.sb-item-remove-btn.is-confirming .sb-item-remove-icon {
  display: none;
}

.sb-item-remove-btn.is-confirming .sb-item-remove-label {
  display: inline-flex;
}

@keyframes sb-pulse-approve {
  0% {
    box-shadow: 0 0 12px rgba(220, 38, 38, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4);
    border-color: rgba(248, 113, 113, 0.7);
  }
  100% {
    box-shadow: 0 0 22px rgba(239, 68, 68, 0.9), 0 4px 14px rgba(0, 0, 0, 0.5);
    border-color: #ffffff;
  }
}

/* Card removal animation */
.sb-item-removing {
  opacity: 0 !important;
  transform: scale(0.88) translateY(-8px) !important;
  filter: blur(6px) !important;
  pointer-events: none !important;
  transition: opacity 0.38s ease, transform 0.38s cubic-bezier(0.16, 1, 0.3, 1), filter 0.38s ease !important;
}

/* Card restored pop */
.sb-item-restored {
  animation: sb-restore-pop 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes sb-restore-pop {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  60% {
    opacity: 1;
    transform: scale(1.03);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Shift card badges in admin mode so they never collide with the (x) button */
body.is-admin .blog-card-badges,
body.sb-admin-browsing .blog-card-badges,
body.logged-in:not(.sb-testing-visitor) .blog-card-badges {
  right: 42px;
}

/* Adjust photo firehose edit button on photo card if remove button present */
.photo-card .photo-card-edit-btn {
  right: 46px !important;
}

/* Floating Undo Toast */
.sb-item-undo-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99999;
  min-width: 320px;
  max-width: 440px;
  background: rgba(15, 23, 42, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-left: 4px solid #ef4444;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(239, 68, 68, 0.15);
  color: #f1f5f9;
  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  overflow: hidden;
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.sb-item-undo-toast.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.sb-item-undo-toast.is-hidden {
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  pointer-events: none;
}

.sb-undo-toast-content {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  font-size: 0.85rem;
}

.sb-undo-toast-icon {
  color: #f87171;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.sb-undo-toast-text {
  flex-grow: 1;
  line-height: 1.35;
  color: #e2e8f0;
}

.sb-undo-toast-text strong {
  color: #ffffff;
  font-weight: 600;
}

.sb-undo-toast-btn {
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.5);
  color: #fca5a5;
  border-radius: 6px;
  padding: 5px 11px;
  font-size: 0.78rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.sb-undo-toast-btn:hover {
  background: #dc2626;
  border-color: #ef4444;
  color: #ffffff;
  transform: scale(1.03);
}

.sb-undo-toast-dismiss {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  transition: color 0.2s ease;
}

.sb-undo-toast-dismiss:hover {
  color: #ffffff;
}

.sb-undo-toast-progress {
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
}

.sb-undo-toast-bar {
  height: 100%;
  background: #ef4444;
  width: 100%;
}

/* ==========================================================================
   Section Title Drag & Drop Access Tag Affordance (Admin Only)
   ========================================================================== */
.sb-section-visibility-badge {
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  vertical-align: middle !important;
  margin-left: 12px !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  padding: 3px 10px 3px 8px !important;
  border-radius: 9999px !important;
  cursor: pointer !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
  line-height: 1.2 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  overflow: visible !important;
  white-space: nowrap !important;
  filter: none !important;
  text-shadow: none !important;
  -webkit-text-fill-color: initial !important;
  text-fill-color: initial !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
}

/* Section access badges are strictly visible to admin Stefan ONLY inside approved title headings */
body.is-admin:not(.visitor-type-friend):not(.visitor-type-family):not(.visitor-type-anonymous) :is(.section-title, .hero-title, .page-title, .single-post-title, .archive-title) .sb-section-visibility-badge,
body.visitor-type-admin :is(.section-title, .hero-title, .page-title, .single-post-title, .archive-title) .sb-section-visibility-badge,
html.visitor-type-admin :is(.section-title, .hero-title, .page-title, .single-post-title, .archive-title) .sb-section-visibility-badge,
body.logged-in:not(.sb-testing-visitor):not(.visitor-type-friend):not(.visitor-type-family):not(.visitor-type-anonymous) :is(.section-title, .hero-title, .page-title, .single-post-title, .archive-title) .sb-section-visibility-badge,
body.sb-admin-browsing:not(.visitor-type-friend):not(.visitor-type-family):not(.visitor-type-anonymous) :is(.section-title, .hero-title, .page-title, .single-post-title, .archive-title) .sb-section-visibility-badge {
  display: inline-flex !important;
}

/* Any badge outside title headings is forcefully and unconditionally hidden */
body .sb-section-visibility-badge:not(.section-title *):not(.hero-title *):not(.page-title *):not(.single-post-title *):not(.archive-title *),
html body .sb-section-visibility-badge:not(.section-title *):not(.hero-title *):not(.page-title *):not(.single-post-title *):not(.archive-title *),
body.sb-admin-browsing .sb-section-visibility-badge:not(.section-title *):not(.hero-title *):not(.page-title *):not(.single-post-title *):not(.archive-title *),
body.is-admin .sb-section-visibility-badge:not(.section-title *):not(.hero-title *):not(.page-title *):not(.single-post-title *):not(.archive-title *) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

.sb-section-visibility-badge + .sb-section-visibility-badge {
  margin-left: 0.35rem !important;
}

/* Ensure text and icon inside section badge are always visible and not transparent from section-title gradient */
.sb-section-visibility-badge i,
.sb-section-visibility-badge span,
.sb-section-visibility-badge .badge-text {
  -webkit-text-fill-color: currentColor !important;
  text-fill-color: currentColor !important;
  display: inline-block !important;
  max-width: none !important;
  opacity: 1 !important;
  overflow: visible !important;
  visibility: visible !important;
  pointer-events: auto !important;
  text-shadow: none !important;
  filter: none !important;
}

.sb-section-visibility-badge i {
  font-size: 0.72rem !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
}

.sb-section-visibility-badge .badge-text,
.sb-section-visibility-badge span {
  font-size: 0.68rem !important;
  font-family: var(--font-mono, monospace) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  margin-left: 0 !important;
}

.sb-section-visibility-badge:hover {
  transform: scale(1.05) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5) !important;
}

/* While dragging an access tag, highlight section headers and titles as drop zones */
body.is-dragging-access-tag .section-title,
body.is-dragging-access-tag .section-header {
  transition: all 0.2s ease;
}

body.is-dragging-access-tag .section-title {
  cursor: copy !important;
  outline: 2px dashed rgba(52, 211, 153, 0.45);
  outline-offset: 6px;
  border-radius: 12px;
  background: rgba(16, 185, 129, 0.05);
}

.section-title.is-drag-over,
.section-title.is-section-drag-over,
.section-header.is-drag-over,
.section-header.is-section-drag-over,
.photos-title-row.is-drag-over,
.photos-title-wrap.is-drag-over {
  outline: 2px solid #34d399 !important;
  outline-offset: 8px !important;
  border-radius: 14px;
  background: rgba(16, 185, 129, 0.16) !important;
  box-shadow: 0 0 24px rgba(52, 211, 153, 0.45) !important;
  transform: scale(1.02);
}

body.is-stamping-tag .section-title:hover {
  outline: 2px solid #34d399 !important;
  outline-offset: 6px;
  cursor: pointer !important;
  box-shadow: 0 0 20px rgba(52, 211, 153, 0.45) !important;
}

/* ==========================================================================
   Section Visibility Badges - Strictly Confined to Approved Title Headings
   Eliminate any rogue badges in slide headers, containers, or bento cards
   ========================================================================== */
.sb-section-visibility-badge:not(.section-title *):not(.hero-title *):not(.page-title *):not(.single-post-title *):not(.archive-title *),
.section-header > .sb-section-visibility-badge,
.features-categories-view > .sb-section-visibility-badge,
.features-categories-view .bento-card .sb-section-visibility-badge,
.deck-slide > .sb-section-visibility-badge,
.deck-container > .sb-section-visibility-badge,
:is(#contact, #about, #hero, #features, .deck-slide, .deck-container) > .sb-section-visibility-badge,
:is(#contact, #about, #hero, #features, .deck-slide, .deck-container) .section-header > .sb-section-visibility-badge:not(.section-title *),
:is(#contact, #about, #hero, #features) .sb-section-visibility-badge:not(.section-title *):not(.hero-title *),
#features .item-tag-badge:not(.section-title *),
#features .article-badge:not(.section-title *),
#features .album-card-badges,
#features .item-access-badges,
#features .item-topic-badges,
#features .dock-dropped-tag-badge,
#features > .sb-section-visibility-badge,
#features .section-header > .sb-section-visibility-badge,
#features .features-categories-view > .sb-section-visibility-badge,
#features .features-categories-view .item-tag-badge:not(.section-title *),
#features .features-categories-view .article-badge:not(.section-title *),
#features .features-categories-view .album-card-badges,
#features .features-categories-view .item-access-badges,
#features .bento-grid .album-card-badges,
#features .bento-grid .item-access-badges,
#features .bento-grid .item-tag-badge,
#features .bento-card .album-card-badges,
#features .bento-card .item-access-badges,
#features .bento-card .item-tag-badge,
#contact .album-card-badges,
#contact .item-access-badges,
#contact .item-topic-badges,
#contact .dock-dropped-tag-badge,
#contact .item-tag-badge:not(.section-title *),
#contact .article-badge:not(.section-title *),
#contact .sb-section-visibility-badge:not(.section-title *),
#contact > .sb-section-visibility-badge,
#contact .section-header > .sb-section-visibility-badge,
#contact .section-header > *:not(.section-title):not(.bento-slick-green-hr):not(.slick-green-scroller-hr):not(.contact-title-row),
#about .album-card-badges,
#about .item-access-badges,
#about .item-topic-badges,
#about .dock-dropped-tag-badge,
#about .item-tag-badge:not(.section-title *),
#about .article-badge:not(.section-title *),
#about .sb-section-visibility-badge:not(.section-title *),
#about > .sb-section-visibility-badge,
#about .section-header > .sb-section-visibility-badge,
#about .section-header > *:not(.section-title):not(.about-title):not(.bento-slick-green-hr):not(.slick-green-scroller-hr),
#hero .album-card-badges,
#hero .item-access-badges,
#hero .item-topic-badges,
#hero .dock-dropped-tag-badge,
#hero .item-tag-badge:not(.hero-title *):not(.hero-polaroid-item *),
#hero .article-badge:not(.hero-title *):not(.hero-polaroid-item *),
#hero .sb-section-visibility-badge:not(.hero-title *),
#hero > .sb-section-visibility-badge,
.section-header > .album-card-badges,
.section-header > .item-access-badges,
.section-header > .item-tag-badge:not(.section-title *),
.deck-slide > .album-card-badges,
.deck-slide > .item-access-badges,
.deck-container > .album-card-badges,
.deck-container > .item-access-badges {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

/* ==========================================================================
   Item Tags: Icon-Only Resting State & Mouse-Over Details Reveal
   Applies to item badges across cards/slides, while keeping section title
   badges (.sb-section-visibility-badge) full indicators.
   ========================================================================== */
.item-tag-badge:not(.sb-section-visibility-badge),
.blog-card .article-badge:not(.sb-section-visibility-badge),
.album-card-badges .article-badge:not(.sb-section-visibility-badge),
.album-card-badges .album-badge-category,
.album-card-badges .album-badge-visibility,
.item-access-badges .article-badge:not(.sb-section-visibility-badge),
.item-topic-badges .article-badge:not(.sb-section-visibility-badge),
.photo-card .album-badge-category,
.video-card .album-badge-category,
.recent-photo-card .album-badge-category,
.recent-video-card .album-badge-category,
.blog-reader-badges .article-badge:not(.sb-section-visibility-badge),
.single-post-meta .article-badge:not(.sb-section-visibility-badge) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  min-width: 26px !important;
  max-width: 26px !important;
  height: 26px !important;
  padding: 0 !important;
  gap: 0 !important;
  border-radius: 9999px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  cursor: pointer;
  transition: width 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              max-width 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              padding 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.2s ease !important;
}

/* Centered icon inside resting badge */
.item-tag-badge:not(.sb-section-visibility-badge) i,
.blog-card .article-badge:not(.sb-section-visibility-badge) i,
.album-card-badges .article-badge:not(.sb-section-visibility-badge) i,
.album-card-badges .album-badge-category i,
.album-card-badges .album-badge-visibility i,
.item-access-badges .article-badge:not(.sb-section-visibility-badge) i,
.item-topic-badges .article-badge:not(.sb-section-visibility-badge) i,
.photo-card .album-badge-category i,
.video-card .album-badge-category i,
.recent-photo-card .album-badge-category i,
.recent-video-card .album-badge-category i,
.blog-reader-badges .article-badge:not(.sb-section-visibility-badge) i,
.single-post-meta .article-badge:not(.sb-section-visibility-badge) i {
  font-size: 0.7rem !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Badge text hidden in resting state */
.item-tag-badge:not(.sb-section-visibility-badge) .badge-text,
.blog-card .article-badge:not(.sb-section-visibility-badge) .badge-text,
.album-card-badges .article-badge:not(.sb-section-visibility-badge) .badge-text,
.album-card-badges .album-badge-category .badge-text,
.album-card-badges .album-badge-visibility .badge-text,
.item-access-badges .article-badge:not(.sb-section-visibility-badge) .badge-text,
.item-topic-badges .article-badge:not(.sb-section-visibility-badge) .badge-text,
.photo-card .album-badge-category .badge-text,
.video-card .album-badge-category .badge-text,
.recent-photo-card .album-badge-category .badge-text,
.recent-video-card .album-badge-category .badge-text,
.blog-reader-badges .article-badge:not(.sb-section-visibility-badge) .badge-text,
.single-post-meta .article-badge:not(.sb-section-visibility-badge) .badge-text {
  display: inline-block !important;
  max-width: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
  transition: max-width 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.2s ease,
              margin 0.2s ease;
  line-height: 1.2 !important;
}

/* Admin remove button hidden in resting state */
.item-tag-badge:not(.sb-section-visibility-badge) .article-badge-remove-btn,
.blog-card .article-badge:not(.sb-section-visibility-badge) .article-badge-remove-btn,
.album-card-badges .article-badge:not(.sb-section-visibility-badge) .article-badge-remove-btn,
.album-card-badges .album-badge-category .article-badge-remove-btn,
.album-card-badges .album-badge-visibility .article-badge-remove-btn,
.item-access-badges .article-badge:not(.sb-section-visibility-badge) .article-badge-remove-btn,
.item-topic-badges .article-badge:not(.sb-section-visibility-badge) .article-badge-remove-btn,
.blog-reader-badges .article-badge:not(.sb-section-visibility-badge) .article-badge-remove-btn,
.single-post-meta .article-badge:not(.sb-section-visibility-badge) .article-badge-remove-btn {
  display: none !important;
  opacity: 0 !important;
  margin: 0 !important;
  width: 0 !important;
}

/* Mouse-Over / Hover / Focus: expand smoothly to reveal details */
.item-tag-badge:not(.sb-section-visibility-badge):hover,
.item-tag-badge:not(.sb-section-visibility-badge):focus-within,
.blog-card .article-badge:not(.sb-section-visibility-badge):hover,
.blog-card .article-badge:not(.sb-section-visibility-badge):focus-within,
.album-card-badges .article-badge:not(.sb-section-visibility-badge):hover,
.album-card-badges .article-badge:not(.sb-section-visibility-badge):focus-within,
.album-card-badges .album-badge-category:hover,
.album-card-badges .album-badge-category:focus-within,
.album-card-badges .album-badge-visibility:hover,
.album-card-badges .album-badge-visibility:focus-within,
.item-access-badges .article-badge:not(.sb-section-visibility-badge):hover,
.item-access-badges .article-badge:not(.sb-section-visibility-badge):focus-within,
.item-topic-badges .article-badge:not(.sb-section-visibility-badge):hover,
.item-topic-badges .article-badge:not(.sb-section-visibility-badge):focus-within,
.photo-card .album-badge-category:hover,
.photo-card .album-badge-category:focus-within,
.video-card .album-badge-category:hover,
.video-card .album-badge-category:focus-within,
.recent-photo-card .album-badge-category:hover,
.recent-photo-card .album-badge-category:focus-within,
.recent-video-card .album-badge-category:hover,
.recent-video-card .album-badge-category:focus-within {
  width: auto !important;
  min-width: 26px !important;
  max-width: 240px !important;
  padding: 0 10px 0 8px !important;
  z-index: 35 !important;
  transform: none !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6), 0 0 12px rgba(255, 255, 255, 0.12) !important;
}

/* Hover text reveals smoothly */
.item-tag-badge:not(.sb-section-visibility-badge):not(.in-reader-badge):hover .badge-text,
.item-tag-badge:not(.sb-section-visibility-badge):not(.in-reader-badge):focus-within .badge-text,
.blog-card .article-badge:not(.sb-section-visibility-badge):hover .badge-text,
.blog-card .article-badge:not(.sb-section-visibility-badge):focus-within .badge-text,
.album-card-badges .article-badge:not(.sb-section-visibility-badge):hover .badge-text,
.album-card-badges .article-badge:not(.sb-section-visibility-badge):focus-within .badge-text,
.album-card-badges .album-badge-category:hover .badge-text,
.album-card-badges .album-badge-category:focus-within .badge-text,
.album-card-badges .album-badge-visibility:hover .badge-text,
.album-card-badges .album-badge-visibility:focus-within .badge-text,
.item-access-badges .article-badge:not(.sb-section-visibility-badge):hover .badge-text,
.item-access-badges .article-badge:not(.sb-section-visibility-badge):focus-within .badge-text,
.item-topic-badges .article-badge:not(.sb-section-visibility-badge):hover .badge-text,
.item-topic-badges .article-badge:not(.sb-section-visibility-badge):focus-within .badge-text,
.photo-card .album-badge-category:hover .badge-text,
.photo-card .album-badge-category:focus-within .badge-text,
.video-card .album-badge-category:hover .badge-text,
.video-card .album-badge-category:focus-within .badge-text,
.recent-photo-card .album-badge-category:hover .badge-text,
.recent-photo-card .album-badge-category:focus-within .badge-text,
.recent-video-card .album-badge-category:hover .badge-text,
.recent-video-card .album-badge-category:focus-within .badge-text {
  max-width: 180px !important;
  opacity: 1 !important;
  margin-left: 6px !important;
  pointer-events: auto !important;
}

/* Hover remove button reveals */
.item-tag-badge:not(.sb-section-visibility-badge):hover .article-badge-remove-btn,
.item-tag-badge:not(.sb-section-visibility-badge):focus-within .article-badge-remove-btn,
.blog-card .article-badge:not(.sb-section-visibility-badge):hover .article-badge-remove-btn,
.blog-card .article-badge:not(.sb-section-visibility-badge):focus-within .article-badge-remove-btn,
.album-card-badges .article-badge:not(.sb-section-visibility-badge):hover .article-badge-remove-btn,
.album-card-badges .article-badge:not(.sb-section-visibility-badge):focus-within .article-badge-remove-btn,
.album-card-badges .album-badge-category:hover .article-badge-remove-btn,
.album-card-badges .album-badge-category:focus-within .article-badge-remove-btn,
.album-card-badges .album-badge-visibility:hover .article-badge-remove-btn,
.album-card-badges .album-badge-visibility:focus-within .article-badge-remove-btn,
.item-access-badges .article-badge:not(.sb-section-visibility-badge):hover .article-badge-remove-btn,
.item-access-badges .article-badge:not(.sb-section-visibility-badge):focus-within .article-badge-remove-btn,
.item-topic-badges .article-badge:not(.sb-section-visibility-badge):hover .article-badge-remove-btn,
.item-topic-badges .article-badge:not(.sb-section-visibility-badge):focus-within .article-badge-remove-btn {
  display: inline-flex !important;
  opacity: 1 !important;
  width: 14px !important;
  height: 14px !important;
  margin-left: 6px !important;
}

/* ==========================================================================
   Zero-Jitter Guarantees for Reader Header Topic & Visibility Badges
   ========================================================================== */
.blog-reader-badges,
.blog-reader-badges .album-card-badges,
.blog-reader-badges .item-access-badges,
.blog-reader-badges .item-topic-badges,
.single-post-meta .blog-reader-badges {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  position: static !important;
  max-width: none !important;
  width: auto !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
}

.blog-reader-badges .item-tag-badge,
.blog-reader-badges .article-badge,
.blog-reader-badges .album-badge-category,
.blog-reader-badges .album-badge-visibility,
.blog-reader-meta .item-tag-badge,
.blog-reader-meta .article-badge,
.blog-reader-meta .album-badge-category,
.blog-reader-meta .album-badge-visibility,
.single-post-meta .item-tag-badge,
.single-post-meta .article-badge,
.single-post-meta .album-badge-category,
.single-post-meta .album-badge-visibility {
  width: 26px !important;
  min-width: 26px !important;
  max-width: 26px !important;
  height: 26px !important;
  min-height: 26px !important;
  max-height: 26px !important;
  padding: 0 !important;
  margin: 0 2px !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  transform: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
  flex-shrink: 0 !important;
}

.blog-reader-badges .item-tag-badge:hover,
.blog-reader-badges .item-tag-badge:focus-within,
.blog-reader-badges .article-badge:hover,
.blog-reader-badges .article-badge:focus-within,
.blog-reader-badges .album-badge-category:hover,
.blog-reader-badges .album-badge-category:focus-within,
.blog-reader-badges .album-badge-visibility:hover,
.blog-reader-badges .album-badge-visibility:focus-within,
.blog-reader-meta .item-tag-badge:hover,
.blog-reader-meta .article-badge:hover,
.blog-reader-meta .album-badge-category:hover,
.blog-reader-meta .album-badge-visibility:hover,
.single-post-meta .item-tag-badge:hover,
.single-post-meta .article-badge:hover,
.single-post-meta .album-badge-category:hover,
.single-post-meta .album-badge-visibility:hover {
  width: 26px !important;
  min-width: 26px !important;
  max-width: 26px !important;
  height: 26px !important;
  padding: 0 !important;
  margin: 0 2px !important;
  transform: none !important;
  box-shadow: 0 0 12px rgba(52, 211, 153, 0.5) !important;
}

.blog-reader-badges .badge-text,
.blog-reader-meta .badge-text,
.single-post-meta .badge-text {
  display: none !important;
  max-width: 0 !important;
  width: 0 !important;
  opacity: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

.blog-reader-badges .article-badge-remove-btn,
.blog-reader-meta .article-badge-remove-btn,
.single-post-meta .article-badge-remove-btn {
  display: none !important;
  opacity: 0 !important;
  width: 0 !important;
  margin: 0 !important;
  pointer-events: none !important;
}

/* Ensure badge containers do not clip expanded badges */
.item-access-badges:hover,
.item-access-badges:focus-within,
.item-topic-badges:hover,
.item-topic-badges:focus-within {
  max-width: 90% !important;
  z-index: 30 !important;
}

/* ==========================================================================
   Definitive Rogue Badge Suppression
   Forcefully eliminate ANY rogue badges, cards badges, access groups, or stray elements in #features, #contact, #about, #hero
   (and other non-card sections) outside approved heading elements.
   ========================================================================== */
:is(#features, #contact, #about, #hero) :is(.album-card-badges, .item-access-badges, .item-topic-badges, .dock-dropped-tag-badge, .item-tag-badge, .article-badge, .sb-dock-tag, .sb-section-visibility-badge, .sb-viewer-access-group, .sb-viewer-tier-btn, .features-reader-access-group, .article-badge-remove-btn):not(.section-title *):not(.hero-title *):not(.hero-polaroid-item *):not(.features-reader-view.is-active *),
:is(#features, #contact, #about, #hero) > :is(.sb-section-visibility-badge, .album-card-badges, .item-access-badges, .item-tag-badge, .article-badge, .sb-dock-tag, .sb-viewer-access-group, .sb-viewer-tier-btn),
:is(#features, #contact, #about, #hero) .section-header > :is(.sb-section-visibility-badge, .album-card-badges, .item-access-badges, .item-tag-badge, .article-badge, .sb-dock-tag, .sb-viewer-access-group, .sb-viewer-tier-btn):not(.section-title *):not(.hero-title *),
#features .section-header > *:not(.section-title):not(.bento-slick-green-hr):not(.slick-green-scroller-hr),
#contact .section-header > *:not(.section-title):not(.bento-slick-green-hr):not(.slick-green-scroller-hr):not(.contact-title-row),
#contact .section-header *:not(.section-title):not(.section-title *):not(.slick-green-scroller-hr),
#contact > *:not(.deck-container),
#contact .deck-container > *:not(.section-header):not(.contact-grid):not(.contact-footer-links),
#contact .contact-action-card > *:not(.contact-item-left),
#about .section-header > *:not(.section-title):not(.about-title):not(.bento-slick-green-hr):not(.slick-green-scroller-hr),
#features .features-categories-view > *:not(.section-header):not(.bento-grid):not(.features-articles-view):not(.features-reader-view),
:is(#features, #contact, #about, #hero) [data-tag-slug="public"]:not(.section-title *):not(.hero-title *):not(.hero-polaroid-item *):not(.bento-card *),
:is(#features, #contact, #about, #hero) [data-tier="public"]:not(.features-reader-view.is-active *),
:is(#features, #contact, #about, #hero) .tier-public:not(.features-reader-view.is-active *),
:is(#features, #contact, #about, #hero) .sb-viewer-access-group:not(.features-reader-view.is-active *),
:is(#features, #contact, #about, #hero) .features-reader-access-group:not(.features-reader-view.is-active *),
body :is(#features, #contact, #about, #hero) .album-card-badges:not(.section-title *):not(.hero-polaroid-item *),
body :is(#features, #contact, #about, #hero) .item-access-badges:not(.section-title *):not(.hero-polaroid-item *),
body :is(#features, #contact, #about, #hero) .dock-dropped-tag-badge:not(.section-title *):not(.hero-polaroid-item *),
body :is(#features, #contact, #about, #hero) .article-badge:not(.section-title *):not(.hero-title *):not(.hero-polaroid-item *):not(.features-reader-view.is-active *),
body :is(#features, #contact, #about, #hero) .item-tag-badge:not(.section-title *):not(.hero-title *):not(.hero-polaroid-item *):not(.features-reader-view.is-active *),
body :is(#features, #contact, #about, #hero) .sb-section-visibility-badge:not(.section-title *):not(.hero-title *),
body.is-admin :is(#features, #contact, #about, #hero) .album-card-badges:not(.section-title *):not(.hero-polaroid-item *),
body.is-admin :is(#features, #contact, #about, #hero) .item-access-badges:not(.section-title *):not(.hero-polaroid-item *),
body.is-admin :is(#features, #contact, #about, #hero) .dock-dropped-tag-badge:not(.section-title *):not(.hero-polaroid-item *),
body.is-admin :is(#features, #contact, #about, #hero) .article-badge:not(.section-title *):not(.hero-title *):not(.hero-polaroid-item *):not(.features-reader-view.is-active *),
body.is-admin :is(#features, #contact, #about, #hero) .item-tag-badge:not(.section-title *):not(.hero-title *):not(.hero-polaroid-item *):not(.features-reader-view.is-active *),
body.is-admin :is(#features, #contact, #about, #hero) .sb-section-visibility-badge:not(.section-title *):not(.hero-title *),
body.is-admin #features .features-reader-access-group:not(.features-reader-view.is-active *),
body.sb-admin-browsing :is(#features, #contact, #about, #hero) .album-card-badges:not(.section-title *):not(.hero-polaroid-item *),
body.sb-admin-browsing :is(#features, #contact, #about, #hero) .item-access-badges:not(.section-title *):not(.hero-polaroid-item *),
body.sb-admin-browsing :is(#features, #contact, #about, #hero) .dock-dropped-tag-badge:not(.section-title *):not(.hero-polaroid-item *),
body.sb-admin-browsing :is(#features, #contact, #about, #hero) .article-badge:not(.section-title *):not(.hero-title *):not(.hero-polaroid-item *):not(.features-reader-view.is-active *),
body.sb-admin-browsing :is(#features, #contact, #about, #hero) .item-tag-badge:not(.section-title *):not(.hero-title *):not(.hero-polaroid-item *):not(.features-reader-view.is-active *),
body.sb-admin-browsing :is(#features, #contact, #about, #hero) .sb-section-visibility-badge:not(.section-title *):not(.hero-title *),
body.logged-in :is(#features, #contact, #about, #hero) .album-card-badges:not(.section-title *):not(.hero-polaroid-item *),
body.logged-in :is(#features, #contact, #about, #hero) .item-access-badges:not(.section-title *):not(.hero-polaroid-item *),
body.logged-in :is(#features, #contact, #about, #hero) .dock-dropped-tag-badge:not(.section-title *):not(.hero-polaroid-item *),
body.logged-in :is(#features, #contact, #about, #hero) .article-badge:not(.section-title *):not(.hero-title *):not(.hero-polaroid-item *):not(.features-reader-view.is-active *),
body.logged-in :is(#features, #contact, #about, #hero) .item-tag-badge:not(.section-title *):not(.hero-title *):not(.hero-polaroid-item *):not(.features-reader-view.is-active *),
body.logged-in :is(#features, #contact, #about, #hero) .sb-section-visibility-badge:not(.section-title *):not(.hero-title *),
.features-categories-view :is(.album-card-badges, .item-access-badges, .item-topic-badges, .dock-dropped-tag-badge, .item-tag-badge, .article-badge, .sb-section-visibility-badge):not(.section-title *),
.deck-slide > :is(.sb-section-visibility-badge, .album-card-badges, .item-access-badges, .dock-dropped-tag-badge, .item-tag-badge, .article-badge):not(.section-title *),
.deck-container > :is(.sb-section-visibility-badge, .album-card-badges, .item-access-badges, .dock-dropped-tag-badge, .item-tag-badge, .article-badge):not(.section-title *) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  position: absolute !important;
  clip: rect(0, 0, 0, 0) !important;
}

/* ==========================================================================
   Photo Albums & Videos: Long Form Tags (Full Icon + Label Display)
   User Request: "photo albums section should show relevant content tags
   as per videos. for both sections show long form of the tag."
   ========================================================================== */
.photos-topics-bar,
.videos-topics-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  flex-wrap: wrap !important;
  margin-top: 0.75rem !important;
  position: relative !important;
  z-index: 10 !important;
}

.photos-topics-bar .photo-topic-tag-btn,
.videos-topics-bar .video-topic-tag-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: auto !important;
  max-width: none !important;
  height: 32px !important;
  padding: 0 14px 0 11px !important;
  gap: 7px !important;
  border-radius: 9999px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  white-space: nowrap !important;
  opacity: 1 !important;
  visibility: visible !important;
  cursor: pointer !important;
  background: rgba(15, 23, 42, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: #f8fafc !important;
  font-family: var(--font-body, 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.photos-topics-bar .photo-topic-tag-btn:hover,
.videos-topics-bar .video-topic-tag-btn:hover {
  background: rgba(30, 41, 59, 0.95) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5) !important;
}

.photos-topics-bar .photo-topic-tag-btn.active,
.videos-topics-bar .video-topic-tag-btn.active {
  background: rgba(16, 185, 129, 0.28) !important;
  border: 1.5px solid #10b981 !important;
  color: #ffffff !important;
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

.photos-topics-bar .photo-topic-tag-btn .badge-text,
.videos-topics-bar .video-topic-tag-btn .badge-text {
  display: inline-block !important;
  max-width: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow: visible !important;
  white-space: nowrap !important;
  margin: 0 !important;
  font-family: var(--font-body, 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
  line-height: 1 !important;
  color: inherit !important;
  pointer-events: auto !important;
}

.photos-topics-bar .photo-topic-tag-btn i,
.videos-topics-bar .video-topic-tag-btn i {
  font-size: 0.8rem !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}

/* ==========================================================================
   Firehose Topic Selector Pill & Dropdown Menu
   "only show active Topic or All Items (default). clicking opens full menu of
   Topics so user can filter firehose. Once selected, it should be only Topic
   displayed above timeline."
   ========================================================================== */
.photos-topic-selector-wrap {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 0.75rem !important;
  z-index: 60 !important;
}

.photos-active-topic-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: 34px !important;
  padding: 0 14px 0 12px !important;
  gap: 8px !important;
  border-radius: 9999px !important;
  background: rgba(15, 23, 42, 0.85) !important;
  border: 1.5px solid rgba(52, 211, 153, 0.45) !important;
  color: #ffffff !important;
  cursor: pointer !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4), 0 0 12px rgba(16, 185, 129, 0.2) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.photos-active-topic-btn:hover,
.photos-active-topic-btn[aria-expanded="true"] {
  background: rgba(20, 32, 54, 0.95) !important;
  border-color: #10b981 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 20px rgba(16, 185, 129, 0.4) !important;
  transform: translateY(-1px) !important;
}

.photos-topic-selector-wrap {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 0 !important;
  margin-left: 0.25rem !important;
  z-index: 60 !important;
}

.photos-active-topic-btn .photos-topic-caret {
  font-size: 0.7rem !important;
  color: #34d399 !important;
  margin-left: 0.25rem !important;
  transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.photos-topic-selector-wrap:hover:not(.has-dismissed) .photos-topic-caret,
.photos-active-topic-btn[aria-expanded="true"] .photos-topic-caret {
  transform: rotate(180deg) !important;
}

.photos-topics-dropdown {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 50% !important;
  --dropdown-shift-x: 0px;
  transform: translateX(calc(-50% + var(--dropdown-shift-x, 0px))) translateY(-8px) scale(0.96) !important;
  transform-origin: top center !important;
  width: max-content !important;
  max-width: min(92vw, 680px) !important;
  background: rgba(11, 19, 36, 0.96) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(52, 211, 153, 0.35) !important;
  border-radius: var(--radius-md) !important;
  padding: 0.85rem !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7), 0 0 25px rgba(16, 185, 129, 0.2) !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  z-index: 250 !important;
  max-height: 280px !important;
  overflow-y: auto !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0s linear 0.28s !important;
  will-change: opacity, transform;
}

/* Invisible bridge so moving cursor from trigger button down into dropdown never drops hover */
.photos-topics-dropdown::before {
  content: '' !important;
  position: absolute !important;
  top: -14px !important;
  left: 0 !important;
  right: 0 !important;
  height: 14px !important;
  background: transparent !important;
}

/* Show on hover of selector container unless dismissed by selection */
.photos-topic-selector-wrap:hover .photos-topics-dropdown:not(.is-dismissed),
.photos-topics-dropdown.is-open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateX(calc(-50% + var(--dropdown-shift-x, 0px))) translateY(0) scale(1) !important;
  transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0s linear 0s !important;
}

.photos-topics-dropdown.is-dismissed,
.photos-topic-selector-wrap.has-dismissed .photos-topics-dropdown {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateX(calc(-50% + var(--dropdown-shift-x, 0px))) translateY(-8px) scale(0.96) !important;
  transition: opacity 0.24s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.24s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0s linear 0.24s !important;
}

/* ==========================================================================
   Firehose Condensed Topic Filter Layout & Animation Effects
   "when filtering on a topic, remove and condense the timeline appropriately. use an effect."
   ========================================================================== */

/* Condensed Continuous Track Layout when topic or seen filter is active */
.photos-timeline-track.is-topic-filtered,
.photos-timeline-track.is-seen-filtered {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: clamp(0.75rem, 1.2vw, 1.1rem) !important;
  width: max-content !important;
  min-width: 100% !important;
  padding: 0 clamp(1rem, 2.5vw, 2.5rem) !important;
  justify-content: flex-start !important;
}

/* Flatten page wrappers and grids into track flex items using display: contents */
.photos-timeline-track.is-topic-filtered .photos-timeline-page,
.photos-timeline-track.is-topic-filtered .photos-timeline-grid,
.photos-timeline-track.is-seen-filtered .photos-timeline-page,
.photos-timeline-track.is-seen-filtered .photos-timeline-grid {
  display: contents !important;
}

/* Timeline Columns inside condensed track */
.photos-timeline-track.is-topic-filtered .timeline-column,
.photos-timeline-track.is-seen-filtered .timeline-column {
  flex: 0 0 clamp(280px, 22vw, 320px) !important;
  width: clamp(280px, 22vw, 320px) !important;
  max-width: clamp(280px, 22vw, 320px) !important;
  height: 100% !important;
  margin: 0 !important;
}

/* Hidden filtered items */
.photos-timeline-track .photos-timeline-page.is-filtered-out,
.photos-timeline-track .timeline-column.is-filtered-out,
.photos-timeline-track .photo-album-card.is-filtered-out {
  display: none !important;
}

/* Balance single-card columns so card remains top-half without vertical stretching */
.photos-timeline-track.is-topic-filtered .timeline-column.has-single-card .timeline-col-cards,
.photos-timeline-track.is-seen-filtered .timeline-column.has-single-card .timeline-col-cards,
.photos-timeline-track.is-type-filtered .timeline-column.has-single-card .timeline-col-cards {
  justify-content: flex-start !important;
  gap: clamp(0.55rem, 1.1vh, 0.85rem) !important;
}

.photos-timeline-track.is-topic-filtered .timeline-column.has-single-card .timeline-col-cards .photo-album-card,
.photos-timeline-track.is-seen-filtered .timeline-column.has-single-card .timeline-col-cards .photo-album-card,
.photos-timeline-track.is-type-filtered .timeline-column.has-single-card .timeline-col-cards .photo-album-card {
  flex: 0 0 calc(50% - 0.4rem) !important;
  height: calc(50% - 0.4rem) !important;
  max-height: calc(50% - 0.4rem) !important;
}

.photos-timeline-track.is-topic-filtered .timeline-column.has-single-card .timeline-empty-card-slot,
.photos-timeline-track.is-seen-filtered .timeline-column.has-single-card .timeline-empty-card-slot,
.photos-timeline-track.is-type-filtered .timeline-column.has-single-card .timeline-empty-card-slot {
  display: flex !important;
  flex: 0 0 calc(50% - 0.4rem) !important;
  height: calc(50% - 0.4rem) !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  border: none !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

/* Phase 1 Animation: Exit / Filter Out Transition */
.photo-album-card.timeline-card-filtering-out {
  opacity: 0 !important;
  transform: scale(0.9) translateY(12px) !important;
  filter: blur(4px) grayscale(75%) !important;
  transition: opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
              filter 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
  pointer-events: none !important;
}

.photo-album-card.timeline-card-filtering-stay {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Phase 2 Animation: Condense In Entrance */
.photo-album-card.timeline-card-condense-in {
  animation: sbTimelineCondenseIn 0.38s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

@keyframes sbTimelineCondenseIn {
  0% {
    opacity: 0;
    transform: scale(0.93) translateY(-6px);
    filter: blur(3px);
  }
  60% {
    opacity: 1;
    transform: scale(1.015) translateY(0);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: none;
  }
}

/* Pulse shimmer effect along horizontal green divider on filter */
.photos-timeline-viewport.is-filtering .slick-green-scroller-hr,
.photos-header.is-filtering .photos-slick-green-hr {
  animation: timelineFilterPulse 0.45s ease-out;
}

@keyframes timelineFilterPulse {
  0% {
    box-shadow: 0 0 0 rgba(52, 211, 153, 0);
    opacity: 0.7;
  }
  50% {
    box-shadow: 0 0 18px rgba(52, 211, 153, 0.9), 0 0 35px rgba(16, 185, 129, 0.6);
    opacity: 1;
  }
  100% {
    box-shadow: 0 0 0 rgba(52, 211, 153, 0);
    opacity: 0.7;
  }
}

/* Empty state message when 0 items match selected topic */
.photos-timeline-empty-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 4rem 2rem;
  color: rgba(255, 255, 255, 0.6);
  font-size: 1.05rem;
  font-weight: 500;
  width: 100%;
  min-height: 240px;
  animation: sbTimelineCondenseIn 0.35s ease both;
}

.photos-timeline-empty-message i {
  font-size: 2rem;
  color: #10b981;
  opacity: 0.8;
}

/* ==========================================================================
   Always-Visible Topic Tags Dock (Centered below scrolling firehose, dim by default)
   User Request: "move topic tags to be always visible (but dim) below the
   scrolling firehose, centered over 1-3 rows. mousing over a tag should not
   make it go red with line through it."
   ========================================================================== */

.photos-bottom-topics-dock {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 960px !important;
  margin: clamp(0.75rem, 1.8vh, 1.4rem) auto 0 auto !important;
  padding: 0 1rem !important;
  position: relative !important;
  z-index: 25 !important;
}

.photos-bottom-filter-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.55rem !important;
  width: 100% !important;
  position: relative !important;
}

/* Item Type Filter Bar & Topic Filter Bar: Clean borderless rows - NO redundant outer container */
.photos-bottom-types-list,
.photos-bottom-topics-list {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  max-width: 100% !important;
  position: relative !important;
  z-index: 10 !important;
  transition: z-index 0.2s ease !important;
}

.photos-bottom-types-list.is-expanded,
.photos-bottom-types-list.is-open,
.photos-bottom-topics-list.is-expanded,
.photos-bottom-topics-list.is-open {
  z-index: 25 !important;
}

.photos-bottom-types-list .photo-type-tag-btn.is-filter-empty,
.photos-bottom-topics-list .photo-topic-tag-btn.is-filter-empty,
.photos-bottom-topics-list .video-topic-tag-btn.is-filter-empty,
.recent-photos-bottom-topics-dock .photo-topic-tag-btn.is-filter-empty,
.recent-videos-bottom-topics-dock .photo-topic-tag-btn.is-filter-empty,
.recent-videos-bottom-topics-dock .video-topic-tag-btn.is-filter-empty,
.photo-type-tag-btn.is-filter-empty,
.photo-topic-tag-btn.is-filter-empty,
.video-topic-tag-btn.is-filter-empty,
[data-filter-empty="true"] {
  display: none !important;
}

/* Individual Filter Buttons: Shared sleek frosted pill styles */
.photos-bottom-types-list .photo-type-tag-btn,
.photos-bottom-topics-list .photo-topic-tag-btn,
.photos-bottom-topics-list .video-topic-tag-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.32rem !important;
  padding: 0.28rem 0.82rem !important;
  margin: 0.14rem 0.2rem !important;
  border-radius: 9999px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  color: #94a3b8 !important;
  font-size: 0.74rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  line-height: 1 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  user-select: none !important;
  text-decoration: none !important;
  max-width: 150px !important;
  max-height: 38px !important;
  overflow: visible !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25) !important;
  transition: 
    max-width 0.48s cubic-bezier(0.22, 1, 0.36, 1),
    padding 0.44s cubic-bezier(0.22, 1, 0.36, 1),
    margin 0.44s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.48s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.42s ease-out,
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.25s ease !important;
  will-change: max-width, opacity, transform, filter;
}

/* Only hide icons on the "All" buttons */
.photos-bottom-types-list .photo-type-tag-btn[data-type-slug="all"] i,
.photos-bottom-topics-list .photo-topic-tag-btn[data-topic-slug="all"] i,
.photos-bottom-topics-list .video-topic-tag-btn[data-topic-slug="all"] i,
.videos-topics-bar .video-topic-tag-btn[data-topic-slug="all"] i {
  display: none !important;
}

/* Ensure colored icons display cleanly on specific topic and type buttons */
.photos-bottom-types-list .photo-type-tag-btn:not([data-type-slug="all"]) i,
.photos-bottom-topics-list .photo-topic-tag-btn:not([data-topic-slug="all"]) i,
.photos-bottom-topics-list .video-topic-tag-btn:not([data-topic-slug="all"]) i,
.videos-topics-bar .video-topic-tag-btn:not([data-topic-slug="all"]) i {
  display: inline-block !important;
  font-size: 0.72rem !important;
  line-height: 1 !important;
  opacity: 0.9 !important;
  transition: opacity 0.2s ease, transform 0.2s ease !important;
}

.photos-bottom-types-list .photo-type-tag-btn:not([data-type-slug="all"]):hover i,
.photos-bottom-topics-list .photo-topic-tag-btn:not([data-topic-slug="all"]):hover i,
.photos-bottom-topics-list .video-topic-tag-btn:not([data-topic-slug="all"]):hover i,
.videos-topics-bar .video-topic-tag-btn:not([data-topic-slug="all"]):hover i {
  opacity: 1 !important;
  transform: scale(1.08) !important;
}

.photos-bottom-types-list .photo-type-tag-btn .badge-text,
.photos-bottom-topics-list .photo-topic-tag-btn .badge-text,
.photos-bottom-topics-list .video-topic-tag-btn .badge-text,
.videos-topics-bar .video-topic-tag-btn .badge-text {
  text-decoration: none !important;
}

/* Hover on individual buttons */
.photos-bottom-types-list .photo-type-tag-btn:hover,
.photos-bottom-topics-list .photo-topic-tag-btn:hover,
.photos-bottom-topics-list .video-topic-tag-btn:hover {
  opacity: 1 !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.26) !important;
  color: #f8fafc !important;
  transform: translateY(-1px) scale(1.04) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}

/* Collapsed State: Non-active buttons collapse into zero width when resting in topic dock capsules */
:is(.photos-bottom-topics-dock, .photos-bottom-dock, #photosBottomTopicsDock, .blog-bottom-topics-dock, #blogBottomTopicsDock, .recent-photos-bottom-topics-dock, #recentPhotosBottomTopicsDock, .recent-videos-bottom-topics-dock, #recentVideosBottomTopicsDock) .photos-bottom-types-list:not(.is-expanded):not(.is-open) .photo-type-tag-btn:not(.active),
:is(.photos-bottom-topics-dock, .photos-bottom-dock, #photosBottomTopicsDock, .blog-bottom-topics-dock, #blogBottomTopicsDock, .recent-photos-bottom-topics-dock, #recentPhotosBottomTopicsDock, .recent-videos-bottom-topics-dock, #recentVideosBottomTopicsDock) .photos-bottom-topics-list:not(.is-expanded):not(.is-open) .photo-topic-tag-btn:not(.active),
:is(.photos-bottom-topics-dock, .photos-bottom-dock, #photosBottomTopicsDock, .blog-bottom-topics-dock, #blogBottomTopicsDock, .recent-photos-bottom-topics-dock, #recentPhotosBottomTopicsDock, .recent-videos-bottom-topics-dock, #recentVideosBottomTopicsDock) .photos-bottom-topics-list:not(.is-expanded):not(.is-open) .video-topic-tag-btn:not(.active) {
  max-width: 0 !important;
  max-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border-width: 0 !important;
  border-color: transparent !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: scale(0.72) translateY(2px) !important;
  filter: blur(2px) !important;
  overflow: hidden !important;
  box-shadow: none !important;
  transition: 
    max-width 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    padding 0.24s cubic-bezier(0.4, 0, 0.2, 1),
    margin 0.24s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.2s ease-in,
    transform 0.24s ease-in,
    filter 0.2s ease-in !important;
  transition-delay: 0s !important;
}

/* Active State: Always full visibility, clean single-container pill */
.photos-bottom-types-list .photo-type-tag-btn.active,
.photos-bottom-topics-list .photo-topic-tag-btn.active,
.photos-bottom-topics-list .video-topic-tag-btn.active {
  max-width: 160px !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: scale(1) !important;
  font-weight: 600 !important;
  margin: 0.14rem 0.2rem !important;
}

/* Open State: Unfold all buttons smoothly upon click */
:is(.photos-bottom-topics-dock, .photos-bottom-dock, #photosBottomTopicsDock, .blog-bottom-topics-dock, #blogBottomTopicsDock, .recent-photos-bottom-topics-dock, #recentPhotosBottomTopicsDock, .recent-videos-bottom-topics-dock, #recentVideosBottomTopicsDock) .photos-bottom-types-list.is-expanded .photo-type-tag-btn,
:is(.photos-bottom-topics-dock, .photos-bottom-dock, #photosBottomTopicsDock, .blog-bottom-topics-dock, #blogBottomTopicsDock, .recent-photos-bottom-topics-dock, #recentPhotosBottomTopicsDock, .recent-videos-bottom-topics-dock, #recentVideosBottomTopicsDock) .photos-bottom-types-list.is-open .photo-type-tag-btn,
:is(.photos-bottom-topics-dock, .photos-bottom-dock, #photosBottomTopicsDock, .blog-bottom-topics-dock, #blogBottomTopicsDock, .recent-photos-bottom-topics-dock, #recentPhotosBottomTopicsDock, .recent-videos-bottom-topics-dock, #recentVideosBottomTopicsDock) .photos-bottom-topics-list.is-expanded .photo-topic-tag-btn,
:is(.photos-bottom-topics-dock, .photos-bottom-dock, #photosBottomTopicsDock, .blog-bottom-topics-dock, #blogBottomTopicsDock, .recent-photos-bottom-topics-dock, #recentPhotosBottomTopicsDock, .recent-videos-bottom-topics-dock, #recentVideosBottomTopicsDock) .photos-bottom-topics-list.is-open .photo-topic-tag-btn,
:is(.photos-bottom-topics-dock, .photos-bottom-dock, #photosBottomTopicsDock, .blog-bottom-topics-dock, #blogBottomTopicsDock, .recent-photos-bottom-topics-dock, #recentPhotosBottomTopicsDock, .recent-videos-bottom-topics-dock, #recentVideosBottomTopicsDock) .photos-bottom-topics-list.is-expanded .video-topic-tag-btn,
:is(.photos-bottom-topics-dock, .photos-bottom-dock, #photosBottomTopicsDock, .blog-bottom-topics-dock, #blogBottomTopicsDock, .recent-photos-bottom-topics-dock, #recentPhotosBottomTopicsDock, .recent-videos-bottom-topics-dock, #recentVideosBottomTopicsDock) .photos-bottom-topics-list.is-open .video-topic-tag-btn {
  max-width: 150px !important;
  opacity: 0.82 !important;
  pointer-events: auto !important;
  transform: scale(1) translateY(0) !important;
  filter: blur(0px) !important;
  padding: 0.28rem 0.78rem !important;
  margin: 0.14rem 0.2rem !important;
}

:is(.photos-bottom-topics-dock, .photos-bottom-dock, #photosBottomTopicsDock, .blog-bottom-topics-dock, #blogBottomTopicsDock, .recent-photos-bottom-topics-dock, #recentPhotosBottomTopicsDock, .recent-videos-bottom-topics-dock, #recentVideosBottomTopicsDock) .photos-bottom-types-list.is-expanded .photo-type-tag-btn.active,
:is(.photos-bottom-topics-dock, .photos-bottom-dock, #photosBottomTopicsDock, .blog-bottom-topics-dock, #blogBottomTopicsDock, .recent-photos-bottom-topics-dock, #recentPhotosBottomTopicsDock, .recent-videos-bottom-topics-dock, #recentVideosBottomTopicsDock) .photos-bottom-types-list.is-open .photo-type-tag-btn.active,
:is(.photos-bottom-topics-dock, .photos-bottom-dock, #photosBottomTopicsDock, .blog-bottom-topics-dock, #blogBottomTopicsDock, .recent-photos-bottom-topics-dock, #recentPhotosBottomTopicsDock, .recent-videos-bottom-topics-dock, #recentVideosBottomTopicsDock) .photos-bottom-topics-list.is-expanded .photo-topic-tag-btn.active,
:is(.photos-bottom-topics-dock, .photos-bottom-dock, #photosBottomTopicsDock, .blog-bottom-topics-dock, #blogBottomTopicsDock, .recent-photos-bottom-topics-dock, #recentPhotosBottomTopicsDock, .recent-videos-bottom-topics-dock, #recentVideosBottomTopicsDock) .photos-bottom-topics-list.is-open .photo-topic-tag-btn.active,
:is(.photos-bottom-topics-dock, .photos-bottom-dock, #photosBottomTopicsDock, .blog-bottom-topics-dock, #blogBottomTopicsDock, .recent-photos-bottom-topics-dock, #recentPhotosBottomTopicsDock, .recent-videos-bottom-topics-dock, #recentVideosBottomTopicsDock) .photos-bottom-topics-list.is-expanded .video-topic-tag-btn.active,
:is(.photos-bottom-topics-dock, .photos-bottom-dock, #photosBottomTopicsDock, .blog-bottom-topics-dock, #blogBottomTopicsDock, .recent-photos-bottom-topics-dock, #recentPhotosBottomTopicsDock, .recent-videos-bottom-topics-dock, #recentVideosBottomTopicsDock) .photos-bottom-topics-list.is-open .video-topic-tag-btn.active {
  opacity: 1 !important;
  transform: scale(1) translateY(0) !important;
  filter: blur(0px) !important;
}

/* Subtle chevron on the active pill indicating expandable state (points right > when closed) */
:is(.photos-bottom-topics-dock, .photos-bottom-dock, #photosBottomTopicsDock, .blog-bottom-topics-dock, #blogBottomTopicsDock, .recent-photos-bottom-topics-dock, #recentPhotosBottomTopicsDock, .recent-videos-bottom-topics-dock, #recentVideosBottomTopicsDock) .photos-bottom-types-list .photo-type-tag-btn.active::after,
:is(.photos-bottom-topics-dock, .photos-bottom-dock, #photosBottomTopicsDock, .blog-bottom-topics-dock, #blogBottomTopicsDock, .recent-photos-bottom-topics-dock, #recentPhotosBottomTopicsDock, .recent-videos-bottom-topics-dock, #recentVideosBottomTopicsDock) .photos-bottom-topics-list .photo-topic-tag-btn.active::after,
:is(.photos-bottom-topics-dock, .photos-bottom-dock, #photosBottomTopicsDock, .blog-bottom-topics-dock, #blogBottomTopicsDock, .recent-photos-bottom-topics-dock, #recentPhotosBottomTopicsDock, .recent-videos-bottom-topics-dock, #recentVideosBottomTopicsDock) .photos-bottom-topics-list .video-topic-tag-btn.active::after {
  content: '\f054';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 0.52rem;
  margin-left: 0.38rem;
  opacity: 0.65;
  display: inline-block;
  transform: rotate(0deg);
  transform-origin: center center;
  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.24s ease !important;
  vertical-align: middle;
}

/* Chevron flips when open: rotates 180deg to point left < */
:is(.photos-bottom-topics-dock, .photos-bottom-dock, #photosBottomTopicsDock, .blog-bottom-topics-dock, #blogBottomTopicsDock, .recent-photos-bottom-topics-dock, #recentPhotosBottomTopicsDock, .recent-videos-bottom-topics-dock, #recentVideosBottomTopicsDock) .photos-bottom-types-list.is-expanded .photo-type-tag-btn.active::after,
:is(.photos-bottom-topics-dock, .photos-bottom-dock, #photosBottomTopicsDock, .blog-bottom-topics-dock, #blogBottomTopicsDock, .recent-photos-bottom-topics-dock, #recentPhotosBottomTopicsDock, .recent-videos-bottom-topics-dock, #recentVideosBottomTopicsDock) .photos-bottom-types-list.is-open .photo-type-tag-btn.active::after,
:is(.photos-bottom-topics-dock, .photos-bottom-dock, #photosBottomTopicsDock, .blog-bottom-topics-dock, #blogBottomTopicsDock, .recent-photos-bottom-topics-dock, #recentPhotosBottomTopicsDock, .recent-videos-bottom-topics-dock, #recentVideosBottomTopicsDock) .photos-bottom-topics-list.is-expanded .photo-topic-tag-btn.active::after,
:is(.photos-bottom-topics-dock, .photos-bottom-dock, #photosBottomTopicsDock, .blog-bottom-topics-dock, #blogBottomTopicsDock, .recent-photos-bottom-topics-dock, #recentPhotosBottomTopicsDock, .recent-videos-bottom-topics-dock, #recentVideosBottomTopicsDock) .photos-bottom-topics-list.is-open .photo-topic-tag-btn.active::after,
:is(.photos-bottom-topics-dock, .photos-bottom-dock, #photosBottomTopicsDock, .blog-bottom-topics-dock, #blogBottomTopicsDock, .recent-photos-bottom-topics-dock, #recentPhotosBottomTopicsDock, .recent-videos-bottom-topics-dock, #recentVideosBottomTopicsDock) .photos-bottom-topics-list.is-expanded .video-topic-tag-btn.active::after,
:is(.photos-bottom-topics-dock, .photos-bottom-dock, #photosBottomTopicsDock, .blog-bottom-topics-dock, #blogBottomTopicsDock, .recent-photos-bottom-topics-dock, #recentPhotosBottomTopicsDock, .recent-videos-bottom-topics-dock, #recentVideosBottomTopicsDock) .photos-bottom-topics-list.is-open .video-topic-tag-btn.active::after {
  transform: rotate(180deg);
  opacity: 0.95;
}

/* Staggered unfolding wave when opening Types (5 items, gentle 35ms ripple steps) */
:is(.photos-bottom-topics-dock, .photos-bottom-dock, #photosBottomTopicsDock, .blog-bottom-topics-dock, #blogBottomTopicsDock, .recent-photos-bottom-topics-dock, #recentPhotosBottomTopicsDock, .recent-videos-bottom-topics-dock, #recentVideosBottomTopicsDock) .photos-bottom-types-list.is-expanded .photo-type-tag-btn:nth-child(1),
:is(.photos-bottom-topics-dock, .photos-bottom-dock, #photosBottomTopicsDock, .blog-bottom-topics-dock, #blogBottomTopicsDock, .recent-photos-bottom-topics-dock, #recentPhotosBottomTopicsDock, .recent-videos-bottom-topics-dock, #recentVideosBottomTopicsDock) .photos-bottom-types-list.is-open .photo-type-tag-btn:nth-child(1) { transition-delay: 0ms; }
:is(.photos-bottom-topics-dock, .photos-bottom-dock, #photosBottomTopicsDock, .blog-bottom-topics-dock, #blogBottomTopicsDock, .recent-photos-bottom-topics-dock, #recentPhotosBottomTopicsDock, .recent-videos-bottom-topics-dock, #recentVideosBottomTopicsDock) .photos-bottom-types-list.is-expanded .photo-type-tag-btn:nth-child(2),
:is(.photos-bottom-topics-dock, .photos-bottom-dock, #photosBottomTopicsDock, .blog-bottom-topics-dock, #blogBottomTopicsDock, .recent-photos-bottom-topics-dock, #recentPhotosBottomTopicsDock, .recent-videos-bottom-topics-dock, #recentVideosBottomTopicsDock) .photos-bottom-types-list.is-open .photo-type-tag-btn:nth-child(2) { transition-delay: 35ms; }
:is(.photos-bottom-topics-dock, .photos-bottom-dock, #photosBottomTopicsDock, .blog-bottom-topics-dock, #blogBottomTopicsDock, .recent-photos-bottom-topics-dock, #recentPhotosBottomTopicsDock, .recent-videos-bottom-topics-dock, #recentVideosBottomTopicsDock) .photos-bottom-types-list.is-expanded .photo-type-tag-btn:nth-child(3),
:is(.photos-bottom-topics-dock, .photos-bottom-dock, #photosBottomTopicsDock, .blog-bottom-topics-dock, #blogBottomTopicsDock, .recent-photos-bottom-topics-dock, #recentPhotosBottomTopicsDock, .recent-videos-bottom-topics-dock, #recentVideosBottomTopicsDock) .photos-bottom-types-list.is-open .photo-type-tag-btn:nth-child(3) { transition-delay: 70ms; }
:is(.photos-bottom-topics-dock, .photos-bottom-dock, #photosBottomTopicsDock, .blog-bottom-topics-dock, #blogBottomTopicsDock, .recent-photos-bottom-topics-dock, #recentPhotosBottomTopicsDock, .recent-videos-bottom-topics-dock, #recentVideosBottomTopicsDock) .photos-bottom-types-list.is-expanded .photo-type-tag-btn:nth-child(4),
:is(.photos-bottom-topics-dock, .photos-bottom-dock, #photosBottomTopicsDock, .blog-bottom-topics-dock, #blogBottomTopicsDock, .recent-photos-bottom-topics-dock, #recentPhotosBottomTopicsDock, .recent-videos-bottom-topics-dock, #recentVideosBottomTopicsDock) .photos-bottom-types-list.is-open .photo-type-tag-btn:nth-child(4) { transition-delay: 105ms; }
:is(.photos-bottom-topics-dock, .photos-bottom-dock, #photosBottomTopicsDock, .blog-bottom-topics-dock, #blogBottomTopicsDock, .recent-photos-bottom-topics-dock, #recentPhotosBottomTopicsDock, .recent-videos-bottom-topics-dock, #recentVideosBottomTopicsDock) .photos-bottom-types-list.is-expanded .photo-type-tag-btn:nth-child(5),
:is(.photos-bottom-topics-dock, .photos-bottom-dock, #photosBottomTopicsDock, .blog-bottom-topics-dock, #blogBottomTopicsDock, .recent-photos-bottom-topics-dock, #recentPhotosBottomTopicsDock, .recent-videos-bottom-topics-dock, #recentVideosBottomTopicsDock) .photos-bottom-types-list.is-open .photo-type-tag-btn:nth-child(5) { transition-delay: 140ms; }

/* Staggered unfolding wave when opening Topics (up to 20 items, gentle 32ms ripple steps) */
:is(.photos-bottom-topics-dock, .photos-bottom-dock, #photosBottomTopicsDock, .blog-bottom-topics-dock, #blogBottomTopicsDock, .recent-photos-bottom-topics-dock, #recentPhotosBottomTopicsDock, .recent-videos-bottom-topics-dock, #recentVideosBottomTopicsDock) .photos-bottom-topics-list:is(.is-expanded, .is-open) :is(.photo-topic-tag-btn, .video-topic-tag-btn):nth-child(1) { transition-delay: 0ms; }
:is(.photos-bottom-topics-dock, .photos-bottom-dock, #photosBottomTopicsDock, .blog-bottom-topics-dock, #blogBottomTopicsDock, .recent-photos-bottom-topics-dock, #recentPhotosBottomTopicsDock, .recent-videos-bottom-topics-dock, #recentVideosBottomTopicsDock) .photos-bottom-topics-list:is(.is-expanded, .is-open) :is(.photo-topic-tag-btn, .video-topic-tag-btn):nth-child(2) { transition-delay: 32ms; }
:is(.photos-bottom-topics-dock, .photos-bottom-dock, #photosBottomTopicsDock, .blog-bottom-topics-dock, #blogBottomTopicsDock, .recent-photos-bottom-topics-dock, #recentPhotosBottomTopicsDock, .recent-videos-bottom-topics-dock, #recentVideosBottomTopicsDock) .photos-bottom-topics-list:is(.is-expanded, .is-open) :is(.photo-topic-tag-btn, .video-topic-tag-btn):nth-child(3) { transition-delay: 64ms; }
:is(.photos-bottom-topics-dock, .photos-bottom-dock, #photosBottomTopicsDock, .blog-bottom-topics-dock, #blogBottomTopicsDock, .recent-photos-bottom-topics-dock, #recentPhotosBottomTopicsDock, .recent-videos-bottom-topics-dock, #recentVideosBottomTopicsDock) .photos-bottom-topics-list:is(.is-expanded, .is-open) :is(.photo-topic-tag-btn, .video-topic-tag-btn):nth-child(4) { transition-delay: 96ms; }
:is(.photos-bottom-topics-dock, .photos-bottom-dock, #photosBottomTopicsDock, .blog-bottom-topics-dock, #blogBottomTopicsDock, .recent-photos-bottom-topics-dock, #recentPhotosBottomTopicsDock, .recent-videos-bottom-topics-dock, #recentVideosBottomTopicsDock) .photos-bottom-topics-list:is(.is-expanded, .is-open) :is(.photo-topic-tag-btn, .video-topic-tag-btn):nth-child(5) { transition-delay: 128ms; }
:is(.photos-bottom-topics-dock, .photos-bottom-dock, #photosBottomTopicsDock, .blog-bottom-topics-dock, #blogBottomTopicsDock, .recent-photos-bottom-topics-dock, #recentPhotosBottomTopicsDock, .recent-videos-bottom-topics-dock, #recentVideosBottomTopicsDock) .photos-bottom-topics-list:is(.is-expanded, .is-open) :is(.photo-topic-tag-btn, .video-topic-tag-btn):nth-child(6) { transition-delay: 160ms; }
:is(.photos-bottom-topics-dock, .photos-bottom-dock, #photosBottomTopicsDock, .blog-bottom-topics-dock, #blogBottomTopicsDock, .recent-photos-bottom-topics-dock, #recentPhotosBottomTopicsDock, .recent-videos-bottom-topics-dock, #recentVideosBottomTopicsDock) .photos-bottom-topics-list:is(.is-expanded, .is-open) :is(.photo-topic-tag-btn, .video-topic-tag-btn):nth-child(7) { transition-delay: 192ms; }
:is(.photos-bottom-topics-dock, .photos-bottom-dock, #photosBottomTopicsDock, .blog-bottom-topics-dock, #blogBottomTopicsDock, .recent-photos-bottom-topics-dock, #recentPhotosBottomTopicsDock, .recent-videos-bottom-topics-dock, #recentVideosBottomTopicsDock) .photos-bottom-topics-list:is(.is-expanded, .is-open) :is(.photo-topic-tag-btn, .video-topic-tag-btn):nth-child(8) { transition-delay: 224ms; }
:is(.photos-bottom-topics-dock, .photos-bottom-dock, #photosBottomTopicsDock, .blog-bottom-topics-dock, #blogBottomTopicsDock, .recent-photos-bottom-topics-dock, #recentPhotosBottomTopicsDock, .recent-videos-bottom-topics-dock, #recentVideosBottomTopicsDock) .photos-bottom-topics-list:is(.is-expanded, .is-open) :is(.photo-topic-tag-btn, .video-topic-tag-btn):nth-child(9) { transition-delay: 256ms; }
:is(.photos-bottom-topics-dock, .photos-bottom-dock, #photosBottomTopicsDock, .blog-bottom-topics-dock, #blogBottomTopicsDock, .recent-photos-bottom-topics-dock, #recentPhotosBottomTopicsDock, .recent-videos-bottom-topics-dock, #recentVideosBottomTopicsDock) .photos-bottom-topics-list:is(.is-expanded, .is-open) :is(.photo-topic-tag-btn, .video-topic-tag-btn):nth-child(10) { transition-delay: 288ms; }
:is(.photos-bottom-topics-dock, .photos-bottom-dock, #photosBottomTopicsDock, .blog-bottom-topics-dock, #blogBottomTopicsDock, .recent-photos-bottom-topics-dock, #recentPhotosBottomTopicsDock, .recent-videos-bottom-topics-dock, #recentVideosBottomTopicsDock) .photos-bottom-topics-list:is(.is-expanded, .is-open) :is(.photo-topic-tag-btn, .video-topic-tag-btn):nth-child(11) { transition-delay: 320ms; }
:is(.photos-bottom-topics-dock, .photos-bottom-dock, #photosBottomTopicsDock, .blog-bottom-topics-dock, #blogBottomTopicsDock, .recent-photos-bottom-topics-dock, #recentPhotosBottomTopicsDock, .recent-videos-bottom-topics-dock, #recentVideosBottomTopicsDock) .photos-bottom-topics-list:is(.is-expanded, .is-open) :is(.photo-topic-tag-btn, .video-topic-tag-btn):nth-child(12) { transition-delay: 352ms; }
:is(.photos-bottom-topics-dock, .photos-bottom-dock, #photosBottomTopicsDock, .blog-bottom-topics-dock, #blogBottomTopicsDock, .recent-photos-bottom-topics-dock, #recentPhotosBottomTopicsDock, .recent-videos-bottom-topics-dock, #recentVideosBottomTopicsDock) .photos-bottom-topics-list:is(.is-expanded, .is-open) :is(.photo-topic-tag-btn, .video-topic-tag-btn):nth-child(13) { transition-delay: 384ms; }
:is(.photos-bottom-topics-dock, .photos-bottom-dock, #photosBottomTopicsDock, .blog-bottom-topics-dock, #blogBottomTopicsDock, .recent-photos-bottom-topics-dock, #recentPhotosBottomTopicsDock, .recent-videos-bottom-topics-dock, #recentVideosBottomTopicsDock) .photos-bottom-topics-list:is(.is-expanded, .is-open) :is(.photo-topic-tag-btn, .video-topic-tag-btn):nth-child(14) { transition-delay: 416ms; }
:is(.photos-bottom-topics-dock, .photos-bottom-dock, #photosBottomTopicsDock, .blog-bottom-topics-dock, #blogBottomTopicsDock, .recent-photos-bottom-topics-dock, #recentPhotosBottomTopicsDock, .recent-videos-bottom-topics-dock, #recentVideosBottomTopicsDock) .photos-bottom-topics-list:is(.is-expanded, .is-open) :is(.photo-topic-tag-btn, .video-topic-tag-btn):nth-child(15) { transition-delay: 448ms; }
:is(.photos-bottom-topics-dock, .photos-bottom-dock, #photosBottomTopicsDock, .blog-bottom-topics-dock, #blogBottomTopicsDock, .recent-photos-bottom-topics-dock, #recentPhotosBottomTopicsDock, .recent-videos-bottom-topics-dock, #recentVideosBottomTopicsDock) .photos-bottom-topics-list:is(.is-expanded, .is-open) :is(.photo-topic-tag-btn, .video-topic-tag-btn):nth-child(16) { transition-delay: 480ms; }
:is(.photos-bottom-topics-dock, .photos-bottom-dock, #photosBottomTopicsDock, .blog-bottom-topics-dock, #blogBottomTopicsDock, .recent-photos-bottom-topics-dock, #recentPhotosBottomTopicsDock, .recent-videos-bottom-topics-dock, #recentVideosBottomTopicsDock) .photos-bottom-topics-list:is(.is-expanded, .is-open) :is(.photo-topic-tag-btn, .video-topic-tag-btn):nth-child(17) { transition-delay: 512ms; }
:is(.photos-bottom-topics-dock, .photos-bottom-dock, #photosBottomTopicsDock, .blog-bottom-topics-dock, #blogBottomTopicsDock, .recent-photos-bottom-topics-dock, #recentPhotosBottomTopicsDock, .recent-videos-bottom-topics-dock, #recentVideosBottomTopicsDock) .photos-bottom-topics-list:is(.is-expanded, .is-open) :is(.photo-topic-tag-btn, .video-topic-tag-btn):nth-child(18) { transition-delay: 544ms; }
:is(.photos-bottom-topics-dock, .photos-bottom-dock, #photosBottomTopicsDock, .blog-bottom-topics-dock, #blogBottomTopicsDock, .recent-photos-bottom-topics-dock, #recentPhotosBottomTopicsDock, .recent-videos-bottom-topics-dock, #recentVideosBottomTopicsDock) .photos-bottom-topics-list:is(.is-expanded, .is-open) :is(.photo-topic-tag-btn, .video-topic-tag-btn):nth-child(19) { transition-delay: 576ms; }
:is(.photos-bottom-topics-dock, .photos-bottom-dock, #photosBottomTopicsDock, .blog-bottom-topics-dock, #blogBottomTopicsDock, .recent-photos-bottom-topics-dock, #recentPhotosBottomTopicsDock, .recent-videos-bottom-topics-dock, #recentVideosBottomTopicsDock) .photos-bottom-topics-list:is(.is-expanded, .is-open) :is(.photo-topic-tag-btn, .video-topic-tag-btn):nth-child(20) { transition-delay: 608ms; }

/* ==========================================================================
   Slide Topic Docks (Blog, Recent Photos, Recent Videos):
   Sleek centered capsule docks matching Firehose layout
   ========================================================================== */
.blog-bottom-topics-dock,
.recent-photos-bottom-topics-dock,
.recent-videos-bottom-topics-dock {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 1140px !important;
  margin: clamp(0.75rem, 1.8vh, 1.4rem) auto 0 auto !important;
  padding: 0 1rem !important;
  position: relative !important;
  z-index: 25 !important;
  pointer-events: auto !important;
}

.blog-bottom-topics-dock .photos-bottom-topics-list,
.recent-photos-bottom-topics-dock .photos-bottom-topics-list,
.recent-videos-bottom-topics-dock .photos-bottom-topics-list {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  max-width: 100% !important;
  position: relative !important;
  z-index: 10 !important;
  pointer-events: auto !important;
  transition: z-index 0.2s ease !important;
}

.blog-bottom-topics-dock .photos-bottom-topics-list.is-expanded,
.blog-bottom-topics-dock .photos-bottom-topics-list.is-open,
.recent-photos-bottom-topics-dock .photos-bottom-topics-list.is-expanded,
.recent-photos-bottom-topics-dock .photos-bottom-topics-list.is-open,
.recent-videos-bottom-topics-dock .photos-bottom-topics-list.is-expanded,
.recent-videos-bottom-topics-dock .photos-bottom-topics-list.is-open {
  z-index: 25 !important;
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .photos-bottom-filter-wrap {
    flex-direction: row !important;
    justify-content: center !important;
    justify-content: safe center !important;
    gap: 0.45rem !important;
  }
  
  .photos-bottom-types-list .photo-type-tag-btn,
  .photos-bottom-topics-list .photo-topic-tag-btn {
    font-size: 0.70rem !important;
    padding: 0.24rem 0.65rem !important;
  }
}

/* ==========================================================================
   Show Today Button below Firehose Bottom Filter Dock
   Shows in baby blue like TODAY over firehose scroller when visitor scrolls > 1 week ago
   ========================================================================== */
.firehose-show-today-btn {
  position: absolute !important;
  top: calc(100% + 0.4rem) !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(4px) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.35rem !important;
  padding: 0.3rem 0.95rem !important;
  border-radius: 9999px !important;
  background: rgba(56, 189, 248, 0.08) !important;
  border: 1px solid rgba(56, 189, 248, 0.32) !important;
  color: #7dd3fc !important; /* baby blue like TODAY date capsule */
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  user-select: none !important;
  text-decoration: none !important;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.45) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28), 0 0 10px rgba(56, 189, 248, 0.15) !important;
  transition: 
    opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease !important;
  z-index: 30 !important;
}

.firehose-show-today-btn .timeline-paw-icon,
.firehose-show-today-btn i {
  color: #38bdf8 !important;
  filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.65)) !important;
  font-size: 0.75rem !important;
}

.firehose-show-today-btn.is-visible {
  opacity: 0.85 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateX(-50%) translateY(0) !important;
}

.firehose-show-today-btn.is-visible:hover {
  opacity: 1 !important;
  color: #bae6fd !important;
  background: rgba(56, 189, 248, 0.18) !important;
  border-color: rgba(56, 189, 248, 0.6) !important;
  text-shadow: 0 0 14px rgba(56, 189, 248, 0.7) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35), 0 0 16px rgba(56, 189, 248, 0.35) !important;
}

.firehose-show-today-btn.is-visible:active {
  transform: translateX(-50%) scale(0.96) !important;
}

[data-theme="light"] .firehose-show-today-btn {
  background: rgba(2, 132, 199, 0.08) !important;
  border-color: rgba(2, 132, 199, 0.3) !important;
  color: #0284c7 !important;
  text-shadow: none !important;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.12) !important;
}

[data-theme="light"] .firehose-show-today-btn .timeline-paw-icon,
[data-theme="light"] .firehose-show-today-btn i {
  color: #0ea5e9 !important;
  filter: drop-shadow(0 0 4px rgba(14, 165, 233, 0.4)) !important;
}

[data-theme="light"] .firehose-show-today-btn.is-visible:hover {
  color: #0369a1 !important;
  background: rgba(2, 132, 199, 0.16) !important;
  border-color: rgba(2, 132, 199, 0.55) !important;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.22) !important;
}

/* Active states for type filter buttons matching card badge colors */
.photos-bottom-types-list .photo-type-tag-btn.active[data-type-slug="all"] {
  background: rgba(16, 185, 129, 0.16) !important;
  border-color: rgba(52, 211, 153, 0.5) !important;
  color: #6ee7b7 !important;
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

.photos-bottom-types-list .photo-type-tag-btn.active[data-type-slug="article"] {
  background: rgba(56, 189, 248, 0.16) !important;
  border-color: rgba(56, 189, 248, 0.5) !important;
  color: #38bdf8 !important;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

.photos-bottom-types-list .photo-type-tag-btn.active[data-type-slug="video"] {
  background: rgba(192, 132, 252, 0.16) !important;
  border-color: rgba(192, 132, 252, 0.5) !important;
  color: #c084fc !important;
  box-shadow: 0 0 14px rgba(192, 132, 252, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

.photos-bottom-types-list .photo-type-tag-btn.active[data-type-slug="photo"] {
  background: rgba(251, 191, 36, 0.16) !important;
  border-color: rgba(251, 191, 36, 0.5) !important;
  color: #fbbf24 !important;
  box-shadow: 0 0 14px rgba(251, 191, 36, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

.photos-bottom-types-list .photo-type-tag-btn.active[data-type-slug="album"] {
  background: rgba(52, 211, 153, 0.16) !important;
  border-color: rgba(52, 211, 153, 0.5) !important;
  color: #34d399 !important;
  box-shadow: 0 0 14px rgba(52, 211, 153, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

/* Active State for Topic tag buttons: Theme-colored glass pill matching Favorite Things */
.photos-bottom-topics-list .photo-topic-tag-btn.active,
.photos-bottom-topics-list .video-topic-tag-btn.active,
.recent-videos-bottom-topics-dock .video-topic-tag-btn.active {
  opacity: 1 !important;
  background: rgba(16, 185, 129, 0.16) !important;
  border-color: rgba(52, 211, 153, 0.45) !important;
  color: #6ee7b7 !important;
  font-weight: 600 !important;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

.photos-bottom-topics-list .photo-topic-tag-btn.active.theme-amber,
.photos-bottom-topics-list .video-topic-tag-btn.active.theme-amber,
.recent-videos-bottom-topics-dock .video-topic-tag-btn.active.theme-amber {
  background: rgba(245, 158, 11, 0.16) !important;
  border-color: rgba(251, 191, 36, 0.5) !important;
  color: #fde68a !important;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

.photos-bottom-topics-list .photo-topic-tag-btn.active.theme-cyan,
.photos-bottom-topics-list .video-topic-tag-btn.active.theme-cyan,
.recent-videos-bottom-topics-dock .video-topic-tag-btn.active.theme-cyan {
  background: rgba(6, 182, 212, 0.16) !important;
  border-color: rgba(34, 211, 238, 0.5) !important;
  color: #a5f3fc !important;
  box-shadow: 0 0 14px rgba(6, 182, 212, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

.photos-bottom-topics-list .photo-topic-tag-btn.active.theme-purple,
.photos-bottom-topics-list .video-topic-tag-btn.active.theme-purple,
.recent-videos-bottom-topics-dock .video-topic-tag-btn.active.theme-purple {
  background: rgba(168, 85, 247, 0.16) !important;
  border-color: rgba(192, 132, 252, 0.5) !important;
  color: #e9d5ff !important;
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

.photos-bottom-topics-list .photo-topic-tag-btn.active.theme-emerald,
.photos-bottom-topics-list .video-topic-tag-btn.active.theme-emerald,
.recent-videos-bottom-topics-dock .video-topic-tag-btn.active.theme-emerald {
  background: rgba(16, 185, 129, 0.16) !important;
  border-color: rgba(52, 211, 153, 0.5) !important;
  color: #6ee7b7 !important;
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

.photos-bottom-topics-list .photo-topic-tag-btn.active i,
.photos-bottom-topics-list .video-topic-tag-btn.active i,
.recent-videos-bottom-topics-dock .video-topic-tag-btn.active i {
  opacity: 1 !important;
}

/* Global Protection: Mousing over any tag never makes it red or lines-through */
.article-badge-tag:hover,
.photo-topic-tag-btn:hover,
.video-topic-tag-btn:hover,
.item-tag-badge:hover,
.is-admin-topic-tag:hover {
  text-decoration: none !important;
}
.article-badge-tag:hover .badge-text,
.photo-topic-tag-btn:hover .badge-text,
.video-topic-tag-btn:hover .badge-text,
.item-tag-badge:hover .badge-text,
.is-admin-topic-tag:hover .badge-text {
  text-decoration: none !important;
}

/* ==========================================================================
   Firehose Seen Filter & Seen Indicators (Friends & Family)
   User Request: "add 'Skip Stuff i've Seen (toggle on/off) - filter items
   that they have viewed if on/off (friends and family only)."
   ========================================================================== */

.firehose-seen-filter-wrap,
.firehose-seen-toggle-btn,
.firehose-seen-reset-btn {
  display: none !important;
}

.firehose-seen-toggle-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: auto !important;
  max-width: none !important;
  height: 34px !important;
  padding: 0 14px 0 12px !important;
  gap: 8px !important;
  border-radius: 9999px !important;
  box-sizing: border-box !important;
  background: rgba(15, 23, 42, 0.85) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.22) !important;
  color: #e2e8f0 !important;
  cursor: pointer !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  font-family: var(--font-body, 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif) !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  user-select: none !important;
}

.firehose-seen-toggle-btn:hover {
  background: rgba(30, 41, 59, 0.95) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
}

.firehose-seen-toggle-btn .firehose-seen-icon {
  font-size: 0.82rem !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  color: #94a3b8 !important;
  transition: color 0.2s ease !important;
}

.firehose-seen-toggle-btn .badge-text,
.firehose-seen-toggle-btn .firehose-seen-text {
  display: inline-block !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  color: inherit !important;
}

/* Mini Toggle Switch */
.firehose-seen-switch {
  display: inline-flex !important;
  align-items: center !important;
  width: 28px !important;
  height: 16px !important;
  background: rgba(255, 255, 255, 0.18) !important;
  border-radius: 9999px !important;
  padding: 2px !important;
  position: relative !important;
  transition: background 0.22s ease !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

.firehose-seen-switch-knob {
  display: block !important;
  width: 12px !important;
  height: 12px !important;
  background: #ffffff !important;
  border-radius: 50% !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), background 0.22s ease !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}

.firehose-seen-status {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  color: #94a3b8 !important;
  transition: color 0.2s ease !important;
}

/* Active Filtering State: Skipping / Hiding Seen Items (Toggle ON) */
.firehose-seen-toggle-btn.is-skipping-seen,
.firehose-seen-toggle-btn.is-filtering-unseen,
.firehose-seen-toggle-btn[data-skip-seen="true"],
.firehose-seen-toggle-btn[aria-pressed="true"],
.firehose-seen-toggle-btn[data-include-seen="false"] {
  background: rgba(16, 185, 129, 0.18) !important;
  border: 1.5px solid #10b981 !important;
  color: #ffffff !important;
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.firehose-seen-toggle-btn.is-skipping-seen:hover,
.firehose-seen-toggle-btn.is-filtering-unseen:hover,
.firehose-seen-toggle-btn[data-skip-seen="true"]:hover,
.firehose-seen-toggle-btn[aria-pressed="true"]:hover {
  background: rgba(16, 185, 129, 0.28) !important;
  border-color: #34d399 !important;
  color: #ffffff !important;
  box-shadow: 0 0 22px rgba(16, 185, 129, 0.5) !important;
}

.firehose-seen-toggle-btn.is-skipping-seen .firehose-seen-icon,
.firehose-seen-toggle-btn[data-skip-seen="true"] .firehose-seen-icon {
  color: #34d399 !important;
}

.firehose-seen-toggle-btn.is-skipping-seen .firehose-seen-switch,
.firehose-seen-toggle-btn[data-skip-seen="true"] .firehose-seen-switch {
  background: #10b981 !important;
}

.firehose-seen-toggle-btn.is-skipping-seen .firehose-seen-switch-knob,
.firehose-seen-toggle-btn[data-skip-seen="true"] .firehose-seen-switch-knob {
  transform: translateX(12px) !important;
}

.firehose-seen-toggle-btn.is-skipping-seen .firehose-seen-status,
.firehose-seen-toggle-btn[data-skip-seen="true"] .firehose-seen-status {
  color: #34d399 !important;
}

.firehose-seen-badge-count {
  display: inline-block !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  padding: 2px 7px !important;
  border-radius: 9999px !important;
  background: rgba(16, 185, 129, 0.28) !important;
  color: #a7f3d0 !important;
  border: 1px solid rgba(16, 185, 129, 0.4) !important;
  margin-left: 2px !important;
  transition: all 0.2s ease !important;
}

/* Reset Seen History Button */
.firehose-seen-reset-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: rgba(15, 23, 42, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #94a3b8 !important;
  cursor: pointer !important;
  font-size: 0.78rem !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  padding: 0 !important;
}

.firehose-seen-reset-btn:hover {
  background: rgba(244, 63, 94, 0.2) !important;
  border-color: rgba(244, 63, 94, 0.6) !important;
  color: #fb7185 !important;
  transform: rotate(-90deg) scale(1.05) !important;
  box-shadow: 0 0 12px rgba(244, 63, 94, 0.4) !important;
}

/* Card Seen Indicator (Badge in Card Bottom-Right) */
.card-seen-indicator {
  position: absolute !important;
  bottom: 8px !important;
  right: 8px !important;
  z-index: 22 !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  cursor: pointer !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
  background: rgba(15, 23, 42, 0.7) !important;
  color: rgba(255, 255, 255, 0.4) !important;
  opacity: 0 !important;
  transform: scale(0.85) !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  pointer-events: auto !important;
}

.photo-album-card:hover .card-seen-indicator,
.recent-photo-timeline-card:hover .card-seen-indicator,
.recent-video-timeline-card:hover .card-seen-indicator,
.video-album-card:hover .card-seen-indicator {
  opacity: 0.85 !important;
  transform: scale(1) !important;
}

.card-seen-indicator:hover {
  opacity: 1 !important;
  background: rgba(15, 23, 42, 0.95) !important;
  border-color: #34d399 !important;
  color: #34d399 !important;
  transform: scale(1.1) !important;
  box-shadow: 0 0 12px rgba(52, 211, 153, 0.4) !important;
}

/* When Card is Marked as Seen */
.card-seen-indicator.is-seen,
.photo-album-card.is-seen-item .card-seen-indicator,
.recent-photo-timeline-card.is-seen-item .card-seen-indicator,
.recent-video-timeline-card.is-seen-item .card-seen-indicator,
.video-album-card.is-seen-item .card-seen-indicator {
  opacity: 1 !important;
  transform: scale(1) !important;
  background: rgba(16, 185, 129, 0.9) !important;
  border-color: #34d399 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.5) !important;
}

.card-seen-indicator.is-seen:hover,
.photo-album-card.is-seen-item .card-seen-indicator:hover,
.recent-photo-timeline-card.is-seen-item .card-seen-indicator:hover,
.recent-video-timeline-card.is-seen-item .card-seen-indicator:hover,
.video-album-card.is-seen-item .card-seen-indicator:hover {
  background: #059669 !important;
  border-color: #6ee7b7 !important;
  color: #ffffff !important;
  box-shadow: 0 0 14px rgba(52, 211, 153, 0.8) !important;
  transform: scale(1.12) !important;
}

.card-seen-indicator .card-seen-check {
  font-size: 0.72rem !important;
  line-height: 1 !important;
  margin: 0 !important;
  pointer-events: none !important;
}

/* Subtle dimming of seen thumbnails to give visual contrast */
.photo-album-card.is-seen-item .blog-thumb {
  filter: brightness(0.92) contrast(0.96);
  transition: filter 0.25s ease !important;
}

.photo-album-card.is-seen-item:hover .blog-thumb {
  filter: brightness(1) contrast(1);
}

/* Visibility Restrictions: Hide Seen controls from Anonymous visitors */
body.visitor-type-anonymous .firehose-seen-filter-wrap,
body.visitor-type-anonymous .card-seen-indicator,
body[data-visitor-type="anonymous"] .firehose-seen-filter-wrap,
body[data-visitor-type="anonymous"] .card-seen-indicator,
html[data-visitor-type="anonymous"] .firehose-seen-filter-wrap,
html[data-visitor-type="anonymous"] .card-seen-indicator {
  display: none !important;
}

/* Long Form Badges on Cards in Photo Albums & Videos */
#recent-photos .item-access-badges,
#recent-videos .item-access-badges {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  right: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
  max-width: calc(50% - 10px) !important;
  z-index: 15 !important;
  pointer-events: auto !important;
}

#recent-photos .item-topic-badges,
#recent-videos .item-topic-badges {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  left: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 4px !important;
  max-width: calc(50% - 10px) !important;
  z-index: 15 !important;
  pointer-events: auto !important;
}

#recent-photos .album-card-badges .article-badge,
#recent-photos .album-card-badges .album-badge-category,
#recent-photos .album-card-badges .album-badge-visibility,
#recent-photos .item-access-badges > span,
#recent-photos .item-topic-badges > span,
#recent-videos .album-card-badges .article-badge,
#recent-videos .album-card-badges .album-badge-category,
#recent-videos .album-card-badges .album-badge-visibility,
#recent-videos .item-access-badges > span,
#recent-videos .item-topic-badges > span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: auto !important;
  min-width: auto !important;
  max-width: 100% !important;
  height: 24px !important;
  padding: 2px 9px 2px 7px !important;
  gap: 5px !important;
  border-radius: 9999px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  font-family: var(--font-body, 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45) !important;
}

#recent-photos .album-card-badges .badge-text,
#recent-photos .item-access-badges .badge-text,
#recent-photos .item-topic-badges .badge-text,
#recent-videos .album-card-badges .badge-text,
#recent-videos .item-access-badges .badge-text,
#recent-videos .item-topic-badges .badge-text {
  display: inline-block !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  height: auto !important;
  padding: 0 !important;
  max-width: 100% !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  margin: 0 0 0 2px !important;
  font-family: var(--font-body, 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif) !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: normal !important;
  pointer-events: auto !important;
}

#recent-photos .album-card-badges i,
#recent-photos .item-access-badges i,
#recent-photos .item-topic-badges i,
#recent-videos .album-card-badges i,
#recent-videos .item-access-badges i,
#recent-videos .item-topic-badges i {
  font-size: 0.72rem !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}

/* On hover/focus, expand badge container to reveal full tag label without clipping */
#recent-photos .item-access-badges:hover,
#recent-photos .item-access-badges:focus-within,
#recent-videos .item-access-badges:hover,
#recent-videos .item-access-badges:focus-within,
#recent-photos .item-topic-badges:hover,
#recent-photos .item-topic-badges:focus-within,
#recent-videos .item-topic-badges:hover,
#recent-videos .item-topic-badges:focus-within {
  max-width: 85% !important;
  z-index: 35 !important;
}

#recent-photos .item-access-badges:hover > span,
#recent-videos .item-access-badges:hover > span,
#recent-photos .item-topic-badges:hover > span,
#recent-videos .item-topic-badges:hover > span {
  max-width: none !important;
  overflow: visible !important;
}

/* ==========================================================================
   FIREHOSE SECTION: Hide Access & Topic Badges on Items for Visitors
   Only Stefan / Admin sees access tags and topic tags on Firehose cards.
   ========================================================================== */
/* Firehose Item Type Badge is ALWAYS visible across all roles */
#firehose .firehose-card-type-badge,
#photos .firehose-card-type-badge,
.photos-timeline-wrapper .firehose-card-type-badge,
.photo-album-card .firehose-card-type-badge {
  display: inline-flex !important;
}

#firehose .item-access-badges,
#photos .item-access-badges,
.photos-timeline-wrapper .item-access-badges {
  display: flex !important;
}

body:not(.is-admin):not(.sb-admin-browsing) #firehose .album-card-badges > .album-badge-visibility,
body:not(.is-admin):not(.sb-admin-browsing) #photos .album-card-badges > .album-badge-visibility,
body:not(.is-admin):not(.sb-admin-browsing) #firehose .album-card-badges > .article-badge-visibility,
body:not(.is-admin):not(.sb-admin-browsing) #photos .album-card-badges > .article-badge-visibility,
body:not(.is-admin):not(.sb-admin-browsing) #firehose .album-badge-visibility,
body:not(.is-admin):not(.sb-admin-browsing) #photos .album-badge-visibility,
body:not(.is-admin):not(.sb-admin-browsing) #firehose .article-badge-visibility,
body:not(.is-admin):not(.sb-admin-browsing) #photos .article-badge-visibility,
body.visitor-type-anonymous #firehose .album-badge-visibility,
body.visitor-type-anonymous #photos .album-badge-visibility,
body[data-visitor-type="anonymous"] #firehose .album-badge-visibility,
body[data-visitor-type="anonymous"] #photos .album-badge-visibility {
  display: none !important;
}

/* Explicitly restore all badges when Stefan / Admin is in Admin view */
body.is-admin[data-visitor-type="admin"] #firehose .item-topic-badges,
body.is-admin[data-visitor-type="admin"] #photos .item-topic-badges,
body.sb-admin-browsing[data-visitor-type="admin"] #firehose .item-topic-badges,
body.sb-admin-browsing[data-visitor-type="admin"] #photos .item-topic-badges,
body.is-admin:not([data-visitor-type]) #firehose .item-topic-badges,
body.is-admin:not([data-visitor-type]) #photos .item-topic-badges,
body.sb-admin-browsing:not([data-visitor-type]) #firehose .item-topic-badges,
body.sb-admin-browsing:not([data-visitor-type]) #photos .item-topic-badges {
  display: inline-flex !important;
}

/* Ensure mouse-over tooltip is completely suppressed on timeline cards */
#firehose .photo-album-card:hover .sb-liquid-glass-tooltip,
#photos .photo-album-card:hover .sb-liquid-glass-tooltip,
.photo-album-card .sb-liquid-glass-tooltip,
.video-album-card .sb-liquid-glass-tooltip {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ==========================================================================
   Preemptive Version Notifier & 1-Click Update UI
   ========================================================================== */
.sb-version-prompt {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translate(-50%, -60px) scale(0.96);
  z-index: 999999;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.35s ease;
  max-width: 580px;
  width: calc(100vw - 32px);
}

.sb-version-prompt.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0) scale(1);
}

.sb-version-prompt.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -40px) scale(0.95);
}

.sb-version-prompt-glass {
  background: rgba(15, 23, 42, 0.94);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(52, 211, 153, 0.45);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.7),
              0 0 32px rgba(16, 185, 129, 0.28),
              inset 0 1px 0 rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.sb-version-icon-glow {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.22), rgba(56, 189, 248, 0.22));
  border: 1px solid rgba(52, 211, 153, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: #34d399;
  box-shadow: 0 0 16px rgba(52, 211, 153, 0.35);
  animation: sbUpdateGlowPulse 2.4s infinite ease-in-out;
}

@keyframes sbUpdateGlowPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 16px rgba(52, 211, 153, 0.35);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 0 24px rgba(52, 211, 153, 0.6);
  }
}

.sb-version-content {
  flex: 1;
  min-width: 0;
}

.sb-version-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sb-version-title {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 1.02rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.01em;
}

.sb-version-badge {
  background: rgba(16, 185, 129, 0.18);
  border: 1px solid rgba(52, 211, 153, 0.6);
  color: #34d399;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 9999px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sb-version-desc {
  font-size: 0.84rem;
  color: rgba(226, 232, 240, 0.85);
  margin: 3px 0 0 0;
  line-height: 1.35;
}

.sb-version-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.sb-version-btn {
  font-family: inherit;
  font-weight: 700;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
}

.sb-version-btn-update {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
  color: #ffffff;
  font-size: 0.88rem;
  padding: 9px 18px;
  border-radius: 12px;
  gap: 8px;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.45);
}

.sb-version-btn-update:hover {
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 6px 22px rgba(16, 185, 129, 0.65);
  filter: brightness(1.08);
}

.sb-version-btn-update:active {
  transform: translateY(1px) scale(0.98);
}

.sb-version-btn-update.is-loading {
  opacity: 0.85;
  cursor: wait;
  pointer-events: none;
}

.sb-version-btn-dismiss {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.65);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 0.82rem;
}

.sb-version-btn-dismiss:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  transform: scale(1.08);
}

/* Floating Minimized Chip */
.sb-version-minimized-chip {
  position: fixed;
  top: 18px;
  right: 24px;
  z-index: 999999;
  background: rgba(15, 23, 42, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(52, 211, 153, 0.5);
  border-radius: 9999px;
  padding: 7px 16px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #34d399;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55), 0 0 16px rgba(52, 211, 153, 0.3);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
  opacity: 0;
  transform: translateY(-20px);
}

.sb-version-minimized-chip.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.sb-version-minimized-chip.is-hidden {
  opacity: 0;
  transform: translateY(-20px);
  pointer-events: none;
}

.sb-version-minimized-chip:hover {
  transform: translateY(-1px) scale(1.04);
  background: rgba(5, 150, 105, 0.25);
  border-color: #34d399;
  color: #ffffff;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.6), 0 0 22px rgba(52, 211, 153, 0.5);
}

@media (max-width: 640px) {
  .sb-version-prompt {
    top: 12px;
    left: 12px;
    right: 12px;
    transform: translateY(-50px);
    width: auto;
    max-width: none;
  }
  .sb-version-prompt.is-visible {
    transform: translateY(0);
  }
  .sb-version-prompt-glass {
    flex-direction: column;
    align-items: flex-start;
    padding: 14px;
    gap: 12px;
  }
  .sb-version-actions {
    width: 100%;
    justify-content: space-between;
  }
  .sb-version-btn-update {
    flex: 1;
  }
  .sb-version-minimized-chip {
    top: 10px;
    right: 10px;
    font-size: 0.76rem;
    padding: 6px 12px;
  }
}

/* --------------------------------------------------------------------------
   Contact Slide: Transparency & Policy Links (Your Privacy & Your Data)
   -------------------------------------------------------------------------- */
.contact-footer-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  margin-top: 1.75rem;
  text-align: center;
  position: relative;
  z-index: 10;
}

.contact-policy-link {
  background: rgba(11, 17, 28, 0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #e2e8f0;
  font-size: 0.84rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.95rem;
  border-radius: var(--radius-full, 999px);
  cursor: pointer;
  transition: all var(--transition-fast, 0.2s ease);
  text-decoration: none;
  font-family: inherit;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.contact-policy-link i {
  font-size: 0.85rem;
  color: var(--color-primary-light, #34d399);
  opacity: 0.9;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.contact-policy-link:hover {
  color: #ffffff;
  background: rgba(5, 150, 105, 0.28);
  border-color: rgba(52, 211, 153, 0.55);
  box-shadow: 0 4px 20px rgba(52, 211, 153, 0.35);
  transform: translateY(-1px);
}

.contact-policy-link:hover i {
  opacity: 1;
  transform: scale(1.15);
}

.contact-footer-divider {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.8rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* --------------------------------------------------------------------------
   Liquid-Glass Policy Modal (Your Privacy / Your Data)
   -------------------------------------------------------------------------- */
.sb-policy-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(5, 10, 22, 0.65);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s;
}

.sb-policy-modal-backdrop.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.sb-policy-modal {
  position: relative;
  width: 100%;
  max-width: 620px;
  max-height: calc(100dvh - 3.5rem);
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0.02) 100%
  );
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-top: 1.5px solid rgba(52, 211, 153, 0.55);
  box-shadow: 
    0 24px 60px rgba(0, 0, 0, 0.75),
    0 0 45px rgba(52, 211, 153, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transform: translateY(16px) scale(0.97);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  color: #f8fafc;
}

.sb-policy-modal-backdrop.open .sb-policy-modal {
  transform: translateY(0) scale(1);
}

.sb-policy-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.35rem 1.65rem 1.15rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  gap: 1rem;
}

.sb-policy-header-left {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.sb-policy-icon-badge {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(5, 150, 105, 0.35) 0%, rgba(16, 185, 129, 0.15) 100%);
  border: 1px solid rgba(52, 211, 153, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #34d399;
  font-size: 1.25rem;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(5, 150, 105, 0.3);
}

.sb-policy-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #ffffff;
  line-height: 1.25;
}

.sb-policy-subtitle {
  margin: 0.2rem 0 0 0;
  font-size: 0.85rem;
  color: var(--text-muted, #94a3b8);
  line-height: 1.3;
}

.sb-policy-header-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}

.sb-policy-edit-btn {
  display: none;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: #cbd5e1;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sb-policy-edit-btn:hover {
  background: rgba(52, 211, 153, 0.15);
  border-color: rgba(52, 211, 153, 0.5);
  color: #34d399;
}

/* Shown when user has admin posture */
body.is-admin .sb-policy-edit-btn,
body.sb-admin-browsing .sb-policy-edit-btn,
.sb-policy-modal.sb-admin-mode .sb-policy-edit-btn {
  display: inline-flex;
}

.sb-policy-close-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sb-policy-close-btn:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.25);
  transform: scale(1.05);
}

.sb-policy-view,
.sb-policy-edit-pane {
  padding: 1.5rem 1.75rem;
  overflow-y: auto;
  flex: 1;
}

.sb-policy-content {
  font-size: 0.94rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.88);
}

.sb-policy-content h4 {
  font-size: 1.05rem;
  font-weight: 700;
  color: #34d399;
  margin: 1.25rem 0 0.5rem;
  letter-spacing: -0.01em;
}

.sb-policy-content h4:first-child {
  margin-top: 0;
}

.sb-policy-content p {
  margin: 0 0 1rem;
}

.sb-policy-content ul {
  margin: 0.5rem 0 1rem 0;
  padding: 0;
  list-style: none;
}

.sb-policy-content li {
  position: relative;
  margin-bottom: 0.45rem;
  padding-left: 1.25rem;
}

.sb-policy-content li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #34d399;
  font-weight: bold;
}

.sb-policy-content strong {
  color: #ffffff;
}

.sb-policy-footer-note {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--text-muted, #94a3b8);
}

.sb-policy-footer-note i {
  color: #34d399;
}

/* Edit Pane Styles */
.sb-policy-edit-field-group {
  margin-bottom: 1.15rem;
}

.sb-policy-edit-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #34d399;
  margin-bottom: 0.4rem;
  font-family: var(--font-mono, monospace);
}

.sb-policy-input,
.sb-policy-textarea {
  width: 100%;
  background: rgba(11, 17, 28, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-sm, 10px);
  color: #ffffff;
  padding: 0.65rem 0.85rem;
  font-size: 0.92rem;
  box-sizing: border-box;
  font-family: inherit;
  transition: all 0.2s ease;
}

.sb-policy-textarea {
  font-family: var(--font-mono, monospace);
  font-size: 0.86rem;
  line-height: 1.6;
  resize: vertical;
}

.sb-policy-input:focus,
.sb-policy-textarea:focus {
  outline: none;
  border-color: #34d399;
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.2), 0 0 14px rgba(52, 211, 153, 0.25);
  background: rgba(11, 17, 28, 0.9);
}

.sb-policy-edit-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.35rem;
  flex-wrap: wrap;
}

.sb-policy-save-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.25rem;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}

.sb-policy-reset-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #cbd5e1;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sb-policy-reset-btn:hover {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.4);
  color: #fca5a5;
}

.sb-policy-cancel-btn {
  background: transparent;
  border: none;
  color: var(--text-muted, #94a3b8);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0.55rem 0.85rem;
  transition: color 0.2s ease;
}

.sb-policy-cancel-btn:hover {
  color: #ffffff;
}

.sb-policy-feedback {
  margin-top: 0.85rem;
  padding: 0.65rem 1rem;
  border-radius: 8px;
  font-size: 0.85rem;
  line-height: 1.4;
}

.sb-policy-feedback.success {
  background: rgba(5, 150, 105, 0.2);
  border: 1px solid rgba(52, 211, 153, 0.4);
  color: #34d399;
}

.sb-policy-feedback.error {
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #fca5a5;
}

/* Light Theme Styling */
[data-theme="light"] .sb-policy-modal {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.85) 0%,
    rgba(241, 245, 249, 0.75) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-top: 1.5px solid rgba(5, 150, 105, 0.5);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.15), 0 0 32px rgba(5, 150, 105, 0.18);
  color: #0f172a;
}

[data-theme="light"] .sb-policy-title {
  color: #0f172a;
}

[data-theme="light"] .sb-policy-content {
  color: #334155;
}

[data-theme="light"] .sb-policy-content strong {
  color: #0f172a;
}

[data-theme="light"] .sb-policy-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .sb-policy-input,
[data-theme="light"] .sb-policy-textarea {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(0, 0, 0, 0.15);
  color: #0f172a;
}

[data-theme="light"] .sb-policy-close-btn,
[data-theme="light"] .sb-policy-edit-btn {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.1);
  color: #475569;
}

/* ==========================================================================
   Admin Tags Dock: Delete Tag (x) & Merge Drop Target & Confirmation Modal
   ========================================================================== */
.dock-tag-delete-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  margin-left: 2px;
  padding: 0;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  color: #94a3b8;
  font-size: 0.62rem;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.85);
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

.sb-dock-tag:hover .dock-tag-delete-btn {
  opacity: 1;
  transform: scale(1);
}

.dock-tag-delete-btn:hover {
  background: rgba(239, 68, 68, 0.3) !important;
  color: #fca5a5 !important;
  transform: scale(1.18);
}

/* Tag Merge Drop Target Highlight */
.sb-dock-tag.is-merge-target {
  background: rgba(249, 115, 22, 0.28) !important;
  border: 1px dashed #f97316 !important;
  color: #ffffff !important;
  transform: scale(1.05) translateX(4px) !important;
  box-shadow: 0 0 20px rgba(249, 115, 22, 0.6) !important;
}

/* Tag Confirmation Warning Modal */
.sb-tag-confirm-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100095;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(11, 18, 32, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  padding: 16px;
}

.sb-tag-confirm-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

.sb-tag-confirm-dialog {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.96) 0%, rgba(30, 41, 59, 0.95) 100%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.8), 0 0 35px rgba(16, 185, 129, 0.15);
  max-width: 500px;
  width: 100%;
  padding: 28px 24px 22px;
  text-align: center;
  transform: translateY(12px) scale(0.96);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

.sb-tag-confirm-backdrop.is-open .sb-tag-confirm-dialog {
  transform: translateY(0) scale(1);
}

.sb-tag-confirm-icon {
  width: 54px;
  height: 54px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.45rem;
}

.sb-tag-confirm-icon.is-danger {
  background: rgba(239, 68, 68, 0.18);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.4);
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.25);
}

.sb-tag-confirm-icon.is-warning {
  background: rgba(249, 115, 22, 0.18);
  color: #fb923c;
  border: 1px solid rgba(249, 115, 22, 0.4);
  box-shadow: 0 0 20px rgba(249, 115, 22, 0.25);
}

.sb-tag-confirm-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 8px;
  line-height: 1.35;
}

.sb-tag-confirm-desc {
  font-size: 0.84rem;
  color: #94a3b8;
  line-height: 1.55;
  margin: 0 0 16px;
}

.sb-tag-confirm-desc strong {
  color: #f1f5f9;
}

/* Tag instances info box */
.sb-tag-instances-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 11px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  margin: 0 0 16px;
  text-align: center;
}

.sb-tag-instances-box.is-empty {
  border-color: rgba(16, 185, 129, 0.3);
  background: rgba(16, 185, 129, 0.08);
}

.sb-tag-instances-headline {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
  font-weight: 600;
  color: #f8fafc;
}

.sb-tag-instances-headline i {
  color: #fb923c;
}

.sb-tag-instances-box.is-empty .sb-tag-instances-headline i {
  color: #34d399;
}

.sb-tag-instances-detail {
  font-size: 0.76rem;
  color: #94a3b8;
  letter-spacing: 0.01em;
}

/* Tag remapping options */
.sb-tag-remap-options {
  display: flex;
  flex-direction: column;
  gap: 9px;
  text-align: left;
  margin-bottom: 20px;
}

.sb-tag-option-label {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 14px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.09);
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.sb-tag-option-label:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
}

.sb-tag-option-label.is-active {
  background: rgba(249, 115, 22, 0.09);
  border-color: rgba(249, 115, 22, 0.45);
  box-shadow: 0 0 16px rgba(249, 115, 22, 0.12);
}

.sb-tag-option-label.is-danger-active {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.4);
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.12);
}

.sb-tag-option-label input[type="radio"] {
  margin-top: 3px;
  accent-color: #ea580c;
  cursor: pointer;
}

.sb-tag-option-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.sb-tag-option-title {
  font-size: 0.84rem;
  font-weight: 600;
  color: #f1f5f9;
  display: flex;
  align-items: center;
  gap: 7px;
}

.sb-tag-option-title i {
  font-size: 0.8rem;
  opacity: 0.85;
}

.sb-tag-option-desc {
  font-size: 0.74rem;
  color: #94a3b8;
  line-height: 1.4;
}

.sb-tag-remap-select {
  width: 100%;
  padding: 8px 12px;
  border-radius: 9px;
  background: #090d16;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #f8fafc;
  font-size: 0.82rem;
  outline: none;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 5px;
  box-sizing: border-box;
}

.sb-tag-remap-select:focus {
  border-color: #ea580c;
  box-shadow: 0 0 0 2px rgba(234, 88, 12, 0.25);
}

.sb-tag-remap-select:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: rgba(15, 23, 42, 0.4);
}

.sb-tag-confirm-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.sb-tag-confirm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 18px;
  border-radius: 12px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
}

.sb-tag-confirm-btn.btn-cancel {
  background: rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.sb-tag-confirm-btn.btn-cancel:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

.sb-tag-confirm-btn.btn-danger {
  background: #dc2626;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.4);
}

.sb-tag-confirm-btn.btn-danger:hover {
  background: #b91c1c;
  box-shadow: 0 6px 20px rgba(220, 38, 38, 0.6);
}

.sb-tag-confirm-btn.btn-primary {
  background: #ea580c;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(234, 88, 12, 0.4);
}

.sb-tag-confirm-btn.btn-primary:hover {
  background: #c2410c;
  box-shadow: 0 6px 20px rgba(234, 88, 12, 0.6);
}

.sb-tag-confirm-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ==========================================================================
   OMNI ACCESS MATRIX BUTTON (in .sb-omni-wrap)
   ========================================================================== */
.sb-omni-btn.sb-omni-matrix-btn {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.16) 0%,
    rgba(147, 51, 234, 0.16) 35%,
    rgba(15, 23, 42, 0.88) 100%
  );
  border-color: rgba(168, 85, 247, 0.45);
}

.sb-omni-btn.sb-omni-matrix-btn .sb-omni-halo {
  background: radial-gradient(circle, rgba(168, 85, 247, 0.45) 0%, transparent 70%);
}

.sb-omni-btn.sb-omni-matrix-btn .sb-omni-icon {
  background: rgba(168, 85, 247, 0.22);
  color: #c084fc;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.4);
}

.sb-omni-btn.sb-omni-matrix-btn .sb-omni-badge {
  background: rgba(168, 85, 247, 0.2);
  border-color: rgba(168, 85, 247, 0.45);
  color: #e9d5ff;
}

.sb-omni-btn.sb-omni-matrix-btn:hover {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.22) 0%,
    rgba(147, 51, 234, 0.26) 35%,
    rgba(15, 23, 42, 0.95) 100%
  );
  border-color: rgba(192, 132, 252, 0.85);
  box-shadow: 
    0 14px 34px -4px rgba(0, 0, 0, 0.7),
    0 0 24px rgba(168, 85, 247, 0.45);
}

/* ==========================================================================
   CONTENT & ACCESS MATRIX WORKSPACE OVERLAY (ADMIN ONLY)
   ========================================================================== */
.sb-matrix-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(8, 12, 22, 0.94);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  padding: 1.5rem 2rem 3rem 2rem;
  overflow-y: auto;
  box-sizing: border-box;
  animation: sbMatrixFadeIn 0.24s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes sbMatrixFadeIn {
  from {
    opacity: 0;
    transform: scale(0.985);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.sb-matrix-container {
  max-width: 1560px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

/* Header */
.sb-matrix-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-radius: 16px;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.sb-matrix-header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.sb-matrix-icon-badge {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.35) 0%, rgba(56, 189, 248, 0.3) 100%);
  border: 1px solid rgba(168, 85, 247, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e9d5ff;
  font-size: 1.2rem;
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.35);
  flex-shrink: 0;
}

.sb-matrix-title-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.sb-matrix-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.sb-matrix-omni-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 9999px;
  background: rgba(56, 189, 248, 0.18);
  border: 1px solid rgba(56, 189, 248, 0.45);
  color: #7dd3fc;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sb-matrix-admin-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 9999px;
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.45);
  color: #fca5a5;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sb-matrix-subtitle {
  margin: 0.2rem 0 0 0;
  font-size: 0.8rem;
  color: var(--text-muted, #94a3b8);
}

.sb-matrix-header-right {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.sb-matrix-stat-pills {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.sb-matrix-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
}

.sb-matrix-stat-pill.stat-public {
  border-color: rgba(52, 211, 153, 0.4);
  color: #6ee7b7;
}

.sb-matrix-stat-pill.stat-friends {
  border-color: rgba(56, 189, 248, 0.45);
  color: #7dd3fc;
}

.sb-matrix-stat-pill.stat-family {
  border-color: rgba(234, 179, 8, 0.45);
  color: #fde047;
}

.sb-matrix-stat-pill.stat-private {
  border-color: rgba(239, 68, 68, 0.45);
  color: #fca5a5;
}

.sb-matrix-close-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sb-matrix-close-btn:hover {
  background: rgba(239, 68, 68, 0.25);
  border-color: #ef4444;
  color: #ffffff;
  transform: rotate(90deg);
}

/* Toolbar */
.sb-matrix-toolbar {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-radius: 16px;
}

.sb-matrix-filter-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.sb-matrix-filter-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94a3b8;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 125px;
}

.sb-matrix-segmented-control {
  display: inline-flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.35);
  padding: 3px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  gap: 3px;
  flex-wrap: wrap;
}

.matrix-seg-btn {
  background: transparent;
  border: 1px solid transparent;
  color: #94a3b8;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: 9999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: all 0.15s ease;
}

.matrix-seg-btn:hover {
  color: #f1f5f9;
  background: rgba(255, 255, 255, 0.05);
}

.matrix-seg-btn.active {
  background: rgba(56, 189, 248, 0.22);
  border-color: rgba(56, 189, 248, 0.55);
  color: #38bdf8;
  font-weight: 700;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.3);
}

.sb-matrix-search-row {
  justify-content: space-between;
}

.sb-matrix-select-wrap select,
.sb-matrix-bulk-select {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  padding: 6px 12px;
  border-radius: 9999px;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  outline: none;
}

.sb-matrix-select-wrap select:focus,
.sb-matrix-bulk-select:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.35);
}

.sb-matrix-search-wrap {
  position: relative;
  flex-grow: 1;
  max-width: 380px;
}

.sb-matrix-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #64748b;
  font-size: 0.8rem;
  pointer-events: none;
}

.sb-matrix-search-input {
  width: 100%;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9999px;
  padding: 6px 32px 6px 34px;
  color: #ffffff;
  font-size: 0.78rem;
  outline: none;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.sb-matrix-search-input:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.35);
}

.sb-matrix-search-clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  padding: 2px;
  font-size: 0.75rem;
}

.sb-matrix-view-toggle {
  display: inline-flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
}

.sb-matrix-view-btn {
  background: transparent;
  border: none;
  color: #64748b;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.sb-matrix-view-btn.active {
  background: rgba(255, 255, 255, 0.12);
  color: #38bdf8;
}

/* Bulk Actions Bar */
.sb-matrix-bulk-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.98) 100%) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.5) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(56, 189, 248, 0.25);
  gap: 1rem;
  flex-wrap: wrap;
  animation: sbBulkBarPop 0.2s ease forwards;
}

@keyframes sbBulkBarPop {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.sb-matrix-bulk-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.sb-matrix-bulk-count {
  font-weight: 700;
  font-size: 0.82rem;
  color: #7dd3fc;
}

.sb-matrix-bulk-actions {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
}

.sb-matrix-bulk-field {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.sb-matrix-bulk-field .field-label {
  font-size: 0.72rem;
  color: #94a3b8;
  font-weight: 600;
}

.sb-matrix-apply-btn {
  padding: 6px 16px;
  border-radius: 9999px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  border: 1px solid #38bdf8;
  color: #ffffff;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.45);
}

.sb-matrix-apply-btn:hover {
  background: linear-gradient(135deg, #0369a1 0%, #075985 100%);
}

.sb-matrix-deselect-btn {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 0.72rem;
  cursor: pointer;
  text-decoration: underline;
}

/* Custom Checkbox */
.sb-matrix-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  user-select: none;
}

.sb-matrix-checkbox {
  display: none;
}

.sb-matrix-checkbox-custom {
  width: 17px;
  height: 17px;
  border-radius: 4px;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  background: rgba(0, 0, 0, 0.4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.sb-matrix-checkbox:checked + .sb-matrix-checkbox-custom {
  background: #38bdf8;
  border-color: #38bdf8;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.6);
}

.sb-matrix-checkbox:checked + .sb-matrix-checkbox-custom::after {
  content: '\f00c';
  font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Pro', 'FontAwesome', sans-serif;
  font-weight: 900;
  font-size: 0.65rem;
  color: #0f172a;
}

/* Body & Table */
.sb-matrix-body {
  padding: 0;
  border-radius: 16px;
  overflow: hidden;
  min-height: 400px;
  position: relative;
}

.sb-matrix-loading,
.sb-matrix-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  gap: 0.75rem;
  color: #94a3b8;
  text-align: center;
}

.sb-matrix-loading i {
  font-size: 2rem;
  color: #38bdf8;
}

.sb-matrix-table-wrap {
  width: 100%;
  overflow-x: auto;
  max-height: 60vh;
}

.sb-matrix-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.sb-matrix-table thead th {
  background: rgba(15, 23, 42, 0.95);
  padding: 10px 14px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94a3b8;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: sticky;
  top: 0;
  z-index: 10;
}

.sb-matrix-table tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: background 0.15s ease;
}

.sb-matrix-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.04);
}

.sb-matrix-table tbody tr.is-selected {
  background: rgba(56, 189, 248, 0.1) !important;
}

.sb-matrix-table td {
  padding: 9px 14px;
  font-size: 0.78rem;
  vertical-align: middle;
}

.col-check {
  width: 32px;
  text-align: center;
}

.col-thumb {
  width: 48px;
}

.matrix-row-thumb {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  object-fit: cover;
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.matrix-row-thumb-placeholder {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  font-size: 1rem;
}

.matrix-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.matrix-type-badge.type-article {
  background: rgba(59, 130, 246, 0.18);
  border: 1px solid rgba(59, 130, 246, 0.4);
  color: #93c5fd;
}

.matrix-type-badge.type-photo {
  background: rgba(16, 185, 129, 0.18);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #6ee7b7;
}

.matrix-type-badge.type-video {
  background: rgba(249, 115, 22, 0.18);
  border: 1px solid rgba(249, 115, 22, 0.4);
  color: #fdba74;
}

.matrix-type-badge.type-section {
  background: rgba(168, 85, 247, 0.18);
  border: 1px solid rgba(168, 85, 247, 0.4);
  color: #d8b4fe;
}

.matrix-title-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.matrix-item-title-link {
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
  font-size: 0.82rem;
  line-height: 1.3;
}

.matrix-item-title-link:hover {
  color: #38bdf8;
  text-decoration: underline;
}

.matrix-item-subtitle {
  font-size: 0.72rem;
  color: #94a3b8;
}

.matrix-meta-sub {
  font-size: 0.7rem;
  color: #64748b;
  margin-top: 3px;
  display: flex;
  gap: 0.4rem;
}

/* Interactive Access Badge Picker */
.matrix-access-picker-wrap {
  position: relative;
  display: inline-block;
}

.matrix-access-badge-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  border: 1px solid transparent;
  padding: 3px 9px;
  border-radius: 9999px;
  font-size: 0.68rem;
  font-weight: 700;
  transition: all 0.15s ease;
}

.matrix-access-badge-btn:hover {
  filter: brightness(1.2);
  transform: translateY(-1px);
}

.matrix-badge-arrow {
  font-size: 0.55rem;
  margin-left: 2px;
  opacity: 0.7;
}

.matrix-access-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 50;
  background: rgba(15, 23, 42, 0.98) !important;
  border: 1px solid rgba(56, 189, 248, 0.45) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.7), 0 0 15px rgba(56, 189, 248, 0.25);
  border-radius: 10px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 170px;
}

.matrix-menu-opt {
  background: transparent;
  border: none;
  color: #cbd5e1;
  font-size: 0.74rem;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-align: left;
  transition: background 0.12s ease;
}

.matrix-menu-opt:hover {
  background: rgba(56, 189, 248, 0.18);
  color: #ffffff;
}

.matrix-menu-opt.active {
  background: rgba(56, 189, 248, 0.25);
  color: #38bdf8;
  font-weight: 700;
}

/* Topics Container & Pills */
.matrix-topics-container {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.matrix-topic-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 2px 7px;
  border-radius: 9999px;
  background: rgba(249, 115, 22, 0.15);
  border: 1px solid rgba(249, 115, 22, 0.35);
  color: #fdba74;
  font-size: 0.68rem;
  font-weight: 600;
}

.matrix-topic-remove-btn {
  background: transparent;
  border: none;
  color: rgba(253, 186, 116, 0.65);
  cursor: pointer;
  padding: 0;
  margin-left: 2px;
  font-size: 0.65rem;
  display: inline-flex;
  align-items: center;
}

.matrix-topic-remove-btn:hover {
  color: #ef4444;
}

.matrix-add-topic-wrap {
  position: relative;
  display: inline-block;
}

.matrix-add-topic-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px dashed rgba(255, 255, 255, 0.22);
  color: #94a3b8;
  font-size: 0.65rem;
  padding: 2px 6px;
  border-radius: 9999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  transition: all 0.12s ease;
}

.matrix-add-topic-btn:hover {
  border-color: #38bdf8;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.1);
}

.matrix-add-topic-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 50;
  background: rgba(15, 23, 42, 0.98) !important;
  border: 1px solid rgba(56, 189, 248, 0.45) !important;
  border-radius: 10px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 220px;
  overflow-y: auto;
  min-width: 160px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.7);
}

.matrix-topic-opt {
  background: transparent;
  border: none;
  color: #cbd5e1;
  font-size: 0.72rem;
  padding: 5px 8px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  text-align: left;
}

.matrix-topic-opt:hover {
  background: rgba(249, 115, 22, 0.2);
  color: #fdba74;
}

.matrix-action-links {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.matrix-link-btn {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 0.7rem;
  transition: all 0.15s ease;
}

.matrix-link-btn:hover {
  background: rgba(56, 189, 248, 0.2);
  border-color: #38bdf8;
  color: #ffffff;
}

/* Grid Cards View */
.sb-matrix-grid-wrap {
  padding: 1.25rem;
  max-height: 60vh;
  overflow-y: auto;
}

.sb-matrix-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

.matrix-card {
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.2s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.matrix-card:hover {
  border-color: rgba(56, 189, 248, 0.4);
  transform: translateY(-2px);
}

.matrix-card.is-selected {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.3);
}

.matrix-card-media {
  position: relative;
  height: 140px;
  width: 100%;
  background: #000;
  overflow: hidden;
}

.matrix-card-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.matrix-card-thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  font-size: 2rem;
  background: rgba(255, 255, 255, 0.05);
}

.matrix-card-check-overlay {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 10;
  background: rgba(15, 23, 42, 0.7);
  padding: 4px;
  border-radius: 6px;
  backdrop-filter: blur(8px);
}

.matrix-card-type-tag {
  position: absolute;
  bottom: 8px;
  left: 8px;
  z-index: 10;
}

.matrix-card-content {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  flex-grow: 1;
}

.matrix-card-title {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.35;
}

.matrix-card-title a {
  color: #ffffff;
  text-decoration: none;
}

.matrix-card-title a:hover {
  color: #38bdf8;
}

.matrix-card-meta {
  font-size: 0.7rem;
  color: #94a3b8;
}

.matrix-card-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
}

.matrix-field-tag {
  font-weight: 700;
  color: #64748b;
  font-size: 0.68rem;
  text-transform: uppercase;
}

.matrix-card-topics-row {
  flex-wrap: wrap;
}

/* Footer */
.sb-matrix-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.5rem;
  font-size: 0.74rem;
  color: #64748b;
}

.sb-matrix-footer-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #94a3b8;
}

/* Lock body scroll when matrix is open */
body.sb-matrix-open {
  overflow: hidden !important;
}

/* ===================================================================
   IN-VIEWER ACCESS TAG SELECTOR (Photo, Video, Article Readers)
   "Choose the right one - show them all" Segmented Pill Group
   =================================================================== */
.sb-viewer-access-group {
  display: inline-flex;
  align-items: center;
  background: rgba(11, 18, 32, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 9999px;
  padding: 2px 3px;
  gap: 3px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  user-select: none;
  vertical-align: middle;
  flex-shrink: 0;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sb-viewer-access-group:hover {
  border-color: rgba(255, 255, 255, 0.28);
}

/* Individual Tier Option Button */
.sb-viewer-tier-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 3px 9px;
  border-radius: 9999px;
  font-size: 0.73rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  color: #94a3b8;
  outline: none;
  line-height: 1.3;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.sb-viewer-tier-btn i {
  font-size: 0.68rem;
  transition: transform 0.18s ease;
}

.sb-viewer-tier-btn:not(.is-active):hover {
  color: #f8fafc;
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
}

.sb-viewer-tier-btn:active {
  transform: scale(0.94);
}

/* ACTIVE SELECTED STATES */

/* Tier: Public (Emerald) */
.sb-viewer-tier-btn.tier-public:not(.is-active):hover {
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.4);
  background: rgba(16, 185, 129, 0.12);
}
.sb-viewer-tier-btn.tier-public.is-active {
  background: rgba(16, 185, 129, 0.28);
  border-color: #34d399;
  color: #34d399;
  font-weight: 700;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.35);
}

/* Tier: Friends (Orange) */
.sb-viewer-tier-btn.tier-friends:not(.is-active):hover {
  color: #fb923c;
  border-color: rgba(251, 146, 60, 0.4);
  background: rgba(249, 115, 22, 0.12);
}
.sb-viewer-tier-btn.tier-friends.is-active {
  background: rgba(249, 115, 22, 0.28);
  border-color: #fb923c;
  color: #fb923c;
  font-weight: 700;
  box-shadow: 0 0 12px rgba(249, 115, 22, 0.35);
}

/* Tier: Family (Red) */
.sb-viewer-tier-btn.tier-family:not(.is-active):hover {
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.4);
  background: rgba(239, 68, 68, 0.12);
}
.sb-viewer-tier-btn.tier-family.is-active {
  background: rgba(239, 68, 68, 0.28);
  border-color: #f87171;
  color: #f87171;
  font-weight: 700;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.35);
}

/* Tier: Private (Purple) */
.sb-viewer-tier-btn.tier-private:not(.is-active):hover {
  color: #c084fc;
  border-color: rgba(192, 132, 252, 0.4);
  background: rgba(168, 85, 247, 0.12);
}
.sb-viewer-tier-btn.tier-private.is-active {
  background: rgba(168, 85, 247, 0.28);
  border-color: #c084fc;
  color: #c084fc;
  font-weight: 700;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.35);
}

/* Strictly hide for non-admins */
body:not(.is-admin):not(.sb-admin-browsing) .sb-viewer-access-group,
body:not(.is-admin):not(.sb-admin-browsing) .sb-viewer-access-btn {
  display: none !important;
}

/* Responsive adjustment for compact screens */
@media (max-width: 580px) {
  .sb-viewer-tier-btn .tier-btn-label {
    display: none;
  }
  .sb-viewer-tier-btn {
    padding: 4px 8px;
  }
}

/* Contextual integration adjustments */
.photo-lightbox-caption-display .photo-lightbox-access-group {
  margin-left: 4px;
}

.video-lightbox-center .video-lightbox-access-group {
  margin-left: 4px;
}

.blog-reader-meta .article-reader-access-group {
  margin-left: 4px;
}

/* ==========================================================================
   Friends & Family Welcome Badges & Global Ignore Seen Control
   ========================================================================== */

/* Omni Bar buttons for Family and Friend Badges */
.sb-omni-family-btn .sb-omni-halo {
  background: radial-gradient(circle, rgba(244, 63, 94, 0.55) 0%, transparent 70%);
}
.sb-omni-family-btn .sb-omni-icon {
  color: #fb7185;
}
.sb-omni-friend-btn .sb-omni-halo {
  background: radial-gradient(circle, rgba(6, 182, 212, 0.55) 0%, transparent 70%);
}
.sb-omni-friend-btn .sb-omni-icon {
  color: #38bdf8;
}

/* Modal Overlay & Backdrop */
.sb-visitor-welcome-overlay {
  position: fixed;
  inset: 0;
  z-index: 100045;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.32s;
}

.sb-visitor-welcome-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.sb-visitor-welcome-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 7, 18, 0.35) !important;
  backdrop-filter: blur(6px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(6px) saturate(140%) !important;
  cursor: pointer;
}

/* Badge Card Base */
.sb-visitor-badge-card {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 620px;
  max-height: calc(100dvh - 2.5rem);
  overflow-y: auto;
  border-radius: 28px;
  padding: clamp(1.4rem, 2.5vw, 2.2rem);
  color: #ffffff;
  backdrop-filter: blur(36px) saturate(190%);
  -webkit-backdrop-filter: blur(36px) saturate(190%);
  transform: translateY(18px) scale(0.96);
  opacity: 0;
  transition: transform 0.36s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  user-select: none;
  -webkit-user-select: none;
}

.sb-visitor-badge-card.is-card-active {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Card Close & Minimize Buttons */
.sb-badge-close-btn,
.sb-badge-min-btn {
  position: absolute;
  top: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #94a3b8;
  cursor: pointer;
  font-size: 0.92rem;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 10;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.sb-badge-close-btn {
  right: 14px;
}

.sb-badge-min-btn {
  right: 52px;
}

.sb-badge-close-btn:hover,
.sb-badge-min-btn:hover {
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.38);
  transform: scale(1.12);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.22);
}

.sb-badge-close-btn:active,
.sb-badge-min-btn:active {
  transform: scale(0.95);
}

/* ==========================================================================
   Meandering Animated Dog Tracks Leading to WubyTuby Mascot
   ========================================================================== */
.sb-wuby-paw-trail {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100046;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.sb-visitor-welcome-overlay.is-open .sb-wuby-paw-trail {
  opacity: 1;
}

.sb-meandering-paw {
  position: fixed;
  font-size: 1rem;
  line-height: 1;
  color: #34d399;
  transform-origin: center center;
  opacity: 0.12;
  animation: sbPawTrackStep 3.6s cubic-bezier(0.25, 1, 0.5, 1) infinite;
  animation-delay: calc(var(--step-idx, 0) * 0.28s);
  user-select: none;
  pointer-events: none;
}

@keyframes sbPawTrackStep {
  0% {
    opacity: 0.12;
    transform: translate(-50%, -50%) rotate(var(--paw-rot, 0deg)) scale(0.65);
    filter: drop-shadow(0 0 3px rgba(52, 211, 153, 0.25)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.7));
  }
  20% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(var(--paw-rot, 0deg)) scale(0.98);
    filter: drop-shadow(0 0 12px rgba(52, 211, 153, 0.95)) drop-shadow(0 0 20px rgba(16, 185, 129, 0.75)) drop-shadow(0 2px 5px rgba(0, 0, 0, 0.8));
    color: #6ee7b7;
  }
  45% {
    opacity: 0.85;
    transform: translate(-50%, -50%) rotate(var(--paw-rot, 0deg)) scale(0.84);
    filter: drop-shadow(0 0 7px rgba(52, 211, 153, 0.6)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.7));
    color: #34d399;
  }
  75% {
    opacity: 0.45;
    transform: translate(-50%, -50%) rotate(var(--paw-rot, 0deg)) scale(0.76);
  }
  100% {
    opacity: 0.12;
    transform: translate(-50%, -50%) rotate(var(--paw-rot, 0deg)) scale(0.65);
  }
}

/* Top & Bottom Settings Access Hint inside Controls Modal */
.sb-controls-top-hint {
  margin-top: 0.35rem;
  margin-bottom: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
  text-align: center;
  user-select: none;
  line-height: 1.3;
}

/* Your Controls header: hint centered on one line ABOVE the title */
.sb-compact-badge-header.sb-controls-main-header {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.45rem;
}

.sb-controls-main-header .sb-controls-top-hint {
  order: 0;
  width: 100%;
  margin: 0 !important;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.sb-controls-main-header .sb-compact-title-row {
  order: 1;
}

/* "Your Controls" title in orange */
.sb-controls-main-header .sb-compact-title {
  color: #fb923c !important;
  text-shadow: 0 0 14px rgba(251, 146, 60, 0.45) !important;
}

[data-theme="light"] .sb-controls-main-header .sb-compact-title {
  color: #ea580c !important;
  text-shadow: none !important;
}

.sb-controls-bottom-hint {
  margin-top: 1rem;
  margin-bottom: 0.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
  text-align: center;
  user-select: none;
  line-height: 1.3;
}

.sb-inline-wuby-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid #34d399;
  box-shadow: 0 0 8px rgba(52, 211, 153, 0.55);
  overflow: hidden;
  vertical-align: middle;
  flex-shrink: 0;
}

.sb-inline-wuby-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* Done Button at Bottom of Controls Modal */
.sb-controls-done-wrap {
  margin-top: 1rem;
  width: 100%;
  display: flex;
  justify-content: center;
}

.sb-badge-done-btn {
  width: 40% !important;
  max-width: 115px !important;
  min-width: 105px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.48rem 1rem !important;
  min-height: 36px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.22) 0%, rgba(16, 185, 129, 0.10) 45%, rgba(5, 150, 105, 0.18) 100%) !important;
  border: 1px solid rgba(52, 211, 153, 0.35) !important;
  border-top: 1.4px solid rgba(167, 243, 208, 0.65) !important;
  color: #ffffff !important;
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), 0 0 14px rgba(16, 185, 129, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 0 10px rgba(52, 211, 153, 0.12) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.sb-badge-done-btn:hover {
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.32) 0%, rgba(16, 185, 129, 0.18) 45%, rgba(5, 150, 105, 0.26) 100%) !important;
  border-color: rgba(52, 211, 153, 0.55) !important;
  border-top-color: rgba(167, 243, 208, 0.85) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45), 0 0 22px rgba(16, 185, 129, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

.sb-badge-done-btn:active {
  transform: translateY(0) scale(0.98);
}

/* WubyTuby Avatar Beacon Pulse when modal & trail are active */
.sb-visitor-welcome-overlay.is-open ~ .site-header .brand-logo,
.sb-visitor-welcome-overlay.is-open ~ .welcome-stage-header .brand-logo,
body.has-visitor-badge-open .brand-logo {
  animation: wubyBeaconGlow 1.8s ease-in-out infinite alternate !important;
  box-shadow: 0 0 22px rgba(52, 211, 153, 0.85), 0 0 40px rgba(16, 185, 129, 0.5) !important;
  border-color: #6ee7b7 !important;
}

@keyframes wubyBeaconGlow {
  0% {
    transform: scale(1);
    box-shadow: 0 0 12px rgba(52, 211, 153, 0.5), 0 0 20px rgba(16, 185, 129, 0.3);
  }
  100% {
    transform: scale(1.12);
    box-shadow: 0 0 26px rgba(52, 211, 153, 0.95), 0 0 45px rgba(5, 150, 105, 0.7);
  }
}

/* 1. FRIEND BADGE THEME */
.sb-friend-badge-card {
  background: linear-gradient(
    145deg,
    rgba(16, 185, 129, 0.12) 0%,
    rgba(5, 150, 105, 0.05) 40%,
    rgba(9, 14, 26, 0.94) 100%
  );
  border: 1.5px solid rgba(52, 211, 153, 0.42);
  border-top: 1.5px solid rgba(110, 231, 183, 0.65);
  box-shadow: 
    0 26px 70px rgba(0, 0, 0, 0.78),
    0 0 45px rgba(16, 185, 129, 0.30),
    0 0 16px rgba(52, 211, 153, 0.20),
    inset 0 1px 1.5px rgba(255, 255, 255, 0.35);
}

/* 2. FAMILY BADGE THEME */
.sb-family-badge-card {
  background: linear-gradient(
    145deg,
    rgba(16, 185, 129, 0.12) 0%,
    rgba(5, 150, 105, 0.05) 40%,
    rgba(9, 14, 26, 0.94) 100%
  );
  border: 1.5px solid rgba(52, 211, 153, 0.42);
  border-top: 1.5px solid rgba(110, 231, 183, 0.65);
  box-shadow: 
    0 26px 70px rgba(0, 0, 0, 0.78),
    0 0 45px rgba(16, 185, 129, 0.30),
    0 0 16px rgba(52, 211, 153, 0.20),
    inset 0 1px 1.5px rgba(255, 255, 255, 0.35);
}

/* Header & Avatar */
.sb-badge-header {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

.sb-badge-avatar {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}

.sb-badge-avatar.friend-avatar {
  background: linear-gradient(135deg, #0284c7 0%, #06b6d4 100%);
  color: #ffffff;
  box-shadow: 0 0 24px rgba(6, 182, 212, 0.45);
}

.sb-badge-avatar.family-avatar {
  background: linear-gradient(135deg, #e11d48 0%, #f43f5e 100%);
  color: #ffffff;
  box-shadow: 0 0 28px rgba(244, 63, 94, 0.52);
  animation: familyHeartPulse 2.4s ease-in-out infinite;
}

@keyframes familyHeartPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

.sb-badge-title-group {
  flex: 1;
}

.sb-badge-tier-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 0.45rem;
}

.sb-badge-tier-pill.friend-pill {
  background: rgba(6, 182, 212, 0.16);
  border: 1px solid rgba(6, 182, 212, 0.35);
  color: #38bdf8;
}

.sb-badge-tier-pill.family-pill {
  background: rgba(244, 63, 94, 0.18);
  border: 1px solid rgba(244, 63, 94, 0.4);
  color: #fda4af;
}

.sb-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
}

.sb-badge-title {
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin: 0 0 0.4rem 0;
  line-height: 1.25;
}

.sb-badge-subtitle {
  font-size: 0.88rem;
  line-height: 1.45;
  color: #cbd5e1;
  margin: 0;
}

/* Unlocked Content Breakdown */
.sb-badge-unlocked-section {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 20px;
  padding: 1.1rem;
  margin-bottom: 1.2rem;
}

.sb-badge-unlocked-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.9rem;
}

.sb-badge-unlocked-title {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.sb-badge-unlocked-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(52, 211, 153, 0.16);
  border: 1px solid rgba(52, 211, 153, 0.35);
  color: #34d399;
}

.sb-badge-unlocked-badge.family-badge {
  background: rgba(244, 63, 94, 0.18);
  border-color: rgba(244, 63, 94, 0.4);
  color: #fda4af;
}

.sb-badge-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

.sb-badge-stat-card {
  display: flex;
  flex-direction: column;
  background: rgba(14, 165, 233, 0.07);
  border: 1px solid rgba(14, 165, 233, 0.2);
  border-radius: 16px;
  padding: 0.85rem 0.75rem;
  text-align: left;
  transition: transform 0.22s ease, border-color 0.22s ease;
}

.sb-badge-stat-card.family-card {
  background: rgba(244, 63, 94, 0.08);
  border-color: rgba(244, 63, 94, 0.24);
}

.sb-badge-stat-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.35);
}

.stat-icon-wrap {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  margin-bottom: 0.45rem;
}

.stat-photos-icon {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
}

.stat-videos-icon {
  background: rgba(6, 182, 212, 0.2);
  color: #38bdf8;
}

.stat-stories-icon {
  background: rgba(249, 115, 22, 0.2);
  color: #fb923c;
}

.stat-value-group {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin-bottom: 0.2rem;
}

.stat-num {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #38bdf8;
  line-height: 1;
}

.family-card .stat-num {
  color: #fb7185;
}

.stat-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: #f1f5f9;
}

.stat-detail {
  font-size: 0.7rem;
  color: #94a3b8;
  line-height: 1.35;
}

/* Missing Content Note (Clarifies unlocked perks vs missing tiers) */
.sb-badge-missing-note {
  margin-top: 0.85rem;
  padding: 0.6rem 0.85rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(56, 189, 248, 0.35);
  border-radius: 12px;
  font-size: 0.76rem;
  color: #cbd5e1;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  line-height: 1.35;
}

.sb-badge-missing-note i {
  color: #38bdf8;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.sb-badge-missing-note strong {
  color: #ffffff;
}

.sb-badge-missing-note.family-note {
  border-color: rgba(244, 63, 94, 0.35);
  background: rgba(244, 63, 94, 0.04);
}

.sb-badge-missing-note.family-note i {
  color: #fb7185;
}

/* Revisit Reminder Callout inside Modal */
.sb-badge-reminder-callout {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.08) 0%, rgba(6, 182, 212, 0.04) 100%);
  border: 1px solid rgba(56, 189, 248, 0.28);
  border-radius: 16px;
  padding: 0.85rem 1rem;
  margin-bottom: 1.15rem;
}

.sb-family-badge-card .sb-badge-reminder-callout {
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.08) 0%, rgba(225, 29, 72, 0.04) 100%);
  border-color: rgba(244, 63, 94, 0.32);
}

.sb-reminder-icon-wrap {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.sb-family-badge-card .sb-reminder-icon-wrap {
  background: rgba(244, 63, 94, 0.22);
  color: #fb7185;
}

.sb-reminder-content {
  flex: 1;
}

.sb-reminder-title {
  font-size: 0.84rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 0.2rem;
  letter-spacing: 0.01em;
}

.sb-reminder-text {
  font-size: 0.74rem;
  color: #cbd5e1;
  line-height: 1.4;
  margin: 0;
}

/* Ignore Seen Items Preference Box */
.sb-badge-pref-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.4rem;
}

.sb-badge-pref-box.family-pref-box {
  border-color: rgba(244, 63, 94, 0.28);
}

.sb-badge-pref-info {
  flex: 1;
}

.sb-badge-pref-title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.2rem;
}

.sb-pref-icon {
  color: #38bdf8;
  font-size: 0.95rem;
}

.family-pref-box .sb-pref-icon {
  color: #fb7185;
}

.sb-badge-pref-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #ffffff;
}

.sb-badge-pref-desc {
  font-size: 0.78rem;
  color: #94a3b8;
  line-height: 1.4;
  margin: 0 0 0.45rem 0;
}

.sb-badge-seen-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.74rem;
}

.sb-badge-seen-counter {
  color: #34d399;
  font-weight: 600;
}

.sb-badge-reset-seen-btn {
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  padding: 0;
  font-size: 0.74rem;
  text-decoration: underline;
  transition: color 0.2s ease;
}

.sb-badge-reset-seen-btn:hover {
  color: #ffffff;
}

/* iOS-Style Toggle Switch */
.sb-badge-pref-switch-wrap {
  flex-shrink: 0;
}

.sb-badge-toggle-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  outline: none;
}

.sb-switch-track {
  position: relative;
  width: 50px;
  height: 28px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.22);
  transition: background 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.sb-switch-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.sb-switch-status {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #94a3b8;
  min-width: 32px;
  text-align: left;
  transition: color 0.2s ease;
}

/* Switch Active State */
.sb-badge-toggle-switch[aria-checked="true"] .sb-switch-track,
.sb-badge-toggle-switch.is-active .sb-switch-track {
  background: linear-gradient(135deg, #0284c7 0%, #06b6d4 100%);
  border-color: rgba(56, 189, 248, 0.6);
  box-shadow: 0 0 16px rgba(6, 182, 212, 0.45);
}

.sb-family-badge-card .sb-badge-toggle-switch[aria-checked="true"] .sb-switch-track,
.sb-family-badge-card .sb-badge-toggle-switch.is-active .sb-switch-track {
  background: linear-gradient(135deg, #e11d48 0%, #f43f5e 100%);
  border-color: rgba(251, 113, 133, 0.65);
  box-shadow: 0 0 18px rgba(244, 63, 94, 0.48);
}

.sb-badge-toggle-switch[aria-checked="true"] .sb-switch-thumb,
.sb-badge-toggle-switch.is-active .sb-switch-thumb {
  transform: translateX(22px);
}

.sb-badge-toggle-switch[aria-checked="true"] .sb-switch-status,
.sb-badge-toggle-switch.is-active .sb-switch-status {
  color: #34d399;
  text-shadow: 0 0 8px rgba(52, 211, 153, 0.45);
}

/* Action Row */
.sb-badge-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.sb-badge-primary-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: none;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
  outline: none;
}

.sb-badge-primary-btn.btn-friend {
  background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%);
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(14, 165, 233, 0.4);
}

.sb-badge-primary-btn.btn-family {
  background: linear-gradient(135deg, #e11d48 0%, #f43f5e 100%);
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(244, 63, 94, 0.42);
}

.sb-badge-primary-btn:hover {
  transform: translateY(-2px) scale(1.02);
}

.sb-badge-primary-btn:active {
  transform: translateY(1px) scale(0.98);
}

.sb-badge-global-hint {
  font-size: 0.72rem;
  color: #94a3b8;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* Persistent Floating Pill Wrap & Revisit Balloon (Docked when badge is minimized) */
.sb-visitor-minimized-pill-wrap {
  position: fixed;
  bottom: 24px;
  right: 248px;
  z-index: 100025;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  pointer-events: none;
}

.sb-pill-reminder-balloon {
  pointer-events: auto;
  position: relative;
  margin-bottom: 10px;
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1.5px solid rgba(56, 189, 248, 0.45);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.55), 0 0 20px rgba(56, 189, 248, 0.25);
  border-radius: 14px;
  padding: 8px 14px;
  font-size: 0.76rem;
  color: #f1f5f9;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 300px;
  animation: balloonFloat 3s ease-in-out infinite;
}

.sb-visitor-minimized-pill-wrap.is-family .sb-pill-reminder-balloon {
  border-color: rgba(244, 63, 94, 0.5);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.55), 0 0 22px rgba(244, 63, 94, 0.28);
}

.sb-balloon-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 8px #34d399;
  flex-shrink: 0;
}

.sb-balloon-close {
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  padding: 0 0 0 4px;
  font-size: 1rem;
  line-height: 1;
}

.sb-balloon-close:hover {
  color: #ffffff;
}

@keyframes balloonFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* Floating Pill itself */
.sb-visitor-minimized-pill {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 4px 6px 4px 6px;
  border-radius: 999px;
  background: rgba(11, 18, 32, 0.94);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 14px 34px -4px rgba(0, 0, 0, 0.65), inset 0 1px 1px rgba(255, 255, 255, 0.25);
  color: #ffffff;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease;
}

.sb-visitor-minimized-pill:hover {
  box-shadow: 0 18px 40px -4px rgba(0, 0, 0, 0.75);
}

.sb-visitor-minimized-pill.is-friend {
  border-color: rgba(6, 182, 212, 0.55);
  box-shadow: 0 14px 34px -4px rgba(0, 0, 0, 0.65), 0 0 20px rgba(6, 182, 212, 0.25);
}

.sb-visitor-minimized-pill.is-family {
  border-color: rgba(244, 63, 94, 0.55);
  box-shadow: 0 14px 34px -4px rgba(0, 0, 0, 0.65), 0 0 22px rgba(244, 63, 94, 0.28);
}

/* Badge Info Clickable Section (Opens full badge) */
.pill-badge-info {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 3px 8px 3px 4px;
  border-radius: 999px;
  cursor: pointer;
  background: transparent;
  transition: background 0.2s ease, transform 0.15s ease;
}

.pill-badge-info:hover {
  background: rgba(255, 255, 255, 0.08);
}

.pill-badge-info:active {
  transform: scale(0.97);
}

.pill-badge-info:focus-visible {
  outline: 2px solid #38bdf8;
  outline-offset: 2px;
}

.pill-icon-wrap {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  color: #38bdf8;
  font-size: 0.72rem;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.is-friend .pill-icon-wrap {
  background: rgba(6, 182, 212, 0.2);
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.45);
}

.is-family .pill-icon-wrap {
  background: rgba(244, 63, 94, 0.2);
  color: #fb7185;
  border-color: rgba(251, 113, 133, 0.45);
}

.pill-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1;
  white-space: nowrap;
}

.pill-expand-icon {
  font-size: 0.62rem;
  color: #94a3b8;
  margin-left: 1px;
  transition: transform 0.2s ease, color 0.2s ease;
}

.pill-badge-info:hover .pill-expand-icon {
  color: #ffffff;
  transform: translateY(-1px);
}

.pill-divider {
  color: rgba(255, 255, 255, 0.25);
  font-size: 0.7rem;
  user-select: none;
  margin: 0 1px;
  display: inline-flex;
  align-items: center;
}

/* Global Skip Seen Toggle Button in Pill */
.pill-seen-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #cbd5e1;
  font-family: inherit;
  font-size: 0.73rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
}

.pill-seen-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.26);
}

.pill-seen-toggle-btn:active {
  transform: scale(0.97);
}

.pill-seen-toggle-btn:focus-visible {
  outline: 2px solid #34d399;
  outline-offset: 2px;
}

.pill-seen-icon {
  font-size: 0.72rem;
  color: #94a3b8;
  transition: color 0.2s ease;
  flex-shrink: 0;
}

.pill-seen-title {
  font-size: 0.72rem;
  font-weight: 600;
  color: inherit;
  white-space: nowrap;
}

.pill-seen-status {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #94a3b8;
  text-transform: uppercase;
  transition: color 0.2s ease;
}

.pill-seen-badge-count {
  display: inline-block;
  font-size: 0.64rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  line-height: 1.2;
  white-space: nowrap;
}

/* Active State: Skip Stuff I've Seen is ON */
.pill-seen-toggle-btn.is-skipping-seen,
.pill-seen-toggle-btn[aria-checked="true"],
.pill-seen-toggle-btn[data-skip-seen="true"] {
  background: rgba(16, 185, 129, 0.2) !important;
  border-color: rgba(52, 211, 153, 0.65) !important;
  color: #f0fdf4 !important;
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.32) !important;
}

.pill-seen-toggle-btn.is-skipping-seen:hover,
.pill-seen-toggle-btn[aria-checked="true"]:hover,
.pill-seen-toggle-btn[data-skip-seen="true"]:hover {
  background: rgba(16, 185, 129, 0.28) !important;
  border-color: #34d399 !important;
  box-shadow: 0 0 18px rgba(16, 185, 129, 0.45) !important;
}

.pill-seen-toggle-btn.is-skipping-seen .pill-seen-icon,
.pill-seen-toggle-btn[aria-checked="true"] .pill-seen-icon,
.pill-seen-toggle-btn[data-skip-seen="true"] .pill-seen-icon {
  color: #34d399 !important;
}

.pill-seen-toggle-btn.is-skipping-seen .firehose-seen-switch,
.pill-seen-toggle-btn[aria-checked="true"] .firehose-seen-switch,
.pill-seen-toggle-btn[data-skip-seen="true"] .firehose-seen-switch {
  background: #10b981 !important;
}

.pill-seen-toggle-btn.is-skipping-seen .firehose-seen-switch-knob,
.pill-seen-toggle-btn[aria-checked="true"] .firehose-seen-switch-knob,
.pill-seen-toggle-btn[data-skip-seen="true"] .firehose-seen-switch-knob {
  transform: translateX(12px) !important;
}

.pill-seen-toggle-btn.is-skipping-seen .pill-seen-status,
.pill-seen-toggle-btn[aria-checked="true"] .pill-seen-status,
.pill-seen-toggle-btn[data-skip-seen="true"] .pill-seen-status {
  color: #34d399 !important;
}

.pill-seen-toggle-btn.is-skipping-seen .pill-seen-badge-count,
.pill-seen-toggle-btn[aria-checked="true"] .pill-seen-badge-count,
.pill-seen-toggle-btn[data-skip-seen="true"] .pill-seen-badge-count {
  background: rgba(16, 185, 129, 0.28) !important;
  color: #a7f3d0 !important;
  border: 1px solid rgba(52, 211, 153, 0.45) !important;
}

/* ==========================================================================
   WubyTuby Access Level Indicator Glow
   User Requirement: (public, friend, family, admin (me)) = (green, orange, red, purple)
   ========================================================================== */

.brand-center-dot.has-badge-controls {
  cursor: pointer !important;
}

/* 1. Public Access: Green */
.brand-logo,
.brand-center-dot .brand-logo,
#sbHeaderBrandDot .brand-logo,
html[data-visitor-type="public"] .brand-logo,
html[data-visitor-type="anonymous"] .brand-logo,
html.visitor-type-public .brand-logo,
html.visitor-type-anonymous .brand-logo,
.brand-center-dot[data-access-tier="public"] .brand-logo,
.brand-center-dot[data-access-tier="anonymous"] .brand-logo,
.brand-center-dot.is-public .brand-logo {
  border: 1.5px solid #10b981 !important;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.75), 0 0 4px rgba(5, 150, 105, 0.85) !important;
}

.brand-center-dot:hover .brand-logo,
.brand-center-dot.is-public:hover .brand-logo,
html[data-visitor-type="public"] .brand-center-dot:hover .brand-logo,
html[data-visitor-type="anonymous"] .brand-center-dot:hover .brand-logo {
  border-color: #34d399 !important;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.95), 0 0 6px rgba(5, 150, 105, 1) !important;
  transform: scale(1.12);
}

/* 2. Friend Access: Orange */
html[data-visitor-type="friend"] .brand-logo,
html.visitor-type-friend .brand-logo,
.brand-center-dot[data-access-tier="friend"] .brand-logo,
.brand-center-dot.is-friend .brand-logo {
  border: 1.5px solid #f97316 !important;
  box-shadow: 0 0 14px rgba(249, 115, 22, 0.8), 0 0 4px rgba(234, 88, 12, 0.9) !important;
}

html[data-visitor-type="friend"] .brand-center-dot:hover .brand-logo,
.brand-center-dot.is-friend:hover .brand-logo {
  border-color: #fb923c !important;
  box-shadow: 0 0 22px rgba(249, 115, 22, 0.95), 0 0 6px rgba(234, 88, 12, 1) !important;
  transform: scale(1.12);
}

/* 3. Family Access: Red */
html[data-visitor-type="family"] .brand-logo,
html.visitor-type-family .brand-logo,
.brand-center-dot[data-access-tier="family"] .brand-logo,
.brand-center-dot.is-family .brand-logo {
  border: 1.5px solid #ef4444 !important;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.85), 0 0 4px rgba(220, 38, 38, 0.95) !important;
}

html[data-visitor-type="family"] .brand-center-dot:hover .brand-logo,
.brand-center-dot.is-family:hover .brand-logo {
  border-color: #f87171 !important;
  box-shadow: 0 0 22px rgba(239, 68, 68, 1), 0 0 6px rgba(220, 38, 38, 1) !important;
  transform: scale(1.12);
}

/* 4. Admin Access (me): Purple */
html[data-visitor-type="admin"] .brand-logo,
html.visitor-type-admin .brand-logo,
body.is-admin .brand-logo,
body.sb-admin-browsing .brand-logo,
.brand-center-dot[data-access-tier="admin"] .brand-logo,
.brand-center-dot.is-admin .brand-logo {
  border: 1.5px solid #a855f7 !important;
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.85), 0 0 4px rgba(147, 51, 234, 0.95) !important;
}

html[data-visitor-type="admin"] .brand-center-dot:hover .brand-logo,
body.is-admin .brand-center-dot:hover .brand-logo,
body.sb-admin-browsing .brand-center-dot:hover .brand-logo,
.brand-center-dot.is-admin:hover .brand-logo {
  border-color: #c084fc !important;
  box-shadow: 0 0 24px rgba(168, 85, 247, 1), 0 0 6px rgba(147, 51, 234, 1) !important;
  transform: scale(1.12);
}

@keyframes wubyHitPulse {
  0% { transform: scale(1); }
  25% { transform: scale(1.32) rotate(-8deg); }
  50% { transform: scale(0.92) rotate(6deg); }
  75% { transform: scale(1.16) rotate(-3deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.sb-wuby-hit-pulse,
.sb-wuby-hit-pulse .brand-logo,
.brand-logo.sb-wuby-hit-pulse {
  animation: wubyHitPulse 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* ==========================================================================
   GLOBAL IGNORE SEEN FILTERING ACROSS SITE
   ========================================================================== */
body.sb-ignore-seen-active .is-seen-item {
  display: none !important;
}

body.sb-ignore-seen-active .photo-album-card.is-seen-item,
body.sb-ignore-seen-active .recent-photo-timeline-card.is-seen-item,
body.sb-ignore-seen-active .recent-video-timeline-card.is-seen-item,
body.sb-ignore-seen-active .blog-card.is-seen-item,
body.sb-ignore-seen-active .bento-card.is-seen-item {
  display: none !important;
}

/* ==========================================================================
   LIQUID-GLASS VISITOR WELCOME BADGE CONTROLS
   ========================================================================== */
.sb-visitor-badge-card {
  position: relative;
  width: 92%;
  max-width: 350px !important;
  background: linear-gradient(
    135deg,
    rgba(52, 211, 153, 0.08) 0%,
    rgba(255, 255, 255, 0.03) 40%,
    rgba(14, 21, 33, 0.75) 100%
  ) !important;
  backdrop-filter: blur(32px) saturate(210%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(210%) !important;
  border: 1px solid rgba(52, 211, 153, 0.35) !important;
  border-top: 1.5px solid rgba(110, 231, 183, 0.65) !important;
  border-left: 1.2px solid rgba(52, 211, 153, 0.40) !important;
  border-radius: 24px;
  padding: 1.35rem 1.15rem;
  box-shadow: 
    0 28px 70px rgba(0, 0, 0, 0.65),
    0 0 45px rgba(16, 185, 129, 0.30),
    0 0 18px rgba(52, 211, 153, 0.20),
    inset 0 1px 1.5px rgba(255, 255, 255, 0.40),
    inset 0 -1px 1.5px rgba(0, 0, 0, 0.35) !important;
  color: #f1f5f9;
  z-index: 100001;
  animation: badgeCardPop 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transition: max-width 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s ease, box-shadow 0.3s ease;
}

.sb-visitor-badge-card.is-bucket-view {
  width: min(95vw, 780px) !important;
  max-width: 780px !important;
  max-height: calc(100dvh - 2rem) !important;
  overflow: visible !important;
  overflow-y: visible !important;
  overflow-x: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  background: 
    radial-gradient(ellipse at 50% 0%, rgba(16, 185, 129, 0.16) 0%, transparent 65%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(15, 23, 42, 0.72) 45%, rgba(6, 78, 59, 0.38) 100%) !important;
  backdrop-filter: blur(20px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(200%) !important;
  border: 1px solid rgba(52, 211, 153, 0.42) !important;
  border-top: 1.5px solid rgba(167, 243, 208, 0.8) !important;
  box-shadow: 
    0 32px 85px rgba(0, 0, 0, 0.78),
    0 0 55px rgba(16, 185, 129, 0.28),
    0 0 95px rgba(56, 189, 248, 0.20),
    inset 0 1px 2px rgba(255, 255, 255, 0.48),
    inset 0 -1px 2px rgba(0, 0, 0, 0.45) !important;
  transition: 
    width 0.38s cubic-bezier(0.16, 1, 0.3, 1),
    max-width 0.38s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.38s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.38s ease,
    border-color 0.38s ease !important;
}

.sb-visitor-badge-card.is-bucket-view::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

@keyframes badgeCardPop {
  0% {
    opacity: 0;
    transform: scale(0.92) translateY(14px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.sb-visitor-badge-card.sb-family-badge-card,
.sb-visitor-badge-card.sb-friend-badge-card {
  border-color: rgba(52, 211, 153, 0.45) !important;
  border-top-color: rgba(110, 231, 183, 0.70) !important;
  box-shadow: 
    0 28px 70px rgba(0, 0, 0, 0.65),
    0 0 45px rgba(16, 185, 129, 0.32),
    0 0 18px rgba(52, 211, 153, 0.22),
    inset 0 1px 1.5px rgba(255, 255, 255, 0.45),
    inset 0 -1px 1.5px rgba(0, 0, 0, 0.35) !important;
}

/* Slick & Professional Dismissal Effect for Your Controls & Visitor Badges */
.sb-visitor-badge-card.is-dismissing {
  animation: sbBadgeCardDismiss 0.32s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
  pointer-events: none !important;
}

@keyframes sbBadgeCardDismiss {
  0% {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0px);
  }
  100% {
    opacity: 0;
    transform: scale(0.93) translateY(14px);
    filter: blur(5px);
  }
}

.sb-visitor-welcome-overlay.is-dismissing {
  pointer-events: none !important;
}

.sb-visitor-welcome-overlay.is-dismissing .sb-visitor-welcome-backdrop {
  opacity: 0 !important;
  transition: opacity 0.32s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.sb-visitor-welcome-overlay.is-dismissing .sb-wuby-paw-trail {
  opacity: 0 !important;
  transform: translateY(-12px) scale(0.94) !important;
  transition: opacity 0.28s cubic-bezier(0.25, 1, 0.5, 1), transform 0.28s cubic-bezier(0.25, 1, 0.5, 1) !important;
  pointer-events: none !important;
}

/* DONE button tactile micro-interaction */
.sb-badge-done-btn.is-pressed {
  transform: scale(0.94) !important;
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.45) 0%, rgba(16, 185, 129, 0.32) 100%) !important;
  box-shadow: 0 0 24px rgba(52, 211, 153, 0.7), inset 0 1px 1px #ffffff !important;
  transition: transform 0.1s ease, background 0.1s ease !important;
}

/* Audio Mute Button Styling inside Your Controls */
.sb-badge-control-row-btn.audio-mute-btn {
  border-color: rgba(56, 189, 248, 0.35);
  border-top-color: rgba(125, 211, 252, 0.6);
  animation: sbAudioBtnReveal 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.sb-badge-control-row-btn.audio-mute-btn:hover {
  border-color: rgba(56, 189, 248, 0.55);
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.15) 0%, rgba(14, 165, 233, 0.08) 100%);
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.sb-badge-control-row-btn.audio-mute-btn.is-active {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.30) 0%, rgba(14, 165, 233, 0.55) 100%) !important;
  border-color: rgba(56, 189, 248, 0.8) !important;
  color: #ffffff !important;
  box-shadow: 0 0 24px rgba(56, 189, 248, 0.45), 0 4px 14px rgba(0, 0, 0, 0.45) !important;
}

@keyframes sbAudioBtnReveal {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.sb-compact-badge-header {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-bottom: 1rem;
}

.sb-compact-title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
}

.sb-compact-badge-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 1.05rem;
  flex-shrink: 0;
  backdrop-filter: blur(10px);
}

.sb-compact-badge-icon.family-icon {
  background: rgba(244, 63, 94, 0.22);
  color: #fb7185;
  border: 1.5px solid rgba(251, 113, 133, 0.55);
  box-shadow: 0 0 14px rgba(251, 113, 133, 0.35);
}

.sb-compact-badge-icon.friend-icon {
  background: rgba(14, 165, 233, 0.22);
  color: #38bdf8;
  border: 1.5px solid rgba(56, 189, 248, 0.55);
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.35);
}

.sb-compact-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 auto;
  line-height: 1.2;
  color: #ffffff;
  letter-spacing: -0.01em;
  text-align: center;
}

.sb-compact-close-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  color: #cbd5e1;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  font-size: 0.85rem;
  backdrop-filter: blur(8px);
}

.sb-compact-close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.4);
  transform: scale(1.08);
}

.sb-compact-controls-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Offer banner inside controls modal */
.sb-controls-offer-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0.9rem;
  margin-bottom: 0.75rem;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(217, 119, 6, 0.3) 100%);
  border: 1px solid rgba(251, 191, 36, 0.5);
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.25);
  animation: sbOfferSlideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes sbOfferSlideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.sb-offer-banner-text {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #fef3c7;
}

.sb-offer-turn-on-btn {
  padding: 0.32rem 0.75rem;
  border-radius: 999px;
  background: #10b981;
  color: #ffffff;
  font-size: 0.74rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
  transition: all 0.2s ease;
  white-space: nowrap;
}

.sb-offer-turn-on-btn:hover {
  background: #34d399;
  transform: scale(1.05);
}

/* Mute Audio Offer Banner inside Your Controls modal (Legacy Support) */
.sb-controls-offer-banner.sb-mute-offer-banner {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin-bottom: 0.75rem;
  display: flex;
  width: 100%;
}

.sb-offer-mute-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  gap: 0.65rem !important;
  padding: 0.8rem 1rem !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.28) 0%, rgba(5, 150, 105, 0.52) 100%) !important;
  border: 1.5px solid rgba(52, 211, 153, 0.75) !important;
  border-top: 1.5px solid rgba(255, 255, 255, 0.7) !important;
  box-shadow: 
    0 0 24px rgba(16, 185, 129, 0.42),
    0 6px 20px rgba(0, 0, 0, 0.4),
    inset 0 1px 1px rgba(255, 255, 255, 0.6) !important;
  color: #ffffff !important;
  font-size: 0.86rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  white-space: nowrap !important;
}

.sb-offer-mute-btn i {
  color: #6ee7b7 !important;
  font-size: 0.95rem !important;
  filter: drop-shadow(0 0 8px #34d399) !important;
}

.sb-offer-mute-btn span {
  color: #ffffff !important;
  font-weight: 700 !important;
}

.sb-offer-mute-btn:hover {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.45) 0%, rgba(5, 150, 105, 0.72) 100%) !important;
  border-color: #6ee7b7 !important;
  box-shadow: 0 0 30px rgba(52, 211, 153, 0.65), 0 8px 24px rgba(0, 0, 0, 0.45) !important;
  transform: translateY(-1px) scale(1.015) !important;
}

.sb-offer-mute-btn:active {
  transform: translateY(0) scale(0.985) !important;
}

/* Muted / Silenced State for Dialog Toggle Button */
.sb-offer-mute-btn.is-muted {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.28) 0%, rgba(185, 28, 28, 0.52) 100%) !important;
  border: 1.5px solid rgba(248, 113, 113, 0.75) !important;
  border-top: 1.5px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow: 
    0 0 24px rgba(239, 68, 68, 0.42),
    0 6px 20px rgba(0, 0, 0, 0.4),
    inset 0 1px 1px rgba(255, 255, 255, 0.6) !important;
}

.sb-offer-mute-btn.is-muted i {
  color: #fca5a5 !important;
  filter: drop-shadow(0 0 8px #f87171) !important;
}

.sb-offer-mute-btn.is-muted:hover {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.45) 0%, rgba(185, 28, 28, 0.72) 100%) !important;
  border-color: #fca5a5 !important;
  box-shadow: 0 0 30px rgba(248, 113, 113, 0.65), 0 8px 24px rgba(0, 0, 0, 0.45) !important;
}

[data-theme="light"] .sb-offer-mute-btn.is-muted {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.18) 0%, rgba(220, 38, 38, 0.35) 100%) !important;
  border-color: rgba(239, 68, 68, 0.6) !important;
  color: #991b1b !important;
}

[data-theme="light"] .sb-offer-mute-btn.is-muted span {
  color: #991b1b !important;
}

/* ==========================================================================
   MUSIC CHOOSER & SMOKY BUCKET SELECTION IN "YOUR CONTROLS" DIALOG
   ========================================================================== */

/* Music Button inside controls list (After No Dogs Please) - Reduced width by 75px and centered */
.sb-badge-control-row-btn.music-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: calc(100% - 75px) !important;
  max-width: calc(100% - 75px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  align-self: center !important;
  padding: 0.85rem 1rem !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.24) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  white-space: nowrap !important;
  text-align: center !important;
}

.sb-badge-control-row-btn.music-btn .sb-compact-control-info {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
}

.sb-badge-control-row-btn.music-btn .sb-compact-control-label {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.45rem !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 0.88rem !important;
}

.sb-badge-control-row-btn.music-btn .sb-compact-control-label i {
  color: #94a3b8 !important;
  font-size: 0.8rem !important;
  filter: none !important;
  transition: color 0.2s ease;
}

.sb-badge-control-row-btn.music-btn:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.04) 100%) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  transform: translateY(-1px) !important;
}

.sb-badge-control-row-btn.music-btn:active {
  transform: translateY(0) scale(0.985) !important;
}

/* Report A Problem Button inside Your Controls */
.sb-badge-control-row-btn.report-problem-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: calc(100% - 75px) !important;
  max-width: calc(100% - 75px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  align-self: center !important;
  padding: 0.85rem 1rem !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.09) 0%, rgba(239, 68, 68, 0.05) 100%) !important;
  border: 1px solid rgba(245, 158, 11, 0.24) !important;
  border-top: 1px solid rgba(245, 158, 11, 0.38) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  white-space: nowrap !important;
  text-align: center !important;
}

.sb-badge-control-row-btn.report-problem-btn .sb-compact-control-info {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
}

.sb-badge-control-row-btn.report-problem-btn .sb-compact-control-label {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.48rem !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 0.88rem !important;
}

.sb-badge-control-row-btn.report-problem-btn .sb-compact-control-label i {
  color: #f59e0b !important;
  font-size: 0.84rem !important;
  transition: transform 0.2s ease, color 0.2s ease;
}

.sb-badge-control-row-btn.report-problem-btn:hover {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.18) 0%, rgba(239, 68, 68, 0.12) 100%) !important;
  border-color: rgba(245, 158, 11, 0.5) !important;
  box-shadow: 0 6px 22px rgba(245, 158, 11, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  transform: translateY(-1px) !important;
}

.sb-badge-control-row-btn.report-problem-btn:hover .sb-compact-control-label i {
  transform: scale(1.18);
  color: #fbbf24 !important;
}

.sb-badge-control-row-btn.report-problem-btn:active {
  transform: translateY(0) scale(0.985) !important;
}

/* Problem Report Mode Banner & Styles in Feedback Slide */
.feedback-problem-mode-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 12px;
  padding: 0.55rem 0.95rem;
  margin-bottom: 1.15rem;
  font-size: 0.82rem;
  color: #fef3c7;
  animation: sbProblemPillFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes sbProblemPillFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.feedback-problem-mode-pill .problem-mode-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #f59e0b;
  font-size: 0.76rem;
}

.feedback-problem-mode-pill .problem-context-badge {
  color: #e2e8f0;
  font-size: 0.78rem;
  font-family: var(--font-mono, monospace);
  background: rgba(0, 0, 0, 0.25);
  padding: 0.15rem 0.45rem;
  border-radius: 6px;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feedback-problem-mode-pill .btn-reset-problem-mode {
  background: transparent;
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: #fbbf24;
  border-radius: 6px;
  padding: 0.2rem 0.55rem;
  font-size: 0.72rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.feedback-problem-mode-pill .btn-reset-problem-mode:hover {
  background: rgba(245, 158, 11, 0.2);
  color: #ffffff;
}

.feedback-tech-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 0.75rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.45);
  text-align: center;
}

.feedback-tech-indicator i {
  color: #10b981;
  font-size: 0.72rem;
}

/* Music button always uses the neutral (deselected) glass look, regardless of mute state / bucket */

/* Panel transitions between Main Controls & Music Bucket Selection */
.sb-controls-view-panel {
  width: 100%;
}

.sb-controls-bucket-panel {
  animation: sbBucketPanelSlideIn 0.38s cubic-bezier(0.16, 1.15, 0.3, 1) forwards;
  position: relative;
}

.sb-controls-bucket-panel.sb-mood-entrance-active {
  animation: sbBucketPanelSlideIn 0.38s cubic-bezier(0.16, 1.15, 0.3, 1) forwards;
}

@keyframes sbBucketPanelSlideIn {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.95);
    filter: blur(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0px);
  }
}

.sb-controls-main-panel {
  animation: sbMainPanelSlideIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.sb-controls-main-panel.sb-main-panel-slide {
  animation: sbMainPanelSlideIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes sbMainPanelSlideIn {
  from {
    opacity: 0;
    transform: translateX(-18px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

/* Bucket Panel Header (Centered Musical Mood Title with Spectrum Visualizer & Aura) */
.sb-bucket-badge-header {
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 0.95rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  text-align: center;
  width: 100%;
}

.sb-bucket-title-row {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.65rem !important;
  position: relative !important;
  margin: 0 auto !important;
}

/* Pulsing Atmospheric Aura Behind Title */
.sb-mood-badge-aura {
  position: absolute;
  inset: -14px -32px;
  background: radial-gradient(ellipse at center, rgba(52, 211, 153, 0.35) 0%, rgba(56, 189, 248, 0.18) 50%, transparent 72%);
  pointer-events: none;
  filter: blur(14px);
  z-index: 0;
  animation: sbMoodAuraPulse 3.5s ease-in-out infinite alternate;
}

@keyframes sbMoodAuraPulse {
  0% {
    opacity: 0.55;
    transform: scale(0.94);
  }
  100% {
    opacity: 1;
    transform: scale(1.08);
  }
}

/* Dancing Equalizer Spectrum Bars (Removed per design request) */
.sb-mood-visualizer {
  display: none !important;
}

@keyframes sbMoodEqDance {
  0% { transform: scaleY(0.25); }
  100% { transform: scaleY(1); }
}

.sb-bucket-panel-title {
  text-align: center !important;
  margin: 0 !important;
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase;
  background: linear-gradient(135deg, #ffffff 0%, #a7f3d0 45%, #38bdf8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 16px rgba(52, 211, 153, 0.5));
  position: relative;
  z-index: 1;
}

.sb-bucket-subtitle {
  display: none !important;
}

/* Return Button at Bottom of Musical Mood Modal */
.sb-bucket-return-wrap {
  margin-top: 1.15rem;
  width: 100%;
  display: flex;
  justify-content: center;
}

.sb-bucket-return-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.48rem 1.45rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #e2e8f0;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  min-width: 110px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  animation: sbReturnFadeIn 0.38s ease both;
  animation-delay: 0.32s;
}

@keyframes sbReturnFadeIn {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

.sb-bucket-return-btn i {
  font-size: 0.8rem;
  color: #6ee7b7;
  transition: transform 0.2s ease;
}

.sb-bucket-return-btn:hover {
  background: rgba(16, 185, 129, 0.28);
  border-color: rgba(52, 211, 153, 0.7);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.45);
}

.sb-bucket-return-btn:hover i {
  transform: translateX(-3px);
}

/* Bucket Selection Tag Cloud: Organic, Modern, Slick - Containerless Typography matching Hero Section */
.sb-bucket-selection-list {
  position: relative !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.55rem 1.25rem !important;
  width: 100% !important;
  max-width: 760px !important;
  margin: 0.4rem auto 0 !important;
  max-height: none !important;
  overflow: visible !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  padding: 0.4rem 0.5rem 0.6rem !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.sb-bucket-selection-list::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.sb-bucket-selection-list::-webkit-scrollbar-thumb {
  display: none !important;
}

/* Words Only: No Containers, No Borders, No Background Boxes */
.sb-smoky-bucket-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  padding: 0.35rem 0.65rem !important;
  margin: 0.1rem 0.2rem !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: 'Courier New', Courier, monospace, var(--sb-font-mono, monospace) !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.035em !important;
  color: rgba(241, 245, 249, 0.78) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 12px rgba(56, 189, 248, 0.12) !important;
  cursor: pointer !important;
  transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1) !important;
  white-space: nowrap !important;
  outline: none !important;
  user-select: none;
}

.sb-smoky-bucket-pill .sb-smoky-pill-title {
  color: inherit;
  font-family: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  display: inline-block;
  transition: transform 0.2s ease;
}

/* Organic visual hierarchy weights */
.sb-smoky-bucket-pill.tag-weight-1,
.sb-smoky-bucket-pill:nth-child(5n+1) {
  font-size: 1.24rem !important;
  opacity: 0.96;
}
.sb-smoky-bucket-pill.tag-weight-2,
.sb-smoky-bucket-pill:nth-child(5n+2) {
  font-size: 0.95rem !important;
  opacity: 0.78;
}
.sb-smoky-bucket-pill.tag-weight-3,
.sb-smoky-bucket-pill:nth-child(5n+3) {
  font-size: 1.15rem !important;
  opacity: 0.90;
}
.sb-smoky-bucket-pill.tag-weight-4,
.sb-smoky-bucket-pill:nth-child(5n+4) {
  font-size: 1.02rem !important;
  opacity: 0.82;
}
.sb-smoky-bucket-pill.tag-weight-5,
.sb-smoky-bucket-pill:nth-child(5n) {
  font-size: 1.20rem !important;
  opacity: 0.92;
}

/* Default Slick Hover & Active Baseline */
.sb-smoky-bucket-pill:hover {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transform: scale(1.14) translateY(-2px) !important;
}

.sb-smoky-bucket-pill:active {
  transform: scale(0.96) !important;
}

.sb-smoky-bucket-pill.is-active {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  font-weight: 800 !important;
  transform: scale(1.08) !important;
}

.sb-smoky-bucket-pill.is-active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 55%;
  max-width: 44px;
  height: 2px;
  border-radius: 999px;
}

/* Animated Musical Mood Active Cursor (smoothly glides below selected item) */
.sb-mood-active-cursor {
  position: absolute;
  top: 0;
  left: 0;
  height: 2.5px;
  border-radius: 999px;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  will-change: transform, width, background-color, box-shadow;
  transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1),
              width 0.28s cubic-bezier(0.2, 0.9, 0.3, 1),
              opacity 0.2s ease,
              background-color 0.28s ease,
              box-shadow 0.28s ease;
}

.sb-mood-active-cursor.is-visible {
  opacity: 1;
}

/* Hide static ::after underline when sliding cursor is enabled */
.sb-bucket-selection-list.has-cursor .sb-smoky-bucket-pill.is-active::after {
  display: none !important;
}

/* Staggered Musical Mood Pill Cascade */
.is-bucket-view .sb-smoky-bucket-pill {
  animation: sbMoodPillCascade 0.44s cubic-bezier(0.16, 1.25, 0.35, 1) both !important;
  animation-delay: calc(0.06s + (var(--pill-idx, 0) * 34ms)) !important;
}

@keyframes sbMoodPillCascade {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.82);
    filter: blur(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0px);
  }
}

/* Robert Growler Peeking Pop */
.is-bucket-view .sb-robert-growler-peek-wrap {
  animation: sbGrowlerPeekPop 0.52s cubic-bezier(0.34, 1.56, 0.64, 1) both !important;
  animation-delay: 0.32s !important;
}

@keyframes sbGrowlerPeekPop {
  0% {
    opacity: 0;
    transform: translateY(32px) scale(0.75);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Quiet Please ! Mute Pill */
.is-bucket-view .sb-smoky-quiet-pill {
  animation: sbMoodPillCascade 0.44s cubic-bezier(0.16, 1.25, 0.35, 1) both !important;
  animation-delay: 0.36s !important;
  color: rgba(254, 202, 202, 0.82) !important;
}

.is-bucket-view .sb-smoky-quiet-pill:hover {
  color: #f87171 !important;
  text-shadow: 0 0 16px rgba(239, 68, 68, 0.9), 0 0 32px rgba(220, 38, 38, 0.6) !important;
}

.is-bucket-view .sb-smoky-quiet-pill.is-active {
  color: #ef4444 !important;
  text-shadow: 0 0 20px rgba(239, 68, 68, 0.95), 0 0 40px rgba(220, 38, 38, 0.7) !important;
}

.is-bucket-view .sb-smoky-quiet-pill.is-active::after {
  background: #ef4444 !important;
  box-shadow: 0 0 8px #ef4444, 0 0 16px rgba(239, 68, 68, 0.9) !important;
}

/* --------------------------------------------------------------------------
   INDIVIDUAL MUSICAL MOOD COLOR TREATMENTS
   -------------------------------------------------------------------------- */

/* 1. 80s Rock - Arena rock crimson */
.sb-smoky-bucket-pill[data-bucket-id="80s-rock"],
.sb-smoky-bucket-pill[data-bucket-id="80s"] {
  color: rgba(254, 205, 211, 0.85) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 12px rgba(244, 63, 94, 0.22) !important;
}
.sb-smoky-bucket-pill[data-bucket-id="80s-rock"]:hover,
.sb-smoky-bucket-pill[data-bucket-id="80s"]:hover {
  color: #fb7185 !important;
  text-shadow: 0 0 18px rgba(251, 113, 133, 0.95), 0 0 36px rgba(244, 63, 94, 0.6) !important;
}
.sb-smoky-bucket-pill[data-bucket-id="80s-rock"].is-active,
.sb-smoky-bucket-pill[data-bucket-id="80s"].is-active {
  color: #fb7185 !important;
  text-shadow: 0 0 20px rgba(251, 113, 133, 0.95), 0 0 45px rgba(244, 63, 94, 0.7) !important;
}
.sb-smoky-bucket-pill[data-bucket-id="80s-rock"].is-active::after,
.sb-smoky-bucket-pill[data-bucket-id="80s"].is-active::after {
  background: #f43f5e !important;
  box-shadow: 0 0 8px #f43f5e, 0 0 16px rgba(244, 63, 94, 0.9) !important;
}

/* 2. 70s Rock - Vintage tube amp amber */
.sb-smoky-bucket-pill[data-bucket-id="70s-rock"] {
  color: rgba(254, 240, 138, 0.85) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 12px rgba(245, 158, 11, 0.22) !important;
}
.sb-smoky-bucket-pill[data-bucket-id="70s-rock"]:hover {
  color: #f59e0b !important;
  text-shadow: 0 0 18px rgba(245, 158, 11, 0.95), 0 0 36px rgba(217, 119, 6, 0.6) !important;
}
.sb-smoky-bucket-pill[data-bucket-id="70s-rock"].is-active {
  color: #f59e0b !important;
  text-shadow: 0 0 20px rgba(245, 158, 11, 0.95), 0 0 45px rgba(217, 119, 6, 0.7) !important;
}
.sb-smoky-bucket-pill[data-bucket-id="70s-rock"].is-active::after {
  background: #f59e0b !important;
  box-shadow: 0 0 8px #f59e0b, 0 0 16px rgba(245, 158, 11, 0.9) !important;
}

/* 3. Feel Good Rock - Sunny golden sunset */
.sb-smoky-bucket-pill[data-bucket-id="feel-good-rock"] {
  color: rgba(254, 215, 170, 0.85) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 12px rgba(249, 115, 22, 0.22) !important;
}
.sb-smoky-bucket-pill[data-bucket-id="feel-good-rock"]:hover {
  color: #fbbf24 !important;
  text-shadow: 0 0 18px rgba(251, 191, 36, 0.95), 0 0 36px rgba(245, 158, 11, 0.6) !important;
}
.sb-smoky-bucket-pill[data-bucket-id="feel-good-rock"].is-active {
  color: #fbbf24 !important;
  text-shadow: 0 0 20px rgba(251, 191, 36, 0.95), 0 0 45px rgba(245, 158, 11, 0.7) !important;
}
.sb-smoky-bucket-pill[data-bucket-id="feel-good-rock"].is-active::after {
  background: #fbbf24 !important;
  box-shadow: 0 0 8px #fbbf24, 0 0 16px rgba(251, 191, 36, 0.9) !important;
}

/* 4. 70s Feel Good Rock - Retro Pacific turquoise */
.sb-smoky-bucket-pill[data-bucket-id="70s-feel-good-rock"] {
  color: rgba(165, 243, 252, 0.85) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 12px rgba(6, 182, 212, 0.22) !important;
}
.sb-smoky-bucket-pill[data-bucket-id="70s-feel-good-rock"]:hover {
  color: #22d3ee !important;
  text-shadow: 0 0 18px rgba(34, 211, 238, 0.95), 0 0 36px rgba(6, 182, 212, 0.6) !important;
}
.sb-smoky-bucket-pill[data-bucket-id="70s-feel-good-rock"].is-active {
  color: #22d3ee !important;
  text-shadow: 0 0 20px rgba(34, 211, 238, 0.95), 0 0 45px rgba(6, 182, 212, 0.7) !important;
}
.sb-smoky-bucket-pill[data-bucket-id="70s-feel-good-rock"].is-active::after {
  background: #06b6d4 !important;
  box-shadow: 0 0 8px #06b6d4, 0 0 16px rgba(6, 182, 212, 0.9) !important;
}

/* 5. Techno - Matrix cyberpunk emerald */
.sb-smoky-bucket-pill[data-bucket-id="techno"] {
  color: rgba(167, 243, 208, 0.85) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 12px rgba(16, 185, 129, 0.22) !important;
}
.sb-smoky-bucket-pill[data-bucket-id="techno"]:hover {
  color: #34d399 !important;
  text-shadow: 0 0 18px rgba(52, 211, 153, 0.95), 0 0 36px rgba(16, 185, 129, 0.6) !important;
}
.sb-smoky-bucket-pill[data-bucket-id="techno"].is-active {
  color: #34d399 !important;
  text-shadow: 0 0 20px rgba(52, 211, 153, 0.95), 0 0 45px rgba(16, 185, 129, 0.7) !important;
}
.sb-smoky-bucket-pill[data-bucket-id="techno"].is-active::after {
  background: #10b981 !important;
  box-shadow: 0 0 8px #10b981, 0 0 16px rgba(16, 185, 129, 0.9) !important;
}

/* 6. Techno-Chill - Chilled deep aqua */
.sb-smoky-bucket-pill[data-bucket-id="techno-chill"] {
  color: rgba(153, 246, 228, 0.85) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 12px rgba(20, 184, 166, 0.22) !important;
}
.sb-smoky-bucket-pill[data-bucket-id="techno-chill"]:hover {
  color: #2dd4bf !important;
  text-shadow: 0 0 18px rgba(45, 212, 191, 0.95), 0 0 36px rgba(20, 184, 166, 0.6) !important;
}
.sb-smoky-bucket-pill[data-bucket-id="techno-chill"].is-active {
  color: #2dd4bf !important;
  text-shadow: 0 0 20px rgba(45, 212, 191, 0.95), 0 0 45px rgba(20, 184, 166, 0.7) !important;
}
.sb-smoky-bucket-pill[data-bucket-id="techno-chill"].is-active::after {
  background: #14b8a6 !important;
  box-shadow: 0 0 8px #14b8a6, 0 0 16px rgba(20, 184, 166, 0.9) !important;
}

/* 7. Techno Feel Good - Hyperactive chartreuse lime */
.sb-smoky-bucket-pill[data-bucket-id="techno-feel-good"] {
  color: rgba(217, 249, 157, 0.85) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 12px rgba(132, 204, 22, 0.22) !important;
}
.sb-smoky-bucket-pill[data-bucket-id="techno-feel-good"]:hover {
  color: #a3e635 !important;
  text-shadow: 0 0 18px rgba(163, 230, 53, 0.95), 0 0 36px rgba(132, 204, 22, 0.6) !important;
}
.sb-smoky-bucket-pill[data-bucket-id="techno-feel-good"].is-active {
  color: #a3e635 !important;
  text-shadow: 0 0 20px rgba(163, 230, 53, 0.95), 0 0 45px rgba(132, 204, 22, 0.7) !important;
}
.sb-smoky-bucket-pill[data-bucket-id="techno-feel-good"].is-active::after {
  background: #84cc16 !important;
  box-shadow: 0 0 8px #84cc16, 0 0 16px rgba(132, 204, 22, 0.9) !important;
}

/* 8. Ambient - Cosmic space nebula lavender */
.sb-smoky-bucket-pill[data-bucket-id="ambient"] {
  color: rgba(233, 213, 255, 0.85) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 12px rgba(168, 85, 247, 0.22) !important;
}
.sb-smoky-bucket-pill[data-bucket-id="ambient"]:hover {
  color: #c084fc !important;
  text-shadow: 0 0 18px rgba(192, 132, 252, 0.95), 0 0 36px rgba(168, 85, 247, 0.6) !important;
}
.sb-smoky-bucket-pill[data-bucket-id="ambient"].is-active {
  color: #c084fc !important;
  text-shadow: 0 0 20px rgba(192, 132, 252, 0.95), 0 0 45px rgba(168, 85, 247, 0.7) !important;
}
.sb-smoky-bucket-pill[data-bucket-id="ambient"].is-active::after {
  background: #a855f7 !important;
  box-shadow: 0 0 8px #a855f7, 0 0 16px rgba(168, 85, 247, 0.9) !important;
}

/* 9. Chill - Dreamy periwinkle indigo */
.sb-smoky-bucket-pill[data-bucket-id="chill"] {
  color: rgba(199, 210, 254, 0.85) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 12px rgba(99, 102, 241, 0.22) !important;
}
.sb-smoky-bucket-pill[data-bucket-id="chill"]:hover {
  color: #818cf8 !important;
  text-shadow: 0 0 18px rgba(129, 140, 248, 0.95), 0 0 36px rgba(99, 102, 241, 0.6) !important;
}
.sb-smoky-bucket-pill[data-bucket-id="chill"].is-active {
  color: #818cf8 !important;
  text-shadow: 0 0 20px rgba(129, 140, 248, 0.95), 0 0 45px rgba(99, 102, 241, 0.7) !important;
}
.sb-smoky-bucket-pill[data-bucket-id="chill"].is-active::after {
  background: #6366f1 !important;
  box-shadow: 0 0 8px #6366f1, 0 0 16px rgba(99, 102, 241, 0.9) !important;
}

/* 10. Sombre - Moody twilight slate */
.sb-smoky-bucket-pill[data-bucket-id="sombre"],
.sb-smoky-bucket-pill[data-bucket-id="somber"] {
  color: rgba(203, 213, 225, 0.8) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 12px rgba(148, 163, 184, 0.2) !important;
}
.sb-smoky-bucket-pill[data-bucket-id="sombre"]:hover,
.sb-smoky-bucket-pill[data-bucket-id="somber"]:hover {
  color: #e2e8f0 !important;
  text-shadow: 0 0 18px rgba(226, 232, 240, 0.9), 0 0 36px rgba(148, 163, 184, 0.5) !important;
}
.sb-smoky-bucket-pill[data-bucket-id="sombre"].is-active,
.sb-smoky-bucket-pill[data-bucket-id="somber"].is-active {
  color: #e2e8f0 !important;
  text-shadow: 0 0 20px rgba(226, 232, 240, 0.95), 0 0 45px rgba(148, 163, 184, 0.6) !important;
}
.sb-smoky-bucket-pill[data-bucket-id="sombre"].is-active::after,
.sb-smoky-bucket-pill[data-bucket-id="somber"].is-active::after {
  background: #94a3b8 !important;
  box-shadow: 0 0 8px #94a3b8, 0 0 16px rgba(148, 163, 184, 0.8) !important;
}

/* 11. Electronic - High-voltage neon cyan */
.sb-smoky-bucket-pill[data-bucket-id="electronic"] {
  color: rgba(186, 230, 253, 0.85) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 12px rgba(2, 132, 199, 0.22) !important;
}
.sb-smoky-bucket-pill[data-bucket-id="electronic"]:hover {
  color: #38bdf8 !important;
  text-shadow: 0 0 18px rgba(56, 189, 248, 0.95), 0 0 36px rgba(2, 132, 199, 0.6) !important;
}
.sb-smoky-bucket-pill[data-bucket-id="electronic"].is-active {
  color: #38bdf8 !important;
  text-shadow: 0 0 20px rgba(56, 189, 248, 0.95), 0 0 45px rgba(2, 132, 199, 0.7) !important;
}
.sb-smoky-bucket-pill[data-bucket-id="electronic"].is-active::after {
  background: #0284c7 !important;
  box-shadow: 0 0 8px #0284c7, 0 0 16px rgba(56, 189, 248, 0.9) !important;
}

/* 12. 80s Dance - Retro disco hot fuchsia */
.sb-smoky-bucket-pill[data-bucket-id="80s-dance"] {
  color: rgba(251, 207, 232, 0.85) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 12px rgba(236, 72, 153, 0.28) !important;
}
.sb-smoky-bucket-pill[data-bucket-id="80s-dance"]:hover {
  color: #f472b6 !important;
  text-shadow: 0 0 18px rgba(244, 114, 182, 0.95), 0 0 36px rgba(236, 72, 153, 0.7) !important;
}
.sb-smoky-bucket-pill[data-bucket-id="80s-dance"].is-active {
  color: #f472b6 !important;
  text-shadow: 0 0 20px rgba(244, 114, 182, 0.95), 0 0 45px rgba(236, 72, 153, 0.8) !important;
}
.sb-smoky-bucket-pill[data-bucket-id="80s-dance"].is-active::after {
  background: #ec4899 !important;
  box-shadow: 0 0 8px #ec4899, 0 0 16px rgba(236, 72, 153, 0.9) !important;
}

/* 13. Upbeat 90s Dance - Eurodance sunshine yellow */
.sb-smoky-bucket-pill[data-bucket-id="upbeat-90s-dance"] {
  color: rgba(254, 240, 138, 0.85) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 12px rgba(234, 179, 8, 0.22) !important;
}
.sb-smoky-bucket-pill[data-bucket-id="upbeat-90s-dance"]:hover {
  color: #fde047 !important;
  text-shadow: 0 0 18px rgba(253, 224, 71, 0.95), 0 0 36px rgba(234, 179, 8, 0.6) !important;
}
.sb-smoky-bucket-pill[data-bucket-id="upbeat-90s-dance"].is-active {
  color: #fde047 !important;
  text-shadow: 0 0 20px rgba(253, 224, 71, 0.95), 0 0 45px rgba(234, 179, 8, 0.7) !important;
}
.sb-smoky-bucket-pill[data-bucket-id="upbeat-90s-dance"].is-active::after {
  background: #eab308 !important;
  box-shadow: 0 0 8px #eab308, 0 0 16px rgba(234, 179, 8, 0.9) !important;
}

/* 14. 70s Love Songs - Velvet sunset rose */
.sb-smoky-bucket-pill[data-bucket-id="70s-love-songs"] {
  color: rgba(254, 205, 211, 0.85) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 12px rgba(244, 63, 94, 0.22) !important;
}
.sb-smoky-bucket-pill[data-bucket-id="70s-love-songs"]:hover {
  color: #fda4af !important;
  text-shadow: 0 0 18px rgba(253, 164, 175, 0.95), 0 0 36px rgba(244, 63, 94, 0.6) !important;
}
.sb-smoky-bucket-pill[data-bucket-id="70s-love-songs"].is-active {
  color: #fda4af !important;
  text-shadow: 0 0 20px rgba(253, 164, 175, 0.95), 0 0 45px rgba(244, 63, 94, 0.7) !important;
}
.sb-smoky-bucket-pill[data-bucket-id="70s-love-songs"].is-active::after {
  background: #fb7185 !important;
  box-shadow: 0 0 8px #fb7185, 0 0 16px rgba(251, 113, 133, 0.9) !important;
}

/* 15. 80s Love Songs - Synthwave ruby neon heart */
.sb-smoky-bucket-pill[data-bucket-id="80s-love-songs"] {
  color: rgba(253, 164, 175, 0.85) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 12px rgba(225, 29, 72, 0.25) !important;
}
.sb-smoky-bucket-pill[data-bucket-id="80s-love-songs"]:hover {
  color: #f43f5e !important;
  text-shadow: 0 0 18px rgba(244, 63, 94, 0.95), 0 0 36px rgba(225, 29, 72, 0.7) !important;
}
.sb-smoky-bucket-pill[data-bucket-id="80s-love-songs"].is-active {
  color: #f43f5e !important;
  text-shadow: 0 0 20px rgba(244, 63, 94, 0.95), 0 0 45px rgba(225, 29, 72, 0.8) !important;
}
.sb-smoky-bucket-pill[data-bucket-id="80s-love-songs"].is-active::after {
  background: #e11d48 !important;
  box-shadow: 0 0 8px #e11d48, 0 0 16px rgba(225, 29, 72, 0.9) !important;
}

/* 16. Robert Growler's Greatest Hits - Wild punk dog neon magenta */
/* Robert Growler's Greatest Hits: Hidden from standard cloud selection (summoned exclusively via peeking companion below) */
.sb-smoky-bucket-pill[data-bucket-id="robert-growler-s-greatest-hits"],
.sb-smoky-bucket-pill[data-bucket-id*="growler"],
.sb-smoky-bucket-pill[data-bucket-id*="growlet"] {
  display: none !important;
}

/* Robert Growler Peek: ears + eyes centered peeking over the HR separator line */
.sb-robert-growler-peek-wrap {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  box-sizing: border-box !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
  height: 33px;
  margin-top: 0.35rem !important;
  margin-bottom: 0 !important; /* bottom edge sits exactly on the HR separator line */
  position: relative !important;
  z-index: 3 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  overflow: hidden !important; /* crops everything below the eyes */
}

.sb-robert-growler-peek-img {
  width: 56px !important;
  height: auto !important;
  max-height: none !important;
  display: block;
  flex-shrink: 0;
  transform: translateY(3px);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.sb-bucket-selection-list:hover .sb-robert-growler-peek-img {
  transform: translateY(0);
}

/* Quiet Please ! (Separated, serene, containerless control) */
.sb-smoky-bucket-pill.sb-smoky-quiet-pill {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  justify-content: center !important;
  margin-top: 0 !important;
  padding-top: 0.8rem !important;
  padding-bottom: 0.35rem !important;
  border: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 0 !important;
  font-size: 0.98rem !important;
  font-style: italic !important;
  color: rgba(199, 210, 254, 0.72) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
  position: relative;
  z-index: 1;
}

.sb-smoky-bucket-pill.sb-smoky-quiet-pill:hover {
  background: transparent !important;
  border-top-color: rgba(255, 255, 255, 0.22) !important;
  color: #c7d2fe !important;
  text-shadow: 0 0 16px rgba(199, 210, 254, 0.85), 0 0 32px rgba(165, 180, 252, 0.45) !important;
  transform: translateY(-1px) !important; /* CRITICAL: No horizontal scale, prevents scrollbar */
}

.sb-smoky-bucket-pill.sb-smoky-quiet-pill:hover .sb-smoky-pill-title {
  transform: scale(1.06);
}

.sb-smoky-bucket-pill.sb-smoky-quiet-pill.is-active {
  background: transparent !important;
  border-top: 1px solid rgba(165, 180, 252, 0.35) !important;
  color: #a5b4fc !important;
  font-weight: 800 !important;
  text-shadow: 
    0 0 20px rgba(165, 180, 252, 0.95),
    0 0 40px rgba(129, 140, 248, 0.6) !important;
}

.sb-smoky-bucket-pill.sb-smoky-quiet-pill.is-active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 55%;
  max-width: 44px;
  height: 2px;
  background: #a5b4fc;
  box-shadow: 0 0 8px #a5b4fc, 0 0 16px rgba(165, 180, 252, 0.85);
  border-radius: 999px;
}

/* Light Theme Support */
[data-theme="light"] .sb-smoky-bucket-pill {
  color: #334155 !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9) !important;
}

[data-theme="light"] .sb-smoky-bucket-pill:hover {
  color: #0284c7 !important;
  text-shadow: 0 0 12px rgba(2, 132, 199, 0.35) !important;
}

[data-theme="light"] .sb-smoky-bucket-pill.is-active {
  color: #0284c7 !important;
  font-weight: 800 !important;
  text-shadow: 0 0 14px rgba(2, 132, 199, 0.45) !important;
}

[data-theme="light"] .sb-smoky-bucket-pill.is-active::after {
  background: #0284c7;
  box-shadow: 0 0 8px rgba(2, 132, 199, 0.6);
}

[data-theme="light"] .sb-smoky-bucket-pill.sb-smoky-quiet-pill {
  border-top-color: rgba(0, 0, 0, 0.08) !important;
  color: #64748b !important;
}

[data-theme="light"] .sb-smoky-bucket-pill.sb-smoky-quiet-pill:hover {
  color: #4f46e5 !important;
}

[data-theme="light"] .sb-smoky-bucket-pill.sb-smoky-quiet-pill.is-active {
  color: #4f46e5 !important;
}

[data-theme="light"] .sb-smoky-bucket-pill.sb-smoky-quiet-pill.is-active::after {
  background: #4f46e5;
  box-shadow: 0 0 8px rgba(79, 70, 229, 0.6);
}

[data-theme="light"] .sb-bucket-return-btn {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.12);
  color: #1e293b;
}

[data-theme="light"] .sb-bucket-panel-title {
  color: #0f172a;
}

/* Full row clickable control button (Just make button go green!) */
.sb-badge-control-row-btn {
  display: flex;
  align-items: center;
  justify-content: center !important;
  width: 100%;
  gap: 0.85rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-top: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 18px;
  padding: 0.85rem 1rem;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  cursor: pointer;
  text-align: center !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  color: #ffffff;
  user-select: none;
  font-family: inherit;
}

.sb-badge-control-row-btn:hover {
  border-color: rgba(255, 255, 255, 0.25);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.04) 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.sb-badge-control-row-btn:active {
  transform: translateY(0) scale(0.985);
}

/* Activated State: Other two buttons ("Ignore viewed items" & "No Dogs Please") GO RED when selected! */
.sb-badge-control-row-btn.seen-btn.is-active,
.sb-badge-control-row-btn.seen-btn[aria-pressed="true"],
.sb-badge-control-row-btn.seen-btn[aria-checked="true"],
.sb-badge-control-row-btn.dogs-btn.is-active,
.sb-badge-control-row-btn.dogs-btn[aria-pressed="true"],
.sb-badge-control-row-btn.dogs-btn[aria-checked="true"],
.sb-badge-activated-btn.is-active,
.sb-badge-activated-btn[aria-pressed="true"],
.sb-badge-activated-btn.dogs-btn.is-active,
.sb-badge-activated-btn.dogs-btn[aria-pressed="true"],
.sb-badge-activated-btn.seen-btn.is-active,
.sb-badge-activated-btn.seen-btn[aria-pressed="true"] {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.32) 0%, rgba(185, 28, 28, 0.58) 100%) !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(248, 113, 113, 0.8) !important;
  border-top: 1.5px solid rgba(254, 202, 202, 0.85) !important;
  box-shadow: 
    0 0 24px rgba(239, 68, 68, 0.45),
    0 6px 20px rgba(0, 0, 0, 0.4),
    inset 0 1px 1px rgba(255, 255, 255, 0.6) !important;
}

.sb-badge-control-row-btn.seen-btn.is-active:hover,
.sb-badge-control-row-btn.seen-btn[aria-pressed="true"]:hover,
.sb-badge-control-row-btn.dogs-btn.is-active:hover,
.sb-badge-control-row-btn.dogs-btn[aria-pressed="true"]:hover {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.46) 0%, rgba(185, 28, 28, 0.72) 100%) !important;
  border-color: #f87171 !important;
  box-shadow: 0 0 30px rgba(239, 68, 68, 0.65), 0 8px 22px rgba(0, 0, 0, 0.45) !important;
}

.sb-badge-control-row-btn.seen-btn.is-active .sb-compact-control-label span,
.sb-badge-control-row-btn.seen-btn[aria-pressed="true"] .sb-compact-control-label span,
.sb-badge-control-row-btn.dogs-btn.is-active .sb-compact-control-label span,
.sb-badge-control-row-btn.dogs-btn[aria-pressed="true"] .sb-compact-control-label span {
  color: #ffffff !important;
  font-weight: 700;
}

.sb-badge-control-row-btn.seen-btn.is-active .sb-compact-control-label i,
.sb-badge-control-row-btn.seen-btn[aria-pressed="true"] .sb-compact-control-label i,
.sb-badge-control-row-btn.dogs-btn.is-active .sb-compact-control-label i,
.sb-badge-control-row-btn.dogs-btn[aria-pressed="true"] .sb-compact-control-label i {
  color: #fca5a5 !important;
  filter: drop-shadow(0 0 8px #ef4444) !important;
}

.sb-badge-control-row-btn.seen-btn.is-active .sb-compact-control-desc,
.sb-badge-control-row-btn.seen-btn[aria-pressed="true"] .sb-compact-control-desc,
.sb-badge-control-row-btn.dogs-btn.is-active .sb-compact-control-desc,
.sb-badge-control-row-btn.dogs-btn[aria-pressed="true"] .sb-compact-control-desc {
  color: #fee2e2 !important;
  opacity: 0.95 !important;
}

@keyframes sbPulseAttention {
  0%, 100% { transform: scale(1); box-shadow: 0 0 24px rgba(239, 68, 68, 0.45); }
  50% { transform: scale(1.03); box-shadow: 0 0 34px rgba(248, 113, 113, 0.85); border-color: #f87171 !important; }
}

.sb-pulse-attention {
  animation: sbPulseAttention 0.7s ease-in-out 3 !important;
}

/* "Turn Off <> View" button at top of Your Controls modal */
.sb-badge-control-row-btn.normal-view-btn {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.16) 0%, rgba(217, 119, 6, 0.22) 100%) !important;
  border: 1px solid rgba(251, 191, 36, 0.45) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 0 16px rgba(245, 158, 11, 0.15) !important;
  margin-bottom: 0.75rem !important;
  padding: 0.8rem 1rem !important;
  width: 100% !important;
}

.sb-badge-control-row-btn.normal-view-btn:hover {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.3) 0%, rgba(217, 119, 6, 0.38) 100%) !important;
  border-color: rgba(251, 191, 36, 0.7) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 22px rgba(245, 158, 11, 0.35) !important;
  transform: translateY(-1px);
}

.sb-badge-control-row-btn.normal-view-btn .sb-compact-control-label {
  margin-bottom: 0 !important;
  justify-content: center;
  gap: 0.55rem;
}

.sb-badge-control-row-btn.normal-view-btn .sb-compact-control-label span {
  color: #fef3c7 !important;
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.sb-badge-control-row-btn.normal-view-btn .sb-compact-control-label i {
  color: #fbbf24 !important;
  font-size: 0.86rem;
  filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.5));
}

.sb-compact-control-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-top: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 18px;
  padding: 0.85rem 1rem;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.sb-compact-control-row:hover {
  border-color: rgba(255, 255, 255, 0.22);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.03) 100%);
}

.sb-compact-control-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.sb-compact-control-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 0.12rem;
  text-align: center;
  width: 100%;
}

.sb-compact-control-label i {
  font-size: 0.8rem;
  color: #94a3b8;
}

.sb-compact-control-desc {
  font-size: 0.73rem;
  color: #94a3b8;
  margin: 0;
  line-height: 1.35;
  text-align: center;
  width: 100%;
}

/* Activated Liquid-Glass Buttons */
.sb-badge-activated-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.5rem 1.05rem;
  border-radius: 999px;
  font-family: var(--font-heading, inherit);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.06);
  color: #94a3b8;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-top: 1.2px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  flex-shrink: 0;
}

.sb-badge-activated-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.sb-badge-activated-btn:active {
  transform: translateY(0) scale(0.97);
}

.sb-badge-activated-btn .sb-btn-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #64748b;
  transition: all 0.25s ease;
}

/* Activated State (Dogs Off / Ignore Seen On) - Liquid Crimson Red Glow */
.sb-badge-activated-btn.is-active,
.sb-badge-activated-btn[aria-pressed="true"],
.sb-badge-activated-btn.dogs-btn.is-active,
.sb-badge-activated-btn.dogs-btn[aria-pressed="true"],
.sb-badge-activated-btn.seen-btn.is-active,
.sb-badge-activated-btn.seen-btn[aria-pressed="true"] {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.32) 0%, rgba(185, 28, 28, 0.58) 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(248, 113, 113, 0.75) !important;
  border-top: 1.4px solid rgba(254, 202, 202, 0.8) !important;
  box-shadow: 
    0 0 22px rgba(239, 68, 68, 0.45),
    0 4px 14px rgba(0, 0, 0, 0.45),
    inset 0 1px 1px rgba(255, 255, 255, 0.6) !important;
}

.sb-badge-activated-btn.is-active .sb-btn-status-dot,
.sb-badge-activated-btn[aria-pressed="true"] .sb-btn-status-dot,
.sb-badge-activated-btn.dogs-btn.is-active .sb-btn-status-dot,
.sb-badge-activated-btn.dogs-btn[aria-pressed="true"] .sb-btn-status-dot,
.sb-badge-activated-btn.seen-btn.is-active .sb-btn-status-dot,
.sb-badge-activated-btn.seen-btn[aria-pressed="true"] .sb-btn-status-dot {
  background: #ffffff !important;
  box-shadow: 0 0 8px #ffffff, 0 0 12px #ef4444 !important;
}

/* WubyTuby Mascot & Instructions at Bottom of Badge (Centered Above Instructions) */
.sb-compact-wuby-instructions {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.6rem;
  margin-top: 1.05rem;
  padding: 0.85rem 1rem;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-top: 1px solid rgba(255, 255, 255, 0.20);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.sb-wuby-avatar-crop {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  margin: 0 auto;
  border: 2px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.25);
}

.sb-wuby-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sb-wuby-instructions-text {
  font-size: 0.78rem;
  color: #cbd5e1;
  line-height: 1.4;
  font-weight: 500;
  text-align: center;
  max-width: 290px;
  margin: 0 auto;
}


/* Flying Bone Animation & Magical Sparkles */
.sb-magic-bone-projectile {
  position: fixed;
  z-index: 1000000;
  font-size: 2.2rem;
  pointer-events: none;
  filter: drop-shadow(0 0 14px rgba(251, 191, 36, 0.95)) drop-shadow(0 0 24px rgba(244, 63, 94, 0.85));
  line-height: 1;
  user-select: none;
  will-change: transform, left, top;
}

.sb-magic-trail-sparkle {
  position: fixed;
  z-index: 999999;
  font-size: 1.2rem;
  pointer-events: none;
  user-select: none;
  line-height: 1;
  animation: magicSparkleFly 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.sb-magic-trail-sparkle.sb-impact-sparkle {
  animation: magicSparkleFly 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes magicSparkleFly {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.3);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) scale(0.2) rotate(45deg);
  }
}

.sb-badge-hit-sparkle {
  animation: badgeBonePulse 1.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes badgeBonePulse {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.4);
    box-shadow: 0 0 35px #fbbf24, 0 0 60px #f43f5e !important;
  }
  50% {
    transform: scale(1.15);
  }
  75% {
    transform: scale(1.3);
    box-shadow: 0 0 30px #fbbf24 !important;
  }
  100% {
    transform: scale(1);
  }
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .sb-visitor-badge-card {
    padding: 1.1rem 1rem;
    border-radius: 18px;
    max-width: 92%;
  }
  .sb-compact-perks-row {
    font-size: 0.75rem;
    padding: 0.45rem 0.65rem;
  }
  .sb-compact-control-row {
    padding: 0.65rem 0.75rem;
  }
  .sb-visitor-minimized-pill-wrap {
    bottom: 96px;
    right: 16px;
  }
  .sb-visitor-minimized-pill {
    padding: 3px 5px;
  }
}

/* =============================================================================
   NEWS FLASH (Image 75% Centered + Overlayed White Text with Crisp Black Shadow)
   ============================================================================= */
.photos-timeline-wrapper .timeline-col-cards .blog-card.news-flash-card,
.blog-timeline-wrapper .timeline-col-cards .blog-card.news-flash-card,
.timeline-col-cards .blog-card.news-flash-card,
.blog-card.news-flash-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  height: 100% !important;
  min-height: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  cursor: pointer !important;
  user-select: none !important;
  box-sizing: border-box !important;
  transform: none !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#photos-timeline-wrapper .photo-album-card.news-flash-card,
#photos-timeline-wrapper .photo-album-card.news-flash-card *,
#photos-timeline-wrapper .news-flash-card,
#photos-timeline-wrapper .news-flash-card *,
#blog-timeline-wrapper .news-flash-card,
#blog-timeline-wrapper .news-flash-card *,
.category-timeline-wrapper .news-flash-card,
.category-timeline-wrapper .news-flash-card *,
.news-flash-card,
.news-flash-card * {
  cursor: pointer !important;
}

.photos-timeline-wrapper .timeline-col-cards .blog-card.news-flash-card:hover,
.photos-timeline-wrapper .timeline-col-cards .blog-card.news-flash-card:focus-visible,
.blog-timeline-wrapper .timeline-col-cards .blog-card.news-flash-card:hover,
.blog-timeline-wrapper .timeline-col-cards .blog-card.news-flash-card:focus-visible,
.timeline-col-cards .blog-card.news-flash-card:hover,
.timeline-col-cards .blog-card.news-flash-card:focus-visible,
.blog-card.news-flash-card:hover,
.blog-card.news-flash-card:focus-visible {
  transform: scale(1.02) !important;
  border: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Kill spotlight card pseudo-elements on news flash */
.blog-card.news-flash-card::before,
.blog-card.news-flash-card::after {
  display: none !important;
  content: none !important;
}

/* When it has an image: 75% of allocated space, centered */
.news-flash-card.has-media {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
}

.news-flash-card.has-media .news-flash-media {
  position: relative !important;
  width: 75% !important;
  height: 75% !important;
  max-width: 75% !important;
  max-height: 75% !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45) !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease !important;
}

.news-flash-card.has-media:hover .news-flash-media,
.news-flash-card.has-media:focus-visible .news-flash-media {
  transform: scale(1.03) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6) !important;
}

.news-flash-card.has-media .news-flash-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: 12px !important;
  pointer-events: none !important;
}

/* Text overlayed in white with crisp black shadow over image */
.news-flash-card.has-media .news-flash-overlay {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.4rem 0.55rem !important;
  background: rgba(0, 0, 0, 0.22) !important;
  box-sizing: border-box !important;
  border-radius: 12px !important;
  pointer-events: none !important;
}

.news-flash-card.has-media .news-flash-text {
  color: #ffffff !important;
  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-weight: 700 !important;
  font-size: clamp(0.72rem, 0.8vw, 0.85rem) !important;
  line-height: 1.25 !important;
  text-align: center !important;
  /* Crisp 8-way black shadow / stroke + depth */
  text-shadow:
    -1px -1px 0 #000000,
     1px -1px 0 #000000,
    -1px  1px 0 #000000,
     1px  1px 0 #000000,
     0px -1px 0 #000000,
     0px  1px 0 #000000,
    -1px  0px 0 #000000,
     1px  0px 0 #000000,
     0 1px 3px #000000,
     0 2px 5px rgba(0, 0, 0, 0.95),
     0 3px 8px rgba(0, 0, 0, 0.8) !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 4 !important;
  line-clamp: 4 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  word-break: break-word !important;
  margin: 0 !important;
  padding: 0 !important;
}

.news-flash-card.has-media .news-flash-text p {
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  text-shadow: inherit !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Card without media (Text-only quote centered) */
.news-flash-card.no-media {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.75rem !important;
  text-align: center !important;
}

.news-flash-card.no-media .news-flash-body {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

.news-flash-card.no-media .news-flash-title {
  font-family: var(--font-heading) !important;
  font-size: clamp(0.78rem, 0.88vw, 0.86rem) !important;
  font-weight: 700 !important;
  color: #fbbf24 !important;
  margin: 0 0 0.25rem 0 !important;
  line-height: 1.25 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

.news-flash-card.no-media .news-flash-text {
  font-family: var(--font-sans) !important;
  font-size: clamp(0.85rem, 0.95vw, 0.96rem) !important;
  line-height: 1.4 !important;
  color: #f1f5f9 !important;
  font-style: italic !important;
  font-weight: 400 !important;
  text-align: center !important;
  -webkit-line-clamp: 6 !important;
  line-clamp: 6 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  word-break: break-word !important;
}

.news-flash-card.no-media .news-flash-text p {
  color: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  margin: 0 !important;
}

/* =============================================================================
   NEWS FLASH LIGHTBOX MODAL (Click to Show Centered on Page)
   ============================================================================= */
.news-flash-lightbox-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.news-flash-lightbox-modal.is-active {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.news-flash-lightbox-backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(6, 10, 18, 0.88) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  cursor: pointer !important;
}

.news-flash-lightbox-close {
  position: absolute !important;
  top: 1.5rem !important;
  right: 1.5rem !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  font-size: 1.25rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 10 !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

.news-flash-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.25) !important;
  transform: scale(1.08) !important;
}

.news-flash-lightbox-content {
  position: relative !important;
  z-index: 2 !important;
  max-width: 90vw !important;
  max-height: 88vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1rem !important;
  box-sizing: border-box !important;
  transform: scale(0.94);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
}

.news-flash-lightbox-modal.is-active .news-flash-lightbox-content {
  transform: scale(1) !important;
}

.news-flash-lightbox-media {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.14) !important;
  max-width: min(85vw, 860px) !important;
  max-height: min(82vh, 760px) !important;
}

.news-flash-lightbox-img {
  max-width: min(85vw, 860px) !important;
  max-height: min(82vh, 760px) !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  border-radius: 16px !important;
  background: #000000 !important;
}

.news-flash-lightbox-overlay {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1.5rem 2rem !important;
  background: rgba(0, 0, 0, 0.25) !important;
  box-sizing: border-box !important;
  pointer-events: none !important;
  text-align: center !important;
}

.news-flash-lightbox-text {
  color: #ffffff !important;
  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-weight: 700 !important;
  font-size: clamp(1.2rem, 2.5vw, 2.2rem) !important;
  line-height: 1.35 !important;
  text-align: center !important;
  text-shadow:
    -2px -2px 0 #000000,
     2px -2px 0 #000000,
    -2px  2px 0 #000000,
     2px  2px 0 #000000,
     0px -2px 0 #000000,
     0px  2px 0 #000000,
    -2px  0px 0 #000000,
     2px  0px 0 #000000,
     0 2px 4px #000000,
     0 4px 10px rgba(0, 0, 0, 0.95),
     0 8px 24px rgba(0, 0, 0, 0.9) !important;
  max-width: 90% !important;
  word-break: break-word !important;
}

.news-flash-lightbox-text p {
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  text-shadow: inherit !important;
  margin: 0 !important;
}

/* Lightbox fallback for text-only (no image) */
.news-flash-lightbox-media.is-text-only {
  background: rgba(18, 24, 38, 0.92) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  padding: 2.5rem 3rem !important;
  min-width: min(85vw, 500px) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.news-flash-lightbox-media.is-text-only .news-flash-lightbox-img {
  display: none !important;
}

.news-flash-lightbox-media.is-text-only .news-flash-lightbox-overlay {
  position: static !important;
  background: transparent !important;
  padding: 0 !important;
}

.news-flash-lightbox-media.is-text-only .news-flash-lightbox-text {
  font-size: clamp(1.1rem, 2vw, 1.6rem) !important;
  font-style: italic !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7) !important;
}

/* -----------------------------------------------------------------------------
   LIGHT MODE OVERRIDES
   ----------------------------------------------------------------------------- */
[data-theme="light"] .photos-timeline-wrapper .timeline-col-cards .blog-card.news-flash-card,
[data-theme="light"] .blog-timeline-wrapper .timeline-col-cards .blog-card.news-flash-card,
[data-theme="light"] .timeline-col-cards .blog-card.news-flash-card,
[data-theme="light"] .blog-card.news-flash-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

[data-theme="light"] .news-flash-card.no-media .news-flash-title {
  color: #b45309 !important;
}

[data-theme="light"] .news-flash-card.no-media .news-flash-text {
  color: #0f172a !important;
}

[data-theme="light"] .news-flash-lightbox-media.is-text-only {
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25) !important;
}

[data-theme="light"] .news-flash-lightbox-media.is-text-only .news-flash-lightbox-text {
  color: #0f172a !important;
  text-shadow: none !important;
}

/* ==========================================================================
   MOBILE VERTICAL SCROLLER: Full-Width Editorial Feed for Mobile Phones
   Applies to: #firehose, #photos, #blog, #recent-photos, #recent-videos
   ========================================================================== */
@media (max-width: 768px) {
  /* Deck Slide & Container on Mobile */
  .photos-gateway-slide,
  #firehose.deck-slide,
  #photos.deck-slide,
  #blog.deck-slide,
  #recent-photos.deck-slide,
  #recent-videos.deck-slide {
    height: 100% !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    padding: 0 !important;
  }

  .photos-gateway-slide .deck-container,
  #firehose .deck-container,
  #photos .deck-container,
  #blog .deck-container,
  #recent-photos .deck-container,
  #recent-videos .deck-container {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    max-height: 100dvh !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: calc(env(safe-area-inset-top, 0px) + clamp(0.75rem, 1.8vh, 1.25rem)) 0 0 0 !important;
    box-sizing: border-box !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    transform: none !important;
    position: relative !important;
  }

  /* Section Header */
  .photos-gateway-slide .section-header,
  #firehose .photos-header,
  #photos .photos-header,
  #blog .blog-section-header,
  #recent-photos .photos-header,
  #recent-videos .photos-header {
    flex-shrink: 0 !important;
    margin: 0 auto 0.35rem auto !important;
    padding: 0 1rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
    z-index: 20 !important;
    text-align: center !important;
  }

  .photos-title-row {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin: 0 auto !important;
    width: 100% !important;
    gap: 0.5rem !important;
  }

  .section-title {
    font-size: 1.35rem !important;
    line-height: 1.25 !important;
    text-align: center !important;
    justify-content: center !important;
  }

  .firehose-items-count {
    font-size: 0.82rem !important;
  }

  /* Timeline Wrapper: expands to fill vertical space */
  #firehose .photos-timeline-wrapper,
  #photos.photos-gateway-slide .photos-timeline-wrapper,
  #blog .photos-timeline-wrapper,
  #blog .blog-timeline-wrapper,
  #recent-photos .photos-timeline-wrapper,
  #recent-videos .photos-timeline-wrapper,
  .photos-timeline-wrapper,
  .blog-timeline-wrapper {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    height: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    overflow: hidden !important;
  }

  /* Timeline Viewport: Native Vertical Scrolling */
  #firehose .photos-timeline-viewport,
  #photos.photos-gateway-slide .photos-timeline-viewport,
  #blog .photos-timeline-viewport,
  #blog .blog-timeline-viewport,
  #recent-photos .photos-timeline-viewport,
  #recent-videos .photos-timeline-viewport,
  .photos-timeline-viewport,
  .blog-timeline-viewport {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    padding: 0.35rem 0.85rem calc(12.5rem + env(safe-area-inset-bottom, 0px)) 0.85rem !important;
    box-sizing: border-box !important;
    scroll-behavior: smooth !important;
  }

  /* Hide horizontal scroller artifacts */
  .photos-timeline-wrapper .timeline-scroll-to-latest-btn,
  .photos-timeline-wrapper .timeline-scroll-next-btn,
  .blog-timeline-wrapper .timeline-scroll-to-latest-btn,
  .blog-timeline-wrapper .timeline-scroll-next-btn,
  .slick-green-scroller-hr,
  .timeline-date-capsule.is-sticky-floating,
  .timeline-col-header .timeline-col-line,
  .timeline-empty-card-slot {
    display: none !important;
  }

  /* Timeline Track: Flow as vertical container */
  .photos-timeline-track,
  .blog-timeline-track {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    transform: none !important;
    gap: 1.25rem !important;
  }

  /* Timeline Pages: Stack vertically */
  .photos-timeline-page,
  .blog-timeline-page {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    gap: 1.25rem !important;
    contain-intrinsic-size: unset !important;
  }

  /* Timeline Grid: Single column full-width feed */
  #firehose .photos-timeline-grid,
  #photos.photos-gateway-slide .photos-timeline-grid,
  #blog .photos-timeline-grid,
  #blog-timeline-viewport .photos-timeline-grid,
  #recent-photos .photos-timeline-grid,
  #recent-videos .photos-timeline-grid,
  .photos-timeline-grid,
  .blog-timeline-wrapper .blog-grid {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 1.25rem !important;
  }

  /* Timeline Column (Date Grouping) */
  #firehose .photos-timeline-track .timeline-column,
  #photos.photos-gateway-slide .photos-timeline-track .timeline-column,
  .photos-timeline-wrapper .timeline-column,
  .blog-timeline-wrapper .timeline-column {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    gap: 0.85rem !important;
    margin: 0 !important;
  }

  /* Sticky Date Capsule Header */
  .photos-timeline-wrapper .timeline-col-header,
  .blog-timeline-wrapper .timeline-col-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 15 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0.35rem 0 !important;
    margin: 0 0 0.15rem 0 !important;
    background: transparent !important;
    pointer-events: none !important;
  }

  .photos-timeline-wrapper .timeline-date-capsule,
  .blog-timeline-wrapper .timeline-date-capsule {
    pointer-events: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
    padding: 0.35rem 0.9rem !important;
    border-radius: 9999px !important;
    background: rgba(10, 16, 28, 0.92) !important;
    backdrop-filter: blur(18px) saturate(190%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(190%) !important;
    border: 1px solid rgba(52, 211, 153, 0.45) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.65), 0 0 10px rgba(16, 185, 129, 0.15) !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: #f1f5f9 !important;
    letter-spacing: 0.02em !important;
  }

  .photos-timeline-wrapper .timeline-date-capsule.is-empty-date,
  .blog-timeline-wrapper .timeline-date-capsule.is-empty-date {
    display: none !important;
  }

  /* Cards Stack Inside Column */
  .photos-timeline-wrapper .timeline-col-cards,
  .blog-timeline-wrapper .timeline-col-cards {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    gap: 1.15rem !important;
  }

  /* Full-Width Editorial Feed Card */
  .photos-timeline-wrapper .photo-album-card,
  .blog-timeline-wrapper .blog-card,
  .recent-photo-timeline-card,
  .recent-video-timeline-card {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    background: rgba(13, 20, 36, 0.88) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 10px 28px -6px rgba(0, 0, 0, 0.65), 0 0 1px rgba(255, 255, 255, 0.15) !important;
    transition: transform 0.2s ease, border-color 0.2s ease !important;
  }

  .photos-timeline-wrapper .photo-album-card:active,
  .blog-timeline-wrapper .blog-card:active {
    transform: scale(0.985) !important;
  }

  /* Thumbnail Banner */
  .photos-timeline-wrapper .photo-album-card .blog-thumb-wrap,
  .blog-timeline-wrapper .blog-card .blog-thumb-wrap {
    width: 100% !important;
    height: 195px !important;
    min-height: 195px !important;
    max-height: 220px !important;
    position: relative !important;
    overflow: hidden !important;
    background: #090e17 !important;
    margin: 0 !important;
    border-radius: 16px 16px 0 0 !important;
  }

  .photos-timeline-wrapper .photo-album-card .blog-thumb,
  .blog-timeline-wrapper .blog-card .blog-thumb {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    transition: transform 0.3s ease !important;
  }

  /* Badges Overlay */
  .photos-timeline-wrapper .photo-album-card .album-card-badges,
  .blog-timeline-wrapper .blog-card .album-card-badges {
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    padding: 10px 12px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
  }

  .photos-timeline-wrapper .photo-album-card .item-access-badges,
  .blog-timeline-wrapper .blog-card .item-access-badges {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    pointer-events: auto !important;
  }

  .photos-timeline-wrapper .photo-album-card .firehose-card-type-badge,
  .blog-timeline-wrapper .blog-card .firehose-card-type-badge {
    padding: 4px 9px !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    border-radius: 8px !important;
  }

  .photos-timeline-wrapper .photo-album-card .album-badge-count,
  .blog-timeline-wrapper .blog-card .album-badge-count {
    position: absolute !important;
    bottom: 10px !important;
    right: 12px !important;
    top: auto !important;
    left: auto !important;
    font-size: 0.74rem !important;
    padding: 3px 9px !important;
    border-radius: 7px !important;
    background: rgba(0, 0, 0, 0.72) !important;
    backdrop-filter: blur(10px) !important;
    color: #f1f5f9 !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    pointer-events: auto !important;
  }

  .photos-timeline-wrapper .photo-album-card .card-seen-indicator {
    position: absolute !important;
    bottom: 10px !important;
    left: 12px !important;
    width: 28px !important;
    height: 28px !important;
    pointer-events: auto !important;
    z-index: 6 !important;
  }

  /* Video Play Button */
  .photos-timeline-wrapper .photo-album-card .video-card-play-btn {
    width: 52px !important;
    height: 52px !important;
    font-size: 1.3rem !important;
  }

  /* Card Content Below Thumbnail */
  .photos-timeline-wrapper .photo-album-card .blog-card-content,
  .blog-timeline-wrapper .blog-card .blog-card-content {
    display: flex !important;
    flex-direction: column !important;
    padding: 14px 16px 16px 16px !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .photos-timeline-wrapper .photo-album-card .blog-card-title,
  .blog-timeline-wrapper .blog-card .blog-card-title {
    font-size: 1.14rem !important;
    font-weight: 600 !important;
    line-height: 1.38 !important;
    color: #f8fafc !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .photos-timeline-wrapper .photo-album-card .blog-card-title a,
  .blog-timeline-wrapper .blog-card .blog-card-title a {
    color: #f8fafc !important;
    text-decoration: none !important;
  }

  .photos-timeline-wrapper .photo-album-card .blog-card-excerpt,
  .blog-timeline-wrapper .blog-card .blog-card-excerpt {
    font-size: 0.88rem !important;
    line-height: 1.48 !important;
    color: rgba(226, 232, 240, 0.78) !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Newsflash Card in Mobile Vertical Feed */
  .photos-timeline-wrapper .timeline-col-cards .blog-card.news-flash-card,
  .blog-timeline-wrapper .timeline-col-cards .blog-card.news-flash-card {
    padding: 14px 16px !important;
    border-left: 3px solid #38bdf8 !important;
  }

  .news-flash-media {
    width: 100% !important;
    max-height: 195px !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    margin-bottom: 10px !important;
  }

  .news-flash-media .news-flash-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* Topic Filters Dock: Sleek horizontal pill drawer centered and elevated for mobile */
  .photos-bottom-topics-dock,
  .blog-bottom-topics-dock,
  .recent-photos-bottom-topics-dock,
  .recent-videos-bottom-topics-dock {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 25 !important;
    margin: 0 auto !important;
    padding: 12px 14px calc(132px + env(safe-area-inset-bottom, 0px)) 14px !important;
    background: linear-gradient(180deg, rgba(3, 7, 18, 0) 0%, rgba(3, 7, 18, 0.76) 24%, rgba(3, 7, 18, 0.94) 65%, rgba(3, 7, 18, 0.98) 100%) !important;
    pointer-events: none !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .photos-bottom-filter-wrap {
    pointer-events: auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    justify-content: safe center !important;
    gap: 8px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 2px 4px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 auto !important;
  }

  .photos-bottom-filter-wrap::-webkit-scrollbar {
    display: none !important;
  }

  .photos-bottom-filter-wrap:has(.is-expanded),
  .photos-bottom-filter-wrap:has(.is-open) {
    justify-content: flex-start !important;
  }

  .photos-bottom-types-list,
  .photos-bottom-topics-list {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    justify-content: safe center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
  }

  .blog-bottom-topics-dock .photos-bottom-topics-list,
  .recent-photos-bottom-topics-dock .photos-bottom-topics-list,
  .recent-videos-bottom-topics-dock .photos-bottom-topics-list {
    pointer-events: auto !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 2px 4px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    justify-content: safe center !important;
    border-radius: 9999px !important;
    margin: 0 auto !important;
  }

  .blog-bottom-topics-dock .photos-bottom-topics-list.is-expanded,
  .blog-bottom-topics-dock .photos-bottom-topics-list.is-open,
  .recent-photos-bottom-topics-dock .photos-bottom-topics-list.is-expanded,
  .recent-photos-bottom-topics-dock .photos-bottom-topics-list.is-open,
  .recent-videos-bottom-topics-dock .photos-bottom-topics-list.is-expanded,
  .recent-videos-bottom-topics-dock .photos-bottom-topics-list.is-open {
    justify-content: flex-start !important;
  }

  .blog-bottom-topics-dock .photos-bottom-topics-list::-webkit-scrollbar,
  .recent-photos-bottom-topics-dock .photos-bottom-topics-list::-webkit-scrollbar,
  .recent-videos-bottom-topics-dock .photos-bottom-topics-list::-webkit-scrollbar {
    display: none !important;
  }

  .photos-bottom-types-list .photo-type-tag-btn,
  .photos-bottom-topics-list .photo-topic-tag-btn,
  .photos-bottom-topics-list .video-topic-tag-btn {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  .firehose-show-today-btn {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
}

/* ==========================================================================
   Content Protection & Anti-Download Defense Styles
   ========================================================================== */

/* 1. Universal Anti-Drag & Mobile Touch-Callout Suppression on Media */
.firehose-item img,
.polaroid img,
.polaroid-card img,
.hero-polaroid img,
.polaroid-img-wrap img,
.blog-hero-image img,
.blog-reader-media-col img,
.protected-media,
.protected-media img,
.protected-media video,
.media-card img,
.dog-companion img,
.enzo-character-wrap img {
  -webkit-user-drag: none !important;
  -khtml-user-drag: none !important;
  -moz-user-drag: none !important;
  -o-user-drag: none !important;
  user-drag: none !important;
  -webkit-touch-callout: none !important; /* Disables iOS long-press save image sheet */
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}

/* 2. Glass Shield Overlay for High-Res Photos */
.has-glass-shield {
  position: relative;
}

.has-glass-shield::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  pointer-events: none;
  z-index: 2;
}

/* 3. Sensitive Content Print Masking */
@media print {
  body {
    display: none !important;
  }
}

/* ==========================================================================
   Site Feedback & Aggregate Sentiment Deck Slide (#feedback)
   ========================================================================== */
#feedback {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

#feedback .section-header.feedback-header {
  margin-bottom: 0.85rem;
}

#feedback .feedback-slick-green-hr,
#feedback .bento-slick-green-hr,
#feedback .slick-green-scroller-hr {
  max-width: 530px !important;
  width: 100% !important;
  margin: clamp(0.45rem, 0.9vh, 0.75rem) auto clamp(0.6rem, 1.2vh, 0.9rem) auto !important;
}

.feedback-grid {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
}

/* Feedback Dialog Card (Dead Center in Viewport) */
.feedback-form-card {
  width: 100%;
  max-width: 530px;
  margin: 0 auto;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 1.15rem;
  padding: 1.15rem 1.35rem;
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.55);
  position: relative;
  overflow: hidden;
  z-index: 10;
}

.feedback-form-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(16, 185, 129, 0) 0%, rgba(52, 211, 153, 0.7) 50%, rgba(16, 185, 129, 0) 100%);
  pointer-events: none;
}

/* Sliders Stack (Strictly 1 Column, Compact Spacing) */
.feedback-sliders-stack,
.feedback-sliders-grid {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.65rem;
}

.feedback-slider-group {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0.55rem;
  padding: 0.35rem 0.65rem;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.feedback-slider-group:hover {
  background: rgba(0, 0, 0, 0.4);
  border-color: rgba(52, 211, 153, 0.3);
}

.feedback-slider-group.is-touched {
  border-color: rgba(16, 185, 129, 0.38);
  background: rgba(16, 185, 129, 0.05);
}

.feedback-slider-group.slider-needs-interaction {
  border-color: rgba(239, 68, 68, 0.85) !important;
  background: rgba(239, 68, 68, 0.12) !important;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.45) !important;
  animation: feedbackSliderShake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes feedbackSliderShake {
  0%, 100% { transform: translateX(0); }
  15%, 55% { transform: translateX(-6px); }
  35%, 75% { transform: translateX(6px); }
  90% { transform: translateX(-2px); }
}

.feedback-slider-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  line-height: 1.2;
}

.feedback-slider-title-col {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.feedback-slider-label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: #f1f5f9;
  cursor: pointer;
  user-select: none;
}

.feedback-slider-label i {
  color: #34d399;
  font-size: 0.8rem;
  width: 14px;
  text-align: center;
}

/* Add Comment Button next to slider title */
.feedback-slider-comment-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px dashed rgba(255, 255, 255, 0.28);
  color: rgba(255, 255, 255, 0.75);
  border-radius: 9999px;
  padding: 0.08rem 0.45rem;
  font-size: 0.72rem;
  line-height: 1.2;
  cursor: pointer !important;
  pointer-events: auto !important;
  position: relative;
  z-index: 25;
  transition: all 0.2s ease;
}

.feedback-slider-comment-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: #ffffff;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.feedback-slider-comment-btn i {
  font-size: 0.7rem;
  opacity: 0.9;
}

/* Inline Comment Input Box */
.feedback-slider-comment-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.feedback-slider-comment-input {
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 0.35rem;
  color: #ffffff !important;
  font-size: 0.78rem;
  padding: 0.15rem 0.5rem;
  width: 160px;
  outline: none;
  text-align: left;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.feedback-slider-comment-input:focus {
  border-color: #ffffff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.45);
}

.feedback-slider-comment-input::placeholder {
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.74rem;
}

.feedback-slider-comment-ok {
  background: #10b981;
  border: none;
  color: #ffffff;
  border-radius: 0.3rem;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease;
}

.feedback-slider-comment-ok:hover {
  background: #34d399;
  transform: scale(1.1);
}

/* Comment text displayed next to slider title in WHITE */
.feedback-slider-comment-tag {
  color: #ffffff !important;
  font-size: 0.76rem;
  font-weight: 500;
  font-style: italic;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 4px;
  padding: 0.08rem 0.45rem;
  cursor: pointer;
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.feedback-slider-comment-tag:hover {
  background: rgba(255, 255, 255, 0.24);
  border-color: #ffffff;
}

.feedback-slider-val {
  font-size: 0.75rem;
  font-weight: 700;
  color: #34d399;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  padding: 0.08rem 0.45rem;
  background: rgba(16, 185, 129, 0.14);
  border: 1px solid rgba(52, 211, 153, 0.35);
  border-radius: 9999px;
  min-width: 34px;
  text-align: center;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

/* Unmanipulated Value Badge starts grey */
.feedback-slider-val.is-unmanipulated {
  color: #94a3b8 !important;
  background: rgba(148, 163, 184, 0.12) !important;
  border-color: rgba(148, 163, 184, 0.25) !important;
}

.feedback-slider-track-wrap {
  position: relative;
  width: 100%;
  padding-top: 0.1rem;
}

/* Slider Input Track with Dynamic Good-to-Bad Color */
.feedback-slider-input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 5px;
  border-radius: 9999px;
  background: linear-gradient(to right, #10b981 0%, #34d399 90%, rgba(255, 255, 255, 0.12) 90%, rgba(255, 255, 255, 0.12) 100%);
  outline: none;
  cursor: pointer;
  margin: 0;
  padding: 0;
  transition: background 0.12s linear;
}

/* Unmanipulated Sliders are GREY until manipulated */
.feedback-slider-input.is-unmanipulated {
  background: #475569 !important;
  --slider-thumb-color: #64748b !important;
}

.feedback-slider-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--slider-thumb-color, #10b981);
  border: 2px solid #ffffff;
  box-shadow: 0 0 10px var(--slider-thumb-color, rgba(16, 185, 129, 0.7)), 0 2px 4px rgba(0, 0, 0, 0.5);
  cursor: grab;
  transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.feedback-slider-input.is-unmanipulated::-webkit-slider-thumb {
  background: #64748b !important;
  border-color: #94a3b8 !important;
  box-shadow: 0 0 6px rgba(100, 116, 139, 0.4), 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}

.feedback-slider-input::-webkit-slider-thumb:hover,
.feedback-slider-input::-webkit-slider-thumb:active {
  transform: scale(1.22);
  cursor: grabbing;
}

.feedback-slider-input::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--slider-thumb-color, #10b981);
  border: 2px solid #ffffff;
  box-shadow: 0 0 10px var(--slider-thumb-color, rgba(16, 185, 129, 0.7)), 0 2px 4px rgba(0, 0, 0, 0.5);
  cursor: grab;
  transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.feedback-slider-input.is-unmanipulated::-moz-range-thumb {
  background: #64748b !important;
  border-color: #94a3b8 !important;
  box-shadow: 0 0 6px rgba(100, 116, 139, 0.4), 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}

.feedback-slider-input::-moz-range-thumb:hover,
.feedback-slider-input::-moz-range-thumb:active {
  transform: scale(1.22);
  cursor: grabbing;
}

/* Comment & Author Fields: Centered Content */
.feedback-msg-wrap {
  margin-bottom: 0.95rem;
}

.feedback-msg-wrap textarea {
  min-height: 58px;
  height: 58px;
  resize: vertical;
  font-size: 0.84rem;
  line-height: 1.35;
  padding: 1.25rem 0.85rem 0.4rem 0.85rem !important;
  text-align: center !important;
}

.feedback-msg-wrap textarea::placeholder {
  text-align: center !important;
}

.feedback-submit-bar {
  display: flex;
  gap: 0.65rem;
  align-items: center;
}

.feedback-author-wrap {
  flex: 1;
  min-width: 0;
}

.feedback-author-wrap input {
  height: 42px;
  font-size: 0.84rem;
  padding: 0.85rem 0.85rem 0.2rem 0.85rem !important;
  text-align: center !important;
}

.feedback-author-wrap input::placeholder {
  text-align: center !important;
}

/* Floating labels for feedback inputs: Centered and prevent wrapping */
.feedback-form-card .floating-label {
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  text-align: center !important;
  width: auto;
  white-space: nowrap !important;
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.feedback-msg-wrap .floating-input:focus ~ .floating-label,
.feedback-msg-wrap .floating-input:not(:placeholder-shown) ~ .floating-label {
  top: 0.32rem !important;
  transform: translateX(-50%) !important;
  font-size: 0.62rem !important;
  font-weight: 600 !important;
  color: var(--color-primary-light, #34d399) !important;
  letter-spacing: 0.03em;
}

.feedback-author-wrap .floating-input:focus ~ .floating-label,
.feedback-author-wrap .floating-input:not(:placeholder-shown) ~ .floating-label {
  top: 0.28rem !important;
  transform: translateX(-50%) !important;
  font-size: 0.62rem !important;
  font-weight: 600 !important;
  color: var(--color-primary-light, #34d399) !important;
  letter-spacing: 0.03em;
}

.btn-feedback-submit {
  flex-shrink: 0;
  white-space: nowrap;
  height: 42px;
  padding: 0 1.25rem;
  font-size: 0.84rem;
  font-weight: 700;
  border-radius: 0.65rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-feedback-submit.is-disabled,
.btn-feedback-submit:disabled {
  opacity: 0.52;
  cursor: not-allowed !important;
  filter: grayscale(0.2);
  box-shadow: none !important;
  transform: none !important;
}

.btn-feedback-submit.is-ready {
  opacity: 1;
  cursor: pointer;
  filter: none;
  background: linear-gradient(135deg, #059669 0%, #10b981 50%, #34d399 100%);
  box-shadow: 0 0 18px rgba(16, 185, 129, 0.45), 0 4px 12px rgba(0, 0, 0, 0.3);
  animation: feedbackBtnPulse 2.4s infinite ease-in-out;
}

@keyframes feedbackBtnPulse {
  0%, 100% {
    box-shadow: 0 0 16px rgba(16, 185, 129, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
  }
  50% {
    box-shadow: 0 0 24px rgba(16, 185, 129, 0.7), 0 4px 16px rgba(16, 185, 129, 0.35);
  }
}

.btn-feedback-submit .btn-icon-locked {
  font-size: 0.78rem;
  opacity: 0.9;
}

/* Robert Growler Side Stage (Positioned to the Right of the Centered Form) */
.feedback-growler-side {
  position: absolute;
  left: calc(50% + 295px);
  top: 50%;
  transform: translateY(-50%);
  width: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 25;
  pointer-events: auto;
}

@media (max-width: 1240px) {
  .feedback-growler-side {
    left: auto;
    right: 2vw;
  }
}

@media (max-width: 980px) {
  .feedback-grid {
    flex-direction: column;
  }
  .feedback-growler-side {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    transform: none;
    margin-top: 1.5rem;
  }
}

/* Robert Growler Speech Bubble (Critic Thoughts & Problem Mode) */
.feedback-growler-bubble {
  position: absolute;
  bottom: calc(100% - 10px);
  left: 50%;
  transform: translateX(-50%);
  width: 250px;
  max-width: 90vw;
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 14px;
  padding: 0.65rem 0.85rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 16px rgba(245, 158, 11, 0.15);
  color: #fef3c7;
  font-size: 0.78rem;
  line-height: 1.35;
  text-align: center;
  z-index: 30;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: sbBubbleFloatIn 0.35s cubic-bezier(0.16, 1.25, 0.3, 1) forwards;
  pointer-events: none;
}

@keyframes sbBubbleFloatIn {
  from { opacity: 0; transform: translate(-50%, 8px) scale(0.92); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

.feedback-growler-bubble-arrow {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid rgba(15, 23, 42, 0.92);
}

/* Dramatic Overhead Spotlight (Beams down onto Robert on click) */
.feedback-growler-spotlight {
  position: absolute;
  top: -150px;
  left: 50%;
  transform: translateX(-50%);
  width: 260px;
  height: 480px;
  pointer-events: none !important;
  background: radial-gradient(ellipse at top, rgba(254, 240, 138, 0.42) 0%, rgba(250, 204, 21, 0.2) 42%, rgba(250, 204, 21, 0) 76%);
  clip-path: polygon(32% 0%, 68% 0%, 100% 100%, 0% 100%);
  opacity: 0;
  transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
  z-index: 1;
}

.feedback-growler-side.is-spotlight-on .feedback-growler-spotlight {
  opacity: 1;
  animation: growlerSpotlightSway 4.5s ease-in-out infinite alternate;
}

@keyframes growlerSpotlightSway {
  0% { transform: translateX(-52%) rotate(-2deg); }
  100% { transform: translateX(-48%) rotate(2.5deg); }
}

/* Character Stage & Art - Larger Size */
.feedback-growler-stage {
  position: relative;
  width: 220px;
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer !important;
  pointer-events: auto !important;
  user-select: none;
  z-index: 25;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.feedback-growler-stage:hover {
  transform: translateY(-4px) scale(1.04);
}

.feedback-growler-figure {
  position: relative;
  width: 200px;
  height: 235px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  pointer-events: auto !important;
  cursor: pointer !important;
}

.feedback-growler-art {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.85));
  transform-origin: bottom center;
  transition: filter 0.3s ease, transform 0.3s ease, opacity 0.2s ease;
  pointer-events: auto !important;
  cursor: pointer !important;
}

.feedback-growler-side.is-spotlight-on .feedback-growler-art {
  filter: drop-shadow(0 0 22px rgba(250, 204, 21, 0.65)) drop-shadow(0 16px 30px rgba(0, 0, 0, 0.85));
}

.feedback-growler-glow {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.35) 0%, transparent 72%);
  pointer-events: none !important;
  transition: background 0.4s ease, opacity 0.4s ease;
  z-index: 1;
}

.feedback-growler-side.is-spotlight-on .feedback-growler-glow {
  background: radial-gradient(circle, rgba(251, 191, 36, 0.5) 0%, transparent 75%);
}

.feedback-growler-shadow {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 125px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.75) 0%, transparent 75%);
  pointer-events: none !important;
  z-index: 1;
}

.feedback-growler-side.is-spotlight-on .feedback-growler-sing-badge {
  background: #f59e0b;
  color: #0f172a;
  border-color: #fbbf24;
  box-shadow: 0 0 18px rgba(245, 158, 11, 0.85);
  animation: growlerBadgePulse 1.8s infinite ease-in-out;
}

@keyframes growlerBadgePulse {
  0%, 100% { box-shadow: 0 0 14px rgba(245, 158, 11, 0.6); }
  50% { box-shadow: 0 0 24px rgba(245, 158, 11, 0.95); }
}

/* Unique Floating Musical Notes */
.feedback-growler-notes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  overflow: visible;
}

.feedback-note-symbol {
  position: absolute;
  bottom: 25px;
  font-size: 1.15rem;
  color: #34d399;
  text-shadow: 0 0 10px rgba(52, 211, 153, 0.8);
  animation: feedbackNoteRise 2.4s ease-out infinite;
  opacity: 0;
}

@keyframes feedbackNoteRise {
  0% {
    transform: translateY(0) scale(0.6) rotate(0deg);
    opacity: 0;
  }
  20% {
    opacity: 0.9;
    transform: translateY(-20px) scale(1.1) rotate(-10deg);
  }
  70% {
    opacity: 0.7;
    transform: translateY(-65px) scale(1) rotate(15deg);
  }
  100% {
    opacity: 0;
    transform: translateY(-110px) scale(0.8) rotate(-15deg);
  }
}

/* Unique Emotional State Animations */
/* 1. Proud & Belting (Score >= 88) */
.feedback-growler-stage.is-mood-proud .feedback-growler-art {
  animation: feedbackGrowlerBeltingAnim 2.2s ease-in-out infinite;
}
@keyframes feedbackGrowlerBeltingAnim {
  0%, 100% { transform: scale(1) rotate(0deg); }
  25% { transform: scale(1.04, 0.97) rotate(-2.5deg); }
  50% { transform: scale(0.98, 1.05) rotate(0deg) translateY(-8px); }
  75% { transform: scale(1.03, 0.98) rotate(2deg); }
}

/* 2. Happy & Dancing (Score 72 - 87) */
.feedback-growler-stage.is-mood-happy .feedback-growler-art {
  animation: feedbackGrowlerDancingAnim 1.6s ease-in-out infinite;
}
@keyframes feedbackGrowlerDancingAnim {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-10px) rotate(3deg) scaleY(1.04); }
}

/* 3. Thoughtful Walking (Score 52 - 71) */
.feedback-growler-stage.is-mood-attentive .feedback-growler-art {
  animation: feedbackGrowlerWalkingAnim 2.8s ease-in-out infinite;
}
@keyframes feedbackGrowlerWalkingAnim {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-5px) rotate(-1.5deg); }
}

/* 4. Disappointed Sitting (Score 32 - 51) */
.feedback-growler-stage.is-mood-disappointed .feedback-growler-art {
  animation: feedbackGrowlerSittingAnim 3.4s ease-in-out infinite;
}
@keyframes feedbackGrowlerSittingAnim {
  0%, 100% { transform: scale(1) translateY(0); }
  50% { transform: scale(0.98, 1.02) translateY(2px) rotate(1deg); }
}

/* 5. Depressed Creeping (Score < 32) */
.feedback-growler-stage.is-mood-depressed .feedback-growler-art {
  animation: feedbackGrowlerCreepingAnim 2.6s ease-in-out infinite;
}
@keyframes feedbackGrowlerCreepingAnim {
  0%, 100% { transform: scale(0.96) translateY(3px) rotate(0deg); }
  50% { transform: scale(0.94) translateY(6px) rotate(-2deg); }
}

/* Robert Growler Center Screen Celebration Modal (3-second presentation) */
.feedback-celebration-modal {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999999;
  pointer-events: auto;
  transition: opacity 0.6s ease;
}

.feedback-celebration-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.feedback-celebration-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  animation: feedbackCelebrationPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes feedbackCelebrationPop {
  0% { opacity: 0; transform: scale(0.65) translateY(30px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

.feedback-celebration-ring {
  position: relative;
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.15rem;
}

.feedback-celebration-glow {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.5) 0%, rgba(251, 191, 36, 0.25) 50%, transparent 75%);
  animation: feedbackGlowPulse 2s infinite alternate;
}

@keyframes feedbackGlowPulse {
  0% { transform: scale(0.85); opacity: 0.6; }
  100% { transform: scale(1.15); opacity: 1; }
}

.feedback-celebration-img {
  position: relative;
  z-index: 2;
  width: 140px;
  height: 140px;
  object-fit: contain;
  filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.8));
  animation: feedbackGrowlerBeltingAnim 2s ease-in-out infinite;
}

.feedback-celebration-bubble {
  position: relative;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(52, 211, 153, 0.6);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.65), 0 0 25px rgba(16, 185, 129, 0.35);
  border-radius: 1.25rem;
  padding: 1rem 2.25rem;
  max-width: 380px;
}

.feedback-celebration-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: #94a3b8;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.feedback-celebration-title i {
  color: #34d399;
}

.feedback-celebration-heading {
  font-size: 1.85rem;
  font-weight: 800;
  color: #34d399;
  margin: 0.35rem 0 0.15rem;
  letter-spacing: -0.02em;
}

.feedback-celebration-sub {
  font-size: 0.95rem;
  color: #e2e8f0;
  margin: 0;
  font-style: italic;
}

/* Feedback alert / toast */
.feedback-alert-box {
  margin-top: 0.65rem;
  padding: 0.65rem 1rem;
  border-radius: 0.65rem;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.4;
  animation: fadeIn 0.3s ease;
}

.feedback-alert-box.is-success {
  background: rgba(16, 185, 129, 0.18);
  border: 1px solid rgba(52, 211, 153, 0.45);
  color: #6ee7b7;
}

.feedback-alert-box.is-error {
  background: rgba(239, 68, 68, 0.18);
  border: 1px solid rgba(248, 113, 113, 0.45);
  color: #fca5a5;
}

/* Responsive Breakpoints */
@media (max-width: 860px) {
  .feedback-grid {
    flex-direction: column;
    gap: 1.25rem;
    max-width: 500px;
  }
  .feedback-form-card {
    max-width: 100%;
    width: 100%;
    padding: 1rem 1.15rem;
  }
  .feedback-growler-side {
    flex-direction: column;
    max-width: 100%;
    width: 100%;
    gap: 0.75rem;
    align-items: center;
    justify-content: center;
  }
  .feedback-growler-stage {
    width: 160px;
    height: 180px;
    flex-shrink: 0;
  }
  .feedback-growler-figure {
    width: 150px;
    height: 170px;
  }
}

@media (max-width: 540px) {
  .feedback-submit-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .btn-feedback-submit {
    width: 100%;
  }
  .feedback-growler-side {
    flex-direction: column;
  }
}


/* ==========================================================================
   Content Issue Reporting System (Privacy, Accuracy, Other)
   ========================================================================== */

/* Report Trigger in Readers (under Thoughts Card) */
.notes-report-card {
  display: flex;
  width: 100%;
  margin-top: 0.5rem;
}

.notes-report-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.52rem 0.68rem;
  background: rgba(13, 20, 36, 0.65);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: var(--radius-md, 16px);
  color: #cbd5e1;
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: left;
}

.notes-report-btn:hover {
  background: rgba(18, 28, 48, 0.85);
  border-color: rgba(239, 68, 68, 0.45);
  color: #fca5a5;
  transform: translateY(-2px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.35), 0 0 14px rgba(239, 68, 68, 0.2);
}

.notes-report-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
  font-size: 0.72rem;
  flex-shrink: 0;
  border: 1px solid rgba(239, 68, 68, 0.25);
  transition: transform 0.22s ease, background 0.22s ease;
}

.notes-report-btn:hover .notes-report-icon {
  transform: scale(1.1);
  background: rgba(239, 68, 68, 0.22);
  color: #fca5a5;
}

.notes-report-text {
  flex: 1 1 auto;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* Light theme for reader report button */
[data-theme="light"] .notes-report-btn {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(203, 213, 225, 0.6);
  color: #475569;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .notes-report-btn:hover {
  background: #ffffff;
  border-color: rgba(239, 68, 68, 0.5);
  color: #dc2626;
  box-shadow: 0 8px 20px rgba(239, 68, 68, 0.12);
}

/* Report & Rating Triggers in Photo / Video Lightbox & Article Readers (Moved down to bottom of column) */
.photo-side-rating-trigger,
.video-side-rating-trigger,
.notes-rating-card {
  display: flex;
  align-items: center;
  margin-top: auto !important; /* Pushes to bottom right above Report */
  padding-top: 0.65rem;
  width: 100%;
}

.photo-side-report-trigger,
.video-side-report-trigger,
.notes-report-card {
  display: flex;
  align-items: center;
  margin-top: 0.35rem !important;
  padding-top: 0 !important;
  width: 100%;
}

@media (max-width: 900px) {
  .photo-side-rating-trigger,
  .video-side-rating-trigger,
  .notes-rating-card {
    margin-top: 0.5rem !important;
    padding-top: 0;
  }
  .photo-side-report-trigger,
  .video-side-report-trigger,
  .notes-report-card {
    margin-top: 0.35rem !important;
    padding-top: 0;
  }
}

.photo-side-report-btn,
.video-side-report-btn {
  background: rgba(13, 20, 36, 0.78);
  border: 1px solid rgba(148, 163, 184, 0.25);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: #cbd5e1;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.photo-side-report-btn:hover,
.video-side-report-btn:hover {
  background: rgba(239, 68, 68, 0.18);
  border-color: rgba(239, 68, 68, 0.55);
  color: #fca5a5;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 18px rgba(239, 68, 68, 0.25);
}

.photo-side-report-btn .photo-side-report-icon,
.video-side-report-btn .video-side-report-icon {
  color: #f87171;
  font-size: 0.82rem;
  display: flex;
  align-items: center;
}

/* ===================================================================
   AUTHENTIC MOVIE-STYLE AUDIENCE RATING BADGE (COMPACT & EXPANDABLE)
   =================================================================== */
.video-side-rating-trigger,
.photo-side-rating-trigger,
.notes-rating-card {
  position: relative;
  z-index: 40;
}

.sb-movie-rating-badge {
  position: relative;
  display: flex;
  flex-direction: column;
  outline: none;
  width: 100%;
}

.sb-movie-rating-badge .movie-rating-frame {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.28rem 0.6rem;
  border-radius: var(--radius-md, 16px);
  background: rgba(13, 20, 36, 0.92);
  border: 1.5px solid rgba(148, 163, 184, 0.32);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  width: 100%;
  box-sizing: border-box;
}

.sb-movie-rating-badge:hover .movie-rating-frame,
.sb-movie-rating-badge:focus-visible .movie-rating-frame {
  transform: translateY(-1px);
}

/* Movie Rating Box (Classic MPAA-style border box) */
.sb-movie-rating-badge .movie-rating-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 22px;
  padding: 0 5px;
  border: 1.5px solid #ffffff;
  border-radius: 4px;
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.35);
  background: rgba(0, 0, 0, 0.35);
  flex-shrink: 0;
}

.sb-movie-rating-badge .movie-rating-code {
  font-family: var(--font-heading, sans-serif);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  color: #ffffff;
  line-height: 1;
}

.sb-movie-rating-badge .movie-rating-meta {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.sb-movie-rating-badge .movie-rating-kicker {
  font-family: var(--font-mono, monospace);
  font-size: 0.48rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #94a3b8;
  line-height: 1;
}

.sb-movie-rating-badge .movie-rating-title {
  font-family: var(--font-heading, sans-serif);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ffffff;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sb-movie-rating-badge .movie-rating-info-icon {
  font-size: 0.68rem;
  color: #64748b;
  margin-left: auto;
  transition: color 0.2s ease, transform 0.2s ease;
  flex-shrink: 0;
}

.sb-movie-rating-badge:hover .movie-rating-info-icon {
  color: #94a3b8;
  transform: scale(1.1);
}

/* Tier Color Variations */
/* 1. Public (G) - Emerald */
.sb-movie-rating-badge.tier-public .movie-rating-frame {
  border-color: rgba(16, 185, 129, 0.45);
}
.sb-movie-rating-badge.tier-public .movie-rating-box {
  border-color: #10b981;
}
.sb-movie-rating-badge.tier-public .movie-rating-code {
  color: #34d399;
}
.sb-movie-rating-badge.tier-public .movie-rating-title {
  color: #6ee7b7;
}
.sb-movie-rating-badge.tier-public:hover .movie-rating-frame {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), 0 0 14px rgba(16, 185, 129, 0.35);
}

/* 2. Friends (PG) - Cyan / Sky */
.sb-movie-rating-badge.tier-friends .movie-rating-frame {
  border-color: rgba(14, 165, 233, 0.45);
}
.sb-movie-rating-badge.tier-friends .movie-rating-box {
  border-color: #0ea5e9;
}
.sb-movie-rating-badge.tier-friends .movie-rating-code {
  color: #38bdf8;
}
.sb-movie-rating-badge.tier-friends .movie-rating-title {
  color: #7dd3fc;
}
.sb-movie-rating-badge.tier-friends:hover .movie-rating-frame {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), 0 0 14px rgba(14, 165, 233, 0.35);
}

/* 3. Family (FAM) - Purple / Amethyst */
.sb-movie-rating-badge.tier-family .movie-rating-frame {
  border-color: rgba(168, 85, 247, 0.45);
}
.sb-movie-rating-badge.tier-family .movie-rating-box {
  border-color: #a855f7;
}
.sb-movie-rating-badge.tier-family .movie-rating-code {
  color: #c084fc;
}
.sb-movie-rating-badge.tier-family .movie-rating-title {
  color: #d8b4fe;
}
.sb-movie-rating-badge.tier-family:hover .movie-rating-frame {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), 0 0 14px rgba(16, 185, 129, 0.35);
}

/* 4. Private (R) - Rose / Crimson */
.sb-movie-rating-badge.tier-private .movie-rating-frame {
  border-color: rgba(244, 63, 94, 0.45);
}
.sb-movie-rating-badge.tier-private .movie-rating-box {
  border-color: #f43f5e;
}
.sb-movie-rating-badge.tier-private .movie-rating-code {
  color: #fb7185;
}
.sb-movie-rating-badge.tier-private .movie-rating-title {
  color: #fda4af;
}
.sb-movie-rating-badge.tier-private:hover .movie-rating-frame {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), 0 0 14px rgba(244, 63, 94, 0.35);
}

/* ===================================================================
   COMPACT HOVER EXPANSION (Audience Detail Expands Upward)
   =================================================================== */
.sb-movie-rating-popover {
  position: absolute;
  bottom: calc(100% + 7px);
  top: auto;
  left: 0;
  width: max-content;
  max-width: 260px;
  background: rgba(11, 17, 32, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  padding: 0.55rem 0.75rem;
  box-shadow: 0 12px 30px -6px rgba(0, 0, 0, 0.75), 0 0 16px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px) scale(0.96);
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.2s;
  z-index: 100;
}

.sb-movie-rating-popover .movie-popover-header,
.sb-movie-rating-popover .movie-popover-audience-breakdown,
.sb-movie-rating-popover .movie-popover-admin {
  display: none !important;
}

.photo-lightbox-thoughts-col .sb-movie-rating-popover {
  left: auto;
  right: 0;
}

@media (max-width: 1200px) {
  .video-lightbox-thoughts-col .sb-movie-rating-popover,
  .blog-reader-notes-col .sb-movie-rating-popover {
    left: auto;
    right: 0;
  }
}

/* Show smoothly on Hover or Focus */
.sb-movie-rating-badge:hover .sb-movie-rating-popover,
.sb-movie-rating-badge:focus-within .sb-movie-rating-popover,
.sb-movie-rating-badge.is-popover-open .sb-movie-rating-popover {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.movie-popover-header {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.movie-popover-badge-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 24px;
  padding: 0 5px;
  border: 1.5px solid currentColor;
  border-radius: 4px;
  font-family: var(--font-heading, sans-serif);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  background: rgba(0, 0, 0, 0.45);
  flex-shrink: 0;
}

.sb-movie-rating-badge.tier-public .movie-popover-badge-box { border-color: #10b981; color: #34d399; }
.sb-movie-rating-badge.tier-friends .movie-popover-badge-box { border-color: #0ea5e9; color: #38bdf8; }
.sb-movie-rating-badge.tier-family .movie-popover-badge-box { border-color: #a855f7; color: #c084fc; }
.sb-movie-rating-badge.tier-private .movie-popover-badge-box { border-color: #f43f5e; color: #fb7185; }

.movie-popover-titles {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.movie-popover-titles .popover-kicker {
  font-family: var(--font-mono, monospace);
  font-size: 0.48rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #94a3b8;
  text-transform: uppercase;
  line-height: 1;
}

.movie-popover-titles .popover-heading {
  font-family: var(--font-heading, sans-serif);
  font-size: 0.78rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.15;
}

.movie-popover-desc {
  font-size: 0.74rem;
  line-height: 1.42;
  color: #cbd5e1;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

.movie-popover-audience-breakdown {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.breakdown-label {
  font-family: var(--font-mono, monospace);
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #64748b;
  text-transform: uppercase;
  margin-bottom: 0.1rem;
}

.breakdown-grid {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.breakdown-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.25rem 0.4rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.72rem;
}

.breakdown-row .breakdown-icon {
  width: 14px;
  font-size: 0.68rem;
  color: #94a3b8;
  margin-right: 0.35rem;
}

.breakdown-row .breakdown-name {
  font-weight: 600;
  color: #e2e8f0;
  flex: 1;
}

.breakdown-status {
  font-family: var(--font-mono, monospace);
  font-size: 0.65rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

.breakdown-status.is-allowed {
  color: #34d399;
}

.breakdown-status.is-restricted {
  color: #f87171;
}

/* Compact Report Panel Dialog & Backdrop (Placed Next to Content) */
.sb-report-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2000000 !important;
  background: transparent;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.sb-report-modal-backdrop.is-active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  background: rgba(3, 7, 18, 0.42) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
}

.sb-report-modal-dialog {
  position: relative;
  width: 330px;
  max-width: calc(100vw - 2rem);
  background: rgba(13, 20, 36, 0.96);
  border: 1px solid rgba(239, 68, 68, 0.45);
  border-radius: 16px;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.75), 0 0 25px rgba(239, 68, 68, 0.18);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  padding: 1rem 1.15rem;
  color: #f1f5f9;
  transform: scale(0.95) translateY(-6px);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
  box-sizing: border-box;
}

.sb-report-modal-backdrop.is-active .sb-report-modal-dialog {
  transform: scale(1) translateY(0);
}

.sb-report-close-btn {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.18s ease;
  font-size: 0.75rem;
}

.sb-report-close-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

.sb-report-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
  padding-right: 1.5rem;
}

.sb-report-icon-badge {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(239, 68, 68, 0.18);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #f87171;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  flex-shrink: 0;
}

.sb-report-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.sb-report-subtitle {
  margin: 0.15rem 0 0 0;
  font-size: 0.74rem;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

.sb-report-section {
  margin-bottom: 0.55rem;
}

/* Compact Segmented Pills */
.sb-report-options-pills {
  display: flex;
  gap: 0.35rem;
  width: 100%;
}

.sb-report-pill-card {
  flex: 1 1 0;
  cursor: pointer;
  margin: 0;
  user-select: none;
}

.sb-report-pill-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.sb-report-pill-body {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.42rem 0.3rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #94a3b8;
  transition: all 0.18s ease;
  white-space: nowrap;
}

.sb-report-pill-card input[type="radio"]:checked + .sb-report-pill-body {
  background: rgba(239, 68, 68, 0.22);
  border-color: rgba(239, 68, 68, 0.6);
  color: #ffffff;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.25);
}

.sb-report-pill-body i {
  font-size: 0.75rem;
}

.sb-report-input-wrap {
  position: relative;
}

.sb-report-textarea {
  width: 100%;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9px;
  padding: 0.45rem 0.6rem;
  color: #f8fafc;
  font-family: inherit;
  font-size: 0.8rem;
  line-height: 1.35;
  resize: vertical;
  min-height: 48px;
  max-height: 120px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sb-report-textarea:focus,
.sb-report-input:focus {
  border-color: rgba(239, 68, 68, 0.55);
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.25);
}

.sb-report-counter-wrap {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.2rem;
}

.sb-report-counter {
  font-size: 0.68rem;
  color: #64748b;
  font-family: var(--font-mono, monospace);
}

.sb-report-input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9px;
  padding: 0.4rem 0.6rem;
  color: #f8fafc;
  font-family: inherit;
  font-size: 0.78rem;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sb-report-alert {
  margin-top: 0.5rem;
  padding: 0.45rem 0.65rem;
  border-radius: 8px;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #fca5a5;
  font-size: 0.74rem;
  line-height: 1.38;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.sb-report-alert.is-shaking {
  animation: sbReportShake 0.35s ease-in-out;
}

@keyframes sbReportShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}

.sb-report-textarea.is-invalid,
.sb-report-input.is-invalid {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.25) !important;
}

.sb-report-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.65rem;
  padding-top: 0.55rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.sb-report-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.42rem 0.85rem;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
  border: none;
}

.sb-report-cancel-btn {
  background: rgba(255, 255, 255, 0.06);
  color: #94a3b8;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.sb-report-cancel-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.sb-report-submit-btn {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35);
}

.sb-report-submit-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
  transform: translateY(-1px);
}

.sb-report-submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.sb-report-success-state {
  text-align: center;
  padding: 1.25rem 0.5rem;
}

.sb-report-success-icon {
  font-size: 2.2rem;
  color: #34d399;
  margin-bottom: 0.5rem;
  animation: sbReportPop 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.sb-report-success-title {
  margin: 0 0 0.35rem 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff;
}

.sb-report-success-desc {
  margin: 0 0 1rem 0;
  font-size: 0.82rem;
  color: #94a3b8;
  line-height: 1.4;
}

.sb-report-done-btn {
  background: rgba(52, 211, 153, 0.18);
  border: 1px solid rgba(52, 211, 153, 0.4);
  color: #34d399;
  padding: 0.45rem 1.2rem;
}

.sb-report-done-btn:hover {
  background: rgba(52, 211, 153, 0.28);
  color: #ffffff;
}

@keyframes sbReportPop {
  0% { transform: scale(0.5); opacity: 0; }
  70% { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}

@media (max-width: 768px) {
  .sb-report-modal-backdrop {
    justify-content: center;
    align-items: flex-end;
    padding: 1rem;
  }
  .sb-report-modal-dialog {
    width: 100%;
    max-width: 100%;
    margin-bottom: 0.5rem;
  }
}