/* マイクラ経済企画 の配色。金色を主に、値動きは緑と赤 */
:root {
  --bg: #11141a; --panel: #1f2531; --line: #3b4560; --shade: #0b0d12;
  --accent: #ffd34d; --mark: #e08cff; --up: #8cf5a8; --down: #ff9a9a; --faint: #a8b0c2;
}
.plan { gap:22px; align-items:stretch; }
.ec-money { flex:0 0 330px; display:flex; flex-direction:column; justify-content:center; gap:6px; min-width:0; }
.ec-label { font-size:26px; color:var(--faint); }
.ec-big { font-size:64px; line-height:1.05; color:var(--accent); white-space:nowrap; overflow:hidden; font-variant-numeric:tabular-nums; }
.ec-bar { height:16px; background:var(--shade); border-radius:6px; overflow:hidden; }
.ec-bar i { display:block; height:100%; width:0; background:var(--accent); transition:width .6s; }
.ec-goal { font-size:24px; color:var(--faint); white-space:nowrap; overflow:hidden; }
.ec-goal b { color:#fff; }
.ec-chart { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:4px; }
.ec-chart-head { display:flex; justify-content:space-between; gap:12px; font-size:28px; white-space:nowrap; }
.ec-chart-head span:first-child { overflow:hidden; text-overflow:ellipsis; min-width:0; }
.ec-chart-head span:last-child { flex:none; }
.ec-svg { flex:1; min-height:0; }
.ec-svg svg { width:100%; height:100%; display:block; }
.ec-line { fill:none; stroke:var(--accent); stroke-width:4; vector-effect:non-scaling-stroke; }
.ec-dot { fill:var(--accent); }
.ec-wait { font-size:24px; color:var(--faint); padding-top:30px; }
.ec-side { flex:0 0 250px; display:flex; flex-direction:column; justify-content:center; gap:4px; font-size:28px; white-space:nowrap; }
.ec-side b { color:var(--accent); }
.up { color:var(--up); }
.down { color:var(--down); margin-left:8px; }