:root{
  --pg-green:#0B7A46; --pg-green-600:#0FA05D; --pg-ink:#0f172a; --pg-gray:#f3f4f6;
  --ring:#2B8CFF; --shadow:0 10px 24px rgba(2,6,23,.08), 0 2px 6px rgba(2,6,23,.04);
}
*{ box-sizing:border-box }
html, body { height:100% }
.card{ background:#fff; border-radius:16px; box-shadow:var(--shadow) }
.legend{ background:#fff; border-radius:14px; padding:12px; box-shadow:var(--shadow) }
.skel{ background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0 37%,#f1f5f9 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:10px }
@keyframes sk{ 0%{background-position:100% 50%} 100%{background-position:0 50%} }
.toast{ position:fixed; right:16px; bottom:16px; z-index:2000 }
.toast>div{ box-shadow:var(--shadow) }
.ring:focus-visible{ outline:3px solid var(--ring); outline-offset:2px }