/* custom.css - Premium UI enhancements */
:root {
  --primary-color: #dcf0fa; /* light blue matching homepage */
  --accent-color: #38bdf8;  /* sky blue accent matching Group Plaza */
  --teal-accent: #14b8a6;   /* teal accent for status/indicators */
  --gradient-bg: linear-gradient(to bottom, var(--primary-color), #f0f9ff);
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --press-scale: 0.96;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: #ffffff !important;
  color: #2c3e50;
}

/* Glassmorphism card */
.glass-card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(56, 189, 248, 0.06);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.glass-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(56, 189, 248, 0.12);
}

/* Active Press Effect */
.active-press {
  transition: transform var(--transition-fast) !important;
}
.active-press:active {
  transform: scale(var(--press-scale)) !important;
}

/* Navigation animations */
.nav-item {
  transition: color var(--transition-fast), transform var(--transition-fast);
}
.nav-item:hover {
  color: var(--accent-color);
  transform: translateY(-2px);
}
.nav-item.active {
  color: var(--accent-color);
}

/* Scrollbar Hiding */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}
.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-none::-webkit-scrollbar {
  display: none;
}
.scrollbar-none {
  -ms-overflow-style: none;
  scrollbar-width: none;
}


/* Page entry keyframes */
@keyframes pageEnter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.page-enter-anim {
  animation: pageEnter var(--transition-normal) forwards;
}

/* Fade-in for items */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-in {
  animation: fadeIn var(--transition-normal) forwards;
}

/* Material Symbols Outlined support */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  display: inline-block;
  vertical-align: middle;
}

/* 个人中心我参与的活动卡片外白色框边线与间距微调 */
.profile-tab-body.yp-prof-body {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  background: #fafafa !important;
}

.yp-prof-act-card {
  border: 1.5px solid #dcdfe6 !important;
  box-shadow: 0 2px 8px rgba(16, 24, 32, 0.03) !important;
  margin: 12px 16px 0 !important;
  background: #ffffff !important;
  border-radius: 16px !important;
  padding: 12px !important;
}

/* 物理级完全清除 input 被选中/聚焦时的浏览器原生蓝色边框与外轮廓 */
input:focus,
input:focus-visible,
input:focus-within,
#inv-friend-search:focus,
#inv-friend-search:focus-visible {
  outline: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
  -webkit-tap-highlight-color: transparent !important;
}