.chart{margin:28px 0;padding:20px 24px;background:var(--surface-1);border:1px solid var(--border-card);border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,.04)}
  [data-theme="dark"] .chart{background:#1a1a24;border-color:#2a2a3a}
  .chart-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:12px;border-bottom:1px dashed var(--border-card)}
  .chart-title{font-size:1em;font-weight:700;color:var(--text)}
  .chart-type{font-size:.7em;padding:2px 10px;border-radius:10px;background:rgba(59,130,246,.12);color:#3b82f6;text-transform:uppercase;letter-spacing:.5px;font-weight:600}
  .chart-error{color:#ef4444;font-size:.9em;background:rgba(239,68,68,.06);border-color:rgba(239,68,68,.3)}
  /* bar */
  .chart-bars{display:flex;flex-direction:column;gap:12px}
  .chart-row{display:grid;grid-template-columns:100px 1fr 90px;align-items:center;gap:12px}
  .chart-label{font-size:.88em;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .chart-track{height:22px;background:var(--surface-2);border-radius:6px;overflow:hidden;position:relative}
  .chart-fill{height:100%;border-radius:6px;transition:width .6s cubic-bezier(.4,0,.2,1);min-width:2px}
  .chart-val{font-size:.85em;font-weight:700;color:var(--text);text-align:right;font-variant-numeric:tabular-nums}
  .chart-unit{font-size:.75em;color:var(--text-muted);font-weight:400;margin-left:2px}
  /* column */
  .chart-columns{display:flex;align-items:flex-end;gap:14px;height:200px;padding:10px 4px 0;border-bottom:1px solid var(--border-card)}
  .chart-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;min-width:0}
  .chart-col-val{font-size:.78em;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;text-align:center}
  .chart-col-bar{width:100%;max-width:48px;border-radius:6px 6px 0 0;min-height:2px;transition:height .6s cubic-bezier(.4,0,.2,1)}
  .chart-col-labels{display:flex;gap:14px;margin-top:8px}
  .chart-col-labels>.chart-col-label{flex:1;text-align:center;font-size:.72em;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* pie */
  .chart-pie-wrap{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
  .chart-pie{width:180px;height:180px;border-radius:50%;flex-shrink:0;position:relative;display:flex;align-items:center;justify-content:center}
  .chart-pie::before{content:"";position:absolute;inset:24px;background:var(--surface-1);border-radius:50%;z-index:1}
  [data-theme="dark"] .chart-pie::before{background:#1a1a24}
  .chart-pie-center{position:relative;z-index:2;text-align:center;line-height:1.2}
  .chart-pie-total{font-size:1.5em;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums}
  .chart-pie-unit{font-size:.7em;color:var(--text-muted);margin-top:2px}
  .chart-legend{flex:1;min-width:180px;display:flex;flex-direction:column;gap:8px}
  .chart-legend-item{display:flex;align-items:center;gap:10px;font-size:.88em}
  .chart-legend-dot{width:10px;height:10px;border-radius:3px;flex-shrink:0}
  .chart-legend-label{color:var(--text);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .chart-legend-val{font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
  /* flow */
  .chart-flow{display:flex;align-items:stretch;gap:4px;flex-wrap:wrap;justify-content:center;padding:8px 0}
  .chart-flow-node{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 16px;border:2px solid;border-radius:10px;background:var(--bg-card);min-width:90px;flex:0 0 auto}
  .chart-flow-num{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.78em;font-weight:700}
  .chart-flow-label{font-size:.82em;font-weight:600;text-align:center;line-height:1.3}
  .chart-flow-sep{display:flex;align-items:center;color:var(--text-muted);font-size:1.2em;padding:0 2px}
  /* mobile */
  @media(max-width:768px){main{padding:20px 14px 40px}.article-header{padding:30px 0 22px;margin-bottom:24px}.article-header h1{font-size:1.4rem}.article-body{font-size:.95rem}.article-body h2{font-size:1.25rem}.article-body h3{font-size:1.05rem}.article-body table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;font-size:.8rem}.article-body th,.article-body td{padding:8px 10px;white-space:nowrap}.chart{padding:16px 18px;margin:20px 0}.chart-row{grid-template-columns:80px 1fr 80px;gap:8px}.chart-label{font-size:.8em}.chart-pie-wrap{flex-direction:column;align-items:flex-start}.chart-pie{width:150px;height:150px}.chart-flow-node{padding:8px 12px;min-width:70px}.chart-flow-label{font-size:.75em}.chart-flow-sep{font-size:1em}}
  @media(max-width:480px){main{padding:16px 10px 32px}.article-header{padding:28px 0 20px}.article-header h1{font-size:1.2rem}.article-body{font-size:.88rem;line-height:1.7}.article-body table{font-size:.72rem}.back-link{font-size:.8rem}.article-body pre{font-size:.75rem;padding:12px 14px}.chart{padding:12px 14px;margin:16px 0}.chart-row{grid-template-columns:60px 1fr 60px;gap:6px}.chart-label{font-size:.72em}.chart-val{font-size:.75em}.chart-pie{width:130px;height:130px}.chart-pie::before{inset:20px}.chart-pie-total{font-size:1.2em}.chart-col-val{font-size:.7em}}
</style>