:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #171717;
  background: #f5f5f3;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: #f5f5f3; }
a { color: inherit; }

.shell { width: min(1120px, calc(100% - 32px)); margin: 0 auto; padding: 56px 0 72px; }
.header { display: flex; justify-content: space-between; gap: 32px; align-items: end; margin-bottom: 36px; }
.eyebrow { margin: 0 0 6px; font-size: 0.74rem; font-weight: 750; letter-spacing: 0.13em; text-transform: uppercase; color: #777; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 4px; font-size: clamp(2.2rem, 5vw, 4.2rem); line-height: 0.96; letter-spacing: -0.055em; }
.subtitle { margin-bottom: 0; color: #666; font-size: 1rem; }
.summary { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.summary span { padding: 8px 12px; border: 1px solid #d8d8d2; border-radius: 999px; background: #fff; font-size: 0.82rem; font-weight: 650; }
.panel { background: #fff; border: 1px solid #dfdfda; border-radius: 22px; overflow: hidden; box-shadow: 0 18px 60px rgba(0,0,0,0.05); }
.panel-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; padding: 24px 26px; border-bottom: 1px solid #ecece8; }
h2 { margin-bottom: 0; font-size: 1.3rem; letter-spacing: -0.025em; }
.registry-status { margin-bottom: 0; color: #777; font-size: 0.82rem; text-align: right; }
.applications { display: grid; }
.application-card { padding: 26px; border-bottom: 1px solid #ecece8; }
.application-card:last-child { border-bottom: 0; }
.application-main { display: flex; justify-content: space-between; gap: 24px; align-items: start; }
.title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.application-name { margin-bottom: 0; font-size: 1.15rem; letter-spacing: -0.02em; }
.state-pill { padding: 5px 9px; border-radius: 999px; background: #f0f0ed; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.07em; }
.objective { max-width: 760px; margin: 8px 0 0; color: #666; line-height: 1.5; font-size: 0.9rem; }
.live-link { flex: none; padding: 9px 13px; border: 1px solid #ccc; border-radius: 10px; text-decoration: none; font-weight: 700; font-size: 0.82rem; background: #fff; }
.live-link:hover { border-color: #111; }
.live-link.disabled { pointer-events: none; color: #999; background: #f5f5f2; border-color: #e1e1dc; }
.progress-row { margin-top: 22px; }
.progress-copy { display: flex; justify-content: space-between; gap: 18px; margin-bottom: 8px; font-size: 0.8rem; }
.frontier { color: #777; text-align: right; }
.progress-track { height: 7px; background: #ecece8; border-radius: 999px; overflow: hidden; }
.progress-bar { display: block; height: 100%; width: 0; background: #202020; border-radius: inherit; transition: width 180ms ease; }
.details { display: grid; grid-template-columns: 1.1fr 1fr 0.6fr; gap: 18px; margin: 22px 0 0; padding-top: 18px; border-top: 1px solid #f0f0ec; }
.details div { min-width: 0; }
dt { margin-bottom: 4px; color: #888; font-size: 0.68rem; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; }
dd { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.74rem; overflow-wrap: anywhere; }
.empty { padding: 48px 26px; color: #777; text-align: center; }

@media (max-width: 720px) {
  .shell { width: min(100% - 20px, 1120px); padding-top: 28px; }
  .header, .panel-heading, .application-main, .progress-copy { align-items: start; flex-direction: column; }
  .summary { justify-content: flex-start; }
  .registry-status, .frontier { text-align: left; }
  .details { grid-template-columns: 1fr; }
  .live-link { width: 100%; text-align: center; }
}