/* ============================================================
 * 牵牛花 — 统一设计系统 (Qianniuhua Design System)
 * ============================================================ */
:root {
  /* ── 品牌色 ── */
  --qnh-brand: #6366f1;       /* 主色调 indigo-500 */
  --qnh-brand-light: #818cf8;
  --qnh-brand-dark: #4f46e5;

  /* ── 五端标识色 ── */
  --qnh-merchant: #10b981;    /* 商家  emerald */
  --qnh-planner: #f59e0b;     /* 策划  amber */
  --qnh-designer: #3b82f6;    /* 设计  blue */
  --qnh-producer: #f97316;    /* 制作  orange */
  --qnh-installer: #ef4444;   /* 安装  red */

  /* ── 中性色 ── */
  --qnh-bg: #0f172a;          /* slate-900 */
  --qnh-bg-card: rgba(30, 41, 59, 0.7);
  --qnh-bg-elevated: rgba(51, 65, 85, 0.5);
  --qnh-border: rgba(148, 163, 184, 0.08);
  --qnh-text: #f1f5f9;
  --qnh-text-secondary: #94a3b8;
  --qnh-text-muted: #64748b;

  /* ── 圆角 ── */
  --qnh-radius-sm: 0.5rem;
  --qnh-radius: 0.75rem;
  --qnh-radius-lg: 1rem;
  --qnh-radius-xl: 1.25rem;
  --qnh-radius-2xl: 1.5rem;

  /* ── 阴影 ── */
  --qnh-shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --qnh-shadow: 0 4px 20px rgba(0,0,0,0.4);
  --qnh-shadow-lg: 0 8px 40px rgba(0,0,0,0.5);
  --qnh-shadow-glow: 0 0 30px rgba(99,102,241,0.15);

  /* ── 间距 ── */
  --qnh-space-xs: 0.25rem;
  --qnh-space-sm: 0.5rem;
  --qnh-space: 1rem;
  --qnh-space-lg: 1.5rem;
  --qnh-space-xl: 2rem;
  --qnh-space-2xl: 3rem;
  --qnh-space-3xl: 4rem;

  /* ── 字体 ── */
  --qnh-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --qnh-font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* ── 字号 ── */
  --qnh-text-xs: 0.75rem;
  --qnh-text-sm: 0.875rem;
  --qnh-text-base: 1rem;
  --qnh-text-lg: 1.125rem;
  --qnh-text-xl: 1.25rem;
  --qnh-text-2xl: 1.5rem;
  --qnh-text-3xl: 2rem;
  --qnh-text-4xl: 2.5rem;

  /* ── 动画 ── */
  --qnh-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --qnh-transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── 页面容器用 body 类 ── */
body.qnh-page {
  font-family: var(--qnh-font);
  background: var(--qnh-bg);
  color: var(--qnh-text);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

/* ── 渐变背景 ── */
.qnh-bg-glow {
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(99,102,241,0.12), transparent),
    radial-gradient(ellipse 60% 40% at 80% 80%, rgba(16,185,129,0.06), transparent),
    var(--qnh-bg);
}

/* ── 玻璃卡片 ── */
.qnh-card {
  background: var(--qnh-bg-card);
  border: 1px solid var(--qnh-border);
  border-radius: var(--qnh-radius-xl);
  backdrop-filter: blur(16px);
}

.qnh-card:hover {
  border-color: rgba(148, 163, 184, 0.15);
}

/* ── 按钮 ── */
.qnh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  border-radius: var(--qnh-radius);
  font-size: var(--qnh-text-sm);
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all var(--qnh-transition);
}

.qnh-btn-primary {
  background: linear-gradient(135deg, var(--qnh-brand), var(--qnh-brand-light));
  color: white;
  box-shadow: 0 2px 12px rgba(99,102,241,0.3);
}

.qnh-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(99,102,241,0.4);
}

/* ── 输入框 ── */
.qnh-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: var(--qnh-radius);
  border: 1px solid var(--qnh-border);
  background: rgba(255,255,255,0.04);
  color: var(--qnh-text);
  font-size: var(--qnh-text-sm);
  transition: border-color var(--qnh-transition);
  outline: none;
}

.qnh-input:focus {
  border-color: var(--qnh-brand-light);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.1);
}

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

/* ── 品牌标识 ── */
.qnh-logo {
  font-size: var(--qnh-text-2xl);
  font-weight: 800;
  letter-spacing: 0.05em;
  background: linear-gradient(135deg, #818cf8, #c084fc, #818cf8);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: qnh-shimmer 3s linear infinite;
}

@keyframes qnh-shimmer {
  to { background-position: 200% center; }
}

/* ── 五色渐变标识 ── */
.qnh-grad-merchant { background: linear-gradient(135deg, #059669, #34d399); }
.qnh-grad-planner  { background: linear-gradient(135deg, #d97706, #fbbf24); }
.qnh-grad-designer { background: linear-gradient(135deg, #2563eb, #60a5fa); }
.qnh-grad-producer { background: linear-gradient(135deg, #ea580c, #fb923c); }
.qnh-grad-installer{ background: linear-gradient(135deg, #dc2626, #f87171); }

/* ── 微交互 ── */
.qnh-hover-lift {
  transition: transform var(--qnh-transition), box-shadow var(--qnh-transition);
}

.qnh-hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--qnh-shadow-lg);
}

.qnh-hover-scale {
  transition: transform var(--qnh-transition);
}

.qnh-hover-scale:hover {
  transform: scale(1.05);
}