/* ============================================================
   小灵唠微信AI - 粉白极简主题样式
   包含：樱花场景背景、导航栏、卡片、按钮、表单、Toast、
   模态框、加载旋转、聊天气泡、表格、徽章、响应式布局
   ============================================================ */

:root {
  --pink-light: #FFF0F5;
  --pink: #F8B4C8;
  --pink-dark: #E892A8;
  --white: #FFFFFF;
  --bg: #FEF7F9;
  --text: #5C4A52;
  --text-light: #9B8E93;
  --shadow: 0 4px 20px rgba(200,160,175,0.15);
  --radius: 12px;
  --transition: 0.25s ease;
  --font: -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font);
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

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

img { max-width: 100%; height: auto; }

/* ==================== 樱花场景背景 ==================== */
#sakura-scene {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
}

/* 天空渐变 - 淡蓝到粉 */
#sakura-scene .sakura-sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    #C9E4F2 0%,
    #D9E8F3 15%,
    #E8D8E8 35%,
    #F5D8E0 55%,
    #FBE8EE 75%,
    #FFF0F5 100%
  );
}

/* 远山/森林轮廓 */
#sakura-scene .sakura-far-forest {
  position: absolute;
  bottom: 0;
  left: -5%;
  width: 110%;
  height: 42%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300' preserveAspectRatio='none'%3E%3Cpath d='M0 300 L0 200 Q60 120 120 170 Q150 140 180 160 Q220 90 270 140 Q300 100 340 130 Q380 70 420 120 Q460 80 500 110 Q540 50 580 100 Q620 60 650 95 Q690 40 730 90 Q770 55 800 85 Q840 30 880 80 Q920 45 950 75 Q990 25 1030 70 Q1060 40 1100 80 Q1140 50 1170 85 Q1190 60 1200 70 L1200 300 Z' fill='%23C5B3B8' opacity='0.45'/%3E%3C/svg%3E")
    repeat-x bottom;
  background-size: 1200px 300px;
  transform: scaleY(1.15);
}

/* 近处森林轮廓 */
#sakura-scene .sakura-near-forest {
  position: absolute;
  bottom: 0;
  left: -3%;
  width: 106%;
  height: 28%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='none'%3E%3Cpath d='M0 200 L0 130 Q40 70 80 120 Q110 85 140 115 Q170 55 200 100 Q230 65 260 95 Q290 40 320 85 Q350 50 380 78 Q410 30 440 72 Q470 45 500 68 Q530 20 560 62 Q590 38 620 55 Q650 15 680 50 Q710 30 740 45 Q770 10 800 42 Q830 25 860 38 Q890 8 920 35 Q950 22 980 30 Q1010 5 1040 28 Q1070 18 1100 22 Q1130 8 1160 18 Q1180 10 1200 15 L1200 200 Z' fill='%239B8E93' opacity='0.55'/%3E%3C/svg%3E")
    repeat-x bottom;
  background-size: 1200px 200px;
  transform: scaleY(1.1);
}

/* 林间小径 */
#sakura-scene .sakura-path {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 18%;
  max-width: 200px;
  height: 55%;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(210,180,170,0.12) 15%,
    rgba(200,170,160,0.25) 30%,
    rgba(195,165,155,0.35) 50%,
    rgba(185,155,145,0.45) 70%,
    rgba(175,145,135,0.50) 100%
  );
  clip-path: polygon(30% 0%, 70% 0%, 85% 100%, 15% 100%);
}

/* 地面花瓣 */
#sakura-scene .sakura-ground-petals {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 18%;
  background:
    radial-gradient(circle 3px at 15% 65%, rgba(245,180,195,0.6) 0%, transparent 50%),
    radial-gradient(circle 4px at 23% 78%, rgba(240,175,190,0.5) 0%, transparent 50%),
    radial-gradient(circle 2px at 32% 55%, rgba(248,185,200,0.55) 0%, transparent 50%),
    radial-gradient(circle 3px at 41% 82%, rgba(242,178,193,0.5) 0%, transparent 50%),
    radial-gradient(circle 4px at 48% 60%, rgba(238,172,188,0.6) 0%, transparent 50%),
    radial-gradient(circle 2px at 55% 72%, rgba(245,180,195,0.55) 0%, transparent 50%),
    radial-gradient(circle 3px at 62% 85%, rgba(240,175,190,0.5) 0%, transparent 50%),
    radial-gradient(circle 4px at 68% 58%, rgba(248,185,200,0.55) 0%, transparent 50%),
    radial-gradient(circle 2px at 75% 68%, rgba(242,178,193,0.6) 0%, transparent 50%),
    radial-gradient(circle 3px at 82% 80%, rgba(238,172,188,0.5) 0%, transparent 50%),
    radial-gradient(circle 4px at 88% 62%, rgba(245,180,195,0.55) 0%, transparent 50%),
    radial-gradient(circle 2px at 92% 75%, rgba(240,175,190,0.5) 0%, transparent 50%),
    radial-gradient(circle 3px at 10% 90%, rgba(248,185,200,0.45) 0%, transparent 50%),
    radial-gradient(circle 2px at 27% 92%, rgba(242,178,193,0.4) 0%, transparent 50%),
    radial-gradient(circle 4px at 53% 88%, rgba(238,172,188,0.45) 0%, transparent 50%),
    radial-gradient(circle 3px at 72% 93%, rgba(245,180,195,0.4) 0%, transparent 50%),
    radial-gradient(circle 2px at 85% 87%, rgba(240,175,190,0.45) 0%, transparent 50%);
  pointer-events: none;
}

/* 薄雾层 */
#sakura-scene .sakura-mist {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg,
      rgba(255,245,248,0.35) 0%,
      rgba(255,245,248,0.15) 30%,
      transparent 60%
    ),
    linear-gradient(90deg,
      transparent 0%,
      rgba(255,250,252,0.1) 30%,
      rgba(255,250,252,0.15) 50%,
      rgba(255,250,252,0.1) 70%,
      transparent 100%
    );
  pointer-events: none;
  animation: mistDrift 20s ease-in-out infinite alternate;
}

@keyframes mistDrift {
  0% { opacity: 0.7; transform: translateX(-5px); }
  100% { opacity: 1; transform: translateX(5px); }
}

/* 丁达尔光效 */
#sakura-scene .sakura-rays {
  position: absolute;
  top: -10%;
  left: 0;
  width: 100%;
  height: 130%;
  background:
    linear-gradient(15deg, transparent 38%, rgba(255,255,255,0.06) 40%, transparent 42%),
    linear-gradient(12deg, transparent 48%, rgba(255,255,255,0.07) 50%, transparent 52%),
    linear-gradient(10deg, transparent 55%, rgba(255,255,255,0.05) 57%, transparent 59%),
    linear-gradient(18deg, transparent 32%, rgba(255,255,255,0.04) 34%, transparent 36%),
    linear-gradient(8deg, transparent 68%, rgba(255,255,255,0.06) 70%, transparent 72%);
  pointer-events: none;
}

/* 柔光 */
#sakura-scene .sakura-glow {
  position: absolute;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 80%;
  background: radial-gradient(
    ellipse at 50% 40%,
    rgba(255,240,245,0.25) 0%,
    rgba(255,235,240,0.1) 30%,
    transparent 60%
  );
  pointer-events: none;
}

/* 暗角 */
#sakura-scene .sakura-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 55%,
    rgba(180,150,155,0.12) 70%,
    rgba(160,130,135,0.2) 85%,
    rgba(140,110,115,0.3) 100%
  );
  pointer-events: none;
}

/* 樱花花瓣 Canvas 画布 */
#sakura-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

/* ==================== 导航栏 (Glass-morphism) ==================== */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(248,180,200,0.5);
  box-shadow: var(--shadow);
  transition: background var(--transition);
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.75rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-brand {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  letter-spacing: 0.5px;
  transition: color var(--transition);
}
.nav-brand:hover { color: var(--pink-dark); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  list-style: none;
}

.nav-link {
  color: var(--text-light);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  transition: all var(--transition);
  padding: 0.35rem 0;
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--pink);
  border-radius: 1px;
  transition: width var(--transition);
}

.nav-link:hover::after { width: 100%; }
.nav-link:hover { color: var(--pink-dark); }

.btn-nav {
  padding: 0.5rem 1.35rem;
  background: linear-gradient(135deg, var(--pink) 0%, var(--pink-dark) 100%);
  color: var(--white);
  text-decoration: none;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all var(--transition);
  box-shadow: 0 2px 12px rgba(232,146,168,0.25);
}
.btn-nav:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(232,146,168,0.35);
}

/* ==================== 通用容器 ==================== */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.content-wrapper {
  position: relative;
  z-index: 1;
}

/* ==================== 卡片 ==================== */
.card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: var(--shadow);
  border: 1px solid rgba(248,180,200,0.12);
  transition: all var(--transition);
}

.card:hover {
  box-shadow: 0 8px 30px rgba(200,160,175,0.22);
  transform: translateY(-2px);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--pink-light);
}

.card-header h2,
.card-header h3 {
  margin: 0;
  color: var(--text);
  font-weight: 600;
}

/* ==================== 按钮 ==================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.65rem 1.4rem;
  border: none;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
  font-family: var(--font);
  line-height: 1.4;
  white-space: nowrap;
}

.btn:active { transform: scale(0.97); }

.btn-primary {
  background: linear-gradient(135deg, var(--pink) 0%, #F5A8BB 50%, var(--pink-dark) 100%);
  color: var(--white);
  box-shadow: 0 2px 12px rgba(232,146,168,0.3);
}
.btn-primary:hover {
  box-shadow: 0 4px 18px rgba(232,146,168,0.4);
  transform: translateY(-1px);
}

.btn-outline {
  background: var(--white);
  color: var(--pink-dark);
  border: 1.5px solid var(--pink);
  box-shadow: none;
}
.btn-outline:hover {
  background: var(--pink-light);
  border-color: var(--pink-dark);
}

.btn-danger {
  background: linear-gradient(135deg, #F8A0A0, #E06060);
  color: var(--white);
  box-shadow: 0 2px 12px rgba(220,100,100,0.25);
}
.btn-danger:hover {
  box-shadow: 0 4px 18px rgba(220,100,100,0.35);
}

.btn-sm {
  padding: 0.4rem 0.9rem;
  font-size: 0.85rem;
  border-radius: 6px;
}

.btn-lg {
  padding: 0.8rem 1.8rem;
  font-size: 1.05rem;
  border-radius: 10px;
}

.btn-block {
  width: 100%;
  display: flex;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

.btn-group {
  display: flex;
  gap: 0.75rem;
}

/* ==================== 表单 ==================== */
.form-group {
  margin-bottom: 1.25rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.45rem;
  color: var(--text);
  font-weight: 600;
  font-size: 0.9rem;
}

.form-control {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1.5px solid #E8D8DD;
  border-radius: 8px;
  font-size: 0.95rem;
  font-family: var(--font);
  color: var(--text);
  background: var(--white);
  transition: all var(--transition);
  outline: none;
}

.form-control:focus {
  border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(248,180,200,0.2);
}

.form-control::placeholder {
  color: #C8B8BE;
}

.form-control.error {
  border-color: #E06060;
  box-shadow: 0 0 0 3px rgba(224,96,96,0.1);
}

select.form-control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239B8E93' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.5rem;
}

textarea.form-control {
  resize: vertical;
  min-height: 90px;
}

.form-hint {
  font-size: 0.82rem;
  color: var(--text-light);
  margin-top: 0.3rem;
}

.form-error {
  font-size: 0.82rem;
  color: #E06060;
  margin-top: 0.3rem;
}

/* ==================== Toast 通知 (右上角) ==================== */
#toast-container {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1.2rem;
  border-radius: 10px;
  color: var(--white);
  font-size: 0.9rem;
  font-weight: 500;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  pointer-events: auto;
  animation: toastIn 0.3s ease;
  max-width: 380px;
  line-height: 1.4;
}

.toast-success {
  background: linear-gradient(135deg, #88C8A0, #5A9E6F);
}

.toast-error {
  background: linear-gradient(135deg, #F09090, #D05555);
}

.toast-exit {
  animation: toastOut 0.25s ease forwards;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes toastOut {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(40px); }
}

/* ==================== 模态框 ==================== */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(100,70,80,0.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.modal-overlay.active {
  display: flex;
}

.modal {
  background: var(--white);
  border-radius: 16px;
  padding: 0;
  width: 100%;
  max-width: 520px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(180,140,150,0.25);
  animation: modalIn 0.3s ease;
  display: flex;
  flex-direction: column;
}

@keyframes modalIn {
  from { opacity: 0; transform: translateY(-20px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 1.75rem 0.75rem;
  flex-shrink: 0;
}

.modal-header h2,
.modal-header h3 {
  margin: 0;
  font-size: 1.15rem;
  color: var(--text);
  font-weight: 700;
}

.modal-close {
  background: none;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  color: var(--text-light);
  padding: 0.3rem;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all var(--transition);
  line-height: 1;
}
.modal-close:hover {
  background: var(--pink-light);
  color: var(--pink-dark);
}

.modal-body {
  padding: 0.75rem 1.75rem 1.5rem;
  flex: 1;
  overflow-y: auto;
}

.modal-footer {
  padding: 1rem 1.75rem;
  border-top: 1px solid var(--pink-light);
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  flex-shrink: 0;
}

/* ==================== 加载旋转 ==================== */
.spinner {
  display: inline-block;
  width: 36px;
  height: 36px;
  border: 3px solid #F0D8E0;
  border-top-color: var(--pink);
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}

.spinner-sm {
  width: 20px;
  height: 20px;
  border-width: 2px;
}

.spinner-lg {
  width: 50px;
  height: 50px;
  border-width: 4px;
}

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

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  gap: 1rem;
  color: var(--text-light);
  font-size: 0.95rem;
}

.loading-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,247,249,0.7);
  backdrop-filter: blur(2px);
  z-index: 50;
  border-radius: var(--radius);
}

/* ==================== 聊天气泡 ==================== */
.chat-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 140px);
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: var(--bg);
}

.chat-message {
  display: flex;
  gap: 0.5rem;
  max-width: 85%;
  animation: msgIn 0.25s ease;
}

.chat-message.user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.chat-message.assistant {
  align-self: flex-start;
}

.chat-message .bubble {
  padding: 0.7rem 1.1rem;
  border-radius: 16px;
  line-height: 1.6;
  font-size: 0.93rem;
  word-break: break-word;
}

.chat-message.user .bubble {
  background: linear-gradient(135deg, var(--pink) 0%, var(--pink-dark) 100%);
  color: var(--white);
  border-bottom-right-radius: 6px;
  box-shadow: 0 2px 10px rgba(232,146,168,0.25);
}

.chat-message.assistant .bubble {
  background: var(--white);
  color: var(--text);
  border-bottom-left-radius: 6px;
  box-shadow: 0 2px 10px rgba(200,160,175,0.1);
  border: 1px solid rgba(248,180,200,0.15);
}

.chat-message .bubble-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--white);
}

.chat-message.user .bubble-avatar {
  background: linear-gradient(135deg, var(--pink-dark), var(--pink));
}

.chat-message.assistant .bubble-avatar {
  background: linear-gradient(135deg, #C5B3B8, #9B8E93);
}

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

/* 聊天输入区 */
.chat-input-area {
  padding: 1rem 1.5rem;
  background: var(--white);
  border-top: 1px solid rgba(248,180,200,0.2);
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.chat-input-area input,
.chat-input-area textarea {
  flex: 1;
  padding: 0.7rem 1rem;
  border: 1.5px solid #E8D8DD;
  border-radius: 24px;
  font-size: 0.93rem;
  font-family: var(--font);
  resize: none;
  outline: none;
  transition: all var(--transition);
  max-height: 120px;
}

.chat-input-area input:focus,
.chat-input-area textarea:focus {
  border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(248,180,200,0.15);
}

.chat-input-area .btn-send {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--pink), var(--pink-dark));
  color: var(--white);
  border: none;
  cursor: pointer;
  transition: all var(--transition);
  flex-shrink: 0;
}
.chat-input-area .btn-send:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 12px rgba(232,146,168,0.4);
}

/* ==================== 表格 ==================== */
.table-container {
  overflow-x: auto;
  border-radius: var(--radius);
  border: 1px solid rgba(248,180,200,0.12);
}

.table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
}

.table thead th {
  background: linear-gradient(135deg, var(--pink-light) 0%, #FDE8EE 100%);
  color: var(--text);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0.85rem 1rem;
  text-align: left;
  border-bottom: 2px solid rgba(248,180,200,0.3);
  white-space: nowrap;
}

.table tbody td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--pink-light);
  color: var(--text);
  font-size: 0.9rem;
  vertical-align: middle;
}

.table tbody tr:nth-child(even) {
  background: rgba(255,240,245,0.3);
}

.table tbody tr:hover {
  background: rgba(255,240,245,0.55);
}

.table tbody tr:last-child td {
  border-bottom: none;
}

/* ==================== 徽章 ==================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.7rem;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.5;
}

.badge::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.badge-active {
  background: #E0F5E8;
  color: #2D7A46;
}
.badge-active::before { background: #2D7A46; }

.badge-pending {
  background: #FEF5E0;
  color: #B8860B;
}
.badge-pending::before { background: #B8860B; }

.badge-rejected {
  background: #FDE8E8;
  color: #C53030;
}
.badge-rejected::before { background: #C53030; }

.badge-disabled {
  background: #F0F0F0;
  color: #888888;
}
.badge-disabled::before { background: #888888; }

.badge-info {
  background: #E0ECF8;
  color: #3B6FB6;
}
.badge-info::before { background: #3B6FB6; }

/* ==================== 分页 ==================== */
.pagination {
  display: flex;
  justify-content: center;
  gap: 0.35rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

.pagination button,
.pagination .page-item {
  padding: 0.5rem 0.85rem;
  border: 1.5px solid #E8D8DD;
  background: var(--white);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-light);
  transition: all var(--transition);
  font-family: var(--font);
  min-width: 36px;
  text-align: center;
}

.pagination button:hover:not(:disabled),
.pagination .page-item:hover {
  border-color: var(--pink);
  color: var(--pink-dark);
  background: var(--pink-light);
}

.pagination button.active,
.pagination .page-item.active {
  background: linear-gradient(135deg, var(--pink), var(--pink-dark));
  color: var(--white);
  border-color: transparent;
}

.pagination button:disabled,
.pagination .page-item.disabled {
  opacity: 0.35;
  cursor: not-allowed;
  background: transparent;
}

/* ==================== 工具类 ==================== */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-muted { color: var(--text-light); }
.text-primary { color: var(--pink-dark); }
.text-success { color: #5A9E6F; }
.text-danger { color: #D05555; }
.text-warning { color: #B8860B; }

.bg-white { background: var(--white); }
.bg-pink { background: var(--pink-light); }

.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }

.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }

.p-1 { padding: 0.5rem; }
.p-2 { padding: 1rem; }
.p-3 { padding: 1.5rem; }
.p-4 { padding: 2rem; }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }
.gap-3 { gap: 1.5rem; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }

.grid { display: grid; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.hidden { display: none !important; }
.visible { visibility: visible; }
.invisible { visibility: hidden; }

.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }

.w-full { width: 100%; }
.h-full { height: 100%; }

.rounded { border-radius: var(--radius); }
.rounded-full { border-radius: 50%; }

.shadow { box-shadow: var(--shadow); }

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==================== 动画 ==================== */
.fade-in {
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.slide-up {
  animation: slideUp 0.3s ease;
}

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

.slide-in-right {
  animation: slideInRight 0.3s ease;
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

.pulse {
  animation: pulse 2s ease-in-out infinite;
}

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

/* ==================== 空状态 ==================== */
.empty-state {
  text-align: center;
  padding: 3rem 2rem;
  color: var(--text-light);
}

.empty-state .empty-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  color: #D8C8CE;
}

.empty-state h3 {
  color: var(--text);
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
  font-weight: 600;
}

.empty-state p {
  font-size: 0.9rem;
  max-width: 360px;
  margin: 0 auto;
}

/* ==================== 滚动条 ==================== */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--pink-light);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: #D8C0C8;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--pink);
}

/* ==================== 下拉菜单 ==================== */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  background: var(--white);
  border: 1px solid rgba(248,180,200,0.2);
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(200,160,175,0.15);
  min-width: 180px;
  z-index: 200;
  display: none;
  padding: 0.4rem 0;
  animation: dropdownIn 0.2s ease;
}

.dropdown-menu.show { display: block; }

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

.dropdown-menu a,
.dropdown-menu button {
  display: block;
  width: 100%;
  padding: 0.55rem 1rem;
  color: var(--text);
  font-size: 0.9rem;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  transition: all var(--transition);
}

.dropdown-menu a:hover,
.dropdown-menu button:hover {
  background: var(--pink-light);
  color: var(--pink-dark);
}

.dropdown-divider {
  border-top: 1px solid var(--pink-light);
  margin: 0.35rem 0;
}

/* ==================== 认证页面 ==================== */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  position: relative;
  z-index: 1;
}

.auth-box {
  background: var(--white);
  padding: 2.5rem;
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(200,160,175,0.18);
  width: 100%;
  max-width: 420px;
  position: relative;
}

.auth-box h1 {
  font-size: 1.5rem;
  color: var(--text);
  margin: 0 0 0.3rem;
  font-weight: 700;
  text-align: center;
}

.auth-box .auth-sub {
  color: var(--text-light);
  font-size: 0.9rem;
  margin-bottom: 2rem;
  text-align: center;
}

.auth-box .btn-submit {
  width: 100%;
  padding: 0.8rem;
  font-size: 1rem;
  margin-top: 0.5rem;
}

.auth-footer {
  text-align: center;
  margin-top: 1.5rem;
  color: var(--text-light);
  font-size: 0.9rem;
}

.auth-footer a {
  color: var(--pink-dark);
  font-weight: 600;
}

.msg-error {
  background: #FDE8E8;
  color: #C53030;
  padding: 0.7rem 1rem;
  border-radius: 8px;
  margin-bottom: 1.25rem;
  font-size: 0.88rem;
  display: none;
  border: 1px solid rgba(197,48,48,0.15);
}

.msg-success {
  background: #E0F5E8;
  color: #2D7A46;
  padding: 0.7rem 1rem;
  border-radius: 8px;
  margin-bottom: 1.25rem;
  font-size: 0.88rem;
  display: none;
  border: 1px solid rgba(45,122,70,0.15);
}

/* ==================== 响应式设计 ==================== */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  html { font-size: 14px; }

  .nav-container { padding: 0.65rem 1rem; }
  .container { padding: 0 1rem; }
  .card { padding: 1.25rem; border-radius: 10px; }

  .modal { max-width: 95vw; max-height: 90vh; border-radius: 14px; }
  .modal-header { padding: 1.25rem 1.25rem 0.5rem; }
  .modal-body { padding: 0.5rem 1.25rem 1.25rem; }
  .modal-footer { padding: 0.75rem 1.25rem; }

  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }

  .chat-message { max-width: 92%; }

  .hide-mobile { display: none !important; }

  .auth-box { padding: 2rem; }

  #sakura-scene .sakura-path { width: 30%; }
}

@media (max-width: 480px) {
  html { font-size: 13px; }

  .btn { padding: 0.55rem 1.1rem; }

  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr; }

  .nav-links { gap: 0.75rem; }

  .table thead { display: none; }
  .table tbody td {
    display: block;
    text-align: right;
    padding: 0.65rem 1rem;
    position: relative;
  }
  .table tbody td::before {
    content: attr(data-label);
    float: left;
    font-weight: 700;
    color: var(--text);
    font-size: 0.82rem;
  }

  .hide-small { display: none !important; }

  #sakura-scene .sakura-path { width: 40%; }
  #sakura-scene .sakura-near-forest { height: 22%; }
}

/* ==================== 打印 ==================== */
@media print {
  .navbar,
  #sakura-scene,
  #sakura-canvas,
  .no-print { display: none !important; }
  body { background: #fff; }
}