:root {
  color-scheme: light;
  --bg: #f3f5f7;
  --surface: #ffffff;
  --ink: #18202a;
  --muted: #687382;
  --line: #d9dee5;
  --line-strong: #bec7d2;
  --accent: #1769aa;
  --accent-dark: #0f4e82;
  --green: #18794e;
  --green-bg: #e9f6ef;
  --amber: #9a5b09;
  --amber-bg: #fff3d6;
  --red: #b42318;
  --red-bg: #fcebea;
  --gray-bg: #edf0f3;
  font-family: "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
  font-size: 14px;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); line-height: 1.5; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; letter-spacing: 0; }
button, .button { white-space: nowrap; }
code { font-family: Consolas, "SFMono-Regular", monospace; font-size: .9em; background: var(--gray-bg); padding: 2px 5px; border-radius: 3px; overflow-wrap: anywhere; }

.site-header { min-height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 8px 20px; background: #202933; color: #fff; border-bottom: 3px solid #d4a017; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-weight: 700; font-size: 16px; }
.brand:hover { text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 30px; height: 30px; background: #f2c14e; color: #202933; border-radius: 5px; font-weight: 800; }
.header-actions { display: flex; align-items: center; gap: 12px; }
.primary-nav { display: flex; align-items: stretch; align-self: stretch; margin-right: auto; }
.primary-nav a { display: flex; align-items: center; padding: 0 13px; color: #dce3ea; font-weight: 600; }
.primary-nav a:hover { color: #fff; background: rgba(255,255,255,.08); text-decoration: none; }
.header-actions form { margin: 0; }
.identity { color: #dce3ea; font-weight: 600; }

.button, .icon-text-button { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 6px 12px; border: 1px solid transparent; border-radius: 5px; cursor: pointer; font-weight: 600; text-decoration: none; }
.button:hover, .icon-text-button:hover { text-decoration: none; }
.button.primary { color: #fff; background: var(--accent); border-color: var(--accent); }
.button.primary:hover { background: var(--accent-dark); }
.button.secondary, .icon-text-button.secondary { color: var(--ink); background: var(--surface); border-color: var(--line-strong); }
.site-header .secondary { color: #fff; background: transparent; border-color: #657383; }
.icon-button { width: 30px; height: 30px; padding: 0; border: 1px solid var(--line); background: #fff; color: var(--red); border-radius: 4px; cursor: pointer; font-size: 18px; }

.flash { max-width: 1200px; margin: 12px auto 0; padding: 10px 14px; border: 1px solid; border-radius: 5px; }
.flash.success { background: var(--green-bg); border-color: #acd8bf; color: var(--green); }
.flash.error { background: var(--red-bg); border-color: #efb7b2; color: var(--red); white-space: pre-line; }

.page-shell { max-width: 1200px; margin: 0 auto; padding: 30px 20px 70px; }
.narrow-shell { max-width: 650px; margin: 42px auto; padding: 0 20px; }
.login-shell { max-width: 850px; margin: 54px auto; padding: 0 20px; }
.login-heading { margin-bottom: 24px; }
.login-heading h1 { margin: 0 0 5px; font-size: 28px; }
.login-heading p { margin: 0; color: var(--muted); }
.login-options { display: grid; grid-template-columns: minmax(0, 1fr) 45px minmax(0, 1fr); border: 1px solid var(--line); background: var(--surface); }
.login-option { padding: 25px; }
.login-option h2 { margin: 0 0 6px; font-size: 18px; }
.login-option > p { min-height: 44px; margin: 0 0 19px; color: var(--muted); }
.login-form { display: grid; gap: 14px; }
.login-form label { display: grid; gap: 5px; }
.login-button { width: 100%; min-height: 40px; }
.login-divider { position: relative; display: grid; place-items: center; color: var(--muted); }
.login-divider::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 1px solid var(--line); }
.login-divider span { z-index: 1; padding: 5px; background: var(--surface); font-size: 12px; text-transform: uppercase; }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.page-heading h1, .narrow-shell h1 { margin: 0 0 4px; font-size: 26px; }
.page-heading p, .muted { margin: 0; color: var(--muted); }
.table-frame { background: var(--surface); border: 1px solid var(--line); overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 9px 11px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { color: #44505e; background: #eef2f5; font-size: 12px; text-transform: uppercase; }
tbody tr:last-child td { border-bottom: 0; }
.document-list td:first-child { min-width: 340px; }
.document-list small { display: block; color: var(--muted); margin-top: 3px; }
.empty { padding: 34px; text-align: center; color: var(--muted); }
.empty-inline { color: var(--muted); }

.status { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 20px; font-size: 12px; font-weight: 700; text-transform: capitalize; }
.status-draft { background: var(--gray-bg); color: #485463; }
.status-in_review { background: var(--amber-bg); color: var(--amber); }
.status-submitted { background: var(--green-bg); color: var(--green); }
.status-datasheet-template { background: #e8eef4; color: #425466; }
.status-datasheet-preliminary { background: var(--amber-bg); color: var(--amber); }
.status-datasheet-production { background: var(--green-bg); color: var(--green); }
.status-datasheet-obsolete { background: var(--red-bg); color: var(--red); }

.datasheet-list td:first-child { min-width: 270px; }
.datasheet-list small { display: block; margin-top: 3px; color: var(--muted); }
.datasheet-preview-shell { min-height: calc(100vh - 54px); background: #e5e9ee; }
.datasheet-preview-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 76px; padding: 12px 22px; background: #fff; border-bottom: 1px solid var(--line-strong); }
.datasheet-preview-title { display: flex; align-items: center; gap: 18px; min-width: 0; }
.datasheet-preview-title h1 { margin: 0; font-size: 22px; }
.datasheet-preview-title p { margin: 2px 0 0; color: var(--muted); }
.datasheet-preview-actions { display: flex; align-items: center; gap: 10px; }
.datasheet-format-switch a, .datasheet-language-switch a { min-height: 32px; padding: 6px 10px; color: var(--ink); border-right: 1px solid var(--line-strong); font-weight: 600; }
.datasheet-format-switch a:last-child, .datasheet-language-switch a:last-child { border-right: 0; }
.datasheet-format-switch a.active, .datasheet-language-switch a.active { color: #fff; background: #263746; }
.datasheet-format-switch a:hover, .datasheet-language-switch a:hover { text-decoration: none; }
.datasheet-pages { display: grid; gap: 22px; padding: 18px; }
.datasheet-pages img { display: block; width: min(100%, 940px); height: auto; margin: 0 auto; border: 1px solid #aeb8c2; background: #fff; box-shadow: 0 8px 24px rgba(22,35,48,.16); }

.stack-form { display: grid; gap: 18px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
label { font-weight: 600; }
input, select, textarea { width: 100%; border: 1px solid var(--line-strong); border-radius: 4px; background: #fff; color: var(--ink); padding: 8px 9px; }
input:focus, select:focus, textarea:focus { outline: 2px solid #87b8dd; outline-offset: 0; border-color: var(--accent); }
input:disabled, select:disabled, textarea:disabled { background: #f5f6f7; color: #4d5966; opacity: 1; }
textarea { resize: vertical; }
.stack-form label { display: grid; gap: 6px; }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; }

.document-toolbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 8px; min-height: 51px; padding: 8px 14px; background: rgba(255, 255, 255, .98); border-bottom: 1px solid var(--line); box-shadow: 0 1px 3px rgba(24,32,42,.08); }
.back-link { margin-right: 4px; font-weight: 600; }
.segmented { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 5px; overflow: hidden; }
.segmented button { min-height: 32px; padding: 4px 9px; border: 0; border-right: 1px solid var(--line-strong); background: #fff; cursor: pointer; }
.segmented button:last-child { border-right: 0; }
.segmented button.active { background: #263746; color: #fff; }
.check-summary { flex: 1; color: var(--muted); text-align: right; }
.save-state { min-width: 76px; color: var(--muted); font-size: 12px; }
.save-state.error { color: var(--red); font-weight: 700; }

.document-layout { display: grid; grid-template-columns: 235px minmax(0, 1fr); gap: 24px; max-width: 1450px; margin: 0 auto; padding: 24px 20px 80px; }
.document-layout.compact-layout { display: block; max-width: 980px; }
.section-nav { position: sticky; top: 75px; align-self: start; max-height: calc(100vh - 95px); overflow: auto; background: var(--surface); border: 1px solid var(--line); }
.document-state { display: flex; align-items: center; justify-content: space-between; padding: 12px; border-bottom: 1px solid var(--line); }
.document-state small { color: var(--muted); }
.inline-state { justify-content: flex-start; gap: 10px; padding: 10px 0 0; border: 0; }
.section-nav > a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 11px; border-bottom: 1px solid #edf0f3; color: #354250; font-size: 13px; }
.section-nav > a:hover { background: #f3f7fa; text-decoration: none; }
.section-count { min-width: 22px; color: var(--amber); font-weight: 700; text-align: right; }

.document-main { min-width: 0; background: var(--surface); border: 1px solid var(--line); }
.document-heading { padding: 25px 28px 20px; border-bottom: 4px solid #283b4c; }
.document-heading h1 { margin: 3px 0 8px; font-size: 26px; line-height: 1.25; }
.document-heading p { margin: 3px 0; color: var(--muted); }
.eyebrow { color: var(--accent) !important; font-size: 12px; font-weight: 800; text-transform: uppercase; }
.notice { margin: 18px 28px 0; padding: 10px 12px; background: #edf5fb; border-left: 4px solid var(--accent); }
.notice.success { background: var(--green-bg); border-left-color: var(--green); color: #135c3d; }

.document-section { padding: 24px 28px 8px; border-bottom: 1px solid var(--line-strong); scroll-margin-top: 70px; }
.section-heading { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: start; margin-bottom: 18px; }
.section-heading h2 { margin: 0; font-size: 18px; }
.section-heading p { margin: 3px 0 0; color: var(--muted); }
.section-number { display: grid; place-items: center; width: 28px; height: 28px; background: #263746; color: #fff; border-radius: 4px; font-weight: 800; }
.gate-label { padding: 2px 7px; background: var(--amber-bg); color: var(--amber); border: 1px solid #e9c780; border-radius: 3px; font-size: 11px; font-weight: 700; }
.field-block { margin: 0 0 22px; }
.field-label { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-weight: 700; }
.required { color: var(--red); font-size: 10px; text-transform: uppercase; }
.field-help { margin: -2px 0 7px; color: var(--muted); font-size: 12px; }

.checklist { border-top: 1px solid var(--line); }
.check-row { display: grid; grid-template-columns: 115px minmax(220px, .9fr) minmax(260px, 1.1fr); gap: 10px; align-items: center; padding: 8px; border-bottom: 1px solid var(--line); border-left: 4px solid transparent; }
.check-row.state-open { background: #fffaf0; border-left-color: #d49828; }
.check-row.state-confirmed { background: #f3faf6; border-left-color: var(--green); }
.check-row.state-na { background: #f2f4f6; border-left-color: #7b8794; }
.check-copy { display: grid; gap: 2px; }
.check-copy small { color: var(--muted); }
.check-comment { min-width: 0; }
.readonly-state { font-weight: 700; }
.readonly-comment { color: #495563; }

.table-scroll { overflow-x: auto; border: 1px solid var(--line); }
.repeat-table table { min-width: 650px; }
.repeat-table th, .repeat-table td { padding: 6px; }
.repeat-table input, .repeat-table select { min-width: 120px; border-color: transparent; background: transparent; }
.repeat-table input:focus, .repeat-table select:focus { background: #fff; border-color: var(--accent); }
.repeat-table .row-action { width: 42px; }
.add-row { margin-top: 7px; }

.edit-pencil { flex: 0 0 32px; color: var(--ink); font-size: 19px; }
.edit-pencil.active { color: #fff; background: var(--accent); border-color: var(--accent); }
.editing .content-control { background: #fff; border-color: var(--accent); }
.approve-all { color: #fff; background: var(--green); border-color: var(--green); }
.review-column { width: 310px; }
.review-cell { min-width: 300px; }
.decision-control { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 7px; border: 1px solid var(--line); background: #f7f8f9; }
.review-cell .decision-control { margin: 0; border: 0; background: transparent; padding: 0; }
.decision-control.approved { background: var(--green-bg); border-color: #acd8bf; }
.decision-control.rejected { background: var(--red-bg); border-color: #efb7b2; }
.decision-control.commented { background: var(--amber-bg); border-color: #e0bd75; }
.decision-buttons { display: inline-flex; flex: 0 0 auto; gap: 4px; }
.decision-button { width: 32px; height: 32px; padding: 0; border: 1px solid var(--line-strong); border-radius: 4px; background: #fff; cursor: pointer; font-size: 18px; font-weight: 800; }
.decision-button.approve { color: var(--green); }
.decision-button.reject { color: var(--red); }
.decision-button.approve.active { color: #fff; background: var(--green); border-color: var(--green); }
.decision-button.reject.active { color: #fff; background: var(--red); border-color: var(--red); }
.decision-comment { min-width: 150px; padding: 6px 8px; }
.decision-readonly { min-width: 86px; font-weight: 700; }
.decision-readonly.approved { color: var(--green); }
.decision-readonly.rejected { color: var(--red); }
.decision-readonly.pending { color: var(--muted); }
.publish-band { background: #f7faf8; }
.publish-button { min-width: 190px; }

.review-band { padding: 23px 28px; border-bottom: 1px solid var(--line-strong); }
.review-band h2 { margin: 0 0 13px; font-size: 18px; }
.attachment-list { margin: 0; padding: 0; list-style: none; }
.attachment-list li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.attachment-list li span { flex: 1; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.attachment-list form { margin: 0; }
.upload-form { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.upload-form input { max-width: 430px; }

.comment-list { display: grid; gap: 10px; }
.comment { padding: 11px 12px; border: 1px solid var(--line); border-left: 4px solid #8a96a3; }
.comment.blocking { background: var(--red-bg); border-left-color: var(--red); }
.comment.resolved { background: #f5f7f8; border-left-color: var(--green); }
.comment header { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; }
.comment header strong { color: var(--ink); }
.comment header time { margin-left: auto; }
.comment p { margin: 8px 0; white-space: pre-wrap; }
.blocking-label { color: var(--red); font-weight: 800; text-transform: uppercase; }
.comment-form { display: grid; grid-template-columns: 250px 1fr auto; gap: 10px; align-items: end; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.comment-form label { display: grid; gap: 4px; }
.comment-form label:nth-child(3) { grid-column: 1 / 3; }
.checkbox-label { display: flex !important; flex-direction: row; align-items: center; font-weight: 500; }
.checkbox-label input { width: auto; }

.approval-chip { display: inline-flex; margin: 3px 6px 3px 0; padding: 4px 8px; background: var(--green-bg); color: var(--green); border: 1px solid #b8dcc8; border-radius: 20px; font-size: 12px; font-weight: 700; }
.validation { margin: 14px 0; border: 1px solid #e0bd75; background: var(--amber-bg); padding: 9px 12px; }
.validation summary { cursor: pointer; color: var(--amber); font-weight: 700; }
.validation ul { margin-bottom: 0; }
.workflow-actions { display: flex; gap: 8px; margin: 15px 0; }
.revision-list { margin-top: 16px; border: 1px solid var(--line); }
.revision-list th, .revision-list td { padding: 7px 9px; }

body[data-lang="en"] .bi.zh, body[data-lang="zh"] .bi.en { display: none; }
.language-toggle { min-width: 58px; }
body[data-open-only="true"] .check-row:not(.state-open) { display: none; }

.revision-body { background: #fff; }
.revision-toolbar { position: sticky; }
.revision-id { flex: 1; min-width: 0; text-align: right; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.locked-document { max-width: 1120px; margin: 22px auto 80px; border: 1px solid var(--line); }
.readonly-value { padding: 9px 10px; background: #f7f8f9; border-left: 3px solid #8c99a6; white-space: pre-wrap; }

@media (max-width: 950px) {
  .document-layout { grid-template-columns: 1fr; padding: 12px; }
  .section-nav { display: none; }
  .document-toolbar { overflow-x: auto; }
  .check-summary, .save-state { display: none; }
  .check-row { grid-template-columns: 110px 1fr; }
  .check-comment, .readonly-comment { grid-column: 1 / -1; }
  .comment-form { grid-template-columns: 1fr; }
  .comment-form label:nth-child(3) { grid-column: auto; }
  .review-column { width: 260px; }
  .review-cell { min-width: 250px; }
  .decision-control { align-items: stretch; flex-direction: column; }
}

@media (max-width: 620px) {
  .site-header { flex-wrap: wrap; padding: 8px 12px; }
  .primary-nav { order: 3; width: 100%; min-height: 38px; }
  .identity { display: none; }
  .page-heading { align-items: stretch; flex-direction: column; }
  .document-main { border-left: 0; border-right: 0; }
  .document-heading, .document-section, .review-band { padding-left: 15px; padding-right: 15px; }
  .section-heading { grid-template-columns: 30px 1fr; }
  .gate-label { grid-column: 2; justify-self: start; }
  .check-row { grid-template-columns: 1fr; }
  .check-comment, .readonly-comment { grid-column: auto; }
  .upload-form { align-items: stretch; flex-direction: column; }
  .locked-document { margin-top: 0; border: 0; }
  .login-options { grid-template-columns: 1fr; }
  .login-divider { min-height: 35px; }
  .login-divider::before { top: 50%; right: 0; bottom: auto; left: 0; border-top: 1px solid var(--line); border-left: 0; }
  .datasheet-preview-toolbar { align-items: flex-start; flex-direction: column; }
  .datasheet-preview-title { align-items: flex-start; flex-direction: column; gap: 6px; }
  .datasheet-preview-actions { align-items: stretch; flex-direction: column; width: 100%; }
  .datasheet-preview-actions .button { width: 100%; }
  .datasheet-pages { gap: 10px; padding: 8px; }
}

@media print {
  body { background: #fff; }
  .site-header, .document-toolbar, .section-nav, .flash, .workflow-actions, .comment-form, .upload-form, .add-row, .remove-row { display: none !important; }
  .document-layout { display: block; padding: 0; }
  .document-main, .locked-document { border: 0; margin: 0; max-width: none; }
  .document-section, .review-band { break-inside: auto; }
  tr, .check-row, .comment { break-inside: avoid; }
  input, select, textarea { border: 0; padding: 0; }
  @page { margin: 14mm; }
}