/* ============================================
   Light Me - 16型个人色彩诊断
   Custom Styles
   ============================================ */

:root {
  --spring-from: #FFF5E6;
  --spring-to: #FFE4CC;
  --spring-accent: #FF9F68;
  --spring-text: #8B5E34;
  --spring-gradient: linear-gradient(135deg, #FFE4B5, #FFDAB9, #FFB6C1);

  --summer-from: #EDF2FF;
  --summer-to: #E8D4F0;
  --summer-accent: #8FA8D8;
  --summer-text: #5B6B8A;
  --summer-gradient: linear-gradient(135deg, #B8D4E3, #C8A2C8, #E0C8E8);

  --autumn-from: #FFF0E0;
  --autumn-to: #F5E0CC;
  --autumn-accent: #C4834C;
  --autumn-text: #7A5230;
  --autumn-gradient: linear-gradient(135deg, #D2A679, #CD853F, #C4834C);

  --winter-from: #E8EEF8;
  --winter-to: #E0E0F8;
  --winter-accent: #6B74B8;
  --winter-text: #3D3F6B;
  --winter-gradient: linear-gradient(135deg, #7B8BD4, #6B74B8, #9B89D4);
}

* {
  -webkit-tap-highlight-color: transparent;
}

body {
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
}

/* ======== 入场动画 ======== */

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

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

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

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

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.7; }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes progressGrow {
  from { width: 0%; }
}

@keyframes colorReveal {
  from { opacity: 0; transform: scale(0.5); }
  to { opacity: 1; transform: scale(1); }
}

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

.animate-fade-in {
  animation: fadeIn 0.6s ease-out both;
}

.animate-slide-up {
  animation: slideUp 0.6s ease-out both;
}

.animate-slide-down {
  animation: slideDown 0.4s ease-out both;
}

.animate-modal-in {
  animation: modalIn 0.3s ease-out both;
}

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

/* ======== 加载动画 ======== */

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

.loading-ring-spin {
  animation: spin 1.2s linear infinite;
}

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

/* ======== 上传区域 ======== */

#upload-area {
  transition: all 0.3s ease;
}

#upload-area.drag-over {
  border-color: #E8A0BF;
  background: rgba(232, 160, 191, 0.1);
  transform: scale(1.02);
}

#upload-area.has-image {
  border-style: solid;
  border-color: #E8A0BF;
  padding: 12px;
}

/* ======== 结果页样式 ======== */

.result-header-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 0 0 2rem 2rem;
}

.result-header-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.1;
  background: radial-gradient(circle at 20% 50%, white 0%, transparent 50%),
              radial-gradient(circle at 80% 50%, white 0%, transparent 50%);
  pointer-events: none;
}

.result-card {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 1.25rem;
  padding: 1.25rem;
  margin: 0 1rem;
  transition: transform 0.2s ease;
}

.result-card:hover {
  transform: translateY(-2px);
}

.result-card-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #6B7280;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

/* ======== 维度进度条 ======== */

.dimension-bar-bg {
  height: 8px;
  border-radius: 100px;
  background: #f3f4f6;
  overflow: hidden;
}

.dimension-bar {
  height: 100%;
  border-radius: 100px;
  transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  background: linear-gradient(90deg, #F9A8D4, #C084FC);
}

.dimension-bar.bar-spring {
  background: linear-gradient(90deg, #FBBF24, #F97316);
}

.dimension-bar.bar-summer {
  background: linear-gradient(90deg, #93C5FD, #A78BFA);
}

.dimension-bar.bar-autumn {
  background: linear-gradient(90deg, #F59E0B, #DC2626);
}

.dimension-bar.bar-winter {
  background: linear-gradient(90deg, #60A5FA, #7C3AED);
}

/* ======== 色板展示 ======== */

.color-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.color-swatch:hover {
  transform: scale(1.08);
}

.color-swatch:active {
  transform: scale(0.95);
}

.color-circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 3px solid white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: box-shadow 0.2s ease;
}

.color-circle:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}

.color-circle-sm {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.color-hex {
  font-size: 0.625rem;
  font-family: 'Courier New', monospace;
  color: #9CA3AF;
}

/* ======== 部位色号 ======== */

.body-color-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.5);
  border-radius: 12px;
}

.body-color-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
  flex-shrink: 0;
}

/* ======== 推荐色/避开色卡片 ======== */

.color-detail-card {
  background: rgba(255,255,255,0.6);
  border-radius: 16px;
  padding: 12px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  transition: background 0.2s ease;
}

.color-detail-card:hover {
  background: rgba(255,255,255,0.85);
}

/* ======== 标签页 ======== */

.tab-btn {
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #9CA3AF;
  border-radius: 100px;
  transition: all 0.2s ease;
  white-space: nowrap;
  border: 1px solid transparent;
}

.tab-btn.active {
  color: #6B21A8;
  background: rgba(167, 139, 250, 0.1);
  border-color: rgba(167, 139, 250, 0.3);
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
  animation: fadeIn 0.3s ease;
}

/* ======== 文字卡片 ======== */

.text-card {
  font-size: 0.8125rem;
  line-height: 1.8;
  color: #4B5563;
  white-space: pre-wrap;
}

/* ======== 复制提示 ======== */

.copy-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.75);
  color: white;
  font-size: 0.75rem;
  padding: 8px 20px;
  border-radius: 100px;
  z-index: 200;
  animation: slideUp 0.3s ease, fadeOut 0.3s ease 1.5s forwards;
}

@keyframes fadeOut {
  to { opacity: 0; }
}

/* ======== 结果入场动画 ======== */

.result-section {
  animation: floatUp 0.6s ease-out both;
}

/* ======== 滚动条 ======== */

::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.1);
  border-radius: 100px;
}

/* ======== 骨架屏 ======== */

.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}

/* ======== 响应式 ======== */

@media (min-width: 640px) {
  .color-circle {
    width: 60px;
    height: 60px;
  }

  .result-card {
    padding: 1.5rem;
    margin: 0 1.25rem;
  }
}

@media (max-width: 380px) {
  .color-circle {
    width: 44px;
    height: 44px;
  }

  .result-card {
    padding: 1rem;
    margin: 0 0.75rem;
  }

  .tab-btn {
    padding: 0.375rem 0.75rem;
    font-size: 0.6875rem;
  }
}

/* ======== 打印样式 ======== */

@media print {
  body { background: white !important; }
  .result-card { box-shadow: none; border: 1px solid #eee; }
  #btn-retest { display: none !important; }
}