:root {
  color-scheme:light;
  --bg:#f5f6f4;
  --surface:#fff;
  --ink:#1b2b32;
  --muted:#64737a;
  --line:#dfe6e4;
  --accent:#126b60;
  --soft:#edf5f2;
  --on-accent:#fff;
  --warning-bg:#fff7e7;
  --warning-line:#eed6a8;
  --warning-ink:#835416;
  --error:#9a352d;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-synthesis:none}
* {
  box-sizing:border-box}
body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-size:15px;
  line-height:1.6}
a {
  color:inherit;
  text-decoration:none}
a:hover {
  text-decoration:underline}
button,input,select {
  font:inherit}
button,a,input,select {
  touch-action:manipulation}
button {
  cursor:pointer}
button:disabled {
  cursor:not-allowed;
  opacity:.5}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible {
  outline:3px solid #77b9aa;
  outline-offset:3px}
.shell {
  max-width:1200px;
  margin:auto;
  padding:0 36px}
.topbar {
  height:100px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  gap:20px}
.brand {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:23px;
  font-weight:700;
  letter-spacing:-.7px}
.brand-mark {
  display:grid;
  place-items:center;
  background:var(--ink);
  color:var(--bg);
  height:40px;
  width:40px;
  border-radius:11px;
  font-size:28px}
.muted,.identity {
  color:var(--muted)}
.account {
  display:flex;
  gap:18px;
  align-items:center;
  font-size:14px}
.intro {
  padding:58px 0 38px}
.eyebrow {
  margin:0 0 9px;
  font-size:11px;
  font-weight:750;
  letter-spacing:1.9px;
  color:var(--accent)}
h1 {
  font-size:clamp(31px,4.5vw,48px);
  line-height:1.14;
  font-weight:650;
  letter-spacing:-1.8px;
  margin:0 0 18px}
h2 {
  font-size:23px;
  letter-spacing:-.7px;
  line-height:1.25;
  margin:0}
h3 {
  font-size:20px;
  letter-spacing:-.4px;
  margin:0 0 10px}
.lede {
  font-size:17px;
  color:var(--muted);
  max-width:650px;
  margin:0}
.panel {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:18px;
  padding:27px 28px 19px}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-bottom:24px}
.badge {
  display:inline-block;
  white-space:nowrap;
  font-size:12px;
  border:1px solid var(--line);
  padding:5px 10px;
  border-radius:6px;
  color:var(--muted);
  background:var(--soft)}
.filters {
  display:flex;
  gap:12px;
  align-items:flex-end;
  margin-bottom:23px}
.filters label {
  display:flex;
  flex-direction:column;
  gap:5px;
  color:var(--muted);
  font-size:12px;
  font-weight:600}
.search-label {
  flex:1}
input,select {
  min-height:43px;
  padding:9px 12px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:7px;
  color:var(--ink);
  font-size:14px}
input {
  width:100%}
.button {
  min-height:43px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:7px;
  background:var(--accent);
  color:var(--on-accent);
  border:1px solid var(--accent);
  padding:8px 17px;
  font-weight:650;
  font-size:14px;
  white-space:nowrap}
.button.secondary {
  background:var(--surface);
  color:var(--ink);
  border-color:var(--line)}
.table-wrap {
  overflow:auto}
table {
  width:100%;
  border-collapse:collapse;
  text-align:left}
th {
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--muted);
  font-weight:650;
  padding:11px 12px;
  border-bottom:1px solid var(--line);
  background:var(--soft)}
td {
  padding:18px 12px;
  border-bottom:1px solid var(--line);
  vertical-align:middle}
.container-name {
  border:0;
  padding:0;
  background:none;
  color:var(--ink);
  font-weight:650;
  text-align:left;
  font-size:15px}
.container-name:hover {
  color:var(--accent);
  text-decoration:underline}
.row-meta {
  font-size:11px;
  color:var(--muted);
  margin-top:3px}
.image-cell {
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:11px;
  max-width:250px;
  overflow-wrap:anywhere}
.status {
  font-size:12px;
  display:inline-flex;
  align-items:center;
  gap:6px}
.status:before {
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:#859295}
.status.running:before {
  background:#24886b}
.row-actions {
  text-align:right;
  white-space:nowrap}
.actions-heading {
  text-align:right}
.action-button {
  font-size:12px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:6px;
  padding:8px 10px;
  color:var(--ink);
  margin-left:5px;
  min-height:36px}
.action-button:hover {
  background:var(--soft);
  border-color:#8fb5aa}
.section-footnote,.inventory-count {
  font-size:11px;
  color:var(--muted);
  margin:13px 0 0}
.inventory-count {
  text-align:right}
.catalog-section {
  margin:40px 0 55px}
.cards {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px}
.card {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px;
  padding:25px;
  min-height:170px}
.card-group {
  color:var(--accent);
  font-size:11px;
  font-weight:650;
  text-transform:uppercase;
  letter-spacing:1px;
  margin:0 0 13px}
.card h2 a,.card h3 a {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px}
.card h2 span,.card h3 span {
  font-size:21px;
  color:var(--muted);
  font-weight:400}
.card>p:last-child {
  font-size:13px;
  color:var(--muted);
  margin:0}
footer {
  display:flex;
  justify-content:space-between;
  padding:25px 0 38px;
  border-top:1px solid var(--line);
  font-size:12px;
  color:var(--muted)}
.demo-note {
  background:var(--soft);
  border:1px solid var(--line);
  color:var(--accent);
  padding:10px 14px;
  border-radius:8px;
  font-size:12px;
  margin-top:22px}
.empty-state {
  padding:30px 12px;
  color:var(--muted);
  text-align:center}
.error {
  color:var(--error)}
.skip-link {
  position:absolute;
  top:-80px;
  left:20px;
  background:var(--surface);
  padding:10px;
  z-index:5}
.skip-link:focus {
  top:10px}
dialog {
  border:1px solid var(--line);
  border-radius:17px;
  max-width:640px;
  width:calc(100% - 32px);
  padding:27px 30px;
  color:var(--ink);
  background:var(--surface);
  max-height:90dvh;
  overflow:auto;
  box-shadow:0 20px 80px #13282635}
dialog::backdrop {
  background:#11222980;
  backdrop-filter:blur(3px)}
.dialog-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px}
.close-button {
  background:none;
  border:none;
  font-size:28px;
  line-height:1;
  padding:5px 8px;
  color:var(--muted)}
#dialog-summary {
  font-size:13px;
  margin:12px 0 20px}
.dialog-actions {
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top:25px;
  padding-top:20px;
  border-top:1px solid var(--line)}
.warning-box {
  border:1px solid var(--warning-line);
  background:var(--warning-bg);
  border-radius:9px;
  padding:16px 19px;
  margin:15px 0}
.warning-box p {
  font-size:13px;
  line-height:1.6;
  margin:0 0 10px}
.warning-box p:last-child {
  margin:0}
.details-list {
  display:grid;
  grid-template-columns:90px minmax(0,1fr);
  font-size:12px;
  gap:8px 14px}
.details-list dt {
  color:var(--muted)}
.details-list dd {
  margin:0;
  overflow-wrap:anywhere;
  font-family:ui-monospace,monospace}
.mount-list {
  list-style:none;
  padding:0;
  display:grid;
  gap:8px}
.mount-list li {
  padding:12px;
  background:var(--soft);
  border:1px solid var(--line);
  border-radius:7px;
  font-size:12px;
  overflow-wrap:anywhere}
.mount-list strong {
  display:block}
.notice {
  font-size:12px;
  background:var(--soft);
  padding:12px;
  border-radius:7px}
.htmx-request {
  opacity:.7}
[hidden] {
  display:none!important}
@media(max-width:850px) {
  .shell {
    padding:0 22px  }
  .cards {
    grid-template-columns:repeat(2,minmax(0,1fr))  }
  .image-cell {
    max-width:180px  }
  .panel {
    padding:23px 18px 18px  }
  .identity {
    display:none  }
}
@media(max-width:540px) {
  .shell {
    padding:0 16px  }
  .topbar {
    height:80px  }
  .intro {
    padding:35px 0 28px  }
  .lede {
    font-size:15px  }
  .brand {
    font-size:21px  }
  .brand-mark {
    height:35px;
    width:35px  }
  .account {
    gap:8px  }
  .badge {
    font-size:10px  }
  .cards {
    grid-template-columns:1fr  }
  .filters {
    flex-wrap:wrap;
    gap:10px  }
  .search-label {
    flex-basis:100%  }
  .filters label:not(.search-label) {
    flex:1  }
  .filters select {
    width:100%  }
  .panel {
    padding:20px 14px 16px  }
  .section-heading {
    gap:10px  }
  h2 {
    font-size:21px  }
  th,td {
    padding-left:9px;
    padding-right:9px  }
  .image-cell {
    min-width:140px  }
  .row-actions {
    min-width:160px  }
  td:first-child {
    min-width:150px  }
  .section-footnote {
    line-height:1.7  }
  .card {
    min-height:140px  }
  footer {
    gap:20px;
    font-size:11px  }
  dialog {
    padding:20px  }
  .dialog-actions {
    flex-wrap:wrap  }
  .dialog-actions .button {
    flex:1  }
}
dialog[open] {
  display:flex;
  flex-direction:column;
  overflow:hidden}
dialog>.dialog-heading,dialog>h2,dialog>#dialog-summary,.dialog-actions {
  flex-shrink:0}
#dialog-content {
  overflow:auto;
  min-height:0;
  padding-right:8px}
@media(max-width:540px) {
  .table-wrap {
    overflow:visible  }
  table,tbody,tr,td {
    display:block  }
  thead {
    display:none  }
  tbody tr {
    padding:14px 0;
    border-bottom:1px solid var(--line)  }
  td {
    border:0;
    padding:4px 0  }
  .row-actions {
    text-align:left;
    margin-top:8px;
    min-width:0  }
  .row-actions .action-button {
    margin-left:0;
    margin-right:7px;
    min-height:42px;
    padding:9px 14px  }
  .image-cell {
    max-width:100%;
    min-width:0;
    overflow-wrap:anywhere  }
  .image-cell:before {
    content:attr(data-label);
    color:var(--muted)  }
  td:first-child {
    min-width:0  }
  .empty-state {
    padding:20px 0  }
}

.activity-details-button { margin-top:12px }
.activity-tools { display:flex; gap:10px; flex-wrap:wrap; margin:20px 0 10px }
.acknowledgement { display:flex; align-items:flex-start; gap:10px; font-size:13px; line-height:1.6; margin:20px 0 }
.acknowledgement input { width:18px; height:18px; flex:0 0 18px; margin-top:3px }
.activity-panel { margin-top:24px }
.activity-list { list-style:none; padding:0; margin:0 }
.activity-list li { padding:18px 0; border-top:1px solid var(--line) }
.activity-item-heading { display:flex; align-items:center; justify-content:space-between; gap:14px }
.activity-item-heading strong { overflow-wrap:anywhere; min-width:0 }
.activity-outcome { margin:10px 0 0; font-size:13px; color:var(--muted) }
.badge.uncertain { color:var(--warning-ink); border-color:var(--warning-line); background:var(--warning-bg) }
@media(max-width:540px) {
 .activity-panel>.section-heading { flex-wrap:wrap }
 .activity-item-heading { align-items:flex-start; flex-direction:column; gap:7px }
}

.action-checks { list-style:none; margin:12px 0 22px; padding:0; font-size:12px }
.action-checks li { display:grid; grid-template-columns:100px 1fr; gap:10px; margin:10px 0; align-items:start }
.check-passed { color:var(--accent) }
.check-blocked { color:var(--warning-ink) }
@media(max-width:540px) { .action-checks li { grid-template-columns:1fr; gap:2px } }

:root[data-theme=dark] {
  color-scheme:dark;
  --bg:#111a1e;
  --surface:#19262b;
  --ink:#e4eeeb;
  --muted:#a5b8b7;
  --line:#34484c;
  --accent:#82d6c3;
  --soft:#203a36;
  --on-accent:#102c26;
  --warning-bg:#3a3020;
  --warning-line:#746038;
  --warning-ink:#f1cb84;
  --error:#ffaaa0;
}
@media(prefers-color-scheme:dark) {
 :root[data-theme=system] {
  color-scheme:dark;
  --bg:#111a1e;
  --surface:#19262b;
  --ink:#e4eeeb;
  --muted:#a5b8b7;
  --line:#34484c;
  --accent:#82d6c3;
  --soft:#203a36;
  --on-accent:#102c26;
  --warning-bg:#3a3020;
  --warning-line:#746038;
  --warning-ink:#f1cb84;
  --error:#ffaaa0;
 }
}

.settings-panel { margin-bottom:24px }
.settings-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px }
.settings-grid label { display:flex; flex-direction:column; gap:8px; font-size:13px; font-weight:600 }
.settings-grid select { width:100% }
.settings-help { font-size:13px; color:var(--muted); max-width:800px }
.settings-save { display:flex; align-items:center; gap:16px; flex-wrap:wrap }
.settings-status { min-height:26px; margin:16px 0; font-size:14px }
.settings-status a { text-decoration:underline }
.project-order { list-style:none; padding:0; margin:22px 0 0 }
.project-order li { display:flex; justify-content:space-between; align-items:center; gap:12px; border-top:1px solid var(--line); padding:14px 0 }
.favorite-choice { display:flex; align-items:center; gap:14px; min-width:0; cursor:pointer }
.favorite-choice input { width:20px; height:20px; min-height:20px; padding:0; accent-color:var(--accent); flex-shrink:0 }
.favorite-choice span { min-width:0; overflow-wrap:anywhere }
.favorite-choice strong { display:block; font-size:14px }
.favorite-choice small { color:var(--muted) }
.order-controls { display:flex; flex-shrink:0; gap:5px }
.order-controls button { margin:0; min-width:42px; min-height:42px; font-size:18px }
.favorite-mark { color:var(--accent); margin-left:6px }
.account { flex-wrap:wrap }
@media(max-width:650px) {
 .settings-grid { grid-template-columns:1fr }
}
@media(max-width:540px) {
 .topbar { height:auto; min-height:100px; padding:16px 0; flex-wrap:wrap; gap:12px }
 .account { margin-left:auto; font-size:12px; gap:10px }
 .settings-save .button { flex:1; padding-inline:12px }
 .settings-save>a { flex-basis:100%; font-size:13px }
}

.card h2 { font-size:20px; letter-spacing:-.4px; margin:0 0 10px }
.catalog-section:only-child { padding-top:48px }
.catalog-section:only-child h1 { margin:0 }
.system-panel { margin-top:32px }
.system-details { grid-template-columns:minmax(90px,160px) minmax(0,1fr) }
.system-panel>.section-heading { flex-wrap:wrap }