/* =============================================================================
 * OranGEO · Design System v3.0 · Warm Paper (Linear/Notion/Stripe 学派)
 * 升级点：冷灰 → 暖纸 / 4 级 ink → 6 级 / 真阴影 / 克制 accent / 语义色 / 热力图梯度
 * ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* === Surface (暖纸感) === */
  --surface-0: #FFFFFF;
  --surface-1: #FCFBF8;
  --surface-2: #F6F4EF;
  --surface-3: #F0EDE6;
  --surface-4: #E1DDD3;

  /* === Ink · 6 级 === */
  --ink-1:     #1A1A17;
  --ink-2:     #36342E;
  --ink-3:     #5C5850;
  --ink-4:     #8B8478;
  --ink-5:     #B8B0A3;
  --ink-inverse: #FAFAF8;

  /* === Border · 4 级 === */
  --border-1:  #EDEAE2;
  --border-2:  #DFDBD1;
  --border-3:  #C4BDAE;
  --border-focus: #1A1A17;

  /* === Accent (暖橙, 来自 logo, 仅 3 处使用) === */
  --accent:        #E8722C;
  --accent-hover:  #CF601F;
  --accent-bg:     #FDF2E8;
  --accent-border: #F4C89E;
  --accent-text:   #9A4411;
  --focus-ring:    rgba(232, 114, 44, 0.28);

  /* === Overlay === */
  --overlay:        rgba(26,26,23,.04);
  --overlay-strong: rgba(26,26,23,.08);

  /* === Semantic (muted, state 专用) === */
  --ok:     #0F7B5A;
  --warn:   #9A6A00;
  --err:    #B42318;
  --ok-bg:  #E8F4EF;
  --warn-bg:#FBF3E0;
  --err-bg: #FEE8E5;

  /* === Score Band (数据语义色) === */
  --score-good:     #0F7B5A;
  --score-good-bg:  #E8F4EF;
  --score-mid:      #9A6A00;
  --score-mid-bg:   #FBF3E0;
  --score-poor:     #B42318;
  --score-poor-bg:  #FEE8E5;

  /* === Delta (涨跌) === */
  --delta-up:   #0F7B5A;
  --delta-down: #B42318;
  --delta-flat: #8B8478;

  /* === Sentiment 三态 === */
  --sent-pos:   #0F7B5A;
  --sent-pos-bg:#E8F4EF;
  --sent-neu:   #5C5850;
  --sent-neu-bg:#F6F4EF;
  --sent-neg:   #B42318;
  --sent-neg-bg:#FEE8E5;

  /* === Heat Ramp · 10 级灰阶 (热力图专用) === */
  --heat-0: #F4F1EA;
  --heat-1: #E8E2D4;
  --heat-2: #D4CAB4;
  --heat-3: #B8AA8E;
  --heat-4: #978570;
  --heat-5: #756452;
  --heat-6: #5A4C3D;
  --heat-7: #3F3429;
  --heat-8: #2A221A;
  --heat-9: #1A1A17;

  /* === Radius (锁定 3 档) === */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-full:9999px;

  /* === Shadow (可见层次) === */
  --shadow-xs: 0 1px 2px rgba(26,26,23,.04);
  --shadow-sm: 0 1px 3px rgba(26,26,23,.06), 0 1px 2px rgba(26,26,23,.04);
  --shadow-md: 0 4px 12px rgba(26,26,23,.08), 0 2px 4px rgba(26,26,23,.04);
  --shadow-lg: 0 12px 32px rgba(26,26,23,.12), 0 4px 8px rgba(26,26,23,.06);
  --shadow-focus: 0 0 0 4px var(--focus-ring);

  /* === Type Scale === */
  --text-11: 0.6875rem;
  --text-12: 0.75rem;
  --text-13: 0.8125rem;
  --text-14: 0.875rem;
  --text-15: 0.9375rem;
  --text-16: 1rem;
  --text-18: 1.125rem;
  --text-20: 1.25rem;
  --text-24: 1.5rem;
  --text-28: 1.75rem;
  --text-32: 2rem;
  --text-40: 2.5rem;

  /* === Motion === */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    120ms;
  --dur-normal:  200ms;
  --dur-slow:    320ms;
}

/* =============================================================================
 * Body
 * ============================================================================= */
body {
  font-family: "Inter Tight", "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  color: var(--ink-3);
  background-color: var(--surface-1);
  --text-primary:   var(--ink-1) !important;
  --text-secondary: var(--ink-2) !important;
  --text-tertiary:  var(--ink-3) !important;
  --text-muted:     var(--ink-4) !important;
  --bg-page:        var(--surface-1) !important;
  --bg-surface:     var(--surface-0) !important;
  --bg-hover:       var(--surface-3) !important;
}

.font-mono, code, pre, kbd, samp, [class*="font-mono"] {
  font-family: "JetBrains Mono", "Menlo", "Monaco", monospace !important;
}

/* =============================================================================
 * Tailwind 灰阶全局覆盖 → Warm Paper
 * ============================================================================= */
.bg-gray-50,.bg-zinc-50,.bg-slate-50,.bg-neutral-50    { background-color: var(--surface-1) !important; }
.bg-gray-100,.bg-zinc-100,.bg-slate-100,.bg-neutral-100{ background-color: var(--surface-2) !important; }
.bg-gray-200,.bg-zinc-200,.bg-slate-200                { background-color: var(--surface-3) !important; }
.bg-gray-300,.bg-zinc-300                              { background-color: var(--surface-4) !important; }
.bg-gray-400,.bg-zinc-400                              { background-color: var(--ink-5)    !important; }
.bg-gray-500,.bg-zinc-500                              { background-color: var(--ink-4)    !important; }
.bg-gray-600,.bg-zinc-600                              { background-color: var(--ink-3)    !important; }
.bg-gray-700,.bg-zinc-700,.bg-slate-700                { background-color: var(--ink-2)    !important; }
.bg-gray-800,.bg-zinc-800,.bg-slate-800                { background-color: #252320         !important; }
.bg-gray-900,.bg-zinc-900,.bg-slate-900,.bg-neutral-900{ background-color: var(--ink-1)    !important; }

.text-gray-300,.text-zinc-300                          { color: var(--ink-5) !important; }
.text-gray-400,.text-zinc-400,.text-slate-400,.text-neutral-400 { color: var(--ink-4) !important; }
.text-gray-500,.text-zinc-500,.text-slate-500,.text-neutral-500 { color: var(--ink-4) !important; }
.text-gray-600,.text-zinc-600,.text-slate-600,.text-neutral-600 { color: var(--ink-3) !important; }
.text-gray-700,.text-zinc-700,.text-slate-700          { color: var(--ink-2) !important; }
.text-gray-800,.text-zinc-800                          { color: var(--ink-1) !important; }
.text-gray-900,.text-zinc-900,.text-slate-900,.text-neutral-900 { color: var(--ink-1) !important; }

.border-gray-100,.border-zinc-100,.border-gray-200,.border-zinc-200 { border-color: var(--border-1) !important; }
.border-gray-300,.border-zinc-300 { border-color: var(--border-2) !important; }
.border-gray-400,.border-zinc-400 { border-color: var(--border-3) !important; }
.border-gray-500,.border-zinc-500 { border-color: var(--border-3) !important; }

/* 语义色 tailwind 类也接管 (把红色统一到柔和版) */
.text-red-500,.text-red-600,.text-rose-500,.text-rose-600 { color: var(--err) !important; }
.bg-red-50,.bg-rose-50                                    { background-color: var(--err-bg) !important; }
.text-green-500,.text-green-600,.text-emerald-500,.text-emerald-600 { color: var(--ok) !important; }
.bg-green-50,.bg-emerald-50                               { background-color: var(--ok-bg) !important; }
.text-amber-500,.text-amber-600,.text-yellow-500,.text-yellow-600   { color: var(--warn) !important; }
.bg-amber-50,.bg-yellow-50                                { background-color: var(--warn-bg) !important; }

/* =============================================================================
 * 工具类
 * ============================================================================= */
.bg-surface-0{background:var(--surface-0);} .bg-surface-1{background:var(--surface-1);}
.bg-surface-2{background:var(--surface-2);} .bg-surface-3{background:var(--surface-3);}
.text-ink-1{color:var(--ink-1);} .text-ink-2{color:var(--ink-2);}
.text-ink-3{color:var(--ink-3);} .text-ink-4{color:var(--ink-4);} .text-ink-5{color:var(--ink-5);}
.border-b-1{border-color:var(--border-1);} .border-b-2{border-color:var(--border-2);} .border-b-3{border-color:var(--border-3);}

/* 语义色工具类 */
.score-good{color:var(--score-good);} .score-good-bg{background:var(--score-good-bg);color:var(--score-good);}
.score-mid {color:var(--score-mid);}  .score-mid-bg {background:var(--score-mid-bg); color:var(--score-mid);}
.score-poor{color:var(--score-poor);} .score-poor-bg{background:var(--score-poor-bg);color:var(--score-poor);}
.delta-up{color:var(--delta-up);} .delta-down{color:var(--delta-down);} .delta-flat{color:var(--delta-flat);}
.chip-pos{background:var(--sent-pos-bg);color:var(--sent-pos);}
.chip-neu{background:var(--sent-neu-bg);color:var(--sent-neu);}
.chip-neg{background:var(--sent-neg-bg);color:var(--sent-neg);}

/* Heat ramp utilities */
.bg-heat-0{background:var(--heat-0);color:var(--ink-2);}
.bg-heat-1{background:var(--heat-1);color:var(--ink-2);}
.bg-heat-2{background:var(--heat-2);color:var(--ink-2);}
.bg-heat-3{background:var(--heat-3);color:var(--ink-2);}
.bg-heat-4{background:var(--heat-4);color:var(--ink-inverse);}
.bg-heat-5{background:var(--heat-5);color:var(--ink-inverse);}
.bg-heat-6{background:var(--heat-6);color:var(--ink-inverse);}
.bg-heat-7{background:var(--heat-7);color:var(--ink-inverse);}
.bg-heat-8{background:var(--heat-8);color:var(--ink-inverse);}
.bg-heat-9{background:var(--heat-9);color:var(--ink-inverse);}

/* Focus-visible 统一 */
button:focus-visible, a:focus-visible, [role="button"]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}

/* 卡片 */
.card-panel {
  background-color: var(--surface-0) !important;
  border: 1px solid var(--border-2) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: box-shadow var(--dur-normal) var(--ease-out),
              border-color var(--dur-normal) var(--ease-out) !important;
}
.card-panel:hover {
  box-shadow: var(--shadow-md) !important;
  border-color: var(--border-3) !important;
}

/* 按钮 3 层 */
.btn-primary,
.bg-gray-900.hover\:bg-gray-800 {
  background-color: var(--ink-1) !important;
  color: var(--ink-inverse) !important;
  transition: background var(--dur-fast) var(--ease-out);
}
.btn-primary:hover,
.bg-gray-900.hover\:bg-gray-800:hover { background-color: #252320 !important; }
.btn-secondary {
  background-color: var(--surface-0);
  color: var(--ink-2);
  border: 1px solid var(--border-3);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  font-weight: 500;
  transition: background var(--dur-fast) var(--ease-out);
}
.btn-secondary:hover { background-color: var(--surface-3); }
.btn-ghost {
  background: transparent;
  color: var(--ink-2);
  border: none;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast) var(--ease-out);
}
.btn-ghost:hover { background-color: var(--surface-3); }

/* Accent 3 处之一: 内联文字链接 */
.link-accent, a.prose-link {
  color: var(--accent-text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.link-accent:hover, a.prose-link:hover { border-bottom-color: var(--accent-text); }

/* Accent 3 处之二: 左侧导航当前项 */
.nav-item-active {
  position: relative;
  background-color: var(--accent-bg) !important;
  color: var(--ink-1) !important;
}
.nav-item-active::before {
  content: "";
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 2px;
  background: var(--accent);
  border-radius: 2px;
}

/* Accent 3 处之三: input focus 暖橙光晕 */
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--focus-ring) !important;
}

/* tracking 收窄 */
.tracking-widest { letter-spacing: 0.05em !important; }
.card-panel .uppercase:not(.zone-title) {
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* 滚动条 */
.custom-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.custom-scroll::-webkit-scrollbar-track { background: transparent; }
.custom-scroll::-webkit-scrollbar-thumb {
  background: var(--border-3); border-radius: var(--radius-full);
}
.custom-scroll::-webkit-scrollbar-thumb:hover { background: var(--ink-4); }

::selection { background: var(--ink-1); color: var(--surface-0); }

/* =============================================================================
 * Monitoring Strip · v3 单行密集 + 底部 cost rail
 * ============================================================================= */
#monitoring-strip {
  padding: 0;
  margin-bottom: 16px;
  overflow: hidden;
}
.ms-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  flex-wrap: wrap;
}
.ms-left  { display:flex; align-items:center; gap:12px; flex:1; min-width:200px; }
.ms-dot   {
  width:8px; height:8px; border-radius:50%; flex-shrink:0;
  background: transparent;
  border: 1.5px solid var(--ink-5);
}
.ms-dot[data-state="A"] { background: transparent; border-color: var(--ink-5); }
.ms-dot[data-state="B"] {
  background: linear-gradient(90deg, var(--ink-3) 50%, transparent 50%);
  border-color: var(--ink-3);
}
.ms-dot[data-state="C"] {
  background: var(--ok); border-color: var(--ok);
  animation: ms-pulse 2s ease-in-out infinite;
}
@keyframes ms-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(15,123,90,.35); }
  50%     { box-shadow: 0 0 0 4px rgba(15,123,90,0); }
}
.ms-brand { min-width:0; flex:1; }
.ms-brand-name { font-size:15px; font-weight:600; color:var(--ink-1); line-height:1.2; }
.ms-status-line { display:flex; align-items:center; gap:6px; margin-top:3px; font-size:12px; color:var(--ink-4); }
.ms-status-label { font-weight:500; color:var(--ink-3); }
.ms-sep { color:var(--ink-5); }

/* 右侧按钮组 · 统一高度 · 视觉粘合 */
.ms-right {
  display: flex;
  align-items: stretch;
  gap: 6px;
  flex-shrink: 0;
}
.ms-right > * { height: 34px; }

.ms-icon-btn {
  width: 34px;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--border-2);
  border-radius:var(--radius-sm);
  color:var(--ink-3); cursor:pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.ms-icon-btn:hover { background:var(--surface-3); border-color:var(--border-3); color:var(--ink-1); }

.ms-btn-secondary {
  padding: 0 14px;
  background:var(--surface-0); color:var(--ink-2);
  border:1px solid var(--border-3); border-radius:var(--radius-sm);
  font-size:13px; font-weight:500; cursor:pointer; white-space:nowrap;
  transition: background var(--dur-fast) var(--ease-out);
}
.ms-btn-secondary:hover { background:var(--surface-3); }

.ms-btn-primary {
  display:inline-flex; align-items:center; gap:6px;
  padding: 0 16px;
  background:var(--ink-1); color:var(--ink-inverse); border:none;
  border-radius:var(--radius-sm); font-size:13px; font-weight:600; cursor:pointer;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out);
}
.ms-btn-primary:hover:not(:disabled) { background:#252320; }
.ms-btn-primary:disabled { opacity:.6; cursor:not-allowed; }
.ms-btn-primary.is-loading .ms-btn-icon { animation: ms-spin 1s linear infinite; }
@keyframes ms-spin { to { transform: rotate(360deg); } }

/* Cost rail · 贴在卡片底部, 视觉收束 */
.ms-cost-rail {
  border-top: 1px solid var(--border-1);
  background: var(--surface-2);
  padding: 7px 18px;
  font-size: 11px;
  color: var(--ink-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ms-cost-rail .ms-cost-left  { display: flex; align-items: center; gap: 6px; }
.ms-cost-rail .ms-cost-chip {
  display:inline-flex; align-items:center; gap:4px;
  padding: 2px 8px; border-radius: var(--radius-full);
  background: var(--surface-0); color: var(--ink-3);
  border: 1px solid var(--border-1);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
  .ms-status-line { flex-wrap:wrap; }
  .ms-right { flex-wrap: wrap; }
}

/* =============================================================================
 * Weekly Changes Card · v3
 * ============================================================================= */
.wc-card { padding: 20px 22px; }
.wc-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.wc-title    { font-size: 15px; font-weight: 700; color: var(--ink-1); letter-spacing: -0.01em; }
.wc-subtitle { font-size: 12px; color: var(--ink-4); margin-top: 3px; }
.wc-metrics  { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.wc-metric {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-sm);
}
.wc-metric-label { font-size: 11px; font-weight: 500; color: var(--ink-4); text-transform: uppercase; letter-spacing: 0.04em; }

/* Delta badge (涨跌) */
.wc-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.wc-delta-up   { color: var(--delta-up); }
.wc-delta-down { color: var(--delta-down); }
.wc-delta-flat { color: var(--delta-flat); font-size: 16px; }

/* Grid */
.wc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 32px;
}
.wc-grid-divided {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-1);
}
.wc-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.wc-section-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-4);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Count pill (+N / −N / 0) */
.wc-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  padding: 1px 6px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  border-radius: var(--radius-full);
  font-variant-numeric: tabular-nums;
}
.wc-count-up   { background: var(--sent-pos-bg); color: var(--sent-pos); }
.wc-count-down { background: var(--sent-neg-bg); color: var(--sent-neg); }
.wc-count-zero { background: var(--surface-3);   color: var(--ink-5); }

/* Chip row */
.wc-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.wc-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  line-height: 1.2;
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wc-chip-domain {
  background: var(--surface-2);
  color: var(--ink-2);
  border: 1px solid var(--border-1);
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
}
.wc-chip-engine.tone-up {
  background: var(--sent-pos-bg);
  color: var(--sent-pos);
}
.wc-chip-engine.tone-down {
  background: var(--sent-neg-bg);
  color: var(--sent-neg);
}
.wc-empty {
  font-size: 12px;
  color: var(--ink-5);
  font-style: italic;
}

@media (max-width: 720px) {
  .wc-grid { grid-template-columns: 1fr; gap: 14px; }
  .wc-metrics { width: 100%; }
  .wc-metric { flex: 1; justify-content: space-between; }
}