:root{
  --bg:#0a0a0a; --text:#f5f5f7; --text2:#a1a1a6; --dim:#6e6e73; --dim2:#48484a;
  --accent:#0a84ff; --grid:rgba(255,255,255,0.04);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",system-ui,sans-serif;
  --ease:cubic-bezier(0.23,1,0.32,1);
}
[data-theme="light"]{
  --bg:#fafafa; --text:#1c1c1e; --text2:#6e6e73; --dim:#8e8e93; --dim2:#aeaeb2;
  --accent:#007aff; --grid:rgba(0,0,0,0.04);
}
*{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;-webkit-font-smoothing:antialiased}
body{
  font-family:var(--font);background:var(--bg);color:var(--text);
  min-height:100vh;
  padding:0 24px;
  font-size:15px;line-height:1.6;letter-spacing:-0.01em;
  transition:background-color 400ms var(--ease),color 400ms var(--ease);
}
.wrap{
  max-width:1200px;width:100%;
  min-height:100vh;
  margin:0 auto;
  display:flex;flex-direction:column;
  padding:clamp(20px, 4vh, 60px) 0 clamp(30px, 5vh, 80px);
}
.wrap > .discount{
  flex:1;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(20px, 4vh, 60px) 0;
}
.wrap > .main-grid{
  flex:0 0 auto;
}

/* ===== 桌面端左右布局 ===== */
@media (min-width: 968px){
  .main-grid{
    display:grid;grid-template-columns:1fr 1fr;gap:clamp(60px, 8vw, 120px);
    align-items:stretch;
  }
  .left-col{
    display:flex;flex-direction:column;justify-content:center;
    padding-top:0;
  }
  .right-col{
    display:flex;flex-direction:column;
  }
  .chart-section{
    flex:1;display:flex;flex-direction:column;
  }
  .chart-wrap{
    flex:1;min-height:280px;
  }
}

/* ===== 主题切换 — 极简小圆点 ===== */
.theme-toggle{
  position:fixed;top:24px;right:24px;width:24px;height:24px;
  border-radius:50%;border:1px solid var(--dim2);
  background:transparent;cursor:pointer;outline:none;
  transition:border-color 300ms var(--ease),transform 200ms var(--ease);
  z-index:10;
}
.theme-toggle:hover{border-color:var(--dim)}
.theme-toggle:active{transform:scale(0.9)}

/* ===== 标题 ===== */
.header{text-align:center;margin-bottom:80px}
.header h1{
  font-size:0.9rem;font-weight:400;color:var(--dim);
  letter-spacing:0.02em;margin-bottom:4px;
}
.header .sub{
  font-size:0.75rem;color:var(--dim2);letter-spacing:0.01em;
}

/* ===== 折扣率 — 主视觉 ===== */
.discount{
  text-align:center;
  flex:1;
  display:flex;flex-direction:column;justify-content:center;
  min-height:40vh;
}
.discount .value{
  font-size:clamp(3.5rem, 9vw, 7rem);
  font-weight:300;letter-spacing:-0.04em;
  font-variant-numeric:tabular-nums;line-height:1;
  color:var(--accent);margin-bottom:clamp(12px, 2vh, 24px);
  transition:color 400ms var(--ease);
}
.discount .label{
  font-size:0.8rem;color:var(--dim);letter-spacing:0.02em;
}
.cookie-warn{
  cursor:help;margin-left:6px;font-size:0.8rem;color:#ff9f0a;
  -webkit-text-fill-color:#ff9f0a;
}

/* ===== 平台价格 — 单行信息 ===== */
.prices{
  margin-bottom:clamp(40px, 6vh, 75px);text-align:center;
}
.price-row{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:12px 0;border-bottom:1px solid var(--grid);
  font-size:0.9rem;
}
.price-row:last-child{border-bottom:none}
.price-row .name{color:var(--dim);font-size:0.85rem}
.price-row .value{
  font-variant-numeric:tabular-nums;color:var(--text);
  font-weight:500;
}
.price-row .meta{
  font-size:0.75rem;color:var(--dim2);margin-left:12px;
  font-variant-numeric:tabular-nums;
}

/* ===== 图表 ===== */
.chart-section{}
.chart-wrap{height:355px;position:relative}

/* ===== 图表标题 + 悬浮范围切换 ===== */
.chart-header{
  position:relative;margin-bottom:16px;
  display:flex;justify-content:space-between;align-items:center;
}
.chart-title{
  font-size:0.75rem;color:var(--dim);letter-spacing:0.01em;
}
.range-links{
  display:flex;gap:16px;
  opacity:0;visibility:hidden;
  transition:opacity 300ms var(--ease),visibility 0s 300ms;
}
.chart-header:hover .range-links{
  opacity:1;visibility:visible;
  transition:opacity 300ms var(--ease),visibility 0s 0s;
}
.range-links button{
  background:none;border:none;color:var(--dim);
  font-size:0.75rem;font-family:var(--font);cursor:pointer;
  letter-spacing:0.01em;padding:4px 0;
  border-bottom:1px solid transparent;
  transition:color 300ms var(--ease),border-color 300ms var(--ease);
}
.range-links button.active{
  color:var(--text);border-bottom-color:var(--accent);
}
.range-links button:hover{color:var(--text)}

/* ===== 计算器 ===== */
.calc{}

.calc-inputs{
  display:flex;gap:20px;margin-bottom:24px;align-items:flex-start;
}
.calc-field{flex:1;min-width:0}
.calc-field:last-child{flex:0 0 auto;min-width:120px}
.calc-field label{
  display:block;font-size:0.75rem;color:var(--dim);
  margin-bottom:8px;letter-spacing:0.01em;
}
.calc-field input{
  width:100%;background:transparent;
  border:none;border-bottom:1px solid var(--dim2);
  color:var(--text);padding:8px 0;
  font-size:1.1rem;font-family:var(--font);
  font-variant-numeric:tabular-nums;outline:none;
  transition:border-color 300ms var(--ease);
}
.calc-hint{
  font-size:0.7rem;color:var(--dim2);margin-top:6px;
  font-variant-numeric:tabular-nums;line-height:1.4;
}
.calc-field input:focus{border-bottom-color:var(--accent)}

.calc-field .rate{
  font-size:1.1rem;font-weight:400;letter-spacing:-0.02em;
  font-variant-numeric:tabular-nums;color:var(--text);
  padding:8px 0;text-align:right;line-height:1.5;
}
.calc-result .formula{
  font-size:0.75rem;color:var(--dim2);
  font-variant-numeric:tabular-nums;
}

/* ===== 页脚 ===== */
.footer{
  text-align:center;font-size:0.7rem;color:var(--dim2);
  letter-spacing:0.02em;
}

/* ===== 动画 ===== */
@keyframes countUp{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}
.discount .value{animation:countUp 400ms var(--ease)}

/* ===== 响应式 ===== */
@media (max-width:640px){
  body{padding:clamp(30px, 5vh, 60px) 20px clamp(40px, 8vh, 80px)}
  .discount .value{font-size:clamp(2.8rem, 10vw, 4rem)}
  .calc-inputs{flex-direction:column;gap:24px}
}

/* ===== 减少动效 ===== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    transition-duration:0.01ms !important;
  }
}