/* macro.css — 宏观经济水位仪表盘 */
.macro-hero{display:flex;align-items:center;gap:34px;flex-wrap:wrap;justify-content:space-between;
  background:linear-gradient(135deg,#fffdf8 0%,#eef4f7 100%);
  border:1px solid var(--line);border-radius:20px;padding:28px 34px;box-shadow:var(--sh-md);
  margin-bottom:22px;position:relative;overflow:hidden}
.macro-hero::after{content:"";position:absolute;right:-50px;bottom:-50px;width:220px;height:220px;
  background:radial-gradient(circle,rgba(47,126,216,.10),transparent 70%);pointer-events:none}
.macro-hero-left{flex:1;min-width:280px}
.macro-hero-kicker{font-size:11px;letter-spacing:3px;color:var(--gold-d);font-weight:600;margin-bottom:8px}
.macro-hero h1{font-family:var(--serif);font-size:32px;margin:0 0 8px;letter-spacing:.5px;color:var(--ink)}
.macro-hero-sub{color:var(--ink-soft);font-size:14px;margin:0 0 12px;line-height:1.7}
.macro-tags{display:flex;gap:8px;flex-wrap:wrap}
.macro-tags .mt{font-size:12px;font-weight:600;padding:4px 11px;border-radius:20px;
  background:var(--bg-soft);border:1px solid var(--line);color:var(--ink-soft)}

/* ===== 水位尺（水塔）===== */
.water-wrap{display:flex;flex-direction:column;align-items:center;gap:10px;flex:none}
.water-tank{position:relative;width:158px;height:208px;border-radius:20px;
  background:linear-gradient(180deg,#eef3f6,#e3ebf0);border:2px solid #cfd9e0;overflow:hidden;
  box-shadow:inset 0 2px 8px rgba(70,52,20,.08), var(--sh-sm)}
.water-fill{position:absolute;left:0;right:0;bottom:0;height:71%;
  background:linear-gradient(180deg,#5fb0d8,#2f7ed8);transition:height .9s cubic-bezier(.2,.8,.2,1)}
.water-fill.tone-warn{background:linear-gradient(180deg,#e6b85a,#d99a2c)}
.water-fill.tone-bad{background:linear-gradient(180deg,#e08a7e,#cf5141)}
.water-wave{position:absolute;left:-50%;top:-12px;width:200%;height:24px;
  background:radial-gradient(circle at 50% 12px, rgba(255,255,255,.5) 0 11px, transparent 12px) repeat-x;
  background-size:34px 24px;animation:wave 3.5s linear infinite;opacity:.55}
@keyframes wave{from{transform:translateX(0)}to{transform:translateX(34px)}}
.water-num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.28);z-index:2;pointer-events:none}
.water-num b{font-family:var(--serif);font-size:46px;font-weight:700;line-height:1}
.water-num span{font-size:13px;opacity:.92;margin-top:2px}
.water-label{font-size:13px;color:var(--muted)}
.water-label b{color:var(--gold-d);font-family:var(--serif);font-size:15px}

/* ===== 指标卡片网格 ===== */
.macro-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:16px}
.mcard{position:relative;display:flex;flex-direction:column;gap:10px;
  background:linear-gradient(160deg,var(--card) 0%,var(--card2) 100%);
  border:1px solid var(--line);border-radius:16px;padding:16px 17px 15px;overflow:hidden;
  box-shadow:var(--sh-md);border-top:4px solid var(--st)}
.mcard.good{--st:var(--green)}
.mcard.warn{--st:var(--amber)}
.mcard.bad{--st:var(--red)}
.mcard-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.mcard-name{font-family:var(--serif);font-size:17px;font-weight:700;line-height:1.25}
.mcard-cover{font-size:11px;font-weight:600;padding:3px 10px;border-radius:20px;white-space:nowrap;
  background:color-mix(in srgb,var(--st) 14%,transparent);color:var(--st)}
.mcard-val{font-family:var(--serif);font-size:30px;font-weight:700;line-height:1;color:var(--ink)}
.mcard-val small{font-size:12px;color:var(--muted);font-weight:500;font-family:var(--sans);margin-left:4px}
.mcard-sub{font-size:12px;color:var(--muted);margin-top:-2px}
.mcard-badge{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;
  padding:4px 11px;border-radius:20px;align-self:flex-start}
.mcard-badge.good{background:rgba(90,168,106,.14);color:var(--green)}
.mcard-badge.warn{background:rgba(224,161,58,.16);color:var(--amber)}
.mcard-badge.bad{background:rgba(212,88,74,.14);color:var(--red)}
.mcard-badge .dot{width:8px;height:8px;border-radius:50%;background:currentColor}
.mcard-spark{width:100%;height:74px;margin:2px 0 1px}
.mcard-note{font-size:11.5px;color:var(--ink-soft);line-height:1.55;
  background:var(--bg-soft);border-radius:9px;padding:8px 10px}

.macro-foot{margin-top:22px;font-size:12px;color:var(--muted);line-height:1.7;
  background:var(--card2);border:1px solid var(--line-soft);border-left:3px solid var(--gold);
  border-radius:8px;padding:11px 15px}
.macro-foot b{color:var(--ink-soft)}

@media (max-width:640px){
  .macro-hero{padding:22px;gap:20px}
  .macro-hero h1{font-size:26px}
  .macro-hero-left{order:2}
  .water-wrap{order:1;margin:0 auto}
  .water-tank{width:140px;height:184px}
  .mcard-val{font-size:26px}
}