* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  display: flex;
  min-height: 100%;
  background: var(--ps-canvas);
  color: var(--ps-ink);
  font-family: var(--ps-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.45;
}

button, input {
  font: inherit;
  color: inherit;
}
button:focus-visible,
input:focus-visible {
  outline: none;
  box-shadow: var(--ps-focus);
}

.eyebrow {
  font-family: var(--ps-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ps-ink-2);
}

.rail {
  width: 300px;
  flex: none;
  display: flex;
  flex-direction: column;
  background: var(--ps-rail);
  color: var(--ps-rail-ink);
}
.rail-brand {
  padding: var(--ps-space-6);
}
.logo-lockup {
  display: flex;
  align-items: center;
  gap: var(--ps-space-3);
}
.logo-mark {
  width: 32px;
  height: 32px;
  flex: none;
  display: block;
}
.rail-logo {
  font-weight: 700;
  font-size: 20px;
  color: var(--ps-cls-ink-light);
}
.rail-eyebrow {
  margin-top: var(--ps-space-2);
  font-family: var(--ps-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ps-rail-ink);
}
.rail-nav {
  flex: 1;
  overflow: auto;
  padding: var(--ps-space-2) var(--ps-space-3) var(--ps-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--ps-space-1);
}
.rail-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ps-space-3);
  width: 100%;
  text-align: left;
  border: 0;
  border-radius: var(--ps-radius-sm);
  background: transparent;
  color: var(--ps-rail-ink);
  padding: var(--ps-space-3);
  cursor: pointer;
  transition: background-color var(--ps-dur-fast) var(--ps-ease), color var(--ps-dur-instant) var(--ps-ease);
}
.rail-item .name {
  font-family: var(--ps-mono);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rail-item .tally {
  flex: none;
  font-family: var(--ps-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ps-rail-ink);
}
.rail-item:hover {
  background: color-mix(in srgb, var(--ps-cls-ink-light) 8%, var(--ps-rail));
  color: var(--ps-cls-ink-light);
}
.rail-item.active {
  background: color-mix(in srgb, var(--ps-accent) 22%, var(--ps-rail));
  color: var(--ps-cls-ink-light);
  box-shadow: inset 3px 0 0 var(--ps-accent);
}
.rail-item.active .tally { color: var(--ps-cls-ink-light); }
.rail-item:focus-visible { box-shadow: var(--ps-focus); }

.workspace {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ps-space-4);
  padding: var(--ps-space-5) var(--ps-space-6);
  background: var(--ps-surface);
  border-bottom: 1px solid var(--ps-line);
  box-shadow: var(--ps-shadow-1);
}
.topbar-copy h2 {
  margin: var(--ps-space-1) 0 0;
  font-family: var(--ps-mono);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
}
.topbar-meta {
  margin-top: var(--ps-space-2);
  font-family: var(--ps-mono);
  font-size: 12px;
  color: var(--ps-ink-2);
}

.ghost {
  border: 1px solid var(--ps-line);
  background: transparent;
  color: var(--ps-ink);
  border-radius: var(--ps-radius-sm);
  padding: var(--ps-space-2) var(--ps-space-3);
  cursor: pointer;
  transition: background-color var(--ps-dur-fast) var(--ps-ease), border-color var(--ps-dur-fast) var(--ps-ease);
}
.ghost:hover { background: var(--ps-surface-2); }

.content {
  flex: 1;
  overflow: auto;
  padding: var(--ps-space-6);
}

.app-panel {
  max-width: 940px;
  background: var(--ps-surface);
  border: 1px solid var(--ps-line);
  border-radius: var(--ps-radius);
  box-shadow: var(--ps-shadow-0);
  overflow: hidden;
}
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ps-space-4);
  padding: var(--ps-space-4);
  border-bottom: 1px solid var(--ps-line);
  background: var(--ps-surface);
}
.seg {
  display: flex;
  gap: var(--ps-space-1);
  padding: var(--ps-space-1);
  background: var(--ps-surface-2);
  border: 1px solid var(--ps-line);
  border-radius: var(--ps-radius-sm);
}
.seg[hidden] { display: none; }
.seg button {
  border: 0;
  background: transparent;
  color: var(--ps-ink-2);
  border-radius: calc(var(--ps-radius-sm) - 2px);
  padding: var(--ps-space-2) var(--ps-space-3);
  font-family: var(--ps-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--ps-dur-fast) var(--ps-ease), color var(--ps-dur-instant) var(--ps-ease);
}
.seg button[aria-checked="true"] {
  background: var(--ps-surface);
  color: var(--ps-ink);
  box-shadow: var(--ps-shadow-1);
}
.seg button:hover { color: var(--ps-ink); }

.search {
  display: flex;
  align-items: center;
  gap: var(--ps-space-2);
  min-width: 220px;
  padding: var(--ps-space-2) var(--ps-space-3);
  border: 1px solid var(--ps-line);
  border-radius: var(--ps-radius-sm);
  background: var(--ps-surface);
  color: var(--ps-ink-2);
}
.search i { font-size: 12px; }
.search input {
  flex: 1;
  border: 0;
  background: transparent;
  min-width: 0;
  font-family: var(--ps-mono);
  font-size: 13px;
  color: var(--ps-ink);
}
.search input::placeholder { color: var(--ps-ink-3); }
.search input:focus { outline: none; box-shadow: none; }
.search:focus-within { box-shadow: var(--ps-focus); }

.app-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--ps-space-4);
  padding: var(--ps-space-2) var(--ps-space-4);
  background: var(--ps-surface-2);
  border-bottom: 1px solid var(--ps-line);
}
.app-panel-head .col {
  font-family: var(--ps-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ps-ink-2);
}
.count {
  font-family: var(--ps-mono);
  font-size: 11px;
  padding: var(--ps-space-1) var(--ps-space-2);
  border-radius: 999px;
  background: var(--ps-surface-3);
  color: var(--ps-ink-2);
}

.app-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.app-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ps-space-3);
  padding: var(--ps-space-3) var(--ps-space-4);
  border-top: 1px solid var(--ps-line-2);
  font-family: var(--ps-mono);
  font-size: 14px;
  transition: background-color var(--ps-dur-fast) var(--ps-ease);
}
.app-list li:first-child { border-top: 0; }
.app-list li:hover { background: var(--ps-surface-2); }
.app-list .empty {
  font-family: var(--ps-sans);
  color: var(--ps-ink-2);
}

@media (max-width: 767px) {
  body { flex-direction: column; }
  .rail { width: 100%; }
  .toolbar { flex-direction: column; align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
  }
}

.toolbar-left, .toolbar-right { display: flex; align-items: center; gap: var(--ps-space-3); }
.app-list .row { cursor: pointer; }
.app-list .row:focus-visible { box-shadow: var(--ps-focus); }
.app-list .version { gap: var(--ps-space-3); }
.app-list .image-row { flex-direction: column; align-items: flex-start; gap: var(--ps-space-1); }
.app-list .hash { font-size: 12px; color: var(--ps-ink-2); word-break: break-all; }
.app-list li[data-change="added"] { box-shadow: inset 3px 0 0 var(--ps-ok); }
.app-list li[data-change="removed"] { box-shadow: inset 3px 0 0 var(--ps-crit); }
#compare-btn:disabled { opacity: 0.45; cursor: not-allowed; }