/* Hide Alpine-managed elements until Alpine initialises (prevents FOUC) */
[x-cloak] { display: none !important; }

/* ── Reset & base ────────────────────────────────────────────────────────── */

:root {
  color-scheme: dark;

  --background: #14181d;
  --surface: #1b2026;
  --surface-2: #222930;
  --border: #313a43;
  --text: #d7dde4;
  --text-muted: #98a4af;
  --primary: #88a784;
  --success: #92af84;
  --warning: #b59a67;
  --danger: #ba7f7d;
  --info: #708da8;
  --selected: rgb(136 167 132 / 0.16);
  --hover: #262d35;

  --nav: #171c22;
  --shell: #101419;
  --text-subtle: #77828d;
  --text-on-accent: #111710;
  --primary-strong: #9eb798;
  --focus-ring: rgb(136 167 132 / 0.22);
  --hover-border: #3c4651;
  --muted-surface: rgb(152 164 175 / 0.1);
  --primary-surface: rgb(136 167 132 / 0.15);
  --success-surface: rgb(146 175 132 / 0.15);
  --warning-surface: rgb(181 154 103 / 0.16);
  --danger-surface: rgb(186 127 125 / 0.16);
  --info-surface: rgb(112 141 168 / 0.16);
  --chart-grid: #303944;
  --chart-track: #28303a;
  --chart-1: #88a784;
  --chart-2: #708da8;
  --chart-3: #b59a67;
  --chart-4: #8794a1;
  --chart-5: #8f7c73;

  /* Backward-compatible aliases for the existing stylesheet. */
  --bg-app: var(--background);
  --bg-nav: var(--nav);
  --bg-panel: var(--surface);
  --bg-panel-alt: var(--surface-2);
  --bg-panel-hover: var(--hover);
  --bg-shell: var(--shell);
  --line: var(--border);
  --line-strong: var(--hover-border);
  --text-primary: var(--text);
  --text-secondary: var(--text-muted);
  --accent: var(--primary);
  --accent-strong: var(--primary-strong);
  --success-bg: var(--success-surface);
  --danger-bg: var(--danger-surface);
  --warn: var(--warning);
  --warn-bg: var(--warning-surface);
  --info-bg: var(--info-surface);
  --purple: var(--chart-5);
  --purple-bg: rgb(143 124 115 / 0.16);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  background: var(--bg-app);
  color: var(--text-primary);
  font-size: 14px;
  font-variant-ligatures: none;
  text-rendering: optimizeLegibility;
}

a { color: var(--accent-strong); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Layout ──────────────────────────────────────────────────────────────── */

.layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 100vh;
}

main {
  padding: 2rem;
  overflow-y: auto;
}

/* ── Nav ─────────────────────────────────────────────────────────────────── */

nav {
  background: #161b22;
  border-right: 1px solid #30363d;
  display: flex;
  flex-direction: column;
  padding: 1.5rem 0;
  position: sticky;
  top: 0;
  height: 100vh;
}

.logo {
  color: #7ee787;
  font-size: 1.2rem;
  font-weight: bold;
  padding: 0 1.5rem 1.5rem;
  border-bottom: 1px solid #30363d;
}

.tree { font-size: 1rem; }

nav ul {
  list-style: none;
  padding: 1rem 0;
  flex: 1;
}

nav li button {
  background: none;
  border: none;
  color: #8b949e;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9rem;
  padding: 0.6rem 1.5rem;
  text-align: left;
  width: 100%;
}

nav li button:hover { color: #c9d1d9; background: #21262d; }
nav li.active button { color: #7ee787; border-left: 2px solid #7ee787; }

.bottom { padding: 1rem 1.5rem; }

.logout {
  background: none;
  border: 1px solid #30363d;
  border-radius: 6px;
  color: #8b949e;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.8rem;
  padding: 0.4rem 0.8rem;
  width: 100%;
}

.logout:hover { color: #f85149; border-color: #f85149; }

/* ── Login card ──────────────────────────────────────────────────────────── */

.login {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.card {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 8px;
  padding: 2.5rem;
  width: 340px;
}

.card h1 { font-size: 1.8rem; color: #7ee787; margin-bottom: 0.25rem; }
.sub { color: #8b949e; margin-bottom: 2rem; }

form { display: flex; flex-direction: column; gap: 0.75rem; }

input {
  background: #0e1117;
  border: 1px solid #30363d;
  border-radius: 6px;
  color: #c9d1d9;
  font-family: inherit;
  font-size: 0.9rem;
  padding: 0.6rem 0.8rem;
  outline: none;
}

input:focus { border-color: #58a6ff; }

.login button {
  background: #238636;
  border: none;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9rem;
  padding: 0.6rem;
}

.login button:disabled { opacity: 0.5; cursor: default; }
.login button:not(:disabled):hover { background: #2ea043; }

/* ── Shared utilities ────────────────────────────────────────────────────── */

.error  { color: #f85149; font-size: 0.8rem; }
.muted  { color: #8b949e; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Placeholder shown while a view is not yet ported */
.placeholder { color: #8b949e; padding: 2rem 0; font-size: 0.9rem; }

/* ── PackageDetail ───────────────────────────────────────────────────────── */

h2 { color: #e6edf3; margin-bottom: 0.25rem; }

.pd-back {
  background: none; border: none; color: #58a6ff;
  cursor: pointer; font-family: inherit; font-size: 0.9rem;
  margin-bottom: 1.5rem; padding: 0;
}
.pd-back:hover { text-decoration: underline; }

.pd-header { margin-bottom: 1rem; }
.pd-header-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.25rem; }
.pd-header-row h2 { flex: 1; margin: 0; }

.pd-btn-install {
  background: #1a7f37; border: none; border-radius: 6px;
  color: #fff; cursor: pointer; font-family: inherit;
  font-size: 0.82rem; padding: 0.35rem 0.9rem; white-space: nowrap;
}
.pd-btn-install:hover { background: #2ea043; }

.pd-installed-badge { color: #3fb950; font-size: 0.8rem; white-space: nowrap; }

.pd-btn-uninstall {
  background: none; border: 1px solid #f8514966; border-radius: 6px;
  color: #f85149; cursor: pointer; font-family: inherit;
  font-size: 0.78rem; padding: 0.25rem 0.7rem; white-space: nowrap;
}
.pd-btn-uninstall:hover { background: #3a1a1a; border-color: #f85149; }

.pd-desc { color: #8b949e; margin-bottom: 0.25rem; }

.pd-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.pd-badge {
  background: #21262d; border-radius: 4px;
  color: #c9d1d9; font-size: 0.75rem; padding: 0.2rem 0.5rem;
}
.pd-badge.pd-muted { color: #8b949e; }

.pd-tabs {
  display: flex; gap: 0.25rem;
  margin-bottom: 1.5rem; border-bottom: 1px solid #30363d;
}
.pd-tabs button {
  background: none; border: none; border-bottom: 2px solid transparent;
  color: #8b949e; cursor: pointer; font-family: inherit;
  font-size: 0.85rem; padding: 0.5rem 1rem; margin-bottom: -1px;
}
.pd-tabs button.active { color: #7ee787; border-bottom-color: #7ee787; }
.pd-tabs button:hover:not(.active) { color: #c9d1d9; }

.pd-panel h4 {
  color: #8b949e; font-size: 0.75rem;
  text-transform: uppercase; margin-bottom: 0.75rem;
}

.dep-raw {
  background: #161b22; border: 1px solid #30363d; border-radius: 6px;
  color: #c9d1d9; font-family: inherit; font-size: 0.8rem;
  overflow-x: auto; padding: 1rem; white-space: pre-wrap; word-break: break-all;
}

.pd-flags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pd-flag { border-radius: 4px; font-size: 0.8rem; padding: 0.2rem 0.5rem; }
.pd-flag.on  { background: #1a3a1e; color: #7ee787; }
.pd-flag.off { background: #1c1c1c; color: #6e7681; }
.pd-use-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 0.8rem;
}
.pd-use-card {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 8px;
  padding: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.pd-use-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.pd-use-default {
  color: #8b949e;
  font-size: 0.72rem;
}
.pd-use-origin {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.pd-use-origin-label {
  color: #e6edf3;
  font-size: 0.8rem;
}
.pd-use-origin-file,
.pd-use-history-file {
  color: #8b949e;
  font-size: 0.73rem;
  word-break: break-all;
}
.pd-use-history {
  border-top: 1px solid #21262d;
  padding-top: 0.7rem;
}
.pd-use-history summary {
  cursor: pointer;
  color: #58a6ff;
  font-size: 0.78rem;
}
.pd-use-history-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-top: 0.7rem;
}
.pd-use-history-item {
  display: grid;
  grid-template-columns: auto auto auto 1fr;
  gap: 0.5rem;
  align-items: start;
  font-size: 0.76rem;
}
.pd-use-history-token {
  color: #7ee787;
  background: #0e1117;
  border: 1px solid #30363d;
  border-radius: 4px;
  padding: 0.1rem 0.35rem;
}
.pd-use-history-state {
  color: #c9d1d9;
}
.pd-use-history-origin {
  color: #d2a8ff;
}

.ufi-view {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ufi-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.ufi-toolbar-copy {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-width: 80ch;
}

.ufi-toolbar-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.ufi-detail-view {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  align-items: stretch;
}

.ufi-detail-view .pd-back {
  align-self: flex-start;
  margin-bottom: 0;
}

.ufi-layout {
  display: grid;
  grid-template-columns: minmax(320px, 420px) minmax(0, 1.55fr);
  gap: 1rem;
  align-items: start;
}

.ufi-sidebar,
.ufi-detail-panel {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.ufi-sidebar {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  position: sticky;
  top: 2rem;
  max-height: calc(100vh - 4rem);
}

.ufi-sidebar input {
  width: 100%;
}

.ufi-filter-row,
.ufi-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.ufi-filter-chip,
.ufi-inline-chip {
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.74rem;
  padding: 0.25rem 0.6rem;
  white-space: nowrap;
}

.ufi-filter-chip {
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}

.ufi-filter-chip:hover,
.ufi-filter-chip.active {
  background: var(--bg-panel-hover);
  border-color: var(--accent);
  color: var(--text-primary);
}

.ufi-flag-index {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  overflow: auto;
  padding-right: 0.2rem;
}

.ufi-flag-index-item {
  width: 100%;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-family: inherit;
  font-size: 0.85rem;
  padding: 0.8rem;
  text-align: left;
}

.ufi-flag-index-item:hover {
  background: var(--bg-panel-hover);
  border-color: var(--line-strong);
}

.ufi-flag-index-item.active {
  background: rgb(96 165 250 / 0.1);
  border-color: var(--accent);
}

.ufi-flag-index-item:focus-visible,
.ufi-related-package-link:focus-visible,
.ufi-filter-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.ufi-flag-index-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.ufi-flag-count,
.ufi-flag-index-summary,
.ufi-related-package-meta,
.ufi-related-package-origin {
  color: var(--text-secondary);
  font-size: 0.76rem;
}

.ufi-flag-index-desc {
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 0.78rem;
  overflow: hidden;
}

.ufi-detail-panel {
  min-height: 60vh;
  padding: 1.25rem;
}

.ufi-list-flag-cell {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.ufi-empty {
  min-height: 24rem;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--text-secondary);
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  padding: 2rem;
}

.ufi-flag-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.ufi-flag-detail-copy h3 {
  color: var(--text-primary);
  font-size: 1.15rem;
}

.ufi-package-description {
  color: var(--text-secondary);
  margin: 0.3rem 0 0.5rem;
  max-width: 80ch;
}

.ufi-inline-chip.is-on {
  background: var(--success-bg);
  border-color: rgb(74 222 128 / 0.45);
  color: var(--success);
}

.ufi-inline-chip.is-off {
  background: var(--danger-bg);
  border-color: rgb(248 113 113 / 0.45);
  color: var(--danger);
}

.ufi-inline-chip.is-forced {
  background: var(--success-bg);
  border-color: rgb(74 222 128 / 0.45);
  color: var(--success);
}

.ufi-inline-chip.is-masked {
  background: var(--danger-bg);
  border-color: rgb(248 113 113 / 0.45);
  color: var(--danger);
}

.ufi-inline-chip.is-local {
  background: var(--info-bg);
  border-color: rgb(103 232 249 / 0.45);
  color: var(--info);
}

.ufi-inline-chip.is-warn {
  background: var(--warning-surface);
  border-color: rgb(181 154 103 / 0.35);
  color: var(--warning);
}

.ufi-summary-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75rem;
  margin: 1rem 0 1.25rem;
}

.ufi-summary-row div,
.ufi-related-package-card {
  background: var(--bg-panel-alt);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.ufi-summary-row div {
  padding: 0.75rem;
}

.ufi-summary-row dt {
  color: var(--text-secondary);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  margin-bottom: 0.25rem;
  text-transform: uppercase;
}

.ufi-summary-row dd {
  color: var(--text-primary);
  font-size: 0.94rem;
  font-weight: 700;
  word-break: break-word;
}

.ufi-summary-row dd.is-on {
  color: var(--success);
}

.ufi-summary-row dd.is-off {
  color: var(--danger);
}

.ufi-summary-row dd.is-warn,
.ufi-config-value.is-warn {
  color: var(--warning);
}

.ufi-summary-sub {
  color: var(--text-secondary);
  font-size: 0.72rem;
  margin-top: 0.35rem;
  word-break: break-word;
}

.ufi-package-sections {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ufi-panel-section {
  background: var(--bg-panel-alt);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1rem;
}

.ufi-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.ufi-section-header h4 {
  color: var(--text-primary);
  font-size: 0.9rem;
  margin: 0;
}

.ufi-section-note {
  color: var(--text-secondary);
  font-size: 0.76rem;
  line-height: 1.5;
  margin-top: 0.35rem;
  max-width: 88ch;
}

.ufi-config-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.75rem;
}

.ufi-config-card {
  background: rgb(255 255 255 / 0.015);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.8rem;
}

.ufi-config-kicker {
  color: var(--text-secondary);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ufi-config-value {
  color: var(--text-primary);
  font-size: 1rem;
  font-weight: 700;
  margin: 0.35rem 0;
}

.ufi-config-value.is-on {
  color: var(--success);
}

.ufi-config-value.is-off {
  color: var(--danger);
}

.ufi-mismatch-banner {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 0.85rem;
  padding: 0.75rem 0.85rem;
  background: rgb(181 154 103 / 0.1);
  border: 1px solid rgb(181 154 103 / 0.28);
  border-radius: 10px;
}

.ufi-mismatch-banner p {
  color: var(--text-primary);
  font-size: 0.78rem;
}

.ufi-package-section {
  min-width: 0;
}

.ufi-package-section + .ufi-package-section {
  margin-top: 1rem;
}

.ufi-package-section h4,
.ufi-package-section h5 {
  color: var(--text-secondary);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

.ufi-related-package-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 28rem;
  overflow: auto;
  padding-right: 0.2rem;
}

.ufi-related-package-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.65rem 0.75rem;
}

.ufi-related-package-card.is-mismatch {
  border-color: rgb(181 154 103 / 0.38);
}

.ufi-related-package-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.ufi-related-package-link {
  background: none;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  padding: 0;
  text-align: left;
}

.ufi-related-package-link:hover {
  color: var(--accent-strong);
  text-decoration: underline;
}

.ufi-related-package-meta {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.ufi-show-more {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-secondary);
  cursor: pointer;
  font: inherit;
  font-size: 0.74rem;
  margin-top: 0.65rem;
  padding: 0.3rem 0.7rem;
}

.ufi-show-more:hover {
  background: var(--bg-panel-hover);
  border-color: var(--line-strong);
  color: var(--text-primary);
}

.ufi-show-more:focus-visible,
.ufi-term-help:focus-visible,
.ufi-advanced-details summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.ufi-term-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  margin-left: 0.2rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-secondary);
  cursor: help;
  font-size: 0.68rem;
  vertical-align: middle;
}

.ufi-advanced-details {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.85rem 1rem;
}

.ufi-advanced-details summary {
  color: var(--primary-strong);
  cursor: pointer;
  font-size: 0.8rem;
}

.ufi-advanced-body {
  margin-top: 0.8rem;
}

.w-full { width: 100%; }
.table-fixed { table-layout: fixed; }
.whitespace-nowrap { white-space: nowrap; }
.block { display: block; }
.font-mono { font-family: 'JetBrains Mono', 'Fira Code', monospace; }
.h-9 { height: 2.25rem; }
.rounded-none { border-radius: 0 !important; }
.truncate {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ufa-filters {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0.85rem 0;
}
.ufa-filter-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}
.ufa-filter-label {
  color: #8b949e;
  font-size: 0.78rem;
  white-space: nowrap;
}
.ufa-filter-btn {
  background: transparent;
  border: none;
  color: #6e7681;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.78rem;
  padding: 0;
  white-space: nowrap;
}
.ufa-filter-btn.active {
  color: #c9d1d9;
}
.ufa-filter-btn.active::before {
  content: '[ ';
  color: #8b949e;
}
.ufa-filter-btn.active::after {
  content: ' ]';
  color: #8b949e;
}

.ufa-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

.ufa-table-wrap {
  background: #111318;
  border: 1px solid #2a2f36;
  overflow-x: auto;
  overflow-y: hidden;
}
.ufa-table {
  border-collapse: collapse;
  background: #111318;
}
.ufa-table th,
.ufa-table td {
  padding: 0 0.75rem;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 0;
}
.ufa-table thead .h-9 th,
.ufa-table tbody .h-9 td {
  height: 2.25rem;
}
.ufa-table th {
  color: #8b949e;
  font-size: 0.76rem;
  text-align: left;
  text-transform: uppercase;
  background: #0f1116;
  border-bottom: 1px solid #2a2f36;
}
.ufa-table td {
  border-bottom: 1px solid #2a2f36;
}

/* ── Security / TOTP settings ─────────────────────────────────────────────── */

.security-view {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.security-card {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.security-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.security-badge {
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.76rem;
  padding: 0.28rem 0.7rem;
  white-space: nowrap;
}

.security-badge.is-enabled {
  background: var(--success-bg);
  border-color: rgb(74 222 128 / 0.45);
  color: var(--success);
}

.security-badge.is-pending {
  background: var(--warn-bg);
  border-color: rgb(181 154 103 / 0.35);
  color: var(--warn);
}

.security-badge.is-disabled {
  background: var(--danger-bg);
  border-color: rgb(248 113 113 / 0.28);
  color: var(--danger);
}

.security-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.security-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
}

.security-summary > div,
.security-secret-block {
  background: var(--bg-panel-alt);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.security-actions,
.security-enrollment {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.security-qr {
  width: 220px;
  max-width: 100%;
  background: #fff;
  border-radius: 10px;
  padding: 0.65rem;
}

.security-qr-svg {
  width: 220px;
  max-width: 100%;
  background: #fff;
  border-radius: 10px;
  padding: 0.65rem;
}

.security-qr-svg svg {
  display: block;
  width: 100%;
  height: auto;
}

.security-secret,
.security-uri {
  white-space: pre-wrap;
  word-break: break-all;
}

.security-confirm {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
}

.security-confirm input {
  width: 180px;
  max-width: 100%;
}
.ufa-col-flag {
  width: 25%;
  text-align: left;
}
.ufa-col-status {
  width: 20%;
  text-align: left;
}
.ufa-col-count {
  width: 15%;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ufa-col-origin {
  width: 40%;
  text-align: left;
}

.ufa-package-row td {
  background: #111318;
}
.ufa-package-row:hover td {
  background: #15191f;
}
.ufa-package-cell {
  min-width: 0;
}
.ufa-cell-main {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
}
.ufa-inline-truncate {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ufa-package-name {
  color: #e6edf3;
  font-weight: 700;
}
.ufa-row-chevron {
  color: #6e7681;
  flex: 0 0 1rem;
  width: 1rem;
  text-align: center;
}
.ufa-status-text,
.ufa-origin-text {
  font-size: 0.78rem;
}
.ufa-status-text.on {
  color: #7ee787;
}
.ufa-status-text.off {
  color: #ffb3b3;
}
.ufa-status-text.neutral {
  color: #6e7681;
}
.ufa-origin-text.profile {
  color: #c9d1d9;
}
.ufa-origin-text.user-global {
  color: #79c0ff;
}
.ufa-origin-text.user-package {
  color: #7ee787;
}
.ufa-origin-text.profile-package {
  color: #d2a8ff;
}
.ufa-origin-file-cell,
.ufa-detail-file,
.ufa-history-file {
  color: #8b949e;
  font-size: 0.78rem;
}
.ufa-count-cell {
  text-align: right !important;
  font-variant-numeric: tabular-nums;
}

.ufa-package-detail-row td {
  padding: 0;
  background: #0b0f13;
  height: auto;
  border-bottom: 1px solid #2a2f36;
}
.ufa-detail-cell {
  white-space: nowrap;
}
.ufa-package-detail {
  background: #0b0f13;
  padding: 0.35rem 0;
}
.ufa-detail-entry + .ufa-detail-entry {
  border-top: 1px solid #1b222b;
}
.ufa-detail-toggle {
  width: 100%;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1rem minmax(0, 34%) minmax(0, 14%) minmax(0, 18%) minmax(0, 1fr);
  gap: 0.55rem;
  align-items: center;
  padding: 0.45rem 0.75rem;
  text-align: left;
  font-family: inherit;
  font-size: 0.78rem;
}
.ufa-detail-toggle:hover {
  background: #11161d;
}
.ufa-detail-toggle > span {
  min-width: 0;
}
.ufa-detail-package {
  color: #e6edf3;
}
.ufa-history-panel {
  background: #0b0f13;
  padding: 0 0.75rem 0.55rem 2.3rem;
}
.ufa-history-list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.ufa-history-item {
  display: grid;
  grid-template-columns: minmax(0, 12rem) minmax(0, 7rem) minmax(0, 11rem) minmax(0, 1fr);
  gap: 0.55rem;
  align-items: center;
  font-size: 0.76rem;
}
.ufa-history-item > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ufa-history-token {
  color: #7ee787;
}
.ufa-history-status {
  color: #c9d1d9;
}
.ufa-history-origin {
  color: #d2a8ff;
}
.ufa-history-empty {
  color: #8b949e;
  font-size: 0.8rem;
  padding: 0.25rem 0;
}
.ufa-dim {
  color: #6e7681;
}

@media (max-width: 1100px) {
  .ufi-layout {
    grid-template-columns: 1fr;
  }

  .ufi-sidebar {
    position: static;
    max-height: none;
  }

  .ufi-package-sections {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1280px) {
  .pkg-explorer-layout,
  .mv-layout,
  .dash-overview-grid.has-secondary {
    grid-template-columns: 1fr;
  }

  .pkg-detail-shell {
    position: static;
    top: auto;
    max-height: none;
    overflow: visible;
  }

  .mv-context-panel {
    position: static;
  }
}

@media (max-width: 720px) {
  .pkg-toolbar-panel,
  .pkg-toolbar-controls {
    width: 100%;
  }

  .pkg-toolbar-controls {
    justify-content: flex-start;
  }

  .pkg-toolbar input {
    width: 100%;
  }

  .pkg-explorer-layout {
    grid-template-columns: 1fr;
  }

  .pkg-detail-shell,
  .pkg-detail-empty {
    min-height: 0;
  }

  .ufi-detail-panel {
    padding: 1rem;
  }

  .ufi-related-package-top,
  .ufi-flag-index-top {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ── DepGraph ─────────────────────────────────────────────────────────────── */

.dg-tree { overflow: auto; height: calc(100vh - 300px); min-height: 300px; }

.dg-tree-root { list-style: none; margin: 0; padding: 0; border: none; }
.dg-list      { list-style: none; margin: 0; padding: 0 0 0 1.4rem; border-left: 1px solid #21262d; }

.dg-item { padding: 1px 0; }

.dg-row {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.15rem 0.3rem; border-radius: 4px; cursor: default;
}
.dg-row:hover { background: #161b22; }
.dg-row.is-root { font-weight: 600; }

.dg-tog {
  background: none; border: none; color: #6e7681; cursor: pointer;
  font-size: 0.75rem; padding: 0; width: 1rem; text-align: center;
  flex-shrink: 0; font-family: inherit; line-height: 1;
}
.dg-tog:hover { color: #c9d1d9; }
.dg-circ { cursor: default; font-size: 0.8rem; }

.dg-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: #161b22; border: 1.5px solid #444d56; cursor: pointer;
}
.dg-dot.inst { background: #1a3a1e; border-color: #3fb950; }

.dg-pkg {
  background: none; border: none; color: #c9d1d9; cursor: pointer;
  font-family: inherit; font-size: 0.85rem; padding: 0;
}
.dg-pkg:hover { color: #58a6ff; text-decoration: underline; }

.dg-cat { color: #484f58; font-size: 0.72rem; }

.dg-badge { font-size: 0.68rem; padding: 0.1rem 0.3rem; border-radius: 3px; }
.dg-miss      { background: #161b22; color: #484f58; border: 1px solid #30363d; }
.dg-err-badge { background: #3d1c1c; color: #f85149; }

.dg-msg { color: #8b949e; font-size: 0.8rem; margin: 0; }
.dg-indent { padding-left: 1.4rem; }
.dg-muted  { color: #484f58; }

/* ── JobsView ─────────────────────────────────────────────────────────────── */

.jv-view { max-width: 900px; }

.jv-header {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 1.5rem;
}
.jv-header h2 { color: #c9d1d9; font-size: 1.1rem; flex: 1; margin: 0; }

.jv-btn-refresh {
  background: #21262d; border: 1px solid #30363d;
  color: #8b949e; border-radius: 6px; cursor: pointer;
  font-family: inherit; font-size: 0.8rem; padding: 0.3rem 0.75rem;
}
.jv-btn-refresh:hover { color: #c9d1d9; border-color: #8b949e; }

.jv-err-msg { color: #f85149; font-size: 0.85rem; }

.jv-table { display: flex; flex-direction: column; gap: 0.4rem; }

.jv-row {
  background: #161b22; border: 1px solid #30363d;
  border-radius: 8px; overflow: hidden;
}
.jv-row.expanded { border-color: #58a6ff66; }

.jv-row-main {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.65rem 1rem;
}
.jv-atom { flex: 1; color: #c9d1d9; font-size: 0.85rem; }
.jv-ago  { color: #6e7681; font-size: 0.78rem; min-width: 5rem; text-align: right; }

.jv-badge {
  font-size: 0.72rem; border-radius: 4px;
  padding: 0.15rem 0.5rem; font-weight: bold;
}
.jv-badge.run { background: #1a3a4a; color: #58a6ff; }
.jv-badge.ok  { background: #1a3a1e; color: #3fb950; }
.jv-badge.err { background: #3a1a1a; color: #f85149; }

.jv-actions { display: flex; gap: 0.4rem; }

.jv-btn-output {
  font-family: inherit; font-size: 0.75rem; border-radius: 5px; cursor: pointer;
  padding: 0.2rem 0.55rem; background: #21262d; border: 1px solid #30363d; color: #8b949e;
}
.jv-btn-output:hover { color: #c9d1d9; border-color: #8b949e; }

.jv-btn-open {
  font-family: inherit; font-size: 0.75rem; border-radius: 5px; cursor: pointer;
  padding: 0.2rem 0.55rem; background: #1a3050; border: 1px solid #58a6ff66; color: #58a6ff;
}
.jv-btn-open:hover { background: #1e3a60; border-color: #58a6ff; }

.jv-btn-kill {
  font-family: inherit; font-size: 0.75rem; border-radius: 5px; cursor: pointer;
  padding: 0.2rem 0.55rem; background: #3a1a1a; border: 1px solid #f8514966; color: #f85149;
}
.jv-btn-kill:hover { background: #5a2020; border-color: #f85149; }

.jv-tabs { display: flex; gap: 0.3rem; }
.jv-tab {
  font-family: inherit; font-size: 0.8rem; border-radius: 5px 5px 0 0; cursor: pointer;
  padding: 0.25rem 0.9rem; background: #161b22; border: 1px solid #30363d; color: #8b949e;
  border-bottom: none;
}
.jv-tab.active { background: #0d1117; color: #c9d1d9; border-color: #58a6ff66; }
.jv-tab:hover:not(.active) { color: #c9d1d9; }

.jv-hist-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem;
  padding: 0.5rem 0; margin-bottom: 0.75rem; border-bottom: 1px solid #21262d;
}
.jv-hist-filter {
  font-family: inherit; font-size: 0.8rem; background: #161b22; border: 1px solid #30363d;
  color: #c9d1d9; border-radius: 5px; padding: 0.2rem 0.5rem;
}
.jv-purge-row { display: flex; align-items: center; gap: 0.4rem; margin-left: auto; }
.jv-purge-input {
  width: 3.5rem; font-family: inherit; font-size: 0.8rem; background: #161b22;
  border: 1px solid #30363d; color: #c9d1d9; border-radius: 5px; padding: 0.2rem 0.4rem;
  text-align: center;
}
.jv-btn-purge {
  font-family: inherit; font-size: 0.75rem; border-radius: 5px; cursor: pointer;
  padding: 0.2rem 0.6rem; background: #2a1a1a; border: 1px solid #f8514966; color: #f85149;
}
.jv-btn-purge:hover { background: #3a2020; border-color: #f85149; }
.jv-purge-msg { font-size: 0.78rem; color: #3fb950; }

.jv-kind {
  background: #1a2535; color: #8b949e; font-size: 0.72rem;
}
.jv-dur { color: #6e7681; font-size: 0.78rem; min-width: 3.5rem; text-align: right; }
.jv-loadmore { margin-top: 0.75rem; text-align: center; }

/* ── Shared emerge-view layout (Install + Uninstall) ─────────────────────── */

.ev-route-shell {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}

.ev-view-page {
  display: flex; flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

.ev-page-header { margin-bottom: 1.5rem; }

.ev-back {
  background: none; border: none; color: #58a6ff; cursor: pointer;
  font-family: inherit; font-size: 0.9rem; padding: 0;
  margin-bottom: 0.75rem; display: block;
}
.ev-back:hover { text-decoration: underline; }

.ev-step-title { color: #c9d1d9; font-size: 1rem; font-weight: bold; }

.ev-content {
  flex: 1; display: flex; flex-direction: column;
  background: #161b22; border: 1px solid #30363d;
  border-radius: 8px; overflow: hidden; min-height: 0;
}

.ev-terminal {
  flex: 1 1 auto;
  background: #0d1117;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.78rem; line-height: 1.5;
  padding: 0.75rem 1rem; min-height: 0;
  height: auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
}

.ev-done-msg {
  flex: 1; display: flex; align-items: center; justify-content: center;
  gap: 0.75rem; padding: 2rem; color: #3fb950; font-size: 1.1rem;
}
.ev-done-icon { font-size: 1.5rem; }

.ev-actions {
  display: flex; align-items: center; gap: 0.5rem;
  border-top: 1px solid #30363d; flex-shrink: 0;
  padding: 0.4rem 1rem;
}

.ev-btn-primary   { font-family: inherit; font-size: 0.82rem; border-radius: 6px; cursor: pointer; padding: 0.35rem 0.85rem; border: none; background: #1a7f37; color: #fff; }
.ev-btn-primary:hover { background: #2ea043; }
.ev-btn-danger    { font-family: inherit; font-size: 0.82rem; border-radius: 6px; cursor: pointer; padding: 0.35rem 0.85rem; border: none; background: #6e1a1a; color: #fff; }
.ev-btn-danger:hover { background: #a03a3a; }
.ev-btn-secondary { font-family: inherit; font-size: 0.82rem; border-radius: 6px; cursor: pointer; padding: 0.35rem 0.85rem; border: 1px solid #30363d; background: #21262d; color: #c9d1d9; }
.ev-btn-secondary:hover { border-color: #58a6ff; color: #58a6ff; }
.ev-btn-cancel    { font-family: inherit; font-size: 0.82rem; border-radius: 6px; cursor: pointer; padding: 0.35rem 0.85rem; border: 1px solid #30363d; background: none; color: #6e7681; }
.ev-btn-cancel:hover:not(:disabled) { color: #f85149; border-color: #f85149; }
.ev-btn-cancel:disabled { cursor: default; opacity: 0.5; }

.ev-spinner { color: #58a6ff; margin-left: auto; animation: spin 1s linear infinite; display: inline-block; }

/* ── EmergeOptions (inline in Install + Updates) ─────────────────────────── */

.eo-opts {
  background: #0d1117; border: 1px solid #30363d; border-radius: 6px; margin-bottom: 0.5rem;
}
.eo-preview {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4em;
  padding: 0.45rem 0.75rem; font-size: 0.76rem; line-height: 1.4;
  border-bottom: 1px solid #30363d; overflow-wrap: anywhere;
}
.eo-prompt { color: #6e7681; user-select: none; }
.eo-cmd    { color: #c9d1d9; }
.eo-base   { color: #6e7681; }
.eo-user   { color: #58a6ff; }
.eo-target { color: #7ee787; }
.eo-toggle {
  display: flex; align-items: center; gap: 0.5rem;
  width: 100%; background: none; border: none; color: #8b949e; cursor: pointer;
  font-family: inherit; font-size: 0.8rem; padding: 0.45rem 0.75rem; text-align: left;
}
.eo-toggle:hover { color: #c9d1d9; }
.eo-badge {
  background: #1a3050; color: #58a6ff; border-radius: 10px;
  font-size: 0.7rem; padding: 0.05rem 0.45rem; margin-left: auto;
}
.eo-list {
  border-top: 1px solid #30363d; padding: 0.5rem 0.75rem;
  display: flex; flex-direction: column; gap: 0.3rem;
}
.eo-opt {
  display: grid; grid-template-columns: auto auto 4.5em 1fr;
  align-items: baseline; gap: 0.6rem; cursor: pointer; padding: 0.15rem 0;
}
.eo-opt input[type=checkbox] { cursor: pointer; accent-color: #58a6ff; margin: 0; }
.eo-flag {
  color: #c9d1d9; font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.78rem; white-space: nowrap;
}
.eo-num {
  width: 4.5em; background: #161b22; color: #c9d1d9;
  border: 1px solid #30363d; border-radius: 4px;
  font-family: inherit; font-size: 0.76rem; padding: 0.1rem 0.3rem;
}
.eo-num:disabled { color: #6e7681; background: #0d1117; }
.eo-num-spacer { width: 4.5em; }
.eo-desc { color: #8b949e; font-size: 0.76rem; line-height: 1.35; }

/* ── InstallView-specific ─────────────────────────────────────────────────── */

.iv-opts-wrap { padding: 0.6rem 0.75rem 0; flex-shrink: 0; }

.iv-etclist { flex: 1; overflow-y: auto; padding: 0.75rem 1rem; }

.iv-etcfile {
  border: 1px solid #30363d; border-radius: 6px;
  margin-bottom: 0.75rem; overflow: hidden;
}
.iv-etcfile.resolved { opacity: 0.6; }

.iv-etcfile-header {
  display: flex; align-items: center; justify-content: space-between;
  background: #21262d; padding: 0.5rem 0.75rem; gap: 0.5rem;
}
.iv-fname { color: #c9d1d9; font-size: 0.82rem; flex: 1; }
.iv-etcfile-actions { display: flex; gap: 0.4rem; }
.iv-badge-action { color: #3fb950; font-size: 0.78rem; }

.iv-btn-keep {
  font-family: inherit; font-size: 0.78rem; cursor: pointer;
  padding: 0.2rem 0.6rem; border-radius: 4px;
  background: #21262d; color: #8b949e; border: 1px solid #30363d;
}
.iv-btn-keep:hover { color: #c9d1d9; }
.iv-btn-replace {
  font-family: inherit; font-size: 0.78rem; cursor: pointer;
  padding: 0.2rem 0.6rem; border-radius: 4px;
  background: #1a3a1e; color: #3fb950; border: 1px solid #3fb950;
}
.iv-btn-replace:hover { background: #1f4024; }

.iv-diff {
  background: #0d1117; color: #8b949e; font-size: 0.75rem;
  line-height: 1.5; max-height: 200px; overflow-y: auto;
  padding: 0.5rem 0.75rem; white-space: pre;
}

/* ── Shared terminal output ──────────────────────────────────────────────── */

.terminal {
  background: #0d1117;
  border-top: 1px solid #30363d;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.76rem;
  line-height: 1.5;
  height: 12rem;
  min-height: 12rem;
  max-height: 12rem;
  overflow-y: auto;
  padding: 0.6rem 1rem;
}

.line { white-space: pre-wrap; word-break: break-all; color: #c9d1d9; min-height: 1em; }
.hi-ok   { color: #3fb950; }
.hi-err  { color: #f85149; }
.hi-warn { color: #d29922; }
.muted-line { color: #6e7681; }
.cursor { color: #58a6ff; animation: blink 0.8s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }
@keyframes spin  { to { transform: rotate(360deg); } }

.line.status { margin-top: 0.5rem; font-weight: bold; }
.line.status.ok  { color: #3fb950; }
.line.status.err { color: #f85149; }

/* ── Shared table / toolbar ──────────────────────────────────────────────── */

.pkg-toolbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.pkg-toolbar h2 { color: #e6edf3; flex: 1; }

.pkg-toolbar input {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 6px;
  color: #c9d1d9;
  font-family: inherit;
  font-size: 0.9rem;
  padding: 0.4rem 0.8rem;
  width: 240px;
}

.pkg-toolbar input:focus { outline: none; border-color: #58a6ff; }

.pkg-explorer-view {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.pkg-explorer-layout {
  display: grid;
  grid-template-columns: minmax(560px, 1.2fr) minmax(420px, 0.95fr);
  gap: 1rem;
  align-items: start;
}

.pkg-explorer-layout.mode-standalone {
  grid-template-columns: minmax(0, 1fr);
}

.pkg-list-panel,
.pkg-detail-shell {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.pkg-list-panel {
  min-width: 0;
  overflow: hidden;
}

.pkg-explorer-layout.mode-standalone .pkg-list-panel {
  display: none;
}

.pkg-toolbar-panel {
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.85rem 1rem;
  margin-bottom: 0;
  padding: 1rem 1rem 0.85rem;
  border-bottom: 1px solid var(--border);
}

.pkg-toolbar-copy,
.pkg-toolbar-controls {
  display: flex;
  gap: 0.75rem;
}

.pkg-toolbar-copy {
  flex: 1 1 28rem;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
}

.pkg-toolbar-controls {
  flex: 0 1 auto;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.pkg-table-wrap {
  overflow: auto;
}

.pkg-table { width: 100%; border-collapse: collapse; }

.pkg-table th {
  color: #8b949e;
  font-size: 0.75rem;
  text-align: left;
  text-transform: uppercase;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid #30363d;
}

.pkg-table td { padding: 0.45rem 0.75rem; border-bottom: 1px solid #21262d; }
.pkg-table tr.clickable { cursor: pointer; }
.pkg-table tr.clickable:hover td { background: #161b22; }
.pkg-table tr.clickable.active td { background: var(--selected); }

.td-pkg  { color: #e6edf3; }
.td-cat  { color: #8b949e; font-size: 0.85rem; }
.td-ver  { color: #8b949e; font-size: 0.85rem; }
.td-desc {
  color: #8b949e;
  font-size: 0.85rem;
  max-width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pkg-count { color: #8b949e; font-size: 0.8rem; margin-top: 1rem; }

.pkg-detail-shell {
  position: sticky;
  top: 1rem;
  align-self: start;
  max-height: calc(100vh - 2rem);
  overflow: auto;
  min-height: 42rem;
  padding: 1rem 1.1rem 1.1rem;
}

.pkg-explorer-layout.mode-standalone .pkg-detail-shell {
  position: static;
  top: auto;
  max-height: none;
  overflow: visible;
  min-height: 0;
}

.pkg-detail-empty {
  min-height: 34rem;
  display: grid;
  place-content: center;
  gap: 0.45rem;
  padding: 2rem;
  text-align: center;
  color: var(--text-muted);
}

.pkg-detail-empty h3 {
  color: var(--text);
  font-size: 1rem;
}

/* ── Dashboard ───────────────────────────────────────────────────────────── */

.dashboard {
  width: 100%;
  max-width: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  color: var(--text);
}

.dashboard,
.dashboard * {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
}

.dashboard h2 {
  color: var(--text);
  margin: 0;
  letter-spacing: 0.02em;
}

.dash-kicker,
.dash-meter-label,
.dash-summary-label,
.dash-chart-title,
.dash-portage-path,
.dash-portage-size,
.dash-history-subtle {
  color: var(--text-muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.dash-panel-meta {
  color: var(--text-subtle);
  font-size: 0.72rem;
  line-height: 1.4;
}

.dash-hero,
.dash-health-stack,
.dash-health-layout,
.dash-activity-layout {
  display: grid;
  gap: 0.85rem;
}

.dash-hero {
  grid-template-columns: repeat(auto-fit, minmax(176px, 212px));
  align-items: stretch;
  justify-content: start;
  gap: 0.7rem;
}

.dash-summary-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  overflow: hidden;
}

.dash-summary-cell {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
  padding: 0.58rem 0.72rem;
  border-left: 1px solid var(--border);
}

.dash-summary-cell:first-child {
  border-left: none;
}

.dash-summary-cell[data-tone="success"] .dash-summary-value { color: var(--success); }
.dash-summary-cell[data-tone="warning"] .dash-summary-value { color: var(--warning); }
.dash-summary-cell[data-tone="danger"] .dash-summary-value { color: var(--danger); }
.dash-summary-cell[data-tone="info"] .dash-summary-value { color: var(--info); }

.dash-hero-primary,
.dash-panel,
.dash-chart-card,
.dash-signal-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  min-width: 0;
}

.dash-hero-primary {
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.dash-hero-primary[data-tone="success"] {
  border-color: rgb(146 175 132 / 0.42);
}

.dash-hero-primary[data-tone="warning"] {
  border-color: rgb(181 154 103 / 0.42);
}

.dash-hero-primary[data-tone="danger"] {
  border-color: rgb(186 127 125 / 0.42);
}

.dash-hero-primary[data-tone="info"] {
  border-color: rgb(112 141 168 / 0.42);
}

.dash-hero-headline {
  font-size: 1.5rem;
  line-height: 1.1;
  font-weight: 700;
}

.dash-hero-copy,
.dash-block-copy,
.dash-signal-detail,
.dash-attention-detail,
.dash-kpi-detail,
.dash-inline-job-meta,
.dash-history-meta {
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.dash-inline-jobs,
.dash-attention-list,
.dash-history-list,
.dash-panel-stack,
.dash-activity-main {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.dash-inline-job,
.dash-attention-item,
.dash-history-item,
.dash-kpi-card,
.dash-signal-card {
  background: var(--surface-2);
}

.dash-inline-job {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.dash-inline-job-main,
.dash-history-main,
.dash-attention-copy {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.dash-inline-job-target,
.dash-attention-title,
.dash-history-target,
.dash-signal-value,
.dash-summary-value,
.dash-meter-value {
  color: var(--text);
  font-weight: 700;
}

.dash-inline-job-target,
.dash-history-target {
  font-size: 0.82rem;
  line-height: 1.35;
  word-break: break-word;
}

.dash-hero-signals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.dash-signal-card {
  padding: 0.68rem 0.78rem;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.dash-summary-card {
  background: rgb(34 41 48 / 0.38);
  border-color: rgb(49 58 67 / 0.68);
}

.dash-signal-card[data-tone="success"],
.dash-status-chip[data-tone="success"] {
  border-color: rgb(146 175 132 / 0.35);
}

.dash-signal-card[data-tone="warning"],
.dash-status-chip[data-tone="warning"] {
  border-color: rgb(181 154 103 / 0.35);
}

.dash-signal-card[data-tone="danger"],
.dash-status-chip[data-tone="danger"] {
  border-color: rgb(186 127 125 / 0.35);
}

.dash-signal-card[data-tone="info"],
.dash-status-chip[data-tone="info"] {
  border-color: rgb(112 141 168 / 0.35);
}

.dash-signal-value {
  font-size: 1rem;
  line-height: 1.15;
  font-weight: 700;
}

.dash-summary-card .dash-signal-detail {
  min-height: 0;
  font-size: 0.72rem;
  line-height: 1.35;
}

.dash-summary-detail {
  color: var(--text-muted);
  font-size: 0.72rem;
  line-height: 1.35;
}

.dash-panel {
  padding: 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.dash-panel-header,
.dash-block-header,
.dash-history-top,
.dash-history-foot,
.dash-meter-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.dash-block {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.dash-summary-strip + .dash-block {
  margin-top: 1.35rem;
}

.dash-block + .dash-block {
  margin-top: 1.15rem;
}

.dash-console-panel {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  overflow: hidden;
}

.dash-console-panel .dash-block-header {
  padding: 0.66rem 0.86rem;
  border-bottom: 1px solid var(--border);
  background: rgb(24 29 34 / 0.72);
}

.dash-console-body {
  display: grid;
  min-width: 0;
}

.dash-pane {
  min-width: 0;
  padding: 0.74rem 0.88rem;
}

.dash-pane-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.65rem;
  margin-bottom: 0.55rem;
}

.dash-pane-stack {
  display: grid;
  min-width: 0;
}

.dash-pane-stack > .dash-pane + .dash-pane {
  border-top: 1px solid var(--border);
}

.dash-pane-stack > .dash-pane {
  padding: 0.82rem 0.96rem;
}

.dash-block-copy {
  margin-top: 0.3rem;
  max-width: 80ch;
}

.dash-health-stack {
  gap: 0.55rem;
}

.dash-health-layout {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 1rem;
}

.dash-health-layout > .dash-panel {
  height: 100%;
}

.dash-panel-primary {
  padding: 1.15rem 1.2rem 1.1rem;
  gap: 1rem;
}

.dash-system-panel,
.dash-overview-panel {
  min-height: 100%;
}

.dash-system-grid {
  display: grid;
  gap: 0;
}

.dash-meter-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 220px;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
}

.dash-meter-row:last-child {
  border-bottom: none;
}

.dash-meter-label,
.dash-summary-label,
.dash-chart-title {
  color: var(--text-muted);
}

.dash-meter-value,
.dash-summary-value {
  font-size: 0.92rem;
}

.dash-meter-meta {
  color: var(--text-muted);
  font-size: 0.74rem;
  text-align: right;
  white-space: nowrap;
}

.dash-meter-shell {
  display: grid;
  grid-template-columns: repeat(28, minmax(0, 1fr));
  gap: 2px;
  min-width: 0;
}

.dash-meter-shell-thin {
  grid-template-columns: repeat(36, minmax(0, 1fr));
  gap: 1px;
}

.dash-meter-segment {
  display: block;
  width: 100%;
  height: 10px;
  background: var(--chart-track);
}

.dash-meter-shell-thin .dash-meter-segment {
  height: 4px;
}

.dash-meter-segment.is-filled.is-ok,
.dash-meter-segment.is-filled.tone-green {
  background: var(--primary);
}

.dash-meter-segment.is-filled.is-warn,
.dash-meter-segment.is-filled.tone-amber {
  background: var(--warning);
}

.dash-meter-segment.is-filled.is-hot {
  background: var(--danger);
}

.dash-meter-segment.is-filled.tone-blue {
  background: var(--info);
}

.dash-meter-segment.is-filled.tone-purple {
  background: var(--chart-5);
}

.dash-overview-list {
  display: grid;
  gap: 0;
  height: 100%;
}

.dash-overview-row {
  display: grid;
  gap: 0.35rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--border);
}

.dash-overview-row:last-child {
  border-bottom: none;
}

.dash-overview-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.dash-overview-detail {
  color: var(--text-muted);
  font-size: 0.74rem;
  line-height: 1.4;
  text-transform: none;
  letter-spacing: 0;
}

.dash-overview-panel .dash-summary-value {
  font-size: 1.24rem;
  line-height: 1;
}

.dash-portage-panel {
  align-self: stretch;
  gap: 0;
  padding: 0.4rem 0.7rem 0.5rem;
  border-radius: 7px;
  margin-inline: clamp(1.4rem, 7vw, 4rem);
}

.dash-panel-secondary {
  background: var(--surface-2);
  border-color: var(--border);
}

.dash-portage-panel.dash-panel-secondary {
  background: rgb(34 41 48 / 0.14);
  border-color: rgb(49 58 67 / 0.38);
}

.dash-portage-strip-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.45rem;
  margin-top: 0.4rem;
}

.dash-portage-row {
  display: grid;
  gap: 0.28rem;
  padding: 0.4rem 0.48rem 0.36rem;
  border: 1px solid rgb(49 58 67 / 0.28);
  border-radius: 7px;
  background: rgb(28 34 40 / 0.32);
}

.dash-portage-row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.dash-portage-panel .dash-panel-header {
  gap: 0.5rem;
  margin-bottom: 0;
}

.dash-portage-panel .dash-kicker {
  color: var(--text-subtle);
  font-size: 0.66rem;
}

.dash-portage-panel .dash-panel-meta,
.dash-portage-panel .dash-portage-path,
.dash-portage-panel .dash-portage-size {
  font-size: 0.64rem;
}

.dash-portage-panel .dash-meter-shell-thin .dash-meter-segment {
  height: 3px;
}

.dash-portage-path {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-portage-size {
  display: inline-flex;
  justify-content: flex-end;
  gap: 0.5ch;
  width: 100%;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dash-size-value {
  min-width: 5ch;
  text-align: right;
}

.dash-size-unit {
  min-width: 3ch;
  text-align: left;
}

.dash-size-pct {
  min-width: 4ch;
  text-align: right;
}

.dash-status-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.15rem 0.48rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.dash-status-chip[data-tone="success"] {
  color: var(--success);
  background: var(--success-surface);
}

.dash-status-chip[data-tone="warning"] {
  color: var(--warning);
  background: var(--warning-surface);
}

.dash-status-chip[data-tone="danger"] {
  color: var(--danger);
  background: var(--danger-surface);
}

.dash-status-chip[data-tone="info"] {
  color: var(--info);
  background: var(--info-surface);
}

.dash-status-chip[data-tone="muted"] {
  color: var(--text-muted);
}

.dash-attention-item {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  gap: 0.65rem;
  align-items: flex-start;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.dash-attention-dot {
  width: 8px;
  height: 8px;
  margin-top: 0.3rem;
  border-radius: 999px;
  background: var(--text-subtle);
}

.dash-attention-item[data-tone="success"] .dash-attention-dot { background: var(--success); }
.dash-attention-item[data-tone="warning"] .dash-attention-dot { background: var(--warning); }
.dash-attention-item[data-tone="danger"] .dash-attention-dot { background: var(--danger); }
.dash-attention-item[data-tone="info"] .dash-attention-dot { background: var(--info); }

.dash-analytics-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0.85rem;
}

.dash-section-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.95fr);
  gap: 1rem;
  align-items: stretch;
}

.dash-section-layout > * {
  min-width: 0;
}

.dash-section-chart {
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.dash-section-chart > div:last-child {
  flex: 1;
  min-height: 0;
}

.dash-support-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  align-content: stretch;
  align-self: stretch;
  grid-auto-rows: minmax(0, 1fr);
  height: 100%;
}

.dash-support-card {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  min-width: 0;
  padding: 0.82rem 0.92rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.dash-support-card-compact {
  gap: 0.35rem;
  padding: 0.7rem 0.78rem;
  align-self: stretch;
}

.dash-support-card-compact .dash-support-value {
  font-size: 0.96rem;
  line-height: 1.1;
}

.dash-support-card-kpi {
  min-width: 0;
  max-width: none;
}

.dash-support-card[data-tone="success"] {
  border-color: rgb(146 175 132 / 0.35);
}

.dash-support-card[data-tone="warning"] {
  border-color: rgb(181 154 103 / 0.35);
}

.dash-support-card[data-tone="danger"] {
  border-color: rgb(186 127 125 / 0.35);
}

.dash-support-card[data-tone="info"] {
  border-color: rgb(112 141 168 / 0.35);
}

.dash-support-card[data-tone="muted"] {
  border-color: rgb(98 109 121 / 0.32);
}

.dash-support-card-chart {
  gap: 0.45rem;
  padding: 0.76rem 0.84rem;
  justify-content: space-between;
}

.dash-support-card-chart > div:last-child {
  min-height: 0;
  margin-top: auto;
}

.dash-support-card-chart svg {
  display: block;
  width: 100%;
  max-height: 88px;
}

.dash-support-card-mini {
  background: rgb(34 41 48 / 0.52);
  border-color: rgb(49 58 67 / 0.58);
}

.dash-support-card-list {
  background: rgb(34 41 48 / 0.4);
  border-color: rgb(49 58 67 / 0.58);
}

.dash-support-card-list .dash-panel-meta,
.dash-support-card-list .dash-support-detail,
.dash-support-card-list .dash-card-empty {
  color: var(--text-subtle);
}

.dash-mini-stat-value {
  color: var(--text);
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.1;
}

.dash-mini-stat-detail {
  color: var(--text-muted);
  font-size: 0.72rem;
  line-height: 1.35;
  min-height: 1.95rem;
}

.dash-support-value {
  color: var(--text);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.05;
}

.dash-support-detail,
.dash-support-row-meta,
.dash-card-empty {
  color: var(--text-muted);
  font-size: 0.76rem;
  line-height: 1.45;
}

.dash-support-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
}

.dash-support-row,
.dash-support-row-main {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.dash-support-row {
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.42rem 0;
  border-top: 1px solid var(--border);
}

.dash-support-row:first-child {
  padding-top: 0;
  border-top: none;
}

.dash-support-row:last-child {
  padding-bottom: 0;
}

.dash-support-row-label,
.dash-support-row-value {
  color: var(--text);
  font-size: 0.8rem;
  line-height: 1.4;
}

.dash-support-row-label {
  overflow-wrap: anywhere;
}

.dash-support-row-value {
  flex-shrink: 0;
  font-weight: 700;
  white-space: nowrap;
  text-align: right;
}

.dash-compile-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.45rem;
  width: 100%;
}

.dash-compile-row {
  display: grid;
  gap: 0.28rem;
  min-width: 0;
}

.dash-compile-row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  min-width: 0;
}

.dash-compile-label,
.dash-compile-value {
  font-size: 0.78rem;
  line-height: 1.35;
}

.dash-compile-label {
  color: var(--text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-compile-value {
  color: var(--text-subtle);
  flex-shrink: 0;
  white-space: nowrap;
}

.dash-compile-bar {
  width: 100%;
  height: 8px;
  background: var(--chart-track);
  border-radius: 999px;
  overflow: hidden;
}

.dash-compile-bar-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
}

.dash-composition-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.95fr);
  gap: 1rem;
  align-items: stretch;
}

.dash-composition-support,
.dash-activity-support,
.dash-activity-side-stack {
  display: grid;
  gap: 0.85rem;
  min-width: 0;
  align-content: start;
}

.dash-composition-chart-main {
  grid-column: 1 / -1;
  min-height: 292px;
}

.dash-composition-chart-secondary {
  grid-column: 1 / 2;
  padding: 0.78rem 0.88rem;
  background: rgb(34 41 48 / 0.66);
}

.dash-composition-support {
  grid-column: 2 / 3;
}

.dash-chart-card {
  padding: 0.9rem 1rem;
  overflow: hidden;
}

.dash-chart-card svg {
  display: block;
  max-height: none;
}

.dash-chart-title {
  display: block;
  margin-bottom: 0.55rem;
}

.dash-chart-note {
  display: block;
  margin-top: -0.2rem;
  margin-bottom: 0.65rem;
  color: var(--text-subtle);
  font-size: 0.72rem;
  line-height: 1.35;
}

.dash-chart-empty {
  color: var(--text-subtle);
  font-size: 0.76rem;
  line-height: 1.45;
  padding: 0.35rem 0;
  margin: 0;
}

.dash-chart-emphasis {
  grid-column: span 6;
}

.dash-chart-compact {
  grid-column: span 4;
}

.dash-chart-wide {
  grid-column: 1 / -1;
}

.dash-activity-console {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(280px, 0.88fr);
  align-items: start;
}

.dash-composition-console {
  display: grid;
  grid-template-columns: minmax(0, 1.38fr) minmax(280px, 0.86fr);
  align-items: stretch;
}

.dash-activity-console > .dash-pane-stack,
.dash-composition-console > .dash-pane-stack {
  border-left: 1px solid var(--border);
}

.dash-log-row {
  align-items: center;
}

.dash-stat-list {
  display: grid;
  gap: 0;
}

.dash-stat-line {
  display: grid;
  gap: 0.18rem;
  padding: 0.48rem 0;
  border-top: 1px solid var(--border);
}

.dash-stat-line:first-child {
  padding-top: 0;
  border-top: none;
}

.dash-stat-line-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.dash-stat-line-value {
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.15;
  font-weight: 700;
  white-space: nowrap;
}

.dash-stat-line[data-tone="success"] .dash-stat-line-value { color: var(--success); }
.dash-stat-line[data-tone="warning"] .dash-stat-line-value { color: var(--warning); }
.dash-stat-line[data-tone="danger"] .dash-stat-line-value { color: var(--danger); }
.dash-stat-line[data-tone="info"] .dash-stat-line-value { color: var(--info); }

.dash-meter-stack {
  display: grid;
  gap: 0.72rem;
}

.dash-inline-meter {
  display: grid;
  gap: 0.32rem;
}

.dash-inline-meter-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.dash-inline-meter-value {
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}

.dash-inline-meter-bar {
  display: flex;
  width: 100%;
  height: 8px;
  overflow: hidden;
  background: var(--chart-track);
  border-radius: 999px;
}

.dash-inline-meter-segment {
  display: block;
  height: 100%;
}

.dash-inline-meter-segment.tone-green { background: var(--primary); }
.dash-inline-meter-segment.tone-blue { background: var(--info); }
.dash-inline-meter-segment.tone-amber { background: var(--warning); }
.dash-inline-meter-segment.tone-muted { background: var(--chart-4); }

.dash-chart-primary {
  border-color: var(--hover-border);
}

.dash-chart-soft,
.dash-support-panel {
  background: var(--surface-2);
}

#dash-packages .dash-chart-primary,
#dash-jobs .dash-chart-primary {
  padding: 1rem 1.05rem;
  box-shadow: inset 0 0 0 1px rgb(152 164 175 / 0.05);
}

#dash-jobs .dash-activity-secondary > .dash-chart-soft,
#dash-packages .dash-composition-chart-secondary {
  padding: 0.75rem 0.85rem;
  background: rgb(34 41 48 / 0.72);
}

#dash-packages .dash-composition-chart-secondary .dash-chart-title,
#dash-jobs .dash-activity-secondary > .dash-chart-soft .dash-chart-title,
#dash-packages .dash-composition-support .dash-chart-support .dash-chart-title,
#dash-jobs .dash-activity-secondary > .dash-chart-support .dash-chart-title {
  margin-bottom: 0.5rem;
  color: var(--text-subtle);
}

#dash-packages .dash-composition-chart-secondary .dash-chart-note,
#dash-jobs .dash-activity-secondary > .dash-chart-soft .dash-chart-note,
#dash-packages .dash-composition-support .dash-chart-support .dash-chart-note,
#dash-jobs .dash-activity-secondary > .dash-chart-support .dash-chart-note {
  margin-bottom: 0.5rem;
  font-size: 0.68rem;
}

#dash-packages .dash-composition-support {
  padding: 0.7rem 0.8rem;
  background: rgb(34 41 48 / 0.24);
  border-color: rgb(49 58 67 / 0.48);
}

#dash-packages .dash-composition-support .dash-chart-support {
  padding: 0;
}

#dash-packages .dash-composition-support .dash-chart-support svg {
  max-height: 128px;
}

#dash-jobs .dash-chart-main {
  min-height: 236px;
}

#dash-jobs .dash-activity-secondary {
  grid-template-columns: minmax(0, 1.5fr) minmax(220px, 0.72fr);
  align-items: start;
}

#dash-jobs .dash-activity-support-row {
  grid-template-columns: 1fr;
}

#dash-jobs .dash-activity-trend {
  min-height: 196px;
}

#dash-jobs .dash-activity-side-stack > .dash-chart-support {
  padding: 0.72rem 0.8rem;
  background: rgb(34 41 48 / 0.54);
}

#dash-jobs .dash-activity-side-stack > .dash-chart-support svg {
  max-height: 120px;
}

#dash-jobs .dash-activity-support-row > .dash-chart-support {
  padding: 0.78rem 0.88rem;
  background: rgb(34 41 48 / 0.48);
}

#dash-jobs .dash-activity-secondary > .dash-chart-support svg,
#dash-jobs .dash-activity-secondary > .dash-chart-soft svg {
  max-height: 168px;
}

#dash-jobs .dash-activity-feed {
  gap: 0.5rem;
  padding: 0.65rem 0.8rem 0.75rem;
  background: rgb(34 41 48 / 0.24);
  border-color: rgb(49 58 67 / 0.45);
}

#dash-jobs .dash-activity-feed-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

#dash-jobs .dash-activity-feed-item {
  gap: 0.4rem;
  padding: 0.52rem 0.62rem;
  background: rgb(28 34 40 / 0.56);
}

#dash-jobs .dash-activity-feed-item .dash-history-target {
  font-size: 0.76rem;
}

#dash-jobs .dash-activity-feed-item .dash-status-chip {
  padding-inline: 0.42rem;
  font-size: 0.64rem;
}

.dash-composition-secondary > .dash-chart-card,
.dash-activity-secondary > .dash-chart-card,
.dash-activity-support > .dash-chart-card,
.dash-activity-support > .dash-panel {
  height: 100%;
}

.dash-composition-support {
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
}

.dash-composition-support .dash-chart-support {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.dash-composition-support .dash-chart-support + .dash-chart-support {
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
}

.dash-chart-support {
  padding: 0.85rem 0.95rem;
}

.dash-history-panel {
  gap: 0.7rem;
}

.dash-history-compact {
  padding: 0.8rem 0.9rem;
}

.dash-history-compact .dash-history-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.dash-history-compact .dash-history-item {
  background: var(--surface);
  padding: 0.65rem 0.7rem;
}

.dash-history-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.dash-history-foot {
  align-items: center;
}

.dash-history-subtle {
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-subtle);
  font-size: 0.76rem;
}

@media (max-width: 1220px) {
  .dash-summary-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dash-activity-console,
  .dash-composition-console,
  .dash-section-layout {
    grid-template-columns: 1fr;
  }

  .dash-activity-console > .dash-pane-stack,
  .dash-composition-console > .dash-pane-stack {
    border-left: none;
    border-top: 1px solid var(--border);
  }
}

@media (max-width: 980px) {
  .dash-health-stack,
  .dash-health-layout,
  .dash-activity-console,
  .dash-composition-console,
  .dash-section-layout,
  .dash-hero {
    grid-template-columns: 1fr;
  }

  .dash-summary-strip,
  .dash-composition-layout,
  .dash-analytics-grid,
  .dash-activity-panels,
  .dash-activity-support-row,
  .dash-activity-feed-list,
  .dash-composition-mini-grid,
  .dash-composition-list-grid,
  .dash-portage-strip-grid,
  .dash-support-grid,
  .dash-hero-signals {
    grid-template-columns: 1fr;
  }

  .dash-history-compact .dash-history-list {
    grid-template-columns: 1fr;
  }

  .dash-portage-panel {
    margin-inline: 0;
  }

  .dash-composition-chart-main,
  .dash-composition-chart-secondary,
  .dash-composition-support {
    grid-column: auto;
  }

  .dash-chart-emphasis,
  .dash-chart-compact,
  .dash-chart-wide {
    grid-column: auto;
  }

  .dash-kpi-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .dash-summary-cell {
    border-left: none;
    border-top: 1px solid var(--border);
  }

  .dash-summary-cell:first-child {
    border-top: none;
  }

  .dash-meter-row,
  .dash-portage-row {
    grid-template-columns: 1fr;
  }

  .dash-meter-meta,
  .dash-portage-size {
    text-align: left;
  }

  .dash-inline-job,
  .dash-panel-header,
  .dash-block-header,
  .dash-history-top,
  .dash-history-foot,
  .dash-support-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .dash-support-row-value {
    white-space: normal;
  }
}

/* ── Maintenance view (UpdatesView) ──────────────────────────────────────── */

.mv-view { width: 100%; display: flex; flex-direction: column; gap: 1rem; }
.mv-view h2 { color: #e6edf3; margin-bottom: 0.5rem; }

.mv-header-copy {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  max-width: 92ch;
}

.mv-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(340px, 0.85fr);
  gap: 1rem;
  align-items: start;
}

.mv-primary {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.mv-card {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.14s ease, background-color 0.14s ease;
}

.mv-card.active {
  border-color: rgb(136 167 132 / 0.42);
}
.mv-card-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 0.7rem 1rem; gap: 0.75rem;
}
.mv-card-title { display: flex; flex-direction: column; gap: 0.15rem; flex: 1; }
.mv-card-title-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}
.mv-title { color: #c9d1d9; font-size: 0.88rem; font-weight: bold; }
.mv-cmd { color: #6e7681; font-size: 0.72rem; font-family: 'JetBrains Mono', monospace; }
.mv-card-summary {
  color: var(--text-muted);
  font-size: 0.76rem;
  line-height: 1.45;
}
.mv-card-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }

.mv-state-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.45rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgb(152 164 175 / 0.08);
  color: var(--text-subtle);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mv-state-chip.is-info {
  background: var(--info-surface);
  border-color: rgb(112 141 168 / 0.35);
  color: var(--info);
}

.mv-state-chip.is-ok {
  background: var(--success-surface);
  border-color: rgb(146 175 132 / 0.35);
  color: var(--success);
}

.mv-state-chip.is-err {
  background: var(--danger-surface);
  border-color: rgb(186 127 125 / 0.35);
  color: var(--danger);
}

.mv-state-chip.is-warn {
  background: var(--warning-surface);
  border-color: rgb(181 154 103 / 0.35);
  color: var(--warning);
}

.mv-context-panel {
  position: sticky;
  top: 1rem;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem;
}

.mv-context-section {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.mv-context-section + .mv-context-section {
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
}

.mv-context-kicker,
.mv-context-label {
  color: var(--text-subtle);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mv-context-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.mv-context-header h3 {
  color: var(--text);
  font-size: 1rem;
}

.mv-context-summary,
.mv-context-body {
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

.mv-context-note,
.mv-storage-size,
.mv-storage-share {
  color: var(--text-muted);
  font-size: 0.74rem;
  line-height: 1.4;
}

.mv-context-command {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.76rem;
  line-height: 1.5;
  padding: 0.75rem 0.85rem;
  white-space: pre-wrap;
  word-break: break-all;
}

.mv-note-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.mv-note-list li {
  position: relative;
  padding-left: 0.95rem;
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.mv-note-list li::before {
  content: '›';
  position: absolute;
  left: 0;
  color: var(--primary);
}

.mv-storage-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.mv-storage-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-top: 1px solid var(--border);
}

.mv-storage-row:first-child {
  padding-top: 0;
  border-top: none;
}

.mv-storage-row:last-child {
  padding-bottom: 0;
}

.mv-storage-copy {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.mv-storage-path {
  color: var(--text);
  font-size: 0.78rem;
  line-height: 1.4;
  word-break: break-word;
}

.mv-storage-share {
  flex-shrink: 0;
  white-space: nowrap;
}

.mv-rc { font-size: 0.72rem; font-weight: bold; }
.mv-rc.ok  { color: #3fb950; }
.mv-rc.err { color: #f85149; }

.mv-btn-toggle {
  font-family: inherit; font-size: 0.78rem; border-radius: 5px; cursor: pointer;
  padding: 0.25rem 0.6rem; background: #21262d; border: 1px solid #30363d; color: #8b949e;
}
.mv-btn-toggle:hover { color: #c9d1d9; }

.mv-btn-run {
  font-family: inherit; font-size: 0.78rem; border-radius: 5px; cursor: pointer;
  padding: 0.25rem 0.6rem; border: none; background: #1a7f37; color: #fff; min-width: 5rem;
}
.mv-btn-run:hover:not(:disabled) { background: #2ea043; }
.mv-btn-run:disabled { opacity: 0.5; cursor: default; }

.mv-card-opts { padding: 0.5rem 0.75rem 0; border-top: 1px solid #30363d; }

.mv-confirm-row {
  display: flex; align-items: center; gap: 0.75rem;
  border-top: 1px solid #30363d;
  padding: 0.6rem 0 0.2rem;
  margin-top: 0.4rem;
}
.mv-confirm-msg { color: #d29922; font-size: 0.76rem; flex: 1; }
.mv-btn-confirm-run {
  font-family: inherit; font-size: 0.76rem; border-radius: 5px; cursor: pointer;
  padding: 0.25rem 0.7rem; border: none; background: #6e1a1a; color: #fff;
}
.mv-btn-confirm-run:hover { background: #a03a3a; }
.mv-btn-confirm-cancel {
  font-family: inherit; font-size: 0.76rem; border-radius: 5px; cursor: pointer;
  padding: 0.25rem 0.7rem; background: #21262d; color: #8b949e; border: 1px solid #30363d;
}
.mv-btn-confirm-cancel:hover { color: #c9d1d9; border-color: #8b949e; }

/* ── Overlays view ────────────────────────────────────────────────────────── */
.ov-add-form {
  padding: 0.75rem 1rem; background: #161b22; border: 1px solid #30363d;
  border-radius: 6px; margin-bottom: 1rem;
}
.ov-add-row { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.ov-input {
  font-family: inherit; font-size: 0.82rem; background: #0d1117; color: #c9d1d9;
  border: 1px solid #30363d; border-radius: 5px; padding: 0.3rem 0.6rem; min-width: 10rem;
}
.ov-input-wide { flex: 1; min-width: 18rem; }
.ov-input:focus { outline: none; border-color: #58a6ff; }
.ov-select {
  font-family: inherit; font-size: 0.82rem; background: #0d1117; color: #c9d1d9;
  border: 1px solid #30363d; border-radius: 5px; padding: 0.3rem 0.5rem;
}
.ov-confirm { display: grid; gap: 0.75rem; }
.ov-confirm-grid { display: grid; gap: 0.5rem; }
.ov-confirm-grid > div { display: grid; gap: 0.15rem; }
.ov-confirm-uri code { overflow-wrap: anywhere; }
.ov-confirm-check { display: flex; gap: 0.5rem; align-items: flex-start; color: #c9d1d9; }
.ov-approval {
  display: block; padding: 0.55rem 0.7rem; background: #0d1117; border: 1px solid #30363d;
  border-radius: 5px; color: #f0f6fc; overflow-wrap: anywhere;
}
.ov-uri  { font-size: 0.76rem; color: #8b949e; max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-meta { font-size: 0.76rem; color: #6e7681; }

/* ── Calm developer-tool theme overrides ─────────────────────────────────── */

html {
  background: var(--background);
}

body,
main,
.login {
  background: var(--background);
  color: var(--text);
}

body {
  line-height: 1.45;
}

::selection {
  background: var(--selected);
  color: var(--text);
}

a,
.pd-back,
.ev-back,
.pd-use-history summary,
.eo-user,
.jv-btn-open,
.ev-spinner,
.cursor {
  color: var(--primary-strong);
}

a:hover,
.pd-back:hover,
.ev-back:hover,
.pd-use-history summary:hover,
.dg-pkg:hover {
  color: var(--primary);
}

nav {
  background: var(--nav);
  border-right: 1px solid var(--border);
  box-shadow: none;
}

.logo {
  color: var(--text);
  border-bottom-color: var(--border);
  letter-spacing: 0.04em;
  text-shadow: none;
}

.logo .tree {
  color: var(--primary);
}

nav li button,
.logout,
.eo-toggle,
.ufa-filter-btn,
.jv-btn-refresh,
.mv-btn-toggle,
.mv-btn-confirm-cancel,
.iv-btn-keep,
.ov-meta {
  color: var(--text-muted);
}

.ufa-filter-btn {
  border-radius: 999px;
  padding: 0.1rem 0.35rem;
}

nav li button {
  border-left: 2px solid transparent;
  transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}

nav li button:hover,
.logout:hover,
.eo-toggle:hover,
.ufa-filter-btn.active,
.jv-btn-refresh:hover,
.mv-btn-toggle:hover,
.mv-btn-confirm-cancel:hover,
.iv-btn-keep:hover {
  color: var(--text);
}

nav li button:hover,
.dash-section-header:hover,
.pkg-table tr.clickable:hover td,
.ufa-package-row:hover td,
.dg-row:hover,
.jv-row-main:hover,
.iv-btn-keep:hover,
.eo-toggle:hover,
.ufi-package-item:hover,
.ufi-flag-toggle:hover,
.ufa-detail-toggle:hover {
  background: var(--hover);
}

nav li.active button {
  color: var(--text);
  border-left-color: var(--primary);
  background: var(--selected);
}

.card,
.dep-raw,
.pd-use-card,
.ufa-table-wrap,
.jv-row,
.ev-content,
.eo-opts,
.iv-etcfile,
.mv-card,
.ov-add-form,
.dash-system-grid,
.dash-summary-grid,
.dash-portage-panel,
.dash-chart-card,
.dash-section,
.terminal,
.iv-diff,
.ufi-sidebar,
.ufi-detail-panel,
.ufi-flag-card,
.ufi-flag-meta div,
.ufi-history-item {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: none;
}

.card,
.dep-raw,
.pd-use-card,
.ufa-table-wrap,
.jv-row,
.ev-content,
.eo-opts,
.iv-etcfile,
.mv-card,
.ov-add-form,
.dash-system-grid,
.dash-summary-grid,
.dash-portage-panel,
.dash-chart-card,
.dash-section,
.ufi-sidebar,
.ufi-detail-panel,
.ufi-flag-card,
.ufi-flag-meta div,
.ufi-history-item {
  border-radius: 10px;
}

.dash-section-body,
.ev-terminal,
.terminal,
.iv-diff,
.ufa-package-detail-row td,
.ufa-package-detail,
.ufa-history-panel,
.pkg-table th,
.ufa-table th,
.jv-tab.active,
.iv-etcfile-header,
.eo-preview,
.eo-list,
.mv-card-opts,
.mv-confirm-row,
.jv-hist-filter,
.jv-purge-input,
.jv-hist-toolbar,
.iv-etcfile-header,
.dash-summary-cell,
.dash-meter-row,
.dash-portage-header,
.dash-portage-row,
.ufi-empty {
  background: var(--surface-2);
}

.card,
.dep-raw,
.pd-use-card,
.ufa-table-wrap,
.jv-row,
.ev-content,
.eo-opts,
.iv-etcfile,
.mv-card,
.ov-add-form,
.dash-system-grid,
.dash-summary-grid,
.dash-portage-panel,
.dash-chart-card,
.dash-section,
.pkg-toolbar input,
.ov-input,
.ov-select,
.eo-num,
input,
.logout,
.jv-btn-refresh,
.mv-btn-toggle,
.mv-btn-confirm-cancel,
.jv-btn-output,
.ev-btn-secondary,
.ev-btn-cancel,
.iv-btn-keep,
.jv-tab,
.pkg-table th,
.pkg-table td,
.ufa-table th,
.ufa-table td,
.dash-meter-row,
.dash-summary-cell,
.dash-portage-header,
.dash-portage-row,
.iv-etcfile-header,
.eo-preview,
.eo-list,
.mv-card-opts,
.mv-confirm-row,
.jv-hist-toolbar,
.ufi-sidebar,
.ufi-detail-panel,
.ufi-flag-card,
.ufi-flag-meta div,
.ufi-history-item,
.ufi-state-chip,
.ufi-source-chip {
  border-color: var(--border);
}

h1,
h2,
.card h1,
.pkg-toolbar h2,
.dashboard h2,
.jv-header h2,
.pd-header-row h2,
.pd-use-origin-label,
.ufa-package-name,
.ufa-detail-package,
.td-pkg,
.mv-title,
.ev-step-title,
.iv-fname,
.eo-cmd,
.eo-flag,
.dash-meter-value,
.dash-summary-value,
.dash-section-header,
.dash-size-value,
.line,
.dg-pkg,
.pd-badge,
.jv-kind,
.ufa-origin-text.profile,
.ufa-history-status,
.pd-use-history-state,
.ufi-package-title,
.ufi-history-state,
.ufi-history-source {
  color: var(--text);
}

.card h1,
.dashboard h2,
.pkg-toolbar h2,
.jv-header h2,
.pd-header-row h2 {
  letter-spacing: 0.01em;
}

.sub,
.muted,
.placeholder,
.pd-desc,
.pd-badge.pd-muted,
.pd-panel h4,
.pd-use-default,
.pd-use-origin-file,
.pd-use-history-file,
.ufa-filter-label,
.ufa-origin-file-cell,
.ufa-detail-file,
.ufa-history-file,
.ufa-history-empty,
.ufa-dim,
.dg-msg,
.dg-cat,
.dg-muted,
.jv-ago,
.jv-dur,
.pkg-count,
.td-cat,
.td-ver,
.td-desc,
.dash-meter-label,
.dash-summary-label,
.dash-chart-title,
.dash-meter-meta,
.dash-portage-path,
.dash-portage-size,
.dash-summary-path,
.dash-portage-hint,
.mv-cmd,
.ov-uri,
.ov-meta,
.eo-desc,
.eo-prompt,
.eo-base,
.pkg-table th,
.ufa-table th,
.ufa-row-chevron,
.dash-chart-empty,
.dash-section-chevron,
.ufi-package-meta,
.ufi-package-desc,
.ufi-package-description,
.ufi-flag-description,
.ufi-flag-meta dt,
.ufi-history-file {
  color: var(--text-muted);
}

.error,
.hi-err,
.line.status.err,
.mv-rc.err,
.jv-badge.err,
.ufa-status-text.off,
.dg-err-badge {
  color: var(--danger);
}

.pd-installed-badge,
.iv-badge-action,
.hi-ok,
.line.status.ok,
.mv-rc.ok,
.jv-badge.ok,
.jv-purge-msg,
.ufa-status-text.on,
.pd-use-history-token,
.ufa-history-token,
.eo-target,
.ufi-history-token {
  color: var(--success);
}

.hi-warn,
.mv-confirm-msg {
  color: var(--warning);
}

input,
.pkg-toolbar input,
.ov-input,
.ov-select,
.eo-num,
.jv-hist-filter,
.jv-purge-input {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border);
  caret-color: var(--text);
  border-radius: 8px;
}

input::placeholder,
.ov-input::placeholder,
.pkg-toolbar input::placeholder {
  color: var(--text-subtle);
}

input:focus,
.pkg-toolbar input:focus,
.ov-input:focus,
.ov-select:focus,
.eo-num:focus,
.jv-hist-filter:focus,
.jv-purge-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--focus-ring);
}

.login button,
.pd-btn-install,
.ev-btn-primary,
.mv-btn-run {
  background: var(--primary);
  color: var(--text-on-accent);
  border: 1px solid transparent;
  font-weight: 700;
}

.login button:not(:disabled):hover,
.pd-btn-install:hover,
.ev-btn-primary:hover,
.mv-btn-run:hover:not(:disabled) {
  background: #97b491;
}

.ev-btn-danger,
.mv-btn-confirm-run {
  background: var(--danger);
  color: #1a0f0f;
  border: 1px solid transparent;
  font-weight: 700;
}

.ev-btn-danger:hover,
.mv-btn-confirm-run:hover {
  background: #c48c8b;
}

.ev-btn-secondary,
.ev-btn-cancel,
.jv-btn-output,
.mv-btn-toggle,
.mv-btn-confirm-cancel,
.iv-btn-keep,
.logout,
.jv-btn-refresh,
.jv-tab,
.ov-select,
.ufi-package-item,
.ufi-state-chip,
.ufi-source-chip,
.pd-badge,
.jv-kind,
.dg-miss {
  background: var(--surface-2);
}

.ev-btn-secondary,
.ev-btn-cancel,
.jv-btn-output,
.mv-btn-toggle,
.mv-btn-confirm-cancel,
.iv-btn-keep,
.logout,
.jv-btn-refresh,
.jv-tab,
.ov-select,
.jv-btn-open,
.jv-btn-kill,
.pd-btn-uninstall,
.jv-btn-purge,
.pd-badge,
.jv-kind,
.dg-miss,
.iv-btn-replace {
  border: 1px solid var(--border);
}

.ev-btn-secondary:hover,
.jv-btn-output:hover,
.mv-btn-toggle:hover,
.mv-btn-confirm-cancel:hover,
.iv-btn-keep:hover,
.logout:hover,
.jv-btn-refresh:hover,
.jv-tab:hover:not(.active) {
  background: var(--hover);
  border-color: var(--hover-border);
}

.jv-btn-open,
.eo-badge,
.jv-badge.run {
  background: var(--info-surface);
  border-color: rgb(112 141 168 / 0.35);
  color: var(--info);
}

.jv-btn-open:hover {
  background: rgb(112 141 168 / 0.22);
  border-color: var(--info);
}

.jv-btn-kill,
.pd-btn-uninstall,
.jv-btn-purge,
.logout:hover,
.ev-btn-cancel:hover:not(:disabled) {
  color: var(--danger);
}

.jv-btn-kill,
.pd-btn-uninstall,
.jv-btn-purge {
  background: var(--danger-surface);
  border-color: rgb(186 127 125 / 0.35);
}

.jv-btn-kill:hover,
.pd-btn-uninstall:hover,
.jv-btn-purge:hover,
.logout:hover,
.ev-btn-cancel:hover:not(:disabled) {
  background: rgb(186 127 125 / 0.22);
  border-color: var(--danger);
}

.pd-flag.on,
.iv-btn-replace,
.jv-badge.ok,
.dg-dot.inst,
.ufi-state-chip.is-on,
.ufi-state-chip.is-forced,
.ufi-source-chip.is-forced {
  background: var(--success-surface);
  border-color: rgb(146 175 132 / 0.35);
  color: var(--success);
}

.iv-btn-replace:hover {
  background: rgb(146 175 132 / 0.22);
}

.jv-badge.err,
.dg-err-badge,
.ufi-state-chip.is-off,
.ufi-state-chip.is-masked,
.ufi-source-chip.is-masked {
  background: var(--danger-surface);
  border-color: rgb(186 127 125 / 0.35);
}

.ufi-source-chip.is-package-use {
  background: var(--info-surface);
  border-color: rgb(112 141 168 / 0.35);
  color: var(--info);
}

.ufi-source-chip.is-make-conf {
  background: var(--warning-surface);
  border-color: rgb(181 154 103 / 0.35);
  color: var(--warning);
}

.ufi-source-chip.is-profile,
.pd-flag.off,
.muted-line,
.ufa-status-text.neutral {
  color: var(--text-subtle);
}

.pd-flag.off,
.dg-miss,
.jv-kind {
  border-color: var(--border);
}

.ufa-origin-text.user-global {
  color: var(--info);
}

.ufa-origin-text.user-package {
  color: var(--primary);
}

.ufa-origin-text.profile-package,
.pd-use-history-origin,
.ufa-history-origin {
  color: var(--chart-5);
}

.pd-badge,
.jv-kind,
.ufi-state-chip,
.ufi-source-chip {
  border-radius: 999px;
}

.pkg-table th,
.ufa-table th {
  background: var(--surface-2);
}

.pkg-table td,
.ufa-table td,
.eo-preview,
.eo-list,
.mv-card-opts,
.mv-confirm-row,
.jv-hist-toolbar,
.pd-tabs,
.pd-use-history,
.ufi-flag-details,
.ufa-detail-entry + .ufa-detail-entry {
  border-color: var(--border);
}

.pkg-table tr.clickable:hover td,
.ufa-package-row:hover td {
  background: var(--hover);
}

.ufi-package-item.active,
.jv-row.expanded,
.jv-tab.active,
.ufa-filter-btn.active,
.pd-tabs button.active {
  color: var(--text);
  border-color: rgb(136 167 132 / 0.35);
  background: var(--selected);
}

.ufi-package-item.active {
  box-shadow: inset 0 0 0 1px rgb(136 167 132 / 0.12);
}

.pd-tabs button.active {
  border-bottom-color: var(--primary);
}

.pd-tabs button:hover:not(.active),
.ufa-filter-btn:hover,
.eo-toggle:hover {
  color: var(--text);
}

.dash-chart-card,
.dash-section,
.ufa-table-wrap {
  border: 1px solid var(--border);
}

.dashboard {
  color: var(--text);
}

.dashboard h2 {
  color: var(--text);
}

.dash-section {
  border-radius: 10px;
  overflow: hidden;
}

.dash-section-header {
  background: var(--surface);
  color: var(--text);
  border-bottom: 1px solid var(--border);
  transition: background-color 0.14s ease;
}

.dash-section-chevron {
  color: var(--text-subtle);
  border-left-color: var(--text-subtle);
}

.dash-section-body {
  background: var(--surface-2);
}

.dash-chart-card,
.dash-section-body,
.dash-summary-grid {
  box-shadow: none;
}

.dash-meter-row,
.dash-summary-cell,
.dash-portage-header,
.dash-portage-row {
  background: transparent;
}

.dash-meter-shell,
.dash-meter-shell-thin {
  gap: 2px;
}

.dash-meter-segment {
  background: var(--chart-track);
}

.dash-meter-segment.is-filled.is-ok,
.dash-meter-segment.is-filled.tone-green {
  background: var(--primary);
}

.dash-meter-segment.is-filled.is-warn,
.dash-meter-segment.is-filled.tone-amber {
  background: var(--warning);
}

.dash-meter-segment.is-filled.is-hot {
  background: var(--danger);
}

.dash-meter-segment.is-filled.tone-blue {
  background: var(--info);
}

.dash-meter-segment.is-filled.tone-purple {
  background: var(--chart-5);
}

.eo-opt input[type=checkbox] {
  accent-color: var(--primary);
}

.terminal,
.ev-terminal,
.iv-diff,
.dep-raw {
  background: var(--shell);
}

.dash-chart-empty,
.placeholder,
.ufi-empty {
  color: var(--text-subtle);
}

.ufi-empty {
  border: 1px dashed var(--hover-border);
}

/* ── App shell refactor ───────────────────────────────────────────────────── */

.layout.app-shell {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  min-height: 100vh;
  overflow: hidden;
}

.app-approval-lock {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: rgb(1 4 9 / 0.7);
  backdrop-filter: blur(6px);
}

.app-approval-card {
  width: min(42rem, 100%);
  display: grid;
  gap: 0.5rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 24px 60px rgb(1 4 9 / 0.35);
}

.app-approval-title {
  font-weight: 700;
  color: var(--text);
}

.app-approval-line {
  font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
  font-size: 0.92rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.app-approval-form {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.app-approval-input {
  min-width: 10rem;
  padding: 0.7rem 0.85rem;
  border-radius: 0.75rem;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
}

.app-approval-submit {
  padding: 0.7rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--accent) 60%, var(--border));
  background: color-mix(in srgb, var(--accent) 24%, var(--surface));
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
}

.app-approval-cancel {
  padding: 0.45rem 0.75rem;
  font-size: 0.82rem;
  font-weight: 500;
  background: var(--surface-2);
  border-color: var(--border);
}

.app-approval-submit:disabled {
  opacity: 0.6;
  cursor: default;
}

.app-approval-error {
  color: var(--danger);
  font-weight: 600;
}

.app-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.9rem 1.35rem 1rem;
  background: rgb(20 24 29 / 0.94);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(14px);
}

.app-shell .app-bar nav {
  background: transparent;
  border-right: 0;
  box-shadow: none;
  display: block;
  height: auto;
  padding: 0;
  position: static;
  top: auto;
}

.app-shell .app-bar nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0;
  flex: none;
}

.app-bar-main,
.app-context-bar,
.app-brand-cluster,
.app-bar-tools,
.app-status-strip,
.app-context-copy {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.app-bar-main,
.app-context-bar {
  justify-content: space-between;
}

.app-bar-main,
.app-context-bar {
  flex-wrap: wrap;
}

.app-brand-cluster {
  flex: 1 1 42rem;
  min-width: 0;
  flex-wrap: wrap;
  gap: 0.85rem 1rem;
}

.app-bar-tools {
  flex: 1 1 24rem;
  min-width: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.app-brand,
.app-primary-link,
.app-context-link,
.app-logout {
  font: inherit;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}

.app-brand,
.app-primary-link,
.app-context-link,
.app-logout {
  background: transparent;
  color: var(--text-muted);
}

.app-brand,
.app-primary-link,
.app-context-link,
.app-logout {
  outline: none;
}

.app-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.15rem;
  border-radius: 0;
  border: 0;
  color: var(--text);
  cursor: pointer;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.app-brand:hover {
  color: var(--primary);
}

.app-brand .tree {
  color: var(--primary);
  font-size: 0.9rem;
}

.app-primary-nav {
  min-width: 0;
  flex: 1 1 auto;
}

.app-primary-link,
.app-context-link,
.app-logout {
  cursor: pointer;
  white-space: nowrap;
}

.app-primary-link {
  padding: 0.42rem 0.72rem;
  color: var(--text-subtle);
}

.app-primary-link:hover,
.app-context-link:hover,
.app-logout:hover {
  background: var(--hover);
  border-color: var(--hover-border);
  color: var(--text);
}

.app-primary-link.active {
  background: var(--primary-surface);
  border-color: rgb(136 167 132 / 0.35);
  color: var(--text);
}

.app-status-strip {
  flex: 0 1 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.45rem;
}

.app-status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 1.9rem;
  padding: 0.18rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgb(152 164 175 / 0.08);
  color: var(--text-muted);
  font-size: 0.72rem;
  white-space: nowrap;
}

.app-status-pill.is-info {
  background: var(--info-surface);
  border-color: rgb(112 141 168 / 0.35);
  color: var(--info);
}

.app-status-pill.is-muted {
  color: var(--text-subtle);
}

.app-logout {
  padding: 0.4rem 0.75rem;
  color: var(--text-muted);
}

.app-logout:hover {
  color: var(--danger);
}

.app-context-bar {
  align-items: flex-start;
  padding-top: 0.1rem;
  border-top: 1px solid rgb(49 58 67 / 0.6);
}

.app-context-copy {
  align-items: flex-start;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.app-context-label {
  color: var(--text-subtle);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.app-context-title {
  color: var(--text);
  font-size: 1rem;
  font-weight: 700;
}

.app-context-detail {
  color: var(--text-muted);
  font-size: 0.78rem;
  max-width: 88ch;
}

.app-context-nav {
  flex: 0 1 auto;
}

.app-context-link {
  padding: 0.32rem 0.65rem;
  color: var(--text-subtle);
  font-size: 0.75rem;
}

.app-brand:focus-visible,
.app-primary-link:focus-visible,
.app-context-link:focus-visible,
.app-logout:focus-visible {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.app-main {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
  padding: 1.35rem 1.5rem 1.75rem;
  overflow-y: auto;
}

.app-content {
  width: min(100%, 1720px);
  margin: 0 auto;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.dash-section[id],
.mv-card[id] {
  scroll-margin-top: 8rem;
}

@media (max-width: 960px) {
  .app-bar {
    padding-inline: 1rem;
  }

  .app-brand-cluster,
  .app-bar-tools,
  .app-context-bar {
    width: 100%;
  }

  .app-bar-tools,
  .app-status-strip {
    justify-content: flex-start;
  }

  .app-primary-nav {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 0.15rem;
  }

  .app-primary-nav::-webkit-scrollbar {
    height: 6px;
  }

  .app-primary-nav ul {
    min-width: max-content;
    flex-wrap: nowrap;
  }

  .app-context-nav {
    width: 100%;
    overflow-x: auto;
  }

  .app-context-nav ul {
    min-width: max-content;
    flex-wrap: nowrap;
  }
}

@media (max-width: 640px) {
  .app-bar {
    gap: 0.65rem;
    padding: 0.8rem 0.85rem 0.9rem;
  }

  .app-main {
    padding: 1rem 0.9rem 1.25rem;
  }

  .ev-terminal {
    min-height: 0;
  }

  .app-status-strip {
    display: none;
  }

  .app-primary-link,
  .app-context-link,
  .app-logout {
    font-size: 0.76rem;
  }

  .app-context-title {
    font-size: 0.92rem;
  }

  .app-context-detail {
    font-size: 0.74rem;
  }
}