.vault-hero,
.vault-page-head {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(200, 162, 90, 0.2);
  background:
    radial-gradient(circle at 82% 20%, rgba(139, 38, 53, 0.2), transparent 35%),
    linear-gradient(135deg, #08090b 0%, #111318 58%, #08090b 100%);
}

.vault-hero::before,
.vault-page-head::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.17;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 32px 32px;
}

.vault-hero-grid,
.vault-page-head .container {
  position: relative;
  z-index: 1;
}

.vault-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  align-items: center;
  gap: 48px;
  min-height: 410px;
  padding-block: 72px;
}

.vault-page-head .container { padding-block: 54px 24px; }
.vault-hero h1, .vault-page-head h1 { max-width: 900px; margin: 8px 0 14px; }
.vault-hero p, .vault-page-head p { max-width: 780px; color: var(--color-text-muted); }
.vault-kicker { color: var(--color-gold); font-size: .75rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }

.vault-health,
.vault-access-panel,
.vault-warning-board,
.vault-action-panel,
.vault-reveal-panel {
  padding: 28px;
  border: 1px solid rgba(200, 162, 90, 0.25);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(28, 31, 37, 0.94), rgba(11, 12, 15, 0.98));
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.4), inset 0 1px rgba(255, 255, 255, 0.05);
}

.vault-health span,
.vault-access-panel > span,
.vault-warning-board > span,
.vault-action-panel > span,
.vault-reveal-panel > span,
.vault-policy-card > span,
.vault-form-panel > span {
  color: #c8a25a;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.vault-health strong { display: block; margin: 12px 0 4px; font-size: clamp(1.5rem, 4vw, 2.5rem); }
.vault-health.is-healthy { border-color: rgba(66, 190, 138, .42); }
.vault-health.is-warning { border-color: rgba(213, 157, 67, .5); }

.vault-subnav {
  display: flex;
  gap: 8px;
  align-items: center;
  overflow-x: auto;
  padding: 12px 0;
  scrollbar-width: thin;
}

.vault-subnav a,
.vault-subnav span {
  flex: 0 0 auto;
  padding: 9px 12px;
  border: 1px solid rgba(200, 162, 90, .2);
  border-radius: 999px;
  color: var(--color-text-muted);
  font-size: .76rem;
}
.vault-subnav a:hover { color: #ead3a2; border-color: rgba(200, 162, 90, .55); }
.vault-subnav span { margin-left: auto; color: #c8a25a; }

.vault-section { padding-block: 56px; }
.vault-section-alt { background: linear-gradient(180deg, rgba(255,255,255,.014), rgba(255,255,255,.028)); border-block: 1px solid rgba(255,255,255,.04); }
.vault-section-head { display: flex; justify-content: space-between; gap: 24px; align-items: end; margin-bottom: 28px; }
.vault-section-head p { max-width: 720px; color: var(--color-text-muted); }
.vault-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.vault-stat-grid article,
.vault-policy-card,
.vault-metadata-board,
.vault-form-panel {
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(29,32,38,.74), rgba(12,13,16,.92));
  box-shadow: inset 0 1px rgba(255,255,255,.035);
}
.vault-stat-grid article { padding: 24px; }
.vault-stat-grid span, .vault-stat-grid small { display: block; color: var(--color-text-muted); }
.vault-stat-grid strong { display: block; margin: 8px 0; color: #e7c986; font-size: 2.1rem; }
.vault-command-grid, .vault-detail-grid, .vault-form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .42fr); gap: 28px; align-items: start; }
.vault-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vault-warning-board ul { padding-left: 18px; color: var(--color-text-muted); }
.vault-warning-board li + li { margin-top: 10px; }

.vault-table-wrap { overflow-x: auto; border: 1px solid rgba(255,255,255,.07); border-radius: 14px; background: rgba(5,6,8,.55); }
.vault-table { width: 100%; border-collapse: collapse; min-width: 760px; }
.vault-table th, .vault-table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.055); vertical-align: top; }
.vault-table th { color: #c8a25a; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; background: rgba(255,255,255,.025); }
.vault-table td { color: var(--color-text-muted); font-size: .88rem; }
.vault-table tbody tr:hover { background: rgba(200,162,90,.045); }
.vault-table code, .vault-code { color: #e7c986; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }

.vault-badge { display: inline-flex; padding: 4px 8px; border: 1px solid rgba(255,255,255,.15); border-radius: 999px; font-size: .7rem; }
.vault-badge.is-allowed { color: #7fe0b3; border-color: rgba(73,187,134,.35); background: rgba(73,187,134,.08); }
.vault-badge.is-denied { color: #f39aa4; border-color: rgba(204,73,89,.38); background: rgba(204,73,89,.08); }
.vault-badge.is-warning { color: #e7c986; border-color: rgba(200,162,90,.38); }
.vault-signal-row, .vault-action-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.vault-action-row { margin-top: 24px; }

.vault-form-shell, .vault-form-panel { padding: clamp(22px, 4vw, 38px); max-width: 920px; }
.vault-form { display: grid; gap: 18px; }
.vault-form-field, .vault-form p { display: grid; gap: 7px; margin: 0; }
.vault-form-field label, .vault-form label, .vault-filter-bar label { color: #e6e6e8; font-weight: 700; font-size: .84rem; }
.vault-form input:not([type="checkbox"]), .vault-form select, .vault-form textarea,
.vault-form-panel input:not([type="checkbox"]), .vault-form-panel select, .vault-form-panel textarea,
.vault-filter-bar input, .vault-filter-bar select {
  width: 100%; padding: 11px 12px; color: #f0f0f1; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; background: #0b0c0f;
}
.vault-form input[type="checkbox"], .vault-form-panel input[type="checkbox"] { accent-color: #c8a25a; }
.vault-form ul, .vault-form-panel ul.errorlist { color: #f39aa4; }
.vault-form small, .vault-form-panel .helptext { color: var(--color-text-muted); }
.vault-form-panel form p { display: grid; gap: 6px; }
.vault-form-panel form + form { margin-top: 32px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.08); }
.vault-filter-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin-bottom: 20px; }
.vault-filter-bar label { min-width: 150px; }

.vault-metadata-board { padding: 28px; }
.vault-metadata-board dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; margin: 0; }
.vault-metadata-board dl div { padding: 16px; background: rgba(255,255,255,.025); }
.vault-metadata-board dt { color: #c8a25a; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.vault-metadata-board dd { margin: 6px 0 0; color: #e5e5e7; overflow-wrap: anywhere; }
.vault-action-panel { display: grid; gap: 12px; }
.vault-plaintext { padding: 20px; overflow-wrap: anywhere; color: #fff; border: 1px solid rgba(204,73,89,.5); border-radius: 10px; background: #160c0f; font: 600 1rem/1.6 ui-monospace, monospace; }
.vault-danger-head { border-bottom-color: rgba(204,73,89,.42); }
.vault-permission-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vault-permission-grid p { margin: 0; padding: 8px; background: rgba(255,255,255,.035); }

.vault-policy-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.vault-policy-card { padding: 24px; }
.vault-policy-card.is-critical { border-color: rgba(204,73,89,.4); }

@media (max-width: 900px) {
  .vault-hero-grid, .vault-command-grid, .vault-detail-grid, .vault-form-grid { grid-template-columns: 1fr; }
  .vault-stat-grid, .vault-policy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vault-subnav span { margin-left: 0; }
}

@media (max-width: 560px) {
  .vault-hero-grid { min-height: auto; padding-block: 48px; }
  .vault-stat-grid, .vault-policy-grid, .vault-metadata-board dl { grid-template-columns: 1fr; }
  .vault-section-head { align-items: start; flex-direction: column; }
  .vault-filter-bar label { width: 100%; }
}

/* Compact sizing pass */
.vault-hero-grid {
  gap: var(--bx-space-xl);
  min-height: 320px;
  padding-block: calc(var(--header-height) + var(--bx-space-lg)) var(--bx-space-2xl);
}

.vault-page-head .container {
  padding-block: calc(var(--header-height) + var(--bx-space-lg)) var(--bx-space-xl);
}

.vault-hero h1,
.vault-page-head h1 {
  margin: var(--bx-space-sm) 0 var(--bx-space-md);
  font-size: var(--text-2xl);
  line-height: var(--bx-line-height-tight);
}

.vault-kicker,
.vault-health span,
.vault-access-panel > span,
.vault-warning-board > span,
.vault-action-panel > span,
.vault-reveal-panel > span,
.vault-policy-card > span,
.vault-form-panel > span,
.vault-table th,
.vault-badge {
  font-size: var(--bx-badge-font);
}

.vault-health,
.vault-access-panel,
.vault-warning-board,
.vault-action-panel,
.vault-reveal-panel,
.vault-stat-grid article,
.vault-policy-card,
.vault-metadata-board,
.vault-form-shell,
.vault-form-panel {
  padding: var(--bx-card-padding);
  border-radius: var(--radius-card);
}

.vault-health strong,
.vault-stat-grid strong {
  margin: var(--bx-space-sm) 0 var(--bx-space-xs);
  font-size: var(--text-xl);
}

.vault-subnav,
.vault-signal-row,
.vault-action-row,
.vault-filter-bar {
  gap: var(--bx-space-sm);
}

.vault-subnav {
  padding: var(--bx-space-sm) 0;
}

.vault-subnav a,
.vault-subnav span,
.vault-badge {
  padding-block: var(--bx-badge-py);
  padding-inline: var(--bx-badge-px);
  font-size: var(--bx-badge-font);
}

.vault-section {
  padding-block: var(--bx-space-2xl);
}

.vault-section-head {
  gap: var(--bx-space-lg);
  margin-bottom: var(--bx-space-xl);
}

.vault-stat-grid,
.vault-command-grid,
.vault-detail-grid,
.vault-form-grid,
.vault-policy-grid,
.vault-form,
.vault-metadata-board dl,
.vault-action-panel,
.vault-permission-grid {
  gap: var(--bx-space-sm);
}

.vault-warning-board ul {
  padding-inline-start: var(--bx-space-lg);
}

.vault-warning-board li + li {
  margin-top: var(--bx-space-sm);
}

.vault-table th,
.vault-table td {
  padding-block: var(--bx-table-cell-py);
  padding-inline: var(--bx-table-cell-px);
  font-size: var(--bx-table-font);
}

.vault-form-field,
.vault-form p,
.vault-form-panel form p {
  gap: var(--bx-space-xs);
}

.vault-form-field label,
.vault-form label,
.vault-filter-bar label {
  font-size: var(--bx-font-size-sm);
}

.vault-form input:not([type="checkbox"]),
.vault-form select,
.vault-form textarea,
.vault-form-panel input:not([type="checkbox"]),
.vault-form-panel select,
.vault-form-panel textarea,
.vault-filter-bar input,
.vault-filter-bar select {
  min-height: var(--bx-control-height);
  padding-block: var(--bx-space-xs);
  padding-inline: var(--bx-space-sm);
  font-size: var(--bx-font-size-sm);
}

.vault-form-panel form + form {
  margin-top: var(--bx-space-xl);
  padding-top: var(--bx-space-xl);
}

.vault-metadata-board dl div {
  padding: var(--bx-space-sm);
}

.vault-metadata-board dt {
  font-size: var(--bx-font-size-xs);
}

.vault-plaintext {
  padding: var(--bx-card-padding);
  font-size: var(--bx-font-size-sm);
  line-height: var(--bx-line-height-base);
}

.vault-permission-grid p {
  padding: var(--bx-space-sm);
}

.vault-hero-grid,
.vault-page-head .container,
.vault-subnav,
.vault-section > .container,
.vault-section-head,
.vault-stat-grid,
.vault-command-grid,
.vault-detail-grid,
.vault-form-grid,
.vault-policy-grid,
.vault-table-wrap,
.vault-metadata-board,
.vault-form-shell,
.vault-form-panel,
.vault-permission-grid {
  min-width: 0;
  max-width: 100%;
}

.vault-table-wrap {
  width: 100%;
}

.vault-command-grid {
  overflow-x: hidden;
}

.vault-command-grid > * {
  min-width: 0;
  max-width: 100%;
}

.vault-stat-grid article,
.vault-policy-card,
.vault-metadata-board,
.vault-form-panel,
.vault-table td {
  overflow-wrap: anywhere;
}

@media (max-width: 560px) {
  .vault-hero-grid {
    padding-block: calc(var(--header-height) + var(--bx-space-lg)) var(--bx-space-xl);
  }

  .vault-subnav {
    max-width: 100%;
  }
}
