
:root {
  --bg:#0b100d;
  --dark:#101713;
  --card:#151d19;
  --line:#303b34;
  --muted:#a9b5ae;
  --lime:#bbec76;
  --gold:#edac61;
  --blue:#88b4ef;
  --red:#dd8477
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:var(--bg);
  color:#edf2ed;
  font:14px/1.6 Arial,"PingFang SC","Microsoft YaHei",sans-serif
}
a {
  color:inherit;
  text-decoration:none
}
/* 同主站采用品牌行加功能导航，避免跳转时改变整个页面的视觉结构。 */
.project-strip {
  min-height:32px; display:flex; justify-content:center; align-items:center;
  flex-wrap:wrap; gap:12px; padding:6px 16px; background:#10160f;
  color:#a6b2a4; font:10px/1.6 "SFMono-Regular",Consolas,monospace; letter-spacing:.8px;
  border-bottom:1px solid #283125
}
.status-dot {width:5px;height:5px;background:var(--lime);border-radius:50%}
.project-header {max-width:1440px;margin:auto;background:#0e150f}
.brand-row {min-height:102px;padding:20px 5%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand {display:flex;align-items:center;gap:12px;flex-shrink:0}
.brand strong {display:block;font-size:26px;letter-spacing:-1px;line-height:1.2}
.brand small {display:block;font-size:9px;color:var(--muted);margin-top:5px;letter-spacing:.2px}
.brand img {width:47px;height:47px}
.header-actions {display:flex;align-items:center;justify-content:flex-end;gap:14px;flex-wrap:wrap}
.platform-link {font-size:12px;color:#b6cc91}
.tag {border:1px solid var(--line);border-radius:4px;padding:7px 10px;font-size:10px;letter-spacing:.5px;color:#adb9b0;white-space:nowrap}
.project-nav {padding:0 5%;border-top:1px solid #2c3827;border-bottom:1px solid #2c3827}
.links {display:flex;align-items:stretch;gap:26px;overflow-x:auto;white-space:nowrap;scrollbar-width:thin}
.links a {display:flex;align-items:center;min-height:60px;padding:16px 0;border-bottom:2px solid transparent;color:#a6b4a8;font-size:12px;flex-shrink:0}
.links a:hover {color:#edf2ed}
.project-nav .links .active {color:var(--lime);font-weight:700;border-bottom-color:var(--lime)}
.container {
  max-width:1440px;
  padding:36px 5%;
  margin:auto
}
.intro {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  margin-bottom:24px
}
h1 {
  font-size:36px;
  letter-spacing:-1.3px;
  margin:0 0 10px;
  font-weight:700
}
.intro p {
  color:var(--muted);
  margin:0;
  max-width:725px;
  font-size:15px
}
.eyebrow {
  color:#a6b4a8;
  font-size:11px;
  font-weight:700;
  letter-spacing:2px;
  margin-bottom:6px
}
.verify {
  display:inline-block;
  white-space:nowrap;
  padding:11px 17px;
  background:#19221d;
  border:1px solid #3d4b42;
  border-radius:8px;
  font-weight:600;
  font-size:12px
}
.previewnote {
  border:1px solid #354338;
  border-radius:8px;
  background:#141f19;
  padding:10px 14px;
  display:flex;
  justify-content:space-between;
  gap:15px;
  margin-bottom:22px;
  color:#b1beb5;
  font-size:12px
}
.previewnote b {
  color:#c0e39c
}
.machine {
  background:transparent;
  color:#f3f6ee;
  padding:0
}
.kpis {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin:0 0 18px
}
.kpi,.panel {
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px
}
.kpi {
  border-top:2px solid #46564a;
  padding:18px 17px;
  min-height:109px
}
.num {
  font-size:25px;
  letter-spacing:-.8px;
  font-weight:680;
  line-height:1.25;
  font-variant-numeric:tabular-nums
}
.kpi .label {
  font-size:11px;
  color:var(--muted);
  margin-top:10px
}
.src {
  display:inline-block;
  color:#bce2bd;
  border:1px solid #3a5840;
  background:#213b2b;
  border-radius:4px;
  font-size:9px;
  line-height:1.5;
  padding:0 4px;
  margin-left:4px;
  letter-spacing:.6px;
  vertical-align:1px;
  white-space:nowrap
}
.src.math {
  color:#c8c1e4;
  background:#29273c;
  border-color:#3e3b59
}
.src.off {
  color:#bdb8ac;
  background:#343127;
  border-color:#504b3e
}
.unit {
  font-size:14px;
  color:#bac5ae;
  font-weight:400;
  letter-spacing:0;
  margin-left:4px
}
/* 暖金标记费用组，蓝灰区分活动与估算；绿色只保留在品牌及发行曲线。 */
.kpi:nth-child(2),.kpi:nth-child(6) {border-top-color:#728b62}
.kpi:nth-child(5),.kpi:nth-child(7) {border-top-color:#8e7150}
.kpi:nth-child(1),.kpi:nth-child(8) {border-top-color:#5e798a}
.grid > .panel:nth-child(3) {background:#1c1d18;border-color:#464033}
.grid > .panel:nth-child(4) {background:#151d22;border-color:#303e48}
.grid > .panel:last-child {background:#141c20;border-color:#34424b}
.grid {
  display:grid;
  grid-template-columns:7fr 5fr;
  gap:16px
}
.panel {
  padding:22px;
  min-width:0
}
.full {
  grid-column:1/-1
}
.panel h2 {
  font-size:12px;
  letter-spacing:1.4px;
  text-transform:uppercase;
  margin:0 0 10px;
  color:#dfe9d4
}
.lead {
  font-size:12px;
  color:var(--muted);
  line-height:1.7;
  margin:0 0 19px;
  min-height:38px
}
.bar {
  height:12px;
  background:#2d392b;
  border-radius:7px;
  overflow:hidden;
  display:flex
}
.bar i {
  display:block;
  height:100%;
  min-width:0
}
.legend {
  display:flex;
  flex-wrap:wrap;
  gap:9px 17px;
  font-size:11px;
  margin:13px 0;
  color:#aebb9e
}
.legend b {
  color:#ebf1e2;
  font-weight:600
}
.dot {
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:2px;
  margin-right:5px
}
.chart {
  width:100%;
  height:204px;
  display:block;
  margin-top:13px
}
.chart-labels {
  display:flex;
  justify-content:space-between;
  font-size:10px;
  color:#a0afa5
}
.chart-tools {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:20px;
  font-size:10px;
  color:#9caa91
}
.seg {
  display:flex;
  background:#0e1a12;
  border:1px solid #34432d;
  border-radius:5px;
  padding:2px;
  gap:2px
}
.seg button {
  font:inherit;
  color:#9aa88f;
  border:0;
  background:transparent;
  border-radius:3px;
  padding:4px 8px;
  cursor:pointer
}
.seg button.active {
  background:#3e5130;
  color:#dbedc6
}
.note {
  font-size:10px;
  color:#a5b3a9;
  line-height:1.7;
  margin:11px 0 0
}
.metric {
  margin:20px 0 25px
}
.metric-head {
  display:flex;
  justify-content:space-between;
  gap:14px;
  font-size:12px;
  color:#aab69f;
  margin-bottom:9px
}
.metric-head strong {
  font-weight:600;
  color:#ecf1e5
}
.track {
  height:9px;
  background:#2e392b;
  border-radius:5px;
  position:relative
}
.track em {
  display:block;
  height:9px;
  border-radius:5px;
  background:var(--lime);
  max-width:100%;
  width:0;
  transition:width .3s
}
.track .mark {
  position:absolute;
  top:-3px;
  bottom:-3px;
  width:1px;
  background:#a5b194
}
.mini-label {
  display:flex;
  justify-content:space-between;
  font-size:9px;
  color:#a5b3a9;
  margin-top:6px
}
.unavailable {
  background:repeating-linear-gradient(130deg,#2b3628,#2b3628 5px,#243021 5px,#243021 10px)
}
.rows {
  font-size:12px
}
.row {
  display:flex;
  justify-content:space-between;
  gap:15px;
  padding:10px 0;
  border-bottom:1px solid #2c3b28;
  color:#a7b49b
}
.row:last-child {
  border-bottom:0
}
.row strong {
  color:#e7eddf;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  white-space:nowrap
}
.row .na {
  color:#a5b3a9
}
.check {
  color:#b5de89;
  font-size:11px;
  padding:12px 0 0
}
.activity {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 24px
}
.activity .cell {
  padding:16px 0;
  border-top:1px solid #2d3b27
}
.activity .num {
  font-size:22px
}
.activity .label {
  color:#a5b299;
  font-size:10px;
  margin-top:8px
}
.calc {
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:42px
}
.calc label {
  display:block;
  font-size:12px;
  color:#adba9f;
  margin-bottom:10px
}
.input {
  display:flex;
  align-items:center;
  background:#0e1a12;
  border:1px solid #465d35;
  border-radius:8px;
  padding:10px 14px;
  gap:10px
}
.input:focus-within {
  border-color:var(--lime)
}
input {
  background:transparent;
  border:0;
  color:#f2f6eb;
  font:500 28px -apple-system,BlinkMacSystemFont,sans-serif;
  width:100%;
  outline:0
}
input::placeholder {
  color:#65765a
}
.input span {
  color:var(--lime);
  font-size:13px
}
.presets {
  display:flex;
  gap:8px;
  margin:12px 0
}
.presets button {
  border:1px solid #3a4d31;
  border-radius:5px;
  color:#c1d3ad;
  background:#22321c;
  padding:6px 15px;
  cursor:pointer
}
.presets button:hover {
  border-color:var(--lime)
}
.calc .lead {
  margin-top:17px
}
.calc .notice {
  color:#d2b87e;
  font-size:11px;
  min-height:20px
}
.positive {
  color:var(--lime)!important
}
.sources {
  font-size:10px;
  line-height:1.9;
  color:#a5b3a9;
  margin:21px 0 0
}
.sources a {
  color:#c1d8a4;
  text-decoration:underline
}
.footer {
  display:flex;
  justify-content:space-between;
  font-size:11px;
  color:#a5b3a9;
  margin:24px 0 0;
  gap:20px
}
.anchor {
  color:#c6d6b5
}
.mini-title {
  font-size:11px;
  color:#738566;
  text-transform:uppercase;
  letter-spacing:1px;
  margin:5px 0 10px
}
@media(max-width:950px) {
  .links {
  gap:14px
}
.container {
  padding:28px 16px
}
.machine {
  padding:18px
}
.grid {
  grid-template-columns:1fr
}
.full {
  grid-column:auto
}
.kpis {
  grid-template-columns:repeat(4,1fr)
}
.num {
  font-size:21px
}
.calc {
  gap:24px
}
.intro p {
  max-width:580px
}
h1 {
  font-size:30px
}

}
@media(max-width:620px) {
  header {
  height:64px
}
.intro {
  display:block
}
.verify {
  margin-top:16px
}
.previewnote {
  display:block;
  font-size:10px
}
.previewnote span {
  display:block;
  margin-top:4px
}
.kpis {
  grid-template-columns:1fr 1fr;
  gap:9px
}
.machine {
  padding:12px;
  border-radius:15px
}
.kpi {
  padding:14px 12px;
  min-height:104px
}
.panel {
  padding:18px 15px
}
.calc {
  grid-template-columns:1fr;
  gap:10px
}
.footer {
  display:block
}
.row {
  font-size:11px
}
.num {
  font-size:23px
}
.lead {
  min-height:0
}
.chart {
  height:180px
}
.previewnote {
  margin-bottom:14px
}
.chart-tools {
  gap:5px
}
.legend {
  font-size:10px
}

}


/* 刷新和键盘焦点单独可见；数据过期保留版面，避免数值闪空。 */
.refresh {
  border:1px solid #485e3b;
  background:#202c1d;
  border-radius:8px;
  padding:10px 16px;
  cursor:pointer;
  white-space:nowrap;
  font:inherit;
  font-weight:600;
  color:#d8eac6
}
.refresh:disabled {
  opacity:.6;
  cursor:wait
}
.previewnote p {
  margin:6px 0;
  line-height:1.5
}
.previewnote[data-state=stale],.previewnote[data-state=unavailable] {
  background:#292217;
  border-color:#927143;
  color:#e5c99f
}
a:focus-visible,button:focus-visible,input:focus-visible {
  outline:3px solid #8dcf48;
  outline-offset:4px
}
.input:focus-within {
  border-color:var(--lime)
}
.row strong {
  overflow-wrap:anywhere;
  text-align:right
}
.cell,.panel,.kpi {
  min-width:0
}
.num {
  overflow-wrap:anywhere
}
.track em {
  max-width:100%
}
.sources {
  font-size:12px
}
.note {
  font-size:12px
}
.links {
  overflow-x:auto;
  white-space:nowrap
}
.chart-tools {
  flex-wrap:wrap
}
.seg button,.presets button {
  min-height:36px
}
button[aria-pressed=true] {
  border-color:var(--lime)
}

@media(max-width:950px) {
  header {
  height:auto
}
.links {
  order:3;
  width:100%;
  padding-bottom:8px
}

}

@media(max-width:620px) {
  header {
  height:auto
}
.links {
  gap:20px
}
.refresh {
  margin-top:12px
}
.row {
  font-size:12px;
  gap:14px
}
.row span {
  max-width:57%
}
.chart {
  height:auto
}
.activity {
  gap:12px
}
.num {
  font-size:21px
}
.previewnote {
  font-size:12px
}
.legend {
  line-height:1.8
}
.footer span {
  display:block;
  margin-top:8px
}

}

@media(prefers-reduced-motion:reduce) {
  * {
  scroll-behavior:auto!important;
  transition:none!important
}

}

/* 窄屏仍展示完整导航，横向滚动限定在导航本身；不隐藏兑换等主要入口。 */
@media(max-width:950px) {
  .brand-row {padding:20px 5%;align-items:flex-start}
  .header-actions {gap:8px;max-width:50%}
  .project-nav {padding:0 5%}
  .project-nav .links {width:100%;padding:0;gap:22px}
  .project-nav .links a {display:flex;min-height:54px}
  .machine {padding:0}
}
@media(max-width:620px) {
  .project-strip {font-size:9px;gap:7px;letter-spacing:0}
  .brand-row {padding:18px 16px;gap:12px;flex-wrap:wrap}
  .brand strong {font-size:23px}
  .brand img {width:40px;height:40px}
  .header-actions {max-width:none;width:100%;justify-content:space-between}
  .header-actions .tag {display:block;font-size:9px;padding:5px 7px}
  .header-actions .network-tag {display:none}
  .platform-link {font-size:11px}
  .project-nav {padding:0 16px}
  .project-nav .links .active {color:var(--lime);border-bottom-color:var(--lime)}
  .machine {padding:0;border-radius:0}
}
/* 语言下拉复用实例站的尺寸、配色及焦点样式，选择顺序也保持一致。 */
.language-select {
  font-family:inherit;font-size:12px;line-height:1.4;color:#dce8d4;
  background:transparent;border:1px solid #53674c;border-radius:6px;
  padding:7px 8px;max-width:118px;cursor:pointer;flex:none
}
.language-select:hover {background:#1d2a1d;border-color:#8a9d7c}
.language-select:focus-visible {outline:2px solid #b1eb61;outline-offset:3px}
.language-select option {background:#122319;color:#dce8d4}
