.ui-page-header { max-width: 44rem; }
.ui-eyebrow { display: inline-flex; align-items: center; gap: var(--ft-space-2); margin-bottom: var(--ft-space-4); color: var(--ft-brown-700); font-size: var(--ft-font-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.ui-eyebrow::before { width: 1.5rem; height: 2px; background: var(--ft-gold-500); content: ""; }
.ui-page-header h1 { margin-bottom: var(--ft-space-4); color: var(--ft-brown-900); font-size: clamp(1.75rem, 3vw, var(--ft-font-2xl)); font-weight: 600; line-height: 1.16; letter-spacing: -0.025em; }
.ui-page-header p { max-width: 39rem; margin-bottom: 0; color: var(--ft-text-secondary); font-size: var(--ft-font-md); line-height: 1.65; }

.ui-section-header { display: flex; align-items: end; justify-content: space-between; gap: var(--ft-space-4); margin-bottom: var(--ft-space-4); }
.ui-section-header > div { display: grid; gap: 1px; }
.ui-section-header span { color: var(--ft-text-muted); font-size: var(--ft-font-xs); font-weight: 500; }
.ui-section-header h2 { margin: 0; color: var(--ft-brown-900); font-size: var(--ft-font-lg); font-weight: 600; }
.ui-section-header > a { font-size: var(--ft-font-sm); font-weight: 600; text-decoration: none; }
.ui-section-header > a:hover { text-decoration: underline; }

.ui-stat { position: relative; display: grid; min-height: 8.5rem; align-content: start; padding: var(--ft-space-5); border: 1px solid var(--ft-border); border-radius: var(--ft-radius-md); background: var(--ft-surface); transition: transform var(--ft-transition), box-shadow var(--ft-transition); }
.ui-stat:hover { box-shadow: var(--ft-shadow-raised); transform: translateY(-2px); }
.ui-stat::before { position: absolute; inset: var(--ft-space-5) auto auto 0; width: 3px; height: 2rem; border-radius: 0 3px 3px 0; background: var(--ft-blue-500); content: ""; }
.ui-stat-label { color: var(--ft-text-secondary); font-size: var(--ft-font-xs); font-weight: 600; }
.ui-stat strong { margin-top: var(--ft-space-2); color: var(--ft-brown-900); font-size: 1.75rem; font-weight: 600; line-height: 1; }
.ui-stat-detail { margin-top: var(--ft-space-2); color: var(--ft-text-muted); font-size: var(--ft-font-xs); }
.ui-stat a { position: absolute; right: var(--ft-space-4); bottom: var(--ft-space-3); font-size: var(--ft-font-xs); font-weight: 600; text-decoration: none; }
.ui-stat-warning::before { background: var(--ft-warning-600); }
.ui-stat-success::before { background: var(--ft-green-600); }
.ui-stat-danger {
  border-color: rgba(185, 74, 72, .32);
  background: linear-gradient(145deg, #fff, var(--ft-red-100)) !important;
  box-shadow: 0 12px 32px rgba(185, 74, 72, .12);
}
.ui-stat-danger::before { background: var(--ft-red-600); }
.ui-stat-danger .ui-stat-label,
.ui-stat-danger strong,
.ui-stat-danger a { color: var(--ft-red-600); }
.ui-stat-danger::after {
  position: absolute;
  top: var(--ft-space-4);
  right: var(--ft-space-4);
  display: grid;
  width: 1.8rem;
  height: 1.8rem;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--ft-red-600);
  box-shadow: 0 0 0 5px rgba(185, 74, 72, .1);
  content: "!";
  font-size: var(--ft-font-xs);
  font-weight: 800;
}

.ui-status { display: inline-flex; min-height: 1.7rem; align-items: center; gap: 0.4rem; padding: 0.2rem 0.55rem; border-radius: 999px; font-size: 0.7rem; font-weight: 600; white-space: nowrap; }
.ui-status > span { width: 0.38rem; height: 0.38rem; border-radius: 50%; background: currentColor; }
.ui-status-info { color: var(--ft-blue-600); background: var(--ft-blue-100); }
.ui-status-success { color: var(--ft-green-600); background: var(--ft-green-100); }
.ui-status-warning { color: var(--ft-warning-600); background: var(--ft-warning-100); }
.ui-status-danger { color: var(--ft-red-600); background: var(--ft-red-100); }

.ui-empty-state { display: grid; min-height: 15rem; place-items: center; align-content: center; padding: var(--ft-space-8); border: 1px dashed #d8d0c7; border-radius: var(--ft-radius-md); text-align: center; background: var(--ft-surface-soft); }
.ui-empty-symbol { display: grid; width: 2.75rem; height: 2.75rem; place-items: center; margin-bottom: var(--ft-space-3); border-radius: 50%; color: var(--ft-blue-600); background: var(--ft-blue-100); font-size: 1.3rem; }
.ui-empty-state h2 { margin-bottom: var(--ft-space-2); font-size: var(--ft-font-lg); font-weight: 600; }
.ui-empty-state p { max-width: 28rem; margin-bottom: var(--ft-space-5); color: var(--ft-text-secondary); font-size: var(--ft-font-sm); }
.ui-inline-notice { max-width: 28rem; margin: 0; padding: var(--ft-space-2) var(--ft-space-3); border-radius: var(--ft-radius-sm); color: var(--ft-warning-600); background: var(--ft-warning-100); font-size: var(--ft-font-xs); }

.ui-submission-list { display: grid; border-top: 1px solid var(--ft-border); }
.ui-submission-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--ft-space-5); padding: var(--ft-space-4) 0; border-bottom: 1px solid var(--ft-border); }
.ui-submission-heading { display: flex; align-items: center; gap: var(--ft-space-3); }
.ui-submission-type { overflow: hidden; color: var(--ft-text-secondary); font-size: var(--ft-font-xs); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ui-submission-card h3 { margin: var(--ft-space-2) 0; font-size: var(--ft-font-base); font-weight: 600; }
.ui-submission-meta { display: flex; flex-wrap: wrap; gap: var(--ft-space-2) var(--ft-space-5); color: var(--ft-text-muted); font-size: 0.7rem; }

.ui-error-page { display: grid; min-height: calc(100vh - var(--ft-topbar-height) - 3rem); place-items: center; padding: var(--ft-space-8); }
.ui-error-panel { position: relative; width: min(100%, 38rem); padding: var(--ft-space-10); border: 1px solid var(--ft-border); border-radius: var(--ft-radius-lg); background: var(--ft-surface); box-shadow: var(--ft-shadow-soft); overflow: hidden; }
.ui-error-code { position: absolute; top: var(--ft-space-5); right: var(--ft-space-6); color: var(--ft-text-muted); font-size: var(--ft-font-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.ui-error-symbol { display: grid; width: 3rem; height: 3rem; place-items: center; margin-bottom: var(--ft-space-6); border-radius: 50%; color: var(--ft-warning-600); background: var(--ft-warning-100); font-size: var(--ft-font-lg); font-weight: 700; }
.ui-error-panel h1 { max-width: 28rem; margin-bottom: var(--ft-space-4); color: var(--ft-brown-900); font-size: var(--ft-font-xl); font-weight: 600; line-height: 1.25; }
.ui-error-panel > p { max-width: 31rem; margin-bottom: 0; color: var(--ft-text-secondary); font-size: var(--ft-font-base); line-height: 1.7; }
.ui-error-actions { display: flex; flex-wrap: wrap; gap: var(--ft-space-3); margin-top: var(--ft-space-6); }
.ui-error-reference { margin-top: var(--ft-space-6); padding-top: var(--ft-space-4); border-top: 1px solid var(--ft-border); color: var(--ft-text-muted); font-size: var(--ft-font-xs); }
.ui-error-reference summary { width: max-content; cursor: pointer; }
.ui-error-reference code { display: block; margin-top: var(--ft-space-2); overflow-wrap: anywhere; color: var(--ft-text-secondary); }