/* Polar Precision — disk_cleaner */
:root {
  --bg-base: #EAF0F3;
  --surface-0: #DCE7EB;
  --surface-1: #F9FBFC;
  --surface-2: #EEF4F6;
  --surface-3: #DEE8EC;
  --border: rgba(28, 58, 74, .11);
  --border-strong: rgba(28, 58, 74, .20);
  --border-highlight: rgba(255, 255, 255, .92);
  --text-1: #10232D;
  --text-2: #687C88;
  --text-3: #9AAAB3;
  --accent: #087F88;
  --accent-2: #12A9B1;
  --accent-rgb: 8, 127, 136;
  --accent-strong: #08747D;
  --accent-grad-a: #0E969F;
  --accent-grad-b: #08747D;
  --accent-dim: rgba(var(--accent-rgb), .10);
  --success: #0D9D72;
  --warning: #C58A1D;
  --danger: #D94754;
  --st-online: #34D399;
  --st-pending: #FBBF24;
  --st-offline: #6B7280;
  --st-alarm: #F87171;
  --shadow-1: 0 2px 6px rgba(32, 65, 82, .07), 0 22px 55px -36px rgba(34, 79, 99, .35);
  --shadow-2: 0 28px 80px -38px rgba(22, 58, 76, .45), 0 8px 22px rgba(40, 77, 94, .08);
  --shadow-pop: 0 36px 95px -34px rgba(22, 58, 76, .48), 0 12px 30px rgba(40, 77, 94, .10);
  --ring: 0 0 0 3px rgba(var(--accent-rgb), .12);
  --ease-premium: cubic-bezier(.16, 1, .3, 1);
  --mono: "JetBrains Mono", "Roboto Mono", ui-monospace, monospace;
  --sans: "Geist Variable", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px; --sp-8: 32px;
  --radius-card: 14px; --radius-control: 10px; --radius-badge: 5px;
  --topbar-h: 56px; --statusbar-h: 28px; --content-max: 1320px;
  --z-modal: 50; --z-toast: 70;
  --list-h: 58%;
  --zoom: 1;
  --glass-rgb: 255, 255, 255;
}

html.dark {
  --bg-base: #05070B;
  --surface-0: #0B1018;
  --surface-1: #111824;
  --surface-2: #182231;
  --surface-3: #223047;
  --border: rgba(150, 180, 205, .12);
  --border-strong: rgba(150, 180, 205, .22);
  --border-highlight: rgba(150, 180, 205, .10);
  --text-1: #EEF3F7;
  --text-2: #94A6B8;
  --text-3: #61738A;
  --accent: #71E3EC;
  --accent-2: #47BFCE;
  --accent-rgb: 113, 227, 236;
  --accent-strong: #47BFCE;
  --accent-grad-a: #A4F5F3;
  --accent-grad-b: #47BFCE;
  --glass-rgb: 16, 23, 34;
  --shadow-1: 0 2px 8px rgba(0, 0, 0, .35), 0 18px 40px -28px rgba(0, 0, 0, .55);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--sans);
  color: var(--text-1);
  background:
    radial-gradient(1100px 420px at 8% -8%, rgba(var(--accent-rgb), .055), transparent 55%),
    var(--bg-base);
  zoom: var(--zoom);
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.app {
  height: calc(100vh / var(--zoom, 1));
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* —— Topbar —— */
.topbar {
  height: var(--topbar-h);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  background: rgba(var(--glass-rgb), .78);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(12px);
  z-index: 30;
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-mark {
  width: 28px; height: 28px; border-radius: 8px; flex: 0 0 auto;
  background: linear-gradient(145deg, var(--accent-grad-a), var(--accent-grad-b));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand-text strong { font-weight: 620; font-size: 14px; }
.brand-text .sub { color: var(--text-2); font-size: 11px; letter-spacing: .02em; }
.topbar-spacer { flex: 1; }
.topbar-meta {
  font-size: 12px; color: var(--text-2);
  padding: 4px 10px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
}
.topbar-actions { display: flex; gap: 8px; align-items: center; flex: 0 0 auto; }

.statusbar {
  height: var(--statusbar-h);
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 16px;
  padding: 0 16px;
  border-top: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-2);
  font-size: 12px;
  font-family: var(--mono);
}
.statusbar-right { margin-left: auto; }
.statusbar .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--st-online);
  box-shadow: 0 0 0 1px rgba(52, 211, 153, .35);
  display: inline-block; vertical-align: middle;
}
.statusbar .dot.warn { background: var(--st-pending); box-shadow: 0 0 0 1px rgba(251,191,36,.35); }
.statusbar .dot.busy {
  background: var(--st-pending);
  animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}

.main {
  flex: 1 1 auto;
  min-height: 0;
  width: min(100%, var(--content-max));
  margin: 0 auto;
  padding: 16px 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.page-head {
  flex: 0 0 auto;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
}
.page-head h1 {
  margin: 0;
  font-size: clamp(20px, 1.6vw, 26px);
  font-weight: 620;
}
.page-head h1::after {
  content: "";
  display: block;
  width: 28px; height: 2px; margin-top: 8px;
  background: linear-gradient(90deg, var(--accent), transparent);
}
.page-head p {
  margin: 8px 0 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.5;
  max-width: 58ch;
}
.hint-chip {
  margin-top: 4px;
  font-size: 11px; font-family: var(--mono); letter-spacing: .04em;
  color: var(--success);
  background: rgba(13, 157, 114, .10);
  border: 1px solid rgba(13, 157, 114, .22);
  border-radius: var(--radius-badge);
  padding: 6px 10px; white-space: nowrap;
}

.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  flex: 0 0 auto;
}
.kpi {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-1), inset 0 0 0 1px var(--border-highlight);
  padding: 12px 14px;
  min-height: 92px;
  min-width: 0;
}
.kpi-accent { box-shadow: var(--shadow-1), inset 0 0 0 1px var(--border-highlight), inset 2px 0 0 var(--accent); }
.kpi .eyebrow {
  font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-2); font-family: var(--mono); margin-bottom: 4px;
}
.kpi .value {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 26px; line-height: 30px; font-weight: 700;
}
.kpi .status-value {
  font-size: 18px; line-height: 28px; font-weight: 620;
  font-family: var(--sans);
}
.kpi .hint { margin-top: 6px; font-size: 12px; color: var(--text-2); }
.meter {
  margin-top: 8px; height: 4px; border-radius: 999px;
  background: var(--surface-3); overflow: hidden;
}
.meter > span {
  display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-grad-a), var(--accent-grad-b));
  transition: width .25s var(--ease-premium);
}
.meter.warn > span { background: linear-gradient(90deg, #E6B04A, var(--warning)); }
.meter.alarm > span { background: linear-gradient(90deg, #EF7A84, var(--danger)); }

.toolbar {
  flex: 0 0 auto;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.toolbar .grow { flex: 1 1 200px; min-width: 140px; }
.toolbar-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.seg {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-control);
}
.seg button {
  border: 0; background: transparent; height: 30px; padding: 0 12px;
  border-radius: 8px; color: var(--text-2); font-size: 12px;
}
.seg button[aria-pressed="true"] {
  background: var(--surface-1); color: var(--text-1);
  box-shadow: 0 1px 2px rgba(32,65,82,.08);
}

.btn {
  height: 34px; padding: 0 14px; border-radius: var(--radius-control);
  border: 1px solid var(--border); background: var(--surface-2);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform .15s var(--ease-premium), background .15s var(--ease-premium), opacity .15s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .4; transform: none; cursor: not-allowed; }
.btn:focus-visible { outline: none; box-shadow: var(--ring); border-color: var(--accent); }
.btn-primary {
  border: 0; color: #fff;
  background: linear-gradient(145deg, var(--accent-grad-a), var(--accent-grad-b));
}
html.dark .btn-primary { color: #042428; }
.btn-danger {
  border: 0; color: #fff;
  background: linear-gradient(145deg, #E86A74, var(--danger));
}
.btn-ghost { background: transparent; }
.btn-icon {
  width: 34px; padding: 0; color: var(--text-2);
  background: transparent;
}
.btn-icon:hover { color: var(--text-1); background: var(--surface-2); }

.input {
  height: 36px; width: 100%; padding: 0 10px;
  border: 1px solid var(--border); border-radius: var(--radius-control);
  background: var(--surface-2); outline: 0;
}
.input:focus { border-color: var(--accent); box-shadow: var(--ring); }

.workspace {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-1), inset 0 0 0 1px var(--border-highlight);
  display: flex; flex-direction: column; min-height: 0;
}
.card-title {
  height: 48px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px; border-bottom: 1px solid var(--border);
  font-size: 13px; font-weight: 580;
}
.card-title .tag {
  font-family: var(--mono); font-size: 11px; color: var(--text-2);
  letter-spacing: .04em;
}
.live-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
  color: var(--text-3);
}
.live-tag.on { color: var(--success); }
.live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--st-offline);
}
.live-tag.on .live-dot {
  background: var(--st-online);
  box-shadow: 0 0 0 1px rgba(52,211,153,.35);
  animation: pulse 1.5s ease-in-out infinite;
}

.list-card { flex: 1 1 auto; min-height: 200px; height: var(--list-h); }
.log-card { flex: 1 1 auto; min-height: 120px; }

.split-bar {
  flex: 0 0 10px;
  cursor: row-resize;
  position: relative;
  touch-action: none;
}
.split-bar::before {
  content: "";
  position: absolute; left: 18%; right: 18%; top: 4px; height: 2px;
  border-radius: 2px; background: var(--surface-0);
}
.split-bar:hover::before { background: rgba(var(--accent-rgb), .45); }
body.is-resizing { user-select: none; cursor: row-resize; }

.table-wrap {
  flex: 1 1 auto; min-height: 0; overflow: auto;
  container-type: inline-size;
}
table.targets {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
table.targets thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--surface-1);
  text-align: left;
  font-family: var(--mono); font-size: 11px; font-weight: 540;
  letter-spacing: .07em; text-transform: uppercase; color: var(--text-2);
  padding: 10px 12px; border-bottom: 1px solid var(--border);
}
table.targets td {
  padding: 0 12px; height: 48px; border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
table.targets tbody tr:hover { background: rgba(var(--accent-rgb), .035); }
table.targets tbody tr.selected { box-shadow: inset 2px 0 0 var(--accent); background: rgba(var(--accent-rgb), .04); }
table.targets .num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
table.targets .name-main { font-weight: 500; }
table.targets .name-sub { font-size: 12px; color: var(--text-2); margin-top: 2px; }
table.targets .path {
  font-family: var(--mono); font-size: 12px; color: var(--text-2);
  max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.col-check { width: 44px; }
.col-risk { width: 72px; }
.col-size { width: 96px; }
.col-cat { width: 140px; }

@container (max-width: 860px) {
  .col-cat, td.col-cat { display: none; }
}
@container (max-width: 680px) {
  .col-path, td.col-path { display: none; }
}

.badge {
  display: inline-flex; align-items: center; height: 20px; padding: 0 7px;
  border-radius: var(--radius-badge); font-size: 12px; font-weight: 500;
}
.badge-safe { background: rgba(52,211,153,.12); color: #0D9D72; }
.badge-cautious { background: rgba(251,191,36,.14); color: #C58A1D; }

.empty {
  padding: 40px 16px; text-align: center; color: var(--text-2); font-size: 13px;
}

.log-wrap {
  flex: 1 1 auto; min-height: 0; overflow: auto;
  padding: 12px 14px 14px;
  font-family: var(--mono); font-size: 12px; line-height: 1.55;
  background: #0A0C10; color: #C8D0D6;
  border-radius: 0 0 calc(var(--radius-card) - 1px) calc(var(--radius-card) - 1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.log-wrap .line { white-space: pre-wrap; word-break: break-all; }
.log-wrap .ts { color: #6B7A86; margin-right: 8px; }

.toast-root {
  position: fixed; right: 16px; bottom: 40px; z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: 8px;
}
.toast {
  min-width: 240px; max-width: 380px;
  padding: 12px 14px; border-radius: 12px;
  background: var(--surface-1); border: 1px solid var(--border);
  box-shadow: var(--shadow-2); font-size: 13px;
}
.toast.error { border-color: rgba(217,71,84,.35); }
.toast.ok { border-color: rgba(13,157,114,.35); }

.modal-root[hidden] { display: none; }
.modal-root {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: grid; place-items: center;
  background: rgba(25,45,55,.24);
}
.modal {
  width: min(480px, 92vw);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-pop);
  padding: 20px;
}
.modal h2 { margin: 0 0 8px; font-size: 18px; }
.modal-desc { margin: 0; color: var(--text-2); font-size: 13px; line-height: 1.5; }
.modal .warn {
  background: rgba(197,138,29,.12); color: var(--text-1);
  border: 1px solid rgba(197,138,29,.28);
  border-radius: 10px; padding: 10px 12px; font-size: 13px; margin: 12px 0;
}
.modal .field label {
  display: block; margin-bottom: 5px; color: var(--text-2); font-size: 12px;
}
.modal .actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

@media (max-width: 1024px) {
  .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topbar-meta { display: none; }
  .page-head-aside { display: none; }
}
@media (max-width: 720px) {
  .toolbar-actions { width: 100%; }
  .toolbar-actions .btn { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .meter > span { transition: none; }
  .statusbar .dot.busy, .live-tag.on .live-dot { animation: none; }
}