:root{
    --bg:#0b1220; --card:#121a2b; --muted:#7f8ea3; --text:#e6eefc; --brand:#3aa3ff; --accent:#00d3a7; --danger:#ff6b6b; --disabled:#4f5f79;
    --orange:#ffb86b; --green:#3ed598; --hint:#9fb0c9;
    --input-bg:#0d1526; --input-bd:#233258; --input-focus:#3aa3ff;
    --input-font:16px; --input-font-lg:18px;
  }
  *{box-sizing:border-box}
  body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,'PingFang SC','Microsoft YaHei',sans-serif;background:linear-gradient(180deg,#0b1220,#0e1526);color:var(--text)}
  header{padding:20px 16px;text-align:center}
  h1{margin:0;font-size:22px}
  main{max-width:1180px;margin:0 auto;padding:10px 16px 100px}

  .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
  .card{background:var(--card);border:1px solid #1c2742;border-radius:12px;padding:16px}
  .span-12{grid-column:span 12}
  .span-8,.span-6,.span-4,.span-3{grid-column:span 12}
  @media(min-width:960px){.span-8{grid-column:span 8}.span-6{grid-column:span 6}.span-4{grid-column:span 4}.span-3{grid-column:span 3}}

  label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}
  input,select,button{padding:12px 14px;border:1px solid var(--input-bd);background:var(--input-bg);color:var(--text);border-radius:10px}
  input,select{width:100%}
  input,select{font-size:var(--input-font)}
  input:focus,select:focus{outline:none;border-color:var(--input-focus);box-shadow:0 0 0 3px rgba(58,163,255,.15)}
  .num-input{font-size:var(--input-font-lg);text-align:right;font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1}
  .num-input::placeholder{color:#5b6a86}
  .field{display:flex;flex-direction:column;gap:4px}
  .valueHint{font-size:11px;color:var(--hint);min-height:14px}

  /* 禁用态 */
  input:disabled,select:disabled,button:disabled{opacity:.55;cursor:not-allowed;filter:grayscale(.15)}
  .field.disabled{opacity:.6}
  .btn:disabled{background:#1b2438;border-color:#2b3958;color:#6b7a95}

  .muted{color:var(--muted)}
  .kpi{display:flex;flex-direction:column;gap:6px}
  .kpi .v{font-weight:700;font-size:22px}
  .kpi .l{font-size:12px;color:var(--muted)}
  .tag{display:inline-block;border:1px solid #263457;border-radius:999px;padding:4px 8px;font-size:11px;color:#9fb0c9;margin-top:4px;white-space:normal;line-height:1.35}

  /* 按钮美化 */
  .btn{display:inline-flex;align-items:center;gap:8px;border:none;padding:10px 16px;border-radius:999px;font-weight:700;letter-spacing:.2px;transition:all .14s ease;will-change:transform,box-shadow}
  .btn.fancy{background:linear-gradient(180deg,#ffe978,#ffcc00);color:#2d1e00;border:1px solid #d1a300;box-shadow:0 6px 16px rgba(255,204,0,.22), inset 0 1px 0 rgba(255,255,255,.25);margin:8px 0 8px 0}
  .btn.fancy:hover{transform:translateY(-1px);filter:brightness(1.02)}
  .btn.fancy:active{transform:translateY(0);box-shadow:0 3px 10px rgba(255,204,0,.18)}
  .btn.ocean{background:linear-gradient(180deg,#60b6ff,#3aa3ff);color:#001428;border:1px solid #2d7bc8;box-shadow:0 6px 16px rgba(58,163,255,.22), inset 0 1px 0 rgba(255,255,255,.18)}
  .btn.ocean:hover{transform:translateY(-1px);filter:brightness(1.02)}
  .btn.ocean:active{transform:translateY(0);box-shadow:0 3px 10px rgba(58,163,255,.18)}
  .btn.wire{background:#121b2f;color:#d7e6ff;border:1px solid #2b3e66}
  .btn.wire:hover{border-color:#3aa3ff;color:#fff}

  .note{font-size:12px;color:var(--muted)}
  .flex{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
  .pill{display:flex;gap:8px;align-items:center;border:1px solid #263457;padding:6px 10px;border-radius:999px;color:var(--muted);background:#0d1526}
  .pill select{min-width:260px;max-width:100%}
  .section-title{margin:8px 0 8px 0;font-size:16px}
  .hint{font-size:11px;color:#9fb0c9}

  /* Chart canvas and tooltip */
  .chart-wrap{position:relative}
  canvas{width:100%;height:300px;background:#0d1526;border-radius:10px;border:1px solid #233258;display:block}
  .chart-tooltip{position:absolute;pointer-events:none;background:#0b1220;border:1px solid #33415f;border-radius:10px;padding:8px 10px;color:#dbe8ff;box-shadow:0 6px 18px rgba(0,0,0,.35);font-size:12px;line-height:1.45;display:none;max-width:280px}
  .tt-title{font-weight:700;margin-bottom:4px;color:#fff}
  .tt-row{display:flex;align-items:center;gap:8px;margin:2px 0}
  .sw{width:14px;height:3px;border-radius:2px}
  .chart-badges{position:absolute;top:10px;right:10px;display:flex;gap:8px;flex-wrap:wrap;}
  .badge{display:inline-flex;align-items:center;gap:6px;background:rgba(14,22,38,.8);border:1px solid #263457;color:#cfe2ff;border-radius:999px;padding:6px 9px;font-size:11px}
  .badge .sw{width:16px;height:3px}

  .auto-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}

  /* Tip card & overlay (修复按钮变静态的问题) */
  .tip-card{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:linear-gradient(180deg,#121a2b,#0f1628);border:1px solid #223150;border-radius:14px;padding:14px 16px}
  .tip-card .left{display:flex;align-items:center;gap:10px}
  .tip-cup{font-size:20px}
  .tip-btn{background:#ffdd00;color:#3a2b00;border:none;border-radius:999px;padding:10px 14px;font-weight:800;display:inline-flex;align-items:center;gap:8px}
  .tip-btn:hover{filter:brightness(.95)}
  .overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:9999}
  .overlay.open{display:flex}
  .tip-modal{background:#0b1220;border:1px solid #33415f;border-radius:12px;padding:10px;max-width:min(92vw,520px);max-height:min(92vh,720px);display:flex;flex-direction:column;gap:8px;align-items:center}
  .tip-modal img{max-width:100%;height:auto;border-radius:10px;display:block}
  .tip-caption{font-size:12px;color:#c9d6ef}
  .tip-title { font-weight: 800; font-size: 16px; margin-bottom: 6px; }
  .tip-p { margin: 6px 0; }
  .tip-list { margin: 6px 0 0 1.2em; padding: 0; font-size:12px}
  .tip-list li { margin: 4px 0; font-size:12px}

  .chart-intro {
  margin-top: 20px;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  line-height: 1.6;
  font-size: 0.9em; /* 整体字体缩小一点 */
}

.chart-intro h3 {
  font-size: 1.1em;  /* 小标题略大 */
  margin-bottom: 0.5em;
}

.chart-intro h4 {
  font-size: 1em;
  margin-top: 1em;
}