.vg-frontend {
  --vg-bg: #f4f7fb;
  --vg-card: #ffffff;
  --vg-border: #dfe6ee;
  --vg-text: #17324f;
  --vg-muted: #61758c;
  --vg-accent: #20456b;
  background: var(--vg-bg);
  color: var(--vg-text);
  border-radius: 24px;
  padding: 24px;
  font-family: Arial, sans-serif;
}
.vg-hero, .vg-toolbar, .vg-layout { display: grid; gap: 16px; }
.vg-hero { grid-template-columns: 1fr auto; align-items: start; margin-bottom: 16px; }
.vg-hero h2 { margin: 0 0 8px; }
.vg-legend { color: var(--vg-muted); font-size: 14px; }
.vg-legend i { width: 10px; height: 10px; display: inline-block; border-radius: 999px; background: var(--vg-accent); margin-right: 8px; }
.vg-toolbar { grid-template-columns: 1fr 220px; margin-bottom: 16px; }
.vg-toolbar input, .vg-toolbar select {
  border: 1px solid var(--vg-border);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 16px;
  background: #fff;
}
.vg-layout { grid-template-columns: 320px 1fr; margin-bottom: 16px; }
.vg-layout-bottom { grid-template-columns: 1.2fr 0.8fr; }
.vg-panel {
  background: var(--vg-card);
  border: 1px solid var(--vg-border);
  border-radius: 20px;
  padding: 18px;
  box-shadow: 0 8px 24px rgba(16, 38, 61, 0.05);
}
.vg-panel h3 { margin-top: 0; }
.vg-list { display: grid; gap: 10px; max-height: var(--vg-height, 680px); overflow: auto; }
.vg-list-item {
  border: 1px solid var(--vg-border);
  background: #fbfdff;
  border-radius: 14px;
  padding: 12px 14px;
  text-align: left;
  cursor: pointer;
}
.vg-list-item strong { display: block; color: var(--vg-text); }
.vg-list-item span { display: block; color: var(--vg-muted); font-size: 13px; margin-top: 4px; }
.vg-tree { min-height: var(--vg-height, 680px); overflow: auto; }
.vg-map { min-height: 420px; border-radius: 16px; overflow: hidden; }
.vg-detail .vg-person-card h4 { margin: 0 0 6px; }
.vg-muted { color: var(--vg-muted); }
.vg-notes { white-space: pre-wrap; }
@media (max-width: 900px) {
  .vg-hero, .vg-toolbar, .vg-layout, .vg-layout-bottom { grid-template-columns: 1fr; }
}