/* Classification workbench: dense, selectable, and fast by default. */
:root {
  --class-page: #fafbfc;
  --class-paper: #f6f8fb;
  --class-surface: #ffffff;
  --class-inset: #f3f6fa;
  --class-ink: #172033;
  --class-copy: #445067;
  --class-meta: #758198;
  --class-muted: #a0a9b8;
  --class-line: rgba(55, 72, 96, 0.16);
  --class-line-soft: rgba(55, 72, 96, 0.1);
  --class-line-strong: rgba(30, 58, 95, 0.34);
  --class-seal: #1e3a5f;
  --class-action: #175cd3;
  --class-action-soft: #edf4ff;
  --class-selected: #087a55;
  --class-selected-soft: #edf9f3;
  --class-warning: #9a6700;
  --class-warning-soft: #fff8e7;
  --class-danger: #b42318;
  --class-danger-soft: #fff3f2;
  --class-shadow: 0 2px 8px rgba(24, 28, 34, 0.06);
  --class-radius-sm: 5px;
  --class-radius: 12px;
}

body { background: #fff; color: var(--class-copy); }
.container { max-width: 1400px; padding-right: 32px; padding-left: 32px; }

.classification-breadcrumb {
  min-height: 40px;
  padding: 10px 0 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--class-meta);
  font-size: 13px;
}
.classification-breadcrumb a {
  color: var(--class-copy);
  text-decoration: none;
}
.classification-breadcrumb a:hover { color: var(--class-seal); }
.classification-breadcrumb > span:last-child { color: var(--class-ink); font-weight: 500; }
.classification-breadcrumb-separator { color: var(--class-muted); }

.class-hero { padding: 14px 0 22px; }
.class-hero-heading {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.class-hero h1 { margin: 0 0 7px; color: var(--class-ink); font-size: 32px; font-weight: 800; letter-spacing: 0; }
.class-hero-version { color: var(--class-meta); font-size: 14px; font-weight: 600; white-space: nowrap; }
.class-hero p { max-width: 920px; color: var(--class-copy); font-size: 15px; line-height: 1.7; }

.search-section,
.class-nav,
.group-list,
.class-detail-card {
  border-color: var(--class-line);
  border-radius: var(--class-radius);
  box-shadow: var(--class-shadow);
}

.search-section { padding: 14px; margin-bottom: 18px; }
.search-wrap { gap: 8px; }
.search-input {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 9px 14px;
  border: 1px solid var(--class-line);
  border-radius: var(--class-radius-sm);
  background: var(--class-surface);
  color: var(--class-ink);
}
.search-input:focus {
  background: var(--class-surface);
  border-color: var(--class-action);
  box-shadow: 0 0 0 3px rgba(23, 92, 211, 0.12);
}
.search-btn {
  min-height: 42px;
  padding: 9px 18px;
  border-radius: var(--class-radius-sm);
  background: var(--class-seal);
}
.search-btn:hover { background: #152e4d; }
.search-btn:focus-visible,
.class-nav-item:focus-visible,
.group-header:focus-visible,
.selection-action:focus-visible,
.selected-remove:focus-visible {
  outline: 3px solid rgba(23, 92, 211, 0.2);
  outline-offset: 2px;
}
.search-btn-outline { background: var(--class-surface); color: var(--class-copy); }

.quota-strip {
  margin: 0 0 12px;
  padding: 8px 12px;
  border-radius: var(--class-radius-sm);
  background: var(--class-inset);
  border-color: var(--class-line-soft);
}

.class-nav { padding: 18px; margin-bottom: 22px; }
.class-nav-head { min-height: 30px; margin-bottom: 12px; }
.class-nav-title { color: var(--class-ink); font-size: 13px; font-weight: 700; }
.class-nav-grid { grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 8px; }
.class-nav-item {
  min-height: 56px;
  padding: 9px 6px;
  border: 1px solid var(--class-line-soft);
  border-radius: 6px;
  background: var(--class-surface);
  color: var(--class-copy);
  cursor: pointer;
  font-family: inherit;
}
.class-nav-item:hover { border-color: var(--class-line-strong); background: var(--class-inset); box-shadow: none; }
.class-nav-item.active {
  background: var(--class-seal);
  border-color: var(--class-seal);
  color: #fff;
  box-shadow: none;
}
.class-nav-item.active.svc {
  background: var(--gold);
  border-color: var(--gold);
}
.class-nav-item .cn { font-size: 13px; font-weight: 800; line-height: 1.25; }
.class-nav-item .cnm { margin-top: 3px; font-size: 11px; color: var(--class-meta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.class-nav-item.active .cnm { color: rgba(255,255,255,0.78); }
.class-clear-btn {
  height: 30px;
  border-radius: var(--class-radius-sm);
  background: var(--class-surface);
  color: var(--class-copy);
  border-color: var(--class-line);
}
.class-clear-btn:hover { background: var(--class-inset); color: var(--class-ink); border-color: var(--class-line-strong); }

.book-layout { align-items: stretch; gap: 20px; min-height: 0; scroll-margin-top: 78px; }
.left-panel { width: 340px; }
.class-detail-card {
  top: 76px;
  padding: 24px;
  max-height: calc(100vh - 92px);
  overflow: auto;
}
.class-detail-card h1 { font-size: 20px; color: var(--class-ink); }
.class-detail-card .class-title { color: var(--class-action); }
.class-detail-card .desc { margin-bottom: 12px; padding-bottom: 12px; color: var(--class-copy); border-color: var(--class-line-soft); }
.class-detail-card .meta { margin-top: 0; color: var(--class-meta); font-variant-numeric: tabular-nums; }

.selection-panel { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--class-line); }
.selection-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.selection-title { color: var(--class-ink); font-size: 14px; font-weight: 800; }
.selection-count {
  min-width: 28px;
  height: 22px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  color: var(--class-selected);
  background: var(--class-selected-soft);
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.selection-meta { margin: 3px 0 10px; color: var(--class-meta); font-size: 12px; }
.selection-actions { display: grid; grid-template-columns: 1fr 72px; gap: 8px; }
.selection-action {
  height: 34px;
  border: 1px solid var(--class-line);
  border-radius: var(--class-radius-sm);
  background: var(--class-surface);
  color: var(--class-copy);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.selection-action.primary { border-color: var(--class-seal); background: var(--class-seal); color: #fff; }
.selection-action:disabled { cursor: not-allowed; opacity: 0.45; }
.selection-list { max-height: 250px; overflow: auto; margin-top: 10px; }
.selection-class-group + .selection-class-group { margin-top: 10px; }
.selection-class-label { margin-bottom: 4px; color: var(--class-meta); font-size: 11px; font-weight: 800; }
.selected-row {
  display: grid;
  grid-template-columns: 44px 1fr 26px;
  align-items: start;
  gap: 6px;
  padding: 6px 0;
  border-bottom: 1px solid var(--class-line-soft);
  font-size: 12px;
}
.selected-code { color: var(--class-action); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; }
.selected-name { color: var(--class-copy); line-height: 1.45; }
.selected-remove {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: var(--class-radius-sm);
  background: transparent;
  color: var(--class-muted);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.selected-remove:hover { color: var(--class-danger); background: var(--class-danger-soft); }
.selection-empty,
.selection-guide {
  margin-top: 10px;
  padding: 10px;
  border-radius: var(--class-radius-sm);
  font-size: 12px;
  line-height: 1.6;
}
.selection-empty { color: var(--class-meta); background: var(--class-surface); }
.selection-guide { color: var(--class-selected); background: var(--class-selected-soft); border: 1px dashed rgba(8,122,85,0.35); }

.right-panel {
  overflow: hidden;
  border: 1px solid var(--class-line);
  border-radius: var(--class-radius);
  background: var(--class-surface);
  box-shadow: var(--class-shadow);
}
.right-panel-header {
  min-height: 56px;
  margin: 0;
  padding: 0 18px;
  border-bottom: 1px solid var(--class-line-soft);
}
.right-panel-header h2 { color: var(--class-ink); font-size: 16px; font-weight: 800; }
.right-panel-header .group-count { color: var(--class-meta); font-variant-numeric: tabular-nums; }
.group-list {
  min-height: 300px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.group-item { border-color: var(--class-line-soft); }
.group-header {
  width: 100%;
  min-height: 54px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border: 0;
  background: var(--class-surface);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.group-header:hover { background: var(--class-inset); }
.group-header.expanded { background: var(--class-action-soft); }
.group-code { color: var(--class-action); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-variant-numeric: tabular-nums; }
.group-name { color: var(--class-copy); line-height: 1.45; }
.group-arrow { justify-self: end; color: var(--class-muted); }
.group-content { padding: 14px 16px 18px; background: var(--class-paper); border-color: var(--class-line-soft); }
.group-content.show { display: block; }
.item-section + .item-section { margin-top: 14px; }
.item-section-title { margin-bottom: 7px; color: var(--class-meta); font-size: 11px; font-weight: 800; }
.selectable-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.selectable-item {
  min-width: 0;
  display: grid;
  grid-template-columns: 18px 58px minmax(0, 1fr);
  align-items: start;
  gap: 6px;
  padding: 7px 8px;
  border: 1px solid var(--class-line-soft);
  border-radius: var(--class-radius-sm);
  background: var(--class-surface);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.selectable-item:hover { border-color: var(--class-line-strong); }
.selectable-item.is-selected { border-color: rgba(8,122,85,0.42); background: var(--class-selected-soft); }
.selectable-item input { width: 15px; height: 15px; margin: 2px 0 0; accent-color: var(--class-selected); cursor: pointer; }
.item-code { color: var(--class-action); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; line-height: 1.55; overflow-wrap: anywhere; }
.item-name { min-width: 0; color: var(--class-copy); font-size: 12px; line-height: 1.55; overflow-wrap: anywhere; }
.item-kind { margin-left: 4px; color: var(--class-warning); font-size: 10px; white-space: nowrap; }
.part-notes,
.cross-refs { border-radius: var(--class-radius-sm); }

.results-panel.show { display: block; }
.results-toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin: 20px 0 16px; }
.results-summary { color: var(--class-ink); font-size: 15px; font-weight: 800; }
.results-note { margin-top: 3px; color: var(--class-meta); font-size: 12px; }
.results-back { border: 0; background: transparent; color: var(--class-action); font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.results-back:hover { text-decoration: underline; }
.result-class-block { margin-bottom: 24px; }
.result-class-head { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 7px 12px; border-radius: var(--class-radius-sm); background: var(--class-action-soft); }
.result-class-badge { min-width: 30px; height: 24px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; background: var(--class-seal); color: #fff; font-size: 12px; font-weight: 900; font-variant-numeric: tabular-nums; }
.result-class-badge.service { background: var(--gold); }
.result-class-name { border: 0; padding: 0; background: transparent; color: var(--class-action); font-family: inherit; font-size: 13px; font-weight: 800; cursor: pointer; text-align: left; }
.result-class-name:hover { text-decoration: underline; }
.result-rows { padding: 4px 12px 0; }
.result-row { min-height: 40px; display: grid; grid-template-columns: 72px 64px minmax(0, 1fr); align-items: center; gap: 0; border-bottom: 1px solid var(--class-line-soft); font-size: 12px; }
.result-row:last-child { border-bottom: 0; }
.result-code { color: var(--class-action); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; font-weight: 700; overflow-wrap: anywhere; }
.result-group-code { color: var(--class-meta); font-variant-numeric: tabular-nums; }
.result-item-name { min-width: 0; color: var(--class-copy); line-height: 1.5; overflow-wrap: anywhere; }
.result-item-name mark { padding: 0 2px; border-radius: 2px; background: #fff0b3; color: inherit; }

.workbench-state { width: 100%; min-height: 260px; flex: 1; display: grid; place-items: center; padding: 32px; text-align: center; color: var(--class-meta); }
.workbench-state strong { display: block; margin-bottom: 5px; color: var(--class-ink); }
.workbench-spinner { width: 22px; height: 22px; margin: 0 auto 10px; border: 2px solid var(--class-line); border-top-color: var(--class-action); border-radius: 50%; animation: class-spin 700ms linear infinite; }
@keyframes class-spin { to { transform: rotate(360deg); } }

.workbench-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 1200;
  transform: translate(-50%, 12px);
  padding: 9px 14px;
  border: 1px solid var(--class-line);
  border-radius: var(--class-radius-sm);
  background: var(--class-ink);
  color: #fff;
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
}
.workbench-toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1100px) {
  .class-nav-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .left-panel { width: 300px; }
}

@media (max-width: 820px) {
  .class-hero h1 { font-size: 25px; }
  .book-layout { flex-direction: column; }
  .left-panel { width: 100%; }
  .class-detail-card { position: static; max-height: none; }
  .selection-list { max-height: 220px; }
  .class-nav-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  body { padding-top: 57px; }
  .nav { padding: 0 12px; }
  .nav-inner { height: 56px; gap: 8px; }
  .nav-logo { flex: 0 0 auto; gap: 5px; font-size: 14px; line-height: 1; white-space: nowrap; }
  .nav-logo .logo-icon { width: 30px; height: 30px; border-radius: 6px; font-size: 14px; }
  .nav-links { flex: 1 1 auto; justify-content: center; gap: 8px; min-width: 0; }
  .nav-links a { font-size: 11px; white-space: nowrap; }
  .nav-actions { flex: 0 0 auto; margin-left: 0; }
  .auth-chip { width: 82px; min-width: 82px; max-width: 82px; height: 32px; padding: 0 7px; font-size: 11px; }
  .classification-breadcrumb { min-height: 36px; padding-top: 8px; font-size: 12px; }
  .class-hero { padding-top: 10px; }
  .class-hero-heading { gap: 6px; }
  .class-hero-version { font-size: 12px; }
  .class-hero p { font-size: 13px; }
  .search-wrap { display: grid; grid-template-columns: 1fr 76px; }
  .search-input { grid-column: 1 / -1; }
  .search-btn { width: 100%; padding: 9px 10px; }
  .quota-strip { flex-direction: row; align-items: center; }
  .class-nav-head { flex-direction: row; align-items: center; }
  .container { padding-right: 16px; padding-left: 16px; }
  .class-nav, .search-section { padding: 12px; }
  .class-nav-grid { gap: 6px; }
  .class-nav-item { min-height: 52px; padding: 7px 5px; }
  .class-nav-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .selectable-items { grid-template-columns: 1fr; }
  .group-header { grid-template-columns: 48px minmax(0, 1fr) 22px; padding: 10px 12px; }
  .group-content { padding: 12px; }
  .results-toolbar { flex-direction: column; }
  .result-row { grid-template-columns: 64px 48px minmax(0, 1fr); }
  .book-layout { scroll-margin-top: 64px; }
  .right-panel-header { min-height: 50px; padding: 0 14px; }
}

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