/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Disable double-tap zoom on mobile (preserves pinch zoom for accessibility) */
html {
  touch-action: manipulation;
}

/* Native Dialog Styles */
dialog {
  border: none;
  padding: 0;
  max-width: 90vw;
  margin: auto;
  position: fixed;
  inset: 0;
  height: fit-content;
  width: fit-content;
}

dialog[open] {
  display: flex;
  animation: dialog-fade-in 0.2s ease-out;
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
  animation: backdrop-fade-in 0.2s ease-out;
}

@keyframes dialog-fade-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes backdrop-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Infinite scroll: staggered fade-in for new cards (GPU-composited) */
@keyframes feed-card-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.feed-card-enter {
  animation: feed-card-in 0.3s ease-out both;
}

/* Feed filter pills */
.feed-filter-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.5rem 1.25rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  border: 1.5px solid #d5c4a1;
  background: rgba(255, 255, 255, 0.7);
  color: var(--brown-light, #A0826D);
  cursor: pointer;
  transition: all 0.18s ease;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

@media (min-width: 640px) {
  .feed-filter-pill {
    padding: 0.55rem 1.5rem;
    font-size: 0.9375rem;
    gap: 0.4rem;
  }
}

.feed-filter-pill:hover {
  border-color: var(--brown-lighter, #D2691E);
  color: var(--brown-medium, #8B4513);
  background: rgba(255, 248, 230, 0.9);
}

.feed-filter-pill--active {
  background: var(--brown-gradient);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(90, 50, 16, 0.3);
}

.feed-filter-pill--active:hover {
  background: var(--brown-gradient-hover);
  color: #fff;
  border-color: transparent;
}

.feed-filter-bar {
  transition: background 0.2s ease, box-shadow 0.2s ease, padding 0.2s ease;
}

.feed-filter-stuck {
  background: rgba(255, 253, 247, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 12px rgba(90, 50, 16, 0.1), 0 1px 0 rgba(213, 196, 161, 0.4);
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
  margin: 0;
}

@media (min-width: 640px) {
  .feed-filter-stuck {
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
  }
}

/* Sticker promo banner (next to gender filter) */
.sticker-promo-banner {
  position: absolute;
  right: 0;
  top: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 10px 5px;
  background: linear-gradient(145deg, #fffbeb, #fef3c7);
  border: 1.5px solid rgba(217, 119, 6, 0.3);
  border-radius: 12px;
  text-decoration: none;
  cursor: pointer;
  z-index: 10;
  animation: sticker-float 3s ease-in-out infinite;
  transition: box-shadow 0.2s ease;
}

.sticker-promo-banner:hover {
  animation: none;
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 4px 16px rgba(217, 119, 6, 0.3);
}

.sticker-promo-badge {
  position: absolute;
  top: -11px;
  right: -6px;
  font-size: 8px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  padding: 1px 5px;
  border-radius: 6px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.45), 0 0 0 1px rgba(255,255,255,0.7);
  animation: badge-pulse 2s ease-in-out infinite;
}

.sticker-promo-img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  border-radius: 6px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
  transform: rotate(-3deg);
  transition: transform 0.2s ease;
}

.sticker-promo-banner:hover .sticker-promo-img {
  transform: rotate(0deg) scale(1.1);
}

.sticker-promo-text {
  font-size: 9px;
  font-weight: 700;
  color: #92400e;
  line-height: 1;
  white-space: nowrap;
}

@keyframes sticker-float {
  0%, 100% { transform: translateY(-50%); }
  50% { transform: translateY(calc(-50% - 3px)); }
}

@keyframes badge-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

/* Sticker promo: mobile compact */
@media (max-width: 479px) {
  .sticker-promo-banner {
    padding: 4px 6px 3px;
    border-radius: 10px;
    right: -2px;
  }
  .sticker-promo-img {
    width: 26px;
    height: 26px;
  }
  .sticker-promo-text {
    font-size: 8px;
  }
  .sticker-promo-badge {
    font-size: 7px;
    padding: 0.5px 4px;
    top: -10px;
    right: -5px;
  }
}

@media (min-width: 640px) {
  .sticker-promo-img {
    width: 40px;
    height: 40px;
  }
  .sticker-promo-text {
    font-size: 10px;
  }
  .sticker-promo-badge {
    font-size: 9px;
    padding: 1.5px 6px;
  }
}

/* Sticker promo — hero section (left-bottom, larger) */
.sticker-promo-hero {
  position: absolute;
  left: 0.5rem;
  bottom: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 12px 6px;
  background: linear-gradient(145deg, #fffbeb, #fef3c7);
  border: 1.5px solid rgba(217, 119, 6, 0.35);
  border-radius: 14px;
  text-decoration: none;
  cursor: pointer;
  z-index: 20;
  animation: sticker-float-hero 3s ease-in-out infinite;
  transition: box-shadow 0.2s ease;
}

.sticker-promo-hero:hover {
  animation: none;
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(217, 119, 6, 0.3);
}

.sticker-promo-hero-img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 8px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.12));
  transform: rotate(-3deg);
  transition: transform 0.2s ease;
}

.sticker-promo-hero:hover .sticker-promo-hero-img {
  transform: rotate(0deg) scale(1.1);
}

.sticker-promo-hero-text {
  font-size: 10px;
  font-weight: 700;
  color: #92400e;
  line-height: 1;
  white-space: nowrap;
}

@keyframes sticker-float-hero {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@media (min-width: 640px) {
  .sticker-promo-hero {
    left: 0.75rem;
    bottom: 0.75rem;
    padding: 10px 14px 8px;
    border-radius: 16px;
  }
  .sticker-promo-hero-img {
    width: 52px;
    height: 52px;
  }
  .sticker-promo-hero-text {
    font-size: 11px;
  }
}

@media (min-width: 768px) {
  .sticker-promo-hero-img {
    width: 60px;
    height: 60px;
  }
  .sticker-promo-hero-text {
    font-size: 12px;
  }
}

/* Prevent horizontal scrollbar from 100vw elements */
html, body {
  overflow-x: clip;
}

/* ==================== Flash Toast ==================== */
#flash-container {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 90%;
  max-width: 420px;
  pointer-events: none;
}

#flash {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.flash-toast {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  pointer-events: auto;
}

.flash-toast-success {
  background: #065f46;
  color: #d1fae5;
}

.flash-toast-error {
  background: #991b1b;
  color: #fee2e2;
}

.flash-toast-icon {
  flex-shrink: 0;
  font-size: 16px;
}

.flash-toast p {
  flex: 1;
  margin: 0;
  line-height: 1.4;
}

.flash-toast-close {
  flex-shrink: 0;
  background: none;
  border: none;
  color: inherit;
  opacity: 0.6;
  font-size: 18px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}

.flash-toast-close:hover {
  opacity: 1;
}

@keyframes flashSlideIn {
  from { opacity: 0; transform: translateY(-1rem); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes flashSlideOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-1rem); }
}

/* ==================== Locale Suggestion Banner ==================== */
.locale-suggestion-banner {
  background: linear-gradient(135deg, #FFF8E1 0%, #FFF3CD 100%);
  border-bottom: 1px solid #F59E0B33;
  overflow: hidden;
}

@keyframes localeBannerSlideDown {
  from { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; }
  to { opacity: 1; max-height: 80px; padding-top: 0.5rem; padding-bottom: 0.5rem; }
}

@keyframes localeBannerSlideUp {
  from { opacity: 1; max-height: 80px; }
  to { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; overflow: hidden; }
}

/* ==================== Attendance Toast ==================== */
@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes toastSlideOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(120%);
  }
}

.attendance-toast-container {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 9999;
  display: flex;
  flex-direction: column-reverse;
  gap: 0.5rem;
  pointer-events: none;
}

.attendance-toast-item {
  pointer-events: auto;
  max-width: 360px;
  width: 100%;
}

@media (max-width: 640px) {
  .attendance-toast-container {
    right: 0.5rem;
    bottom: 0.5rem;
    left: 0.5rem;
  }
  .attendance-toast-item {
    max-width: none;
  }
}

/* ==================== Hero Toilet Section ==================== */
.hero-toilet-section {
  background: #f2f0ed;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.hero-tile-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 70% at 50% 55%, rgba(245, 222, 179, 0.5) 0%, transparent 70%),
    radial-gradient(ellipse 45% 50% at 50% 50%, rgba(255, 248, 235, 0.7) 0%, transparent 60%),
    linear-gradient(180deg, #f5f0ea 0%, #f2f0ed 40%, #ede8e2 100%);
  z-index: 0;
}

.hero-tile-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 35% 40% at 50% 50%, rgba(255, 255, 255, 0.4) 0%, transparent 70%);
  animation: glowPulse 4s ease-in-out infinite alternate;
  pointer-events: none;
}

.hero-tile-shine {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(210, 180, 140, 0.15) 0%, transparent 60%);
  pointer-events: none;
}

.hero-tile-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 45% at 50% 45%, rgba(192, 160, 128, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

@keyframes glowPulse {
  0% { opacity: 0.6; }
  100% { opacity: 1; }
}

/* ---- Poop Type Rotation ---- */
.hero-poop-type {
  opacity: 0;
  animation: poopRotate 15s infinite;
}
.hero-poop-1 { animation-delay: 0s; }
.hero-poop-2 { animation-delay: 3s; }
.hero-poop-3 { animation-delay: 6s; }
.hero-poop-4 { animation-delay: 9s; }
.hero-poop-5 { animation-delay: 12s; }

@keyframes poopRotate {
  0% { opacity: 0; }
  3% { opacity: 1; }
  17% { opacity: 1; }
  20% { opacity: 0; }
  100% { opacity: 0; }
}

/* ---- Feature Badges Marquee ---- */
.hero-marquee-strip {
  position: relative;
  z-index: 10;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid rgba(160, 103, 75, 0.15);
  border-bottom: 1px solid rgba(160, 103, 75, 0.15);
  padding: 10px 0;
}

.hero-marquee-track {
  display: flex;
  align-items: center;
  gap: 0;
  width: max-content;
  animation: marqueeScroll 30s linear infinite;
}

.hero-marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: #3E2723;
  white-space: nowrap;
  letter-spacing: 0.15px;
  line-height: 1;
}

.hero-marquee-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: #8B4513;
}

.hero-marquee-sep {
  color: #A0674B;
  opacity: 0.4;
  font-size: 16px;
  padding: 0 4px;
}

@keyframes marqueeScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-33.333%); }
}

@media (min-width: 640px) {
  .hero-marquee-strip { padding: 12px 0; }
  .hero-marquee-item { font-size: 14px; gap: 6px; padding: 0 12px; }
  .hero-marquee-icon { width: 16px; height: 16px; }
}

@media (min-width: 1024px) {
  .hero-marquee-strip { padding: 14px 0; }
  .hero-marquee-item { font-size: 15px; padding: 0 16px; }
  .hero-marquee-icon { width: 18px; height: 18px; }
}

/* ---- Toilet Core ---- */
.hero-toilet-wrapper {
  position: relative;
  display: inline-block;
  animation: toiletFadeIn 0.8s ease-out;
}

.hero-toilet-svg-el {
  display: block;
  width: 280px;
  height: auto;
  filter: drop-shadow(0 16px 40px rgba(0, 0, 0, 0.18));
}

/* ---- Lid Overlay ---- */
.hero-lid-overlay {
  position: absolute;
  top: 21%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 65%;
  text-align: center;
  pointer-events: none;
  z-index: 2;
}

.hero-lid-title {
  font-size: 30px;
  font-weight: 800;
  color: #2d2d2d;
  line-height: 1.25;
  margin-bottom: 6px;
  text-shadow: 0 1px 3px rgba(255,255,255,0.6);
  letter-spacing: -0.3px;
}

.hero-lid-title span {
  color: #c47a2a;
}

/* ---- Bowl Overlay ---- */
.hero-bowl-overlay {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  text-align: center;
}

.hero-btn-wrapper {
  position: relative;
  display: inline-block;
}

.hero-mini-label {
  position: absolute;
  top: -10px;
  right: -10px;
  font-size: 9px;
  font-weight: 700;
  background: linear-gradient(135deg, #FF6B35 0%, #FF8C00 100%);
  color: #fff;
  padding: 3px 8px;
  border-radius: 9999px;
  box-shadow: 0 3px 10px rgba(255, 107, 53, 0.5);
  animation: miniLabelBounce 2s ease-in-out infinite;
  white-space: nowrap;
  letter-spacing: 0.5px;
  z-index: 10;
  border: 2px solid rgba(255,255,255,0.3);
  pointer-events: none;
}

@keyframes miniLabelBounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-3px) scale(1.08); }
}

.hero-poop-btn {
  background: linear-gradient(135deg, #8B4513 0%, #D2691E 100%);
  box-shadow: 0 4px 16px rgba(139, 69, 19, 0.5);
  position: relative;
  overflow: hidden;
  padding: 10px 22px;
  font-size: 13px;
  white-space: nowrap;
}

.hero-poop-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  transform: translate(-50%, -50%);
  transition: width 0.5s, height 0.5s;
}

.hero-poop-btn:hover {
  background: linear-gradient(135deg, #6D3410 0%, #B85B18 100%);
  box-shadow: 0 8px 28px rgba(139, 69, 19, 0.6);
}

.hero-poop-btn:hover::before {
  width: 300px;
  height: 300px;
}

.hero-poop-btn > * {
  position: relative;
  z-index: 1;
}

@keyframes toiletFadeIn {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ---- xs (< 400px) ---- */
@media (max-width: 399px) {
  .hero-toilet-svg-el {
    width: 160px;
  }
  .hero-lid-title {
    font-size: 14px;
  }
  .hero-poop-btn {
    padding: 10px 20px;
    font-size: 12px;
    box-shadow: 0 6px 20px rgba(139, 69, 19, 0.6);
  }
  .hero-mini-label {
    font-size: 8px;
    padding: 3px 7px;
    top: -9px;
    right: -6px;
  }
}

/* ---- small mobile (400-639px) ---- */
@media (min-width: 400px) and (max-width: 639px) {
  .hero-toilet-svg-el {
    width: 220px;
  }
  .hero-lid-title {
    font-size: 18px;
  }
  .hero-poop-btn {
    padding: 12px 24px;
    font-size: 14px;
    box-shadow: 0 6px 20px rgba(139, 69, 19, 0.6);
  }
  .hero-mini-label {
    font-size: 8px;
    padding: 3px 8px;
    top: -9px;
    right: -8px;
  }
}

/* ---- sm (640px) ---- */
@media (min-width: 640px) {
  .hero-toilet-svg-el {
    width: 280px;
  }

  .hero-lid-title {
    font-size: 26px;
    margin-bottom: 7px;
  }

  .hero-poop-btn {
    padding: 12px 26px;
    font-size: 15px;
  }

  .hero-mini-label {
    font-size: 10px;
    padding: 4px 10px;
    top: -11px;
    right: -11px;
  }

}

/* ---- md (768px) ---- */
@media (min-width: 768px) {
  .hero-toilet-svg-el {
    width: 300px;
  }

  .hero-lid-title {
    font-size: 30px;
    margin-bottom: 8px;
  }

  .hero-poop-btn {
    padding: 14px 30px;
    font-size: 17px;
  }

  .hero-mini-label {
    font-size: 10px;
    padding: 4px 10px;
  }

}

/* ---- lg (1024px) ---- */
@media (min-width: 1024px) {
  .hero-toilet-svg-el {
    width: 380px;
  }

  .hero-lid-title {
    font-size: 34px;
    margin-bottom: 10px;
  }

  .hero-poop-btn {
    padding: 16px 34px;
    font-size: 20px;
  }

  .hero-mini-label {
    font-size: 11px;
    padding: 5px 12px;
    top: -12px;
    right: -12px;
  }

}

/* ---- xl (1280px) ---- */
@media (min-width: 1280px) {
  .hero-toilet-svg-el {
    width: 400px;
  }

}

/* ==================== BrownFeed Design System ==================== */
:root {
  --brown-dark: #5D4037;
  --brown-medium: #8B4513;
  --brown-lighter: #D2691E;
  --brown-lightest: #F4A460;
  --cream: #FFF8DC;
  --cream-light: #FFFAF0;
  --accent-red: #FF6B6B;
  --accent-green: #51CF66;
}

/* ==================== Site Stats Section ==================== */
.site-stats-section {
  padding: 0.5rem 0 1rem 0;
}

.site-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.site-stat-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(160, 103, 75, 0.15);
  border-radius: 12px;
  padding: 0.75rem 0.5rem;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.site-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(93, 64, 55, 0.1);
}

.site-stat-icon {
  color: var(--brown-lighter);
  width: 20px;
  height: 20px;
  margin: 0 auto 0.25rem;
}

.site-stat-icon svg {
  width: 100%;
  height: 100%;
}

.site-stat-value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
}

.site-stat-number {
  color: var(--brown-dark);
  font-weight: 800;
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.site-stat-unit {
  color: var(--brown-medium);
  font-size: 0.65rem;
  font-weight: 600;
}

.site-stat-label {
  color: var(--brown-medium);
  font-size: 0.65rem;
  font-weight: 500;
  margin-top: 0.15rem;
  opacity: 0.8;
}

/* Stats responsive - sm */
@media (min-width: 640px) {
  .site-stats-grid {
    gap: 0.75rem;
  }
  .site-stat-card {
    padding: 1rem 0.75rem;
  }
  .site-stat-icon {
    width: 24px;
    height: 24px;
    margin-bottom: 0.35rem;
  }
  .site-stat-number {
    font-size: 1.5rem;
  }
  .site-stat-unit {
    font-size: 0.7rem;
  }
  .site-stat-label {
    font-size: 0.7rem;
  }
}

/* Stats responsive - lg */
@media (min-width: 1024px) {
  .site-stats-grid {
    gap: 1rem;
  }
  .site-stat-card {
    padding: 1.25rem 1rem;
  }
  .site-stat-number {
    font-size: 1.75rem;
  }
  .site-stat-unit {
    font-size: 0.75rem;
  }
  .site-stat-label {
    font-size: 0.75rem;
  }
}

/* Stats reduced motion */
@media (prefers-reduced-motion: reduce) {
  .site-stat-card {
    transition: none;
  }
}

/* ==================== Vote Buttons (Pill Style) ==================== */
.vote-section {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 1.25rem 1rem;
  border-top: 1px solid #F3F4F6;
}

.vote-section-inner {
  display: flex;
  gap: 0.75rem;
}

.vote-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
}

/* Mobile-responsive vote pills */
@media (max-width: 640px) {
  .vote-pill {
    gap: 0.2rem;
    padding: 0.3rem 0.5rem;
    font-size: 11px;
  }
  .vote-pill-icon {
    width: 12px;
    height: 12px;
  }
}

@media (max-width: 374px) {
  .vote-pill {
    gap: 0.15rem;
    padding: 0.25rem 0.375rem;
    font-size: 10px;
  }
  .vote-pill-icon {
    width: 10px;
    height: 10px;
  }
  .vote-pill-share .vote-pill-icon {
    display: none;
  }
}

.vote-pill-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.vote-pill-label {
  font-weight: 600;
}

.vote-pill-count {
  font-weight: 700;
  min-width: 16px;
  text-align: center;
}

.vote-pill-up {
  background: #FEF3C7;
  border-color: #FDE68A;
  color: #92400E;
}

.vote-pill-up:hover {
  background: #FDE68A;
  border-color: #FBBF24;
  box-shadow: 0 2px 8px rgba(251, 191, 36, 0.3);
  transform: translateY(-1px);
}

.vote-pill-up:hover .vote-pill-icon { transform: translateY(-2px); }

.vote-pill-up.voted {
  background: #F59E0B;
  border-color: #D97706;
  color: white;
}

.vote-pill-down {
  background: #F3F4F6;
  border-color: #E5E7EB;
  color: #6B7280;
}

.vote-pill-down:hover {
  background: #E5E7EB;
  border-color: #9CA3AF;
  box-shadow: 0 2px 8px rgba(107, 114, 128, 0.2);
  transform: translateY(-1px);
}

.vote-pill-down:hover .vote-pill-icon { transform: translateY(2px); }

.vote-pill-down.voted {
  background: #6B7280;
  border-color: #4B5563;
  color: white;
}

.vote-pill-share {
  background: #D2B48C;
  border-color: #C4A06A;
  color: #4A3200;
}

.vote-pill-share:hover {
  background: #C4A06A;
  border-color: #A0845A;
  box-shadow: 0 2px 8px rgba(139, 105, 20, 0.3);
  transform: translateY(-1px);
}

.vote-pill-disabled {
  opacity: 0.65;
  cursor: pointer;
}

.vote-pill-disabled:hover { opacity: 0.85; }

.vote-pill-closed {
  background: transparent !important;
  border-color: transparent !important;
  cursor: default;
}

.vote-pill-closed:hover {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.comment-vote-btn-closed,
.comment-vote-btn-closed button {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  cursor: default;
}

.comment-vote-btn-closed:hover,
.comment-vote-btn-closed:hover button {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.vote-feedback {
  width: 100%;
  text-align: center;
  margin-top: 0;
  min-height: 0;
}

.vote-feedback-text {
  font-size: 0.72rem;
  color: #92400e;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  line-height: 1;
  background: linear-gradient(135deg, #FEF3C7, #FDE68A40);
  border: 1px solid #FDE68A;
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
}

.vote-feedback-text::before {
  content: '✓';
  font-size: 0.65rem;
  font-weight: 700;
  color: #D97706;
}

.vote-remaining-text {
  display: block;
  font-size: 0.65rem;
  color: #78716c;
  font-weight: 500;
  margin-top: 0.15rem;
}

.voters-details {
  width: 100%;
  text-align: center;
}

.voters-list-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.5rem;
  padding: 0.3rem 0.7rem;
  border-radius: 0.5rem;
  border: 1px solid #e8dcc9;
  background: transparent;
  color: #78716c;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  list-style: none;
}

.voters-list-toggle::-webkit-details-marker {
  display: none;
}

.voters-list-toggle:hover {
  border-color: #c69d5d;
  color: #92400e;
  background: #fef3c7;
}

.voters-list-toggle svg {
  width: 0.85rem;
  height: 0.85rem;
}

.voters-loading {
  text-align: center;
  padding: 0.75rem;
  color: #9f8f7e;
  font-size: 0.78rem;
}

.voters-list-container {
  margin-top: 0.5rem;
  padding: 0.5rem;
  border: 1px solid #ede4d8;
  border-radius: 0.6rem;
  background: #fdfaf3;
}

.voters-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.voter-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.35rem 0.5rem;
  border-radius: 0.45rem;
  background: #ffffff;
  border: 1px solid #f2ece2;
}

.voter-user-info {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.voter-meta {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
}

.voter-count-badge {
  font-size: 0.65rem;
  font-weight: 600;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: 999px;
  padding: 0.15rem 0.5rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.voters-empty {
  text-align: center;
  padding: 0.75rem;
  color: #9f8f7e;
  font-size: 0.78rem;
}

.vote-feedback-compact {
  margin-top: 0.25rem;
  white-space: nowrap;
}

.vote-feedback-compact .vote-feedback-text {
  font-size: 0.65rem;
  padding: 0.2rem 0.55rem;
}


/* ==================== Comment Vote Buttons (Community) ==================== */
.comment-vote-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  position: relative;
}

.comment-vote-actions form {
  margin: 0;
  display: inline-flex;
}

.comment-vote-btn,
.comment-vote-btn button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-height: 1.7rem;
  min-width: 2.95rem;
  padding: 0.2rem 0.5rem;
  border-radius: 0.45rem;
  border: 1px solid #d4caba;
  background: #faf5eb;
  color: #5D4037;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  transition: all 0.16s ease;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.comment-vote-btn button {
  width: 100%;
  cursor: pointer;
}

.comment-vote-btn .vote-icon {
  width: 0.78rem;
  height: 0.78rem;
  transition: transform 0.16s ease;
}

.comment-vote-btn span {
  min-width: 0.65rem;
  text-align: center;
  letter-spacing: 0.01em;
}

.comment-vote-btn.up:hover,
.comment-vote-btn.up:hover button {
  border-color: #d6a14b;
  background: #fff1d4;
  color: var(--brown-medium);
}

.comment-vote-btn.up:hover .vote-icon {
  transform: translateY(-1px);
}

.comment-vote-btn.up.voted,
.comment-vote-btn.up.voted button {
  border-color: #cb8a25;
  background: linear-gradient(180deg, #ffe2a8 0%, #ffd488 100%);
  color: #744013;
}

.comment-vote-btn.down:hover,
.comment-vote-btn.down:hover button {
  border-color: #c2b6a6;
  background: #f0ebe3;
  color: #5f5246;
}

.comment-vote-btn.down:hover .vote-icon {
  transform: translateY(1px);
}

.comment-vote-btn.down.voted,
.comment-vote-btn.down.voted button {
  border-color: #b0a290;
  background: linear-gradient(180deg, #e5ddd2 0%, #d8cebf 100%);
  color: #4f4337;
}

/* ==================== Post Write/Edit Form Redesign ==================== */
.bf-write-shell {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(122, 72, 32, 0.18);
  border-left: none;
  border-right: none;
  border-radius: 0;
  box-shadow: 0 10px 24px rgba(90, 50, 16, 0.1);
  overflow: hidden;
}

.bf-write-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid rgba(122, 72, 32, 0.14);
  background: linear-gradient(180deg, #fffefc 0%, #fff8ed 100%);
}

.bf-write-top-left {
  min-width: 0;
}

.bf-write-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: #2f2118;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.bf-write-desc {
  margin: 2px 0 0;
  color: #8b6d55;
  font-size: 0.75rem;
}

.bf-write-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #7a4b2a;
  background: #fff7e8;
  border: 1px solid #edd8bb;
  border-radius: 999px;
  padding: 5px 10px;
  text-decoration: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
}

.bf-write-back:hover {
  background: #f8e8ce;
  color: #5a3210;
}

.bf-write-back svg {
  width: 14px;
  height: 14px;
}

.bf-write-body {
  padding: 16px 12px;
  background: linear-gradient(180deg, #fffefb 0%, #fff9ef 100%);
}

.bf-write-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.bf-write-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bf-write-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: #7a4b2a;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.bf-write-input {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border: 1px solid #dccdbb;
  border-radius: 0.72rem;
  background: #fff;
  color: #3e342b;
  font-size: 0.95rem;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.bf-write-input::placeholder {
  color: #aa9783;
}

.bf-write-input:focus {
  outline: none;
  border-color: #c48a42;
  box-shadow: 0 0 0 3px rgba(196, 138, 66, 0.18);
}

.bf-write-textarea {
  width: 100%;
  padding: 0.75rem 0.85rem;
  border: 1px solid #dccdbb;
  border-radius: 0.72rem;
  background: #fff;
  color: #3e342b;
  font-size: 0.95rem;
  line-height: 1.6;
  resize: vertical;
  min-height: 220px;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.bf-write-textarea::placeholder {
  color: #aa9783;
}

.bf-write-textarea:focus {
  outline: none;
  border-color: #c48a42;
  box-shadow: 0 0 0 3px rgba(196, 138, 66, 0.18);
}

.bf-write-errors {
  background: #FEF2F2;
  border-left: 4px solid #EF4444;
  padding: 0.85rem;
  border-radius: 0 0.72rem 0.72rem 0;
}

.bf-write-errors-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #B91C1C;
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 0.4rem;
}

.bf-write-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.65rem;
  padding-top: 1rem;
  border-top: 1px solid #ece2d5;
}

.bf-write-cancel {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 14px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #7a4b2a;
  background: #fff7e8;
  border: 1px solid #edd8bb;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.bf-write-cancel:hover {
  background: #f8e8ce;
  color: #5a3210;
}

.bf-write-submit {
  padding: 7px 18px;
  font-size: 0.8rem;
  font-weight: 800;
  color: #fff7e6;
  background: var(--brown-gradient);
  border: 1px solid #7a4b2a;
  border-radius: 999px;
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
  box-shadow: 0 5px 12px rgba(90, 50, 16, 0.2);
}

.bf-write-submit:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 8px 14px rgba(90, 50, 16, 0.26);
}

@media (min-width: 640px) {
  .bf-write-body {
    padding: 20px 16px;
  }
  .bf-write-input {
    font-size: 1rem;
    padding: 0.72rem 1rem;
  }
  .bf-write-textarea {
    font-size: 1rem;
    padding: 0.85rem 1rem;
    min-height: 260px;
  }
}

/* ==================== Comment Form (Community) ==================== */
.bf-comment-form-shell {
  border: 1px solid #e4d7c6;
  border-radius: 0.85rem;
  background: linear-gradient(180deg, #fffdf8 0%, #fff8ec 100%);
  box-shadow: 0 2px 10px rgba(93, 64, 55, 0.08);
  padding: 0.65rem;
}

.bf-comment-form-inner {
  display: flex;
  align-items: flex-end;
  gap: 0.55rem;
}

.bf-comment-form-textarea {
  width: 100%;
  min-height: 3.3rem;
  border: 1px solid #dccdbb;
  border-radius: 0.72rem;
  background: #fff;
  padding: 0.58rem 0.72rem;
  color: #3e342b;
  font-size: 0.875rem;
  line-height: 1.45;
  resize: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
  max-height: 200px;
  overflow-y: auto;
}

.bf-comment-form-textarea::placeholder {
  color: #aa9783;
}

.bf-comment-form-textarea:focus {
  outline: none;
  border-color: #c48a42;
  box-shadow: 0 0 0 3px rgba(196, 138, 66, 0.18);
}

.bf-comment-form-submit {
  min-height: 2.5rem;
  padding: 0.5rem 0.95rem;
  border: 1px solid #7a4b2a;
  border-radius: 0.72rem;
  background: var(--brown-gradient);
  color: #fff7e6;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
  box-shadow: 0 5px 12px rgba(90, 50, 16, 0.2);
}

.bf-comment-form-submit:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 8px 14px rgba(90, 50, 16, 0.26);
}

/* ==================== Reply Form (Compact) ==================== */
.bf-reply-form-shell {
  margin-top: 0.45rem;
}

.bf-reply-form-inner {
  display: flex;
  align-items: flex-end;
  gap: 0.45rem;
  border: 1px solid #e9dece;
  border-radius: 0.68rem;
  background: #faf8f3;
  padding: 0.34rem;
}

.bf-reply-form-textarea {
  width: 100%;
  min-height: 2.1rem;
  border: 1px solid #ddd0bf;
  border-radius: 0.56rem;
  padding: 0.42rem 0.56rem;
  font-size: 0.78rem;
  color: #3e342b;
  line-height: 1.35;
  background: #fff;
  resize: none;
  max-height: 200px;
  overflow-y: auto;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.bf-reply-form-textarea::placeholder {
  color: #b19f8c;
}

.bf-reply-form-textarea:focus {
  outline: none;
  border-color: #c48a42;
  box-shadow: 0 0 0 2px rgba(196, 138, 66, 0.16);
}

.bf-reply-form-submit {
  min-height: 2.1rem;
  padding: 0.38rem 0.7rem;
  border: 1px solid #c9924b;
  border-radius: 0.56rem;
  background: linear-gradient(135deg, #f0ba71 0%, #dd9b43 100%);
  color: #fffdfa;
  font-size: 0.73rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.14s ease, filter 0.14s ease;
}

.bf-reply-form-submit:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
}

/* ==================== Comment Edit (Inline) ==================== */
.bf-comment-edit-shell {
  position: relative;
}

.comment-edit-card {
  padding: 0.82rem;
  background: linear-gradient(180deg, #fffbf4 0%, #fff4de 100%);
  border: 1px solid #e2ccb0;
  border-radius: 0.84rem;
  box-shadow: 0 3px 11px rgba(93, 64, 55, 0.12);
  animation: editSlideIn 0.2s ease-out;
}

.comment-edit-card.reply-edit {
  padding: 0.64rem;
  background: linear-gradient(180deg, #fffdf9 0%, #f8f3ea 100%);
  border-color: #e8dccd;
  border-radius: 0 0.75rem 0.75rem 0;
  border-left: 2px solid #d3b58f;
}

@keyframes editSlideIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.comment-edit-header {
  display: flex;
  align-items: center;
  gap: 0.34rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: #91673f;
  margin-bottom: 0.52rem;
}

.comment-edit-form {
  display: flex;
  flex-direction: column;
  gap: 0.52rem;
}

.comment-edit-textarea {
  width: 100%;
  padding: 0.62rem 0.72rem;
  border: 1px solid #ddccb8;
  border-radius: 0.62rem;
  background: white;
  resize: none;
  max-height: 200px;
  overflow-y: auto;
  font-size: 0.84rem;
  line-height: 1.5;
  color: #3e342b;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.comment-edit-textarea:focus {
  outline: none;
  border-color: #c48a42;
  box-shadow: 0 0 0 3px rgba(196, 138, 66, 0.17);
}

.comment-edit-actions {
  display: flex;
  gap: 0.42rem;
  justify-content: flex-end;
}

.comment-edit-cancel {
  padding: 0.33rem 0.82rem;
  font-size: 0.74rem;
  font-weight: 600;
  color: #7b6855;
  border-radius: 0.46rem;
  transition: all 0.15s ease;
  text-decoration: none;
}

.comment-edit-cancel:hover {
  color: #5d4037;
  background: #f4ece1;
}

.comment-edit-submit {
  padding: 0.34rem 0.96rem;
  font-size: 0.74rem;
  font-weight: 800;
  color: #fff6e6;
  background: var(--brown-gradient);
  border: 1px solid #7a4b2a;
  border-radius: 0.46rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.comment-edit-submit:hover {
  filter: brightness(1.04);
  box-shadow: 0 4px 10px rgba(90, 50, 16, 0.24);
  transform: translateY(-1px);
}

.bf-show-comment-section-body {
  background: linear-gradient(180deg, #fffefb 0%, #fff7ea 100%);
}

.bf-comment-login-prompt {
  margin-top: 0.72rem;
  border: 1px solid #e7d8c3;
  border-radius: 0.82rem;
  background: linear-gradient(135deg, #fff9ed 0%, #fff2dc 100%);
  padding: 0.78rem;
  text-align: center;
}

.bf-comment-login-text {
  margin: 0;
  color: #6d5846;
  font-size: 0.8rem;
}

.bf-comment-login-link {
  color: var(--brown-medium);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(139, 69, 19, 0.35);
  cursor: pointer;
  transition: color 0.14s ease, border-color 0.14s ease;
}

.bf-comment-login-link:hover {
  color: #6d3410;
  border-color: rgba(109, 52, 16, 0.6);
}

@media (max-width: 640px) {
  .bf-comment-form-shell {
    border-radius: 0.72rem;
    padding: 0.5rem;
  }

  .bf-comment-form-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 0.46rem;
  }

  .bf-comment-form-submit {
    width: 100%;
  }

  .bf-reply-form-inner {
    padding: 0.28rem;
    gap: 0.32rem;
  }

  .bf-reply-form-submit {
    min-width: 3.4rem;
    padding-inline: 0.56rem;
  }
}

/* Comment Card */
.comment-card {
  position: relative;
  padding: 0.45rem 0.15rem 0.5rem;
  border-bottom: 1px solid #ece4d8;
}

.comment-card:last-child {
  border-bottom: none;
}

.bf-comment-shell {
  border: 1px solid #ede4d8;
  border-radius: 0.7rem;
  background: #ffffff;
  box-shadow: 0 1px 0 rgba(93, 64, 55, 0.04);
  padding: 0.5rem 0.6rem;
}

.bf-comment-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
}

.bf-comment-user-group {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  flex: 1;
}

.bf-comment-meta-stack {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.bf-comment-meta-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.bf-comment-time {
  color: #9f8f7e;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  flex-shrink: 0;
}

.bf-comment-body {
  margin-top: 0.3rem;
  color: #3e342b;
  font-size: 0.875rem;
  line-height: 1.55;
  word-break: break-word;
}

.bf-comment-footer-row {
  margin-top: 0.35rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  border-top: 1px solid #f2ece2;
  padding-top: 0.3rem;
}

.bf-comment-footer-left {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.bf-comment-reply-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.7rem;
  padding: 0.2rem 0.55rem;
  border-radius: 0.45rem;
  border: 1px solid #ddd3c4;
  background: var(--cream-gradient);
  color: var(--brown-dark);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: all 0.16s ease;
}

.bf-comment-reply-btn:hover {
  border-color: #c69d5d;
  color: var(--brown-medium);
  background: linear-gradient(135deg, #fff7e4 0%, #ffecc2 100%);
}

.bf-comment-owner-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
}

.bf-comment-owner-actions form {
  margin: 0;
  display: contents;
}

.bf-comment-owner-link,
.bf-comment-owner-link button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.62rem;
  padding: 0.14rem 0.42rem;
  border-radius: 0.38rem;
  border: 1px solid transparent;
  background: transparent;
  color: #857666;
  font-size: 0.69rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.14s ease;
}

.bf-comment-owner-link:hover,
.bf-comment-owner-link button:hover {
  border-color: #e8dcc9;
  background: #faf6ef;
  color: var(--brown-medium);
}

.bf-comment-owner-delete:hover,
.bf-comment-owner-delete button:hover {
  border-color: #f5d3d3;
  background: #fff5f5;
  color: #be3f3f;
}

/* Mention Tag */
.mention-tag {
  font-weight: 600;
  font-size: 0.76rem;
  text-decoration: none;
}

@media (min-width: 640px) {
  .mention-tag {
    font-size: 0.8rem;
  }
}

.bf-auto-link {
  color: #92400e;
  text-decoration: underline;
  text-decoration-color: rgba(146, 64, 14, 0.3);
  text-underline-offset: 2px;
  word-break: break-all;
  transition: text-decoration-color 0.15s ease;
}
.bf-auto-link:hover {
  text-decoration-color: rgba(146, 64, 14, 0.7);
}

/* Best Comment Section */
.best-comments-section {
  border-bottom: 2px solid var(--brown-lightest, #F4A460);
  margin-bottom: 0.25rem;
}

.best-comment-card {
  background: var(--cream, #FFF8DC);
  border-bottom: 1px solid #ebe3d7;
  padding: 0.55rem 0;
}

.best-comment-card .bf-comment-shell {
  background: transparent;
  border: none;
  box-shadow: none;
}

.best-comment-card .bf-comment-header-row {
  flex-wrap: nowrap;
}

/* BEST Label Badge */
.best-label {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.4rem;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: #fff;
  background: var(--brown-medium, #8B4513);
  border-radius: 3px;
  line-height: 1.4;
  flex-shrink: 0;
  white-space: nowrap;
}

/* Go to comment link */
.best-go-to-comment {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--brown-lighter, #D2691E);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.15s;
}

.best-go-to-comment:hover {
  color: var(--brown-medium, #8B4513);
}

/* Reply Card */
.reply-card {
  position: relative;
  padding: 0.55rem 0 0.65rem;
  border-bottom: 1px solid #ebe3d7;
}

.reply-card .bf-comment-shell {
  background: #fafaf8;
  border-color: #e8dfd1;
}

.reply-card:last-child {
  border-bottom: none;
}

/* User Avatar */
.user-avatar {
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  background: linear-gradient(145deg, var(--brown-lightest), var(--brown-lighter));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  border: 2px solid rgba(255, 255, 255, 0.8);
  flex-shrink: 0;
  position: relative;
  box-shadow: 0 3px 10px rgba(139, 69, 19, 0.2);
  overflow: hidden;
}

.user-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 9999px;
  object-fit: cover;
}

.user-avatar.small {
  width: 34px;
  height: 34px;
  font-size: 16px;
  border-width: 2px;
}

/* User Info Container - 2-line layout: nickname / level+badge */
.user-info-container {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.user-info-row {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.user-name {
  font-weight: 600;
  color: #1F2937;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 160px;
  min-width: 0;
}

.user-name a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.user-name a:hover {
  color: var(--brown-medium);
}

@media (min-width: 640px) {
  .user-name {
    max-width: 240px;
  }
}
.bf-show-author-main .user-name {
  max-width: none;
  overflow: visible;
  text-overflow: clip;
}

/* Level Text (plain, no background) */
.user-level {
  color: var(--brown-lighter);
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
  white-space: nowrap;
}

@media (min-width: 640px) {
  .user-level {
    font-size: 12px;
  }
}

/* Name Row: level + nickname on same line */
.user-name-row {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

/* 똥주인 Author Badge */
.author-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.1rem 0.4rem;
  border-radius: 0.28rem;
  border: 1px solid #c17f30;
  background: var(--brown-gradient);
  color: #fff4dc;
  font-size: 0.61rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.2;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* 구매자 Purchaser Badge */
.purchaser-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.1rem 0.4rem;
  border-radius: 0.28rem;
  border: 1px solid #2d8a56;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: #f0fdf4;
  font-size: 0.61rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.2;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.comment-author-section .purchaser-badge {
  font-size: 0.56rem;
  padding: 0.08rem 0.33rem;
}

.author-badge::before,
.author-badge::after {
  content: none;
}

@keyframes poopWiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-5deg); }
  75% { transform: rotate(5deg); }
}

@keyframes shimmer {
  0% { left: -100%; }
  50%, 100% { left: 100%; }
}

/* Comment Author Section */
.comment-author-section {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  flex: 1;
}

.comment-author-section .user-info-container {
  gap: 0;
  min-width: 0;
}

.comment-author-section .user-name {
  font-size: 0.76rem;
  max-width: 7rem;
}

@media (min-width: 640px) {
  .comment-author-section .user-name {
    font-size: 0.8rem;
    max-width: 12.5rem;
  }
}

.comment-author-section .user-level {
  font-size: 0.62rem;
  font-weight: 700;
}

.comment-author-section .user-name-row {
  gap: 0.24rem;
}

.comment-author-section .author-badge {
  font-size: 0.56rem;
  padding: 0.08rem 0.33rem;
}

@media (max-width: 375px) {
  .comment-card {
    padding-left: 0;
    padding-right: 0;
  }

  .bf-comment-shell {
    border-left: none;
    border-right: none;
    border-radius: 0;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  .bf-comment-time {
    font-size: 0.64rem;
  }

  .bf-comment-body {
    font-size: 0.83rem;
    line-height: 1.5;
  }

  .bf-comment-footer-row {
    gap: 0.4rem;
  }

  .bf-comment-owner-actions {
    margin-left: auto;
  }
}

@media (min-width: 1024px) {
  .comment-card {
    padding-top: 0.75rem;
    padding-bottom: 0.85rem;
  }

  .bf-comment-shell {
    border-radius: 0.85rem;
    padding: 0.78rem 0.95rem;
  }

  .bf-comment-body {
    font-size: 0.9rem;
  }

  .bf-comment-time {
    font-size: 0.72rem;
  }
}

/* Post Actions Section */
.post-actions-section {
  display: flex;
  justify-content: space-between;
  padding: 1rem;
  background: #F9FAFB;
  border-top: 1px solid #E5E7EB;
}

.post-actions-left,
.post-actions-right {
  display: flex;
  gap: 0.5rem;
}

.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 1rem;
  background: white;
  border: 2px solid #E5E7EB;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 500;
  font-size: 14px;
  color: #6B7280;
}

.action-btn:hover {
  border-color: var(--brown-medium);
  color: var(--brown-medium);
}

.action-btn.btn-edit:hover {
  border-color: var(--accent-green);
  color: var(--accent-green);
}

.action-btn.btn-delete:hover {
  border-color: var(--accent-red);
  color: var(--accent-red);
}

.board-author-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-width: 0;
  max-width: 100%;
}

.board-author-name {
  font-weight: 500;
  color: #1F2937;
  font-size: 12px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 640px) {
  .board-author-name {
    font-size: 13px;
  }
}

.board-author-meta {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-wrap: wrap;
}

.board-author-name-row {
  display: flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
}

.board-author-level {
  font-size: 10px;
  color: var(--brown-lighter);
  font-weight: 600;
  flex-shrink: 0;
}

.post-comment-count {
  color: var(--brown-medium);
  font-weight: 700;
  font-size: 0.75rem;
  margin-left: 4px;
  flex-shrink: 0;
}

/* Badges */
.badge-new {
  display: inline-block;
  padding: 2px 6px;
  background: var(--accent-red);
  color: white;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  margin-left: 0.5rem;
  animation: pulse 1.5s infinite;
}

.badge-n {
  color: #e85d3a;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.badge-hot {
  color: var(--accent-red);
  margin-left: 0.5rem;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* ==================== Best Widget Premium Frame ==================== */
.best-widget-frame {
  position: relative;
}

.best-widget-border-glow {
  border: none;
  box-shadow:
    inset 0 0 10px rgba(245, 158, 11, 0.15),
    0 0 12px rgba(245, 158, 11, 0.12);
  animation: bestBorderPulse 3s ease-in-out infinite;
}

@keyframes bestBorderPulse {
  0%, 100% {
    box-shadow: inset 0 0 10px rgba(245, 158, 11, 0.15), 0 0 12px rgba(245, 158, 11, 0.12);
  }
  50% {
    box-shadow: inset 0 0 16px rgba(245, 158, 11, 0.25), 0 0 20px rgba(245, 158, 11, 0.2);
  }
}

.best-corner-glow svg {
  filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.4));
  animation: bestCornerShimmer 4s ease-in-out infinite;
}

@keyframes bestCornerShimmer {
  0%, 100% { opacity: 0.7; filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.4)); }
  50% { opacity: 1; filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.6)); }
}

/* ==================== Winner Hall of Fame ==================== */
.winner-card-frame {
  position: relative;
  border: 2.5px solid #DAA520 !important;
}

.winner-crown-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 44px;
  height: 28px;
  z-index: 25;
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

@media (min-width: 640px) {
  .winner-crown-badge {
    width: 52px;
    height: 34px;
    top: 8px;
    left: 8px;
  }
}

.winner-crown-badge-horizontal {
  position: absolute;
  top: 4px;
  left: 9px;
  width: 26px;
  height: 16px;
  z-index: 25;
  pointer-events: none;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
}

@media (min-width: 640px) {
  .winner-crown-badge-horizontal {
    width: 32px;
    height: 20px;
    top: 6px;
    left: 11px;
  }
}

/* Stretched link overlay for Hall of Fame cards */
.stretched-link::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  content: "";
}

/* Minimalist Winner Style for Calendar Cells */
.winner-calendar-cell {
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 2px #DAA520;
  border-radius: 8px;
}

.winner-mini-icon {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 14px;
  height: 10px;
  z-index: 10;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
}

@media (min-width: 640px) {
  .winner-mini-icon {
    width: 16px;
    height: 11px;
    top: -3px;
    right: -3px;
  }
}

/* ---- Countdown Pill (Dynamic) ---- */
.best-countdown-pill {
  background: rgba(120, 53, 15, 0.85);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(180, 83, 9, 0.5);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.best-countdown-pill .best-countdown-label {
  color: rgba(253, 230, 138, 0.9);
}

.best-countdown-digits {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #fff;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
  animation: countdownPulse 1s ease-in-out infinite;
}

@keyframes countdownPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.03); }
}

@media (min-width: 640px) {
  .best-countdown-pill {
    padding: 3px 10px;
  }
  .best-countdown-digits {
    font-size: 12px;
  }
}

/* ==================== Gut Health Badge ==================== */
.gut-health-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.55rem;
  padding: 1px 4px;
  border-radius: 4px;
  white-space: nowrap;
  vertical-align: middle;
  margin-left: 2px;
  line-height: 1.2;
  flex-shrink: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 640px) {
  .gut-health-badge {
    font-size: 0.6rem;
    padding: 1px 5px;
    margin-left: 4px;
  }
}

/* Gut Health Indicator Dot */
.gut-health-indicator {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 3px;
  flex-shrink: 0;
}
.gut-health-indicator-excellent { background: #22c55e; }
.gut-health-indicator-good { background: #14b8a6; }
.gut-health-indicator-normal { background: #9ca3af; }
.gut-health-indicator-caution { background: #eab308; }
.gut-health-indicator-warning { background: #f97316; }
.gut-health-indicator-danger { background: #ef4444; }
.gut-health-indicator-not_stool { background: #d1d5db; }
.gut-health-indicator-nsfw { background: #ef4444; }
.gut-health-indicator-not_analyzed { background: #a5b4fc; }

/* Gut health indicator dot - smaller on mobile */
.gut-health-badge .gut-health-indicator {
  width: 6px;
  height: 6px;
  margin-right: 2px;
}

@media (min-width: 640px) {
  .gut-health-badge .gut-health-indicator {
    width: 8px;
    height: 8px;
    margin-right: 3px;
  }
}

.gut-health-excellent { background: #dcfce7; color: #166534; }
.gut-health-good { background: #ccfbf1; color: #115e59; }
.gut-health-normal { background: #f3f4f6; color: #374151; }
.gut-health-caution { background: #fef9c3; color: #854d0e; }
.gut-health-warning { background: #ffedd5; color: #9a3412; }
.gut-health-danger { background: #fee2e2; color: #991b1b; }
.gut-health-not_stool { background: #e5e7eb; color: #6b7280; }
.gut-health-nsfw { background: #fee2e2; color: #991b1b; }
.gut-health-not_analyzed { background: #e0e7ff; color: #4338ca; }

/* ==================== Analysis Compact (feed cards) ==================== */
.analysis-compact {
  padding: 4px 8px;
  font-size: 0.65rem;
  line-height: 1.3;
  color: #6b7280;
  background: #f9fafb;
  border-top: 1px solid #f3f4f6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.analysis-compact-label {
  font-weight: 600;
  color: #9ca3af;
}
.analysis-compact-status {
  font-weight: 600;
}
.analysis-compact-dot {
  color: #d1d5db;
}
.analysis-compact-desc {
  color: #9ca3af;
}
.analysis-compact-not-stool { color: #9ca3af; }
.analysis-compact-nsfw { color: #991b1b; background: #fef2f2; }
.analysis-compact-nsfw .analysis-compact-status { color: #991b1b; }
.analysis-compact-excellent .analysis-compact-status { color: #166534; }
.analysis-compact-good .analysis-compact-status { color: #115e59; }
.analysis-compact-normal .analysis-compact-status { color: #374151; }
.analysis-compact-caution .analysis-compact-status { color: #854d0e; }
.analysis-compact-warning .analysis-compact-status { color: #9a3412; }
.analysis-compact-danger .analysis-compact-status { color: #991b1b; }

/* ==================== Analysis Section (detail page) ==================== */
.analysis-section {
  padding: 16px 24px;
  background: linear-gradient(135deg, #fefce8 0%, #fff7ed 100%);
  border-top: 1px solid #fde68a;
}
.analysis-section-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: #92400e;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.analysis-section-title::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 14px;
  background: #f59e0b;
  border-radius: 2px;
}
.analysis-section-not-stool {
  background: #f9fafb;
  border-top: 1px solid #e5e7eb;
}
.analysis-section-not-stool .analysis-section-title { color: #6b7280; }
.analysis-section-not-stool .analysis-section-title::before { background: #9ca3af; }
.analysis-section-not-stool-msg {
  color: #9ca3af;
  font-size: 0.8rem;
}
.analysis-section-nsfw {
  background: linear-gradient(135deg, #fef2f2 0%, #fff1f2 100%);
  border-top: 1px solid #fecaca;
}
.analysis-section-nsfw .analysis-section-title { color: #991b1b; }
.analysis-section-nsfw .analysis-section-title::before { background: #ef4444; }
.analysis-section-nsfw-msg {
  color: #b91c1c;
  font-size: 0.8rem;
}
.analysis-row {
  display: flex;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid rgba(253, 230, 138, 0.3);
  font-size: 0.8rem;
}
.analysis-row:last-child { border-bottom: none; }
.analysis-row-label {
  width: 90px;
  flex-shrink: 0;
  font-weight: 600;
  color: #92400e;
  font-size: 0.75rem;
}
.analysis-row-value {
  flex: 1;
  color: #374151;
  display: flex;
  align-items: center;
  gap: 4px;
}
.analysis-score-num { font-weight: 700; }
.analysis-score-status { font-size: 0.7rem; margin-left: 2px; }
.analysis-status-excellent { color: #166534; }
.analysis-status-good { color: #115e59; }
.analysis-status-normal { color: #6b7280; }
.analysis-status-caution { color: #854d0e; }
.analysis-status-warning { color: #9a3412; }
.analysis-status-danger { color: #991b1b; }
.analysis-row-desc {
  flex-direction: column;
  align-items: flex-start;
}
.analysis-desc-text {
  color: #4b5563;
  font-size: 0.8rem;
  line-height: 1.5;
  margin-top: 4px;
}
.analysis-flags {
  gap: 4px;
  flex-wrap: wrap;
}
.analysis-flag-tag {
  display: inline-block;
  padding: 1px 6px;
  background: #fef2f2;
  color: #991b1b;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 500;
}

.ranking-item .analysis-compact {
  border-top: none;
  background: transparent;
  padding: 0;
  font-size: 0.6rem;
  margin-top: -2px;
}

@media (max-width: 640px) {
  .analysis-section { padding: 12px 16px; }
  .analysis-row-label { width: 72px; font-size: 0.7rem; }
  .analysis-compact { font-size: 0.6rem; padding: 3px 6px; }
}

/* ==================== Board Redesign (tips/lounge index) ==================== */
.bf-board-shell {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(122, 72, 32, 0.18);
  border-left: none;
  border-right: none;
  border-radius: 0;
  box-shadow: 0 10px 24px rgba(90, 50, 16, 0.1);
  overflow: hidden;
}

.bf-board-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(122, 72, 32, 0.14);
  background: linear-gradient(180deg, #fffefc 0%, #fff8ed 100%);
}

.bf-board-title-wrap {
  min-width: 0;
}

.bf-board-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: var(--brown-dark);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.bf-board-desc {
  margin-top: 2px;
  margin-bottom: 0;
  color: #8b6d55;
  font-size: 0.75rem;
}

.bf-board-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.bf-board-count {
  color: #8b6d55;
  font-size: 0.75rem;
  font-weight: 600;
}

.bf-write-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--brown-gradient);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  padding: 7px 12px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.bf-write-btn:hover {
  background: var(--brown-gradient-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(90, 50, 16, 0.22);
}

.bf-write-plus {
  font-size: 0.95rem;
  font-weight: 800;
}

.bf-mobile-list {
  padding: 0;
}

.bf-mobile-item {
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 4px;
  border-bottom: 1px solid #ece5da;
  text-decoration: none;
  cursor: pointer;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 251, 245, 0.82) 100%);
}

.bf-mobile-item:last-child {
  border-bottom: none;
}

.bf-mobile-main {
  min-width: 0;
  flex: 1;
}

.bf-mobile-title {
  margin: 0;
  font-size: 0.97rem;
  font-weight: 400;
  color: #2c1f16;
  display: flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
}

.bf-title-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 0 1 auto;
}

.bf-mobile-meta {
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  color: #896d5a;
  white-space: nowrap;
  overflow: hidden;
}

.bf-mobile-author,
.bf-mobile-date,
.bf-mobile-views,
.bf-mobile-comments {
  overflow: hidden;
  text-overflow: ellipsis;
}

.bf-mobile-views {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.bf-views-icon {
  width: 0.75rem;
  height: 0.75rem;
  flex-shrink: 0;
}

.bf-mobile-comments {
  color: var(--brown-medium);
  font-weight: 700;
}

.bf-mobile-sep {
  color: #c2ac97;
  flex-shrink: 0;
}

.bf-mobile-vote {
  min-width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 800;
  flex-shrink: 0;
}

.bf-board-table-wrap {
  padding: 0;
}

.bf-board-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.bf-board-table thead {
  background: linear-gradient(180deg, #fff6e9 0%, #f8ead7 100%);
}

.bf-board-table th {
  padding: 10px 8px;
  border-bottom: 1px solid #e7d8c4;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--brown-dark);
  letter-spacing: 0.02em;
  text-align: center;
}

.bf-board-table td {
  padding: 10px 8px;
  border-bottom: 1px solid #efe7db;
  color: #5f4d40;
  font-size: 0.82rem;
  text-align: center;
  vertical-align: middle;
}

.bf-board-table tbody tr {
  transition: background-color 0.15s ease;
}

.bf-board-table tbody tr:hover {
  background: #fffaf2;
}

.bf-col-no,
.bf-cell-no {
  width: 68px;
}

.bf-col-title,
.bf-cell-title {
  text-align: left !important;
}

.bf-col-author {
  width: 170px;
}

.bf-col-date,
.bf-cell-date {
  width: 88px;
}

.bf-col-views,
.bf-cell-views {
  width: 64px;
  text-align: center;
  color: #9a8978;
  font-size: 0.82rem;
}

.bf-col-vote,
.bf-cell-vote {
  width: 64px;
}

.bf-cell-no {
  color: #9a8978;
  white-space: nowrap;
}

.bf-title-link-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  text-decoration: none;
  cursor: pointer;
}

.bf-title-text {
  font-size: 0.9rem;
  font-weight: 400;
  color: #2f2219;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  min-width: 0;
}

.bf-title-link-wrap:hover .bf-title-text {
  color: var(--brown-medium);
}

.bf-vote-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  border-radius: 9px;
  font-size: 0.78rem;
  font-weight: 800;
}

.bf-pagination-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 14px 10px;
}

.bf-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f4ebe0;
  border: 1px solid #e7d6c1;
  color: var(--brown-dark);
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 10px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.bf-page-btn:hover {
  background: #ecdcc8;
  border-color: #d8c3a7;
}

.bf-page-indicator {
  color: #7f6450;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0 2px;
}

@media (min-width: 768px) {
  .bf-board-shell {
    border-left: 1px solid rgba(122, 72, 32, 0.18);
    border-right: 1px solid rgba(122, 72, 32, 0.18);
    border-radius: 16px;
  }

  .bf-board-top {
    padding: 12px 16px;
  }

  .bf-board-title {
    font-size: 1.14rem;
  }

  .bf-board-desc {
    font-size: 0.8rem;
  }
}

@media (max-width: 767px) {
  .board-page {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
  }
}

/* Board read tracking */
.bf-post-read { opacity: 0.55; transition: opacity 0.2s ease; }
.bf-post-read:hover { opacity: 0.85; }

/* New comments red dot */
.bf-new-comments-dot {
  position: absolute;
  top: -2px;
  right: -6px;
  width: 6px;
  height: 6px;
  background: #EF4444;
  border-radius: 50%;
  pointer-events: none;
}

/* New posts banner */
.bf-new-posts-banner {
  position: sticky;
  top: 0;
  z-index: 10;
  text-align: center;
  padding: 0;
}
.bf-new-posts-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  background: #8B6914;
  color: white;
  border-radius: 0 0 0.75rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(139, 105, 20, 0.3);
  transition: background 0.2s ease;
}
.bf-new-posts-btn:hover {
  background: #6B5010;
}

/* Vote tier 0: zero votes */
.bf-mobile-vote.vote-tier-0,
.bf-vote-pill.vote-tier-0,
.bf-other-vote.vote-tier-0 {
  background: #f0ebe5;
  color: #b8a898;
  box-shadow: none;
}

/* Vote tier 1: 1-2 votes */
.bf-mobile-vote.vote-tier-1,
.bf-vote-pill.vote-tier-1,
.bf-other-vote.vote-tier-1 {
  background: #f5ede4;
  color: #a89484;
  box-shadow: none;
}

/* Vote tier 2: 3-5 votes */
.bf-mobile-vote.vote-tier-2,
.bf-vote-pill.vote-tier-2,
.bf-other-vote.vote-tier-2 {
  background: #ecdcc8;
  color: #7a6350;
}

/* Vote tier 3: 6-10 votes */
.bf-mobile-vote.vote-tier-3,
.bf-vote-pill.vote-tier-3,
.bf-other-vote.vote-tier-3 {
  background: #ddc5a4;
  color: #5f4830;
}

/* Vote tier 4: 11-30 votes */
.bf-mobile-vote.vote-tier-4,
.bf-vote-pill.vote-tier-4,
.bf-other-vote.vote-tier-4 {
  background: linear-gradient(180deg, #d4a86a 0%, #c4924f 100%);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Vote tier 5: 31-69 votes */
.bf-mobile-vote.vote-tier-5,
.bf-vote-pill.vote-tier-5,
.bf-other-vote.vote-tier-5 {
  background: linear-gradient(180deg, #a87840 0%, #8b5e2f 100%);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Vote tier 6: 70+ votes */
.bf-mobile-vote.vote-tier-6,
.bf-vote-pill.vote-tier-6,
.bf-other-vote.vote-tier-6 {
  background: linear-gradient(180deg, #7a4820 0%, #5a3216 100%);
  color: #fde68a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 3px rgba(90, 50, 22, 0.3);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.bf-health-report {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(122, 72, 32, 0.18);
  border-left: none;
  border-right: none;
  border-radius: 0;
  box-shadow: 0 10px 24px rgba(90, 50, 16, 0.1);
  overflow: hidden;
  margin-bottom: 16px;
}

.bf-health-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(122, 72, 32, 0.14);
  background: linear-gradient(180deg, #fffefc 0%, #fff8ed 100%);
}

.bf-health-header h2 {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--brown-dark, #3E2723);
  letter-spacing: -0.01em;
}

.bf-health-header .bf-guide-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-left: auto;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 50%;
  background: rgba(122, 72, 32, 0.1);
  color: #8b6d55;
  text-decoration: none;
  transition: background 0.2s;
}

.bf-health-header .bf-guide-link:hover {
  background: rgba(122, 72, 32, 0.2);
}

.bf-health-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 12px;
}

.bf-health-stat-card {
  text-align: center;
  padding: 10px 8px;
  border-radius: 8px;
  background: linear-gradient(180deg, #fffaf5 0%, #fff5eb 100%);
  border: 1px solid rgba(122, 72, 32, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.bf-health-stat-card .bf-stat-value {
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1.2;
}

.bf-health-stat-card .bf-stat-label {
  font-size: 0.68rem;
  color: #8b6d55;
  margin-top: 3px;
}

.bf-health-combo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  margin: 0 12px 12px;
  border-radius: 10px;
  background: linear-gradient(135deg, #faf5ef 0%, #f5ede3 100%);
  border: 1px solid rgba(122, 72, 32, 0.12);
}

.bf-health-combo .bf-combo-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.bf-health-combo .bf-combo-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--brown-dark, #3E2723);
  letter-spacing: 0.03em;
}

.bf-health-combo .bf-combo-rank {
  font-size: 0.68rem;
  font-weight: 600;
}

.bf-health-combo .bf-combo-stat {
  text-align: center;
  padding: 0 8px;
}

.bf-health-combo .bf-combo-stat-label {
  font-size: 0.65rem;
  color: #8b6d55;
}

.bf-health-combo .bf-combo-stat-value {
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1.2;
}

.bf-health-combo .bf-combo-divider {
  width: 1px;
  height: 32px;
  flex-shrink: 0;
  background: rgba(122, 72, 32, 0.15);
}

.bf-health-combo .bf-combo-none {
  font-size: 0.7rem;
  color: #8b6d55;
  text-align: right;
}

.bf-health-progress {
  height: 3px;
  background: rgba(122, 72, 32, 0.06);
  margin: 0 12px 12px;
  border-radius: 2px;
  overflow: hidden;
}

.bf-health-progress-bar {
  height: 100%;
  border-radius: 2px;
  transition: width 0.7s ease;
}

.bf-health-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-top: 1px solid rgba(122, 72, 32, 0.12);
}

.bf-health-footer span {
  font-size: 0.68rem;
  color: #8b6d55;
}

.bf-health-footer .bf-disclaimer {
  font-style: italic;
  color: #a18872;
}

/* ── Profile: Brownie + DM (dark-brown header context) ── */

.bf-profile-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.bf-profile-actions .button_to {
  display: contents;
}

.bf-profile-brownie {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 16px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 204, 128, 0.35);
  font-size: 0.95rem;
  font-weight: 800;
  color: #FFE0B2;
  letter-spacing: -0.01em;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.bf-profile-brownie img {
  width: 22px;
  height: 22px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
}

.bf-profile-dm-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px 5px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 204, 128, 0.35);
  color: #FFE0B2;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  text-decoration: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.bf-profile-dm-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 204, 128, 0.55);
}

.bf-profile-dm-btn svg {
  width: 15px;
  height: 15px;
  opacity: 0.8;
}

.bf-profile-dm-btn .bf-mission-reward-badge {
  margin: 0;
}

@media (min-width: 640px) {
  .bf-health-report {
    border-radius: 16px;
    border: 1px solid rgba(122, 72, 32, 0.18);
    margin-bottom: 24px;
  }

  .bf-health-header {
    padding: 14px 20px;
  }

  .bf-health-header h2 {
    font-size: 1rem;
  }

  .bf-health-stats {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 16px 20px;
  }

  .bf-health-stat-card {
    padding: 12px 10px;
  }

  .bf-health-stat-card .bf-stat-value {
    font-size: 1.5rem;
  }

  .bf-health-combo {
    margin: 0 20px 16px;
    padding: 14px 16px;
  }

  .bf-health-progress {
    margin: 0 20px 16px;
  }

  .bf-health-footer {
    padding: 12px 20px;
  }
}

/* ==================== Post Show Redesign ==================== */
.bf-show-shell {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(122, 72, 32, 0.18);
  border-left: none;
  border-right: none;
  border-radius: 0;
  box-shadow: 0 10px 24px rgba(90, 50, 16, 0.1);
  overflow: clip;
}

.bf-show-back-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bf-show-back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #7a4b2a;
  background: #fff7e8;
  border: 1px solid #edd8bb;
  border-radius: 999px;
  padding: 5px 10px;
  text-decoration: none;
  cursor: pointer;
}

.bf-show-back-link:hover {
  background: #f8e8ce;
  color: var(--brown-medium);
}

.bf-show-board-badge {
  display: inline-flex;
  align-items: center;
  height: 29px;
  border-radius: 999px;
  border: 1px solid #e6d1b4;
  background: linear-gradient(180deg, #fffdf8 0%, #f9efe0 100%);
  color: #7f6249;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0 9px;
}

.bf-show-article,
.bf-show-section {
  border-top: 1px solid #efe3d3;
  background: linear-gradient(180deg, #fffefb 0%, #fff9ef 100%);
}

.bf-show-head,
.bf-show-section-head {
  padding: 12px;
  border-bottom: 1px solid #ece2d5;
}

.bf-show-title {
  margin: 0;
  font-size: 1.3rem;
  line-height: 1.35;
  font-weight: 900;
  color: #2f2118;
  letter-spacing: -0.02em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bf-show-author-bar {
  margin-top: 10px;
}

.bf-show-author-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.bf-show-meta-line {
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  color: #8f7865;
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}

.bf-show-meta-line::-webkit-scrollbar {
  display: none;
}

/* Scrollable nav — horizontal scroll with hidden scrollbar */
.scrollable-nav {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;                /* Firefox */
  -webkit-overflow-scrolling: touch;    /* iOS momentum scroll */
  overscroll-behavior-x: contain;       /* prevent page scroll chaining */
  -webkit-tap-highlight-color: transparent;
}
.scrollable-nav::-webkit-scrollbar {
  display: none;                        /* Chrome, Safari */
}

.bf-show-meta-date {
  margin: 0;
  flex-shrink: 0;
}

.bf-show-meta-dot {
  color: #c7b19b;
  flex-shrink: 0;
}

.bf-show-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}

.bf-show-body,
.bf-show-section-body {
  padding: 12px;
}

.bf-show-content {
  font-size: 0.95rem;
  line-height: 1.72;
  color: #3f3026;
}

.bf-show-content p {
  margin: 0 0 0.95em;
}

/* Post attached image */
.bf-show-image {
  margin-bottom: 1rem;
  text-align: center;
}

.bf-show-image-img {
  max-width: 100%;
  border-radius: 0.5rem;
}

@media (min-width: 640px) {
  .bf-show-image-img {
    max-width: 600px;
  }
}

.bf-show-section-title {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.98rem;
  font-weight: 800;
  color: #3e281c;
}

.bf-show-section-body.bf-show-other-posts-wrap {
  padding: 0;
}

.bf-board-listing-body {
  padding: 0;
}

.bf-mobile-item.is-current {
  background: linear-gradient(180deg, #fff1d5 0%, #ffe6be 100%);
}

.bf-board-table tbody tr.is-current {
  background: linear-gradient(180deg, #fff1d5 0%, #ffe6be 100%);
}

.bf-board-table tbody tr.is-current:hover {
  background: linear-gradient(180deg, #fff1d5 0%, #ffe6be 100%);
}

.bf-title-text.is-current {
  color: #7a3f12;
  font-weight: 500;
}

.bf-current-arrow {
  color: #d32f2f;
  font-weight: 700;
  font-size: 0.85rem;
}

.bf-current-label {
  color: #d32f2f;
  font-size: 0.7rem;
  font-weight: 700;
}

/* Just-read post marker (green) — mirrors is-current (amber) pattern */
.bf-mobile-item.is-just-read {
  background: linear-gradient(180deg, #e8f5e9 0%, #c8e6c9 100%);
}

.bf-board-table tbody tr.is-just-read {
  background: linear-gradient(180deg, #e8f5e9 0%, #c8e6c9 100%);
}

.bf-board-table tbody tr.is-just-read:hover {
  background: linear-gradient(180deg, #e8f5e9 0%, #c8e6c9 100%);
}

.bf-title-text.is-just-read {
  color: #2e7d32;
  font-weight: 500;
}

.bf-just-read-arrow {
  color: #2e7d32;
  font-weight: 700;
  font-size: 0.85rem;
}

.bf-just-read-label {
  color: #2e7d32;
  font-size: 0.7rem;
  font-weight: 700;
}

/* Mobile marker badges (injected by JS for just-read and current markers) */
.bf-mobile-marker-badge {
  display: inline-block;
  font-size: 0.58rem;
  font-weight: 700;
  line-height: 1;
  padding: 1px 5px;
  border-radius: 3px;
  margin-bottom: 1px;
  letter-spacing: 0.01em;
}

.bf-mobile-just-read-badge {
  color: #2e7d32;
  background: rgba(46, 125, 50, 0.1);
}

.bf-mobile-current-badge {
  color: #c62828;
  background: rgba(198, 40, 40, 0.1);
}

/* Opacity override: just-read and current posts should not be dimmed */
.bf-post-read.is-just-read { opacity: 1; }
.bf-post-read.is-just-read:hover { opacity: 1; }
.bf-post-read.is-current { opacity: 1; }
.bf-post-read.is-current:hover { opacity: 1; }
tr.bf-post-read.is-just-read { opacity: 1; }
tr.bf-post-read.is-current { opacity: 1; }

.bf-show-back-footer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #8b4513;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}

.bf-show-back-footer:hover {
  color: #6d3410;
}

.bf-other-list-wrap {
  border: 1px solid #eadac6;
  border-radius: 10px;
  overflow: hidden;
  background: #fffdf9;
}

.bf-other-list-head {
  display: none;
  grid-template-columns: 1fr 170px 52px;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid #eadfce;
  background: linear-gradient(180deg, #fff6e9 0%, #f8ead7 100%);
  color: var(--brown-dark);
  font-size: 0.74rem;
  font-weight: 700;
}

.bf-other-list {
  padding: 0;
}

.bf-other-item {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 8px;
  border-bottom: 1px solid #ece5da;
  text-decoration: none;
  cursor: pointer;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 251, 245, 0.84) 100%);
}

.bf-other-item:last-child {
  border-bottom: none;
}

.bf-other-item.is-current {
  background: linear-gradient(180deg, #fff1d5 0%, #ffe6be 100%);
}

.bf-other-main {
  min-width: 0;
  flex: 1;
}

.bf-other-title-row {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
}

.bf-other-title {
  font-size: 0.89rem;
  font-weight: 400;
  color: #2e2219;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.bf-other-title.is-current {
  color: #7a3f12;
}

.bf-other-meta {
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  color: #8f7865;
  min-width: 0;
}

.bf-other-meta-sep {
  color: #c9b9a8;
}

.bf-other-meta-info {
  white-space: nowrap;
}

.bf-other-vote {
  min-width: 30px;
  height: 30px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.74rem;
  font-weight: 800;
  flex-shrink: 0;
}



@media (min-width: 768px) {
  .bf-show-shell {
    border-left: 1px solid rgba(122, 72, 32, 0.18);
    border-right: 1px solid rgba(122, 72, 32, 0.18);
    border-radius: 16px;
  }

  .bf-show-head,
  .bf-show-section-head {
    padding: 16px;
  }

  .bf-show-body,
  .bf-show-section-body {
    padding: 16px;
  }

  .bf-show-title {
    font-size: 1.55rem;
  }

  .bf-show-meta-line {
    font-size: 0.78rem;
    overflow: visible;
  }

  .bf-other-list-head {
    display: grid;
  }

  .bf-other-item {
    padding: 9px 10px;
  }

  .bf-other-item:hover {
    background: #fffaf2;
  }

  .bf-other-title {
    font-size: 0.93rem;
  }
}

@media (max-width: 767px) {
  .post-page {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
  }
}

@media (max-width: 767px) {
  .attendance-page {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
  }
}

/* ==================== Best Poop Widget Premium Frame ==================== */
.best-card-wrapper {
  position: relative;
}

.best-card-glow {
  box-shadow:
    0 0 0 1.5px rgba(245, 158, 11, 0.35),
    0 0 12px rgba(245, 158, 11, 0.12),
    0 4px 16px rgba(139, 69, 19, 0.10);
  animation: bestGlow 3s ease-in-out infinite alternate;
}

@keyframes bestGlow {
  0% {
    box-shadow:
      0 0 0 1.5px rgba(245, 158, 11, 0.35),
      0 0 12px rgba(245, 158, 11, 0.10),
      0 4px 16px rgba(139, 69, 19, 0.10);
  }
  100% {
    box-shadow:
      0 0 0 1.5px rgba(245, 158, 11, 0.55),
      0 0 20px rgba(245, 158, 11, 0.18),
      0 4px 20px rgba(139, 69, 19, 0.14);
  }
}

/* Corner ornaments */
.best-corner {
  position: absolute;
  width: 20px;
  height: 20px;
  z-index: 20;
  pointer-events: none;
  opacity: 0.85;
}

.best-corner--tl { top: -1px; left: -1px; }
.best-corner--tr { top: -1px; right: -1px; transform: scaleX(-1); }
.best-corner--bl { bottom: -1px; left: -1px; transform: scaleY(-1); }
.best-corner--br { bottom: -1px; right: -1px; transform: scale(-1); }

@media (min-width: 640px) {
  .best-corner {
    width: 26px;
    height: 26px;
  }
}

/* HOT flame badge */
.best-hot-badge {
  position: absolute;
  top: -6px;
  right: -4px;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  filter: drop-shadow(0 2px 4px rgba(255, 75, 0, 0.35));
  animation: hotPulse 2s ease-in-out infinite;
}

@keyframes hotPulse {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 2px 4px rgba(255, 75, 0, 0.35));
  }
  50% {
    transform: scale(1.06);
    filter: drop-shadow(0 3px 8px rgba(255, 75, 0, 0.5));
  }
}

@media (min-width: 640px) {
  .best-hot-badge {
    top: -8px;
    right: -6px;
  }
}

/* ── Calendar Day Overlay ── */
.cal-day-overlay {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.45) 0%, transparent 85%);
  border-radius: 0.5rem 0 0 0;
}

.cal-day-num {
  font-size: 0.65rem;
  line-height: 1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0.4);
  color: #fff !important;
}

.cal-day-status {
  font-size: 0.45rem;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0.4);
}

@media (min-width: 640px) {
  .cal-day-num {
    font-size: 0.78rem;
  }

  .cal-day-status {
    font-size: 0.55rem;
  }
}

/* ==================== Missions Page ==================== */
.bf-mission-filter {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  margin: 10px 10px 0;
  border-radius: 10px;
  background: rgba(139, 109, 85, 0.08);
  border: 1px solid rgba(139, 109, 85, 0.1);
}

.bf-mission-filter-tab {
  padding: 6px 20px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: #8b6d55;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  line-height: 1;
  letter-spacing: -0.01em;
}

.bf-mission-filter-tab:hover {
  color: var(--brown-dark);
}

.bf-mission-filter-tab.is-active {
  background: var(--brown-dark);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 1px 3px rgba(90, 50, 16, 0.2);
}

.bf-mission-daily-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 4px;
  background: linear-gradient(180deg, #fef3c7 0%, #fde68a 100%);
  border: 1px solid rgba(217, 162, 67, 0.3);
  color: #92400e;
  font-size: 0.65rem;
  font-weight: 800;
  margin-left: 3px;
  vertical-align: middle;
  line-height: 1;
  letter-spacing: 0.01em;
  transform: translateY(-0.5px);
}

.bf-mission-empty {
  padding: 32px 16px;
  text-align: center;
  color: #8b6d55;
  font-size: 0.88rem;
}

.bf-mission-policy-link {
  padding: 12px 16px;
  text-align: center;
  border-top: 1px solid #ece5da;
}

.bf-mission-list {
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bf-mission-card {
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #ece5da;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 251, 245, 0.9) 100%);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.bf-mission-card:hover {
  border-color: rgba(139, 69, 19, 0.22);
  box-shadow: 0 2px 8px rgba(90, 50, 16, 0.08);
}

.bf-mission-card.is-completed {
  background: linear-gradient(180deg, #f0fdf4 0%, #ecfce8 100%);
  border-color: #bbf7d0;
}

.bf-mission-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.bf-mission-info {
  min-width: 0;
  flex: 1;
}

.bf-mission-title {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--brown-dark);
  line-height: 1.3;
}

.bf-mission-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #22c55e;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  margin-left: 4px;
  vertical-align: middle;
}

.bf-mission-desc {
  margin: 3px 0 0;
  font-size: 0.78rem;
  color: #8b6d55;
  line-height: 1.4;
}

.bf-mission-reward {
  flex-shrink: 0;
}

.bf-mission-reward-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff3d6 0%, #ffe8b8 100%);
  border: 1px solid rgba(217, 162, 67, 0.35);
  color: var(--brown-dark);
  font-size: 0.75rem;
  font-weight: 800;
  white-space: nowrap;
}

.bf-mission-card.is-completed .bf-mission-reward-badge {
  background: linear-gradient(180deg, #dcfce7 0%, #bbf7d0 100%);
  border-color: rgba(34, 197, 94, 0.35);
  color: #166534;
}

.bf-brownie-earn {
  background: linear-gradient(180deg, #dcfce7 0%, #bbf7d0 100%) !important;
  border-color: rgba(34, 197, 94, 0.35) !important;
  color: #166534 !important;
}

.bf-brownie-spend {
  background: linear-gradient(180deg, #fee2e2 0%, #fecaca 100%) !important;
  border-color: rgba(239, 68, 68, 0.35) !important;
  color: #991b1b !important;
}

.bf-brownie-price {
  background: linear-gradient(180deg, #fff8eb 0%, #fef3c7 100%) !important;
  border-color: rgba(217, 162, 67, 0.4) !important;
  color: #78350f !important;
}

.bf-mission-progress {
  margin-top: 10px;
}

.bf-mission-progress-info {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: #8b6d55;
  margin-bottom: 4px;
}

.bf-mission-progress-bg {
  width: 100%;
  height: 7px;
  border-radius: 999px;
  background: rgba(139, 109, 85, 0.12);
  overflow: hidden;
}

.bf-mission-progress-bar {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #f4a460 0%, #d9a243 100%);
  transition: width 0.3s ease;
}

@media (min-width: 640px) {
  .bf-mission-list {
    padding: 12px 14px;
    gap: 10px;
  }

  .bf-mission-card {
    padding: 14px 16px;
    border-radius: 12px;
  }

  .bf-mission-title {
    font-size: 0.96rem;
  }

  .bf-mission-desc {
    font-size: 0.82rem;
  }

  .bf-mission-reward-badge {
    font-size: 0.78rem;
    padding: 5px 12px;
  }
}

@media (min-width: 768px) {
  .bf-mission-list {
    padding: 16px;
    gap: 12px;
  }

  .bf-mission-card {
    padding: 16px 20px;
  }
}

/* === Translation Toggle === */
.bf-original.bf-hidden {
  display: none !important;
}

body.show-originals .bf-translated {
  display: none !important;
}

body.show-originals .bf-original.bf-hidden {
  display: inline !important;
}

/* Block-level originals (detail views) */
body.show-originals .bf-translatable:not(.inline) > .bf-original.bf-hidden {
  display: block !important;
}

/* Translation icon — hide when showing originals */

body.show-originals .bf-translate-icon {
  display: none !important;
}

/* pre-line only for detail views — list views need nowrap for truncation */
.bf-translatable:not(.inline) > .bf-translated,
.bf-translatable:not(.inline) > .bf-original {
  white-space: pre-line;
}

/* === Notice Form Section === */
.bf-notice-section {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid #e8dcc9;
  border-radius: 10px;
  background: linear-gradient(135deg, #fffaf2 0%, #fff7e4 100%);
}
.bf-notice-checkbox-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bf-notice-check {
  width: 18px;
  height: 18px;
  accent-color: var(--brown-medium, #8B4513);
  cursor: pointer;
}
.bf-notice-label {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--brown-dark, #5D4037);
  cursor: pointer;
}
.bf-notice-color-picker {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #e8dcc9;
}
.bf-notice-color-title {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--brown-medium, #8B4513);
  margin-bottom: 10px;
}
.bf-notice-color-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.bf-notice-color-option {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1.5px solid #e0d4c3;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  background: #fff;
}
.bf-notice-color-option:hover {
  border-color: var(--brown-lighter, #D2691E);
  background: #fff7e4;
}
.bf-notice-color-option:has(.bf-notice-color-radio:checked) {
  border-color: var(--brown-medium, #8B4513);
  background: #fff3d6;
  box-shadow: 0 0 0 1px var(--brown-medium, #8B4513);
}
.bf-notice-color-radio {
  display: none;
}
.bf-notice-color-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid rgba(0,0,0,0.1);
  flex-shrink: 0;
}
.bf-notice-color-name {
  font-size: 0.78rem;
  font-weight: 500;
  color: #5D4037;
}

/* === Board Notice Styles === */
.bf-notice-row {
  background: linear-gradient(135deg, #FFF9E6 0%, #FFF3D6 100%) !important;
}
.bf-notice-row:hover {
  background: linear-gradient(135deg, #FFF3D6 0%, #FFEDC0 100%) !important;
}
.bf-notice-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  white-space: nowrap;
}
.bf-notice-title {
  font-weight: 600;
}
.bf-notice-mobile-item {
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 4px;
  border-bottom: 1px solid #ece5da;
  text-decoration: none;
  cursor: pointer;
  background: linear-gradient(135deg, #FFF9E6 0%, #FFF3D6 100%);
  border-left: 3px solid; /* color set via inline style */
}
.bf-notice-mobile-item:hover {
  background: linear-gradient(135deg, #FFF3D6 0%, #FFEDC0 100%);
}

/* === Poll Icon in Board Listing === */
.bf-image-icon-wrap { display: inline-flex; align-items: center; flex-shrink: 0; margin-left: 4px; }
.bf-poll-icon-wrap { display: inline-flex; align-items: center; flex-shrink: 0; margin-left: 4px; }
.bf-poop-icon-wrap { display: inline-flex; align-items: center; flex-shrink: 0; margin-left: 4px; }
.bf-poll-icon { display: block; }

.bf-poll-form-section { margin-top: 16px; padding: 14px 16px; border: 1px solid #e8dcc9; border-radius: 10px; background: linear-gradient(135deg, #fffaf2 0%, #fff7e4 100%); }
.bf-poll-toggle { display: flex; align-items: center; gap: 8px; }
.bf-poll-check { width: 18px; height: 18px; accent-color: var(--brown-medium, #8B4513); cursor: pointer; }
.bf-poll-toggle-label { display: flex; align-items: center; gap: 6px; font-size: 0.92rem; font-weight: 600; color: var(--brown-dark, #5D4037); cursor: pointer; }
.bf-poll-toggle-icon { }
.bf-poll-fields { margin-top: 14px; padding-top: 12px; border-top: 1px solid #e8dcc9; }
.bf-poll-field-label { display: block; font-size: 0.82rem; font-weight: 500; color: var(--brown-medium, #8B4513); margin-bottom: 6px; }
.bf-poll-question-wrap { margin-bottom: 14px; }
.bf-poll-question-input { width: 100%; padding: 10px 12px; border: 1.5px solid #d4c5b0; border-radius: 8px; font-size: 0.95rem; background: #fff; color: var(--color-text, #43302b); }
.bf-poll-question-input:focus { outline: none; border-color: var(--brown-medium, #8B4513); box-shadow: 0 0 0 2px rgba(139, 69, 19, 0.15); }
.bf-poll-option-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.bf-poll-option-input { flex: 1; padding: 9px 12px; border: 1.5px solid #d4c5b0; border-radius: 8px; font-size: 0.9rem; background: #fff; color: var(--color-text, #43302b); }
.bf-poll-option-input:focus { outline: none; border-color: var(--brown-medium, #8B4513); box-shadow: 0 0 0 2px rgba(139, 69, 19, 0.15); }
.bf-poll-remove-btn { padding: 6px 10px; font-size: 0.78rem; color: #b45309; background: none; border: 1px solid #e8dcc9; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.bf-poll-remove-btn:hover { background: #fef3c7; border-color: #b45309; }
.bf-poll-add-btn { display: inline-flex; align-items: center; gap: 4px; padding: 8px 14px; font-size: 0.85rem; font-weight: 500; color: var(--brown-medium, #8B4513); background: #fff; border: 1.5px dashed #d4c5b0; border-radius: 8px; cursor: pointer; margin-top: 4px; }
.bf-poll-add-btn:hover { background: #fffaf2; border-color: var(--brown-medium, #8B4513); }
.bf-poll-add-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.bf-poll-hint { font-size: 0.75rem; color: var(--color-text-muted, #846358); margin-top: 8px; }
.bf-poll-readonly { opacity: 0.85; }
.bf-poll-readonly-header { display: flex; align-items: center; gap: 6px; font-size: 0.92rem; font-weight: 600; color: var(--brown-dark, #5D4037); }
.bf-poll-readonly-content { margin-top: 12px; padding-top: 10px; border-top: 1px solid #e8dcc9; }
.bf-poll-readonly-question { font-size: 0.95rem; font-weight: 600; color: var(--color-text, #43302b); margin-bottom: 8px; }
.bf-poll-readonly-options { list-style: none; padding: 0; margin: 0; }
.bf-poll-readonly-option { padding: 8px 12px; margin-bottom: 4px; background: #fff; border: 1px solid #e8dcc9; border-radius: 6px; font-size: 0.88rem; color: var(--color-text, #43302b); }

.bf-poll-section { margin: 20px 8px; }
.bf-poll-container { padding: 16px 20px; }
.bf-poll-question { font-size: 1.02rem; font-weight: 600; color: #1a1a1a; margin: 0 0 14px 0; line-height: 1.4; }
.bf-poll-option-form, .bf-poll-result-form { display: contents; }
button.bf-poll-result-item, button.bf-poll-option { -webkit-appearance: none; appearance: none; font: inherit; color: inherit; text-align: left; background: #fff; }
.bf-poll-options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.bf-poll-option { display: flex; align-items: center; padding: 12px 16px; border: 2px solid #303030; border-radius: 10px; background: #fff; cursor: pointer; transition: all 0.15s ease; width: 100%; }
.bf-poll-option:hover { border-color: #000; background: #fafafa; }
.bf-poll-option-text { font-size: 0.93rem; color: #1a1a1a; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.bf-poll-options-disabled { opacity: 0.6; }
.bf-poll-options-disabled .bf-poll-option { cursor: default; border-color: #d0d0d0; }
.bf-poll-options-disabled .bf-poll-option:hover { border-color: #d0d0d0; background: #fff; }
.bf-poll-results-list { display: flex; flex-direction: column; gap: 8px; }
.bf-poll-result-item { position: relative; border: 2px solid #303030; border-radius: 10px; padding: 2px; overflow: hidden; cursor: pointer; transition: border-color 0.15s ease; width: 100%; }
.bf-poll-result-item:hover { border-color: #000; }
.bf-poll-result-bg { position: absolute; top: 2px; left: 2px; bottom: 2px; border-radius: 8px; background: rgba(0, 0, 0, 0.06); transition: width 0.6s ease-out; animation: pollBarFill 0.6s ease-out; }
.bf-poll-result-content { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; gap: 12px; }
.bf-poll-result-text { font-size: 0.9rem; font-weight: 500; color: #303030; min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf-poll-result-pct { font-size: 0.9rem; font-weight: 700; color: #303030; flex-shrink: 0; white-space: nowrap; }
.bf-poll-has-voted .bf-poll-result-item { border-color: #e0e0e0; }
.bf-poll-has-voted .bf-poll-result-item:hover { border-color: #c0c0c0; }
.bf-poll-has-voted .bf-poll-result-text { color: #aaa; }
.bf-poll-has-voted .bf-poll-result-pct { color: #aaa; }
.bf-poll-has-voted .bf-poll-result-bg { background: #f1f1f1; }
.bf-poll-has-voted .bf-poll-result-voted { border-color: var(--brown-medium, #8B4513); }
.bf-poll-has-voted .bf-poll-result-voted:hover { border-color: var(--brown-dark, #5D4037); }
.bf-poll-has-voted .bf-poll-result-voted .bf-poll-result-text { color: var(--brown-dark, #5D4037); font-weight: 600; }
.bf-poll-has-voted .bf-poll-result-voted .bf-poll-result-pct { color: var(--brown-medium, #8B4513); }
.bf-poll-has-voted .bf-poll-result-voted .bf-poll-result-bg { background: rgba(139, 69, 19, 0.10); }
@keyframes pollBarFill { from { width: 0; } }
.bf-poll-total { font-size: 0.82rem; color: #4a4a4a; font-weight: 600; margin-top: 6px; padding-left: 3px; }
.bf-poll-login-prompt { text-align: center; padding: 14px; margin-bottom: 12px; background: #faf8f6; border: 1px dashed #e0d6cc; border-radius: 8px; }
.bf-poll-login-prompt p { font-size: 0.88rem; color: #6b6b6b; margin: 0 0 6px 0; }
.bf-poll-login-link { font-size: 0.88rem; font-weight: 600; color: var(--brown-medium, #8B4513); text-decoration: underline; }
@media (max-width: 640px) {
  .bf-poll-section { margin: 16px 4px; }
  .bf-poll-container { padding: 12px 16px; }
  .bf-poll-question { font-size: 0.96rem; }
  .bf-poll-option { padding: 10px 14px; }
  .bf-poll-result-content { padding: 9px 12px; }
}

@keyframes emptyStateWobble {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-3deg); }
  75% { transform: rotate(3deg); }
}

.empty-state-svg {
  animation: emptyStateWobble 3s ease-in-out infinite;
  display: inline-block;
}

/* ==================== Post Image Upload ==================== */
.bf-image-upload-section {
  margin-top: 16px;
}

.bf-image-select-area {
  align-items: center;
  gap: 6px;
  padding: 14px 16px;
  border: 1.5px dashed #e8dcc9;
  border-radius: 10px;
  background: linear-gradient(135deg, #fffaf2 0%, #fff7e4 100%);
  cursor: pointer;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--brown-dark, #5D4037);
  transition: border-color 0.2s, background 0.2s;
}

.bf-image-select-area:not(.hidden) {
  display: flex;
}

.bf-image-select-area:hover {
  border-color: #d4c4a8;
  background: linear-gradient(135deg, #fff5e6 0%, #fff0d6 100%);
}

.bf-image-select-icon {
  flex-shrink: 0;
  color: var(--brown-dark, #5D4037);
}

.bf-image-preview {
  position: relative;
  margin-top: 0.5rem;
}

.bf-image-preview:not(.hidden) {
  display: inline-block;
}

.bf-image-preview-img {
  max-width: 100%;
  max-height: 300px;
  border-radius: 0.5rem;
  object-fit: contain;
}

.bf-image-remove-btn {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  width: 1.5rem;
  height: 1.5rem;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  transition: background 0.2s;
}

.bf-image-remove-btn:not(.hidden) {
  display: flex;
}

.bf-image-remove-btn:hover {
  background: rgba(0, 0, 0, 0.8);
}

.bf-image-spinner {
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 0.5rem;
}

.bf-image-spinner:not(.hidden) {
  display: flex;
}

.bf-image-spinner-icon {
  width: 2rem;
  height: 2rem;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: bf-spin 0.8s linear infinite;
}

@keyframes bf-spin {
  to { transform: rotate(360deg); }
}

.bf-image-status {
  font-size: 0.875rem;
  margin-top: 0.375rem;
  color: #dc2626;
}

/* ==================== Multi-Image Grid ==================== */
.bf-multi-image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}

.bf-multi-image-slot {
  position: relative;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  background: #f5f0e8;
  border: 1.5px solid #e8dcc9;
}

.bf-multi-image-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bf-multi-image-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  transition: background 0.2s;
}

.bf-multi-image-remove:hover {
  background: rgba(0, 0, 0, 0.85);
}

.bf-multi-image-spinner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
}

.bf-multi-image-spinner::after {
  content: '';
  width: 24px;
  height: 24px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: bf-spin 0.8s linear infinite;
}

.bf-multi-image-add-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  border: 1.5px dashed #e8dcc9;
  border-radius: 10px;
  background: linear-gradient(135deg, #fffaf2 0%, #fff7e4 100%);
  cursor: pointer;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--brown-dark, #5D4037);
  transition: border-color 0.2s, background 0.2s;
  width: 100%;
}

.bf-multi-image-add-btn:hover {
  border-color: #d4c4a8;
  background: linear-gradient(135deg, #fff5e6 0%, #fff0d6 100%);
}

.bf-multi-image-add-btn.hidden {
  display: none;
}

.bf-multi-image-hint {
  font-size: 0.8rem;
  font-weight: 400;
  color: #a89279;
  margin-left: 4px;
}

.bf-multi-image-status {
  font-size: 0.875rem;
  margin-top: 0.375rem;
  color: #dc2626;
}

.bf-multi-image-status.hidden {
  display: none;
}

/* Show page gallery */
.bf-show-images-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.bf-show-images-gallery .bf-show-image-img {
  width: 100%;
  border-radius: 8px;
}

.bf-attendance-picker-section { margin-top: 16px; padding: 14px 16px; border: 1px solid #e8dcc9; border-radius: 10px; background: linear-gradient(135deg, #fffaf2 0%, #fff7e4 100%); }
.bf-attendance-toggle { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bf-attendance-toggle-left { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.bf-attendance-check { width: 18px; height: 18px; accent-color: var(--brown-medium, #8B4513); cursor: pointer; }
.bf-attendance-toggle-label { display: flex; align-items: center; gap: 6px; font-size: 0.92rem; font-weight: 600; color: var(--brown-dark, #5D4037); cursor: pointer; }
.bf-attendance-toggle-label:hover { color: #92400e; }
.bf-attendance-toggle-icon { color: #b45309; }
.bf-attendance-hint { font-size: 0.75rem; color: #9ca3af; margin-left: 2px; }
.bf-attendance-panel {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid #e8dcc9;
  max-height: 70vh; overflow-y: auto;
}
.bf-attendance-selected-inline { font-size: 0.75rem; color: #ef4444; font-weight: 600; white-space: nowrap; }
.bf-attendance-filter { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.bf-attendance-filter-btn { background: none; border: none; padding: 2px 8px; font-size: 0.78rem; font-weight: 600; color: #9ca3af; cursor: pointer; border-radius: 4px; transition: all 0.15s ease; }
.bf-attendance-filter-btn:hover { color: #5D4037; }
.bf-attendance-filter-btn.active { color: #5D4037; background: rgba(139,69,19,0.08); }
.bf-attendance-filter-sep { font-size: 0.7rem; color: #d1c4b3; }
.bf-attendance-card {
  position: relative; cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.15s ease;
}
.bf-attendance-card:hover { border-color: #fca5a5; }
.bf-attendance-card.selected { border-color: #ef4444; box-shadow: 0 0 0 1px #ef4444; }
.bf-attendance-card.selected::after {
  content: '✓'; position: absolute; top: 4px; right: 4px;
  width: 20px; height: 20px; background: #ef4444; color: white;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: bold; z-index: 20;
}
.bf-attendance-card.disabled { opacity: 0.4; pointer-events: none; }
.bf-attendance-empty {
  text-align: center; padding: 2rem 1rem; color: #9ca3af; font-size: 0.875rem;
}
.bf-attendance-search { margin-top: 10px; margin-bottom: 6px; }
.bf-attendance-search-input {
  width: 100%; padding: 6px 10px; border: 1px solid #d1c4b3;
  border-radius: 6px; font-size: 0.82rem; background: white;
  outline: none; transition: border-color 0.15s ease;
}
.bf-attendance-search-input:focus { border-color: #8B4513; }
.bf-attendance-search-input::placeholder { color: #b0a090; }

.bf-attached-poops-section {
  margin: 20px 8px;
}

.bf-attached-poops-header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #5D4037;
  margin-bottom: 0.5rem;
}

.bf-attached-poops-icon {
  color: #8B4513;
}
@media (max-width: 640px) {
  .bf-attached-poops-section { margin: 16px 4px; }
}

.nickname-with-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
}

.nickname-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nickname-image-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nickname-image {
  width: 1.1em;
  height: 1.1em;
  border-radius: 0.25rem;
  object-fit: cover;
  vertical-align: middle;
}

/* Sticker text overlay */
.sticker-with-text {
  position: relative;
  display: inline-block;
}

.sticker-overlay-text {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  text-align: center;
  pointer-events: none;
  line-height: 1;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  paint-order: stroke fill;
  -webkit-text-stroke-color: var(--sticker-stroke-color, #5D3A1A);
  -webkit-text-stroke-width: var(--sticker-stroke-width, 2.5px);
}

.sticker-block {
  display: block;
  margin-bottom: 8px;
}
.sticker-block img {
  width: 100px;
  height: 100px;
  display: block;
}

/* Emoticon picker panel (DCInside-style inline) */
.emoticon-panel {
  display: block;
  width: 100%;
  margin-top: 8px;
}
.emoticon-panel-body {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  margin-top: 4px;
}
.emoticon-tabs {
  display: flex;
  gap: 0;
  overflow-x: auto;
  border-bottom: 1px solid #e5e7eb;
  padding: 0 4px;
  -webkit-overflow-scrolling: touch;
}
.emoticon-tab {
  flex-shrink: 0;
  padding: 6px 12px;
  font-size: 12px;
  color: #6b7280;
  border-bottom: 2px solid transparent;
  background: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.emoticon-tab:hover {
  color: #d97706;
}
.emoticon-tab.active {
  color: #d97706;
  border-bottom-color: #d97706;
  font-weight: 600;
}
.emoticon-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  padding: 8px;
  max-height: 200px;
  overflow-y: auto;
}
.emoticon-grid-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.15s;
  background: none;
  border: none;
}
.emoticon-grid-item:hover {
  background-color: #f3f4f6;
}
.emoticon-grid-item img {
  width: 40px;
  height: 40px;
  display: block;
}
.emoticon-panel-footer {
  padding: 6px 8px;
  border-top: 1px solid #e5e7eb;
  text-align: center;
}

/* Site header: sticky only on md+ (mobile header scrolls away) */
.bf-header-sticky {
  position: relative; /* mobile: not sticky */
  top: auto;
  z-index: 50;
}
@media (min-width: 768px) {
  .bf-header-sticky {
    position: sticky;
    top: 0;
  }
}

/* BGM player bar: stick below header */
.bf-bgm-bar-sticky {
  position: sticky;
  top: 0; /* mobile: header not sticky, so top-0 */
  z-index: 40;
}
@media (min-width: 768px) {
  .bf-bgm-bar-sticky {
    top: 64px; /* md: below sticky header h-16(64px) */
  }
}