/* ============================================================
   ChopInsight 葱花投研 — 品牌设计系统 (Brand Design System)
   版本: 2.0 — 基于 VI 手册 (葱花投研VI-3.pdf) 精确色值
   用途: 统一公司所有前端项目的视觉标注
   覆盖: 品牌色 · 字体 · 阴影 · 动效 · 组件
   来源: 葱花投研VI-3.pdf (32页, 2024.11.29)
   ============================================================ */

/* ---- 品牌色板 (Brand Palette) ---- */
:root {
  /* ═══ 企业标准色 (VI手册 3.0) — 精确值 ═══ */
  --chp-blue:        #00B4D2;   /* 青蓝 VI手册标准 */
  --chp-cyan:        #00C8C0;   /* 青   VI手册标准 */
  --chp-green:       #00C896;   /* 青绿 VI手册标准 */

  /* ═══ Logo 渐变色 (VI手册 1.1 标志标准用色) ═══ */
  --chp-logo-blue:   #4FB2CF;   /* Logo渐变起点 */
  --chp-logo-cyan:   #31D2E0;   /* Logo渐变中点 */
  --chp-logo-green:  #80DF66;   /* Logo渐变终点 */
  --chp-logo-gradient: linear-gradient(135deg, #4FB2CF 0%, #31D2E0 50%, #80DF66 100%);

  /* 品牌色梯度 — 基于 #00B4D2 青蓝 */
  --chp-blue-50:     #E5F7FB;
  --chp-blue-100:    #CCF0F6;
  --chp-blue-200:    #99E1EE;
  --chp-blue-300:    #66D2E5;
  --chp-blue-400:    #33C3DD;
  --chp-blue-500:    #00B4D2;
  --chp-blue-600:    #0090A8;
  --chp-blue-700:    #006C7E;
  --chp-blue-800:    #004854;
  --chp-blue-900:    #00242A;

  /* 品牌色梯度 — 基于 #00C8C0 青 */
  --chp-cyan-50:     #E5FAF9;
  --chp-cyan-100:    #CCF5F3;
  --chp-cyan-200:    #99EBE7;
  --chp-cyan-300:    #66E1DB;
  --chp-cyan-400:    #33D7CE;
  --chp-cyan-500:    #00C8C0;
  --chp-cyan-600:    #00A09A;
  --chp-cyan-700:    #007873;
  --chp-cyan-800:    #00504D;
  --chp-cyan-900:    #002826;

  /* 品牌色梯度 — 基于 #00C896 青绿 */
  --chp-green-50:    #E5FAF2;
  --chp-green-100:   #CCF5E5;
  --chp-green-200:   #99EBCC;
  --chp-green-300:   #66E1B3;
  --chp-green-400:   #33D799;
  --chp-green-500:   #00C896;
  --chp-green-600:   #00A078;
  --chp-green-700:   #00785A;
  --chp-green-800:   #00503C;
  --chp-green-900:   #00281E;

  /* ═══ 中性色 (VI手册 3.1) — 精确值 ═══ */
  --chp-gray-900:    #323232;   /* 标题/正文 */
  --chp-gray-800:    #4B4B4B;   /* 次要文字 */
  --chp-gray-700:    #7D7D7D;   /* 辅助文字 */
  --chp-gray-600:    #A0A0A0;
  --chp-gray-500:    #AFAFAF;
  --chp-gray-400:    #C8C8C8;   /* 边框/分隔 */
  --chp-gray-300:    #DCDCDC;   /* 浅底 */
  --chp-gray-200:    #EBEBEB;   /* 浅底 */
  --chp-gray-100:    #F0F0F0;   /* 页面背景 */
  --chp-gray-50:     #F5F5F5;

  /* 深色背景 (VI手册 封面/章节标题) */
  --chp-dark-bg:     #2D2D41;

  /* ---- 语义色 (Semantic) ---- */
  --chp-success:     #00C896;
  --chp-warning:     #F59E0B;
  --chp-error:       #EF4444;
  --chp-info:        #00B4D2;

  /* ---- 品牌渐变 (VI手册标准色) ---- */
  --chp-gradient-primary:  linear-gradient(135deg, #00B4D2 0%, #00C8C0 100%);
  --chp-gradient-accent:   linear-gradient(135deg, #00C8C0 0%, #00C896 100%);
  --chp-gradient-full:     linear-gradient(135deg, #00B4D2 0%, #00C8C0 50%, #00C896 100%);
  --chp-gradient-reverse:  linear-gradient(135deg, #00C896 0%, #00C8C0 100%);
  --chp-gradient-vertical: linear-gradient(180deg, #00B4D2 0%, #00C8C0 50%, #00C896 100%);

  /* ---- 字体 (Typography) ---- */
  --chp-font-display: 'Inter', 'Noto Sans SC', -apple-system, sans-serif;
  --chp-font-body:    'Inter', 'Noto Sans SC', -apple-system, sans-serif;
  --chp-font-mono:    'JetBrains Mono', 'SF Mono', 'Courier New', monospace;

  /* ---- 阴影 (Shadows) ---- */
  --chp-shadow-xs:    0 1px 4px rgba(0, 180, 210, 0.06);
  --chp-shadow-sm:    0 2px 8px rgba(0, 180, 210, 0.10);
  --chp-shadow-md:    0 4px 16px rgba(0, 180, 210, 0.14);
  --chp-shadow-lg:    0 8px 32px rgba(0, 180, 210, 0.18);
  --chp-shadow-xl:    0 12px 48px rgba(0, 180, 210, 0.22);
  --chp-shadow-glow:  0 0 30px rgba(0, 180, 210, 0.35);
  --chp-shadow-green: 0 0 30px rgba(0, 200, 150, 0.35);

  /* ---- 圆角 (Border Radius) ---- */
  --chp-radius-xs: 4px;
  --chp-radius-sm: 8px;
  --chp-radius-md: 12px;
  --chp-radius-lg: 16px;
  --chp-radius-xl: 24px;
  --chp-radius-full: 9999px;

  /* ---- 间距 (Spacing) ---- */
  --chp-space-xs: 0.25rem;
  --chp-space-sm: 0.5rem;
  --chp-space-md: 1rem;
  --chp-space-lg: 1.5rem;
  --chp-space-xl: 2rem;
  --chp-space-2xl: 3rem;
  --chp-space-3xl: 4rem;

  /* ---- 动效 (Transitions) ---- */
  --chp-ease-fast:    0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --chp-ease-smooth:   0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --chp-ease-bounce:   0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  --chp-ease-spring:   0.6s cubic-bezier(0.22, 1, 0.36, 1);

  /* ---- 分层 (Z-Index) ---- */
  --chp-z-base:    0;
  --chp-z-dropdown: 100;
  --chp-z-sticky:   200;
  --chp-z-overlay:  300;
  --chp-z-modal:    400;
  --chp-z-toast:    500;
}

/* ============================================================
   品牌基础样式
   ============================================================ */

/* ---- 品牌底栏/标注条 (Brand Footer Bar) ---- */
.chp-brand-bar {
  border-top: 2px solid transparent;
  border-image: var(--chp-gradient-primary);
  border-image-slice: 1;
  padding: var(--chp-space-md) var(--chp-space-xl);
  font-size: 0.8rem;
  color: var(--chp-gray-500);
  text-align: center;
}

/* ---- 品牌按钮 (Brand Button) ---- */
.chp-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.5rem;
  border: none;
  border-radius: var(--chp-radius-sm);
  font-family: var(--chp-font-body);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--chp-ease-smooth);
  position: relative;
  overflow: hidden;
}

.chp-btn-primary {
  background: var(--chp-gradient-primary);
  color: #fff;
  box-shadow: var(--chp-shadow-sm);
}

.chp-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--chp-shadow-md);
}

.chp-btn-primary:active {
  transform: translateY(0);
}

.chp-btn-secondary {
  background: transparent;
  color: var(--chp-blue-400);
  border: 1px solid var(--chp-blue-200);
}

.chp-btn-secondary:hover {
  background: var(--chp-blue-50);
  border-color: var(--chp-blue-400);
}

.chp-btn-ghost {
  background: transparent;
  color: var(--chp-blue-400);
}

.chp-btn-ghost:hover {
  background: var(--chp-blue-50);
}

/* ---- 品牌卡片 (Brand Card) ---- */
.chp-card {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 180, 210, 0.20);
  border-radius: var(--chp-radius-xl);
  padding: var(--chp-space-xl);
  transition: all var(--chp-ease-smooth);
  box-shadow: var(--chp-shadow-xs);
}

.chp-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--chp-shadow-md);
  border-color: rgba(0, 180, 210, 0.40);
}

/* ---- 品牌标签 (Brand Badge/Tag) ---- */
.chp-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: var(--chp-radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.chp-badge-blue {
  background: var(--chp-blue-50);
  color: var(--chp-blue-600);
}

.chp-badge-cyan {
  background: var(--chp-cyan-50);
  color: var(--chp-cyan-600);
}

.chp-badge-green {
  background: var(--chp-green-50);
  color: var(--chp-green-600);
}

.chp-badge-gradient {
  background: var(--chp-gradient-primary);
  color: #fff;
}

/* ---- 玻璃效果 (Glass Morphism) ---- */
.chp-glass {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 180, 210, 0.15);
}

.chp-glass-hover:hover {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(0, 180, 210, 0.35);
}

/* ---- 品牌渐变文字 ---- */
.chp-text-gradient {
  background: var(--chp-gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.chp-text-gradient-full {
  background: var(--chp-gradient-full);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---- 品牌分隔线 ---- */
.chp-divider {
  height: 2px;
  border: none;
  background: var(--chp-gradient-primary);
  opacity: 0.3;
  margin: var(--chp-space-xl) 0;
}

/* ---- 品牌输入框 ---- */
.chp-input {
  padding: 0.6rem 1rem;
  border: 1px solid var(--chp-gray-300);
  border-radius: var(--chp-radius-sm);
  font-family: var(--chp-font-body);
  font-size: 0.9rem;
  background: #fff;
  transition: all var(--chp-ease-fast);
  outline: none;
}

.chp-input:focus {
  border-color: var(--chp-blue-400);
  box-shadow: 0 0 0 3px rgba(0, 180, 210, 0.15);
}

.chp-input::placeholder {
  color: var(--chp-gray-400);
}

/* ---- 品牌骨架屏 (Skeleton) ---- */
.chp-skeleton {
  background: linear-gradient(
    90deg,
    var(--chp-gray-100) 25%,
    var(--chp-gray-200) 50%,
    var(--chp-gray-100) 75%
  );
  background-size: 200% 100%;
  animation: chp-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--chp-radius-sm);
}

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

/* ---- 品牌 Toast / 通知 ---- */
.chp-toast {
  padding: var(--chp-space-md) var(--chp-space-lg);
  border-radius: var(--chp-radius-md);
  background: #fff;
  box-shadow: var(--chp-shadow-lg);
  border-left: 4px solid var(--chp-blue-400);
  font-size: 0.9rem;
}

.chp-toast-success { border-left-color: var(--chp-green-400); }
.chp-toast-error   { border-left-color: var(--chp-error); }
.chp-toast-warning { border-left-color: var(--chp-warning); }

/* ---- 品牌链接 ---- */
.chp-link {
  color: var(--chp-blue-500);
  text-decoration: none;
  transition: color var(--chp-ease-fast);
}

.chp-link:hover {
  color: var(--chp-cyan-500);
}

/* ---- 品牌选中 (Selection) ---- */
::selection {
  background: var(--chp-cyan-400);
  color: #fff;
}

/* ---- 品牌滚动条 ---- */
.chp-scrollbar::-webkit-scrollbar { width: 8px; height: 8px; }
.chp-scrollbar::-webkit-scrollbar-track { background: var(--chp-gray-100); border-radius: 4px; }
.chp-scrollbar::-webkit-scrollbar-thumb {
  background: var(--chp-gradient-primary);
  border-radius: 4px;
  transition: background var(--chp-ease-fast);
}
.chp-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--chp-gradient-accent);
}

/* ---- 品牌 Loading 旋转 ---- */
.chp-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--chp-gray-200);
  border-top-color: var(--chp-blue-400);
  border-radius: 50%;
  animation: chp-spin 0.8s linear infinite;
}

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

/* ---- 品牌动画 ---- */
@keyframes chp-fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes chp-fadeInUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes chp-scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

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

@keyframes chp-glow {
  0%, 100% { filter: drop-shadow(0 0 12px rgba(0, 180, 210, 0.3)); }
  50%      { filter: drop-shadow(0 0 28px rgba(0, 180, 210, 0.6)); }
}

.chp-animate-fadeIn  { animation: chp-fadeIn   0.6s var(--chp-ease-smooth) both; }
.chp-animate-fadeInUp { animation: chp-fadeInUp 0.8s var(--chp-ease-smooth) both; }
.chp-animate-scaleIn { animation: chp-scaleIn   0.5s var(--chp-ease-smooth) both; }
.chp-animate-pulse   { animation: chp-pulse     2s ease-in-out infinite; }
.chp-animate-glow    { animation: chp-glow      3s ease-in-out infinite; }

/* ---- 品牌页面背景 (同 chopinsight.cn) ---- */
.chp-page-bg {
  background:
    radial-gradient(circle at 20% 30%, rgba(0, 180, 210, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(0, 200, 192, 0.04) 0%, transparent 50%),
    linear-gradient(180deg, #F8FAFC 0%, #F0F4F8 100%);
}

/* ============================================================
   品牌 Logo 展示区
   ============================================================ */
.chp-logo-display {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.chp-logo-display img {
  height: 36px;
  width: auto;
}

.chp-logo-display .chp-logo-text {
  font-family: var(--chp-font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--chp-gray-900);
  letter-spacing: -0.02em;
}

.chp-logo-display .chp-logo-tagline {
  font-size: 0.7rem;
  color: var(--chp-gray-500);
  font-weight: 400;
  letter-spacing: 0.05em;
}

/* ============================================================
   覆盖修复: 将非品牌色替换为品牌色
   ============================================================ */

/* Header 刷新按钮 - 原用 #0ea5e9 → 改为品牌色 */
.header .refresh-button {
  background: var(--chp-gradient-primary) !important;
  box-shadow: 0 2px 8px rgba(0, 180, 210, 0.25) !important;
}

.header .refresh-button:hover:not(:disabled) {
  box-shadow: 0 4px 16px rgba(0, 180, 210, 0.40) !important;
}

/* Bento 卡片 - 原用 rgba(33,150,243,...) → 改为品牌色 */
.bento-card {
  border-color: rgba(0, 180, 210, 0.20) !important;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.06),
    0 1px 3px rgba(0, 180, 210, 0.12) !important;
}

.bento-card:hover {
  border-color: rgba(0, 180, 210, 0.45) !important;
  box-shadow: 0 12px 40px rgba(0, 180, 210, 0.22) !important;
}

.bento-card::before {
  color: rgba(0, 180, 210, 0.12) !important;
}

.bento-card:hover::before {
  color: rgba(0, 180, 210, 0.22) !important;
}

.bento-card:hover .bento-title {
  background: var(--chp-gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 箭头按钮 - 原用品牌色渐变，保持一致 */
.bento-arrow {
  background: var(--chp-gradient-primary) !important;
  box-shadow: 0 4px 12px rgba(0, 180, 210, 0.30) !important;
}

/* Coming Soon 徽章 */
.coming-soon-badge {
  background: var(--chp-gradient-accent) !important;
  box-shadow: 0 4px 20px rgba(0, 180, 210, 0.30) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* 子图标按钮 */
.sub-icon-button {
  border-color: rgba(0, 180, 210, 0.20) !important;
}

.sub-icon-button:hover {
  border-color: rgba(0, 180, 210, 0.40) !important;
  box-shadow: 0 6px 20px rgba(0, 180, 210, 0.18) !important;
}

.sub-icon-wrapper {
  background: rgba(0, 200, 192, 0.10) !important;
  color: var(--chp-cyan-400) !important;
}

.sub-icon-button:hover .sub-icon-wrapper {
  background: var(--chp-gradient-primary) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(0, 180, 210, 0.30) !important;
}

.sub-icon-button:hover .sub-icon-label {
  color: var(--chp-blue-400) !important;
}

/* 装饰光球 - 原用 brand-* 变量但需确认统一 */
.decorative-orb-1 { background: radial-gradient(circle, var(--chp-blue-400), transparent) !important; }
.decorative-orb-2 { background: radial-gradient(circle, var(--chp-cyan-400), transparent) !important; }
.decorative-orb-3 { background: radial-gradient(circle, var(--chp-green-400), transparent) !important; }

/* Back button FAB - 原用 rgba(33,150,243,...) → 改为品牌色 */
.back-button-fab {
  border-color: rgba(0, 180, 210, 0.25) !important;
  color: var(--chp-cyan-400) !important;
}

.back-button-fab:hover {
  background: var(--chp-gradient-primary) !important;
  color: #fff !important;
  box-shadow: 0 6px 24px rgba(0, 180, 210, 0.40) !important;
}

/* 全局滚动条 - 原用 var(--gradient-primary) 保持可用 */