:root {
  color-scheme: light dark;
  --bg: #07100f;
  --panel: rgba(16, 25, 24, .92);
  --panel-soft: rgba(7, 16, 15, .48);
  --line: rgba(234, 245, 240, .14);
  --text: #eef7f3;
  --muted: #99aaa5;
  --green: #32d583;
  --cyan: #6ed7e8;
  --link: #c9f7dc;
  --red: #ff6b6b;
  --button-text: #06110f;
  --code-bg: rgba(7, 16, 15, .86);
  --shadow: 0 14px 42px rgba(0, 0, 0, .28);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f5f7f6;
    --panel: rgba(255, 255, 255, .92);
    --panel-soft: rgba(244, 248, 247, .92);
    --line: rgba(20, 35, 31, .13);
    --text: #10211d;
    --muted: #5d6f69;
    --green: #18a66a;
    --cyan: #178ea0;
    --link: #0d6658;
    --red: #d94b4b;
    --button-text: #ffffff;
    --code-bg: rgba(235, 242, 240, .95);
    --shadow: 0 10px 28px rgba(24, 38, 35, .08);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
}

body.dialog-open {
  overflow: hidden;
}

button, input, select { font: inherit; }

.login-page {
  display: grid;
  place-items: center;
  padding: 16px;
}

.login-shell {
  width: min(460px, 100%);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.brand.compact { margin: 0; }

.mark {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: block;
  flex: 0 0 32px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.mark img {
  display: block;
  width: 100%;
  height: 100%;
}

h1, h2, h3, p { margin: 0; }
h1 { font-size: 1rem; letter-spacing: 0; }
h2 { font-size: .95rem; }
h3 { font-size: .9rem; }
p, span { color: var(--muted); }

h1 .label-badge {
  vertical-align: 1px;
}

.login-card, .panel, .metrics article, .service {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.login-card {
  padding: 14px;
  display: grid;
  gap: 10px;
}

label { display: grid; gap: 4px; }

input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--code-bg);
  color: var(--text);
  min-height: 30px;
  padding: 0 8px;
}

select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--code-bg);
  color: var(--text);
  min-height: 30px;
  padding: 0 8px;
}

code {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--code-bg);
  color: #c9f7dc;
  padding: 6px 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .76rem;
}

@media (prefers-color-scheme: light) {
  code { color: #146247; }
}

button, .actions a {
  border: 0;
  border-radius: 8px;
  min-height: 30px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  color: var(--button-text);
  background: linear-gradient(135deg, var(--green), var(--cyan));
  font-weight: 760;
  text-decoration: none;
  cursor: pointer;
}

button.danger {
  background: var(--red);
  color: #160909;
}

.current-user {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 8px;
  color: var(--muted);
  background: var(--panel-soft);
  font-size: .78rem;
  font-weight: 760;
}

.link-button {
  min-height: 0;
  margin-left: 6px;
  padding: 0;
  background: transparent;
  color: var(--link);
  font-weight: 720;
  text-decoration: none;
}

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

.error, .success {
  border: 1px solid rgba(255, 107, 107, .35);
  background: rgba(255, 107, 107, .12);
  color: #ffd7d7;
  padding: 10px 12px;
  border-radius: 8px;
}

.success {
  border-color: rgba(50, 213, 131, .35);
  background: rgba(50, 213, 131, .12);
  color: #c9f7dc;
}

.secondary-link {
  color: var(--muted);
  text-align: center;
  text-decoration: none;
}

.topbar {
  width: min(1480px, calc(100% - 20px));
  margin: 0 auto;
  padding: 10px 0;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }

.dashboard {
  width: min(1480px, calc(100% - 20px));
  margin: 0 auto 18px;
}

.server-timing {
  width: min(1480px, calc(100% - 20px));
  margin: 0 auto 14px;
  color: var(--muted);
  font-size: .74rem;
  text-align: right;
}

.metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}

.metrics article { padding: 8px 10px; min-height: 54px; display: grid; align-content: space-between; }
.metrics strong { font-size: .98rem; overflow-wrap: anywhere; }

.panel {
  padding: 10px;
  margin-bottom: 8px;
}

.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.panel-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.system-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}

.system-grid div {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
  padding: 8px 10px;
  display: grid;
  gap: 4px;
  min-width: 0;
  min-height: 54px;
  align-content: space-between;
}

.system-grid strong {
  overflow-wrap: anywhere;
}

.machine-form {
  display: grid;
  grid-template-columns: minmax(180px, .9fr) minmax(160px, .7fr) auto;
  gap: 8px;
  align-items: end;
  margin-bottom: 8px;
}

.machine-form button {
  min-height: 26px;
  padding: 0 8px;
  font-size: .78rem;
  white-space: nowrap;
}

.repo-form,
.mapping-form,
.user-form,
.environment-form {
  display: grid;
  grid-template-columns: minmax(95px, .55fr) minmax(110px, .65fr) minmax(90px, .5fr) minmax(220px, 1.25fr) minmax(110px, .65fr) auto;
  gap: 8px;
  align-items: end;
  margin: 0 0 10px;
}

.mapping-form {
  grid-template-columns: minmax(120px, .35fr) minmax(260px, 1fr) minmax(260px, 1fr) auto;
}

.user-form {
  grid-template-columns: minmax(130px, .7fr) minmax(130px, .7fr) minmax(100px, .4fr) minmax(220px, 1fr) auto;
}

.environment-form {
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) minmax(150px, .7fr) minmax(120px, auto) minmax(150px, auto) auto;
}

.inline-check {
  display: flex;
  gap: 7px;
  align-items: center;
  min-height: 30px;
}

.inline-check input {
  width: auto;
  min-height: 0;
}

.section-rule {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0 0 8px;
}

.sync-row {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 7px;
  display: flex;
  gap: 7px;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.sync-row > span {
  min-width: 220px;
  flex: 0 1 360px;
}

.repo-edit-form {
  display: grid;
  grid-template-columns: minmax(90px, .5fr) minmax(100px, .58fr) minmax(78px, .44fr) minmax(180px, 1.05fr) minmax(95px, .55fr) auto;
  gap: 6px;
  align-items: center;
  flex: 1 1 680px;
}

.repo-action-form {
  display: inline-flex;
}

.machine-list {
  display: grid;
  gap: 6px;
}

.machine-table,
.repo-table,
.mapping-table,
.user-table {
  display: grid;
  gap: 1px;
  overflow-x: auto;
}

.machine-row,
.repo-row,
.mapping-row,
.user-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.1fr) minmax(76px, .4fr) minmax(76px, .4fr) minmax(76px, .4fr) minmax(118px, .58fr) minmax(92px, .48fr) minmax(180px, .9fr) 44px;
  gap: 8px;
  min-width: 980px;
  align-items: center;
  padding: 6px 8px;
  border: 1px solid var(--line);
  background: var(--panel-soft);
}

.repo-row {
  grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr) minmax(100px, .65fr) minmax(110px, .7fr) 44px;
}

.mapping-row {
  grid-template-columns: minmax(140px, .35fr) minmax(420px, 1fr) 44px;
}

.user-row {
  grid-template-columns: minmax(180px, .8fr) minmax(100px, .4fr) minmax(260px, 1fr) 44px;
  min-width: 620px;
}

.machine-head,
.repo-head,
.mapping-head,
.user-head {
  background: rgba(50, 213, 131, .12);
  font-weight: 800;
}

.machine-actions {
  display: flex;
  justify-content: flex-end;
}

.label-badge {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  max-width: 120px;
  margin-left: 4px;
  padding: 1px 6px;
  border: 1px solid rgba(110, 215, 232, .34);
  border-radius: 999px;
  background: rgba(110, 215, 232, .12);
  color: var(--text);
  font-size: .72rem;
  font-weight: 720;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.machine {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 8px;
  display: grid;
  grid-template-columns: minmax(250px, .42fr) minmax(360px, 1fr);
  gap: 8px;
  align-items: start;
}

.machine-main {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.machine-command {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.machine-command > code,
.machine-command > .clip-value {
  min-width: 0;
  max-width: 100%;
}

.machine-inline-form {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.machine-inline-form input {
  min-width: 140px;
  flex: 1;
}

.inline-link {
  color: var(--link);
  text-decoration: none;
}

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

.truncate {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.icon-button {
  width: 30px;
  min-height: 30px;
  padding: 0;
  justify-content: center;
}

.icon-button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.package-table {
  display: grid;
  gap: 1px;
  overflow-x: auto;
}

.scan-progress {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  margin: 0 0 8px;
  padding: 7px 8px;
}

.scan-progress div {
  display: grid;
  grid-template-columns: minmax(120px, 240px) minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.scan-progress progress {
  width: 100%;
  height: 12px;
  accent-color: var(--green);
}

.scan-progress span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filter-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0 8px;
  font-size: .78rem;
  color: var(--muted);
}

.filter-badges > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.filter-badge,
.repo-filter-button {
  max-width: 100%;
  border: 1px solid var(--line);
  background: rgba(110, 215, 232, .12);
  color: var(--text);
  cursor: pointer;
}

.filter-badge {
  border-radius: 999px;
  padding: 3px 8px;
  font-size: .75rem;
}

.filter-badge::after {
  content: " x";
  color: var(--muted);
}

.repo-filter-button {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--link);
  font: inherit;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.truncate-inline {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

.package-row {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) minmax(190px, 1fr) minmax(190px, 1fr) minmax(120px, .58fr) minmax(112px, .52fr) minmax(170px, .9fr) minmax(120px, .65fr) minmax(70px, .34fr) minmax(115px, .58fr);
  gap: 8px;
  min-width: 1360px;
  padding: 5px 8px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
}

.package-row[hidden] {
  display: none;
}

.package-head {
  background: rgba(50, 213, 131, .12);
  font-weight: 800;
}

.package-row.outdated {
  background: rgba(245, 196, 81, .14);
  border-color: rgba(245, 196, 81, .34);
}

.package-row.apt-upgradable-only {
  background: rgba(110, 215, 232, .16);
  border-color: rgba(110, 215, 232, .38);
}

.package-row.unknown-version {
  background: rgba(148, 163, 184, .14);
  border-color: rgba(148, 163, 184, .38);
}

.package-row.critical-vulnerability,
.compact-row.critical-vulnerability {
  background: rgba(255, 107, 107, .18);
  border-color: rgba(255, 107, 107, .52);
}

.package-row.kernel-current {
  background: rgba(50, 213, 131, .16);
  border-color: rgba(50, 213, 131, .46);
}

.package-row.kernel-stale {
  background: rgba(255, 107, 107, .18);
  border-color: rgba(255, 107, 107, .5);
}

.service {
  padding: 8px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  box-shadow: none;
}

.badge {
  border-radius: 999px;
  padding: 3px 7px;
  font-size: .74rem;
  color: #06110f;
  font-weight: 800;
}

.badge.ok { background: var(--green); }
.badge.bad { background: var(--red); }

.vulnerability-alert-row {
  background: rgba(255, 107, 107, .16);
  border-color: rgba(255, 107, 107, .48);
}

.clip-value {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 26px;
  justify-content: flex-start;
  border: 1px solid var(--line);
  background: var(--code-bg);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .74rem;
  font-weight: 520;
  padding: 0 7px;
  overflow: hidden;
}

.clip-value span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: inherit;
}

.compact-dialog {
  width: min(860px, calc(100vw - 28px));
  max-height: min(680px, calc(100vh - 20px));
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  box-shadow: var(--shadow);
  padding: 10px;
}

.compact-dialog::backdrop {
  background: rgba(0, 0, 0, .42);
}

.dialog-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.dialog-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.dialog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.dialog-grid .wide-field {
  grid-column: 1 / -1;
}

.dialog-grid div,
.copy-block {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 8px;
  min-width: 0;
}

.dialog-grid strong {
  display: block;
  overflow-wrap: anywhere;
}

.copy-block {
  display: grid;
  gap: 6px;
  margin-bottom: 8px;
}

.copy-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: start;
}

.copy-row code {
  max-height: 170px;
}

.copy-row code.multiline {
  white-space: pre-wrap;
  word-break: break-word;
}

.dialog-rule {
  margin-top: 10px;
}

.dialog-footer {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}

.compact-dialog pre {
  max-height: 420px;
  overflow: auto;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--code-bg);
  padding: 8px;
  white-space: pre-wrap;
  word-break: break-word;
  font: .78rem/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

#cve-detail-content {
  display: grid;
  gap: 8px;
}

.cve-info-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 8px;
  display: grid;
  gap: 7px;
  min-width: 0;
}

.cve-info-card p {
  color: var(--text);
  line-height: 1.38;
}

.cve-kv-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.cve-kv-grid div {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--code-bg);
  padding: 6px 7px;
  min-width: 0;
}

.cve-kv-grid strong {
  display: block;
  overflow-wrap: anywhere;
}

.cve-detail-table {
  display: grid;
  gap: 1px;
  overflow-x: auto;
}

.cve-detail-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: 8px;
  min-width: 720px;
  padding: 5px 7px;
  border: 1px solid var(--line);
  background: var(--code-bg);
}

.cve-detail-head {
  background: rgba(50, 213, 131, .12);
  font-weight: 800;
}

.cve-detail-row span {
  color: var(--text);
  overflow-wrap: anywhere;
}

.cve-reference-list {
  display: grid;
  gap: 5px;
}

.cve-reference-list div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, .45fr);
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--code-bg);
  padding: 6px 7px;
}

.cve-reference-list span {
  overflow-wrap: anywhere;
}

.cve-raw-json summary {
  cursor: pointer;
  color: var(--link);
  font-weight: 760;
}

.compact-table {
  display: grid;
  gap: 1px;
  overflow-x: auto;
}

.compact-row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(130px, .7fr);
  gap: 8px;
  min-width: 300px;
  align-items: center;
  padding: 5px 8px;
  border: 1px solid var(--line);
  background: var(--panel-soft);
}

.compact-head {
  background: rgba(50, 213, 131, .12);
  font-weight: 800;
}

@media (max-width: 760px) {
  .topbar { align-items: flex-start; flex-direction: column; }
  .metrics, .service-grid, .system-grid, .dialog-grid { grid-template-columns: 1fr; }
  .machine-form, .repo-form, .mapping-form, .user-form, .environment-form, .repo-edit-form, .machine { grid-template-columns: 1fr; }
  .copy-row { grid-template-columns: 1fr; }
  .panel-head { align-items: flex-start; flex-direction: column; }
  .panel-actions { justify-content: flex-start; }
  .scan-progress div { grid-template-columns: 1fr; }
  .cve-kv-grid, .cve-reference-list div { grid-template-columns: 1fr; }
}