:root {
  --zn-bg: #f5f0e7;
  --zn-surface: #ffffff;
  --zn-text: #303030;
  --zn-muted: #616161;
  --zn-border: #e3e3e3;
  --zn-primary: #090909;
  --zn-black: #090909;
  --zn-gold: #b99652;
  --zn-gold-light: #c4a061;
  --zn-gold-dark: #9c7840;
  --zn-serif: Georgia, 'Times New Roman', serif;
  --zn-ok-bg: #cdfee1;
  --zn-ok: #0c5132;
  --zn-warn-bg: #fff1e3;
  --zn-warn: #5e4200;
  --zn-bad-bg: #fee9e8;
  --zn-bad: #8e1f0b;
  --zn-info-bg: #eaf4ff;
  --zn-info: #00527c;
  --zn-radius: 12px;
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--zn-bg);
  color: var(--zn-text);
  font: 13px/1.5 -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
}

.zn-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: var(--zn-black);
  color: #fff;
  border-block-end: 1px solid var(--zn-gold);
}

.zn-brand {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  color: #fff;
  text-decoration: none;
}

.zn-brand-mark {
  font-family: var(--zn-serif);
  font-size: 20px;
  letter-spacing: 4px;
}

.zn-brand-sub {
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--zn-gold-light);
}

.zn-user {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.zn-user-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zn-role {
  padding: 1px 8px;
  border: 1px solid var(--zn-gold);
  border-radius: 999px;
  color: var(--zn-gold-light);
  font-size: 11px;
  text-transform: capitalize;
}

.zn-logout {
  margin: 0;
}

.zn-quiet {
  background: transparent;
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.zn-quiet:hover {
  box-shadow: inset 0 0 0 1px var(--zn-gold-light);
}

.zn-entry {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--zn-black);
}

.zn-entry-box {
  width: min(420px, 100%);
  padding: 24px 16px;
  text-align: center;
}

.zn-entry-box .zn-brand {
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-block-end: 24px;
}

.zn-entry-box .zn-brand-mark {
  font-size: 30px;
  letter-spacing: 8px;
}

.zn-entry-box .zn-card {
  border-block-start: 2px solid var(--zn-gold);
}

.zn-entry-box .zn-card h1 {
  font-family: var(--zn-serif);
  font-weight: 400;
}

.zn-wide-button {
  display: block;
  padding: 10px 16px;
}

.zn-app {
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px;
}

.zn-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-block-end: 12px;
}

.zn-header h1,
.zn-card h1 {
  font-size: 20px;
  font-weight: 650;
  margin: 0;
}

.zn-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-block-end: 16px;
}

.zn-tabs a {
  padding: 6px 12px;
  border-radius: 8px;
  color: var(--zn-text);
  text-decoration: none;
  font-weight: 550;
}

.zn-tabs a:hover {
  background: #e3e3e3;
}

.zn-tabs a[aria-current='page'] {
  background: var(--zn-surface);
  box-shadow: inset 0 -2px 0 var(--zn-gold), inset 0 0 0 1px var(--zn-border);
}

.zn-card {
  background: var(--zn-surface);
  border-radius: var(--zn-radius);
  box-shadow: 0 1px 0 rgba(26, 26, 26, 0.07), inset 0 0 0 1px rgba(0, 0, 0, 0.04);
  padding: 16px;
  margin-block-end: 16px;
}

.zn-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-block-end: 12px;
}

.zn-card-head h2 {
  font-size: 14px;
  font-weight: 650;
  margin: 0;
}

.zn-table-wrap {
  overflow-x: auto;
}

.zn-table {
  width: 100%;
  border-collapse: collapse;
}

.zn-table th,
.zn-table td {
  text-align: start;
  padding: 8px;
  border-block-end: 1px solid var(--zn-border);
  vertical-align: top;
}

.zn-table th {
  color: var(--zn-muted);
  font-weight: 550;
  vertical-align: bottom;
  min-width: 64px;
}

.zn-table th[title] {
  cursor: help;
}

.zn-table td {
  overflow-wrap: break-word;
}

.zn-table time,
.zn-stat-value {
  white-space: nowrap;
}

.zn-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-inline-start: 4px;
  border-radius: 50%;
  background: #e3e3e3;
  color: var(--zn-muted);
  font-size: 10px;
  font-weight: 650;
  vertical-align: 1px;
}

.zn-table tbody tr:hover {
  background: #fafafa;
}

.zn-facts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 8px 24px;
  margin: 0 0 12px;
}

.zn-facts dt {
  color: var(--zn-muted);
}

.zn-facts dd {
  margin: 0;
  font-weight: 550;
}

.zn-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 550;
  background: #e3e3e3;
  white-space: nowrap;
}

.zn-ok {
  background: var(--zn-ok-bg);
  color: var(--zn-ok);
}

.zn-warn {
  background: var(--zn-warn-bg);
  color: var(--zn-warn);
}

.zn-bad {
  background: var(--zn-bad-bg);
  color: var(--zn-bad);
}

.zn-info {
  background: var(--zn-info-bg);
  color: var(--zn-info);
}

.zn-note {
  padding: 8px 12px;
  border-radius: 8px;
  margin: 8px 0;
}

.zn-note.zn-neutral {
  background: #f7f7f7;
  color: var(--zn-muted);
}

.zn-banner {
  margin-block-end: 12px;
}

.zn-muted,
.zn-empty {
  color: var(--zn-muted);
}

.zn-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 12px;
  margin: 8px 0;
}

.zn-form.zn-inline {
  display: inline-flex;
  margin: 2px 4px 2px 0;
}

.zn-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 140px;
}

.zn-inline .zn-field {
  min-width: 0;
}

.zn-inline .zn-field span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.zn-field.zn-wide {
  flex-basis: 100%;
}

.zn-field span {
  color: var(--zn-muted);
}

input,
select,
textarea {
  font: inherit;
  color: inherit;
  padding: 6px 8px;
  border: 1px solid #8a8a8a;
  border-radius: 8px;
  background: var(--zn-surface);
}

textarea {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}

.zn-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.zn-button {
  font: inherit;
  font-weight: 550;
  padding: 6px 12px;
  border-radius: 8px;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  display: inline-block;
}

.zn-primary {
  background: var(--zn-primary);
  color: #fff;
}

.zn-secondary {
  background: var(--zn-surface);
  color: var(--zn-text);
  box-shadow: inset 0 0 0 1px #c9c9c9;
}

.zn-critical {
  background: #c70a24;
  color: #fff;
}

.zn-small {
  padding: 2px 8px;
  font-size: 0.85em;
  margin-block-start: 4px;
}

.zn-button:disabled,
.zn-button[aria-disabled='true'] {
  opacity: 0.5;
  cursor: default;
}

.zn-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.zn-proposal .zn-actions {
  align-items: flex-start;
  margin-block-start: 12px;
}

.zn-thumb {
  display: block;
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
  background: var(--zn-bg);
}

.zn-pager {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-block-start: 12px;
}

.zn-pre {
  background: #f7f7f7;
  padding: 12px;
  border-radius: 8px;
  overflow-x: auto;
}

#zn-toast {
  position: fixed;
  inset-block-end: 24px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  background: #1a1a1a;
  color: #fff;
  padding: 8px 16px;
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

#zn-toast.zn-show {
  opacity: 1;
}

#zn-toast.zn-error {
  background: var(--zn-bad);
}

.zn-intro {
  margin: 0 0 16px;
  max-width: 920px;
  font-size: 14px;
  color: var(--zn-text);
}

.zn-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-block-end: 16px;
}

.zn-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--zn-surface);
  border-radius: var(--zn-radius);
  box-shadow: 0 1px 0 rgba(26, 26, 26, 0.07), inset 0 0 0 1px rgba(0, 0, 0, 0.04);
  border-inline-start: 4px solid #c9c9c9;
  padding: 12px 14px;
}

.zn-stat-ok {
  border-inline-start-color: #29845a;
}

.zn-stat-warn {
  border-inline-start-color: #e8a33d;
}

.zn-stat-bad {
  border-inline-start-color: #c70a24;
}

.zn-stat-info {
  border-inline-start-color: #2c6ecb;
}

.zn-stat-label {
  color: var(--zn-muted);
}

.zn-stat-value {
  font-size: 20px;
  font-weight: 650;
  line-height: 1.3;
}

.zn-stat-bad .zn-stat-value {
  color: var(--zn-bad);
}

.zn-stat-hint {
  color: var(--zn-muted);
  font-size: 12px;
}

.zn-sub {
  display: block;
  color: var(--zn-muted);
  font-size: 12px;
  margin-block-start: 2px;
}

.zn-sub .zn-sub {
  margin-block-start: 0;
}

.zn-line {
  display: block;
  white-space: nowrap;
}

.zn-wrap {
  white-space: normal;
}

.zn-link {
  color: #005bd3;
  text-decoration: none;
  font-weight: 550;
}

.zn-link:hover {
  text-decoration: underline;
}

.zn-bad-text {
  color: var(--zn-bad);
  font-weight: 550;
}

.zn-permission-group {
  flex-basis: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 8px 16px;
  margin: 0;
  padding: 10px 12px 12px;
  border: 1px solid var(--zn-border);
  border-radius: 8px;
}

.zn-permission-group legend {
  font-weight: 600;
  padding: 0 4px;
}

.zn-check.zn-permission {
  align-items: flex-start;
}

.zn-check.zn-permission input {
  margin-block-start: 3px;
}

.zn-plain-list,
.zn-problems,
.zn-problem-list {
  margin: 0;
  padding-inline-start: 16px;
}

.zn-problem-list li {
  margin-block-end: 2px;
}

.zn-details {
  margin: 8px 0;
}

.zn-details > summary,
.zn-problems + .zn-details > summary {
  cursor: pointer;
  color: #005bd3;
  font-weight: 550;
}

.zn-details-body {
  padding-block-start: 8px;
}

.zn-menu {
  display: inline-block;
}

.zn-menu > summary {
  list-style: none;
}

.zn-menu > summary::-webkit-details-marker {
  display: none;
}

.zn-menu > summary::after {
  content: ' \25BE';
}

.zn-menu-body {
  margin-block-start: 6px;
  padding: 10px;
  min-width: 240px;
  background: #fafafa;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px var(--zn-border);
}

.zn-menu-body .zn-form {
  flex-direction: column;
  align-items: stretch;
  margin: 0;
}

.zn-menu-body .zn-field span {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
}

.zn-menu-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

.zn-menu-actions .zn-form.zn-inline {
  display: flex;
  margin: 0;
}

.zn-menu-actions .zn-button,
.zn-menu-body .zn-form .zn-button {
  width: 100%;
  text-align: center;
}

.zn-attention {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.zn-attention-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  border-inline-start: 4px solid #c9c9c9;
  background: #f7f7f7;
}

.zn-attention-bad {
  border-inline-start-color: #c70a24;
  background: var(--zn-bad-bg);
}

.zn-attention-warn {
  border-inline-start-color: #e8a33d;
  background: var(--zn-warn-bg);
}

.zn-attention-info {
  border-inline-start-color: #2c6ecb;
  background: var(--zn-info-bg);
}

.zn-pipeline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-block-end: 12px;
}

.zn-pipeline-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.zn-step {
  font: inherit;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-width: 72px;
  padding: 6px 10px;
  border: 0;
  border-radius: 8px;
  background: var(--zn-surface);
  box-shadow: inset 0 0 0 1px #c9c9c9;
  color: var(--zn-text);
  cursor: pointer;
}

.zn-step span {
  color: var(--zn-muted);
  font-size: 12px;
}

.zn-step strong {
  font-size: 16px;
}

.zn-step-bad {
  background: var(--zn-bad-bg);
  box-shadow: inset 0 0 0 1px #e4a39a;
}

.zn-step-bad strong {
  color: var(--zn-bad);
}

.zn-step[aria-pressed='true'] {
  background: var(--zn-primary);
  box-shadow: none;
  color: #fff;
}

.zn-step[aria-pressed='true'] span {
  color: #e3e3e3;
}

.zn-arrow {
  color: var(--zn-muted);
}

.zn-dialog {
  max-width: 480px;
  width: calc(100% - 32px);
  border: 0;
  border-radius: var(--zn-radius);
  padding: 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  color: var(--zn-text);
}

.zn-dialog::backdrop {
  background: rgba(0, 0, 0, 0.35);
}

.zn-dialog h2 {
  font-size: 16px;
  margin: 0 0 8px;
}

.zn-dialog p {
  margin: 0 0 16px;
  font-size: 14px;
}

.zn-secret {
  width: 100%;
  box-sizing: border-box;
  margin: 0.75rem 0 0;
  padding: 0.65rem 0.75rem;
  font: 600 1.1rem/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.04em;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  border-radius: 6px;
}

.zn-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

#zn-toast {
  max-width: min(640px, calc(100% - 32px));
  text-align: center;
}

@media (max-width: 1024px) {
  .zn-table th,
  .zn-table td {
    padding: 6px;
  }

  .zn-stat-value {
    font-size: 18px;
  }
}

@media (max-width: 640px) {
  .zn-brand-sub,
  .zn-user-name {
    display: none;
  }

  .zn-attention-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .zn-app {
    padding: 8px;
  }

  .zn-form.zn-inline {
    display: flex;
  }
}