/* ============================================================
   丽人梦想秀® · Premium Feminine Design System v4.0
   顶级女性审美 · 细腻精美 · 视觉冲击
   ============================================================ */

/* ── Global Accessible Typography Scale ── */
:root {
  --font-xs: 14px;
  --font-sm: 16px;
  --font-md: 18px;
  --font-lg: 20px;
  --font-xl: 28px;
  --font-2xl: 36px;
  --font-3xl: 48px;
  --font-display: 60px;
}

/* Base - large & readable for all ages */
body { font-size: var(--font-md) !important; line-height: 1.75 !important; color: #2D2D44 !important; }
h1 { font-size: 28px !important; font-weight: 700 !important; letter-spacing: -0.5px !important; line-height: 1.2 !important; }
h2 { font-size: 26px !important; font-weight: 700 !important; line-height: 1.3 !important; }
h3 { font-size: 22px !important; font-weight: 600 !important; line-height: 1.3 !important; }
h4 { font-size: var(--font-lg) !important; font-weight: 600 !important; }
h5 { font-size: var(--font-md) !important; font-weight: 600 !important; }
h6 { font-size: var(--font-sm) !important; font-weight: 600 !important; }
p, li, td, th, label { font-size: var(--font-sm) !important; line-height: 1.8 !important; }
small, .text-muted { font-size: var(--font-xs) !important; }
.btn, button { font-size: var(--font-sm) !important; padding: 14px 28px !important; font-weight: 600 !important; letter-spacing: 0.3px !important; }
.form-control, input, select, textarea { font-size: var(--font-sm) !important; padding: 16px 20px !important; }
.sidebar .nav-link { font-size: 15px !important; padding: 12px 22px !important; }
.nav-section { font-size: 11px !important; letter-spacing: 3px !important; }
.badge, .badge-role { font-size: 13px !important; padding: 7px 18px !important; }
table td, table th { font-size: var(--font-sm) !important; padding: 16px 20px !important; }
.card-stat .value, .stat-num { font-size: var(--font-2xl) !important; }

/* Accessibility: ensure minimum contrast */
.hero-gradient h1, .hero-gradient p { color: #fff !important; }
.card-stat strong, .card-glass strong { color: #3D0F3E !important; }

/* Responsive: even larger on big screens */
@media (min-width: 1600px) {
  body { font-size: 20px !important; }
  h1 { font-size: 56px !important; }
  h2 { font-size: 40px !important; }
  .sidebar .nav-link { font-size: 16px !important; }
}

/* Comfortable reading width */
.main-content p, .main-content li { max-width: 75ch; }

/* ── Premium Color Palette (Feminine) ── */
:root {
  --rose: #E8A0BF;
  --blush: #F2D7D9;
  --mauve: #BA94B6;
  --orchid: #C084D9;
  --peach: #F0C8B0;
  --champagne: #F7E8D0;
  --lavender: #D4C5E2;
  --berry: #9B4D8A;
}

/* ── Enhanced Cards ── */
.card-stat, .card-glass {
  background: rgba(255,255,255,0.78) !important;
  backdrop-filter: saturate(200%) blur(24px) !important;
  -webkit-backdrop-filter: saturate(200%) blur(24px) !important;
  border: 1px solid rgba(201,162,91,0.1) !important;
  border-radius: 20px !important;
  box-shadow: 0 2px 12px rgba(61,15,62,0.04), 0 8px 32px rgba(61,15,62,0.06) !important;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  padding: 24px !important;
}
.card-stat:hover, .card-glass:hover {
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow: 0 4px 20px rgba(123,45,142,0.08), 0 16px 48px rgba(61,15,62,0.12) !important;
  border-color: rgba(201,162,91,0.25) !important;
}
.card-stat::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #C9A25B, #E8A0BF, transparent);
  opacity: 0; transition: opacity 0.4s;
}
.card-stat:hover::before { opacity: 0.6; }

/* ── Gradient Accents ── */
.hero-gradient {
  background: linear-gradient(160deg, #0A0018 0%, #1A0A2E 25%, #2D1B4E 55%, #5C2D6E 80%, #C9A25B 120%) !important;
  border-radius: 28px !important;
  padding: 48px 40px !important;
  position: relative; overflow: hidden;
  box-shadow: 0 20px 80px rgba(74,21,75,0.25), inset 0 1px 0 rgba(255,255,255,0.05) !important;
}
.hero-gradient::before {
  content: ''; position: absolute; inset: 0;
  background: 
    radial-gradient(ellipse at 20% 30%, rgba(255,215,0,0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 75% 50%, rgba(232,160,191,0.04) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 80%, rgba(186,148,182,0.03) 0%, transparent 40%);
}

/* ── Premium Buttons ── */
.btn-primary {
  background: linear-gradient(135deg, #6B1D6E 0%, #9B4D8A 40%, #C9A25B 100%) !important;
  border: none !important; color: #fff !important;
  box-shadow: 0 4px 16px rgba(107,29,110,0.3) !important;
  border-radius: 14px !important;
  position: relative; overflow: hidden;
}
.btn-primary:hover {
  box-shadow: 0 6px 28px rgba(155,77,138,0.45) !important;
  transform: translateY(-2px);
}
.btn-primary::after {
  content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.25) 0%, transparent 60%);
  opacity: 0; transition: opacity 0.3s;
}
.btn-primary:hover::after { opacity: 1; }

.btn-outline-action {
  border: 1.5px solid rgba(123,45,142,0.2) !important;
  color: #7B2D8E !important; background: transparent !important;
  border-radius: 14px !important;
}
.btn-outline-action:hover {
  background: rgba(123,45,142,0.04) !important;
  border-color: #C9A25B !important; color: #C9A25B !important;
}

/* ── Input Fields ── */
.form-control, input[type="text"], input[type="email"], input[type="password"], textarea, select {
  background: rgba(255,255,255,0.65) !important;
  backdrop-filter: blur(12px) !important;
  border: 1.5px solid rgba(123,45,142,0.1) !important;
  border-radius: 14px !important;
  font-size: var(--font-sm) !important;
  transition: all 0.3s ease !important;
}
.form-control:focus, input:focus, textarea:focus, select:focus {
  background: rgba(255,255,255,0.9) !important;
  border-color: #C9A25B !important;
  box-shadow: 0 0 0 4px rgba(201,162,91,0.08), 0 4px 20px rgba(0,0,0,0.04) !important;
  outline: none !important;
}

/* ── Tables ── */
table { border-collapse: separate !important; border-spacing: 0 !important; }
table th {
  background: rgba(123,45,142,0.03) !important;
  font-weight: 600 !important; font-size: 12px !important;
  text-transform: uppercase !important; letter-spacing: 0.08em !important;
  color: #6B1D6E !important; padding: 16px 20px !important;
  border-bottom: 2px solid rgba(123,45,142,0.08) !important;
}
table td {
  padding: 16px 20px !important;
  border-bottom: 1px solid rgba(0,0,0,0.03) !important;
}
table tr:hover td { background: rgba(201,162,91,0.03) !important; }

/* ── Status Badges ── */
.badge-role, .badge-gold, .badge-status {
  border-radius: 20px !important; padding: 6px 16px !important;
  font-weight: 500 !important; font-size: 11px !important;
  letter-spacing: 0.03em !important;
  backdrop-filter: blur(8px) !important;
}

/* ── Empty States ── */
.empty-state { padding: 80px 20px !important; text-align: center; }
.empty-state-icon { font-size: 72px !important; margin-bottom: 16px; opacity: 0.35; }
.empty-state p { font-size: var(--font-sm) !important; color: var(--ink-light) !important; }

/* ── Section Headers ── */
.section-title {
  font-family: 'Noto Serif SC', serif !important;
  font-size: var(--font-lg) !important; font-weight: 700 !important;
  color: #3D0F3E !important;
  margin: 32px 0 16px !important; padding-bottom: 12px !important;
  border-bottom: 2px solid rgba(201,162,91,0.12) !important;
  display: flex; align-items: center; gap: 12px;
}
.section-title::before {
  content: ''; display: inline-block; width: 5px; height: 24px;
  background: linear-gradient(180deg, #7B2D8E, #C9A25B); border-radius: 3px;
}

/* ── Sidebar Enhancement ── */
.sidebar {
  background: linear-gradient(175deg, #0A0018 0%, #1A0A2E 40%, #2D1B4E 75%, #3D1B5E 100%) !important;
  box-shadow: 8px 0 48px rgba(10,0,24,0.3) !important;
}
.sidebar .nav-link:hover {
  background: rgba(255,255,255,0.06) !important;
  transform: translateX(3px);
  border-left: 3px solid rgba(201,162,91,0.4) !important;
}
.sidebar .nav-link.active {
  background: linear-gradient(90deg, rgba(107,29,110,0.4), rgba(107,29,110,0.1)) !important;
  border-left: 3px solid #C9A25B !important;
  font-weight: 600 !important;
  box-shadow: inset 0 0 30px rgba(201,162,91,0.04);
}

/* ── Smooth Scroll ── */
html { scroll-behavior: smooth; }

/* ── Subtle Animations ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.card-stat { animation: fadeUp 0.5s ease both; }
.card-stat:nth-child(2) { animation-delay: 0.08s; }
.card-stat:nth-child(3) { animation-delay: 0.16s; }
.card-stat:nth-child(4) { animation-delay: 0.24s; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(123,45,142,0.12); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(123,45,142,0.2); }

/* ── Dark Mode ── */
body.dark-mode {
  background: linear-gradient(150deg, #0A0A0F, #0D0018 30%, #1A0A2E 60%, #0A0A0F) !important;
  color: #E5E5E5 !important;
}
body.dark-mode .card-stat,
body.dark-mode .card-glass {
  background: rgba(20,20,30,0.65) !important;
  border-color: rgba(255,255,255,0.06) !important;
}
body.dark-mode .form-control,
body.dark-mode input,
body.dark-mode textarea {
  background: rgba(15,15,25,0.65) !important;
  border-color: rgba(255,255,255,0.08) !important;
  color: #E5E5E5 !important;
}

/* ── Center Alignment & Layout ── */
.main-content {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 32px 40px 80px !important;
}

.hero-gradient h1 { margin: 0 auto !important; }
.card-stat, .card-glass { text-align: center !important; }
.row { justify-content: center !important; }
.text-center { text-align: center !important; }
.empty-state { text-align: center !important; }
.btn, button { margin: 0 auto; }
table { margin: 0 auto; width: 100% !important; }
table th { text-align: left !important; }
table td { text-align: left !important; }
.form-group, .mb-3, .mb-2 { text-align: left; }
.stat-row, .row.g-3, .row.g-2 { justify-content: center !important; }
@media (max-width: 768px) {
  .main-content { padding: 16px 12px 100px !important; }
}

/* ── Help Page Font Fix ── */
#page-content h6 { font-size: 17px !important; line-height: 1.6 !important; }
#page-content strong { font-size: 16px !important; }
#page-content p { font-size: 15px !important; line-height: 1.8 !important; }
#page-content small { font-size: 13px !important; }

/* ── Override ALL inline font sizes for readability ── */
#page-content * { font-size: inherit !important; }
#page-content { font-size: 17px !important; line-height: 1.8 !important; }
#page-content h1 { font-size: 28px !important; }
#page-content h2 { font-size: 24px !important; }
#page-content h3 { font-size: 22px !important; }
#page-content h4 { font-size: 20px !important; }
#page-content h5 { font-size: 18px !important; }
#page-content h6 { font-size: 18px !important; font-weight: 700 !important; }
#page-content strong, #page-content b { font-size: 17px !important; font-weight: 700 !important; }
#page-content p, #page-content li, #page-content td, #page-content th { font-size: 16px !important; line-height: 2 !important; }
#page-content small, #page-content span { font-size: 15px !important; }
#page-content [style*="font-size:9px"], 
#page-content [style*="font-size:10px"], 
#page-content [style*="font-size:11px"], 
#page-content [style*="font-size:12px"],
#page-content [style*="font-size:13px"] { font-size: 15px !important; }
#page-content [style*="font-size:14px"] { font-size: 16px !important; }