:root {
  --desk: #008080;
  --face: #c0c0c0;
  --light: #ffffff;
  --shadow: #808080;
  --dark: #000000;
  --title: #000080;
  --title-2: #1084d0;
  --ink: #000000;
  --muted: #404040;
  --c-worktree: #0000a8;
  --c-keep: #a800a8;
  --c-prunable: #fcfc54;
  --c-node: #00a8a8;
  --c-cache: #a8a8a8;
  --c-process: #00a800;
  --c-orphan: #fc5454;
  --c-selected: #fc0000;
  --c-empty: #ffffff;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--desk);
  color: var(--ink);
  font: 12px/1.35 Tahoma, "MS Sans Serif", Geneva, "DejaVu Sans", sans-serif;
  padding: 16px;
}
button, input { font: inherit; }

.window {
  max-width: 1180px;
  margin: 0 auto;
  background: var(--face);
  border: 2px solid;
  border-color: var(--light) var(--dark) var(--dark) var(--light);
  box-shadow: inset -1px -1px var(--shadow), inset 1px 1px #dfdfdf;
  padding: 3px;
}
.titlebar {
  display: flex; align-items: center; gap: 6px;
  background: linear-gradient(90deg, var(--title), var(--title-2));
  color: #fff; font-weight: bold; padding: 3px 4px 3px 6px;
}
.titlebar .title { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.titlebar .chrome { display: flex; gap: 2px; }
.titlebar .chrome span {
  width: 16px; height: 14px; background: var(--face); color: #000; font-size: 10px; line-height: 12px; text-align: center;
  border: 1px solid; border-color: var(--light) var(--dark) var(--dark) var(--light);
}

.btn {
  min-width: 84px; padding: 4px 12px; background: var(--face); color: var(--ink); cursor: pointer;
  border: 2px solid; border-color: var(--light) var(--dark) var(--dark) var(--light);
  box-shadow: inset -1px -1px var(--shadow), inset 1px 1px #dfdfdf;
}
.btn:active:not(:disabled) { border-color: var(--dark) var(--light) var(--light) var(--dark); box-shadow: inset 1px 1px var(--shadow); }
.btn:disabled { color: var(--shadow); text-shadow: 1px 1px var(--light); cursor: default; }
.btn:focus-visible, .tab:focus-visible, .cell:focus-visible { outline: 1px dotted #000; outline-offset: -4px; }
.btn.primary { font-weight: bold; }

.sunken {
  border: 2px solid; border-color: var(--shadow) var(--light) var(--light) var(--shadow);
  box-shadow: inset 1px 1px var(--dark);
  background: var(--light);
}
.group { border: 1px solid var(--shadow); box-shadow: 1px 1px var(--light); padding: 10px 8px 8px; margin: 10px 4px 4px; position: relative; }
.group > .legend-title { position: absolute; top: -8px; left: 8px; background: var(--face); padding: 0 4px; }

.toolbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 6px 2px; }
.toolbar .spacer { flex: 1; }
.toolbar .hint { color: var(--muted); }

.volumes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px 16px; }
.volume .name { display: flex; justify-content: space-between; gap: 8px; }
.volume .name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar { height: 14px; margin-top: 3px; padding: 2px; }
.bar > i { display: block; height: 100%; background: var(--title); }
.bar.low > i { background: var(--c-selected); }

.map { padding: 4px; min-height: 160px; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 1px; background: var(--light); }
.cell { width: 11px; height: 11px; border: 1px solid rgba(0, 0, 0, .55); background: var(--c-empty); cursor: pointer; padding: 0; }
.cell.k-worktree { background: var(--c-worktree); }
.cell.k-worktree.keep { background: var(--c-keep); }
.cell.k-prunable { background: var(--c-prunable); }
.cell.k-node_modules { background: var(--c-node); }
.cell.k-node_modules.keep { background: repeating-linear-gradient(45deg, var(--c-node) 0 3px, var(--c-keep) 3px 5px); }
.cell.k-cache { background: var(--c-cache); }
.cell.k-process { background: var(--c-process); }
.cell.k-process.orphan { background: var(--c-orphan); animation: blink 1s steps(2) infinite; }
.cell.selected { background: var(--c-selected) !important; }
.cell.hot { outline: 2px solid #000; outline-offset: -1px; }
.cell.reading { animation: read .25s steps(2) 2; }
@keyframes blink { 50% { filter: brightness(1.6); } }
@keyframes read { 50% { background: var(--c-prunable); } }
.map-empty { color: var(--muted); padding: 40px; text-align: center; width: 100%; }

.legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 4px 12px; margin-top: 8px; }
.legend span { display: flex; align-items: center; gap: 6px; }
.legend .cell { cursor: default; flex: none; }

.progress { display: flex; align-items: center; gap: 8px; margin: 8px 4px 0; }
.progress .bar { flex: 1; height: 20px; }
.progress .bar > i { background: repeating-linear-gradient(90deg, var(--title) 0 10px, transparent 10px 12px); transition: width .2s; }
.progress .label { min-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.tabs { display: flex; flex-wrap: wrap; gap: 2px; padding: 0 4px; margin-top: 10px; }
.tab {
  padding: 3px 10px; background: var(--face); cursor: pointer; position: relative; top: 2px;
  border: 2px solid; border-bottom: none; border-color: var(--light) var(--dark) transparent var(--light);
}
.tab[aria-selected="true"] { top: 0; padding-bottom: 5px; font-weight: bold; z-index: 1; }
.tab .count { color: var(--muted); font-weight: normal; }

.list { max-height: 420px; overflow: auto; margin: 0 4px; }
table { border-collapse: collapse; width: 100%; table-layout: fixed; }
col.c-select { width: 30px; }
col.c-type { width: 130px; }
col.c-name { width: 22%; }
col.c-size { width: 84px; }
col.c-used { width: 96px; }
col.c-status { width: 24%; }
td { overflow-wrap: anywhere; }
th {
  position: sticky; top: 0; background: var(--face); text-align: left; font-weight: normal; padding: 3px 6px; white-space: nowrap; cursor: pointer;
  border: 1px solid; border-color: var(--light) var(--dark) var(--dark) var(--light); user-select: none;
}
th.num, td.num { text-align: right; }
td { padding: 3px 6px; border-bottom: 1px dotted #c8c8c8; vertical-align: top; }
tr.selected td { background: var(--title); color: #fff; }
tr.selected td .why, tr.selected td .path { color: #d8d8ff; }
tr:hover td { background: #e8e8f8; }
tr.selected:hover td { background: #1a1aa0; }
td .path { color: var(--muted); font-family: "Lucida Console", Monaco, monospace; font-size: 11px; word-break: break-all; }
td .why { color: var(--muted); }
.badge { display: inline-block; padding: 0 5px; border: 1px solid var(--dark); font-size: 10px; font-weight: bold; letter-spacing: .5px; }
.badge.safe { background: #a8fca8; }
.badge.keep { background: #fca8fc; }
.badge.review { background: #fcfca8; }
.badge.info { background: #e0e0e0; }
.swatch { display: inline-block; width: 10px; height: 10px; border: 1px solid #000; margin-right: 6px; vertical-align: -1px; }

.statusbar { display: flex; gap: 2px; margin-top: 6px; }
.statusbar > div { flex: 1; padding: 2px 6px; border: 1px solid; border-color: var(--shadow) var(--light) var(--light) var(--shadow); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.statusbar > div:first-child { flex: 3; }

.modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .25); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 10; }
.modal { width: min(760px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; }
.modal .body { padding: 12px; overflow: auto; }
.modal ol, .modal ul { margin: 8px 0; padding-left: 22px; }
.modal li { margin: 4px 0; word-break: break-word; }
.modal .buttons { display: flex; justify-content: flex-end; gap: 8px; padding: 0 12px 12px; }
.outcome-cleaned { color: #006400; }
.outcome-skipped, .outcome-partial { color: #8a5a00; }
.outcome-failed { color: #a00000; }
[hidden] { display: none !important; }

@media (max-width: 640px) {
  body { padding: 0; }
  .window { border-width: 0; }
  .progress .label { min-width: 0; }
  td:nth-child(4), th:nth-child(4), td:nth-child(6), th:nth-child(6) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cell.reading, .cell.k-process.orphan { animation: none; }
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
col.c-actions { width: 196px; }
td.actions { white-space: nowrap; }
td.actions .btn { min-width: 0; padding: 1px 8px; margin: 0 2px 2px 0; font-size: 11px; }
.alerts { margin: 8px 4px 0; display: grid; gap: 4px; }
.alert { display: flex; align-items: flex-start; gap: 8px; padding: 6px 8px; background: #ffffe1; border: 1px solid #000; }
.alert.warning { background: #ffe1e1; }
.alert .icon { font-weight: bold; width: 18px; height: 18px; flex: none; text-align: center; line-height: 16px; border: 1px solid #000; background: #fcfc54; }
.alert.warning .icon { background: #fc5454; color: #fff; }
.alert .text { flex: 1; }
.alert .btn { min-width: 0; padding: 1px 8px; }
.prompt-box { width: 100%; min-height: 300px; font: 11px/1.4 "Lucida Console", Monaco, monospace; resize: vertical; padding: 6px; }
.groups { width: 100%; }
.groups td { vertical-align: middle; }
.inline-result { display: block; font-size: 11px; margin-top: 2px; white-space: normal; }
.copied { color: #006400; margin-left: 6px; }
tr.abandoned td { background: #ffd0d0; }
tr.abandoned:hover td { background: #ffb8b8; }
tr.abandoned.selected td { background: #a00000; color: #fff; }
.badge.abandoned { background: #fc0000; color: #fff; }
.abandoned-count { color: #c00000; font-weight: bold; }