/* ═══════════════════════════════════════════════════════════════
   门店经营分 BI 看板 — Design System
   "Editorial Scorecard" — refined, data-first, mobile-native
   ═══════════════════════════════════════════════════════════════ */

/* ── Design Tokens ──────────────────────────────────── */
:root {
  /* Palette */
  --ink:        #1a1a1c;
  --ink-light:  #5c5c60;
  --ink-muted:  #94949b;
  --paper:      #f0f0f2;
  --surface:    #ffffff;
  --border:     #e8e3dc;
  --border-light: #f0ece6;

  /* Accent — vermillion-cinnabar, warm but urgent */
  --accent:        #c23a2e;
  --accent-glow:   rgba(194, 58, 46, 0.12);

  /* Score semantics */
  --score-excellent: #15803d;
  --score-excellent-bg: #f0fdf4;
  --score-good:      #2563eb;
  --score-good-bg:   #eff6ff;
  --score-average:   #b45309;
  --score-average-bg: #fffbeb;
  --score-poor:      #dc2626;
  --score-poor-bg:   #fef2f2;

  /* Dimensions */
  --dim-renovation:  #8b5cf6;
  --dim-product:     #3b82f6;
  --dim-content:     #06b6d4;
  --dim-experience:  #f59e0b;
  --dim-review:      #10b981;

  /* Spacing scale */
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-2xl: 24px;
  --space-3xl: 32px;

  /* Typography */
  --font-display: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', -apple-system, sans-serif;
  --font-number: 'SF Pro Display', 'Helvetica Neue', 'DIN Alternate', -apple-system, sans-serif;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;

  /* Shadows */
  --shadow-card: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.03);
  --shadow-card-hover: 0 4px 16px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.03);
  --shadow-hero: 0 2px 8px rgba(0,0,0,0.05), 0 8px 24px rgba(0,0,0,0.04);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
}

/* ── Reset & Base ──────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  min-height: 100vh;
  min-height: 100dvh;
}

/* ── Typography ────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* ── Interactive ───────────────────────────────────── */
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: inherit; }
button, input, select { -webkit-appearance: none; appearance: none; }

/* ── Buttons ───────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-md);
  transition: all var(--duration-fast) var(--ease-out);
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--ink);
  color: #fff;
}
.btn-primary:active { background: #3a3a3e; }

.btn-danger {
  background: var(--score-poor);
  color: #fff;
}
.btn-danger:active { background: #b91c1c; }

.btn-sm { padding: 6px 14px; font-size: 13px; border-radius: var(--radius-sm); }

/* ── Scrollbar ─────────────────────────────────────── */
::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1cdc6; border-radius: 2px; }

/* ── Animations ────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Safe-area insets ─────────────────────────────── */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: constant(safe-area-inset-bottom, 0px) env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

/* ── Responsive utilities ──────────────────────────── */
@media (max-width: 360px) {
  :root {
    --space-lg: 12px;
    --space-xl: 16px;
    --space-2xl: 20px;
    --space-3xl: 24px;
  }
  body { font-size: 14px; }
}