/* Final interaction, glass and Socials pass; loaded after all legacy layers. */
body:not(.admin-page) .panel > .tabs .tab,
body:not(.admin-page) :is(.menu-toggle, .social-row, .community-board__tabs > button) {
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent;
  transition-duration: 140ms !important;
  transition-timing-function: cubic-bezier(.2,.8,.2,1) !important;
}
body:not(.admin-page) .panel > .tabs .tab:active { transform: scale(.965) !important; }
body:not(.admin-page).is-content-transitioning .panel > .tabs .tab { pointer-events:auto !important; }
body:not(.admin-page) :is(.panel,.profile-card,.mini-status,.glass-card,.settings-card,.list-card,.community-board) {
  border-color:rgba(214,229,255,.16) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 16px 38px rgba(1,5,16,.31) !important;
}
body:not(.admin-page) #tab-socials .list-card {
  background:linear-gradient(145deg,rgba(12,18,35,.90),rgba(8,12,26,.80)) !important;
  border-color:rgba(var(--social-accent),.24) !important;
}
body:not(.admin-page) #tab-socials .social-row {
  min-height:48px !important;
  border-color:rgba(235,242,255,.09) !important;
  background:linear-gradient(100deg,rgba(255,255,255,.065),rgba(255,255,255,.025)) !important;
}
body:not(.admin-page) #tab-socials .social-row:is(:hover,:focus-visible) {
  border-color:rgba(var(--social-accent),.55) !important;
  background:rgba(var(--social-accent),.15) !important;
  transform:translate3d(3px,0,0) !important;
}
body:not(.admin-page) #tab-socials .social-thumb {
  border:1px solid rgba(var(--social-accent),.30) !important;
  background:linear-gradient(145deg,rgba(var(--social-accent),.24),rgba(var(--social-accent),.08)) !important;
}
body:not(.admin-page) #tab-socials .social-row::after { color:rgb(var(--social-accent)) !important; opacity:.9; }
@media (max-width:760px) { body:not(.admin-page) .panel > .tabs .tab { min-height:40px !important; } body:not(.admin-page) #tab-socials .social-row { min-height:46px !important; } }

/* ==========================================================================
   Home Showcase Badges: Restrained Monochromatic Frosted Glass Design
   "web nhiều màu quá dùng màu ở nơi cần dùng thôi"
   ========================================================================== */
body:not(.admin-page) #tab-home :is(#gearGrid, #rankGrid, #gameGrid) :is(.item-card, .rank-card) span,
body:not(.admin-page) #tab-home :is(#gearGrid, #rankGrid, #gameGrid) :is(.item-card, .rank-card) > span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 64px !important;
  min-height: 20px !important;
  box-sizing: border-box !important;
  margin: 0 auto !important;
  padding: 3px 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 7px !important;
  font-size: 0.52rem !important;
  font-weight: 750 !important;
  line-height: 1 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  background: rgba(255, 255, 255, 0.06) !important;
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.02)) !important;
  color: rgba(255, 255, 255, 0.88) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.88) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 3px 10px rgba(0, 0, 0, 0.25) !important;
  text-shadow: none !important;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.45s ease, background-color 0.45s ease, color 0.45s ease !important;
}

body:not(.admin-page) #tab-home :is(#gearGrid, #rankGrid, #gameGrid) :is(.item-card, .rank-card):hover span,
body:not(.admin-page) #tab-home :is(#gearGrid, #rankGrid, #gameGrid) :is(.item-card, .rank-card):hover > span {
  border-color: rgba(255, 255, 255, 0.38) !important;
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  transform: translateY(-1px) !important;
}


/* --- Unified Card Layout Alignment --- */
body:not(.admin-page) #tab-home :is(#rankGrid, #gameGrid) .rank-card {
  display: grid !important;
  grid-template-rows: 92px minmax(34px, auto) 22px !important;
  align-items: center !important;
  align-content: start !important;
}
body:not(.admin-page) #tab-home :is(#rankGrid, #gameGrid) .rank-card > img { grid-row: 1 !important; }
body:not(.admin-page) #tab-home :is(#rankGrid, #gameGrid) .rank-card > b { grid-row: 2 !important; align-self: center !important; }
body:not(.admin-page) #tab-home :is(#rankGrid, #gameGrid) .rank-card > span { grid-row: 3 !important; align-self: end !important; justify-self: center !important; }

body:not(.admin-page) #tab-home #gearGrid .item-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: space-between !important;
}
body:not(.admin-page) #tab-home #gearGrid .item-card > span {
  margin-top: auto !important;
}

/* ==========================================================================
   About Tab: Sở Thích & Đam Mê 3D Candy-Pill Frames (Khung Nổi Bật)
   ========================================================================== */
/* ==========================================================================
   About Tab: Sở Thích & Đam Mê - Luxury Decorated Glass Cards & Badges
   ========================================================================== */
body:not(.admin-page) #tab-about .about-interests {
  position: relative !important;
  overflow: hidden !important;
  padding: 22px 24px 26px !important;
  border-radius: 20px !important;
  background: linear-gradient(145deg, rgba(15, 20, 32, 0.78), rgba(9, 12, 20, 0.88)) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(14px) !important;
}

body:not(.admin-page) #tab-about .about-interests::before,
body:not(.admin-page) #tab-about .about-interests::after {
  display: none !important;
  content: none !important;
}

body:not(.admin-page) #tab-about .about-interests .interests-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  position: relative !important;
  z-index: 1 !important;
  margin-bottom: 14px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding-bottom: 10px !important;
}

body:not(.admin-page) #tab-about .about-interests .interests-header h3 {
  margin: 0 !important;
  padding: 0 !important;
}

body:not(.admin-page) #tab-about .about-interests .interests-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
}

body:not(.admin-page) #tab-about .about-interests .interests-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important;
  gap: 12px !important;
  margin-top: 14px !important;
  position: relative !important;
  z-index: 1 !important;
}

body:not(.admin-page) #tab-about .about-interests .interest-card {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  border-radius: 13px !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.02)) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.24s ease, border-color 0.24s ease, background 0.24s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

body:not(.admin-page) #tab-about .about-interests .interest-card:hover {
  transform: translateY(-3px) scale(1.02) !important;
}

body:not(.admin-page) #tab-about .about-interests .interest-icon-lens {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 11px !important;
  font-size: 1.1rem !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 4px 10px rgba(0, 0, 0, 0.3) !important;
  transition: transform 0.24s ease !important;
}

body:not(.admin-page) #tab-about .about-interests .interest-card:hover .interest-icon-lens {
  transform: scale(1.12) rotate(6deg) !important;
}

body:not(.admin-page) #tab-about .about-interests .interest-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  min-width: 0 !important;
  flex: 1 !important;
}

body:not(.admin-page) #tab-about .about-interests .interest-title {
  font-size: 0.88rem !important;
  font-weight: 750 !important;
  letter-spacing: 0.02em !important;
  color: #ffffff !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body:not(.admin-page) #tab-about .about-interests .interest-desc {
  font-size: 0.73rem !important;
  font-weight: 500 !important;
  color: rgba(226, 232, 240, 0.72) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body:not(.admin-page) #tab-about .about-interests .interest-pulse {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  box-shadow: 0 0 8px currentColor !important;
  animation: pulse-dot 2.2s infinite ease-in-out !important;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 0.4; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.2); }
}

body:not(.admin-page) #tab-about .about-interests .interest-card .interest-icon-lens {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
}
body:not(.admin-page) #tab-about .about-interests .interest-card .interest-pulse {
  color: rgba(255, 255, 255, 0.65) !important;
  background: rgba(255, 255, 255, 0.65) !important;
}
body:not(.admin-page) #tab-about .about-interests .interest-card:hover {
  border-color: rgba(255, 255, 255, 0.28) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

/* ==========================================================================
   About Tab: "Thông Thạo Bản Thân" Skills List (Clean layout without raw "-")
   ========================================================================== */
body:not(.admin-page) #tab-about .skills-list,
body:not(.admin-page) #tab-about #aboutDescription.skills-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  margin: 12px 0 14px !important;
  padding: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

body:not(.admin-page) #tab-about .skills-list .skill-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 12px !important;
  border-radius: 9px !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 3px 10px rgba(0, 0, 0, 0.18) !important;
  backdrop-filter: blur(8px) !important;
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

body:not(.admin-page) #tab-about .skills-list .skill-item:is(:hover, :focus-visible) {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.12), rgba(56, 189, 248, 0.03)) !important;
  border-color: rgba(56, 189, 248, 0.38) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 4px 14px rgba(2, 132, 199, 0.25) !important;
  transform: translateX(4px) !important;
}

body:not(.admin-page) #tab-about .skills-list .skill-item-bullet {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  width: 20px !important;
  height: 20px !important;
  color: #38bdf8 !important;
  filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.65)) !important;
  font-size: 0.95rem !important;
}

body:not(.admin-page) #tab-about .skills-list .skill-item-text {
  font-size: 0.85rem !important;
  font-weight: 550 !important;
  line-height: 1.5 !important;
  color: rgba(255, 255, 255, 0.93) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
}

/* Color highlights for skills categories */
body:not(.admin-page) .skill-category {
  font-weight: 750 !important;
  letter-spacing: 0.02em !important;
  margin-right: 4px !important;
}
body:not(.admin-page) .skill-cat--design { color: #38bdf8 !important; }
body:not(.admin-page) .skill-cat--editor { color: #f472b6 !important; }
body:not(.admin-page) .skill-cat--retouch { color: #c084fc !important; }
body:not(.admin-page) .skill-cat--ai { color: #fb7185 !important; }
body:not(.admin-page) .skill-cat--code { color: #34d399 !important; }
body:not(.admin-page) .skill-cat--soft { color: #fbbf24 !important; }

/* Frosted highlight badges */
body:not(.admin-page) .hl-badge {
  display: inline-block !important;
  padding: 1px 7px !important;
  margin: 0 2px !important;
  border-radius: 6px !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  vertical-align: baseline !important;
}
body:not(.admin-page) .hl-badge.hl-sky {
  background: rgba(56, 189, 248, 0.16) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(56, 189, 248, 0.38) !important;
}
body:not(.admin-page) .hl-badge.hl-pink {
  background: rgba(244, 114, 182, 0.16) !important;
  color: #f472b6 !important;
  border: 1px solid rgba(244, 114, 182, 0.38) !important;
}
body:not(.admin-page) .hl-badge.hl-purple {
  background: rgba(192, 132, 252, 0.16) !important;
  color: #c084fc !important;
  border: 1px solid rgba(192, 132, 252, 0.38) !important;
}
body:not(.admin-page) .hl-badge.hl-rose {
  background: rgba(251, 113, 133, 0.16) !important;
  color: #fb7185 !important;
  border: 1px solid rgba(251, 113, 133, 0.38) !important;
}
body:not(.admin-page) .hl-badge.hl-amber {
  background: rgba(251, 191, 36, 0.16) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(251, 191, 36, 0.38) !important;
}
body:not(.admin-page) .hl-badge.hl-emerald {
  background: rgba(52, 211, 153, 0.16) !important;
  color: #34d399 !important;
  border: 1px solid rgba(52, 211, 153, 0.38) !important;
}
body:not(.admin-page) .hl-badge.hl-blue {
  background: rgba(96, 165, 250, 0.16) !important;
  color: #60a5fa !important;
  border: 1px solid rgba(96, 165, 250, 0.38) !important;
}

/* Glowing text highlight classes for paragraphs & cards */
body:not(.admin-page) .hl-text {
  font-weight: 700 !important;
  filter: drop-shadow(0 0 8px currentColor);
}
body:not(.admin-page) .hl-text--fps { color: #38bdf8 !important; }
body:not(.admin-page) .hl-text--mc { color: #34d399 !important; }
body:not(.admin-page) .hl-text--music { color: #f472b6 !important; }
body:not(.admin-page) .hl-text--web { color: #c084fc !important; }
body:not(.admin-page) .hl-text--gold { color: #fbbf24 !important; }
body:not(.admin-page) .hl-text--rose { color: #fb7185 !important; }

/* ==========================================================================
   About Tab: 4 Small 3D Candy-Pill Frames under "Thông Thạo Bản Thân"
   ========================================================================== */
body:not(.admin-page) #tab-about #aboutSkillsTags {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 9px !important;
  margin-top: 14px !important;
  padding: 0 !important;
}

body:not(.admin-page) #tab-about #aboutSkillsTags .skill-tag,
body:not(.admin-page) #tab-about #aboutSkillsTags > span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 6px 14px !important;
  min-height: 30px !important;
  box-sizing: border-box !important;
  border-radius: 9px !important;
  border: 1px solid rgba(255, 255, 255, 0.32) !important;
  font-size: 0.78rem !important;
  font-weight: 750 !important;
  letter-spacing: 0.03em !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.22s ease, box-shadow 0.22s ease !important;
}

body:not(.admin-page) #tab-about #aboutSkillsTags .skill-tag i,
body:not(.admin-page) #tab-about #aboutSkillsTags > span i {
  font-size: 0.82rem !important;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)) !important;
}

body:not(.admin-page) #tab-about #aboutSkillsTags .skill-tag:is(:hover, :focus-visible),
body:not(.admin-page) #tab-about #aboutSkillsTags > span:is(:hover, :focus-visible) {
  transform: translateY(-2px) scale(1.04) !important;
  filter: brightness(1.12) !important;
}

/* 1. Coder -> Sky Cyan Candy-Pill Frame */
body:not(.admin-page) #tab-about #aboutSkillsTags .skill-tag--coder,
body:not(.admin-page) #tab-about #aboutSkillsTags > span:nth-child(1) {
  border-color: rgba(147, 220, 255, 0.65) !important;
  background: linear-gradient(135deg, #38bdf8, #0284c7) !important;
  color: #f0f9ff !important;
  -webkit-text-fill-color: #f0f9ff !important;
  box-shadow: 0 5px 14px rgba(2, 132, 199, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}

/* 2. Design -> Creative Rose Pink Candy-Pill Frame */
body:not(.admin-page) #tab-about #aboutSkillsTags .skill-tag--design,
body:not(.admin-page) #tab-about #aboutSkillsTags > span:nth-child(2) {
  border-color: rgba(251, 166, 213, 0.65) !important;
  background: linear-gradient(135deg, #f472b6, #db2777) !important;
  color: #fff2f8 !important;
  -webkit-text-fill-color: #fff2f8 !important;
  box-shadow: 0 5px 14px rgba(219, 39, 119, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}

/* 3. Editor -> Royal Violet Candy-Pill Frame */
body:not(.admin-page) #tab-about #aboutSkillsTags .skill-tag--editor,
body:not(.admin-page) #tab-about #aboutSkillsTags > span:nth-child(3) {
  border-color: rgba(216, 180, 254, 0.65) !important;
  background: linear-gradient(135deg, #a855f7, #6d28d9) !important;
  color: #fbf5ff !important;
  -webkit-text-fill-color: #fbf5ff !important;
  box-shadow: 0 5px 14px rgba(109, 40, 217, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}

/* 4. Lofi -> Emerald Grass Green Candy-Pill Frame */
body:not(.admin-page) #tab-about #aboutSkillsTags .skill-tag--lofi,
body:not(.admin-page) #tab-about #aboutSkillsTags > span:nth-child(4) {
  border-color: rgba(133, 232, 151, 0.65) !important;
  background: linear-gradient(135deg, #43b559, #1c703e) !important;
  color: #effff0 !important;
  -webkit-text-fill-color: #effff0 !important;
  box-shadow: 0 5px 14px rgba(10, 79, 38, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.32) !important;
}

/* ==========================================================================
   About Tab: "Tâm sự của tôi" Card Styling
   ========================================================================== */
body:not(.admin-page) #tab-about .side-card #studioText {
  font-size: 0.88rem !important;
  line-height: 1.68 !important;
  color: rgba(255, 255, 255, 0.90) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
  letter-spacing: 0.01em !important;
  margin-top: 12px !important;
}

body:not(.admin-page) #tab-about .side-card #studioTags {
  display: none !important;
}

/* ==========================================================================
   Game Settings Tab: "Thông Thạo Bản Thân" Style Glass Cards & 3D Candy-Pills
   ========================================================================== */
body:not(.admin-page) #tab-settings .settings-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

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

/* Settings Card Container */
body:not(.admin-page) #tab-settings .settings-card {
  position: relative !important;
  overflow: hidden !important;
  min-width: 0 !important;
  padding: 20px 22px 22px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: linear-gradient(145deg, rgba(22, 28, 54, 0.72), rgba(12, 16, 36, 0.65)) !important;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
  backdrop-filter: blur(20px) saturate(1.25) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.25) !important;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.25s ease, box-shadow 0.25s ease !important;
}

body:not(.admin-page) #tab-settings .settings-card:is(:hover, :focus-within) {
  border-color: rgba(56, 189, 248, 0.40) !important;
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 0 24px rgba(56, 189, 248, 0.15) !important;
  transform: translateY(-3px) !important;
}

/* Card Header */
body:not(.admin-page) #tab-settings .settings-card h3 {
  display: flex !important;
  align-items: center !important;
  min-height: 40px !important;
  margin: 0 0 14px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  font-family: "Sono", "Segoe UI", sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 750 !important;
  color: #ffffff !important;
  letter-spacing: 0.03em !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

body:not(.admin-page) #tab-settings .settings-card .setting-title-wrap {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}

body:not(.admin-page) #tab-settings .settings-card .setting-card-logo {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.55)) !important;
}

body:not(.admin-page) #tab-settings .settings-card .setting-svg-logo {
  width: 24px !important;
  height: 24px !important;
}

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

/* Settings Row - Mirroring "Thông Thạo Bản Thân" .skill-item */
body:not(.admin-page) #tab-settings .settings-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 9px 13px !important;
  min-height: 42px !important;
  border-radius: 9px !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 3px 10px rgba(0, 0, 0, 0.18) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  cursor: pointer !important;
  user-select: none !important;
  box-sizing: border-box !important;
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

body:not(.admin-page) #tab-settings .settings-row:is(:hover, :focus-visible) {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.12), rgba(56, 189, 248, 0.03)) !important;
  border-color: rgba(56, 189, 248, 0.38) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 4px 14px rgba(2, 132, 199, 0.25) !important;
  transform: translateX(4px) !important;
}

body:not(.admin-page) #tab-settings .settings-row:active {
  transform: scale(0.985) translateX(2px) !important;
}

/* Left Label (<dt>) with glowing cyan checkmark */
body:not(.admin-page) #tab-settings .settings-row dt {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif !important;
  font-size: 0.86rem !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.94) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
  white-space: nowrap !important;
}

body:not(.admin-page) #tab-settings .settings-row .setting-bullet {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  width: 18px !important;
  height: 18px !important;
  color: #38bdf8 !important;
  filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.65)) !important;
  font-size: 0.90rem !important;
}

/* Right Value (<dd>) - 3D Candy-Pill Badge */
body:not(.admin-page) #tab-settings .settings-row dd,
body:not(.admin-page) #tab-settings .settings-row .setting-val-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 5px 12px !important;
  min-height: 26px !important;
  min-width: 54px !important;
  box-sizing: border-box !important;
  border-radius: 7px !important;
  border: 1px solid rgba(255, 255, 255, 0.32) !important;
  font-family: "Outfit", "Segoe UI", sans-serif !important;
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.32) !important;
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.2s ease, box-shadow 0.2s ease !important;
}

body:not(.admin-page) #tab-settings .settings-row .setting-val-pill i {
  font-size: 0.74rem !important;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)) !important;
}

body:not(.admin-page) #tab-settings .settings-row:hover :is(dd, .setting-val-pill) {
  filter: brightness(1.10) !important;
}

/* Restrained Settings Value Pills - Cohesive Frosted Glass, No Rainbow */
body:not(.admin-page) #tab-settings .settings-row :is(dd, .setting-val-pill) {
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02)) !important;
  color: rgba(255, 255, 255, 0.88) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.88) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 3px 8px rgba(0, 0, 0, 0.22) !important;
  text-shadow: none !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Subtle emerald tone strictly for On state */
body:not(.admin-page) #tab-settings .settings-row :is(dd, .setting-val-pill).setting-val--on,
body:not(.admin-page) #tab-settings .settings-row :is(dd, .setting-val-pill):is([data-setting-val="On"], [data-setting-val="Show"], [data-setting-val="Always On"]) {
  border-color: rgba(74, 222, 128, 0.40) !important;
  background: rgba(74, 222, 128, 0.12) !important;
  color: #86efac !important;
  -webkit-text-fill-color: #86efac !important;
  box-shadow: 0 0 12px rgba(74, 222, 128, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}

/* Subtle neutral tone for Off state */
body:not(.admin-page) #tab-settings .settings-row :is(dd, .setting-val-pill).setting-val--off,
body:not(.admin-page) #tab-settings .settings-row :is(dd, .setting-val-pill)[data-setting-val="Off"] {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  color: rgba(255, 255, 255, 0.48) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.48) !important;
}

/* ==========================================================================
   Code Settings Card & 3D Candy-Pill Action Buttons
   ========================================================================== */
body:not(.admin-page) #tab-settings .settings-card--code .code-setting-input {
  width: 100% !important;
  min-height: 86px !important;
  box-sizing: border-box !important;
  padding: 12px 14px !important;
  margin-bottom: 12px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(56, 189, 248, 0.28) !important;
  background: rgba(10, 15, 32, 0.75) !important;
  color: #38bdf8 !important;
  font-family: "Sono", "Fira Code", monospace !important;
  font-size: 0.88rem !important;
  letter-spacing: 0.04em !important;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.4) !important;
  resize: vertical !important;
  outline: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

body:not(.admin-page) #tab-settings .settings-card--code .code-setting-input:focus {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.35), inset 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

body:not(.admin-page) #tab-settings .code-setting-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

body:not(.admin-page) #tab-settings .code-setting-actions button,
body:not(.admin-page) #tab-settings .code-setting-actions .code-action-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  flex: 1 !important;
  min-height: 36px !important;
  padding: 7px 14px !important;
  border-radius: 8px !important;
  font-family: "Outfit", "Segoe UI", sans-serif !important;
  font-size: 0.80rem !important;
  font-weight: 750 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  user-select: none !important;
  border: 1px solid rgba(255, 255, 255, 0.32) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.2s ease, box-shadow 0.2s ease !important;
}

body:not(.admin-page) #tab-settings .code-setting-actions button i {
  font-size: 0.82rem !important;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)) !important;
}

body:not(.admin-page) #tab-settings .code-setting-actions button:is(:hover, :focus-visible) {
  transform: translateY(-2px) scale(1.03) !important;
  filter: brightness(1.12) !important;
}

body:not(.admin-page) #tab-settings .code-setting-actions button:active {
  transform: scale(0.97) !important;
}

/* Save Button -> Cyan Candy-Pill */
body:not(.admin-page) #tab-settings .code-setting-actions button[data-code-action="save"],
body:not(.admin-page) #tab-settings .code-setting-actions .code-action--save {
  border-color: rgba(147, 220, 255, 0.65) !important;
  background: linear-gradient(135deg, #38bdf8, #0284c7) !important;
  color: #f0f9ff !important;
  -webkit-text-fill-color: #f0f9ff !important;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}

/* Copy Button -> Emerald Green Candy-Pill */
body:not(.admin-page) #tab-settings .code-setting-actions button[data-code-action="copy"],
body:not(.admin-page) #tab-settings .code-setting-actions .code-action--copy {
  border-color: rgba(133, 232, 151, 0.65) !important;
  background: linear-gradient(135deg, #43b559, #1c703e) !important;
  color: #effff0 !important;
  -webkit-text-fill-color: #effff0 !important;
  box-shadow: 0 4px 12px rgba(10, 79, 38, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.32) !important;
}

/* Clear Button -> Rose / Crimson Candy-Pill */
body:not(.admin-page) #tab-settings .code-setting-actions button[data-code-action="clear"],
body:not(.admin-page) #tab-settings .code-setting-actions .code-action--clear {
  border-color: rgba(252, 165, 165, 0.6) !important;
  background: linear-gradient(135deg, #ef4444, #991b1b) !important;
  color: #fff1f2 !important;
  -webkit-text-fill-color: #fff1f2 !important;
  box-shadow: 0 4px 12px rgba(153, 27, 27, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}

/* ==========================================================================
   About Cards Upgraded Presentation & 3D Candy-Pill Badges
   Matches the "Thông Thạo Bản Thân" & "Game Settings" aesthetic
   ========================================================================== */

/* Grid container */
body:not(.admin-page) #tab-about #aboutCards {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-top: 18px !important;
}

@media (max-width: 1080px) {
  body:not(.admin-page) #tab-about #aboutCards {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}

/* Individual Feature Cards */
body:not(.admin-page) #tab-about #aboutCards > article,
body:not(.admin-page) #tab-about #aboutCards > article.about-feature-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 180px !important;
  padding: 16px 14px 18px !important;
  box-sizing: border-box !important;
  border-radius: 16px !important;
  backdrop-filter: blur(20px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(135%) !important;
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.22s ease, border-color 0.22s ease !important;
}

/* Cards: Cohesive Frosted Obsidian Dark Glass (No Rainbow) */
body:not(.admin-page) #tab-about #aboutCards > article:is(:nth-child(1), :nth-child(2), :nth-child(3)) {
  background: linear-gradient(155deg, rgba(22, 25, 36, 0.85), rgba(12, 14, 22, 0.88)) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.45s ease, box-shadow 0.45s ease !important;
}
body:not(.admin-page) #tab-about #aboutCards > article:is(:nth-child(1), :nth-child(2), :nth-child(3)):hover {
  border-color: rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
  transform: translateY(-4px) !important;
}

/* Card Header (h3) */
body:not(.admin-page) #tab-about #aboutCards h3,
body:not(.admin-page) #tab-about #aboutCards .about-card-title {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  margin: 0 0 12px !important;
  padding: 0 0 10px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
  font-family: "Outfit", "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  white-space: normal !important;
  overflow: visible !important;
}

body:not(.admin-page) #tab-about #aboutCards > article:is(:nth-child(1), :nth-child(2), :nth-child(3)) h3 {
  border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}

/* Title Wrap & Text */
body:not(.admin-page) #tab-about #aboutCards .about-card-title-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  white-space: normal !important;
}

body:not(.admin-page) #tab-about #aboutCards .about-card-title-text {
  font-family: "Outfit", "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: clamp(0.82rem, 1.0vw, 0.90rem) !important;
  font-weight: 750 !important;
  color: #ffffff !important;
  letter-spacing: 0.01em !important;
  line-height: 1.25 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* Logos inside cards */
body:not(.admin-page) #tab-about #aboutCards .about-card-logo {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
}
body:not(.admin-page) #tab-about #aboutCards .about-card-logo svg,
body:not(.admin-page) #tab-about #aboutCards .about-card-logo img {
  width: 22px !important;
  height: 22px !important;
  object-fit: contain !important;
}

body:not(.admin-page) #tab-about #aboutCards > article:nth-child(1) .about-card-logo {
  filter: drop-shadow(0 0 8px rgba(74, 222, 128, 0.70)) !important;
}
body:not(.admin-page) #tab-about #aboutCards > article:nth-child(2) .about-card-logo {
  filter: drop-shadow(0 0 8px rgba(244, 114, 182, 0.70)) !important;
}
body:not(.admin-page) #tab-about #aboutCards > article:nth-child(3) .about-card-logo {
  filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.70)) !important;
}

/* Hide any 3D badge on about cards */
body:not(.admin-page) #tab-about #aboutCards .about-card-badge {
  display: none !important;
}

/* Artist Ranking item refinement to prevent wrapping */
body:not(.admin-page) #tab-about .artist-ranking .artist-item {
  padding: 5px 8px !important;
  gap: 8px !important;
}
body:not(.admin-page) #tab-about .artist-ranking .artist-name {
  font-size: 0.82rem !important;
  white-space: nowrap !important;
}
body:not(.admin-page) #tab-about .artist-ranking .artist-crown svg {
  width: 16px !important;
  height: 16px !important;
}

/* Body Text Styling */
body:not(.admin-page) #tab-about #aboutCards p,
body:not(.admin-page) #tab-about #aboutCards .about-card-desc,
body:not(.admin-page) #tab-about #aboutCards .goal-text {
  font-family: "Plus Jakarta Sans", "Inter", sans-serif !important;
  font-size: 0.88rem !important;
  line-height: 1.68 !important;
  color: rgba(235, 242, 255, 0.92) !important;
  margin: 0 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* Highlighting Tokens in text */
body:not(.admin-page) #tab-about #aboutCards .hl-text--mc {
  color: #4ade80 !important;
  font-weight: 700 !important;
  text-shadow: 0 0 10px rgba(74, 222, 128, 0.45) !important;
}

body:not(.admin-page) #tab-about #aboutCards .hl-text--fps {
  color: #fb923c !important;
  font-weight: 700 !important;
  text-shadow: 0 0 10px rgba(251, 146, 60, 0.45) !important;
}

body:not(.admin-page) #tab-about #aboutCards .hl-text--gold {
  color: #fde047 !important;
  font-weight: 700 !important;
  text-shadow: 0 0 10px rgba(253, 224, 71, 0.45) !important;
}

body:not(.admin-page) #tab-about #aboutCards .hl-text--rose {
  color: #fb7185 !important;
  font-weight: 700 !important;
  text-shadow: 0 0 10px rgba(251, 113, 133, 0.45) !important;
}


/* ==========================================================================
   Unified Typography System for All 7 Main Section Titles & Subtitles
   Font stack: "Sono", "Outfit", "Be Vietnam Pro", sans-serif
   Aesthetic: Luminous 3D Bevel Glow (matching "Thông Thạo Bản Thân")
   ========================================================================== */

/* Local font-face definition for Sono */
@font-face {
  font-family: "Sono";
  src: url("../assets/fonts/Sono-Medium.ttf") format("truetype");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

/* --- 1. All 7 Main Section Titles --- */
body:not(.admin-page) :is(
  #tab-home .home-section-title,
  #tab-home .home-section-title [data-content-title],
  #tab-home .library-header .library-toggle__label,
  #tab-about #aboutName,
  #tab-about #aboutName [data-content-title],
  #tab-settings #settingsTitle,
  #tab-settings #settingsTitle [data-content-title],
  #tab-socials #socialsTitle,
  #tab-socials #socialsTitle [data-content-title],
  #tab-waifu #waifuHeading,
  #tab-waifu .waifu-title-line h1,
  #tab-contact #contactTitle,
  #tab-contact #contactTitle [data-content-title],
  #tab-donate #donateTitle,
  #tab-donate .donate-hero h1
) {
  font-family: "Sono", "Outfit", "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: 0.025em !important;
  line-height: 1.25 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72), 0 3px 12px rgba(8, 13, 34, 0.55), 0 0 22px rgba(56, 189, 248, 0.38) !important;
}

/* Sizing refinement for primary headers */
body:not(.admin-page) :is(
  #tab-about #aboutName,
  #tab-settings #settingsTitle,
  #tab-socials #socialsTitle,
  #tab-waifu #waifuHeading,
  #tab-contact #contactTitle,
  #tab-donate #donateTitle
) {
  font-size: clamp(1.45rem, 2.4vw, 1.85rem) !important;
}

body:not(.admin-page) #tab-home .home-sections-wrapper > .home-section-title {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem) !important;
}

body:not(.admin-page) #tab-home .library-header .library-toggle__label {
  font-size: 1.05rem !important;
}

/* Title icon styling and luminous alignment */
body:not(.admin-page) :is(
  .content-title-icon,
  .waifu-page-title-icon,
  #tab-home .home-section-title > .section-icon
) {
  filter: drop-shadow(0 0 8px currentColor) !important;
}

/* --- 2. All 7 Main Section Subtitles --- */
body:not(.admin-page) :is(
  #tab-home .library-header .library-description,
  #tab-about #aboutSubtitle,
  #tab-about .subtitle,
  #tab-settings #settingsSubtitle,
  #tab-settings .subtitle,
  #tab-socials #socialsSubtitle,
  #tab-socials .subtitle,
  #tab-waifu #waifuMastheadSubtitle,
  #tab-waifu .waifu-masthead__subtitle,
  #tab-contact #contactSubtitle,
  #tab-contact .subtitle,
  #tab-donate .donate-hero p,
  #tab-donate .subtitle
) {
  font-family: "Sono", "Outfit", "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-weight: 600 !important;
  font-size: clamp(0.85rem, 1.15vw, 0.92rem) !important;
  letter-spacing: 0.035em !important;
  line-height: 1.55 !important;
  color: rgba(226, 232, 240, 0.90) !important;
  -webkit-text-fill-color: rgba(226, 232, 240, 0.90) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65), 0 0 12px rgba(56, 189, 248, 0.20) !important;
}

/* --- 3. Subtle Color Glow Personalization per Tab (Ambient Accent) --- */
/* Tab 1: Home Sections */
body:not(.admin-page) #tab-home .home-section-title--gear [data-content-title] {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75), 0 3px 12px rgba(8, 13, 34, 0.55), 0 0 22px rgba(34, 199, 214, 0.45) !important;
}
body:not(.admin-page) #tab-home .home-section-title--rank [data-content-title] {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75), 0 3px 12px rgba(8, 13, 34, 0.55), 0 0 22px rgba(230, 169, 26, 0.45) !important;
}
body:not(.admin-page) #tab-home .home-section-title--game [data-content-title] {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75), 0 3px 12px rgba(8, 13, 34, 0.55), 0 0 22px rgba(113, 134, 243, 0.45) !important;
}

/* Tab 2: About */
body:not(.admin-page) #tab-about #aboutName {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75), 0 3px 12px rgba(8, 13, 34, 0.55), 0 0 22px rgba(56, 189, 248, 0.45) !important;
}

/* Tab 3: Settings */
body:not(.admin-page) #tab-settings #settingsTitle {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75), 0 3px 12px rgba(8, 13, 34, 0.55), 0 0 22px rgba(56, 189, 248, 0.45) !important;
}

/* Tab 4: Socials */
body:not(.admin-page) #tab-socials #socialsTitle {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75), 0 3px 12px rgba(8, 13, 34, 0.55), 0 0 22px rgba(56, 189, 248, 0.45) !important;
}

/* Tab 5: Waifu */
body:not(.admin-page) #tab-waifu #waifuHeading {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75), 0 3px 12px rgba(8, 13, 34, 0.55), 0 0 22px rgba(244, 114, 182, 0.45) !important;
}

/* Tab 6: Contact */
body:not(.admin-page) #tab-contact #contactTitle {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75), 0 3px 12px rgba(8, 13, 34, 0.55), 0 0 22px rgba(216, 93, 136, 0.45) !important;
}

/* Tab 7: Donate */
body:not(.admin-page) #tab-donate #donateTitle {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75), 0 3px 12px rgba(8, 13, 34, 0.55), 0 0 22px rgba(255, 112, 164, 0.45) !important;
}

/* ==========================================================================
   Waifu Tab: Compact & High-End Aesthetic Bento Redesign
   ========================================================================== */

/* 1. Waifu Tabs Capsule Switcher */
body:not(.admin-page)[data-tab] #tab-waifu .waifu-tabs,
body:not(.admin-page) #tab-waifu .waifu-tabs {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 4px 6px !important;
  margin: 0 auto 12px !important;
  width: fit-content !important;
  max-width: 100% !important;
  border-radius: 999px !important;
  border: 1px solid var(--tab-card-line) !important;
  background: var(--tab-card-fill) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
  backdrop-filter: blur(3px) saturate(104%) !important;
  -webkit-backdrop-filter: blur(3px) saturate(104%) !important;
  align-self: center !important;
}

body:not(.admin-page) #tab-waifu .waifu-tab {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 14px !important;
  border-radius: 999px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.72) !important;
  font-family: inherit !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

body:not(.admin-page) #tab-waifu .waifu-tab::after {
  display: none !important;
}

body:not(.admin-page) #tab-waifu .waifu-tab span {
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

body:not(.admin-page) #tab-waifu .waifu-tab:hover {
  background: rgba(244, 114, 182, 0.12) !important;
  color: #ffffff !important;
}

body:not(.admin-page) #tab-waifu .waifu-tab small {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 17px !important;
  height: 17px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 0.62rem !important;
  font-weight: 800 !important;
}

body:not(.admin-page) #tab-waifu .waifu-tab.active {
  background: rgba(244, 114, 182, 0.16) !important;
  border-color: rgba(244, 114, 182, 0.38) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(244, 114, 182, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
}

body:not(.admin-page) #tab-waifu .waifu-tab.active small {
  background: rgba(244, 114, 182, 0.25) !important;
  color: #ffffff !important;
}

/* ==========================================================================
   My Waifu Tab: Modern Frosted Glass Bento Editorial Redesign
   "thiết kế lại mục My waifu đi"
   "web nhiều màu quá dùng màu ở nơi cần dùng thôi"
   "animetion chậm chậm hơn nx đi"
   ========================================================================== */

/* 1. Waifu Masthead Banner */
body:not(.admin-page)[data-tab] .panel > #tab-waifu .waifu-masthead,
body:not(.admin-page)[data-tab] #tab-waifu .waifu-masthead,
body:not(.admin-page) #tab-waifu .waifu-masthead {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px 18px !important;
  padding: 14px 20px !important;
  margin: 0 0 14px 0 !important;
  min-height: 0 !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  background: linear-gradient(155deg, rgba(24, 26, 36, 0.88), rgba(14, 15, 24, 0.90)) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
  backdrop-filter: blur(20px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(130%) !important;
  position: relative !important;
  overflow: hidden !important;
  transition: transform 0.48s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.48s ease, box-shadow 0.48s ease !important;
}

body:not(.admin-page)[data-tab] #tab-waifu .waifu-masthead:hover,
body:not(.admin-page) #tab-waifu .waifu-masthead:hover {
  border-color: rgba(255, 255, 255, 0.28) !important;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
}

body:not(.admin-page)[data-tab] #tab-waifu .waifu-masthead__watermark,
body:not(.admin-page) #tab-waifu .waifu-masthead__watermark {
  display: none !important;
}

body:not(.admin-page)[data-tab] #tab-waifu .waifu-masthead__index,
body:not(.admin-page) #tab-waifu .waifu-masthead__index {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
  font-family: "Outfit", sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

body:not(.admin-page)[data-tab] #tab-waifu .waifu-masthead__identity,
body:not(.admin-page) #tab-waifu .waifu-masthead__identity {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin: 0 !important;
  padding: 0 !important;
}

body:not(.admin-page)[data-tab] #tab-waifu .waifu-eyebrow,
body:not(.admin-page)[data-tab] #tab-waifu .waifu-head .waifu-eyebrow,
body:not(.admin-page)[data-tab] #tab-waifu .waifu-head span.waifu-eyebrow,
body:not(.admin-page) #tab-waifu .waifu-eyebrow {
  display: none !important;
}

body:not(.admin-page)[data-tab] #tab-waifu .waifu-title-line,
body:not(.admin-page) #tab-waifu .waifu-title-line {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
}

body:not(.admin-page)[data-tab] #tab-waifu .waifu-masthead #waifuHeading,
body:not(.admin-page)[data-tab] #tab-waifu .waifu-title-line h1,
body:not(.admin-page) #tab-waifu .waifu-masthead #waifuHeading,
body:not(.admin-page) #tab-waifu .waifu-title-line h1 {
  font-family: "Outfit", "Be Vietnam Pro", sans-serif !important;
  font-size: 1.18rem !important;
  font-weight: 800 !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  color: #ffffff !important;
  letter-spacing: 0.01em !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4) !important;
}

body:not(.admin-page)[data-tab] #tab-waifu .waifu-page-title-icon,
body:not(.admin-page) #tab-waifu .waifu-page-title-icon {
  display: none !important;
}

body:not(.admin-page)[data-tab] #tab-waifu .waifu-masthead__subtitle,
body:not(.admin-page) #tab-waifu .waifu-masthead__subtitle {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 9px !important;
  border-radius: 7px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: rgba(255, 255, 255, 0.88) !important;
  font-size: 0.70rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  margin: 0 !important;
}

body:not(.admin-page)[data-tab] #tab-waifu #waifuTags,
body:not(.admin-page) #tab-waifu #waifuTags {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  flex-wrap: wrap !important;
}

body:not(.admin-page)[data-tab] #tab-waifu #waifuTags span,
body:not(.admin-page) #tab-waifu #waifuTags span {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 9px !important;
  border-radius: 7px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  font-size: 0.67rem !important;
  color: rgba(255, 255, 255, 0.82) !important;
  font-weight: 600 !important;
  margin: 0 !important;
  transition: all 0.4s ease !important;
}
body:not(.admin-page)[data-tab] #tab-waifu #waifuTags span:hover,
body:not(.admin-page) #tab-waifu #waifuTags span:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  color: #ffffff !important;
}

body:not(.admin-page)[data-tab] #tab-waifu .waifu-masthead__source,
body:not(.admin-page) #tab-waifu .waifu-masthead__source {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 !important;
  border: none !important;
  margin: 0 0 0 auto !important;
}

body:not(.admin-page)[data-tab] #tab-waifu .waifu-masthead__source b,
body:not(.admin-page) #tab-waifu .waifu-masthead__source b {
  color: rgba(255, 255, 255, 0.90) !important;
  font-size: 0.76rem !important;
  font-weight: 750 !important;
  white-space: nowrap !important;
  margin: 0 !important;
}

body:not(.admin-page)[data-tab] #tab-waifu .waifu-masthead__source span,
body:not(.admin-page) #tab-waifu .waifu-masthead__source span {
  display: none !important;
}

body:not(.admin-page)[data-tab] #tab-waifu .waifu-masthead__source q,
body:not(.admin-page) #tab-waifu .waifu-masthead__source q {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 0.71rem !important;
  color: rgba(255, 255, 255, 0.80) !important;
  font-style: italic !important;
  padding: 3px 10px !important;
  border-radius: 7px !important;
  background: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  margin: 0 !important;
}

/* 2. Modern Frosted Bento Grid */
body:not(.admin-page)[data-tab] #tab-waifu :is(.waifu-layout, .waifu-card, .glass-card, .waifu-portrait-card, .waifu-story, .waifu-notes, .waifu-memories, .waifu-love, .moment-grid, .memory-card),
body:not(.admin-page) #tab-waifu :is(.waifu-layout, .waifu-card, .glass-card, .waifu-portrait-card, .waifu-story, .waifu-notes, .waifu-memories, .waifu-love, .moment-grid, .memory-card) {
  content-visibility: visible !important;
  contain-intrinsic-size: none !important;
  contain: none !important;
}

body:not(.admin-page)[data-tab] #tab-waifu .waifu-layout,
body:not(.admin-page) #tab-waifu .waifu-layout {
  display: grid !important;
  grid-template-columns: 280px minmax(0, 1fr) !important;
  grid-template-areas:
    "portrait story"
    "portrait memories"
    "notes    love" !important;
  gap: 14px !important;
  align-items: stretch !important;
}

body:not(.admin-page)[data-tab] .panel > #tab-waifu .waifu-layout > :is(.waifu-card, .glass-card),
body:not(.admin-page)[data-tab] #tab-waifu .waifu-layout > :is(.waifu-card, .glass-card),
body:not(.admin-page) #tab-waifu .waifu-layout > :is(.waifu-card, .glass-card) {
  min-width: 0 !important;
  min-inline-size: 0 !important;
  padding: 16px 18px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  background: linear-gradient(155deg, rgba(22, 24, 34, 0.86), rgba(13, 14, 22, 0.88)) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(20px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(130%) !important;
  box-sizing: border-box !important;
  transition: transform 0.72s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.72s ease, box-shadow 0.72s ease, background 0.72s ease !important;
}

body:not(.admin-page)[data-tab] .panel > #tab-waifu .waifu-layout > :is(.waifu-card, .glass-card):is(:hover, :focus-within),
body:not(.admin-page)[data-tab] #tab-waifu .waifu-layout > :is(.waifu-card, .glass-card):is(:hover, :focus-within),
body:not(.admin-page) #tab-waifu .waifu-layout > :is(.waifu-card, .glass-card):is(:hover, :focus-within) {
  border-color: rgba(255, 255, 255, 0.28) !important;
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
  transform: translateY(-5px) !important;
}

/* 3. Portrait Card */
body:not(.admin-page) #tab-waifu .waifu-portrait-card {
  grid-area: portrait !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: 14px !important;
  justify-content: center !important;
}

body:not(.admin-page) #tab-waifu .waifu-portrait-card__label {
  display: none !important;
}

body:not(.admin-page)[data-tab] #tab-waifu .waifu-media,
body:not(.admin-page) #tab-waifu .waifu-media {
  width: 100% !important;
  aspect-ratio: 3 / 4 !important;
  max-height: 350px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.38) !important;
  margin-bottom: 12px !important;
  background: #000 !important;
}

body:not(.admin-page)[data-tab] #tab-waifu .waifu-media :is(video, img),
body:not(.admin-page) #tab-waifu .waifu-media :is(video, img) {
  width: 100% !important;
  height: 100% !important;
  max-height: 350px !important;
  aspect-ratio: 3 / 4 !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.72s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body:not(.admin-page) #tab-waifu .waifu-portrait-card:hover .waifu-media :is(video, img) {
  transform: scale(1.04) !important;
}

body:not(.admin-page) #tab-waifu .waifu-portrait-card h2 {
  font-family: "Outfit", "Be Vietnam Pro", sans-serif !important;
  font-size: 1.10rem !important;
  font-weight: 800 !important;
  margin: 0 0 3px !important;
  color: #ffffff !important;
  letter-spacing: -0.01em !important;
}

body:not(.admin-page) #tab-waifu .waifu-portrait-card p#waifuRole {
  font-size: 0.74rem !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.72) !important;
  margin: 0 !important;
}

body:not(.admin-page) #tab-waifu .waifu-portrait-card__meta {
  display: inline-flex !important;
  margin-top: 8px !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  font-size: 0.64rem !important;
  font-weight: 750 !important;
  color: rgba(255, 255, 255, 0.75) !important;
  letter-spacing: 0.05em !important;
}

/* 4. Story Card */
body:not(.admin-page) #tab-waifu .waifu-story {
  grid-area: story !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

body:not(.admin-page) #tab-waifu .waifu-story h3 {
  font-family: "Outfit", "Be Vietnam Pro", sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin: 0 0 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

body:not(.admin-page) #tab-waifu .waifu-story p#waifuDescription {
  font-size: 0.80rem !important;
  line-height: 1.58 !important;
  color: rgba(255, 255, 255, 0.90) !important;
  margin: 0 0 8px !important;
}

body:not(.admin-page) #tab-waifu .waifu-story p#waifuDescriptionExtra {
  font-size: 0.77rem !important;
  line-height: 1.52 !important;
  color: rgba(255, 255, 255, 0.80) !important;
  margin: 0 0 12px !important;
  padding-left: 10px !important;
  border-left: 2px solid rgba(255, 255, 255, 0.35) !important;
}

body:not(.admin-page) #tab-waifu .waifu-metadata {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  flex-wrap: wrap !important;
  margin-top: auto !important;
  padding-top: 10px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body:not(.admin-page) #tab-waifu .waifu-metadata > div {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 10px !important;
  border-radius: 7px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  font-size: 0.68rem !important;
}

body:not(.admin-page) #tab-waifu .waifu-metadata__icon {
  color: rgba(255, 255, 255, 0.80) !important;
  font-size: 0.7rem !important;
}

body:not(.admin-page) #tab-waifu .waifu-metadata span {
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
}

body:not(.admin-page) #tab-waifu .waifu-metadata b {
  color: rgba(255, 255, 255, 0.95) !important;
  font-weight: 650 !important;
}

/* 5. Personality Notes Card */
body:not(.admin-page) #tab-waifu .waifu-notes {
  grid-area: notes !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

body:not(.admin-page) #tab-waifu .waifu-notes h3 {
  font-family: "Outfit", "Be Vietnam Pro", sans-serif !important;
  font-size: 0.90rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin: 0 0 10px !important;
}

body:not(.admin-page) #tab-waifu #waifuDetails {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

body:not(.admin-page) #tab-waifu #waifuDetails .waifu-note {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 12px !important;
  min-height: 42px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body:not(.admin-page) #tab-waifu #waifuDetails .waifu-note:hover {
  background: rgba(255, 255, 255, 0.09) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  transform: translateX(3px) !important;
}

body:not(.admin-page) #tab-waifu #waifuDetails .waifu-note > span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  flex-shrink: 0 !important;
}

body:not(.admin-page) #tab-waifu #waifuDetails .waifu-note > div {
  flex: 1 !important;
  min-width: 0 !important;
}

body:not(.admin-page) #tab-waifu #waifuDetails .waifu-note p {
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.90) !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

/* 6. Memories Card */
body:not(.admin-page) #tab-waifu .waifu-memories {
  grid-area: memories !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

body:not(.admin-page) #tab-waifu .waifu-memories h3 {
  font-family: "Outfit", "Be Vietnam Pro", sans-serif !important;
  font-size: 0.90rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin: 0 0 10px !important;
}

body:not(.admin-page)[data-tab] #tab-waifu .moment-grid,
body:not(.admin-page) #tab-waifu .moment-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  flex: 1 !important;
  min-height: 0 !important;
}

body:not(.admin-page) #tab-waifu .memory-card {
  position: relative !important;
  aspect-ratio: 4 / 3 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: #000 !important;
  cursor: pointer !important;
  transition: transform 0.72s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.72s ease, box-shadow 0.72s ease !important;
}

body:not(.admin-page) #tab-waifu .memory-card:hover {
  transform: translateY(-4px) scale(1.035) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45) !important;
}

body:not(.admin-page) #tab-waifu .memory-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.72s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
body:not(.admin-page) #tab-waifu .memory-card:hover img {
  transform: scale(1.06) !important;
}

/* 7. Why I Love Card */
body:not(.admin-page) #tab-waifu .waifu-love {
  grid-area: love !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

body:not(.admin-page) #tab-waifu .waifu-love h3 {
  font-family: "Outfit", "Be Vietnam Pro", sans-serif !important;
  font-size: 0.90rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin: 0 0 4px !important;
}

body:not(.admin-page) #tab-waifu .waifu-love p#waifuLoveIntro {
  font-size: 0.72rem !important;
  color: rgba(255, 255, 255, 0.65) !important;
  font-style: italic !important;
  margin: 0 0 10px !important;
}

body:not(.admin-page) #tab-waifu #waifuLove {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px 10px !important;
}

body:not(.admin-page) #tab-waifu .waifu-reason {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  min-height: 44px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  transition: all 0.72s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body:not(.admin-page) #tab-waifu .waifu-reason:hover {
  background: rgba(255, 255, 255, 0.09) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25) !important;
}

body:not(.admin-page) #tab-waifu .waifu-reason > span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  flex-shrink: 0 !important;
}

body:not(.admin-page) #tab-waifu .waifu-reason p {
  font-size: 0.74rem !important;
  font-weight: 550 !important;
  color: rgba(255, 255, 255, 0.90) !important;
  margin: 0 !important;
  line-height: 1.35 !important;
}

/* Responsive Waifu layout */
@media (max-width: 820px) {
  body:not(.admin-page)[data-tab] #tab-waifu .waifu-layout,
  body:not(.admin-page) #tab-waifu .waifu-layout {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "portrait"
      "story"
      "memories"
      "notes"
      "love" !important;
    gap: 12px !important;
  }

  body:not(.admin-page)[data-tab] #tab-waifu .waifu-masthead,
  body:not(.admin-page) #tab-waifu .waifu-masthead {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 14px 16px !important;
  }

  body:not(.admin-page)[data-tab] #tab-waifu #waifuLove,
  body:not(.admin-page) #tab-waifu #waifuLove {
    grid-template-columns: 1fr !important;
  }
}




/* ==========================================================================
   Skills Pane: White Accent Theme & Extra Rounded Corners (Bo Góc)
   "khung xanh chuyển về khung trắng, hình vuông chuyển thành bo góc"
   ========================================================================== */

/* Info cards: white accent labels instead of blue */
body:not(.admin-page) #aboutPaneSkills .about-info-card {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 16px !important;
}

body:not(.admin-page) #aboutPaneSkills .about-info-card:hover {
  background: rgba(255, 255, 255, 0.10) !important;
  border-color: rgba(255, 255, 255, 0.32) !important;
}

body:not(.admin-page) #aboutPaneSkills .about-info-card small {
  color: rgba(255, 255, 255, 0.68) !important;
}

body:not(.admin-page) #aboutPaneSkills .about-info-card b {
  color: #ffffff !important;
}

/* Title: white accent */
body:not(.admin-page) #aboutPaneSkills .about-skills-title .studio-title-text {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35) !important;
}

body:not(.admin-page) #aboutPaneSkills .about-skills-title .studio-title-logo svg path {
  stroke: #ffffff !important;
}

/* Skill items: extra rounded corners */
body:not(.admin-page) #aboutPaneSkills .skills-list .skill-item {
  border-radius: 14px !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
}

body:not(.admin-page) #aboutPaneSkills .skills-list .skill-item:is(:hover, :focus-visible) {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.04)) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 4px 14px rgba(0, 0, 0, 0.22) !important;
}

/* Tags: white theme with rounded corners */
body:not(.admin-page) #aboutPaneSkills .tag-row span {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 12px !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

body:not(.admin-page) #aboutPaneSkills .tag-row span i {
  color: rgba(255, 255, 255, 0.65) !important;
}

/* Highlight badges: softer colors to match white theme */
body:not(.admin-page) #aboutPaneSkills .hl-badge {
  border-radius: 8px !important;
}

/* ==========================================================================
   Profile & Skills: White Accent & Rounded Corners (Khung Viền Trắng Bo Góc)
   "khung kỹ năng và hồ sơ có cái khung bo góc xanh ấy thay bằng màu trắng hoặc cái gì đó khác đi"
   ========================================================================== */

/* Subtab Active Button: Pure White / Frosted Glass Theme instead of Sky Blue */
body:not(.admin-page) #tab-about .about-subtab-btn.is-active {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.48) !important;
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.32) !important;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.6) !important;
}

body:not(.admin-page) #tab-about .about-subtab-btn.is-active svg {
  color: #ffffff !important;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.75)) !important;
  transform: scale(1.08) !important;
}

body:not(.admin-page) #tab-about .about-subtabs {
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border-radius: 14px !important;
  padding: 3px !important;
}

/* Profile Card & Avatar: White Accent Frame */
body:not(.admin-page) .avatar-wrap,
body:not(.admin-page) .avatar-wrap.profile-avatar {
  border: 3px solid rgba(255, 255, 255, 0.88) !important;
  box-shadow: 0 0 0 4px rgba(7, 14, 36, 0.7), 0 0 28px rgba(255, 255, 255, 0.32) !important;
}

body:not(.admin-page) .sidebar > .profile-card {
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45), 0 0 26px rgba(255, 255, 255, 0.08) !important;
}

body:not(.admin-page) #tab-about .wide-card {
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

/* Pane Profile: White Accent Theme matching Skills */
body:not(.admin-page) #aboutPaneProfile .about-info-card {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 16px !important;
}

body:not(.admin-page) #aboutPaneProfile .about-info-card:hover {
  background: rgba(255, 255, 255, 0.10) !important;
  border-color: rgba(255, 255, 255, 0.32) !important;
}

body:not(.admin-page) #aboutPaneProfile .about-skills-title .studio-title-text {
  color: #ffffff !important;
}

body:not(.admin-page) #aboutPaneProfile .about-skills-title .studio-title-logo svg path {
  stroke: #ffffff !important;
}

body:not(.admin-page) #aboutPaneProfile .skills-list .skill-item {
  border-radius: 14px !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
}

/* ==========================================================================
   Hide "Tâm sự", "3 khung ở dưới" & "Sở thích đam mê" in Skills Mode
   "mục kỹ năng ko đc có mục tâm sự của tôi và 3 khung ở dưới và sở thích đam mê"
   ========================================================================== */

body:not(.admin-page) #tab-about.is-skills-mode .side-card,
body:not(.admin-page) #tab-about.is-skills-mode #aboutCards,
body:not(.admin-page) #tab-about.is-skills-mode .about-interests,
body:not(.admin-page) #tab-about[data-about-subtab="skills"] .side-card,
body:not(.admin-page) #tab-about[data-about-subtab="skills"] #aboutCards,
body:not(.admin-page) #tab-about[data-about-subtab="skills"] .about-interests {
  display: none !important;
}

body:not(.admin-page) #tab-about.is-skills-mode .about-layout,
body:not(.admin-page) #tab-about[data-about-subtab="skills"] .about-layout {
  display: block !important;
  grid-template-columns: 1fr !important;
  width: 100% !important;
}

body:not(.admin-page) #tab-about.is-skills-mode .wide-card,
body:not(.admin-page) #tab-about[data-about-subtab="skills"] .wide-card {
  width: 100% !important;
  max-width: 100% !important;
}

/* ==========================================================================
   Contact Me: BUMP & Locket Quick Badges
   "t có link BUMP và Locket bạn thêm vào mục socials đi thêm ở contact me nhé"
   ========================================================================== */

.contact-quick-socials {
  display: flex !important;
  gap: 10px !important;
  margin: 12px 0 16px !important;
  flex-wrap: wrap !important;
}

.contact-quick-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 14px !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 650 !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, border-color 0.25s ease !important;
}

.contact-quick-badge--bump {
  background: linear-gradient(135deg, rgba(138, 43, 226, 0.22), rgba(112, 0, 255, 0.16)) !important;
  border: 1px solid rgba(168, 85, 247, 0.38) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(112, 0, 255, 0.15) !important;
}

.contact-quick-badge--bump:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(168, 85, 247, 0.65) !important;
  box-shadow: 0 6px 20px rgba(112, 0, 255, 0.28) !important;
}

.contact-quick-badge--locket {
  background: linear-gradient(135deg, rgba(255, 204, 0, 0.18), rgba(245, 158, 11, 0.12)) !important;
  border: 1px solid rgba(255, 204, 0, 0.40) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(255, 204, 0, 0.12) !important;
}

.contact-quick-badge--locket:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(255, 204, 0, 0.70) !important;
  box-shadow: 0 6px 20px rgba(255, 204, 0, 0.25) !important;
}

.contact-quick-badge__icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 6px !important;
  overflow: hidden !important;
}

.contact-quick-badge__label {
  font-weight: 800 !important;
}

.contact-quick-badge__handle {
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 11px !important;
}

.contact-quick-badge i {
  font-size: 9px !important;
  opacity: 0.6 !important;
  margin-left: 2px !important;
}

/* ==========================================================================
   Bottom Bar / Footer Redesign: Home, Hướng Dẫn, Steam, Instagram
   "cái thanh dài ở dưới cùng ấy có home hướng dẫn stream hay instargram ấy
    thiết kế lại khung và màu chữ logo các thứ đi"
   ========================================================================== */

body:not(.admin-page) .shell > .footer.footer-card {
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg, rgba(17, 20, 32, 0.78), rgba(27, 23, 42, 0.70)) !important;
  backdrop-filter: blur(22px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(140%) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
  padding: 22px 26px !important;
}

body:not(.admin-page) .footer-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}

body:not(.admin-page) .footer-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
}

body:not(.admin-page) .footer-avatar {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255, 255, 255, 0.85) !important;
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.22) !important;
}

body:not(.admin-page) #footerName {
  color: #ffffff !important;
  font-size: 1.08rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.3) !important;
}

body:not(.admin-page) #footerSubtitle {
  color: rgba(226, 232, 240, 0.75) !important;
  font-size: 0.82rem !important;
}

body:not(.admin-page) .footer-nav {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}

body:not(.admin-page) .footer-nav a,
body:not(.admin-page) .footer-nav button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 42px !important;
  padding: 0 16px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.055) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  color: #ffffff !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  text-decoration: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
}

body:not(.admin-page) .footer-nav a:hover,
body:not(.admin-page) .footer-nav button:hover,
body:not(.admin-page) .footer-nav a:focus-visible,
body:not(.admin-page) .footer-nav button:focus-visible {
  transform: translateY(-2px) !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

/* Distinctive Icon Colors in Footer */
body:not(.admin-page) .footer-nav a .fa-house {
  color: #38bdf8 !important;
  filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.65)) !important;
}

body:not(.admin-page) .footer-nav .footer-guide-link .fa-circle-question {
  color: #fbbf24 !important;
  filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.65)) !important;
}

body:not(.admin-page) .footer-nav a .fa-steam {
  color: #66c0f4 !important;
  filter: drop-shadow(0 0 6px rgba(102, 192, 244, 0.65)) !important;
}

body:not(.admin-page) .footer-nav a .fa-instagram {
  color: #f472b6 !important;
  filter: drop-shadow(0 0 6px rgba(244, 114, 182, 0.65)) !important;
}

/* ==========================================================================
   Community Quick Menu Redesign: Sleek Glass Floating Dropdown
   "cái mục community ở trên cùng kia lúc mở ra nhìn xấu quá bạn thiết kế lại khung cho nó đi"
   ========================================================================== */

body:not(.admin-page) .community-quick-menu,
body:not(.admin-page) .community-island > .community-quick-menu {
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 26px !important;
  background: linear-gradient(175deg, rgba(24, 21, 36, 0.92), rgba(14, 12, 22, 0.96)) !important;
  backdrop-filter: blur(28px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(150%) !important;
  box-shadow: 0 32px 88px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
  transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1), transform 750ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body:not(.admin-page) .community-island__preview-header {
  padding: 16px 18px 10px !important;
}

body:not(.admin-page) .community-island__preview-header h2 {
  color: #ffffff !important;
  font-weight: 800 !important;
}

body:not(.admin-page) .community-island__site-nav,
body:not(.admin-page) .community-quick-menu nav {
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.025) !important;
  padding: 10px !important;
  gap: 8px !important;
}

body:not(.admin-page) .community-island__content-link[data-community-open="feed"] {
  background: linear-gradient(135deg, rgba(234, 162, 200, 0.22), rgba(168, 85, 247, 0.16)) !important;
  border: 1px solid rgba(234, 162, 200, 0.38) !important;
  color: #ffffff !important;
  font-weight: 750 !important;
  box-shadow: 0 4px 14px rgba(234, 162, 200, 0.12) !important;
}

body:not(.admin-page) .community-island__content-link[data-community-open="gallery"] {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.22), rgba(99, 102, 241, 0.16)) !important;
  border: 1px solid rgba(56, 189, 248, 0.38) !important;
  color: #ffffff !important;
  font-weight: 750 !important;
  box-shadow: 0 4px 14px rgba(56, 189, 248, 0.12) !important;
}

body:not(.admin-page) .community-island__site-nav button,
body:not(.admin-page) .community-quick-menu nav button {
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.045) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-weight: 650 !important;
  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease !important;
}

body:not(.admin-page) .community-island__site-nav button:hover,
body:not(.admin-page) .community-quick-menu nav button:hover {
  transform: translateY(-2px) !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
}

/* ==========================================================================
   Global Slower, Softer Animations
   "cách hiệu ứng mở ra đóng lại animation chậm hơn nữa nữa đi"
   ========================================================================== */

body:not(.admin-page) .community-quick-menu {
  transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1), transform 750ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body:not(.admin-page) .community-quick-menu.is-open {
  transition-duration: 750ms, 820ms !important;
}

body:not(.admin-page) .community-quick-menu.is-closing {
  transition-duration: 520ms, 580ms !important;
}

body:not(.admin-page) .about-pane.is-leaving {
  animation-duration: 0.65s !important;
}

body:not(.admin-page) .about-pane.is-active:not(.is-leaving) {
  animation-duration: 1.55s !important;
}

/* ==========================================================================
   1. Interactive Polish & Click Zoom Reset
   "click vào chọn lúc quay lại web chỗ click sẽ hiện về như ban đầu ko phóng to như lúc click , click xong ko giữ nguyên như z"
   ========================================================================== */
body:not(.admin-page)[data-tab] :is(
  #tab-home #gearGrid > .item-card,
  #tab-home #rankGrid > .rank-card,
  #tab-home #gameGrid > .rank-card,
  #tab-about [data-about-clickable],
  #tab-settings [data-setting-clickable],
  #tab-socials .social-row,
  #tab-waifu [data-waifu-surface],
  #tab-waifu [data-waifu-click],
  .library-post,
  .item-card,
  .rank-card,
  .about-subtab-btn,
  .social-row,
  .settings-row
):not(:hover) {
  transform: translate3d(0, 0, 0) scale(1) !important;
  transition: transform 0.72s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.72s ease, border-color 0.72s ease, background 0.72s ease !important;
}

body:not(.admin-page)[data-tab] :is(
  #tab-home #gearGrid > .item-card,
  #tab-home #rankGrid > .rank-card,
  #tab-home #gameGrid > .rank-card
):not(:hover) > :is(img, svg) {
  transform: translate3d(0, 0, 0) scale(1) rotate(0deg) !important;
  transition: transform 0.72s cubic-bezier(0.16, 1, 0.3, 1), filter 0.72s ease !important;
}

/* ==========================================================================
   2. About: Remove Horizontal Rectangles (Info-Strip) & Text Color Polish
   "mục hình chữ nhật ngang ở hồ sơ kỹ năng là gì vậy ?? xóa đi , thay màu chữ đi"
   ========================================================================== */
body:not(.admin-page) #tab-about :is(
  .about-location-link,
  .info-strip,
  #aboutInfoStrip,
  #aboutSkillsInfoStrip,
  .about-skills-strip
) {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  pointer-events: none !important;
}

body:not(.admin-page) #tab-about p[style*="Nói chung là"] {
  display: none !important;
}

body:not(.admin-page) #tab-about .content-title-with-icon,
body:not(.admin-page) #tab-about #aboutName,
body:not(.admin-page) #tab-about #aboutSkillsTitle .studio-title-text,
body:not(.admin-page) #tab-about #skillsDetailTitle .studio-title-text {
  color: #ffffff !important;
  text-shadow: 0 0 16px rgba(255, 255, 255, 0.45) !important;
}

body:not(.admin-page) #tab-about #aboutSubtitle {
  color: rgba(226, 232, 240, 0.88) !important;
}

body:not(.admin-page) #tab-about .skills-list .skill-item-text {
  color: #f8fafc !important;
  font-size: 0.84rem !important;
  line-height: 1.5 !important;
}

body:not(.admin-page) #tab-about .skill-category {
  font-weight: 750 !important;
}

/* Category Restrained Accents */
body:not(.admin-page) #tab-about .skill-category {
  color: rgba(255, 255, 255, 0.92) !important;
  text-shadow: none !important;
}

/* ==========================================================================
   3. Home: Hover Cards Lift & Logos Enlarge & Rotate Left/Right Randomly
   "Competitive Ranks sao mục này ko có hiệu ứng như các mục trên dưới"
   "animetion chậm chậm hơn nx đi"
   ========================================================================== */
body:not(.admin-page) #tab-home :is(#gearGrid .item-card, #rankGrid .rank-card, #gameGrid .rank-card),
body:not(.admin-page)[data-tab] #tab-home :is(#gearGrid .item-card, #rankGrid .rank-card, #gameGrid .rank-card),
body:not(.admin-page) .home-showcase :is(#gearGrid .item-card, #rankGrid .rank-card, #gameGrid .rank-card) {
  transition: transform 0.82s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.82s ease, border-color 0.82s ease, background 0.82s ease !important;
  position: relative !important;
  overflow: hidden !important;
  cursor: pointer !important;
}

/* Glass shine sweep pseudo-element on all home cards including Competitive Ranks */
body:not(.admin-page) #tab-home :is(#gearGrid, #rankGrid, #gameGrid) :is(.item-card, .rank-card)::after,
body:not(.admin-page) .home-showcase :is(#gearGrid, #rankGrid, #gameGrid) :is(.item-card, .rank-card)::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: -60% auto -60% -50% !important;
  z-index: 4 !important;
  width: 32% !important;
  height: 220% !important;
  border: 0 !important;
  border-radius: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.22) 50%, transparent 100%) !important;
  transform: translate3d(-240%, 0, 0) rotate(22deg) !important;
  transition: transform 1.15s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease !important;
}

body:not(.admin-page) #tab-home :is(#gearGrid, #rankGrid, #gameGrid) :is(.item-card, .rank-card):hover::after,
body:not(.admin-page) .home-showcase :is(#gearGrid, #rankGrid, #gameGrid) :is(.item-card, .rank-card):hover::after {
  opacity: 1 !important;
  transform: translate3d(680%, 0, 0) rotate(22deg) !important;
}

/* Competitive Ranks Artwork & Card Dimensions Normalization */
body:not(.admin-page) .home-showcase #rankGrid .rank-card,
body:not(.admin-page) #tab-home #rankGrid .rank-card {
  min-height: 166px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 14px 10px !important;
}

body:not(.admin-page) .home-showcase #rankGrid .rank-card img,
body:not(.admin-page) #tab-home #rankGrid .rank-card img,
body:not(.admin-page) .home-showcase #rankGrid .rank-card:nth-child(n) img {
  width: min(100%, 96px) !important;
  max-width: 96px !important;
  height: 72px !important;
  margin: 0 auto 6px !important;
  object-fit: contain !important;
  object-position: center !important;
}

body:not(.admin-page) #tab-home :is(#gearGrid .item-card, #rankGrid .rank-card, #gameGrid .rank-card):hover,
body:not(.admin-page)[data-tab] #tab-home :is(#gearGrid .item-card, #rankGrid .rank-card, #gameGrid .rank-card):hover,
body:not(.admin-page) .home-showcase :is(#gearGrid .item-card, #rankGrid .rank-card, #gameGrid .rank-card):hover {
  transform: translateY(-8px) scale(1.038) !important;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.48), 0 0 22px rgba(255, 255, 255, 0.10) !important;
  border-color: rgba(255, 255, 255, 0.32) !important;
  background: rgba(255, 255, 255, 0.09) !important;
}

body:not(.admin-page) #tab-home :is(#gearGrid .item-card, #rankGrid .rank-card, #gameGrid .rank-card) > :is(img, svg),
body:not(.admin-page)[data-tab] #tab-home :is(#gearGrid .item-card, #rankGrid .rank-card, #gameGrid .rank-card) > :is(img, svg),
body:not(.admin-page) .home-showcase :is(#gearGrid .item-card, #rankGrid .rank-card, #gameGrid .rank-card) > :is(img, svg) {
  transition: transform 0.82s cubic-bezier(0.16, 1, 0.3, 1), filter 0.82s ease !important;
  will-change: transform;
}

body:not(.admin-page) #tab-home :is(#gearGrid .item-card, #rankGrid .rank-card, #gameGrid .rank-card):hover > :is(img, svg),
body:not(.admin-page)[data-tab] #tab-home :is(#gearGrid .item-card, #rankGrid .rank-card, #gameGrid .rank-card):hover > :is(img, svg),
body:not(.admin-page) .home-showcase :is(#gearGrid .item-card, #rankGrid .rank-card, #gameGrid .rank-card):hover > :is(img, svg) {
  animation: none !important;
  transform: translateY(-5px) scale(1.20) rotate(var(--home-hover-rotate, 8.5deg)) !important;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.52)) brightness(1.15) !important;
}

body:not(.admin-page) #tab-home :is(#gearGrid .item-card, #rankGrid .rank-card, #gameGrid .rank-card):nth-child(4n+1):hover > :is(img, svg) {
  --home-hover-rotate: -8.5deg;
}
body:not(.admin-page) #tab-home :is(#gearGrid .item-card, #rankGrid .rank-card, #gameGrid .rank-card):nth-child(4n+2):hover > :is(img, svg) {
  --home-hover-rotate: 8.5deg;
}
body:not(.admin-page) #tab-home :is(#gearGrid .item-card, #rankGrid .rank-card, #gameGrid .rank-card):nth-child(4n+3):hover > :is(img, svg) {
  --home-hover-rotate: -10deg;
}
body:not(.admin-page) #tab-home :is(#gearGrid .item-card, #rankGrid .rank-card, #gameGrid .rank-card):nth-child(4n+4):hover > :is(img, svg) {
  --home-hover-rotate: 9.5deg;
}


/* ==========================================================================
   4. Footer: Complete Bottom Long Bar Redesign
   "thiết kế lại toàn bộ khung dài ở dưới có mục Home, Hướng dẫn, Steam, Instagram ấy thiết kế toàn bộ đi"
   ========================================================================== */
body:not(.admin-page) .shell > .footer.footer-card,
body:not(.admin-page)[data-tab] .shell > .footer.footer-card {
  margin-top: 24px !important;
  padding: 20px 24px !important;
  border-radius: 24px !important;
  background: linear-gradient(145deg, rgba(14, 18, 36, 0.92), rgba(22, 17, 40, 0.88)) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
  backdrop-filter: blur(24px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(140%) !important;
}

body:not(.admin-page) .footer-brand {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

body:not(.admin-page) .footer-brand .footer-avatar {
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255, 255, 255, 0.85) !important;
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.28) !important;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

body:not(.admin-page) .footer-brand:hover .footer-avatar {
  transform: scale(1.08) rotate(4deg) !important;
}

body:not(.admin-page) #footerName {
  color: #ffffff !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  text-shadow: 0 0 14px rgba(255, 255, 255, 0.35) !important;
}

body:not(.admin-page) #footerSubtitle {
  color: rgba(226, 232, 240, 0.8) !important;
  font-size: 0.82rem !important;
}

body:not(.admin-page) .footer-nav {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

body:not(.admin-page) .shell > .footer.footer-card .footer-nav :is(a, button),
body:not(.admin-page)[data-tab] .shell > .footer.footer-card .footer-nav :is(a, button) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  min-height: 42px !important;
  padding: 0 18px !important;
  border-radius: 14px !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03)) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 4px 14px rgba(0, 0, 0, 0.30) !important;
  color: #ffffff !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease !important;
}

body:not(.admin-page) .shell > .footer.footer-card .footer-nav :is(a, button):hover,
body:not(.admin-page)[data-tab] .shell > .footer.footer-card .footer-nav :is(a, button):hover {
  transform: translateY(-3px) scale(1.04) !important;
  background-color: rgba(255, 255, 255, 0.16) !important;
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.07)) !important;
  border-color: rgba(255, 255, 255, 0.40) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.30) !important;
}

body:not(.admin-page) .shell > .footer.footer-card .footer-nav :is(a, button):active,
body:not(.admin-page)[data-tab] .shell > .footer.footer-card .footer-nav :is(a, button):active {
  transform: translateY(0) scale(0.97) !important;
}

body:not(.admin-page) .shell > .footer.footer-card .footer-nav a#footerHomeLink .fa-house,
body:not(.admin-page)[data-tab] .shell > .footer.footer-card .footer-nav a#footerHomeLink .fa-house {
  color: #38bdf8 !important;
  filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.85)) !important;
  font-size: 14px !important;
}
body:not(.admin-page) .shell > .footer.footer-card .footer-nav a#footerHomeLink:hover,
body:not(.admin-page)[data-tab] .shell > .footer.footer-card .footer-nav a#footerHomeLink:hover {
  border-color: rgba(56, 189, 248, 0.55) !important;
  box-shadow: 0 10px 24px rgba(56, 189, 248, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.32) !important;
}

body:not(.admin-page) .shell > .footer.footer-card .footer-nav button#footerGuideBtn .fa-circle-question,
body:not(.admin-page)[data-tab] .shell > .footer.footer-card .footer-nav button#footerGuideBtn .fa-circle-question {
  color: #fbbf24 !important;
  filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.85)) !important;
  font-size: 14px !important;
}
body:not(.admin-page) .shell > .footer.footer-card .footer-nav button#footerGuideBtn:hover,
body:not(.admin-page)[data-tab] .shell > .footer.footer-card .footer-nav button#footerGuideBtn:hover {
  border-color: rgba(251, 191, 36, 0.55) !important;
  box-shadow: 0 10px 24px rgba(251, 191, 36, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.32) !important;
}

body:not(.admin-page) .shell > .footer.footer-card .footer-nav a[href*="steam"] .fa-steam,
body:not(.admin-page)[data-tab] .shell > .footer.footer-card .footer-nav a[href*="steam"] .fa-steam {
  color: #60a5fa !important;
  filter: drop-shadow(0 0 8px rgba(96, 165, 250, 0.85)) !important;
  font-size: 15px !important;
}
body:not(.admin-page) .shell > .footer.footer-card .footer-nav a[href*="steam"]:hover,
body:not(.admin-page)[data-tab] .shell > .footer.footer-card .footer-nav a[href*="steam"]:hover {
  border-color: rgba(96, 165, 250, 0.55) !important;
  box-shadow: 0 10px 24px rgba(96, 165, 250, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.32) !important;
}

body:not(.admin-page) .shell > .footer.footer-card .footer-nav a[href*="instagram"] .fa-instagram,
body:not(.admin-page)[data-tab] .shell > .footer.footer-card .footer-nav a[href*="instagram"] .fa-instagram {
  color: #f43f5e !important;
  filter: drop-shadow(0 0 8px rgba(244, 63, 94, 0.85)) !important;
  font-size: 15px !important;
}
body:not(.admin-page) .shell > .footer.footer-card .footer-nav a[href*="instagram"]:hover,
body:not(.admin-page)[data-tab] .shell > .footer.footer-card .footer-nav a[href*="instagram"]:hover {
  border-color: rgba(244, 63, 94, 0.55) !important;
  box-shadow: 0 10px 24px rgba(244, 63, 94, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.32) !important;
}

body:not(.admin-page) .footer-divider {
  height: 1px !important;
  margin: 16px 0 14px !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent) !important;
  border: none !important;
}

/* ==========================================================================
   5. Tidy & Compact Layout for About and Settings Tabs
   "xếp gọn các mục khung các thứ ở mục about settings đi nhìn gọn 1 chút"
   ========================================================================== */
body:not(.admin-page) #tab-about .about-layout {
  gap: 12px !important;
  margin-bottom: 14px !important;
}

body:not(.admin-page) #tab-about .wide-card {
  padding: 16px 20px 18px !important;
}

body:not(.admin-page) #tab-about .side-card {
  padding: 16px 20px 18px !important;
}

body:not(.admin-page) #tab-about .skills-list {
  gap: 6px !important;
  margin: 8px 0 10px !important;
}

body:not(.admin-page) #tab-about .skills-list .skill-item {
  padding: 6px 12px !important;
  min-height: 38px !important;
  border-radius: 11px !important;
}

body:not(.admin-page) #tab-about .tag-row {
  gap: 6px !important;
  margin-top: 8px !important;
}

body:not(.admin-page) #tab-about #aboutCards {
  gap: 12px !important;
  margin-bottom: 14px !important;
}

body:not(.admin-page) #tab-about .about-interests {
  padding: 16px 20px 18px !important;
  border-radius: 18px !important;
}

body:not(.admin-page) #tab-about .about-interests .interests-grid {
  gap: 10px !important;
}

body:not(.admin-page) #tab-about .about-interests .interest-card {
  padding: 10px 14px !important;
  border-radius: 13px !important;
}

/* Compact Settings Grid & Cards */
body:not(.admin-page) #tab-settings .settings-grid {
  gap: 12px !important;
}

body:not(.admin-page) #tab-settings .settings-card {
  padding: 14px 16px 16px !important;
  border-radius: 15px !important;
}

body:not(.admin-page) #tab-settings .settings-card h3 {
  min-height: 32px !important;
  margin: 0 0 10px !important;
  padding-bottom: 8px !important;
  font-size: 0.96rem !important;
}

body:not(.admin-page) #tab-settings .settings-card dl {
  gap: 6px !important;
}

body:not(.admin-page) #tab-settings .settings-row {
  min-height: 35px !important;
  padding: 5px 10px !important;
  border-radius: 8px !important;
  gap: 8px !important;
}

body:not(.admin-page) #tab-settings .settings-row dt {
  font-size: 0.82rem !important;
}

body:not(.admin-page) #tab-settings .setting-bullet {
  font-size: 11px !important;
  margin-right: 6px !important;
}

body:not(.admin-page) #tab-settings .setting-val-pill {
  min-height: 26px !important;
  padding: 2px 9px !important;
  font-size: 10.5px !important;
  border-radius: 6px !important;
}

/* ==========================================================================
   6. Compact Community Modal with iOS 26 Dynamic Spring Open/Close
   "mục bên trong của community thiết kế bé lại đẹp hơn hiệu ứng mở đóng như ios26 đi"
   ========================================================================== */
body:not(.admin-page) .community-modal,
body:not(.admin-page) .contact-community-modal {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 14px !important;
  z-index: 1000 !important;
}

body:not(.admin-page) .community-modal__backdrop,
body:not(.admin-page) .contact-community-modal__backdrop {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(4, 6, 12, 0.62) !important;
  backdrop-filter: blur(16px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
  opacity: 0 !important;
  transition: opacity 0.68s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body:not(.admin-page) :is(.community-modal.is-open, .contact-community-modal.is-open) :is(.community-modal__backdrop, .contact-community-modal__backdrop) {
  opacity: 1 !important;
}

body:not(.admin-page) :is(.community-modal.is-closing, .contact-community-modal.is-closing) :is(.community-modal__backdrop, .contact-community-modal__backdrop) {
  opacity: 0 !important;
  transition-duration: 0.44s !important;
}

/* iOS 26 Spring Morph Panel */
body:not(.admin-page) .community-modal__panel,
body:not(.admin-page) .contact-community-publisher {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  width: min(490px, calc(100vw - 28px)) !important;
  max-height: min(580px, calc(100vh - 64px)) !important;
  overflow: hidden !important;
  border-radius: 24px !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  background: linear-gradient(165deg, rgba(18, 20, 28, 0.94), rgba(10, 11, 16, 0.96)) !important;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.72), 0 0 0 1px rgba(255, 255, 255, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
  backdrop-filter: blur(36px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(36px) saturate(140%) !important;
  transform-origin: 50% 50% !important;
  opacity: 0 !important;
  transform: scale(0.85) translateY(28px) !important;
  filter: blur(10px) !important;
  transition: transform 0.68s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.52s cubic-bezier(0.16, 1, 0.3, 1), filter 0.52s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body:not(.admin-page) :is(.community-modal.is-open, .contact-community-modal.is-open) :is(.community-modal__panel, .contact-community-publisher) {
  opacity: 1 !important;
  transform: scale(1) translateY(0) !important;
  filter: blur(0px) !important;
}

body:not(.admin-page) :is(.community-modal.is-closing, .contact-community-modal.is-closing) :is(.community-modal__panel, .contact-community-publisher) {
  opacity: 0 !important;
  transform: scale(0.88) translateY(20px) !important;
  filter: blur(8px) !important;
  transition: transform 0.44s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.36s ease, filter 0.36s ease !important;
}

/* Compact Community Header */
body:not(.admin-page) .community-modal__header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 14px 8px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.02) !important;
}

body:not(.admin-page) .community-modal__heading {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

body:not(.admin-page) .community-modal__heading h2 {
  font-family: "Outfit", "Be Vietnam Pro", sans-serif !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  color: #ffffff !important;
  letter-spacing: 0.01em !important;
  margin: 0 !important;
}

body:not(.admin-page) .community-kicker {
  font-size: 8.5px !important;
  letter-spacing: 0.08em !important;
  color: rgba(255, 255, 255, 0.52) !important;
}

body:not(.admin-page) .community-modal__icon {
  width: 26px !important;
  height: 26px !important;
  border-radius: 7px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  font-size: 11px !important;
}

body:not(.admin-page) .community-modal__header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

body:not(.admin-page) .community-modal__compose {
  font-size: 10.5px !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
  min-height: 24px !important;
  height: 24px !important;
}

body:not(.admin-page) .community-modal__close {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 25px !important;
  height: 25px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.82) !important;
  cursor: pointer !important;
  font-size: 11px !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.4s ease !important;
}

body:not(.admin-page) .community-modal__close:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
  transform: scale(1.08) !important;
}

/* Compact Tabs */
body:not(.admin-page) .community-modal__tabs {
  margin: 6px 12px 0 !important;
  padding: 3px !important;
  border-radius: 10px !important;
  background: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  gap: 3px !important;
}

body:not(.admin-page) .community-modal__tabs button {
  min-height: 26px !important;
  height: 26px !important;
  border-radius: 7px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.65) !important;
  padding: 2px 9px !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body:not(.admin-page) .community-modal__tabs button[aria-selected="true"] {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}

/* Compact Modal Content */
body:not(.admin-page) .community-modal__content {
  padding: 8px 12px 12px !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255, 255, 255, 0.16) transparent !important;
}

body:not(.admin-page) .community-feed-toolbar {
  padding: 3px 0 6px !important;
  font-size: 10.5px !important;
}

body:not(.admin-page) .community-feed-toolbar h3 {
  font-size: 11.5px !important;
  margin: 1px 0 0 !important;
}

body:not(.admin-page) .community-feed-toolbar button {
  min-height: 24px !important;
  padding: 2px 8px !important;
  font-size: 10px !important;
  border-radius: 6px !important;
}

/* Compact Post Cards */
body:not(.admin-page) :is(.community-post-card, .community-feed-item, .community-modal .community-post-card) {
  padding: 9px 11px !important;
  margin-bottom: 6px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.035) !important;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.5s ease, background-color 0.5s ease !important;
}

body:not(.admin-page) :is(.community-post-card, .community-feed-item):hover {
  border-color: rgba(255, 255, 255, 0.22) !important;
  background: rgba(255, 255, 255, 0.065) !important;
  transform: translateY(-2px) !important;
}

body:not(.admin-page) :is(.community-post-card__avatar, .community-feed-item__avatar) {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
}

body:not(.admin-page) :is(.community-post-card__author, .community-feed-item__author) {
  font-size: 11.5px !important;
  font-weight: 700 !important;
}

body:not(.admin-page) :is(.community-post-card__time, .community-feed-item__time) {
  font-size: 9.5px !important;
  color: rgba(255, 255, 255, 0.45) !important;
}

body:not(.admin-page) :is(.community-post-card__content, .community-feed-item__content) {
  font-size: 11.5px !important;
  line-height: 1.48 !important;
  margin: 4px 0 !important;
}

/* Compact Post Action Buttons */
body:not(.admin-page) :is(.community-post-actions, .community-feed-item__actions) button {
  min-height: 24px !important;
  padding: 2px 7px !important;
  font-size: 9.5px !important;
  border-radius: 999px !important;
  gap: 4px !important;
}

body:not(.admin-page) :is(.community-post-actions, .community-feed-item__actions) button i {
  font-size: 10px !important;
}

/* Compact Comments & Inline Forms */
body:not(.admin-page) .community-post-comments {
  gap: 5px !important;
  margin-top: 6px !important;
  padding-top: 6px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

body:not(.admin-page) .community-comment {
  padding: 5px 8px !important;
  border-radius: 8px !important;
  gap: 7px !important;
}

body:not(.admin-page) .community-comment-avatar {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
}

body:not(.admin-page) .community-comment-content b {
  font-size: 10.5px !important;
}

body:not(.admin-page) .community-comment-content p {
  font-size: 10.5px !important;
  line-height: 1.4 !important;
}

body:not(.admin-page) :is(.community-comment-form, .community-board-detail__comment-form) {
  gap: 6px !important;
  margin-top: 6px !important;
}

body:not(.admin-page) :is(.community-comment-form, .community-board-detail__comment-form) :is(input, textarea) {
  min-height: 28px !important;
  padding: 4px 8px !important;
  font-size: 10.5px !important;
  border-radius: 8px !important;
}

body:not(.admin-page) :is(.community-comment-form, .community-board-detail__comment-form) button {
  min-height: 28px !important;
  padding: 0 10px !important;
  font-size: 10px !important;
  border-radius: 8px !important;
}

body:not(.admin-page) .community-gallery-grid {
  gap: 6px !important;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)) !important;
}

body:not(.admin-page) .community-gallery-grid .gallery-item {
  border-radius: 8px !important;
}

/* ==========================================================================
   7. Redesign "My Waifu" Tab - Elegant Balanced Bento Grid
   "thiết kế lại mục My waifu đi"
   ========================================================================== */
/* Hide distracting letter watermark */
body:not(.admin-page) #tab-waifu .waifu-masthead__watermark {
  display: none !important;
}

/* Waifu Masthead Banner */
body:not(.admin-page) #tab-waifu .waifu-masthead {
  border-radius: 20px !important;
  padding: 16px 22px !important;
  margin-bottom: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: linear-gradient(135deg, rgba(26, 20, 32, 0.88), rgba(16, 14, 22, 0.82)) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) minmax(180px, 0.45fr) !important;
  align-items: center !important;
  gap: 16px !important;
}

body:not(.admin-page) #tab-waifu .waifu-masthead__index {
  font-family: "Sono", monospace !important;
  font-size: 1.4rem !important;
  font-weight: 800 !important;
  color: rgba(253, 164, 175, 0.6) !important;
  padding-right: 8px !important;
}

body:not(.admin-page) #tab-waifu .waifu-eyebrow {
  color: #fda4af !important;
  font-size: 0.64rem !important;
  letter-spacing: 0.13em !important;
  font-weight: 750 !important;
  text-transform: uppercase !important;
}

body:not(.admin-page) #tab-waifu #waifuHeading {
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: 0.01em !important;
  margin: 2px 0 3px !important;
}

body:not(.admin-page) #tab-waifu .waifu-page-title-icon {
  color: #fda4af !important;
  font-size: 1.1rem !important;
  filter: drop-shadow(0 0 6px rgba(253, 164, 175, 0.5)) !important;
}

body:not(.admin-page) #tab-waifu #waifuMastheadSubtitle {
  font-size: 0.82rem !important;
  color: rgba(255, 255, 255, 0.65) !important;
  margin: 0 0 6px !important;
}

body:not(.admin-page) #tab-waifu .waifu-masthead__source {
  border-left: 2px solid rgba(253, 164, 175, 0.35) !important;
  padding: 8px 14px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border-radius: 0 10px 10px 0 !important;
}

body:not(.admin-page) #tab-waifu #waifuSeriesTitle {
  font-size: 0.88rem !important;
  color: #ffffff !important;
}

body:not(.admin-page) #tab-waifu #waifuSeriesSubtitle {
  font-size: 0.74rem !important;
  color: rgba(253, 164, 175, 0.75) !important;
}

body:not(.admin-page) #tab-waifu #waifuQuote {
  font-size: 0.78rem !important;
  color: rgba(255, 255, 255, 0.6) !important;
  font-style: italic !important;
}

/* Bento Grid Architecture */
body:not(.admin-page) #tab-waifu .waifu-layout {
  display: grid !important;
  grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1.15fr) !important;
  grid-template-areas:
    "portrait story"
    "notes memories"
    "love love" !important;
  gap: 16px 18px !important;
}

body:not(.admin-page) #tab-waifu :is(.waifu-card, .glass-card) {
  border-radius: 18px !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  background: linear-gradient(145deg, rgba(24, 20, 30, 0.86), rgba(15, 13, 20, 0.80)) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(20px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(130%) !important;
  transition: transform 0.82s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.82s ease, border-color 0.82s ease !important;
}

body:not(.admin-page) #tab-waifu :is(.waifu-card, .glass-card):hover {
  transform: translateY(-4px) !important;
  border-color: rgba(253, 164, 175, 0.35) !important;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.38), 0 0 20px rgba(253, 164, 175, 0.08) !important;
}

/* Row 1, Left: Portrait Card */
body:not(.admin-page) #tab-waifu .waifu-portrait-card {
  grid-area: portrait !important;
  padding: 16px 18px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

body:not(.admin-page) #tab-waifu .waifu-portrait-card .profile-image-shell {
  width: min(100%, 210px) !important;
  max-height: 275px !important;
  aspect-ratio: 3 / 4 !important;
  margin: 10px auto 12px !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35) !important;
}

body:not(.admin-page) #tab-waifu .profile-image-shell::before {
  display: none !important;
}

body:not(.admin-page) #tab-waifu .profile-image-shell :is(img, video) {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 15px !important;
  display: block !important;
}

body:not(.admin-page) #tab-waifu #waifuName {
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin: 4px 0 2px !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
}

body:not(.admin-page) #tab-waifu #waifuRole {
  font-size: 0.80rem !important;
  color: rgba(255, 255, 255, 0.65) !important;
  margin: 0 0 10px !important;
}

body:not(.admin-page) #tab-waifu :is(.waifu-portrait-card__label, .waifu-portrait-card__meta) {
  font-size: 0.62rem !important;
  letter-spacing: 0.12em !important;
  color: #fda4af !important;
  font-weight: 700 !important;
}

/* Row 1, Right: Story Card */
body:not(.admin-page) #tab-waifu .waifu-story {
  grid-area: story !important;
  padding: 18px 22px !important;
  display: flex !important;
  flex-direction: column !important;
}

body:not(.admin-page) #tab-waifu #waifuAboutTitle {
  font-size: 1.12rem !important;
  font-weight: 750 !important;
  color: #ffffff !important;
  margin: 4px 0 10px !important;
}

body:not(.admin-page) #tab-waifu .waifu-story p {
  font-size: 0.84rem !important;
  line-height: 1.62 !important;
  color: rgba(240, 244, 255, 0.84) !important;
  margin-bottom: 8px !important;
}

body:not(.admin-page) #tab-waifu .waifu-metadata {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px 10px !important;
  margin-top: auto !important;
  padding-top: 10px !important;
}

body:not(.admin-page) #tab-waifu .waifu-metadata-item {
  padding: 7px 11px !important;
  border-radius: 9px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  font-size: 0.80rem !important;
}

/* Row 2, Left: Notes Card */
body:not(.admin-page) #tab-waifu .waifu-notes {
  grid-area: notes !important;
  padding: 18px 22px !important;
}

body:not(.admin-page) #tab-waifu #waifuDetailsTitle {
  font-size: 1.12rem !important;
  font-weight: 750 !important;
  color: #ffffff !important;
  margin: 4px 0 12px !important;
}

body:not(.admin-page) #tab-waifu #waifuDetails {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

body:not(.admin-page) #tab-waifu .waifu-note {
  padding: 9px 12px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.035) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  font-size: 0.82rem !important;
  line-height: 1.5 !important;
  color: rgba(240, 244, 255, 0.85) !important;
}

/* Row 2, Right: Memories Card */
body:not(.admin-page) #tab-waifu .waifu-memories {
  grid-area: memories !important;
  padding: 18px 22px !important;
}

body:not(.admin-page) #tab-waifu #waifuMomentsTitle {
  font-size: 1.12rem !important;
  font-weight: 750 !important;
  color: #ffffff !important;
  margin: 4px 0 12px !important;
}

body:not(.admin-page) #tab-waifu .moment-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
  gap: 10px !important;
}

body:not(.admin-page) #tab-waifu .memory-card {
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  aspect-ratio: 16 / 10 !important;
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.65s ease !important;
}

body:not(.admin-page) #tab-waifu .memory-card:hover {
  transform: scale(1.04) !important;
  border-color: rgba(253, 164, 175, 0.45) !important;
}

/* Row 3: Why I Love (Full-Width Span) */
body:not(.admin-page) #tab-waifu .waifu-love {
  grid-area: love !important;
  display: grid !important;
  grid-template-columns: minmax(200px, 0.38fr) minmax(0, 1fr) !important;
  gap: 20px !important;
  padding: 20px 24px !important;
  align-items: center !important;
}

body:not(.admin-page) #tab-waifu .waifu-love__intro {
  padding-right: 18px !important;
  border-right: 1px solid rgba(255, 255, 255, 0.10) !important;
}

body:not(.admin-page) #tab-waifu #waifuLoveTitle {
  font-size: 1.15rem !important;
  font-weight: 750 !important;
  color: #ffffff !important;
  margin: 4px 0 8px !important;
}

body:not(.admin-page) #tab-waifu #waifuLoveIntro {
  font-size: 0.84rem !important;
  color: rgba(255, 255, 255, 0.70) !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

body:not(.admin-page) #tab-waifu #waifuLove {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px 14px !important;
}

body:not(.admin-page) #tab-waifu .waifu-love-item {
  padding: 9px 13px !important;
  border-radius: 11px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  font-size: 0.82rem !important;
  line-height: 1.5 !important;
  color: rgba(240, 244, 255, 0.86) !important;
}

@media (max-width: 768px) {
  body:not(.admin-page) #tab-waifu .waifu-masthead {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  body:not(.admin-page) #tab-waifu .waifu-masthead__source {
    border-left: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
    padding: 10px 0 0 !important;
  }
  body:not(.admin-page) #tab-waifu .waifu-layout {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "portrait"
      "story"
      "notes"
      "memories"
      "love" !important;
  }
  body:not(.admin-page) #tab-waifu .waifu-love {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  body:not(.admin-page) #tab-waifu .waifu-love__intro {
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
    padding-right: 0 !important;
    padding-bottom: 14px !important;
  }
  body:not(.admin-page) #tab-waifu #waifuLove {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   8. Restrained Color Palette & Unified Dark Frosted System
   "web nhiều màu quá dùng màu ở nơi cần dùng thôi"
   ========================================================================== */
/* Neutralize multi-color rainbow glows */
body:not(.admin-page) :is(#gearGrid, #rankGrid, #gameGrid, #aboutCards, #socialsGrid, .settings-grid, #tab-waifu) .card-animate {
  --glow-rgb: 230, 238, 255 !important;
}

/* Restrained Titles: Crisp White with Soft Shadow instead of neon colors */
body:not(.admin-page) :is(
  #tab-home .home-section-title [data-content-title],
  #tab-home :is(.home-section-title--gear, .home-section-title--rank, .home-section-title--game) [data-content-title],
  #tab-about #aboutName [data-content-title],
  #tab-settings #settingsTitle [data-content-title],
  #tab-socials #socialsTitle [data-content-title],
  #tab-waifu #waifuHeading,
  #tab-contact #contactTitle [data-content-title],
  #tab-donate #donateTitle
) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.60) !important;
}

/* Soft, muted title icons */
body:not(.admin-page) #tab-home .home-section-title--gear > .section-icon {
  color: #a5f3fc !important;
  -webkit-text-fill-color: #a5f3fc !important;
}
body:not(.admin-page) #tab-home .home-section-title--rank > .section-icon {
  color: #fde68a !important;
  -webkit-text-fill-color: #fde68a !important;
}
body:not(.admin-page) #tab-home .home-section-title--game > .section-icon {
  color: #ddd6fe !important;
  -webkit-text-fill-color: #ddd6fe !important;
}

/* Clean, restrained card badges */
body:not(.admin-page) #tab-home :is(#gearGrid, #rankGrid, #gameGrid) :is(.item-card, .rank-card) .card-badge {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.88) !important;
  box-shadow: none !important;
}

/* ==========================================================================
   9. Global Transition Slowing and Smoothing
   "animetion chậm chậm hơn nx đi"
   ========================================================================== */
body:not(.admin-page) :is(
  .tab-content,
  .profile-card,
  .footer.footer-card,
  #tab-home .item-card,
  #tab-home .rank-card,
  #tab-about .wide-card,
  #tab-about .side-card,
  #tab-settings .settings-card,
  #tab-socials .list-card,
  #tab-waifu .waifu-card,
  #tab-waifu .glass-card,
  #tab-contact .contact-intro
) {
  transition-duration: 0.82s !important;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body:not(.admin-page) :is(
  .item-card,
  .rank-card,
  .wide-card,
  .side-card,
  .settings-card,
  .list-card,
  .waifu-card,
  .glass-card,
  .memory-card,
  .social-row
) {
  transition: transform 0.82s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.82s ease, border-color 0.82s ease, background 0.82s ease !important;
}