/* ===== CSS Variables — Blue-Pink Glass Theme ===== */
:root {
  /* Page background */
  --page-gradient: linear-gradient(135deg, #d4e3f8 0%, #dbc8f0 25%, #e8c8ed 50%, #f5cfda 75%, #f8d0d8 100%);
  --page-gradient-2: linear-gradient(160deg, #c5d8f0 0%, #d2c0e8 30%, #dfbee4 55%, #f0c4d0 80%, #f5cdd8 100%);
  --page-gradient-3: linear-gradient(120deg, #bdd5f5 0%, #ccbaec 25%, #e0c0e8 50%, #f2c8d4 75%, #f8d2da 100%);

  /* Glass surface */
  --glass-card-bg: rgba(255, 255, 255, 0.38);
  --glass-card-hover: rgba(255, 255, 255, 0.55);
  --glass-card-border: rgba(255, 255, 255, 0.45);
  --glass-input-bg: rgba(255, 255, 255, 0.28);
  --glass-input-border: rgba(180, 160, 200, 0.35);
  --glass-modal-bg: rgba(255, 255, 255, 0.72);
  --glass-sidebar-bg: rgba(245, 240, 255, 0.55);
  --glass-sidebar-border: rgba(180, 155, 210, 0.25);
  --glass-tooltip-bg: rgba(245, 240, 255, 0.7);

  /* Text */
  --text-primary: #1e1b2e;
  --text-secondary: #4a4560;
  --text-muted: #8882a0;

  /* Accent */
  --accent: #4fc3f7;
  --accent-dark: #0390c8;
  --accent-light: #81d4fa;
  --accent-glow: rgba(79, 195, 247, 0.18);
  --accent-glow-strong: rgba(79, 195, 247, 0.35);
  --pink-accent: #ec4899;
  --pink-glow: rgba(236, 72, 153, 0.18);
  --pink-strong: rgba(236, 72, 153, 0.3);

  /* Semantic */
  --danger: #e53e3e;
  --danger-bg: rgba(229, 62, 62, 0.12);
  --success: #38a169;
  --warning: #dd6b20;

  /* Radius */
  --radius: 16px;
  --radius-sm: 10px;
  --radius-xs: 7px;

  /* Sidebar sizing */
  --sidebar-collapsed: 56px;
  --sidebar-expanded: 200px;
  --sidebar-width: var(--sidebar-collapsed);

  /* Shadows */
  --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.06);
  --shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  --shadow-glow: 0 0 24px rgba(79, 195, 247, 0.1), 0 0 16px rgba(236, 72, 153, 0.06);
  --shadow-raise: 0 8px 32px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(236, 72, 153, 0.08);
  --transition: 0.22s ease;

  /* Source colors */
  --bili: #fb7299;
  --douyin: #25f4ee;
  --xhs: #ff2442;
  --youtube: #ff0000;
  --twitter: #1d9bf0;

  /* Category colors */
  --cat-variety: #4fc3f7;
  --cat-foreign: #ab47bc;
  --cat-china: #66bb6a;
  --cat-member: #ffa726;

  /* Team colors */
  --team-hiphop: #ff6b6b;
  --team-vocal: #4fc3f7;
  --team-perf: #66bb6a;
}

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

/* ===== Page Background Layer ===== */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  background: linear-gradient(135deg, #e8f2fc 0%, #e4dcf8 25%, #f2dcf8 50%, #fce4f0 75%, #fae4ee 100%);
  background-attachment: fixed;
  transition: background 0.8s ease;
}

/* Section-specific background override */
body[data-section="home"] {
  background: linear-gradient(135deg, #eaf4fd 0%, #e6def8 25%, #f3ddf8 50%, #fde5f2 75%, #fbe6f0 100%);
  background-attachment: fixed;
}
body[data-section="profiles"] {
  background: linear-gradient(150deg, #e0d8f8 0%, #d8c8f0 20%, #ecc8ed 45%, #f5d0e0 70%, #fad8e0 100%);
  background-attachment: fixed;
}
body[data-section="variety-lib"] {
  background: linear-gradient(140deg, #d0e0f8 0%, #c8d8f0 25%, #dcc8e8 50%, #f0d0da 75%, #f5d4dc 100%);
  background-attachment: fixed;
}
body[data-section="mvs"] {
  background: linear-gradient(120deg, #c8ddf8 0%, #d0c8f0 30%, #e4c8e8 55%, #f2d0d8 80%, #fad8e0 100%);
  background-attachment: fixed;
}
body[data-section="concerts"] {
  background: linear-gradient(160deg, #d8e8f8 0%, #d0c8e8 25%, #e8cce8 50%, #f5d5dc 75%, #fcdde2 100%);
  background-attachment: fixed;
}
body[data-section="search"] {
  background: linear-gradient(135deg, #dce8f8 0%, #d8cce8 30%, #e8d0e8 55%, #f5d8de 80%, #fadce2 100%);
  background-attachment: fixed;
}

/* Subtle glass texture overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 20% 30%, rgba(79, 195, 247, 0.04) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 80% 70%, rgba(236, 72, 153, 0.04) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 50% 50%, rgba(255, 255, 255, 0.10) 0%, transparent 70%);
}

a { color: var(--accent-dark); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--accent); }

button { font-family: inherit; cursor: pointer; border: none; outline: none; }
input, select, textarea { font-family: inherit; }

/* ===== Scrollbar ===== */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,0.04); }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.2); }

/* ===== Layout ===== */
.app {
  display: flex;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

.app.sidebar-open { --sidebar-width: var(--sidebar-expanded); }

/* ===== Sidebar —— Blue-Pink Glass ===== */
.sidebar {
  width: var(--sidebar-width);
  background: rgba(245, 242, 255, 0.52);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-right: 1px solid rgba(190, 175, 220, 0.22);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 100;
  overflow-y: auto;
  overflow-x: hidden;
  transition: width 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 2px 0 30px rgba(79, 195, 247, 0.08), 2px 0 20px rgba(236, 72, 153, 0.05);
}

.sidebar::-webkit-scrollbar { width: 0; }

/* Sidebar Header — SV Diamond */
.sidebar-header {
  padding: 16px 8px;
  border-bottom: 1px solid rgba(180, 160, 210, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 0;
  overflow: hidden;
}

.sidebar-logo .logo-icon {
  width: 38px; height: 38px;
  background: linear-gradient(135deg, #4fc3f7 0%, #a78bfa 40%, #ec4899 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 4px 20px rgba(79, 195, 247, 0.35), 0 2px 12px rgba(236, 72, 153, 0.2);
  position: relative;
}
.sidebar-logo .logo-icon::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(79,195,247,0.4), transparent 40%, rgba(236,72,153,0.3));
  z-index: -1;
  filter: blur(6px);
}

.sidebar-logo .logo-text {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
  white-space: nowrap;
  margin-left: 10px;
  opacity: 0;
  transform: translateX(-8px);
  transition: all 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.app.sidebar-open .sidebar-logo .logo-text { opacity: 1; transform: translateX(0); }
.sidebar-logo .logo-text span { font-size: 10px; font-weight: 400; color: var(--text-muted); display: block; }

/* Nav Container */
.sidebar-nav {
  padding: 12px 8px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* --- Main Menu Item --- */
.nav-item-main {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.22s ease;
  position: relative;
  white-space: nowrap;
  min-height: 40px;
  background: transparent;
}
.nav-item-main:hover {
  background: rgba(79, 195, 247, 0.1);
  color: #2b7aaa;
}
.nav-item-main.active {
  background: linear-gradient(135deg, rgba(79, 195, 247, 0.16), rgba(236, 72, 153, 0.1));
  color: var(--accent-dark);
  box-shadow: inset 0 0 0 1px rgba(79, 195, 247, 0.22);
}
.nav-item-main .nav-icon {
  font-size: 18px;
  width: 24px; height: 24px;
  text-align: center;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.22s ease;
}
.nav-item-main.active .nav-icon {
  transform: scale(1.12);
  filter: drop-shadow(0 0 8px rgba(79, 195, 247, 0.5));
}
.nav-item-main .nav-text {
  opacity: 0;
  transform: translateX(-6px);
  transition: all 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  font-size: 13px;
  letter-spacing: 0.3px;
}
.app.sidebar-open .nav-item-main .nav-text { opacity: 1; transform: translateX(0); }
.nav-item-main .nav-arrow {
  margin-left: auto;
  font-size: 10px;
  opacity: 0;
  transition: all 0.32s ease;
  color: var(--text-muted);
}
.app.sidebar-open .nav-item-main .nav-arrow { opacity: 1; }

/* --- Glass Tooltip (hover on sidebar icon) --- */
.nav-item-main[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%) scale(0.85);
  background: rgba(248, 245, 255, 0.78);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(190, 175, 220, 0.35);
  border-radius: 10px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #2d2a3d;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 8px 28px rgba(0,0,0,0.1), 0 0 16px rgba(79,195,247,0.1);
  z-index: 150;
}
.nav-item-main[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}
/* Hide tooltip when sidebar is expanded (text is already visible) */
.app.sidebar-open .nav-item-main[data-tooltip]::after { opacity: 0; pointer-events: none; }

/* Tooltip for member items in sub-menu */
.nav-member-item[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) scale(0.85);
  background: rgba(252, 248, 255, 0.78);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(220, 200, 235, 0.35);
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #3d2a4a;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 6px 20px rgba(0,0,0,0.08), 0 0 12px rgba(236,72,153,0.08);
  z-index: 150;
}
.nav-member-item[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}
/* Hide when sidebar expanded (member names shown inline) */
.app.sidebar-open .nav-member-item[data-tooltip]::after { opacity: 0; }

/* --- Sub Menu (星籍册) --- */
.nav-sub {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-sub.open { max-height: 620px; }

.nav-member-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 12px 7px 8px;
  border-radius: var(--radius-xs);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
  position: relative;
}
.nav-member-item:hover {
  background: rgba(236, 72, 153, 0.1);
  color: #c0267a;
}
.nav-member-item .member-emoji {
  font-size: 15px;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}
.nav-member-item .member-label {
  opacity: 0;
  transform: translateX(-4px);
  transition: all 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.app.sidebar-open .nav-member-item .member-label { opacity: 1; transform: translateX(0); }

/* --- Nav Separator --- */
.nav-sep {
  height: 1px;
  background: rgba(180, 160, 210, 0.12);
  margin: 6px 10px;
}

/* Sidebar Footer */
.sidebar-footer {
  padding: 10px 8px;
  border-top: 1px solid rgba(180, 160, 210, 0.15);
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  overflow: hidden;
}
.sidebar-footer .footer-text {
  opacity: 0;
  transform: translateY(4px);
  transition: all 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}
.app.sidebar-open .sidebar-footer .footer-text { opacity: 1; transform: translateY(0); }
.sidebar-footer .admin-tag {
  display: inline-block;
  background: linear-gradient(135deg, rgba(229, 62, 62, 0.15), rgba(236, 72, 153, 0.12));
  color: #dc2626;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  margin-bottom: 4px;
}

/* Sidebar toggle hint pill */
.sidebar-toggle-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  margin: 4px 6px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.22s ease;
  color: var(--text-muted);
  font-size: 14px;
}
.sidebar-toggle-hint:hover { background: rgba(79, 195, 247, 0.1); color: var(--accent-dark); }
.app.sidebar-open .sidebar-toggle-hint .toggle-icon { transform: rotate(180deg); }

/* --- Legacy nav-item --- */
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  margin-bottom: 2px;
  position: relative;
}
.nav-item:hover { background: rgba(79,195,247,0.08); color: var(--text-primary); }
.nav-item.active { background: var(--accent-glow); color: var(--accent-dark); }
.nav-item .nav-icon { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; }
.nav-item .nav-badge { margin-left: auto; font-size: 11px; background: var(--glass-input-bg); padding: 2px 8px; border-radius: 10px; color: var(--text-muted); }

/* ===== Main Content ===== */
.main {
  flex: 1;
  margin-left: var(--sidebar-width, var(--sidebar-collapsed, 56px));
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: margin-left 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 1;
}

/* Topbar */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.48);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid rgba(180, 160, 210, 0.18);
  padding: 14px 28px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.search-wrapper { flex: 1; max-width: 520px; position: relative; }
.search-wrapper .search-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); font-size: 16px;
}
.search-input {
  width: 100%;
  background: var(--glass-input-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--glass-input-border);
  border-radius: 24px;
  padding: 10px 16px 10px 42px;
  color: var(--text-primary);
  font-size: 14px;
  transition: all var(--transition);
}
.search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(79, 195, 247, 0.15);
  outline: none;
}
.search-input::placeholder { color: var(--text-muted); }
.topbar-actions { display: flex; gap: 8px; margin-left: auto; }

.content { padding: 28px; flex: 1; }

/* ===== Sections ===== */
.section { display: none; }
.section.active { display: block; animation: fadeIn 0.35s ease; }

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

.section-header { margin-bottom: 24px; }
.section-title {
  font-size: 22px; font-weight: 700;
  color: var(--text-primary);
  display: flex; align-items: center; gap: 10px;
}
.section-title .title-icon { font-size: 24px; }
.section-subtitle { font-size: 13px; color: var(--text-secondary); margin-top: 4px; }

/* ===== Cards Grid ===== */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }

/* ===== Card — Glass Style ===== */
.card {
  background: var(--glass-card-bg);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: all 0.25s ease;
  display: flex; flex-direction: column;
  position: relative;
  box-shadow: var(--shadow-sm);
}
.card:hover {
  background: var(--glass-card-hover);
  border-color: rgba(79, 195, 247, 0.35);
  box-shadow: var(--shadow-raise);
  transform: translateY(-3px);
}
.card-top-bar { height: 3px; background: var(--accent); flex-shrink: 0; }
.card[data-cat="综艺动态"] .card-top-bar { background: var(--cat-variety); }
.card[data-cat="外网动态"] .card-top-bar { background: var(--cat-foreign); }
.card[data-cat="中国行程"] .card-top-bar { background: var(--cat-china); }
.card[data-cat="成员近况"] .card-top-bar { background: var(--cat-member); }

.card-body { padding: 16px; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.card-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.card-date { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 4px; }
.card-source {
  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 4px;
  display: inline-flex; align-items: center; gap: 4px;
}
.card-source[data-source="B站"] { background: rgba(251,114,153,0.15); color: var(--bili); }
.card-source[data-source="抖音"] { background: rgba(37,244,238,0.12); color: #119b95; }
.card-source[data-source="小红书"] { background: rgba(255,36,66,0.15); color: var(--xhs); }
.card-source[data-source="Youtube"] { background: rgba(255,0,0,0.12); color: #cc0000; }
.card-source[data-source="X"] { background: rgba(29,155,240,0.15); color: #1a80c0; }

.card-title { font-size: 15px; font-weight: 600; color: var(--text-primary); line-height: 1.4; }
.card-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.tag {
  font-size: 11px; padding: 3px 8px; border-radius: 4px;
  background: rgba(79, 195, 247, 0.08); color: #2b7aaa;
  border: 1px solid rgba(79, 195, 247, 0.15);
}

.card-video { margin: 0 16px 12px; border-radius: var(--radius-sm); overflow: hidden; background: #000; }
.card-video iframe { width: 100%; aspect-ratio: 16/9; border: none; display: block; }

.card-actions { display: flex; gap: 8px; padding: 0 16px 14px; }
.card-btn {
  flex: 1; padding: 8px 12px; border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 600; text-align: center;
  transition: all var(--transition);
  display: flex; align-items: center; justify-content: center; gap: 5px;
}
.card-btn-jump { background: rgba(79,195,247,0.12); color: #2b7aaa; border: 1px solid rgba(79,195,247,0.2); }
.card-btn-jump:hover { background: var(--accent); color: #fff; }
.card-btn-play { background: rgba(79,195,247,0.12); color: #2b7aaa; border: 1px solid rgba(79,195,247,0.2); }
.card-btn-play:hover { background: var(--accent); color: #fff; }
.card-btn-edit {
  background: var(--glass-input-bg); color: var(--text-secondary);
  border: 1px solid var(--glass-input-border); font-size: 12px;
  padding: 6px 10px; border-radius: var(--radius-xs); flex: none;
}
.card-btn-edit:hover { color: var(--accent-dark); border-color: var(--accent); }
.card-btn-delete {
  background: var(--glass-input-bg); color: var(--text-secondary);
  border: 1px solid var(--glass-input-border); font-size: 12px;
  padding: 6px 10px; border-radius: var(--radius-xs); flex: none;
}
.card-btn-delete:hover { color: var(--danger); border-color: var(--danger); }

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 18px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 600; transition: all var(--transition); white-space: nowrap;
}
.btn-primary {
  background: linear-gradient(135deg, #4fc3f7, #29b6f6);
  color: #fff;
  box-shadow: 0 2px 12px rgba(79,195,247,0.25);
}
.btn-primary:hover { background: linear-gradient(135deg, #29b6f6, #0390c8); box-shadow: 0 4px 18px rgba(79,195,247,0.4); }
.btn-secondary {
  background: var(--glass-card-bg); color: var(--text-primary);
  border: 1px solid var(--glass-card-border);
  backdrop-filter: blur(8px);
}
.btn-secondary:hover { border-color: var(--accent); color: var(--accent-dark); background: var(--glass-card-hover); }
.btn-danger { background: var(--danger-bg); color: var(--danger); border: 1px solid rgba(229,62,62,0.3); }
.btn-danger:hover { background: var(--danger); color: #fff; }
.btn-ghost { background: transparent; color: var(--text-secondary); padding: 8px 14px; }
.btn-ghost:hover { color: var(--accent-dark); background: rgba(79,195,247,0.06); }
.btn-sm { padding: 6px 12px; font-size: 12px; }

/* ===== Forms ===== */
.form-group { margin-bottom: 18px; }
.form-label { display: block; font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; }
.form-label .required { color: var(--danger); }
.form-input, .form-select, .form-textarea {
  width: 100%;
  background: var(--glass-input-bg);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--glass-input-border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  color: var(--text-primary);
  font-size: 14px;
  transition: all var(--transition);
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(79,195,247,0.12);
  outline: none;
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--text-muted); }
.form-textarea { resize: vertical; min-height: 80px; }
.form-select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238882a0' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px;
}
.form-hint { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-preview {
  background: var(--glass-input-bg); border: 1px dashed rgba(180,160,210,0.3);
  border-radius: var(--radius-sm); padding: 14px; margin-top: 8px;
}
.form-preview-label { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }

/* ===== Modal — Glass ===== */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(120, 110, 150, 0.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 200;
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.modal-overlay.show { display: flex; animation: fadeIn 0.2s ease; }
.modal {
  background: var(--glass-modal-bg);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(190, 175, 220, 0.3);
  border-radius: var(--radius);
  width: 100%; max-width: 600px; max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-raise);
}
.modal-header {
  padding: 20px 24px; border-bottom: 1px solid rgba(180,160,210,0.15);
  display: flex; align-items: center; justify-content: space-between;
}
.modal-title { font-size: 17px; font-weight: 700; color: var(--text-primary); }
.modal-close {
  background: none; color: var(--text-muted); font-size: 22px; line-height: 1;
  padding: 4px 8px; border-radius: var(--radius-xs);
}
.modal-close:hover { color: var(--text-primary); background: rgba(0,0,0,0.05); }
.modal-body { padding: 24px; }
.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid rgba(180,160,210,0.12);
  display: flex; justify-content: flex-end; gap: 10px;
}

/* ===== Toast ===== */
.toast {
  position: fixed; bottom: 28px; left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--glass-modal-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(190,175,220,0.35);
  border-radius: var(--radius-sm);
  padding: 12px 24px; font-size: 14px; color: var(--text-primary);
  z-index: 300; opacity: 0;
  transition: all 0.3s ease;
  box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 8px;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.success { border-color: var(--success); }
.toast.success .toast-icon { color: var(--success); }
.toast.error { border-color: var(--danger); }
.toast.error .toast-icon { color: var(--danger); }

/* ===== Empty State ===== */
.empty-state { text-align: center; padding: 60px 20px; color: var(--text-muted); }
.empty-state .empty-icon { font-size: 48px; margin-bottom: 12px; opacity: 0.4; }
.empty-state .empty-text { font-size: 15px; margin-bottom: 6px; }
.empty-state .empty-hint { font-size: 13px; color: var(--text-muted); }

/* ===== Stats Cards (Home) ===== */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 28px; }
.stat-card {
  background: var(--glass-card-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius); padding: 18px;
  transition: all var(--transition);
}
.stat-card:hover {
  background: var(--glass-card-hover);
  border-color: rgba(79,195,247,0.3);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.stat-icon {
  width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; margin-bottom: 10px;
}
.stat-value { font-size: 28px; font-weight: 700; color: var(--text-primary); }
.stat-label { font-size: 13px; color: var(--text-secondary); }

/* ===== Stat Card Clickable ===== */
.stat-card-clickable { cursor: pointer; }
.stat-card-clickable:hover {
  border-color: rgba(79, 195, 247, 0.4);
  box-shadow: 0 4px 24px rgba(79, 195, 247, 0.12), 0 2px 12px rgba(236, 72, 153, 0.08);
}
.stat-card-clickable:active {
  transform: scale(0.97);
  transition: transform 0.1s ease;
}

/* ===== Preview More Section ===== */
.preview-more {
  background: var(--glass-card-bg);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius);
  padding: 22px 28px;
  margin-top: 20px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  animation: fadeIn 0.4s ease;
}
.preview-more-text {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.preview-more-btn {
  background: linear-gradient(135deg, #4fc3f7, #a78bfa);
  color: #fff;
  border: none;
  padding: 10px 28px;
  border-radius: 22px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 4px 18px rgba(79, 195, 247, 0.25);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.preview-more-btn:hover {
  background: linear-gradient(135deg, #29b6f6, #8b74f0);
  box-shadow: 0 6px 24px rgba(79, 195, 247, 0.4), 0 2px 8px rgba(236, 72, 153, 0.2);
  transform: translateY(-2px);
}
.preview-more-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(79, 195, 247, 0.2);
}

/* ===== Homepage: Transparent Card Overrides ===== */
body[data-section="home"] .stat-card {
  background: rgba(255, 255, 255, 0.20);
  border: 1.5px solid rgba(200, 190, 230, 0.45);
  border-radius: 18px;
  box-shadow: 0 2px 16px rgba(79, 195, 247, 0.06);
  position: relative;
  overflow: hidden;
}
body[data-section="home"] .stat-card:hover {
  background: rgba(255, 255, 255, 0.35);
  border-color: rgba(79, 195, 247, 0.55);
  box-shadow: 0 6px 28px rgba(79, 195, 247, 0.18), 0 2px 14px rgba(236, 72, 153, 0.12);
  transform: translateY(-3px);
}
body[data-section="home"] .card {
  background: rgba(255, 255, 255, 0.20);
  border: 1.5px solid rgba(200, 190, 230, 0.42);
}
body[data-section="home"] .card:hover {
  background: rgba(255, 255, 255, 0.35);
  border-color: rgba(79, 195, 247, 0.50);
}

/* ===== Homepage Hero Title ===== */
.home-hero {
  text-align: center;
  padding: 14px 20px 6px;
  position: relative;
}
.home-hero-title {
  font-size: 33px;
  font-weight: 800;
  background: linear-gradient(135deg, #4fc3f7 0%, #a78bfa 38%, #ec4899 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 0.04em;
  line-height: 1.25;
  filter: drop-shadow(0 2px 6px rgba(79,195,247,0.25));
  margin-bottom: 2px;
}
.home-hero-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  margin-top: 2px;
}

/* ===== Preview Modal ===== */
.preview-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(140, 130, 170, 0.28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 210;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.preview-modal-overlay.show {
  display: flex;
  animation: fadeIn 0.25s ease;
}
.preview-modal-card {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1.5px solid rgba(190, 175, 220, 0.32);
  border-radius: 22px;
  width: 100%;
  max-width: 680px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 12px 48px rgba(79, 195, 247, 0.15), 0 4px 20px rgba(236, 72, 153, 0.10);
  animation: previewPopIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
}
@keyframes previewPopIn {
  from { opacity: 0; transform: scale(0.92) translateY(16px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.preview-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 12px;
  border-bottom: 1px solid rgba(180, 160, 210, 0.18);
}
.preview-modal-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}
.preview-modal-close {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(180, 160, 210, 0.25);
  background: rgba(255,255,255,0.6);
  font-size: 18px;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  line-height: 1;
}
.preview-modal-close:hover {
  background: rgba(236, 72, 153, 0.12);
  color: var(--pink-accent);
  border-color: rgba(236, 72, 153, 0.3);
}
.preview-modal-body {
  padding: 18px 24px;
  max-height: 55vh;
  overflow-y: auto;
}
.preview-modal-body .preview-item {
  padding: 12px 16px;
  background: rgba(255,255,255,0.35);
  border: 1px solid rgba(200,190,230,0.22);
  border-radius: 12px;
  margin-bottom: 10px;
  transition: all 0.2s ease;
}
.preview-modal-body .preview-item:hover {
  background: rgba(255,255,255,0.55);
  border-color: rgba(79,195,247,0.30);
}
.preview-modal-body .preview-item-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.preview-modal-body .preview-item-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.preview-modal-body .preview-item-date {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 6px;
}
.preview-modal-footer {
  padding: 14px 24px 22px;
  text-align: center;
  border-top: 1px solid rgba(180, 160, 210, 0.14);
}
.preview-modal-footer .preview-modal-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #4fc3f7, #a78bfa);
  color: #fff;
  border: none;
  padding: 10px 24px;
  border-radius: 22px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 4px 18px rgba(79, 195, 247, 0.25);
  text-decoration: none;
}
.preview-modal-footer .preview-modal-btn:hover {
  background: linear-gradient(135deg, #29b6f6, #8b74f0);
  box-shadow: 0 6px 24px rgba(79, 195, 247, 0.4), 0 2px 8px rgba(236, 72, 153, 0.2);
  transform: translateY(-2px);
}
.preview-modal-footer .preview-hint {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

/* Mini member cards in preview modal */
.preview-member-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px;
}
.preview-member-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.4);
  border: 1px solid rgba(200,190,230,0.22);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.preview-member-card:hover {
  background: rgba(255,255,255,0.6);
  border-color: rgba(236,72,153,0.3);
  transform: translateY(-1px);
}
.preview-member-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  overflow: hidden;
}
.preview-member-avatar svg {
  width: 100%; height: 100%;
}
.preview-member-info {
  flex: 1; min-width: 0;
}
.preview-member-name {
  font-size: 13px; font-weight: 600;
  color: var(--text-primary);
}
.preview-member-realname {
  font-size: 11px; color: var(--text-muted);
  margin-top: 1px;
}
.preview-member-bio {
  font-size: 11px; color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ===== Homepage Sticker Decorations ===== */
.home-sticker {
  position: absolute;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.6);
  border: 1.5px solid rgba(200,190,230,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  pointer-events: none;
  z-index: 2;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  animation: stickerFloat 3s ease-in-out infinite;
}
.home-sticker svg {
  width: 32px; height: 32px;
}
.home-sticker-tl { top: -8px; left: -8px; }
.home-sticker-tr { top: -6px; right: -8px; }
.home-sticker-br { bottom: -8px; right: -8px; }
.home-sticker-bl { bottom: -8px; left: -8px; }

.home-sticker:nth-child(odd) { animation-delay: 0s; }
.home-sticker:nth-child(even) { animation-delay: 1.5s; }

@keyframes stickerFloat {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  50%      { transform: rotate(2deg) translateY(-4px); }
}

/* Decorative sparkles / hearts / crowns */
.home-deco {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  font-size: 14px;
  opacity: 0.7;
  animation: decoPulse 2.5s ease-in-out infinite;
}
.home-deco:nth-child(odd) { animation-delay: 0s; }
.home-deco:nth-child(even) { animation-delay: 1.2s; }

@keyframes decoPulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%      { opacity: 0.85; transform: scale(1.15); }
}

/* ===== Member Profile ===== */
.member-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.member-card {
  background: var(--glass-card-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius); overflow: hidden;
  transition: all 0.25s ease; cursor: pointer;
}
.member-card:hover {
  background: var(--glass-card-hover);
  border-color: rgba(236,72,153,0.25);
  transform: translateY(-3px);
  box-shadow: var(--shadow-raise);
}
.member-avatar {
  width: 100%; aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: 36px; font-weight: 800; color: #fff;
  position: relative;
}
.member-avatar::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.3), transparent);
}
.member-team-badge {
  position: absolute; top: 8px; right: 8px;
  font-size: 10px; padding: 2px 8px; border-radius: 4px;
  background: rgba(0,0,0,0.4); backdrop-filter: blur(4px);
  z-index: 1; color: #fff;
}
.member-info { padding: 14px; }
.member-name { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.member-realname { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.member-meta { display: flex; gap: 10px; margin-top: 8px; font-size: 11px; color: var(--text-secondary); }
.member-bio-snippet {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 8px;
  line-height: 1.5;
  padding-top: 8px;
  border-top: 1px solid rgba(180, 160, 210, 0.1);
}
.member-detail {
  padding: 14px; border-top: 1px solid rgba(180,160,210,0.15);
  font-size: 12px; color: var(--text-secondary); display: none;
}
.member-card.expanded .member-detail { display: block; }

/* ===== Album Library ===== */
.album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.album-card {
  background: var(--glass-card-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius); padding: 16px;
  transition: all var(--transition);
}
.album-card:hover {
  background: var(--glass-card-hover);
  border-color: rgba(79,195,247,0.25);
  transform: translateY(-2px);
}
.album-header { display: flex; gap: 14px; margin-bottom: 12px; }
.album-cover {
  width: 64px; height: 64px; border-radius: 12px;
  background: linear-gradient(135deg, #4fc3f7, #ec4899);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff;
  text-align: center; flex-shrink: 0; overflow: hidden;
}
.album-title { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.album-type {
  display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 4px;
  background: rgba(79,195,247,0.12); color: #2b7aaa; margin-top: 4px;
}
.album-date { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.album-tracks { list-style: none; margin-top: 8px; counter-reset: track; }
.album-tracks li { font-size: 12px; color: var(--text-secondary); padding: 3px 0; display: flex; gap: 8px; }
.album-tracks li::before { content: counter(track); counter-increment: track; color: var(--text-muted); min-width: 18px; text-align: right; }
.album-note { margin-top: 10px; padding: 8px 12px; background: var(--glass-input-bg); border: 1px dashed rgba(180,160,210,0.3); border-radius: var(--radius-sm); font-size: 12px; color: var(--text-secondary); }
.album-note-label { font-size: 11px; color: var(--text-muted); margin-bottom: 2px; }

/* ===== Concert Calendar ===== */
.concert-timeline { display: flex; flex-direction: column; gap: 0; }
.concert-item {
  display: flex; gap: 16px; padding: 16px 0;
  border-bottom: 1px solid rgba(180,160,210,0.15); position: relative;
}
.concert-item:last-child { border-bottom: none; }
.concert-date { flex-shrink: 0; width: 60px; text-align: center; }
.concert-date .day { font-size: 24px; font-weight: 700; color: var(--accent-dark); line-height: 1; }
.concert-date .month { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.concert-date .year { font-size: 11px; color: var(--text-muted); }
.concert-info { flex: 1; }
.concert-title { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.concert-venue { font-size: 13px; color: var(--text-secondary); margin-top: 4px; display: flex; align-items: center; gap: 6px; }
.concert-status { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 4px; margin-top: 6px; }
.concert-status.ended { background: rgba(130,130,160,0.1); color: var(--text-muted); }
.concert-status.upcoming { background: rgba(56,161,105,0.1); color: var(--success); }
.concert-status.tba { background: rgba(221,107,32,0.1); color: var(--warning); }

/* ===== Variety Library ===== */
.variety-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.variety-card {
  background: var(--glass-card-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius); padding: 16px;
  transition: all var(--transition);
}
.variety-card:hover {
  background: var(--glass-card-hover);
  border-color: rgba(79,195,247,0.25);
  transform: translateY(-2px);
}
.variety-title { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.variety-meta { display: flex; gap: 10px; margin-top: 6px; font-size: 12px; color: var(--text-secondary); }
.variety-desc { font-size: 13px; color: var(--text-secondary); margin-top: 8px; line-height: 1.5; }

/* ===== Admin Panel ===== */
.admin-panel {
  background: var(--glass-card-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius); padding: 24px; margin-bottom: 20px;
}
.admin-panel-title { font-size: 16px; font-weight: 700; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; color: var(--text-primary); }
.data-actions { display: flex; flex-wrap: wrap; gap: 10px; padding: 16px; background: var(--glass-input-bg); border-radius: var(--radius-sm); margin-top: 16px; }
.data-info { font-size: 12px; color: var(--text-muted); margin-top: 10px; }

/* ===== Filter Tabs ===== */
.filter-tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.filter-tab {
  padding: 6px 14px; border-radius: 20px; font-size: 13px; font-weight: 500;
  background: var(--glass-card-bg); color: var(--text-secondary);
  border: 1px solid var(--glass-card-border); transition: all var(--transition);
}
.filter-tab:hover { color: var(--text-primary); }
.filter-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ===== Mobile ===== */
.mobile-header { display: none; padding: 12px 16px; background: rgba(255,255,255,0.55); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(180,160,210,0.15); align-items: center; gap: 12px; }
.menu-toggle { background: none; color: var(--text-primary); font-size: 22px; padding: 4px; }
.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(100,90,140,0.2); z-index: 99; }

@media (max-width: 768px) {
  .app { --sidebar-width: 56px; }
  .app.sidebar-open { --sidebar-width: 200px; }
  .sidebar { transform: translateX(-100%); width: 200px; }
  .sidebar.mobile-open { transform: translateX(0); }
  .sidebar-overlay.show { display: block; }
  .main { margin-left: 0 !important; }
  .mobile-header { display: flex; }
  .content { padding: 16px; }
  .card-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .topbar { padding: 12px 16px; }
  .search-wrapper { max-width: none; }
}

/* ===== Admin / Visitor Visibility ===== */
.admin-only { display: none; }
.visitor-only { display: block; }

/* ===== Member Detail Rich Content ===== */
.member-detail p { margin-bottom: 4px; }
.member-detail ul { margin-top: 4px; padding-left: 16px; }
.member-detail ul li { font-size: 12px; color: var(--text-secondary); padding: 2px 0; }
.member-detail a { color: var(--accent-dark); text-decoration: underline; font-size: 12px; }

/* ===== Topbar Login Button ===== */
.topbar-actions .btn-ghost {
  color: var(--text-muted); font-size: 12px; padding: 5px 12px;
  border-radius: 16px; transition: all var(--transition);
}
.topbar-actions .btn-ghost:hover { background: rgba(79,195,247,0.1); color: var(--accent-dark); }

/* ===== Welcome Popup — Frosted Glass + Stickers ===== */
#welcome-popup {
  background: rgba(100, 85, 140, 0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.welcome-modal {
  max-width: 500px !important;
  text-align: center;
  background: rgba(255, 255, 255, 0.72) !important;
  backdrop-filter: blur(28px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
  border: 1px solid rgba(190, 170, 220, 0.35) !important;
  border-radius: 28px !important;
  box-shadow:
    0 0 50px rgba(79, 195, 247, 0.18),
    0 0 100px rgba(236, 72, 153, 0.10),
    0 12px 48px rgba(120, 100, 160, 0.15) !important;
  position: relative;
  overflow: visible;
  animation: welcomePopIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes welcomePopIn {
  from { transform: scale(0.88); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

/* Edge glow ring */
.welcome-modal::before {
  content: '';
  position: absolute; inset: -2px; border-radius: 30px;
  background: linear-gradient(135deg, rgba(79,195,247,0.25), rgba(236,72,153,0.25), rgba(79,195,247,0.15), rgba(167,139,250,0.25));
  z-index: -1;
  filter: blur(8px);
}

/* ---- Decorative Sparkle Stickers ---- */
.wsticker {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1.5px solid rgba(200, 180, 230, 0.35);
  box-shadow: 0 2px 10px rgba(167,139,250,0.15), 0 1px 4px rgba(0,0,0,0.06);
  z-index: 2;
  pointer-events: none;
  animation: stickerBounce var(--ws-dur, 3s) ease-in-out infinite;
  animation-delay: var(--ws-del, 0s);
}
@keyframes stickerBounce {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  30%      { transform: translateY(-8px) rotate(3deg); }
  60%      { transform: translateY(4px) rotate(-2deg); }
}

/* Sparkle sizes & positions */
.ws-s { width: 36px; height: 36px; font-size: 18px; }
.ws-s1 { top: -18px;  left: -18px;  --ws-del: 0s;    --ws-dur: 3.2s; }
.ws-s2 { top: -12px;  right: 8%;   --ws-del: 0.6s;  --ws-dur: 2.8s; }
.ws-s3 { top: 25%;   left: -20px;  --ws-del: 0.3s;  --ws-dur: 3.6s; }
.ws-s4 { bottom: 12%; right: -20px; --ws-del: 0.9s;  --ws-dur: 3.0s; }
.ws-s5 { bottom: -18px; left: 18%;  --ws-del: 0.5s;  --ws-dur: 3.4s; }
.ws-s6 { bottom: -14px; right: 22%; --ws-del: 1.2s;  --ws-dur: 2.9s; }

/* ---- 13 Member Q-version Animal Stickers ---- */
.ws-m {
  width: 40px; height: 40px; font-size: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(255,255,255,0.8), rgba(240,235,255,0.5));
  border: 2px solid rgba(180, 165, 210, 0.4);
  box-shadow: 0 3px 12px rgba(79,195,247,0.1), 0 1px 3px rgba(0,0,0,0.05);
}
.ws-m::after {
  content: '';
  position: absolute; top: 3px; left: 28%; width: 30%; height: 25%;
  background: radial-gradient(ellipse, rgba(255,255,255,0.7) 0%, transparent 70%);
  border-radius: 50%;
}
.ws-m1  { top: -20px;  left: 5%;   --ws-del: 0s;    --ws-dur: 3.8s; }
.ws-m2  { top: -22px;  left: 18%;  --ws-del: 0.15s; --ws-dur: 3.3s; }
.ws-m3  { top: -24px;  left: 31%;  --ws-del: 0.3s;  --ws-dur: 4.0s; }
.ws-m4  { top: -20px;  left: 44%;  --ws-del: 0.45s; --ws-dur: 3.5s; }
.ws-m5  { top: -22px;  left: 57%;  --ws-del: 0.6s;  --ws-dur: 3.1s; }
.ws-m6  { top: -24px;  left: 70%;  --ws-del: 0.75s; --ws-dur: 3.9s; }
.ws-m7  { top: -20px;  left: 83%;  --ws-del: 0.9s;  --ws-dur: 3.4s; }
.ws-m8  { top: 20%;   left: -22px; --ws-del: 0.2s;  --ws-dur: 3.7s; }
.ws-m9  { top: 55%;   left: -22px; --ws-del: 0.5s;  --ws-dur: 3.2s; }
.ws-m10 { top: 20%;   right: -22px;--ws-del: 0.35s; --ws-dur: 3.6s; }
.ws-m11 { top: 55%;   right: -22px;--ws-del: 0.65s; --ws-dur: 3.0s; }
.ws-m12 { bottom: -22px; left: 35%; --ws-del: 1.0s; --ws-dur: 3.5s; }
.ws-m13 { bottom: -20px; left: 52%; --ws-del: 1.15s; --ws-dur: 3.3s; }

/* ---- Inner Card Content ---- */
.welcome-inner {
  position: relative; z-index: 1;
  padding: 30px 28px 24px;
}

.welcome-title {
  font-size: 26px; font-weight: 800; letter-spacing: 3px;
  background: linear-gradient(135deg, #4fc3f7 0%, #a78bfa 45%, #ec4899 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0 0 6px;
}
.welcome-title-line {
  width: 60px; height: 3px;
  margin: 0 auto 20px;
  background: linear-gradient(90deg, #4fc3f7, #a78bfa, #ec4899);
  border-radius: 2px;
}
.welcome-kor-subtitle {
  font-size: 13px; font-weight: 400;
  color: var(--text-muted);
  opacity: 0.7;
  letter-spacing: 1px;
  margin: -14px 0 14px;
}

.welcome-greeting {
  font-size: 15px; color: #4a4060; margin: 0 0 14px;
  line-height: 1.6;
}

.welcome-meaning {
  font-size: 13.5px; color: #5a4e72; margin: 0 0 14px;
  line-height: 1.8;
  background: rgba(167,139,250,0.06);
  border-radius: 12px; padding: 14px 16px;
  border: 1px solid rgba(180,160,220,0.12);
}
.welcome-meaning strong {
  color: #ec4899; font-weight: 700;
}

.welcome-member-list {
  font-size: 13.5px; color: #5a4e72; margin: 0 0 14px;
  line-height: 1.6;
}
.welcome-member-names {
  display: inline-block; margin-top: 6px;
  font-size: 12.5px; color: #6a5d88; font-weight: 600;
  letter-spacing: 0.5px; line-height: 1.8;
}

.welcome-desc {
  font-size: 13.5px; color: #5a4e72; margin: 0 0 10px;
  line-height: 1.7;
}

.welcome-divider {
  font-size: 11px; color: #b4a0d2;
  letter-spacing: 4px; margin: 18px 0 14px;
  user-select: none;
}

.welcome-warn {
  font-size: 14px; color: #d4597a; font-weight: 600;
  margin: 0 0 6px;
}
.welcome-motto {
  font-size: 15px;
  background: linear-gradient(135deg, #4fc3f7, #a78bfa, #ec4899);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800; margin: 0 0 8px; letter-spacing: 1px;
}

/* Button */
.welcome-btn-wrap { margin-top: 22px; }
.welcome-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 140px;
  padding: 12px 36px;
  font-size: 15px; font-weight: 700; letter-spacing: 1px;
  color: #fff;
  background: linear-gradient(135deg, #4fc3f7 0%, #a78bfa 50%, #ec4899 100%);
  border: none; border-radius: 26px;
  box-shadow: 0 4px 20px rgba(79,195,247,0.35), 0 2px 8px rgba(236,72,153,0.2);
  cursor: pointer;
  transition: all 0.25s ease;
}
.welcome-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(79,195,247,0.45), 0 4px 14px rgba(236,72,153,0.28);
}
.welcome-btn:active { transform: translateY(0); }

/* Responsive */
@media (max-width: 600px) {
  .welcome-modal { max-width: 92vw !important; }
  .welcome-inner { padding: 24px 18px 20px; }
  .welcome-title { font-size: 22px; }
  .ws-m { width: 32px; height: 32px; font-size: 17px; }
  .ws-m8, .ws-m9  { left: -14px; }
  .ws-m10, .ws-m11 { right: -14px; }
  .ws-s { width: 28px; height: 28px; font-size: 14px; }
  .ws-s3  { left: -14px; }
  .ws-s4  { right: -14px; }
}

/* ===== Korean Aux Text (Small, Secondary) ===== */
.kor-text {
  font-size: 0.78em;
  color: var(--text-muted);
  font-weight: 400;
  letter-spacing: -0.02em;
  margin-left: 0.3em;
  opacity: 0.82;
  display: inline;
  white-space: nowrap;
}
.kor-subtitle {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 400;
  letter-spacing: -0.01em;
  opacity: 0.75;
  margin-top: 1px;
  display: block;
}
.kor-inline {
  font-size: 0.75em;
  color: var(--text-muted);
  font-weight: 400;
  opacity: 0.78;
  margin-left: 0.25em;
}

/* ===== Utility ===== */
.text-center { text-align: center; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-16 { margin-bottom: 16px; }
.hidden { display: none !important; }
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }

/* ===== Loading Splash Page ===== */
.loading-splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: linear-gradient(135deg, #e8d5f0 0%, #d4e3f8 40%, #e8c8ed 70%, #f8d0d8 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
.loading-splash::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 30%, rgba(79,195,247,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 80% 70%, rgba(236,72,153,0.08) 0%, transparent 60%);
  pointer-events: none;
}
.loading-splash.fade-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.splash-title {
  font-size: 48px;
  font-weight: 800;
  letter-spacing: 8px;
  background: linear-gradient(135deg, #4fc3f7 0%, #a78bfa 40%, #ec4899 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  z-index: 2;
  filter:
    drop-shadow(0 1px 2px rgba(255,255,255,0.6))
    drop-shadow(0 3px 6px rgba(79,195,247,0.3))
    drop-shadow(0 6px 12px rgba(236,72,153,0.18));
}
.splash-title::after {
  content: 'SEVENTEEN';
  position: absolute;
  left: 0; top: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.45) 0%, transparent 55%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  pointer-events: none;
}
.splash-subtitle {
  font-size: 15px;
  font-weight: 500;
  color: #5a5270;
  margin-top: 14px;
  letter-spacing: 2px;
  z-index: 1;
}
.splash-progress {
  width: 220px;
  height: 4px;
  margin-top: 36px;
  background: rgba(255,255,255,0.3);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.splash-progress-bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #4fc3f7, #a78bfa, #ec4899);
  border-radius: 2px;
  animation: splashProgressFill 2s ease forwards;
}
@keyframes splashProgressFill {
  to { width: 100%; }
}

/* ===== Warning Bar ===== */
.warning-bar {
  background: rgba(255, 193, 7, 0.12);
  border: 1px solid rgba(255, 193, 7, 0.3);
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  font-size: 13px;
  color: #856404;
  margin: 0 28px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  overflow: hidden;
  position: relative;
  min-height: 36px;
}
.warning-bar .warning-icon { font-size: 14px; flex-shrink: 0; z-index: 1; position: relative; }
.warning-bar .warning-bar-text {
  white-space: nowrap;
  display: inline-block;
  animation: warningMarquee 30s linear infinite;
}
.warning-bar .warning-bar-text:hover { animation-play-state: paused; }

@keyframes warningMarquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ===== Three-Level Menu (歌词台) ===== */
.nav-sub-lyrics {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-sub-lyrics.open { max-height: 2000px; }

.nav-album-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 12px 7px 16px;
  border-radius: var(--radius-xs);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
  position: relative;
}
.nav-album-item:hover {
  background: rgba(79, 195, 247, 0.1);
  color: #2b7aaa;
}
.nav-album-item.active {
  background: linear-gradient(135deg, rgba(79,195,247,0.14), rgba(236,72,153,0.08));
  color: var(--accent-dark);
}
.nav-album-item .album-emoji {
  font-size: 13px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}
.nav-album-item .album-label {
  opacity: 0;
  transform: translateX(-4px);
  transition: all 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app.sidebar-open .nav-album-item .album-label { opacity: 1; transform: translateX(0); }
.nav-album-item .album-arrow {
  font-size: 9px;
  opacity: 0;
  transition: all 0.22s ease;
  color: var(--text-muted);
}
.app.sidebar-open .nav-album-item .album-arrow { opacity: 1; }
.nav-album-item.expanded .album-arrow { transform: rotate(180deg); }

/* Glass tooltip for album items */
.nav-album-item[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%) scale(0.85);
  background: rgba(248, 245, 255, 0.78);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(190, 175, 220, 0.35);
  border-radius: 10px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #2d2a3d;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  z-index: 150;
}
.nav-album-item[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}
.app.sidebar-open .nav-album-item[data-tooltip]::after { opacity: 0; }

/* Song list (level 3) */
.nav-song-list {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-song-list.open { max-height: 600px; }

.nav-song-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px 5px 30px;
  border-radius: var(--radius-xs);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 400;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-song-item:hover {
  background: rgba(236, 72, 153, 0.08);
  color: #c0267a;
}
.nav-song-item.active {
  background: rgba(236, 72, 153, 0.14);
  color: #c0267a;
  font-weight: 600;
}
.nav-song-item .song-emoji {
  font-size: 10px;
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}
.nav-song-item .song-label {
  opacity: 0;
  transform: translateX(-3px);
  transition: all 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  text-overflow: ellipsis;
}
.app.sidebar-open .nav-song-item .song-label { opacity: 1; transform: translateX(0); }

/* Glass tooltip for song items (hover only - NO lyrics on hover) */
.nav-song-item[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) scale(0.85);
  background: rgba(252, 248, 255, 0.78);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(220, 200, 235, 0.35);
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #3d2a4a;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 6px 20px rgba(0,0,0,0.08), 0 0 12px rgba(236,72,153,0.06);
  z-index: 150;
}
.nav-song-item[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}
.app.sidebar-open .nav-song-item[data-tooltip]::after { opacity: 0; }

/* Mobile long-press tooltip */
.nav-song-item.show-tooltip[data-tooltip]::after,
.nav-album-item.show-tooltip[data-tooltip]::after {
  opacity: 1 !important;
  transform: translateY(-50%) scale(1) !important;
}

/* ===== Lyrics Display ===== */
.lyrics-container { max-width: 760px; margin: 0 auto; }

.lyrics-album-header {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  background: var(--glass-card-bg);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius);
  padding: 20px 24px;
}
.lyrics-album-cover {
  width: 100px;
  height: 100px;
  border-radius: 14px;
  background: linear-gradient(135deg, #4fc3f7, #a78bfa, #ec4899);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(79,195,247,0.2);
}
.lyrics-album-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lyrics-album-info { flex: 1; min-width: 0; }
.lyrics-album-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}
.lyrics-album-meta {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.lyrics-album-meta .meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
}
.lyrics-album-desc {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 10px;
  line-height: 1.6;
}

.lyrics-song-list-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.lyrics-song-chip {
  padding: 6px 14px;
  border-radius: 18px;
  font-size: 13px;
  font-weight: 500;
  background: var(--glass-card-bg);
  border: 1px solid var(--glass-card-border);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.lyrics-song-chip:hover {
  background: var(--glass-card-hover);
  border-color: rgba(236,72,153,0.3);
  color: #c0267a;
  transform: translateY(-1px);
}
.lyrics-song-chip.active {
  background: linear-gradient(135deg, rgba(79,195,247,0.15), rgba(236,72,153,0.1));
  border-color: rgba(236,72,153,0.3);
  color: #c0267a;
  font-weight: 600;
}

.lyrics-display {
  background: var(--glass-card-bg);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius);
  padding: 32px 40px;
  margin-top: 16px;
  animation: fadeIn 0.4s ease;
}
.lyrics-song-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  text-align: center;
  margin-bottom: 6px;
}
.lyrics-song-album {
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 20px;
}
.lyrics-text {
  font-size: 14px;
  line-height: 2.1;
  color: var(--text-primary);
  white-space: pre-wrap;
  text-align: center;
}

/* ===== Video Fallback ===== */
.video-wrapper {
  position: relative;
  margin: 0 16px 12px;
  overflow: visible; /* allow zoom scale overflow */
  background: #000;
  border-radius: var(--radius-sm);
}
.video-wrapper .card-video {
  margin: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.video-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111;
  color: #666;
  font-size: 13px;
  gap: 8px;
  z-index: 2;
  transition: opacity 0.4s ease;
  border-radius: var(--radius-sm);
}
.video-loading .spinner {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(255,255,255,0.15);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.video-loading.hidden { opacity: 0; pointer-events: none; }
.video-fallback {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #1a1a2e;
  color: #888;
  gap: 10px;
  z-index: 3;
  border-radius: var(--radius-sm);
}
.video-fallback.show { display: flex; }
.video-fallback .fallback-icon { font-size: 36px; opacity: 0.5; }
.video-fallback .fallback-text { font-size: 13px; text-align: center; max-width: 220px; line-height: 1.5; }

/* ===== Video Enhanced Controls ===== */
.video-iframe-container {
  position: relative;
  transform-origin: top left;
  transition: transform 0.3s ease;
  will-change: transform;
}
/* Horizontal (16:9) default */
.video-wrapper[data-orientation="horizontal"] .video-iframe-container {
  aspect-ratio: 16 / 9;
  max-height: none;
}
.video-wrapper[data-orientation="horizontal"] .video-iframe-container iframe {
  width: 100%;
  height: 100%;
}
/* Vertical (9:16) — narrower portrait */
.video-wrapper[data-orientation="vertical"] .video-iframe-container {
  aspect-ratio: 9 / 16;
  max-width: 380px;
  margin: 0 auto;
}
.video-wrapper[data-orientation="vertical"] .video-iframe-container iframe {
  width: 100%;
  height: 100%;
}

.video-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(15, 15, 30, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin: 0 16px 12px;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.video-ctrl-group {
  display: flex;
  align-items: center;
  gap: 2px;
}
.video-ctrl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  color: #ccc;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  user-select: none;
}
.video-ctrl-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
}
.video-ctrl-btn:active {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(0.95);
}
.video-ctrl-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Zoom value badge */
.video-ctrl-zoomval {
  min-width: 44px;
  font-weight: 600;
  font-size: 12px;
  color: var(--accent);
}

/* Fullscreen button highlight */
.video-ctrl-fs {
  font-size: 16px;
  min-width: 30px;
}

/* Quality select */
.video-quality-select {
  height: 28px;
  padding: 0 6px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  color: #ccc;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  outline: none;
  transition: all 0.2s ease;
}
.video-quality-select:hover,
.video-quality-select:focus {
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}
.video-quality-select option {
  background: #1a1a2e;
  color: #ddd;
}

/* ===== Feedback ===== */
.feedback-form {
  background: var(--glass-card-bg);
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 20px;
}
.feedback-form-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.feedback-list-item {
  background: var(--glass-card-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  margin-bottom: 10px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.feedback-list-item .fb-content { flex: 1; }
.feedback-list-item .fb-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.feedback-list-item .fb-text { font-size: 13px; color: var(--text-secondary); margin-top: 4px; line-height: 1.5; }
.feedback-list-item .fb-time { font-size: 11px; color: var(--text-muted); margin-top: 6px; }

/* ===== Section background: lyrics & feedback ===== */
body[data-section="lyrics"] {
  background: linear-gradient(130deg, #d8e0f8 0%, #d0cce8 25%, #e4cce8 50%, #f0d2dc 75%, #f8d8e0 100%);
  background-attachment: fixed;
}
body[data-section="feedback"] {
  background: linear-gradient(145deg, #dce8f8 0%, #d4cce8 30%, #e8d0e8 55%, #f5d8de 80%, #fadce2 100%);
  background-attachment: fixed;
}

/* ================================================================
   ===== Member Detail Page — Full Styles =====
   ================================================================ */

/* Back button */
.member-back-btn {
  font-size: 13px; padding: 6px 14px;
  border-radius: 20px;
  color: var(--text-secondary);
  transition: all var(--transition);
  margin-bottom: 20px;
  display: inline-flex; align-items: center; gap: 6px;
}
.member-back-btn:hover { color: var(--accent-dark); background: rgba(79,195,247,0.08); }

/* ---- Hero: Large Round Avatar ---- */
.member-detail-hero {
  text-align: center;
  padding: 32px 20px 28px;
  background: var(--glass-card-bg);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius);
  margin-bottom: 24px;
  box-shadow: var(--shadow);
  animation: fadeIn 0.4s ease;
}

.member-detail-avatar {
  width: 120px; height: 120px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
  overflow: hidden;
  box-shadow: 0 0 30px rgba(79,195,247,0.15), 0 0 20px rgba(236,72,153,0.08);
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.member-detail-avatar:hover {
  transform: scale(1.05);
  box-shadow: 0 0 40px rgba(79,195,247,0.25), 0 0 30px rgba(236,72,153,0.15);
}
.member-detail-avatar svg {
  width: 75%; height: 75%;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.1));
}

.member-detail-hero-name {
  font-size: 28px; font-weight: 800;
  color: var(--text-primary);
  letter-spacing: 1px;
  margin-bottom: 4px;
}
.member-detail-hero-realname {
  font-size: 15px; color: var(--text-secondary);
  font-weight: 500; margin-bottom: 10px;
}
.member-detail-hero-team {
  display: inline-block; font-size: 12px; font-weight: 600;
  padding: 4px 14px; border-radius: 20px;
}

/* ---- Detail Card Container ---- */
.member-detail-card {
  background: var(--glass-card-bg);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius);
  padding: 22px 26px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
  animation: fadeIn 0.4s ease;
}
.member-detail-card-title {
  font-size: 16px; font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 16px;
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(180,160,210,0.12);
}

/* ---- Detail Grid (2-column key-value) ---- */
.member-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
}
.detail-row {
  display: flex; align-items: baseline; gap: 8px;
  padding: 6px 0;
}
.detail-label {
  font-size: 12px; color: var(--text-muted);
  font-weight: 500; min-width: 60px; flex-shrink: 0;
}
.detail-value {
  font-size: 14px; color: var(--text-primary);
  font-weight: 500;
}

/* Biography */
.member-detail-bio {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid rgba(180,160,210,0.1);
  font-size: 13px; color: var(--text-secondary);
  line-height: 1.7;
}
.member-detail-text {
  font-size: 13px; color: var(--text-secondary);
  line-height: 1.6;
}

/* ===== Military Status Module ===== */

/* Status Badge (shared) */
.military-status-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 18px; border-radius: 20px;
  font-size: 14px; font-weight: 700;
}

/* 未入伍 */
.military-not-enlisted {
  background: linear-gradient(135deg, rgba(56,161,105,0.12), rgba(56,161,105,0.06));
  border: 1px solid rgba(56,161,105,0.25);
  color: #276749;
}

/* 已入伍 */
.military-enlisted {
  background: linear-gradient(135deg, rgba(221,107,32,0.15), rgba(236,72,153,0.08));
  border: 1px solid rgba(221,107,32,0.3);
  color: #9a5316;
}

/* 已退伍 */
.military-discharged {
  background: linear-gradient(135deg, rgba(79,195,247,0.12), rgba(79,195,247,0.06));
  border: 1px solid rgba(79,195,247,0.25);
  color: #1a6d8a;
}

/* Military Info Grid */
.military-info-grid {
  display: flex; gap: 20px;
  margin-top: 16px; flex-wrap: wrap;
}
.military-info-item {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--glass-input-bg);
  border-radius: var(--radius-sm);
  padding: 12px 18px;
  border: 1px solid var(--glass-input-border);
  min-width: 150px;
}
.military-info-label {
  font-size: 11px; color: var(--text-muted);
  font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px;
}
.military-info-value {
  font-size: 15px; color: var(--text-primary);
  font-weight: 600;
}

/* Military Events Box */
.military-events-box {
  margin-top: 16px;
  background: var(--glass-input-bg);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  border: 1px dashed rgba(180,160,210,0.25);
}
.military-events-title {
  font-size: 12px; color: var(--text-muted);
  font-weight: 600; margin-bottom: 8px;
}
.military-events-content {
  font-size: 13px; color: var(--text-secondary);
  line-height: 1.8;
}

/* ===== Event Timeline ===== */
.member-timeline {
  display: flex; flex-direction: column; gap: 0;
}
.timeline-item {
  display: flex; gap: 14px; align-items: baseline;
  padding: 8px 0; border-bottom: 1px solid rgba(180,160,210,0.1);
  transition: background 0.2s ease;
}
.timeline-item:last-child { border-bottom: none; }
.timeline-item:hover { background: rgba(79,195,247,0.03); border-radius: 6px; padding-left: 6px; padding-right: 6px; }
.timeline-date {
  font-size: 12px; color: var(--accent-dark);
  font-weight: 600; white-space: nowrap; min-width: 90px;
}
.timeline-text {
  font-size: 13px; color: var(--text-secondary);
  line-height: 1.5;
}

/* ===== Variety Participation Chips ===== */
.member-variety-list {
  display: flex; flex-direction: column; gap: 8px;
}
.member-variety-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--glass-input-bg);
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 13px;
}
.member-variety-chip:hover {
  background: var(--glass-card-hover);
  border-color: rgba(79,195,247,0.3);
  transform: translateX(4px);
}
.member-variety-cat {
  font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 10px;
  background: rgba(180,160,210,0.08);
}

/* ===== Custom Content Section ===== */
.member-custom-section {
  border: 1px dashed rgba(236,72,153,0.18);
  background: linear-gradient(135deg, var(--glass-card-bg), rgba(236,72,153,0.02));
}
.member-custom-content {
  font-size: 14px; color: var(--text-primary);
  line-height: 1.8;
  padding: 10px 0;
}

/* ===== SVG in member grid cards (small round icons) ===== */
.member-avatar svg {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
  transition: transform 0.25s ease;
}
.member-card:hover .member-avatar svg {
  transform: scale(1.08);
}

/* Member detail section background */
body[data-section="member-detail"] {
  background: linear-gradient(140deg, #e0d8f8 0%, #d8cef0 20%, #eccee8 45%, #f5d2e2 70%, #fadae2 100%);
  background-attachment: fixed;
}

/* ---- Responsive: Member Detail ---- */
@media (max-width: 768px) {
  .member-detail-hero { padding: 24px 16px 20px; }
  .member-detail-avatar { width: 100px; height: 100px; }
  .member-detail-hero-name { font-size: 22px; }
  .member-detail-grid { grid-template-columns: 1fr; gap: 6px 0; }
  .member-detail-card { padding: 16px 18px; }
  .military-info-grid { flex-direction: column; gap: 8px; }
  .military-info-item { min-width: unset; }
  .timeline-item { flex-direction: column; gap: 2px; }
  .timeline-date { min-width: unset; }
  .member-variety-chip { flex-wrap: wrap; }
}

/* ===== Mobile touch long-press tooltip ===== */
@media (max-width: 768px) {
  .warning-bar { margin: 0 16px 12px; }
  .splash-title { font-size: 36px; letter-spacing: 5px; }
  .lyrics-album-header { flex-direction: column; align-items: center; text-align: center; }
  .lyrics-display { padding: 20px 16px; }
  .lyrics-text { font-size: 13px; line-height: 1.9; }
}

/* ===== Variety Filter Bar ===== */
.variety-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
  padding: 12px 16px;
  background: var(--glass-card-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-sm);
}

.variety-member-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.variety-member-check {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: var(--glass-input-bg);
  border: 2px solid transparent;
  transition: all 0.2s ease;
  font-size: 14px;
  user-select: none;
}
.variety-member-check:hover {
  background: rgba(79, 195, 247, 0.12);
  border-color: rgba(79, 195, 247, 0.3);
  transform: scale(1.1);
}
.variety-member-check.active {
  background: linear-gradient(135deg, rgba(79, 195, 247, 0.2), rgba(236, 72, 153, 0.12));
  border-color: rgba(79, 195, 247, 0.5);
  box-shadow: 0 0 8px rgba(79, 195, 247, 0.2);
}
.variety-member-check.active span {
  transform: scale(1.15);
}

.variety-search-local {
  position: relative;
  flex: 1;
  min-width: 180px;
}
.variety-search-local input {
  width: 100%;
  background: var(--glass-input-bg);
  border: 1px solid var(--glass-input-border);
  border-radius: 20px;
  padding: 8px 14px 8px 34px;
  font-size: 13px;
  color: var(--text-primary);
  transition: all var(--transition);
}
.variety-search-local input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(79, 195, 247, 0.1);
  outline: none;
}
.variety-search-local .search-icon-inline {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 14px;
  pointer-events: none;
}

/* Category tabs (global) */
.variety-cat-tabs { margin-bottom: 12px; }

/* Category badge on variety card */
.variety-cat-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 12px;
  margin-top: 8px;
  border: 1px solid rgba(180, 160, 210, 0.2);
}

/* Member emojis on variety card */
.variety-member-emojis {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(180, 160, 210, 0.12);
}

/* ===== Merchandise Section ===== */
body[data-section="merchandise"] {
  background: linear-gradient(130deg, #d8e4f8 0%, #d4cce8 25%, #e8d0e8 50%, #f2d6de 75%, #fadce2 100%);
  background-attachment: fixed;
}

.merch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}

.merch-card {
  background: var(--glass-card-bg);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
}
.merch-card:hover {
  background: var(--glass-card-hover);
  border-color: rgba(79, 195, 247, 0.3);
  transform: translateY(-3px);
  box-shadow: var(--shadow-raise);
}

.merch-image {
  width: 100%;
  height: 180px;
  background: linear-gradient(135deg, #e8d5f0, #d4e3f8);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.merch-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.merch-image.no-image {
  background: linear-gradient(135deg, rgba(79,195,247,0.1), rgba(236,72,153,0.08));
}

.merch-card-body {
  padding: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.merch-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.4;
}

.merch-status {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 12px;
  border: 1px solid rgba(180, 160, 210, 0.15);
  align-self: flex-start;
}

.merch-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.merch-notes {
  font-size: 12px;
  color: var(--text-muted);
  padding: 8px 12px;
  background: var(--glass-input-bg);
  border-radius: var(--radius-xs);
  border: 1px dashed rgba(180, 160, 210, 0.25);
}

.merch-hint {
  font-size: 12px;
  color: var(--text-muted);
  padding-top: 8px;
  border-top: 1px solid rgba(180, 160, 210, 0.12);
  line-height: 1.5;
}

.merch-admin-actions {
  display: flex;
  gap: 8px;
  padding: 0 16px 14px;
}

@media (max-width: 768px) {
  .variety-filter-bar { flex-direction: column; align-items: stretch; }
  .merch-grid { grid-template-columns: 1fr; }
  .merch-image { height: 160px; }
}

/* ================================================================
   ===== Merchandise Disclaimer Popup — Beach Glass Card =====
   ================================================================ */

/* Overlay */
#merch-disclaimer-popup {
  background: rgba(60, 50, 90, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Outer Modal — frosted glass with glow */
.merch-disclaimer-modal {
  position: relative;
  max-width: 580px; width: 94vw;
  border-radius: 28px;
  background: transparent;
  overflow: hidden;
  box-shadow:
    0 0 60px rgba(79, 195, 247, 0.2),
    0 0 120px rgba(236, 72, 153, 0.12),
    0 16px 56px rgba(80, 60, 140, 0.2);
  border: 1.5px solid rgba(200, 185, 230, 0.35);
  animation: mdPopIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes mdPopIn {
  from { transform: scale(0.9); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* ---- Beach Background Layers ---- */
.md-beach-bg {
  position: absolute; inset: 0;
  border-radius: 26px;
  overflow: hidden;
  z-index: 0;
}

/* Sky gradient — pink to blue sunset */
.md-sky {
  position: absolute; top: 0; left: 0; right: 0;
  height: 55%;
  background: linear-gradient(180deg,
    #fce4ec 0%,      /* soft pink top */
    #f8bbd0 12%,
    #f48fb1 25%,     /* deeper pink */
    #ce93d8 40%,     /* lavender transition */
    #b39ddb 52%,     /* soft purple */
    #90caf9 68%,     /* light blue */
    #64b5f6 82%,     /* deeper blue */
    #42a5f5 100%     /* ocean blue */
  );
}

/* Sunset sun */
.md-sun {
  position: absolute; top: 14%; right: 18%;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,245,220,0.9) 0%, rgba(255,200,150,0.6) 35%, rgba(255,150,120,0.2) 70%, transparent 100%);
  box-shadow: 0 0 40px rgba(255, 200, 150, 0.5), 0 0 80px rgba(255, 160, 130, 0.25);
  animation: mdSunGlow 4s ease-in-out infinite;
}
@keyframes mdSunGlow {
  0%, 100% { box-shadow: 0 0 40px rgba(255,200,150,0.5), 0 0 80px rgba(255,160,130,0.25); }
  50%      { box-shadow: 0 0 55px rgba(255,200,150,0.65), 0 0 100px rgba(255,160,130,0.35); }
}

/* Clouds */
.md-cloud {
  position: absolute;
  background: rgba(255,255,255,0.55);
  border-radius: 50%;
  filter: blur(4px);
}
.md-c1 { top: 10%; left: 8%;  width: 70px; height: 24px; animation: mdCloudDrift 12s linear infinite; }
.md-c2 { top: 16%; left: 30%; width: 50px; height: 18px; animation: mdCloudDrift 16s linear infinite; animation-delay: -5s; }
.md-c3 { top: 8%;  left: 55%; width: 60px; height: 20px; animation: mdCloudDrift 14s linear infinite; animation-delay: -9s; }
@keyframes mdCloudDrift {
  0%   { transform: translateX(0); opacity: 0.55; }
  50%  { transform: translateX(20px); opacity: 0.7; }
  100% { transform: translateX(0); opacity: 0.55; }
}

/* Ocean layer */
.md-ocean {
  position: absolute; top: 50%; left: 0; right: 0;
  height: 20%;
  background: linear-gradient(180deg,
    rgba(66, 165, 245, 0.45) 0%,
    rgba(100, 181, 246, 0.55) 40%,
    rgba(144, 202, 249, 0.5) 100%
  );
}
.md-wave {
  position: absolute; left: 0; right: 0;
  height: 3px;
  background: rgba(255,255,255,0.35);
  border-radius: 2px;
}
.md-w1 { top: 18%; animation: mdWaveDrift 3s ease-in-out infinite; }
.md-w2 { top: 45%; animation: mdWaveDrift 4s ease-in-out infinite; animation-delay: -1.5s; height: 2px; }
.md-w3 { top: 72%; animation: mdWaveDrift 3.5s ease-in-out infinite; animation-delay: -2.5s; height: 2.5px; }
@keyframes mdWaveDrift {
  0%, 100% { transform: translateX(-10px) scaleX(1); }
  50%      { transform: translateX(10px) scaleX(1.08); }
}

/* Sand */
.md-sand {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 18%;
  background: linear-gradient(180deg,
    rgba(255, 224, 178, 0.65) 0%,
    rgba(255, 213, 153, 0.7) 40%,
    rgba(255, 204, 140, 0.75) 100%
  );
}
/* Sand grain texture overlay */
.md-sand::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle, rgba(210,180,140,0.3) 1px, transparent 1px),
    radial-gradient(circle, rgba(200,170,130,0.25) 0.5px, transparent 0.5px);
  background-size: 6px 4px, 8px 6px;
  background-position: 0 0, 3px 2px;
}

/* Beach decorations */
.md-shell {
  position: absolute; font-size: 14px;
  opacity: 0.7;
  animation: mdShellBob 3s ease-in-out infinite;
}
@keyframes mdShellBob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-4px) rotate(5deg); }
}
.md-sh1 { bottom: 8px;  left: 6%;   font-size: 16px; animation-delay: 0s; }
.md-sh2 { bottom: 12px; left: 22%;  font-size: 14px; animation-delay: 0.8s; }
.md-sh3 { bottom: 6px;  left: 38%;  font-size: 13px; animation-delay: 1.5s; }
.md-sh4 { bottom: 10px; left: 55%;  font-size: 15px; animation-delay: 2.1s; }
.md-sh5 { bottom: 8px;  left: 72%;  font-size: 14px; animation-delay: 0.4s; }

.md-seagull {
  position: absolute; font-size: 12px;
  opacity: 0.5;
  animation: mdSeagullFly 8s ease-in-out infinite;
}
@keyframes mdSeagullFly {
  0%   { transform: translate(0, 0) rotate(-2deg); }
  25%  { transform: translate(10px, -6px) rotate(1deg); }
  50%  { transform: translate(20px, -2px) rotate(-1deg); }
  75%  { transform: translate(10px, -8px) rotate(2deg); }
  100% { transform: translate(0, 0) rotate(-2deg); }
}
.md-sg1 { top: 8%;  right: 30%; animation-delay: 0s; }
.md-sg2 { top: 12%; right: 22%; animation-delay: 2s; font-size: 10px; }
.md-sg3 { top: 15%; right: 38%; animation-delay: 4s; font-size: 11px; }

/* ---- Frosted Glass Card Overlay ---- */
.md-glass-card {
  position: relative; z-index: 2;
  margin: 16px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.68);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(200, 185, 225, 0.35);
  box-shadow: 0 4px 30px rgba(100, 80, 160, 0.12);
}

.md-card-inner {
  padding: 28px 26px 22px;
  max-height: 58vh;
  overflow-y: auto;
}

/* Title */
.md-title {
  font-size: 24px; font-weight: 800; letter-spacing: 2px;
  text-align: center;
  background: linear-gradient(135deg, #4fc3f7 0%, #a78bfa 40%, #ec4899 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0 0 6px;
}
.md-title-line {
  width: 50px; height: 3px;
  margin: 0 auto 18px;
  background: linear-gradient(90deg, #4fc3f7, #a78bfa, #ec4899);
  border-radius: 2px;
}

/* Body text */
.md-body {
  font-size: 13px; color: #3a3048;
  line-height: 1.8;
  text-align: left;
}
.md-body p {
  margin: 0 0 12px;
}
.md-highlight {
  color: #ec4899; font-weight: 600;
}

/* Warning box */
.md-warning-box {
  font-size: 12.5px; color: #6b4c3b;
  line-height: 1.85;
  background: rgba(255, 200, 150, 0.18);
  border: 1px dashed rgba(221, 107, 32, 0.25);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 14px 0;
}
.md-warning-box strong {
  color: #d4593a;
}

/* Button */
.md-btn-wrap {
  text-align: center;
  margin-top: 20px;
}
.md-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 180px;
  padding: 12px 30px;
  font-size: 14px; font-weight: 700; letter-spacing: 1px;
  color: #fff;
  background: linear-gradient(135deg, #4fc3f7 0%, #a78bfa 50%, #ec4899 100%);
  border: none; border-radius: 26px;
  box-shadow: 0 4px 20px rgba(79,195,247,0.35), 0 2px 8px rgba(236,72,153,0.2);
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative; z-index: 5;
}
.md-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(79,195,247,0.45), 0 4px 14px rgba(236,72,153,0.28);
}
.md-btn:active { transform: translateY(0); }

/* ---- 13 Member Stickers Row ---- */
.md-sticker-row {
  position: relative; z-index: 3;
  display: flex; justify-content: center; align-items: center;
  gap: 4px;
  padding: 8px 16px 16px;
  flex-wrap: wrap;
}
.md-msticker {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  font-size: 21px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(255,255,255,0.85), rgba(240,235,255,0.55));
  border: 2px solid rgba(180, 165, 215, 0.4);
  box-shadow: 0 3px 12px rgba(79,195,247,0.12), 0 1px 4px rgba(0,0,0,0.06);
  animation: mdStickerFloat var(--mdf-dur, 3.5s) ease-in-out infinite;
  animation-delay: var(--mdf-del, 0s);
  cursor: default;
  transition: transform 0.2s ease;
}
.md-msticker:hover {
  transform: scale(1.2);
  box-shadow: 0 4px 18px rgba(79,195,247,0.25), 0 2px 8px rgba(236,72,153,0.15);
}
.md-msticker::after {
  content: '';
  position: absolute; top: 3px; left: 26%; width: 32%; height: 28%;
  background: radial-gradient(ellipse, rgba(255,255,255,0.65) 0%, transparent 70%);
  border-radius: 50%;
}

/* Float animation */
@keyframes mdStickerFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  30%      { transform: translateY(-6px) rotate(2deg); }
  60%      { transform: translateY(3px) rotate(-1.5deg); }
}

/* Each member sticker — staggered delays */
.md-ms1  { --mdf-del: 0s;     --mdf-dur: 3.6s; }
.md-ms2  { --mdf-del: 0.12s;  --mdf-dur: 3.2s; }
.md-ms3  { --mdf-del: 0.24s;  --mdf-dur: 3.8s; }
.md-ms4  { --mdf-del: 0.36s;  --mdf-dur: 3.1s; }
.md-ms5  { --mdf-del: 0.48s;  --mdf-dur: 3.5s; }
.md-ms6  { --mdf-del: 0.6s;   --mdf-dur: 3.3s; }
.md-ms7  { --mdf-del: 0.72s;  --mdf-dur: 3.9s; }
.md-ms8  { --mdf-del: 0.84s;  --mdf-dur: 3.4s; }
.md-ms9  { --mdf-del: 0.96s;  --mdf-dur: 3.0s; }
.md-ms10 { --mdf-del: 1.08s;  --mdf-dur: 3.7s; }
.md-ms11 { --mdf-del: 1.2s;   --mdf-dur: 3.2s; }
.md-ms12 { --mdf-del: 1.32s;  --mdf-dur: 3.6s; }
.md-ms13 { --mdf-del: 1.44s;  --mdf-dur: 3.3s; }

/* ---- Scrollbar styling for card body ---- */
.md-card-inner::-webkit-scrollbar { width: 5px; }
.md-card-inner::-webkit-scrollbar-track { background: transparent; }
.md-card-inner::-webkit-scrollbar-thumb {
  background: rgba(167,139,250,0.25);
  border-radius: 10px;
}

/* ---- Responsive ---- */
@media (max-width: 600px) {
  .merch-disclaimer-modal { max-width: 94vw; border-radius: 22px; }
  .md-glass-card { margin: 10px; border-radius: 16px; }
  .md-card-inner { padding: 20px 16px 18px; max-height: 50vh; }
  .md-title { font-size: 20px; }
  .md-body { font-size: 12px; }
  .md-msticker { width: 30px; height: 30px; font-size: 16px; }
  .md-sticker-row { gap: 2px; padding: 6px 10px 12px; }
  .md-btn { min-width: 150px; padding: 10px 24px; font-size: 13px; }
  .md-sun { width: 40px; height: 40px; }
  .md-shell { font-size: 11px; }
}

/* ============================================================
 * 克拉小记 크라노트 — Fan Submission Board Styles
 * ============================================================ */

/* ---- Welcome Page ---- */
.kra-welcome {
  text-align: center;
  padding: 60px 20px;
  animation: kraFadeIn 0.6s ease;
}
@keyframes kraFadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.kra-welcome-icon {
  font-size: 56px;
  margin-bottom: 16px;
  animation: kraPulse 2s ease-in-out infinite;
}
@keyframes kraPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: 0.8; }
}
.kra-welcome-title {
  font-size: 28px;
  font-weight: 700;
  background: var(--brand-gradient, linear-gradient(135deg, #a78bfa, #60a5fa));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 12px;
}
.kra-welcome-desc {
  font-size: 15px;
  color: var(--text-secondary);
  max-width: 500px;
  margin: 0 auto 32px;
  line-height: 1.7;
}
.kra-welcome-rules {
  max-width: 520px;
  margin: 0 auto 32px;
  text-align: left;
  background: var(--glass-bg, rgba(255,255,255,0.08));
  border: 1px solid var(--glass-border, rgba(255,255,255,0.1));
  border-radius: 16px;
  padding: 20px 24px;
}
.kra-rule-item {
  font-size: 13px;
  color: var(--text-secondary);
  padding: 6px 0;
  line-height: 1.6;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.kra-rule-num {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand-gradient, linear-gradient(135deg, #a78bfa, #60a5fa));
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kra-welcome-btns {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---- Kra Buttons ---- */
.kra-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 24px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
  font-family: inherit;
}
.kra-btn-primary {
  background: var(--brand-gradient, linear-gradient(135deg, #a78bfa, #60a5fa));
  color: #fff;
  box-shadow: 0 2px 12px rgba(167,139,250,0.3);
}
.kra-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(167,139,250,0.45);
}
.kra-btn-secondary {
  background: var(--glass-bg, rgba(255,255,255,0.1));
  color: var(--text-primary);
  border: 1px solid var(--glass-border, rgba(255,255,255,0.15));
}
.kra-btn-secondary:hover {
  background: var(--glass-bg-hover, rgba(255,255,255,0.18));
}
.kra-btn-back {
  background: transparent;
  color: var(--text-secondary);
  padding: 8px 16px;
  font-size: 13px;
  border: 1px solid rgba(255,255,255,0.1);
}
.kra-btn-back:hover {
  color: var(--text-primary);
  background: rgba(255,255,255,0.06);
}
.kra-btn-sm {
  padding: 6px 16px;
  font-size: 13px;
  border-radius: 8px;
}
.kra-btn-approve {
  background: rgba(56,161,105,0.15);
  color: var(--success, #48bb78);
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 6px;
  border: 1px solid rgba(56,161,105,0.3);
  cursor: pointer;
}
.kra-btn-approve:hover {
  background: rgba(56,161,105,0.25);
}
.kra-btn-delete-sm {
  background: rgba(245,101,101,0.12);
  color: var(--danger, #f56565);
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 6px;
  border: 1px solid rgba(245,101,101,0.3);
  cursor: pointer;
}
.kra-btn-delete-sm:hover {
  background: rgba(245,101,101,0.22);
}

/* ---- Guidelines Modal ---- */
.kra-guidelines-modal .modal {
  max-width: 520px;
}
.kra-guidelines-box {
  animation: kraSlideUp 0.3s ease;
}
@keyframes kraSlideUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
.kra-guidelines-list {
  padding-left: 20px;
  margin: 0;
}
.kra-guidelines-list li {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 2;
  padding: 2px 0;
}

/* ---- Submit Form Modal ---- */
.kra-submit-modal .modal {
  max-width: 600px;
}
.kra-submit-box {
  animation: kraSlideUp 0.3s ease;
  max-height: 85vh;
  overflow-y: auto;
}

/* ---- Image Upload ---- */
.kra-image-upload-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.kra-image-input {
  display: none;
}
.kra-image-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  background: var(--glass-bg, rgba(255,255,255,0.08));
  border: 1px dashed var(--glass-border, rgba(255,255,255,0.2));
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.kra-image-upload-btn:hover {
  border-color: var(--accent, #a78bfa);
  color: var(--accent, #a78bfa);
}
.kra-image-hint {
  font-size: 11px;
  color: var(--text-muted);
}
.kra-image-preview-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.kra-preview-item {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--glass-border, rgba(255,255,255,0.1));
}
.kra-preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kra-preview-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border: none;
  font-size: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.kra-preview-remove:hover {
  background: rgba(245,101,101,0.85);
}

/* ---- List Page ---- */
.kra-list-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.kra-list-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  flex: 1;
}
.kra-search-bar {
  margin-bottom: 20px;
}
.kra-search-input {
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 14px;
}
.kra-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

/* ---- Kra Card ---- */
.kra-card {
  background: var(--glass-bg, rgba(255,255,255,0.06));
  border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
  border-radius: 16px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.25s ease;
}
.kra-card:hover {
  transform: translateY(-2px);
  border-color: rgba(167,139,250,0.3);
  box-shadow: 0 8px 30px rgba(167,139,250,0.12);
}
.kra-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.kra-card-nickname {
  font-size: 12px;
  color: var(--accent, #a78bfa);
  font-weight: 600;
}
.kra-card-date {
  font-size: 11px;
  color: var(--text-muted);
}
.kra-card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kra-card-preview {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 12px;
}
.kra-card-thumb-row {
  display: flex;
  gap: 4px;
}
.kra-card-thumb {
  width: 56px;
  height: 56px;
  border-radius: 6px;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255,255,255,0.1);
}
.kra-card-thumb-more {
  width: 56px;
  height: 56px;
  border-radius: 6px;
  background: rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--text-muted);
  border: 1px solid rgba(255,255,255,0.08);
}

/* ---- Post Detail ---- */
.kra-post-detail {
  animation: kraFadeIn 0.4s ease;
}
.kra-post-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.kra-post-nickname {
  font-size: 14px;
  color: var(--accent, #a78bfa);
  font-weight: 600;
}
.kra-post-date {
  font-size: 12px;
  color: var(--text-muted);
}
.kra-post-actions {
  margin-left: auto;
  display: flex;
  gap: 4px;
}
.kra-post-title {
  font-size: 24px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 16px;
  line-height: 1.4;
}
.kra-post-content {
  font-size: 15px;
  color: var(--text-primary);
  line-height: 1.9;
  margin-bottom: 24px;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ---- Post Video ---- */
.kra-post-video {
  margin-bottom: 20px;
}
.kra-video-container {
  border-radius: 12px;
  overflow: hidden;
  background: #000;
}
.kra-video-placeholder {
  padding: 40px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}

/* ---- External Link ---- */
.kra-post-extlink {
  margin-bottom: 20px;
}
.kra-link-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--glass-bg, rgba(255,255,255,0.06));
  border: 1px solid var(--glass-border, rgba(255,255,255,0.1));
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  word-break: break-all;
}
.kra-link-copy:hover {
  background: rgba(167,139,250,0.1);
  border-color: rgba(167,139,250,0.3);
  color: var(--accent, #a78bfa);
}

/* ---- Image Carousel ---- */
.kra-carousel-wrapper {
  position: relative;
  margin-bottom: 24px;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(0,0,0,0.2);
}
.kra-carousel {
  display: flex;
  overflow: hidden;
  height: 400px;
}
.kra-carousel-slide {
  min-width: 100%;
  transition: transform 0.4s ease;
  cursor: pointer;
}
.kra-carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: rgba(0,0,0,0.3);
}
.kra-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  color: #fff;
  border: none;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  z-index: 2;
}
.kra-carousel-arrow:hover {
  background: rgba(0,0,0,0.75);
}
.kra-carousel-prev { left: 12px; }
.kra-carousel-next { right: 12px; }
.kra-carousel-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 2;
}
.kra-carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  cursor: pointer;
  transition: all 0.2s;
}
.kra-carousel-dot.active {
  background: #fff;
  width: 20px;
  border-radius: 4px;
}

/* ---- Lightbox ---- */
.kra-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  cursor: zoom-out;
  animation: kraFadeIn 0.2s ease;
}
.kra-lightbox img {
  max-width: 92vw;
  max-height: 92vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.kra-lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  color: #fff;
  border: none;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.kra-lightbox-close:hover {
  background: rgba(255,255,255,0.3);
}

/* ---- Comments Section ---- */
.kra-comments-section {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--glass-border, rgba(255,255,255,0.08));
}
.kra-comments-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 16px;
}
.kra-comments-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}
.kra-comment-item {
  background: var(--glass-bg, rgba(255,255,255,0.04));
  border: 1px solid var(--glass-border, rgba(255,255,255,0.06));
  border-radius: 12px;
  padding: 14px 16px;
  position: relative;
}
.kra-comment-nickname {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent, #a78bfa);
  margin-right: 10px;
}
.kra-comment-date {
  font-size: 11px;
  color: var(--text-muted);
}
.kra-comment-del {
  position: absolute;
  top: 8px;
  right: 8px;
}
.kra-comment-text {
  margin-top: 8px;
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.6;
  word-break: break-word;
}
.kra-no-comments {
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  padding: 20px;
}

/* ---- Comment Form ---- */
.kra-comment-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kra-comment-nickname {
  width: 200px;
  border-radius: 8px;
}
.kra-comment-textarea {
  min-height: 70px;
  border-radius: 8px;
}

/* ---- Admin Review Tables ---- */
.kra-admin-table {
  border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
  border-radius: 12px;
  overflow: hidden;
  font-size: 13px;
}
.kra-admin-table-header {
  display: flex;
  background: var(--glass-bg, rgba(255,255,255,0.06));
  padding: 10px 16px;
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--glass-border, rgba(255,255,255,0.08));
}
.kra-admin-row {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  color: var(--text-primary);
}
.kra-admin-row:last-child { border-bottom: none; }
.kra-admin-actions {
  display: flex;
  gap: 6px;
}

/* ---- Mobile Responsive for KraNote ---- */
@media (max-width: 600px) {
  .kra-welcome { padding: 40px 16px; }
  .kra-welcome-title { font-size: 22px; }
  .kra-welcome-rules { padding: 16px; }
  .kra-list-grid { grid-template-columns: 1fr; }
  .kra-carousel { height: 250px; }
  .kra-carousel-arrow { width: 32px; height: 32px; font-size: 14px; }
  .kra-post-title { font-size: 20px; }
  .kra-post-content { font-size: 14px; }
  .kra-comment-nickname { width: 100%; }
  .kra-guidelines-modal .modal { max-width: 94vw; border-radius: 14px; }
  .kra-submit-modal .modal { max-width: 94vw; border-radius: 14px; }
  .kra-preview-item { width: 60px; height: 60px; }
  .kra-card { padding: 14px; }
  .kra-card-title { font-size: 14px; }
  .kra-admin-table-header, .kra-admin-row { font-size: 11px; padding: 8px 10px; }
}

/* ============================================================
 * Member Media Zone — 成员档案多媒体区域
 * ============================================================ */

/* ---- Photo Grid ---- */
.member-media-section {
  margin-top: 0;
}
.member-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.member-media-thumb {
  width: 100%;
  padding-bottom: 100%;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  transition: all 0.25s ease;
  border: 1px solid rgba(255,255,255,0.08);
}
.member-media-thumb:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 20px rgba(167,139,250,0.25);
  border-color: rgba(167,139,250,0.4);
}

/* ---- Video List ---- */
.member-video-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  margin-top: 12px;
}
.member-video-item {
  border-radius: 12px;
  overflow: hidden;
}
.member-video-frame {
  border-radius: 10px;
  overflow: hidden;
  background: #000;
}

/* ---- Events Timeline ---- */
.member-events-section {}
.member-events-timeline {
  position: relative;
  padding-left: 20px;
  border-left: 2px solid rgba(167,139,250,0.2);
  margin-top: 12px;
}
.member-event-item {
  position: relative;
  padding: 0 0 16px 16px;
}
.member-event-item::before {
  content: "";
  position: absolute;
  left: -26px;
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent, #a78bfa);
  border: 2px solid rgba(167,139,250,0.2);
}
.member-event-date {
  font-size: 12px;
  color: var(--accent, #a78bfa);
  font-weight: 600;
  margin-bottom: 4px;
}
.member-event-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.member-event-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ---- Related KraNotes Section ---- */
.member-kra-section {}

@media (max-width: 600px) {
  .member-media-grid { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }
  .member-video-list { grid-template-columns: 1fr; }
  .member-video-frame iframe { height: 180px; }
}

/* ================================================================
 * Video Thumbnail Cards — small square preview, click to open popup
 * ================================================================ */
.vid-thumb {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: all 0.25s ease;
  position: relative;
  width: 160px;
  flex-shrink: 0;
  background: rgba(0,0,0,0.1);
  border: 1px solid rgba(255,255,255,0.12);
}
.vid-thumb:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(251,114,153,0.25);
  border-color: rgba(251,114,153,0.5);
}
.vid-thumb:active { transform: scale(0.97); }

.vid-thumb-cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  background-color: #1a1a2e;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* B站风格渐变占位 */
.vid-thumb-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(251,114,153,0.6), rgba(79,195,247,0.5));
  opacity: 0;
  transition: opacity 0.35s ease;
}
.vid-thumb:hover .vid-thumb-cover::before { opacity: 1; }

/* Play icon overlay */
.vid-thumb-play {
  position: relative;
  z-index: 1;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(251,114,153,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #fff;
  transition: all 0.25s ease;
  box-shadow: 0 4px 16px rgba(251,114,153,0.4);
  /* triangle play icon via CSS */
  line-height: 1;
}
.vid-thumb-play::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 14px;
  border-color: transparent transparent transparent #fff;
  margin-left: 3px;
}
.vid-thumb:hover .vid-thumb-play {
  background: rgba(251,114,153,1);
  transform: scale(1.1);
  box-shadow: 0 6px 24px rgba(251,114,153,0.55);
}

/* Thumb label */
.vid-thumb-label {
  padding: 6px 10px;
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  background: rgba(255,255,255,0.04);
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vid-thumb:hover .vid-thumb-label { color: var(--text-secondary); }

/* Thumb loading shimmer */
.vid-thumb-loading .vid-thumb-cover {
  animation: vidShimmer 1.2s ease-in-out infinite;
}
@keyframes vidShimmer {
  0%, 100% { background-color: #1a1a2e; }
  50% { background-color: #252540; }
}

/* Thumbnail row wrapper — used inside cards and lists */
.vid-thumb-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 16px 12px;
}

/* ---- Compact thumb variant for kraNote / member areas ---- */
.vid-thumb-compact {
  width: 140px;
}
.vid-thumb-compact .vid-thumb-play {
  width: 36px;
  height: 36px;
  font-size: 15px;
}
.vid-thumb-compact .vid-thumb-play::after {
  border-width: 6px 0 6px 11px;
  margin-left: 2px;
}

/* ---- Multiple thumbs in a row ---- */
.vid-thumbs-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

/* ================================================================
 * Video Popup Modal — click thumbnail to open
 * ================================================================ */
.vid-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: vidPopupFadeIn 0.3s ease;
}
@keyframes vidPopupFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.vid-popup-overlay.closing {
  animation: vidPopupFadeOut 0.25s ease forwards;
}
@keyframes vidPopupFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

.vid-popup {
  position: relative;
  width: 90vw;
  max-width: 1100px;
  max-height: 92vh;
  background: #0d0d1a;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 16px 64px rgba(0,0,0,0.6), 0 0 40px rgba(251,114,153,0.12);
  animation: vidPopupScaleIn 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
  display: flex;
  flex-direction: column;
}
@keyframes vidPopupScaleIn {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* Close button */
.vid-popup-close {
  position: absolute;
  top: 12px;
  right: 16px;
  z-index: 10;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.vid-popup-close:hover {
  background: rgba(229,62,62,0.7);
  transform: scale(1.1);
}

/* Player container */
.vid-popup-player-wrap {
  position: relative;
  width: 100%;
  flex-shrink: 0;
  background: #000;
}
.vid-popup-player-wrap[data-orientation="horizontal"] {
  aspect-ratio: 16 / 9;
}
.vid-popup-player-wrap[data-orientation="vertical"] {
  aspect-ratio: 9 / 16;
  max-width: 500px;
  margin: 0 auto;
}
.vid-popup-player-wrap iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* Loading overlay inside popup */
.vid-popup-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #111;
  color: #888;
  gap: 10px;
  z-index: 2;
  font-size: 14px;
  transition: opacity 0.4s ease;
}
.vid-popup-loading.hidden { opacity: 0; pointer-events: none; }
.vid-popup-loading .spinner {
  width: 28px;
  height: 28px;
  border: 2.5px solid rgba(255,255,255,0.12);
  border-top-color: var(--bili);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Error fallback inside popup */
.vid-popup-error {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #1a1a2e;
  color: #999;
  gap: 10px;
  z-index: 3;
  font-size: 14px;
  text-align: center;
}
.vid-popup-error.show { display: flex; }

/* Control bar */
.vid-popup-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 16px;
  background: rgba(15, 15, 30, 0.95);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
.vid-popup-ctrl-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
  color: #ccc;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  user-select: none;
}
.vid-popup-ctrl-btn:hover {
  background: rgba(255,255,255,0.14);
  color: #fff;
  border-color: rgba(255,255,255,0.25);
}
.vid-popup-ctrl-btn.active {
  background: var(--bili);
  border-color: var(--bili);
  color: #fff;
}
.vid-popup-ctrl-btn:active { transform: scale(0.95); }
.vid-popup-ctrl-icon {
  font-size: 16px;
  line-height: 1;
}

/* Responsive */
@media (max-width: 768px) {
  .vid-thumb { width: 130px; }
  .vid-thumb-play { width: 36px; height: 36px; }
  .vid-thumb-play::after { border-width: 6px 0 6px 11px; margin-left: 2px; }
  .vid-popup { width: 96vw; border-radius: 12px; }
  .vid-popup-player-wrap[data-orientation="vertical"] { max-width: 85vw; }
  .vid-popup-ctrl-btn { padding: 6px 10px; font-size: 12px; }
}
@media (max-width: 480px) {
  .vid-thumb { width: 110px; }
  .vid-thumb-label { font-size: 10px; padding: 4px 6px; }
  .vid-popup-close { top: 8px; right: 10px; width: 30px; height: 30px; font-size: 16px; }
  .vid-popup-controls { gap: 6px; padding: 8px 10px; }
}