:root {
  color-scheme: light;
  --bg-canvas: #f4f5f7;
  --surface-base: #ffffff;
  --surface-subtle: #eceff2;
  --surface-raised: #ffffff;
  --surface-hover: #e7ebee;
  --surface-selected: #dce8e4;
  --surface-pressed: #d0ddd8;
  --surface-disabled: #eef0f2;
  --border-subtle: #cbd2d6;
  --border-strong: #7b878d;
  --text-primary: #15191c;
  --text-secondary: #414a50;
  --text-muted: #566168;
  --text-disabled: #7d868c;
  --text-on-accent: #ffffff;
  --accent: #146c5b;
  --accent-hover: #0f5a4c;
  --accent-pressed: #0b493e;
  --focus-ring: #0b705c;
  --success-fg: #126143;
  --success-bg: #e2f3eb;
  --success-border: #8fc9af;
  --warning-fg: #7c4b0b;
  --warning-bg: #fff2d4;
  --warning-border: #e7bf62;
  --danger-fg: #a7352c;
  --danger-bg: #fde9e6;
  --danger-border: #e7a39d;
  --info-fg: #245e86;
  --info-bg: #e6f0f6;
  --info-border: #9cbdd1;
  --tier-t: #126143;
  --tier-s: #2d6f9c;
  --tier-a: #8a6816;
  --tier-b: #76552d;
  --tier-c: #667178;
  --radius-sm: 4px;
  --radius-md: 6px;
  --control-height: 36px;
  --topbar-height: 58px;
  --sidebar-width: 190px;
  --inspector-width: 390px;
  --duration-fast: 120ms;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--bg-canvas);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}

button, input, select { font: inherit; letter-spacing: 0; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
a { color: var(--accent); }

:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--focus-ring) 40%, transparent);
  outline-offset: 2px;
}

[hidden] { display: none !important; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--text-primary);
  color: #fff;
  transform: translateY(-140%);
}

.skip-link:focus { transform: translateY(0); }

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 20px;
  border-bottom: 1px solid #2d3438;
  background: #1d2326;
  color: #f6f8f8;
}

.brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}

.brand:hover { color: inherit; }

.brand-mark {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  border: 1px solid #5d696e;
  border-radius: var(--radius-sm);
  color: #9de0cb;
  font-size: 12px;
  font-weight: 750;
}

.brand-name { font-size: 15px; font-weight: 650; }

.topbar-actions { display: flex; align-items: center; gap: 16px; }

.topbar-link {
  color: #d8dfe1;
  font-size: 13px;
  text-decoration: none;
}

.topbar-link:hover { color: #fff; }

.system-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #abb5b9;
  font-size: 12px;
  white-space: nowrap;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d4a94e;
}

.system-status.is-ready .status-dot { background: #63b99e; }
.system-status.is-error .status-dot { background: #d96b61; }

.app-shell {
  min-height: calc(100vh - var(--topbar-height));
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
}

.skin-sidebar {
  position: sticky;
  top: var(--topbar-height);
  align-self: start;
  height: calc(100vh - var(--topbar-height));
  display: flex;
  flex-direction: column;
  padding: 18px 12px;
  border-right: 1px solid var(--border-subtle);
  background: var(--surface-subtle);
}

.sidebar-heading {
  padding: 0 8px 9px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
}

.skin-list { display: grid; gap: 4px; }

.skin-placeholder { padding: 10px; color: var(--text-muted); font-size: 12px; }

.skin-item {
  width: 100%;
  min-height: 56px;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  text-align: left;
  cursor: pointer;
}

.skin-item:hover { background: var(--surface-hover); }
.skin-item.is-active { border-color: #b8cbc5; background: var(--surface-selected); color: var(--accent-pressed); }
.skin-item-title { font-weight: 700; }
.skin-item-subtitle { color: var(--text-muted); font-size: 12px; }

.sidebar-meta {
  margin-top: auto;
  display: grid;
  gap: 2px;
  padding: 12px 8px 0;
  border-top: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-size: 11px;
}

.scanner-main {
  min-width: 0;
  width: 100%;
  max-width: 1540px;
  margin: 0 auto;
  padding: 20px 24px 28px;
}

.command-region {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto;
  gap: 12px 24px;
  align-items: end;
  padding-bottom: 16px;
}

.page-heading {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.eyebrow {
  margin: 0 0 3px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 750;
}

h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: 22px; line-height: 30px; letter-spacing: 0; }
h2 { margin-bottom: 0; font-size: 15px; line-height: 22px; }
h3 { margin-bottom: 0; font-size: 13px; line-height: 20px; }

.model-badge {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-base);
  color: var(--text-secondary);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.scan-form {
  display: grid;
  grid-template-columns: 180px auto auto minmax(100px, 1fr);
  gap: 8px;
  align-items: end;
}

.seed-field { display: grid; gap: 5px; }
.seed-field label, .compare-panel > label, .ranking-controls label { color: var(--text-secondary); font-size: 12px; font-weight: 650; }

.seed-input-wrap {
  height: var(--control-height);
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-base);
}

.seed-input-wrap:focus-within { border-color: var(--focus-ring); box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus-ring) 18%, transparent); }

.hash-prefix { padding-left: 10px; color: var(--text-muted); font-weight: 700; }

.seed-input-wrap input {
  min-width: 0;
  width: 100%;
  height: 100%;
  padding: 0 10px 0 4px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.primary-button, .secondary-button, .icon-button, .pagination-bar button, .app-error button {
  height: var(--control-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: var(--radius-sm);
  font-weight: 650;
  cursor: pointer;
  transition: background var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast);
}

.primary-button svg, .secondary-button svg, .icon-button svg { width: 16px; height: 16px; stroke-width: 2; }

.primary-button { padding: 0 14px; border: 1px solid var(--accent); background: var(--accent); color: var(--text-on-accent); }
.primary-button:hover { border-color: var(--accent-hover); background: var(--accent-hover); }
.primary-button:active { background: var(--accent-pressed); }

.secondary-button, .app-error button { padding: 0 12px; border: 1px solid var(--border-subtle); background: var(--surface-base); color: var(--text-primary); }
.secondary-button:hover, .icon-button:hover, .app-error button:hover { background: var(--surface-hover); }
.secondary-button[aria-expanded="true"] { border-color: var(--accent); background: var(--surface-selected); color: var(--accent-pressed); }

.icon-button { width: var(--control-height); flex: 0 0 var(--control-height); padding: 0; border: 1px solid var(--border-subtle); background: var(--surface-base); color: var(--text-secondary); }
button:disabled { cursor: not-allowed; opacity: .52; }

.field-feedback { min-height: 20px; margin: 0; align-self: center; color: var(--danger-fg); font-size: 12px; }

.compare-panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 5px 10px;
  align-items: end;
  padding: 10px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-subtle);
}

.compare-controls { display: flex; gap: 6px; }
.compact-input { width: 112px; }
.compare-panel .field-feedback { grid-column: 2; }

.ranking-controls {
  display: grid;
  grid-template-columns: minmax(210px, .75fr) minmax(300px, 1.4fr) minmax(190px, .75fr);
  gap: 10px 20px;
  align-items: start;
  margin-bottom: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
}

.ranking-mode-field, .weight-control, .threshold-control { min-width: 0; display: grid; gap: 5px; }
.ranking-mode-field select { width: 100%; max-width: none; }
.weight-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.weight-heading output { color: var(--text-secondary); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.weight-control input[type="range"] { width: 100%; height: 20px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.weight-axis { display: flex; justify-content: space-between; color: var(--text-muted); font-size: 10px; }
.threshold-input-wrap {
  height: var(--control-height);
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-base);
}
.threshold-input-wrap:focus-within { border-color: var(--focus-ring); box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus-ring) 18%, transparent); }
.threshold-input-wrap input { min-width: 0; width: 100%; height: 100%; padding: 0 8px; border: 0; outline: 0; background: transparent; font-variant-numeric: tabular-nums; }
.threshold-input-wrap span { padding-right: 9px; color: var(--text-muted); font-size: 12px; }
.threshold-control .field-feedback { min-height: 0; }
.check-control {
  min-height: var(--control-height);
  display: flex;
  align-items: center;
  gap: 9px;
  align-self: end;
  padding: 7px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-base);
  cursor: pointer;
}
.check-control:hover { background: var(--surface-hover); }
.check-control input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.check-control span { min-width: 0; display: grid; }
.check-control strong { color: var(--text-primary); font-size: 12px; font-weight: 650; }
.check-control small { color: var(--text-muted); font-size: 10px; font-weight: 400; }
.ranking-controls.is-glove { grid-template-columns: minmax(230px, .8fr) minmax(300px, 1.2fr); }
.ranking-explainer { grid-column: 1 / -1; margin: 0; color: var(--text-muted); font-size: 11px; }

.summary-band {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-base);
}

.summary-cell {
  min-width: 0;
  min-height: 78px;
  display: grid;
  align-content: center;
  gap: 1px;
  padding: 10px 14px;
  border-right: 1px solid var(--border-subtle);
}

.summary-cell:last-child { border-right: 0; }
.summary-cell span { color: var(--text-muted); font-size: 11px; }
.summary-cell strong { overflow-wrap: anywhere; font-size: 19px; line-height: 25px; font-variant-numeric: tabular-nums; }
.summary-cell small { color: var(--text-muted); font-size: 11px; }

.mobile-view-switch { display: none; }

.work-grid {
  min-width: 0;
  min-height: 640px;
  display: grid;
  grid-template-columns: minmax(520px, 1fr) minmax(340px, var(--inspector-width));
  margin-top: 14px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-base);
}

.catalog-pane {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  border-right: 1px solid var(--border-subtle);
}

.pane-toolbar {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-subtle);
}

.pane-toolbar p { margin: 1px 0 0; color: var(--text-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.table-controls { display: flex; gap: 6px; }

select {
  height: var(--control-height);
  max-width: 140px;
  padding: 0 28px 0 9px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-base);
  color: var(--text-primary);
  cursor: pointer;
}

.table-scroll { min-width: 0; min-height: 0; max-height: 644px; overflow: auto; overscroll-behavior: contain; }
table { width: 100%; border-collapse: collapse; table-layout: fixed; }

th, td {
  height: 44px;
  padding: 7px 12px;
  border-bottom: 1px solid #e2e6e8;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

th { position: sticky; top: 0; z-index: 2; height: 38px; background: #f8f9fa; color: var(--text-muted); font-size: 11px; font-weight: 700; }
th:nth-child(1) { width: 84px; }
th:nth-child(2) { width: 82px; }
th:nth-child(3) { width: 64px; }
th:nth-child(4), th:nth-child(5) { width: 104px; }
.numeric { text-align: right; font-variant-numeric: tabular-nums; }

tr[data-seed] { cursor: pointer; }
tr[data-seed]:hover { background: var(--surface-hover); }
tr[data-seed].is-selected { background: var(--surface-selected); box-shadow: inset 3px 0 var(--accent); }
tr[data-seed]:focus-visible { outline: 3px solid color-mix(in srgb, var(--focus-ring) 35%, transparent); outline-offset: -3px; }

.seed-cell { font-weight: 700; font-variant-numeric: tabular-nums; }
.rank-cell { color: var(--text-secondary); font-weight: 700; }
.side-result strong, .side-result small { display: block; }
.side-result strong { font-size: 12px; }
.side-result small { color: var(--text-muted); font-size: 10px; }

.tier-chip, .tier-mark {
  display: inline-grid;
  place-items: center;
  border-radius: var(--radius-sm);
  font-weight: 800;
}

.tier-chip { min-width: 28px; height: 24px; padding: 0 6px; font-size: 11px; }
.tier-mark { width: 42px; height: 42px; flex: 0 0 42px; font-size: 16px; }
.tier-T { border: 1px solid var(--success-border); background: var(--success-bg); color: var(--tier-t); }
.tier-S { border: 1px solid var(--info-border); background: var(--info-bg); color: var(--tier-s); }
.tier-A { border: 1px solid var(--warning-border); background: var(--warning-bg); color: var(--tier-a); }
.tier-B { border: 1px solid #d4bc9f; background: #f4ece3; color: var(--tier-b); }
.tier-C { border: 1px solid var(--border-subtle); background: var(--surface-subtle); color: var(--tier-c); }
.tier-T1 { border: 1px solid #e99aa0; background: #fff0f1; color: #9d2430; }
.tier-T2 { border: 1px solid #efb0a1; background: #fff3ed; color: #9b3825; }
.tier-T3 { border: 1px solid var(--warning-border); background: var(--warning-bg); color: var(--warning-fg); }
.tier-T4 { border: 1px solid var(--info-border); background: var(--info-bg); color: var(--info-fg); }
.tier-T5 { border: 1px solid #b9c3c8; background: #eef1f2; color: #46545b; }
.tier-T6, .tier-普通 { border: 1px solid var(--border-subtle); background: var(--surface-subtle); color: var(--text-muted); }
.tier-双黑 { border: 1px solid #101416; background: #202629; color: #ffffff; }
.tier-伪双黑 { border: 1px solid #7c878d; background: #e5e9eb; color: #283137; }
.tier-右手黑 { border: 1px solid var(--info-border); background: var(--info-bg); color: var(--info-fg); }

.empty-state { min-height: 180px; place-items: center; color: var(--text-muted); }
.empty-state:not([hidden]) { display: grid; }

.pagination-bar {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  border-top: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.pagination-bar > div { display: flex; gap: 4px; }

.inspector-pane { min-width: 0; padding: 14px; overflow: hidden; }

.inspector-header { min-height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.inspector-header > div { min-width: 0; display: flex; align-items: center; gap: 10px; }
.inspector-header h2 { font-size: 16px; }
.inspector-header p { margin: 1px 0 0; overflow: hidden; color: var(--text-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }

.knife-preview {
  position: relative;
  min-height: 235px;
  display: grid;
  place-items: center;
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid #2f383c;
  border-radius: var(--radius-sm);
  background: #20272a;
}

.preview-side-switch {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 2px;
  border: 1px solid #59666c;
  border-radius: var(--radius-sm);
  background: rgb(20 25 28 / 86%);
  backdrop-filter: blur(6px);
}

.preview-side-switch button {
  min-width: 62px;
  height: 30px;
  padding: 0 9px;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: #bec7ca;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}

.preview-side-switch button:hover { color: #fff; }
.preview-side-switch button[aria-pressed="true"] { background: #f4f7f6; color: #17201e; }

.knife-preview img { width: 100%; height: 100%; display: block; object-fit: contain; opacity: 0; transition: opacity var(--duration-fast); }
.knife-preview img.is-loaded { opacity: 1; }
.image-status { position: absolute; z-index: 1; color: #aeb8bc; font-size: 12px; }
.error-status { color: #f4b1aa; }

.comparison-result {
  margin-top: 10px;
  padding: 9px 10px;
  border: 1px solid var(--info-border);
  border-radius: var(--radius-sm);
  background: var(--info-bg);
  color: var(--info-fg);
  font-size: 12px;
}

.comparison-result strong { font-variant-numeric: tabular-nums; }

.distribution-block, .feature-section, .analysis-note, .method-details { margin-top: 16px; }

.block-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
.block-heading span { color: var(--text-muted); font-size: 11px; font-variant-numeric: tabular-nums; }

.distribution-track { position: relative; height: 11px; display: flex; overflow: visible; border: 1px solid var(--border-subtle); border-radius: 3px; background: var(--surface-subtle); }
.tier-zone { height: 100%; }
.zone-c { width: 65%; background: #dfe3e5; }
.zone-b { width: 20%; background: #dfd1bf; }
.zone-a { width: 10%; background: #efd895; }
.zone-s { width: 4%; background: #a8c9dc; }
.zone-t { width: 1%; background: #8fc9af; }
.distribution-marker { position: absolute; top: -4px; left: 50%; width: 3px; height: 17px; border-radius: 1px; background: #15191c; transform: translateX(-1px); }
.distribution-axis { display: flex; justify-content: space-between; margin-top: 4px; color: var(--text-muted); font-size: 10px; }

.feature-list { display: grid; gap: 9px; }
.feature-row { display: grid; grid-template-columns: 84px minmax(0, 1fr) 44px; gap: 8px; align-items: center; }
.feature-label { color: var(--text-secondary); font-size: 12px; }
.feature-value { text-align: right; color: var(--text-secondary); font-size: 11px; font-variant-numeric: tabular-nums; }
.feature-track { height: 7px; overflow: hidden; border-radius: 2px; background: var(--surface-subtle); }
.feature-fill { height: 100%; background: var(--accent); }
.feature-fill.is-cyan { background: #397da6; }
.feature-fill.is-dark { background: #59666c; }
.feature-fill.is-amber { background: #b87318; }

.analysis-note { padding: 10px 0 0; border-top: 1px solid var(--border-subtle); }
.analysis-note ul { margin: 7px 0 0; padding-left: 18px; color: var(--text-secondary); font-size: 12px; }
.analysis-note li + li { margin-top: 4px; }

.method-details { border-top: 1px solid var(--border-subtle); }
.method-details summary { min-height: 40px; display: flex; align-items: center; color: var(--text-secondary); font-size: 12px; font-weight: 650; cursor: pointer; }
.method-details > div { padding: 0 0 8px; }
.method-details dl { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 5px 10px; margin: 0 0 8px; font-size: 11px; }
.method-details dt { color: var(--text-muted); }
.method-details dd { margin: 0; overflow-wrap: anywhere; color: var(--text-secondary); }
.method-details a { font-size: 11px; }

.app-error {
  position: fixed;
  inset: var(--topbar-height) 0 0 var(--sidebar-width);
  z-index: 30;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 6px;
  background: rgb(244 245 247 / 94%);
}

.app-error span { color: var(--text-muted); }
.app-error button { margin-top: 8px; }

.toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 80;
  max-width: min(360px, calc(100vw - 24px));
  padding: 10px 12px;
  border: 1px solid #5d696e;
  border-radius: var(--radius-sm);
  background: #1d2326;
  color: #f6f8f8;
  box-shadow: 0 8px 20px rgb(16 24 27 / 20%);
  font-size: 12px;
}

@media (max-width: 1100px) {
  :root { --sidebar-width: 166px; --inspector-width: 350px; }
  .scanner-main { padding-inline: 16px; }
  .ranking-controls { grid-template-columns: minmax(210px, .8fr) minmax(280px, 1.2fr); }
  .threshold-control { grid-column: 2; }
  .work-grid { grid-template-columns: minmax(460px, 1fr) minmax(320px, var(--inspector-width)); }
  .optional-column { display: none; }
}

@media (max-width: 860px) {
  .app-shell { display: block; }
  .skin-sidebar {
    position: sticky;
    top: var(--topbar-height);
    z-index: 30;
    width: 100%;
    height: 52px;
    display: flex;
    align-items: center;
    flex-direction: row;
    padding: 5px 12px;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--border-subtle);
  }
  .sidebar-heading, .sidebar-meta { display: none; }
  .skin-list { display: flex; flex: 0 0 auto; gap: 4px; }
  .skin-item { width: auto; min-height: 40px; flex-direction: row; align-items: center; gap: 6px; padding: 6px 10px; white-space: nowrap; }
  .scanner-main { padding-top: 14px; }
  .app-error { inset: calc(var(--topbar-height) + 52px) 0 0; }
  .command-region { grid-template-columns: 1fr; }
  .scan-form { grid-template-columns: minmax(130px, 180px) auto auto minmax(0, 1fr); }
  .ranking-controls { grid-template-columns: minmax(220px, .85fr) minmax(300px, 1.15fr); }
  .work-grid { grid-template-columns: minmax(0, 1fr) 340px; }
}

@media (max-width: 700px) {
  .topbar { padding-inline: 12px; }
  .topbar-link { display: none; }
  .scanner-main { padding: 12px 10px 20px; }
  .page-heading { align-items: flex-start; flex-direction: column; gap: 7px; }
  h1 { font-size: 19px; line-height: 27px; }
  .model-badge { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  .scan-form { grid-template-columns: minmax(118px, 1fr) auto auto; }
  .seed-field { min-width: 0; }
  .field-feedback { grid-column: 1 / -1; }
  .compare-panel { grid-template-columns: 1fr; }
  .compare-panel .field-feedback { grid-column: 1; }
  .ranking-controls { grid-template-columns: 1fr; gap: 12px; padding: 12px; }
  .ranking-controls.is-glove { grid-template-columns: minmax(0, 1fr); }
  .threshold-control, .ranking-explainer { grid-column: 1; }
  .summary-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .summary-cell { min-height: 70px; border-bottom: 1px solid var(--border-subtle); }
  .summary-cell:nth-child(2) { border-right: 0; }
  .summary-cell:nth-child(n + 3) { border-bottom: 0; }
  .mobile-view-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 12px;
    padding: 3px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--surface-subtle);
  }
  .mobile-view-switch button { height: 34px; border: 0; border-radius: 3px; background: transparent; color: var(--text-secondary); font-weight: 650; }
  .mobile-view-switch button[aria-selected="true"] { background: var(--surface-base); color: var(--text-primary); box-shadow: 0 1px 2px rgb(27 36 40 / 12%); }
  .work-grid { min-height: 0; display: block; margin-top: 8px; }
  .catalog-pane { min-height: 540px; border-right: 0; }
  .inspector-pane { min-height: 600px; }
  [data-view-pane="catalog"] { display: none; }
  .work-grid[data-mobile-active="catalog"] [data-view-pane="catalog"] { display: grid; }
  .work-grid[data-mobile-active="catalog"] [data-view-pane="analysis"] { display: none; }
  .work-grid[data-mobile-active="analysis"] [data-view-pane="analysis"] { display: block; }
  .pane-toolbar { align-items: flex-start; flex-direction: column; }
  .table-controls { width: 100%; }
  .table-controls select { min-width: 0; max-width: none; flex: 1; }
  .table-scroll { max-height: 520px; }
  .knife-preview { min-height: 220px; }
}

@media (max-width: 390px) {
  .brand-name { max-width: 148px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .system-status { font-size: 11px; }
  .primary-button, .secondary-button { padding-inline: 10px; }
  .scan-form .primary-button svg, .scan-form .secondary-button svg { display: none; }
  .summary-cell { padding-inline: 10px; }
  .summary-cell strong { font-size: 17px; }
  .inspector-pane { padding: 11px; }
  .knife-preview { min-height: 195px; }
  th, td { padding-inline: 8px; }
}

@media (pointer: coarse) {
  .skin-item, .primary-button, .secondary-button, .icon-button, select, .mobile-view-switch button, .preview-side-switch button { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}