:root {
  color-scheme: light;
  --ink: #1d2a3b;
  --navy: #1d2a3b;
  --blue: #2270be;
  --blue-dark: #12589f;
  --muted: #657485;
  --pale: #f4f8fc;
  --line: #dae2eb;
  --selected: #deedfb;
  --white: #fff;
  font-family: "Microsoft YaHei UI", "PingFang SC", "Noto Sans CJK SC", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.4;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-width: 320px; height: 100%; margin: 0; }
body { color: var(--ink); background: var(--pale); }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .65; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

#app { display: flex; flex-direction: column; min-height: 100vh; height: 100dvh; }
.topbar {
  flex: 0 0 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 12px 24px;
  color: #fff;
  background: var(--navy);
}
.brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.brand-mark {
  flex: 0 0 39px;
  display: grid;
  place-items: center;
  width: 39px;
  height: 39px;
  border: 2px solid #fff;
  border-radius: 4px;
  font: 700 30px/1 Georgia, serif;
  letter-spacing: -.15em;
  padding-right: .15em;
}
.brand h1 { margin: 0 0 2px; font-size: 22px; line-height: 1.2; letter-spacing: .02em; }
.brand p { margin: 0; color: #cbd8e7; font-size: 12px; }
.top-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.header-button {
  min-width: 102px;
  min-height: 34px;
  padding: 6px 14px;
  color: var(--ink);
  border: 1px solid #dfe7ee;
  background: #fff;
}
.header-button:hover { background: #edf4fc; }
.header-button.primary { color: #fff; border-color: var(--blue); background: var(--blue); }
.header-button.primary:hover { background: var(--blue-dark); }

.workspace, .overview-page { min-height: 0; flex: 1 1 auto; }
.workspace { display: grid; grid-template-columns: minmax(390px, 45%) minmax(0, 55%); }
.pane { min-width: 0; min-height: 0; background: var(--white); }
.main-list-pane { display: flex; flex-direction: column; border-right: 6px solid var(--line); }
.pane-controls { flex: 0 0 auto; padding: 12px 14px 6px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.section-heading strong { font-weight: 700; }
.count-label { color: #55708d; font-size: 12px; white-space: nowrap; }
.search-row { display: flex; gap: 10px; }
.search-row input, .overview-search-row input {
  width: 100%;
  min-width: 0;
  height: 31px;
  padding: 4px 9px;
  color: var(--ink);
  border: 1px solid #aebbc8;
  border-radius: 0;
  background: #fff;
}
.search-row select { flex: 0 0 142px; min-width: 0; color: var(--ink); border: 1px solid #aebbc8; background: #f2f4f6; }
.helper { margin: 7px 0 0; color: #68809a; font-size: 12px; }
.table-scroll { min-width: 0; min-height: 0; overflow: auto; scrollbar-color: #c4ced7 #f3f5f7; }
.main-table-scroll { flex: 1 1 auto; margin: 0 14px 8px; }
.catalog-table { border-collapse: collapse; table-layout: fixed; width: 100%; color: #173046; }
.catalog-table th, .catalog-table td {
  padding: 7px 6px;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.catalog-table th { position: sticky; z-index: 2; top: 0; height: 35px; background: var(--pale); font-weight: 700; }
.catalog-table tbody tr:nth-child(even) { background: #fafcfe; }
.catalog-table tbody tr:hover { background: #edf5fd; }
.catalog-table tbody tr.is-selected { background: var(--selected); }
.catalog-table td { user-select: text; }
.catalog-table .empty-row td { color: var(--muted); text-align: center; white-space: normal; }
.main-table-scroll .catalog-table { width: max-content; min-width: 100%; }
.main-table-scroll tbody tr { cursor: pointer; }
.main-table-scroll tbody td { height: 33px; }
.column-resizer {
  position: absolute;
  top: 0;
  right: -4px;
  bottom: 0;
  z-index: 3;
  width: 9px;
  cursor: col-resize;
  touch-action: none;
}
.column-resizer:hover, .column-resizer.dragging { background: rgba(34, 112, 190, .32); }
.resizable-header { position: sticky !important; }

.detail-pane { overflow: auto; }
.detail-content { padding: 14px 17px 20px; }
.detail-top { display: grid; grid-template-columns: minmax(245px, 1fr) minmax(195px, 34%); gap: 20px; min-height: 188px; }
.detail-copy h2 { margin: 0 0 13px; font-size: 20px; }
.detail-copy dl { margin: 0; display: grid; grid-template-columns: 82px 1fr; row-gap: 8px; }
.detail-copy dt { color: var(--muted); }
.detail-copy dd { margin: 0; user-select: text; }
.detail-role { margin: 0 0 10px; color: #68809a; font-size: 12px; }
.detail-tip { margin-top: 12px; color: #68809a; font-size: 12px; }
.base-button { margin-top: 13px; padding: 5px 12px; color: var(--blue-dark); background: #eef6ff; border: 1px solid #b8d5f0; }
.base-button:hover { background: #e1effd; }
.image-button {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  padding: 6px;
  border: 0;
  background: var(--pale);
  text-align: center;
}
.image-button img { max-width: 100%; max-height: 100%; object-fit: contain; }
.image-button .image-missing { color: var(--muted); font-size: 12px; }
.image-button.image-failed img { display: none; }
.image-button.image-failed .image-missing { display: block; }
.image-button .image-missing { display: none; }
.image-button.no-image .image-missing { display: block; }
.image-button.no-image { cursor: default; }
.reference-badge {
  position: absolute;
  right: 7px;
  bottom: 7px;
  left: 7px;
  padding: 2px 4px;
  color: #915011;
  background: #ffefd4;
  font-size: 11px;
}
.detail-picture { min-width: 0; }
.detail-picture .image-button { height: 166px; }
.picture-hint { margin: 4px 0 0; color: #68809a; font-size: 12px; }
.relations-heading { margin: 18px 0 7px; font-weight: 700; }
.relation-modes, .mode-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.relation-modes button, .mode-buttons button {
  min-height: 33px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  color: var(--ink);
  background: #fff;
  text-align: center;
}
.relation-modes button:hover, .mode-buttons button:hover { border-color: #a9c6e0; background: #edf5fd; }
.relation-modes button.active, .mode-buttons button.active { border-color: var(--blue); color: #fff; background: var(--blue); }
.relation-table-scroll { max-height: min(38vh, 350px); margin-top: 8px; }
.relation-table { min-width: 520px; }
.relation-table tbody tr { cursor: pointer; }
.relation-table td { height: 34px; }
.relation-table .style-cell { color: var(--blue-dark); font-weight: 600; }
.empty-state { padding: 55px 18px; color: var(--muted); text-align: center; }

.overview-page { display: flex; flex-direction: column; min-height: 0; background: #fff; }
.overview-controls { flex: 0 0 auto; padding: 8px 14px 7px; }
.mode-buttons { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.mode-buttons button { min-height: 38px; background: var(--pale); }
.overview-search-row { display: flex; align-items: center; gap: 15px; min-height: 39px; }
.overview-search-row label { flex: 0 0 auto; }
.overview-search-row input { width: 290px; max-width: 44%; }
.overview-search-row .count-label { margin-left: auto; }
.overview-workspace { display: grid; grid-template-columns: minmax(270px, 34%) minmax(0, 66%); flex: 1 1 auto; min-height: 0; padding: 0 14px 10px; background: var(--line); }
.overview-list-pane, .overview-product-pane { display: flex; flex-direction: column; }
.overview-list-pane { margin-right: 7px; }
.overview-product-pane { margin-left: 7px; }
.panel-title { flex: 0 0 32px; display: flex; align-items: center; min-width: 0; padding: 0 9px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.overview-list-pane .table-scroll, .overview-product-pane .table-scroll { flex: 1 1 auto; }
.overview-code-table th:first-child { width: 50%; }
.overview-code-table th:nth-child(2) { width: 27%; }
.overview-code-table th:nth-child(3) { width: 23%; }
.overview-code-table tbody tr, .overview-product-table tbody tr { cursor: pointer; }
.overview-code-table td { height: 34px; }
.overview-product-table th:first-child { width: 27%; }
.overview-product-table th:nth-child(2) { width: 15%; }
.overview-product-table th:nth-child(3) { width: 29%; }
.overview-product-table th:nth-child(4) { width: 29%; }
.overview-product-table td { height: 118px; }
.overview-product-table .picture-cell { padding: 4px; }
.overview-product-table .image-button { height: 108px; }
.overview-product-table .image-button img { max-height: 100px; }
.overview-product-table td:not(.picture-cell) { font-size: 14px; }
.overview-note { flex: 0 0 31px; display: flex; align-items: center; padding: 0 20px; color: #68809a; background: var(--pale); font-size: 12px; }
.statusbar { flex: 0 0 28px; display: flex; align-items: center; padding: 0 18px; border-top: 1px solid #e8eef4; color: #68809a; background: var(--pale); font-size: 12px; }

.image-viewer { position: fixed; z-index: 50; inset: 0; display: flex; flex-direction: column; color: #fff; background: rgba(11, 20, 31, .94); }
.viewer-bar { display: flex; align-items: center; justify-content: space-between; min-height: 46px; padding: 4px 17px; }
.viewer-bar strong { font-size: 15px; }
.viewer-bar button { width: 36px; height: 36px; border: 0; color: #fff; background: transparent; font-size: 28px; line-height: 1; }
.viewer-stage { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 12px 22px 28px; cursor: zoom-out; }
.viewer-stage img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; cursor: default; box-shadow: 0 12px 40px #0008; }

.manage-dialog { width: min(620px, calc(100vw - 32px)); max-height: min(700px, calc(100dvh - 36px)); padding: 0; border: 1px solid var(--line); box-shadow: 0 18px 70px #12243655; overflow: auto; }
.manage-dialog::backdrop { background: #0b182699; }
.dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 19px 22px 14px; background: var(--navy); color: #fff; }
.dialog-header h2 { margin: 0 0 4px; font-size: 19px; }
.dialog-header p { margin: 0; color: #cfdae7; font-size: 12px; }
.icon-button { border: 0; color: inherit; background: transparent; font-size: 28px; line-height: 1; }
.dialog-body { padding: 19px 22px 24px; }
.admin-connection { padding: 8px 10px; margin-bottom: 18px; border: 1px solid #c7dced; color: #345c80; background: #eff7ff; font-size: 12px; }
.admin-connection.error { border-color: #e8cfce; color: #8b3935; background: #fff4f2; }
.upload-label { display: block; margin-bottom: 8px; font-weight: 700; }
#workbookFile { display: block; max-width: 100%; }
.action-button { min-height: 35px; margin-top: 16px; padding: 7px 16px; color: #fff; background: var(--blue); border: 1px solid var(--blue); }
.action-button:hover { background: var(--blue-dark); }
.upload-status { min-height: 22px; margin-top: 9px; color: #31597e; font-size: 12px; }
.upload-status.error { color: #aa3734; }
.source-heading { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; border-top: 1px solid var(--line); }
.source-heading h3 { margin: 13px 0 8px; font-size: 14px; }
.text-button { padding: 3px 5px; color: var(--blue-dark); background: transparent; border: 0; }
.source-list { max-height: 180px; overflow: auto; }
.source-item { display: flex; justify-content: space-between; gap: 12px; padding: 8px 9px; border: 1px solid var(--line); border-bottom: 0; font-size: 12px; }
.source-item:last-child { border-bottom: 1px solid var(--line); }
.source-item small { color: var(--muted); }

@media (max-width: 900px) {
  .workspace { grid-template-columns: minmax(320px, 47%) minmax(0, 53%); }
  .detail-top { grid-template-columns: 1fr; }
  .detail-picture { max-width: 330px; }
  .relation-table-scroll { max-height: 300px; }
}
@media (max-width: 700px) {
  #app { height: auto; min-height: 100dvh; }
  .topbar { align-items: flex-start; flex-direction: column; flex-basis: auto; gap: 13px; padding: 13px 15px; }
  .brand h1 { font-size: 19px; }
  .brand-mark { width: 34px; height: 34px; flex-basis: 34px; font-size: 25px; }
  .top-actions { width: 100%; }
  .header-button { flex: 1 1 0; min-width: 0; padding: 6px 7px; }
  .workspace { display: flex; flex-direction: column; }
  .main-list-pane { min-height: 360px; height: min(52vh, 480px); border-right: 0; border-bottom: 7px solid var(--line); }
  .main-table-scroll { min-height: 230px; }
  .detail-pane { overflow: visible; }
  .detail-top { grid-template-columns: minmax(0, 1fr) minmax(135px, 36%); gap: 10px; }
  .detail-picture { max-width: none; }
  .detail-picture .image-button { height: 140px; }
  .relation-table-scroll { max-height: 310px; }
  .overview-page { display: block; }
  .overview-controls { padding: 8px 11px; }
  .mode-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
  .overview-search-row { gap: 8px; }
  .overview-search-row input { width: auto; flex: 1 1 auto; max-width: none; }
  .overview-search-row .count-label { white-space: normal; text-align: right; font-size: 11px; }
  .overview-workspace { display: flex; flex-direction: column; padding: 0 11px 10px; }
  .overview-list-pane { height: min(36vh, 300px); margin: 0 0 8px; }
  .overview-product-pane { height: min(55vh, 500px); margin: 0; }
  .overview-product-table { min-width: 590px; }
  .overview-note { min-height: 31px; padding: 6px 12px; }
  .statusbar { min-height: 28px; }
}
@media (max-width: 450px) {
  .search-row select { flex-basis: 104px; }
  .helper { font-size: 11px; }
  .detail-top { grid-template-columns: 1fr; }
  .detail-picture { max-width: 330px; }
  .overview-search-row { flex-wrap: wrap; padding-top: 6px; }
  .overview-search-row input { flex-basis: calc(100% - 95px); }
  .overview-search-row .count-label { width: 100%; }
}