/* UNARA Vault — Layer 1. Charcoal + emerald/teal. No page-owned blue/cyan/navy/purple. */
:root {
  --vault-bg: #0b0d0c;
  --vault-bg-2: #111413;
  --vault-panel: #151917;
  --vault-line: #2a332f;
  --vault-text: #e8eee9;
  --vault-muted: #8a968e;
  --vault-faint: #6b756f;
  --vault-teal: #0fa89d;
  --vault-teal-2: #16e0d6;
  --vault-green: #22c55e;
  --vault-amber: #f59e0b;
  --vault-space: 16px;
  --vault-font: "Segoe UI", Inter, system-ui, sans-serif;
  --vault-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: var(--vault-font);
  background: var(--vault-bg);
  color: var(--vault-text);
}

.vault-shell {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  min-height: 100vh;
}

.vault-nav {
  padding: 20px 14px;
  background: var(--vault-bg-2);
  border-right: 1px solid var(--vault-line);
}

.vault-brand {
  margin: 0 10px 18px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vault-teal);
}

.vault-nav-btn {
  display: block;
  width: 100%;
  margin: 0 0 4px;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--vault-muted);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.vault-nav-btn.is-active,
.vault-nav-btn:hover {
  background: rgba(15, 168, 157, 0.1);
  color: var(--vault-text);
}

.vault-main { padding: 24px 28px 40px; }

.vault-mock-banner {
  margin: 0 0 18px;
  padding: 8px 12px;
  border: 1px solid var(--vault-line);
  border-radius: 8px;
  background: rgba(15, 168, 157, 0.08);
  color: var(--vault-teal);
  font-size: 12px;
  font-weight: 600;
}

.vault-title { margin: 0 0 4px; font-size: 22px; }
.vault-sub { margin: 0 0 20px; color: var(--vault-muted); font-size: 13px; }

.vault-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.vault-metric,
.vault-panel {
  padding: 14px;
  border: 1px solid var(--vault-line);
  border-radius: 12px;
  background: var(--vault-panel);
}

.vault-metric-label,
.vault-panel h2 {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vault-faint);
}

.vault-metric-value {
  font-family: var(--vault-mono);
  font-size: 20px;
  font-weight: 600;
}

.vault-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.vault-table th,
.vault-table td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--vault-line);
  text-align: left;
}
.vault-table th { color: var(--vault-faint); font-size: 11px; font-weight: 600; text-transform: uppercase; }

.vault-feed { display: flex; flex-direction: column; gap: 0; }
.vault-feed-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid var(--vault-line);
}
.vault-feed-body { flex: 1; min-width: 0; }
.vault-feed-title { font-size: 13px; font-weight: 600; }
.vault-feed-sub { margin-top: 2px; color: var(--vault-muted); font-size: 12px; font-family: var(--vault-mono); }
.vault-feed-amount { font-family: var(--vault-mono); font-size: 12px; font-weight: 600; }

.vault-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.vault-tag-warning { color: var(--vault-amber); }
.vault-tag-success { color: var(--vault-green); }
.vault-tag-neutral { color: var(--vault-teal); }

.vault-empty { margin: 0; padding: 16px 0; color: var(--vault-muted); font-size: 13px; }

@media (max-width: 900px) {
  .vault-shell { grid-template-columns: 1fr; }
  .vault-nav { border-right: 0; border-bottom: 1px solid var(--vault-line); }
  .vault-metrics { grid-template-columns: 1fr 1fr; }
}