/* Neo: grayscale neobrutalism, the last layer over the shell and paper styles.
 * Flat white surfaces, 2px black borders, 5px corners and hard offset shadows.
 * Figma: KVMFlow-App, section "迭代 4 · 新野兽派 · 黑白灰". */
:root {
  --bg: #ededea;
  --grid: #dededa;
  --surface: #fff;
  --surface-muted: #d6d6d2;
  --surface-raised: #fff;
  --main: #d6d6d2;
  --ink: #000;
  --sub: #55554f;
  --muted: #7a7a73;
  --line: #c9c9c4;
  --line-strong: #000;
  --line-soft: #c9c9c4;
  --accent: #000;
  --accent-dark: #000;
  --accent-soft: #d6d6d2;
  --danger: #e5484d;
  --radius: 5px;
  --border: 2px solid var(--ink);
  --shadow: 4px 4px 0 0 var(--ink);
  --shadow-sm: 2px 2px 0 0 var(--ink);
  color-scheme: light;
}
/* Dark palette (theme.js sets data-theme). Same structure, inverted ink. */
:root[data-theme="dark"] {
  --bg: #161614;
  --grid: #20201d;
  --surface: #232320;
  --surface-muted: #4a4a45;
  --surface-raised: #232320;
  --main: #4a4a45;
  --ink: #f2f2ee;
  --sub: #a8a8a0;
  --muted: #8a8a82;
  --line: #3d3d39;
  --line-strong: #f2f2ee;
  --line-soft: #3d3d39;
  --accent: #f2f2ee;
  --accent-dark: #f2f2ee;
  --accent-soft: #4a4a45;
  --good: #f2f2ee;
  --warn: #a8a8a0;
  --danger: #ff7b86;
  color-scheme: dark;
}
:root[data-theme="dark"] .nav .brand-mark { background-image: url("assets/brand-mark-dark.svg"); }
:root[data-theme="dark"] input[type="checkbox"]:not(.toggle-control input):checked { background-image: url("assets/check-dark.svg"); }

body { font-weight: 500; }
h1, h2, h3, .brand, strong, .step.active,
#settings-page .settings-editor-heading h3 { font-weight: 700; }
input, select { font-weight: 500; }

/* ---- shell ---- */
main {
  background-color: var(--bg);
  background-image:
    linear-gradient(to right, var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size: 48px 48px;
}
.page > section > .header,
#settings-page > .header { background: transparent; }

/* neobrutalism.dev Sidebar: header, group and footer split by rules. Menu buttons
 * are flat; hover and the active page fill with main and gain a 2px outline. */
@media (min-width: 851px) { .shell { grid-template-columns: 16rem minmax(0, 1fr); } }
.nav {
  padding: 0;
  border-right: var(--border);
  background: var(--surface);
}
.nav .brand {
  gap: 8px;
  min-height: 0;
  margin: 0;
  padding: 16px;
  border-bottom: var(--border);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
}
.nav .brand-mark {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border: 0;
  border-radius: 0;
  background: url("assets/brand-mark.svg") center/contain no-repeat;
  box-shadow: none;
}
/* 8px, not the source's 4px: two 2px outlines would otherwise touch. */
.nav-list { gap: 8px; padding: 8px; }
/* macOS draws the window buttons over the top of the sidebar. */
.platform-darwin .nav { padding-top: 28px; }
.platform-darwin .nav .brand { padding-top: 8px; }
.nav .nav-item,
.nav .nav-item:hover:not(:disabled),
.nav .nav-item:active:not(:disabled) {
  gap: 8px;
  height: 32px;
  min-height: 32px;
  padding: 8px;
  border: 0;
  border-radius: var(--radius);
  outline: 2px solid transparent;
  outline-offset: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  transform: none;
  transition: none;
}
.nav .nav-item::before { display: none; }
.nav .nav-item:hover:not(:disabled)::after { display: none; }
.nav .nav-item:hover:not(:disabled),
.nav .nav-item:focus-visible,
.nav .nav-item.active,
.nav .nav-item.active:hover:not(:disabled) {
  outline: 2px solid var(--ink);
  outline-offset: 0;
  background: var(--main);
}
.nav svg { width: 16px; height: 16px; stroke-width: 2; }
.nav-bottom {
  gap: 8px;
  padding: 14px 16px;
  border-top: var(--border);
}
.nav .nav-state { color: var(--ink); font-size: 14px; font-weight: 500; }
/* Pairing requests: a sidebar group between the menu and the footer. */
.nav-requests { margin-top: auto; padding: 12px 8px; border-top: var(--border); }
.nav-requests:not([hidden]) ~ .nav-bottom { margin-top: 0; }
.nav-requests[hidden] { display: none; }
.nav-requests h2 { margin: 0 0 8px; padding: 0 8px; color: var(--sub); font-size: 12px; font-weight: 700; letter-spacing: 0; }
.nav-request {
  padding: 10px;
  border: var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  animation: nav-request-in .18s ease-out;
}
.nav-request-copy { display: grid; gap: 2px; }
.nav-request-copy strong { overflow-wrap: anywhere; font-size: 14px; }
.nav-request-copy span { color: var(--sub); font-size: 12px; line-height: 1.4; }
.nav-request-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.nav-request-actions button { height: 32px; min-height: 32px; padding: 4px 8px; font-size: 13px; white-space: nowrap; }
@keyframes nav-request-in { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .nav-request { animation: none; } }
.dot { border: 0; background: var(--ink); }

/* The site's scrollbar, on every page. */
main { overflow-y: scroll; scrollbar-width: auto; scrollbar-color: auto; }
main::-webkit-scrollbar { display: block; width: 16px; height: 16px; }
main::-webkit-scrollbar-track { border-left: var(--border); background: var(--surface); }
main::-webkit-scrollbar-thumb { background: var(--ink); }

main { padding: 32px 40px 48px; }
/* Headers scroll with the page; a sticky one would cover the grid and cards. */
.page > section > .header,
#settings-page > .header {
  position: static;
  min-height: 0;
  margin-bottom: 24px;
  padding: 0;
  border: 0;
}
.header h1 { font-size: 30px; line-height: 1.25; letter-spacing: -.01em; }
.header .sub { margin-top: 6px; color: var(--sub); font-size: 13px; }
.sub, .hint { color: var(--sub); }

/* ---- surfaces ---- */
.panel,
.desktop-map,
#mixed-settings,
#settings-page .settings-section,
#settings-page .update-settings,
.wizard,
.wizard.pairing-v2,
.test-status {
  margin: 0 0 24px;
  padding: 24px;
  border: var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.panel-title { margin-bottom: 16px; }
.panel h2, #settings-page h2 { font-size: 17px; line-height: 24px; }
#settings-page h3 { font-size: 15px; line-height: 22px; }
#settings-page { padding-bottom: 24px; }
#settings-page .settings-section { padding: 20px 24px; }
#settings-page .settings-section:last-child { border-bottom: var(--border); }
#settings-page .settings-section-heading { margin-bottom: 20px; }
#settings-page .settings-section > .panel-title { margin-bottom: 16px; }
#settings-page .update-settings { margin: 0 0 24px; padding: 20px 24px; border-top: var(--border); }
#settings-page .update-settings > .panel-title { justify-content: space-between; margin-bottom: 16px; }
#settings-page .update-settings > .response-row { padding-top: 12px; border-top: 1px solid var(--line-soft); }
#settings-page .settings-editor { border-left: 2px solid var(--line-soft); }

/* Rows inside a card are separated by soft rules, not more boxes. */
#settings-page .response-list { gap: 0; }
#settings-page .response-row { min-height: 56px; padding: 10px 0; border-top: 1px solid var(--line-soft); }
#settings-page .response-row:first-child { padding-top: 0; border-top: 0; }
#settings-page .response-row:last-child { padding-bottom: 0; }
#settings-page .language-panel .response-row,
#settings-page .appearance-panel .response-row,
#settings-page .startup-panel .response-row { border-top: 0; padding: 0; }
.response-copy span { color: var(--sub); font-size: 12px; }
#settings-page .response-copy label,
#settings-page .response-copy strong { font-size: 14px; font-weight: 700; }

/* ---- controls ---- */
/* neobrutalism.dev Button: at rest the face sits on a hard shadow; on hover it
 * slides onto the shadow. Colors never change. The invisible ::after keeps the
 * pointer over the moved button, so hovering an edge cannot flicker. */
button {
  position: relative;
  min-height: 40px;
  padding: 8px 16px;
  border: var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  transition: transform .15s cubic-bezier(.4, 0, .2, 1), box-shadow .15s cubic-bezier(.4, 0, .2, 1);
}
button:hover:not(:disabled),
button:active:not(:disabled) {
  border-color: var(--ink);
  background: var(--surface);
  box-shadow: none;
  color: var(--ink);
  transform: translate(4px, 4px);
}
button:hover:not(:disabled)::after { content: ""; position: absolute; inset: -6px 0 0 -6px; }
button:disabled { opacity: .5; pointer-events: none; }
.primary { box-shadow: var(--shadow); }
.primary,
.primary:hover:not(:disabled),
.primary:active:not(:disabled) { background: var(--main); color: var(--ink); }
.danger-button,
.danger-button:hover:not(:disabled),
.danger-button:active:not(:disabled),
#settings-page .danger-button:hover:not(:disabled) { color: var(--danger); }

/* neobrutalism.dev Item and Field: selectable rows stay flat and fill with main. */
.choice,
.pair-peer,
.v2-peer,
.pair-option,
.feedback-kind label,
#settings-page .computer-row {
  border: var(--border);
  background: var(--surface);
  box-shadow: none;
  transform: none;
  transition: background-color .1s;
}
.choice:hover,
.choice.selected,
.pair-peer:hover:not(:disabled),
.pair-peer.selected,
.pair-peer.selected:hover:not(:disabled),
.v2-peer:hover:not(:disabled),
.v2-peer.selected,
.v2-peer.selected:hover:not(:disabled),
.pair-option:hover,
.pair-option.selected,
.feedback-kind label:hover,
.feedback-kind label:has(input:checked),
#settings-page .computer-row:hover,
#settings-page .computer-row.selected {
  border: var(--border);
  background: var(--main);
  box-shadow: none;
  transform: none;
}
.pair-peer:hover:not(:disabled)::after,
.v2-peer:hover:not(:disabled)::after { display: none; }
.pair-peer:disabled { box-shadow: none; opacity: .5; }
.pair-peer:last-child { border-bottom: var(--border); }
#pairing-dialog .pair-peer-list, .pair-peer-list { gap: 8px; max-height: 260px; padding: 0; border: 0; }

/* Text buttons are links: no face, no shadow, no movement. */
.link,
.settings-text-button,
#settings-page .settings-text-button,
.dismiss-notice,
.feedback-links button,
#settings-page .computer-select,
.link:hover:not(:disabled),
.settings-text-button:hover:not(:disabled),
#settings-page .settings-text-button:hover:not(:disabled),
.dismiss-notice:hover:not(:disabled),
.feedback-links button:hover:not(:disabled),
#settings-page .computer-select:hover:not(:disabled),
.link:active:not(:disabled),
.settings-text-button:active:not(:disabled),
#settings-page .settings-text-button:active:not(:disabled),
.dismiss-notice:active:not(:disabled),
.feedback-links button:active:not(:disabled),
#settings-page .computer-select:active:not(:disabled) {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  transform: none;
}
.link:hover:not(:disabled)::after,
.settings-text-button:hover:not(:disabled)::after,
.dismiss-notice:hover:not(:disabled)::after,
.feedback-links button:hover:not(:disabled)::after,
#settings-page .computer-select:hover:not(:disabled)::after { display: none; }
.link { text-decoration: underline; text-underline-offset: 3px; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
#settings-page select:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

input, select, textarea,
#settings-page input, #settings-page select,
.response-select, .assign-select {
  border: var(--border);
  border-radius: var(--radius);
  background-color: var(--surface);
  color: var(--ink);
  font-weight: 500;
}
#settings-page input, #settings-page select { height: 40px; min-height: 40px; padding-top: 8px; padding-bottom: 8px; }
select,
#settings-page select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
  background-image: url("assets/select-chevron.svg");
  background-position: right 10px center;
  background-size: 14px 14px;
  background-repeat: no-repeat;
}

/* neobrutalism.dev Select: select.js builds these over the hidden native element. */
.neo-select { position: relative; width: 100%; min-width: 0; }
.response-row .neo-select { width: 168px; flex: 0 0 auto; }
.neo-select select,
#settings-page .neo-select select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.neo-select-trigger,
.neo-select-trigger:hover:not(:disabled),
.neo-select-trigger:active:not(:disabled) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  height: 40px;
  min-height: 40px;
  padding: 8px 12px;
  border: var(--border);
  background: var(--main);
  box-shadow: none;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  transform: none;
  transition: none;
}
.neo-select-trigger:hover:not(:disabled)::after { display: none; }
.neo-select-value { overflow: hidden; min-width: 0; text-overflow: ellipsis; white-space: nowrap; }
.neo-select svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.neo-select-list {
  position: fixed;
  z-index: 50;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 4px;
  border: var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink);
}
.neo-select-list[hidden] { display: none; }
.neo-select-list [role="option"] {
  position: relative;
  display: flex;
  align-items: center;
  padding: 6px 32px 6px 8px;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  cursor: default;
  user-select: none;
}
.neo-select-list [role="option"][data-highlighted] { border-color: var(--ink); background: var(--main); }
.neo-select-list [role="option"] svg { position: absolute; right: 8px; }

.toggle-track,
.toggle-control .toggle-track {
  width: 48px;
  height: 24px;
  flex: 0 0 48px;
  border: var(--border);
  border-radius: 999px;
  background: var(--surface);
}
.toggle-track::after,
.toggle-control .toggle-track::after {
  top: 2px;
  left: 4px;
  width: 16px;
  height: 16px;
  border: var(--border);
  background: var(--surface);
}
.toggle-control input:checked + .toggle-track { border-color: var(--ink); background: var(--main); }
.toggle-control input:checked + .toggle-track::after { border-color: var(--ink); background: var(--surface); transform: translateX(20px); }

/* neobrutalism.dev Checkbox and RadioGroup. */
input[type="checkbox"]:not(.toggle-control input),
input[type="radio"],
.radio {
  appearance: none;
  -webkit-appearance: none;
  display: inline-grid;
  flex: none;
  width: 16px;
  height: 16px;
  min-height: 0;
  margin: 0;
  padding: 0;
  place-content: center;
  border: var(--border);
  background: var(--surface);
  box-shadow: none;
}
input[type="checkbox"]:not(.toggle-control input) { border-radius: 0; }
input[type="checkbox"]:not(.toggle-control input):checked {
  background: var(--main) url("assets/check.svg") center/12px no-repeat;
}
input[type="radio"], .radio { border-radius: 50%; }
input[type="radio"]:checked::before,
.choice.selected .radio::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.toggle-label { color: var(--ink); font-weight: 700; }

.settings-tag,
#settings-page .settings-tag,
#mixed-status .settings-tag {
  padding: 2px 10px;
  border: var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}

/* ---- status: switch board and desktop map ---- */
.setup-prompt { margin: 0 0 24px; }
.setup-prompt .topology-head { margin: 0; padding: 0; }
.switch-board { border: 0; background: transparent; }
.switch-board-scroll { padding: 8px 0; }
.switch-chassis { border: var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.port-card { border: var(--border); border-radius: var(--radius); background: var(--surface); }
.port-card.current { background: var(--main); box-shadow: var(--shadow); }
.port-card::before { border-color: var(--ink); }
.port-state, .port-card .port-state, .port-card.next .port-state { border: 0; border-radius: 3px; background: var(--bg); }
.port-card.current .port-state { background: var(--ink); color: var(--surface); }
.switch-summary { border-color: var(--line-soft); }

.desktop-map { padding: 32px 24px 24px; }
.screen-row { border-bottom: 2px dashed var(--line-soft); }
.desk-screen {
  border: var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.desk-screen-name { font-weight: 700; }
.desk-screen.detached, .desk-screen.offline, .desk-screen.closed,
.desk-screen.builtin-unavailable { border: 2px dashed var(--sub); background: var(--bg); box-shadow: none; }
.desk-stand { background: var(--ink); }
.desk-computer {
  position: relative;
  border: var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.desk-computer.holder { padding: 16px 18px; background: var(--main); box-shadow: var(--shadow); }
.desk-computer .holder-tag {
  position: absolute;
  top: -14px;
  left: -10px;
  padding: 3px 9px;
  border: var(--border);
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--surface);
  font-size: 12px;
  font-weight: 700;
  transform: rotate(-4deg);
}
.lan-dot { background: var(--ink); }
.next-switch { color: var(--sub); }
.status-banner {
  border: var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.last-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 13px;
}
.last-switch .sub { font-size: 13px; }

/* ---- mixed page ---- */
/* The header carries the switch; the mode bar is its one-line status. */
#mixed-page > .header { align-items: flex-start; }
#mixed-page .mode-bar { display: block; margin: 6px 0 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
#mixed-page .mode-bar[hidden] { display: none; }
#mixed-page .mode-title { display: none; }
#mixed-page .mode-copy .hint { margin: 0; color: var(--sub); font-size: 13px; }
#mixed-page .mode-blocked { margin-top: 4px; color: var(--ink); font-size: 13px; }
.mixed-switch { flex: none; padding-top: 6px; }
#mixed-page:has(#mixed-settings[hidden]) .mixed-switch { display: none; }
.mixed-switch .toggle-control { gap: 10px; }
#mixed-settings { margin-bottom: 24px; }
#mixed-settings[hidden] { display: none; }
#mixed-settings h3 { font-size: 17px; line-height: 24px; }
.assign-screen {
  border: var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  font-weight: 700;
}
.assign-screen.empty { color: var(--sub); font-weight: 500; }
.assign-cell.absent .assign-screen { border-style: dashed; box-shadow: none; }
.assign-cell.unavailable .assign-screen { background: var(--bg); box-shadow: none; }
.mixed-note { border: 2px solid var(--line-soft); border-radius: var(--radius); background: var(--bg); }
.mixed-empty { margin: 0; padding: 16px 20px; border: 2px dashed var(--sub); border-radius: var(--radius); font-size: 13px; }
#mixed-page:has(#mode-bar:not([hidden])) .mixed-empty,
#mixed-page:has(#mixed-settings:not([hidden])) .mixed-empty { display: none; }

/* ---- settings: computer list ---- */
#settings-page .computer-row { margin-bottom: 10px; border-radius: var(--radius); }

/* ---- setup wizard ---- */
.steps { gap: 10px; border: 0; margin-bottom: 20px; }
.step {
  padding: 8px 6px;
  border: var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--sub);
  font-size: 13px;
}
.step.done { background: var(--bg); color: var(--ink); }
.step.active { background: var(--main); color: var(--ink); }
.step.active::after, .pairing-v2-page .step.active:after { display: none; }
.wizard, .wizard.pairing-v2 { min-height: 0; padding: 28px; }
.wizard-head h1, .pairing-v2 .wizard-head h1 { font-size: 24px; font-weight: 700; }
.pairing-v2 .v2-space { height: 48px; }
.pairing-v2-page .step { font-weight: 500; }
.choice, .value-row, .pair-card, .pair-option, .pair-peer, .v2-peer, .pair-monitor, .pair-test {
  border: var(--border);
  border-radius: var(--radius);
}
.value-row, .pair-card, .pair-monitor, .pair-test { background: var(--surface); }
.pair-card.selected { border: var(--border); background: var(--main); }
.choice.selected { padding: 20px; }
.choice.selected .radio { border-color: var(--ink); }
.local-tip, .callout { border: 2px solid var(--line-soft); border-radius: var(--radius); background: var(--bg); }

/* ---- diagnostics ---- */
.event-box { border-top: 0; }
.event { border-color: var(--line-soft); }
.event:first-child { padding-top: 0; }
.reset-panel { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.reset-panel[hidden] { display: none; }
.reset-panel h2 { font-size: 15px; }
.reset-panel .sub { margin-top: 4px; font-size: 12px; }

/* ---- dialogs ---- */
dialog,
#local-input-confirmation,
#pairing-dialog,
#compatibility-dialog {
  border: var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  color: var(--ink);
}
dialog::backdrop,
#local-input-confirmation::backdrop,
#pairing-dialog::backdrop,
#compatibility-dialog::backdrop { background: rgba(0, 0, 0, .8); }
.sas-code { border: var(--border); border-radius: var(--radius); background: var(--main); box-shadow: var(--shadow-sm); }
.feedback-kind label { border: var(--border); border-radius: var(--radius); }
.feedback-field input, .feedback-field textarea, .pair-ip-form input, .v2-ip-row input { border: var(--border); border-radius: var(--radius); }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 900px) {
  main { padding: 24px 24px 40px; }
  .desktop-map { padding: 24px 16px 20px; }
}