/* 
 * Shelter 主题系统
 * 包含深色和亮色主题的所有样式定义
 */

/* ==================== CSS 变量定义 ==================== */
:root {
  /* 深色主题（默认） */
  --bg-primary: #000000;
  --bg-secondary: rgba(40, 35, 50, 0.9);
  --text-primary: #ffffff;
  --text-secondary: #9ca3af;
  --text-tertiary: #6b7280;
  --text-muted: #4b5563;
  --border-primary: rgba(255, 255, 255, 0.08);
  --border-secondary: rgba(255, 255, 255, 0.15);
  --purple-accent: #a78bfa;
  --purple-accent-hover: #8b5cf6;
  --orange-accent: #fb923c;
  --orange-accent-hover: #f97316;
  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-bg-strong: rgba(255, 255, 255, 0.1);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-card-bg: rgba(40, 35, 50, 0.9);
  --glass-adaptive-bg: rgba(20, 15, 30, 0.9);
  --shadow-color: rgba(0, 0, 0, 0.3);
  --shadow-color-strong: rgba(0, 0, 0, 0.5);
  --input-bg: rgba(255, 255, 255, 0.05);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-placeholder: rgba(255, 255, 255, 0.3);
  --gradient-from: rgba(156, 163, 255, 0.02);
  --gradient-to: rgba(139, 146, 232, 0.02);
  --gradient-orange-from: rgba(251, 146, 60, 0.02);
  --gradient-orange-to: rgba(254, 178, 66, 0.02);
  --light-source: rgba(147, 51, 234, 0.05);
  --light-source-orange: rgba(251, 146, 60, 0.05);
  --brightness-filter: 1.1;
  --text-shadow: rgba(0, 0, 0, 0.8);
  --icon-shadow: rgba(0, 0, 0, 0.8);
}

/* 亮色主题 */
[data-theme="light"] {
  --bg-primary: #f9fafb;
  --bg-secondary: rgba(255, 255, 255, 0.9);
  --text-primary: #111827;
  --text-secondary: #4b5563;
  --text-tertiary: #6b7280;
  --text-muted: #9ca3af;
  --border-primary: rgba(0, 0, 0, 0.06);
  --border-secondary: rgba(0, 0, 0, 0.1);
  --purple-accent: #7c3aed;
  --purple-accent-hover: #6d28d9;
  --orange-accent: #ea580c;
  --orange-accent-hover: #dc2626;
  --glass-bg: rgba(0, 0, 0, 0.02);
  --glass-bg-strong: rgba(0, 0, 0, 0.04);
  --glass-border: rgba(0, 0, 0, 0.06);
  --glass-card-bg: rgba(255, 255, 255, 0.8);
  --glass-adaptive-bg: rgba(255, 255, 255, 0.9);
  --shadow-color: rgba(0, 0, 0, 0.1);
  --shadow-color-strong: rgba(0, 0, 0, 0.15);
  --input-bg: rgba(0, 0, 0, 0.02);
  --input-border: rgba(0, 0, 0, 0.1);
  --input-placeholder: rgba(0, 0, 0, 0.4);
  --gradient-from: rgba(156, 163, 255, 0.06);
  --gradient-to: rgba(139, 146, 232, 0.06);
  --gradient-orange-from: rgba(251, 146, 60, 0.06);
  --gradient-orange-to: rgba(254, 178, 66, 0.06);
  --light-source: rgba(147, 51, 234, 0.1);
  --light-source-orange: rgba(251, 146, 60, 0.1);
  --brightness-filter: 0.98;
  --text-shadow: rgba(255, 255, 255, 0.8);
  --icon-shadow: rgba(255, 255, 255, 0.8);
}

/* ==================== 基础样式 ==================== */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background: var(--bg-primary);
  min-height: 100vh;
  position: relative;
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* 环境光晕效果 - 社交功能（紫色系） */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 20% 50%, var(--gradient-from) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, var(--gradient-to) 0%, transparent 50%),
    radial-gradient(circle at 50% 100%, var(--gradient-from) 0%, transparent 50%);
  pointer-events: none;
}

/* 环境光晕效果 - 跑腿功能（橙色系） */
body.errand-theme::before {
  background: radial-gradient(circle at 20% 50%, var(--gradient-orange-from) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, var(--gradient-orange-to) 0%, transparent 50%),
    radial-gradient(circle at 50% 100%, var(--gradient-orange-from) 0%, transparent 50%);
}

/* ==================== 毛玻璃效果 ==================== */
.glass {
  background: linear-gradient(135deg, var(--glass-bg) 0%, var(--glass-bg) 100%);
  backdrop-filter: blur(10px) brightness(var(--brightness-filter));
  -webkit-backdrop-filter: blur(10px) brightness(var(--brightness-filter));
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 1px var(--glass-border);
}

.glass-strong {
  background: linear-gradient(135deg, var(--glass-bg-strong) 0%, var(--glass-bg) 100%);
  backdrop-filter: blur(12px) brightness(var(--brightness-filter));
  -webkit-backdrop-filter: blur(12px) brightness(var(--brightness-filter));
  border: 1px solid var(--border-secondary);
  box-shadow: inset 0 1px 2px var(--border-secondary), 0 4px 16px var(--shadow-color);
}

.glass-card {
  background: linear-gradient(135deg, var(--glass-card-bg) 0%, var(--glass-card-bg) 100%);
  backdrop-filter: blur(10px) brightness(var(--brightness-filter));
  -webkit-backdrop-filter: blur(10px) brightness(var(--brightness-filter));
  border: 1px solid var(--border-secondary);
  box-shadow: inset 0 1px 2px var(--border-secondary), 0 8px 32px var(--shadow-color-strong),
    0 2px 8px rgba(156, 163, 255, 0.1);
}

[data-theme="light"] .glass-card {
  box-shadow: 0 4px 16px var(--shadow-color), 0 1px 3px rgba(0, 0, 0, 0.05);
}

.glass-adaptive {
  background: var(--glass-adaptive-bg);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid var(--border-secondary);
  box-shadow: 0 -4px 20px var(--shadow-color-strong), inset 0 1px 1px var(--glass-border);
}

/* 特殊玻璃效果类（仅深色主题） */
.glass-dark {
  background: var(--bg-secondary);
  backdrop-filter: blur(10px) brightness(var(--brightness-filter));
  -webkit-backdrop-filter: blur(10px) brightness(var(--brightness-filter));
  border: 1px solid var(--border-secondary);
  box-shadow: inset 0 1px 2px var(--border-secondary), 0 8px 32px var(--shadow-color),
    0 2px 8px rgba(156, 163, 255, 0.1);
}

[data-theme="light"] .glass-dark {
  box-shadow: 0 4px 16px var(--shadow-color), 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* ==================== 按钮样式 ==================== */
/* 社交功能主按钮（紫色） */
.btn-primary {
  background: linear-gradient(135deg, #9ca3ff 0%, #8b92e8 100%);
  box-shadow: 0 4px 15px 0 rgba(156, 163, 255, 0.2);
  color: white;
}

[data-theme="light"] .btn-primary {
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
  box-shadow: 0 4px 15px 0 rgba(124, 58, 237, 0.3);
}

.btn-primary:hover {
  box-shadow: 0 6px 20px 0 rgba(156, 163, 255, 0.3);
  transform: translateY(-1px);
}

[data-theme="light"] .btn-primary:hover {
  box-shadow: 0 6px 20px 0 rgba(124, 58, 237, 0.4);
}

/* 跑腿功能主按钮（橙色） */
.btn-primary-orange {
  background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
  box-shadow: 0 4px 15px 0 rgba(251, 146, 60, 0.2);
  color: white;
}

[data-theme="light"] .btn-primary-orange {
  background: linear-gradient(135deg, #ea580c 0%, #dc2626 100%);
  box-shadow: 0 4px 15px 0 rgba(234, 88, 12, 0.3);
}

.btn-primary-orange:hover {
  box-shadow: 0 6px 20px 0 rgba(251, 146, 60, 0.3);
  transform: translateY(-1px);
}

[data-theme="light"] .btn-primary-orange:hover {
  box-shadow: 0 6px 20px 0 rgba(234, 88, 12, 0.4);
}

/* 次要按钮 */
.btn-secondary {
  background: transparent;
  border: 1px solid var(--border-secondary);
  color: var(--text-primary);
}

.btn-secondary:hover {
  background: var(--glass-bg);
  border-color: var(--purple-accent);
}

/* ==================== 表单输入 ==================== */
.input-field,
.input-dark {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text-primary);
}

.input-field:focus,
.input-dark:focus {
  background: var(--glass-bg-strong);
  border-color: var(--purple-accent);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

[data-theme="light"] .input-field:focus,
[data-theme="light"] .input-dark:focus {
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

.input-field::placeholder,
.input-dark::placeholder {
  color: var(--input-placeholder);
}

/* ==================== 文字样式 ==================== */
.text-primary {
  color: var(--text-primary);
}
.text-secondary {
  color: var(--text-secondary);
}
.text-tertiary {
  color: var(--text-tertiary);
}
.text-muted {
  color: var(--text-muted);
}
.text-purple {
  color: var(--purple-accent);
}
.text-purple-hover:hover {
  color: var(--purple-accent-hover);
}
.text-orange {
  color: var(--orange-accent);
}
.text-orange-hover:hover {
  color: var(--orange-accent-hover);
}

/* 对比度增强 */
.text-contrast {
  text-shadow: 0 1px 2px var(--text-shadow);
}

[data-theme="light"] .text-contrast {
  text-shadow: none;
}

.icon-contrast {
  filter: drop-shadow(0 1px 2px var(--icon-shadow));
}

[data-theme="light"] .icon-contrast {
  filter: none;
}

/* ==================== 背景装饰 ==================== */
.light-source {
  background: var(--light-source);
  pointer-events: none;
}

.light-source-orange {
  background: var(--light-source-orange);
  pointer-events: none;
}

/* 确保所有装饰性元素不阻挡交互 */
.decoration,
.bg-decoration {
  pointer-events: none;
}

/* ==================== 标签样式 ==================== */
.badge-social {
  background: rgba(156, 163, 255, 0.9);
  color: white;
  box-shadow: 0 2px 8px rgba(156, 163, 255, 0.3);
}

[data-theme="light"] .badge-social {
  background: #7c3aed;
  color: white;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3);
}

/* 状态标签样式 */
.status-active {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

[data-theme="light"] .status-active {
  background: rgba(34, 197, 94, 0.08);
  color: #16a34a;
}

.status-warning {
  background: rgba(251, 146, 60, 0.15);
  color: #fb923c;
}

[data-theme="light"] .status-warning {
  background: rgba(251, 146, 60, 0.08);
  color: #ea580c;
}

.status-success {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

[data-theme="light"] .status-success {
  background: rgba(34, 197, 94, 0.08);
  color: #16a34a;
}

.badge-errand {
  background: rgba(251, 146, 60, 0.9);
  color: white;
  box-shadow: 0 2px 8px rgba(251, 146, 60, 0.3);
}

[data-theme="light"] .badge-errand {
  background: #ea580c;
  color: white;
  box-shadow: 0 2px 8px rgba(234, 88, 12, 0.3);
}

/* 学生等级标签 */
.grade-badge {
  background: linear-gradient(135deg, #9ca3ff 0%, #8b92e8 100%);
  color: white;
}

[data-theme="light"] .grade-badge {
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
  color: white;
}

/* 紧急标签 */
.urgent-badge {
  background: #ef4444;
  color: white;
}

[data-theme="light"] .urgent-badge {
  background: #dc2626;
  color: white;
}

/* 用户数量标签 - 毛玻璃效果 */
.user-count-badge {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.2) 100%);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: white;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1), 0 2px 8px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
}

.user-count-badge::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.05) 0%, transparent 60%);
  pointer-events: none;
}

[data-theme="light"] .user-count-badge {
  background: linear-gradient(135deg, rgba(31, 41, 55, 0.85) 0%, rgba(55, 65, 81, 0.75) 100%);
  backdrop-filter: blur(16px) saturate(150%) brightness(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(150%) brightness(1.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3), 0 2px 8px rgba(31, 41, 55, 0.3), 0 1px 2px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .user-count-badge::before {
  background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.2) 0%, transparent 60%);
}

/* ==================== 导航栏样式 ==================== */
/* 导航选中状态 */
.nav-active {
  color: #9ca3ff;
}

[data-theme="light"] .nav-active {
  color: #7c3aed;
}

/* 导航选中指示条 */
.nav-indicator {
  background: linear-gradient(to right, #9ca3ff 0%, #8b92e8 100%);
}

[data-theme="light"] .nav-indicator {
  background: linear-gradient(to right, #7c3aed 0%, #6d28d9 100%);
}

/* 发布按钮 */
.publish-btn {
  background: linear-gradient(135deg, #9ca3ff 0%, #8b92e8 100%);
  box-shadow: 0 8px 16px rgba(156, 163, 255, 0.2), 0 0 0 4px rgba(0, 0, 0, 0.5);
}

[data-theme="light"] .publish-btn {
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
  box-shadow: 0 8px 16px rgba(124, 58, 237, 0.3), 0 0 0 4px rgba(255, 255, 255, 0.9);
}

.publish-btn-inner {
  background: linear-gradient(to top, rgba(147, 51, 234, 0) 0%, rgba(147, 51, 234, 0.3) 100%);
}

[data-theme="light"] .publish-btn-inner {
  background: linear-gradient(to top, rgba(124, 58, 237, 0) 0%, rgba(124, 58, 237, 0.2) 100%);
}

/* ==================== 边框样式 ==================== */
.border-primary {
  border-color: var(--border-primary);
}
.border-secondary {
  border-color: var(--border-secondary);
}

/* ==================== 进度条样式 ==================== */
.rating-bar {
  height: 8px;
  background: var(--glass-bg);
  border-radius: 4px;
  overflow: hidden;
}

[data-theme="light"] .rating-bar {
  background: rgba(0, 0, 0, 0.08);
}

.rating-fill {
  height: 100%;
  background: linear-gradient(135deg, var(--purple-accent) 0%, var(--purple-accent-hover) 100%);
  transition: width 0.3s ease;
}

/* Tab 样式 */
.tab-active {
  background: linear-gradient(135deg, var(--purple-accent) 0%, var(--purple-accent-hover) 100%);
  color: white;
}

.tab-btn {
  transition: all 0.3s ease;
}

.tab-btn:not(.tab-active) {
  color: var(--text-tertiary);
}

.tab-btn:not(.tab-active):hover {
  color: var(--text-secondary);
}

/* 上传区域样式 */
.upload-area {
  border: 2px dashed var(--border-primary);
  transition: all 0.3s ease;
}

.upload-area:hover {
  border-color: var(--purple-accent);
  background: var(--glass-bg);
}

[data-theme="light"] .upload-area {
  border-color: var(--border-secondary);
}

[data-theme="light"] .upload-area:hover {
  border-color: var(--purple-accent);
  background: var(--glass-bg-strong);
}

/* 表单元素样式 */
.custom-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23909399' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
  color: var(--text-primary);
}

[data-theme="light"] .custom-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23374151' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}

.custom-select option {
  background: var(--bg-primary);
  color: var(--text-primary);
}

/* 设置页面选择框样式 */
select option {
  background: var(--bg-primary);
  color: var(--text-primary);
}

[data-theme="light"] select option {
  background: white;
  color: var(--text-primary);
}

/* 动效优化 */
.benefit-item {
  transition: all 0.3s ease;
}

.benefit-item:hover {
  transform: translateX(5px);
}

.contact-item {
  transition: all 0.3s ease;
}

.contact-item:hover {
  transform: translateX(5px);
}

/* 渐变文字样式 */
.text-gradient {
  background: linear-gradient(135deg, var(--purple-accent) 0%, var(--purple-accent-hover) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 亮色主题下的渐变文字 - 使用更深的紫色 */
[data-theme="light"] .text-gradient {
  background: linear-gradient(135deg, #6d28d9 0%, #5b21b6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 橙色渐变文字样式 */
.text-gradient-orange {
  background: linear-gradient(135deg, var(--orange-accent) 0%, var(--orange-accent-hover) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 亮色主题下的橙色渐变文字 - 使用更深的橙色 */
[data-theme="light"] .text-gradient-orange {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 浮动动画 */
@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.float-animation {
  animation: float 3s ease-in-out infinite;
}

/* ==================== 动画效果 ==================== */
@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}

.float-animation {
  animation: float 6s ease-in-out infinite;
}

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

.fade-in {
  animation: fadeIn 0.8s ease-out;
}

.fade-in-delay-1 {
  animation: fadeIn 0.8s ease-out 0.3s both;
}

.fade-in-delay-2 {
  animation: fadeIn 0.8s ease-out 0.6s both;
}

/* ==================== 滚动条隐藏 ==================== */
::-webkit-scrollbar {
  display: none;
}

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

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* ==================== 主题工具类 ==================== */
/* 背景色工具类 */
.bg-primary {
  background-color: var(--bg-primary);
}

.bg-secondary {
  background-color: var(--bg-secondary);
}

/* 文字颜色工具类 */
.text-primary {
  color: var(--text-primary);
}

.text-secondary {
  color: var(--text-secondary);
}

.text-tertiary {
  color: var(--text-tertiary);
}

.text-muted {
  color: var(--text-muted);
}

.text-purple {
  color: var(--purple-accent);
}

.text-orange {
  color: var(--orange-accent);
}

/* 边框颜色工具类 */
.border-primary {
  border-color: var(--border-primary);
}

.border-secondary {
  border-color: var(--border-secondary);
}

.border-purple {
  border-color: var(--purple-accent);
}

/* 主题相关的背景色 */
.bg-purple {
  background-color: var(--purple-accent);
}

.bg-orange {
  background-color: var(--orange-accent);
}

/* 筛选选项样式 */
.filter-option {
  box-shadow: 0 2px 4px var(--shadow-color);
  transition: all 0.2s ease;
}

.filter-option:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px var(--shadow-color);
}

.filter-option.filter-selected {
  background: var(--purple-accent) !important;
  color: #ffffff !important;
  border-color: var(--purple-accent) !important;
  box-shadow: 0 4px 12px rgba(156, 163, 255, 0.4) !important;
  backdrop-filter: none !important;
}

.filter-option.filter-selected * {
  color: #ffffff !important;
}

.filter-option.filter-selected span {
  color: #ffffff !important;
  text-shadow: none !important;
}

[data-theme="light"] .filter-option.filter-selected {
  background: #7c3aed !important;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4) !important;
}

[data-theme="light"] .filter-option.filter-selected * {
  color: #ffffff !important;
}

/* 卡片点击交互效果 */
.glass-card.cursor-pointer {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.glass-card.cursor-pointer:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px var(--shadow-color-strong);
}

.glass-card.cursor-pointer:active {
  transform: translateY(0);
  transition: transform 0.1s ease;
}