/* --------------------------------------------------------------------------
   Shared foundation
   -------------------------------------------------------------------------- */

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #f4f6f8;
  color: #222;
}

header {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(124, 163, 184, 0.16) 0%, rgba(124, 163, 184, 0) 38%),
    linear-gradient(180deg, #123b5d 0%, #0b2d4d 100%);
  color: white;
  padding: 32px;
  text-align: center;
}

header::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55), transparent 72%);
}

header::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 4px;
  background: linear-gradient(90deg, #7ca3b8, #f2b880, #7ca3b8);
  opacity: 0.9;
}

main {
  max-width: 1200px;
  margin: 24px auto;
  padding: 0 16px;
}

.card {
  background: white;
  padding: 24px;
  margin-bottom: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
}

.template-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 12px 0;
}

textarea {
  min-height: 140px;
  font-family: inherit;
}

input, select, textarea {
  padding: 8px;
  width: 100%;
  box-sizing: border-box;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

th {
  background: #e8eef4;
}

th, td {
  border: 1px solid #ccc;
  padding: 8px;
}

tr:nth-child(even) {
  background: #f9f9f9;
}

button {
  background: #0b2d4d;
  color: white;
  border: none;
  padding: 10px 14px;
  border-radius: 6px;
  cursor: pointer;
}

button:hover {
  background: #17476f;
}

.delete-btn,
.remove-pdf-btn {
  background: #b42318;
}

.delete-btn:hover,
.remove-pdf-btn:hover {
  background: #8f1b13;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.home-overview h2,
.home-overview h3 {
  margin-top: 0;
}

.home-overview {
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid rgba(216, 224, 232, 0.9);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
}

.continue-work-card {
  max-width: 920px;
  margin: 18px auto 0;
  border: 1px solid #bcd1e3;
  background: linear-gradient(135deg, #f2f9ff 0%, #ffffff 72%);
}

.continue-work-card.hidden { display: none; }

.continue-work-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.continue-work-heading h2,
.continue-work-heading p { margin: 0; }

.continue-work-heading p {
  margin-top: 5px;
  color: #526579;
}

.continue-work-list {
  display: grid;
  gap: 9px;
}

.continue-work-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border: 1px solid #d4e0ea;
  border-radius: 8px;
  background: #ffffff;
  color: #173b59;
  text-decoration: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.continue-work-item:hover,
.continue-work-item:focus-visible {
  border-color: #2875b8;
  box-shadow: 0 7px 18px rgba(11, 45, 77, 0.12);
  transform: translateY(-1px);
  outline: none;
}

.continue-work-item > span:first-child {
  display: grid;
  gap: 3px;
}

.continue-work-item small { color: #64748b; }
.continue-work-item.most-recent { border-left: 4px solid #2875b8; }

.continue-work-action {
  flex: 0 0 auto;
  padding: 7px 11px;
  border-radius: 6px;
  background: #eaf4fc;
  color: #145b91;
  font-size: 12px;
  font-weight: 800;
}

.draft-save-status {
  min-height: 1.2em;
  margin: 10px 0 0;
  color: #526476;
  font-size: 13px;
}

.draft-save-status.is-saving {
  color: #76520f;
}

.draft-save-status.is-saved {
  color: #267044;
}

.draft-save-status.is-error {
  color: #b42318;
}

.home-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid #e4ebf2;
}

.home-heading p,
.home-feature p {
  line-height: 1.45;
}

.home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.home-feature {
  display: block;
  border: 1px solid #d8e0e8;
  border-radius: 8px;
  padding: 18px;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  color: #222;
  text-decoration: none;
  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease,
    background 0.16s ease;
}

.home-feature:hover,
.home-feature:focus-visible {
  background: white;
  border-color: #17476f;
  box-shadow: 0 10px 24px rgba(11,45,77,0.14);
  transform: translateY(-2px);
  outline: none;
}

.home-feature h3 {
  margin-bottom: 10px;
  color: #0b2d4d;
}

.home-feature-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.home-feature-heading h3 {
  margin-bottom: 0;
}

.home-feature-tags {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}

.home-ai-tag,
.menu-ai-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  padding: 3px 8px;
  border: 1px solid #9bc7e5;
  border-radius: 999px;
  background: #e8f5ff;
  color: #075d91;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Specification automation
   -------------------------------------------------------------------------- */
.spec-main { display: flex; flex-direction: column; max-width: 1500px; margin: 0 auto; }
.spec-how-to { order: -1; }
.spec-how-to-content { margin-top: 10px; }
.spec-how-to-content > h3 { margin-top: 24px; color: #0b2d4d; }
.spec-how-to-content ol { padding-left: 24px; line-height: 1.55; }
.spec-how-to-content li + li { margin-top: 7px; }
.spec-guidance-callout { margin-bottom: 18px; padding: 15px 16px; border-left: 4px solid #17476f; border-radius: 6px; background: #edf5fb; }
.spec-guidance-callout.is-note { margin: 20px 0 0; border-left-color: #a66b00; background: #fff7e8; }
.spec-guidance-callout p { margin: 6px 0 0; line-height: 1.5; }
.spec-part-guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.spec-part-guide-grid article { padding: 15px; border: 1px solid #d9e3eb; border-radius: 8px; background: #fbfcfd; }
.spec-part-guide-grid h4 { margin: 0 0 7px; color: #173e61; }
.spec-part-guide-grid p { margin: 0; line-height: 1.5; }
.spec-example-warning { padding: 10px 12px; border-radius: 6px; background: #fff7e8; color: #684400; }
.spec-example-details { margin-top: 10px; border: 1px solid #d9e3eb; border-radius: 7px; overflow: hidden; }
.spec-example-details > summary { padding: 12px 14px; cursor: pointer; background: #f4f7fa; color: #173e61; font-weight: 700; }
.spec-example-details pre { margin: 0; padding: 16px; overflow-x: auto; white-space: pre-wrap; font-family: Arial, sans-serif; font-size: 13px; line-height: 1.5; background: #fff; }
.spec-toolbar-card,
.spec-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.spec-overall-state { display: flex; flex-direction: column; gap: 3px; margin-top: 10px; padding: 9px 11px; border-left: 4px solid #a66b00; border-radius: 5px; background: #fff7e8; color: #684400; }
.spec-overall-state span { font-size: 12px; }
.spec-overall-state.is-source-review { border-left-color: #2c6e9b; background: #edf6fc; color: #214f70; }
.spec-overall-state.is-engineering-review { border-left-color: #8a6412; background: #fff8e8; color: #684b0d; }
.spec-overall-state.is-ready { border-left-color: #27804a; background: #eaf7ee; color: #17623a; }
.spec-toolbar-card h2,
.spec-section-heading h2 { margin-bottom: 6px; }
.spec-tabs { display: flex; gap: 8px; margin: 0 0 18px; overflow-x: auto; padding: 3px; }
.spec-tabs button { flex: 0 0 auto; background: #e8eef4; color: #17324d; border: 1px solid #cdd9e4; }
.spec-tabs button.active { background: #0b2d4d; color: #fff; border-color: #0b2d4d; }
.spec-tab-live-indicator { display: none; margin-left: 7px; padding: 2px 6px; border-radius: 999px; background: #dff4e7; color: #17623a; font-size: 9px; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; }
.spec-tabs button.is-updating .spec-tab-live-indicator { display: inline-flex; animation: spec-source-review-pulse 1.25s ease-in-out infinite; }
.spec-tabs button.is-updating { border-color: #49a76f; box-shadow: 0 0 0 2px rgba(73, 167, 111, 0.12); }
.spec-tabs button.active .spec-tab-live-indicator { background: #dff4e7; color: #17623a; }
@keyframes spec-source-review-pulse {
  0%, 100% { opacity: 0.62; transform: scale(0.96); }
  50% { opacity: 1; transform: scale(1); }
}
.spec-tab-optional { margin-left: 4px; font-size: 10px; font-weight: 700; opacity: 0.72; text-transform: uppercase; letter-spacing: 0.04em; }
.spec-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.spec-form-grid label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; color: #26394b; }
.spec-form-grid input,
.spec-form-grid select {
  width: 100%;
  box-sizing: border-box;
  font-weight: 400;
}

.spec-form-grid textarea {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  font-weight: 400;
  line-height: 1.45;
}
.spec-wide-field { grid-column: 1 / -1; }
.spec-project-transfer { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 16px; border: 1px solid #cbdbe7; border-radius: 8px; background: #f2f7fb; }
.spec-project-transfer p { margin: 4px 0 0; color: #5d7183; font-weight: 400; }
.spec-part-editor { padding: 18px; border: 1px solid #d7e1ea; border-radius: 9px; background: #fbfcfd; }
.spec-part-editor-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 12px; }
.spec-part-editor-heading h3 { margin: 0 0 5px; color: #0b2d4d; }
.spec-part-editor-heading p { margin: 0; color: #5c6f80; line-height: 1.45; }
.spec-part-heading-copy { min-width: 0; padding-top: 2px; }
.spec-part-label { display: block; margin-bottom: 5px; color: #668096; font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.spec-editor-actions { display: flex; align-items: stretch; gap: 10px; flex: 0 0 auto; padding: 7px; border: 1px solid #d8e3eb; border-radius: 10px; background: #f3f7fa; }
.spec-ai-write-button { display: inline-flex; align-items: center; gap: 9px; min-height: 50px; margin: 0; padding: 8px 13px; border: 1px solid #8ec5e9; background: linear-gradient(135deg, #e8f5ff, #dcefff); color: #075985; text-align: left; box-shadow: 0 3px 9px rgba(36, 125, 184, 0.14); }
.spec-ai-write-button:hover, .spec-ai-write-button:focus-visible { border-color: #62acd9; background: linear-gradient(135deg, #dff1ff, #cfe8fb); color: #064d75; }
.spec-ai-write-button > span:first-child { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 8px; background: #3188bd; color: #fff; font-size: 16px; box-shadow: 0 2px 6px rgba(31, 111, 161, 0.24); }
.spec-ai-write-button > span:last-child { display: grid; gap: 2px; }
.spec-ai-write-button strong { font-size: 11px; }
.spec-ai-write-button small { color: #497b9b; font-size: 9px; font-weight: 650; }
.spec-template-action-group { display: grid; align-content: center; gap: 5px; padding-left: 10px; border-left: 1px solid #d5e0e8; }
.spec-template-action-group > span { color: #6a7f91; font-size: 9px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; }
.spec-template-actions { display: grid; grid-template-columns: repeat(3, max-content); gap: 8px; align-items: center; flex: 0 0 auto; }
.spec-template-actions button { min-height: 34px; margin: 0; padding: 7px 10px; white-space: nowrap; font-size: 10px; }
.spec-part-editor > label { display: flex; flex-direction: column; gap: 7px; font-weight: 600; color: #26394b; }
.spec-file-button { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.spec-template-library { display: grid; gap: 10px; margin-top: 12px; max-height: 52vh; overflow: auto; }
.spec-template-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px; border: 1px solid #d5e0e9; border-radius: 8px; background: #f8fafc; }
.spec-template-card p { margin: 4px 0 0; color: #647789; font-size: 12px; }
.spec-template-card .button-row { flex: 0 0 auto; }
.spec-fill-in-guide { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 12px; padding: 10px 12px; border: 1px solid #d6e1ea; border-radius: 7px; background: #f2f7fb; color: #425d73; font-size: 12px; }
.spec-fill-in-guide strong { margin-right: 3px; color: #173e61; }
.spec-fill-in-guide span { padding: 4px 7px; border-radius: 999px; background: #fff; border: 1px solid #cbd9e4; color: #315a78; font-family: Consolas, monospace; }
.spec-fill-in-guide span[data-fill-part] { position: relative; padding-left: 22px; font-family: Arial, sans-serif; font-weight: 700; cursor: pointer; transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease; }
.spec-fill-in-guide span[data-fill-part]:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(23, 71, 111, 0.16); }
.spec-fill-in-guide span[data-fill-part]:focus-visible { outline: 2px solid #17476f; outline-offset: 2px; }
.spec-fill-in-guide span[data-fill-part]::before { content: ""; position: absolute; left: 8px; top: 50%; width: 7px; height: 7px; border-radius: 50%; transform: translateY(-50%); background: #8796a3; }
.spec-fill-in-guide span[data-fill-part].is-missing { border-color: #e3a5a0; background: #fff0ef; color: #8d251e; }
.spec-fill-in-guide span[data-fill-part].is-missing::before { background: #c7352b; }
.spec-fill-in-guide span[data-fill-part].is-complete { border-color: #9bc9aa; background: #eaf7ee; color: #17623a; }
.spec-fill-in-guide span[data-fill-part].is-complete::before { background: #24834c; }
.spec-part-editor textarea {
  padding: 28px 34px;
  border-color: #b9c9d7;
  background: #fff;
  color: #111;
  overflow-x: auto;
  font-family: "Times New Roman", Times, serif;
  font-size: 15px;
  line-height: 1.4;
  tab-size: 4;
  white-space: pre;
  box-shadow: 0 3px 12px rgba(36, 49, 61, 0.08);
}
.spec-preview-fill-in { padding: 0 2px; border-radius: 2px; background: #fff0b8; color: #6f3f00; font-weight: 700; }
.spec-part-editor textarea:focus { border-color: #17476f; box-shadow: 0 0 0 3px rgba(23, 71, 111, 0.12); outline: none; }
.spec-drop-zone { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 34px 20px; border: 2px dashed #9fb3c7; border-radius: 10px; background: #f7fafc; cursor: pointer; text-align: center; }
.spec-drop-zone.dragover { border-color: #0b2d4d; background: #eaf2f8; }
.spec-source-explanation { margin: 12px 0 16px; padding: 14px 16px; border: 1px solid #cfdae4; border-radius: 8px; background: #f4f8fb; }
.spec-source-explanation ul { margin: 8px 0 0; padding-left: 22px; line-height: 1.5; }
.spec-source-explanation li + li { margin-top: 5px; }
.spec-modal-content:has(.spec-company-library) { width: min(1240px, 96vw); max-height: 92vh; overflow-y: auto; }
.spec-modal-content:has(.spec-company-library) #specModalBody { min-height: 0; overflow: visible; }
.spec-company-library { display: grid; gap: 14px; min-height: min(650px, 72vh); }
.spec-company-library h3 { margin: 0 0 5px; }
.spec-company-library-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding-bottom: 14px; border-bottom: 1px solid #d5e0ea; }
.spec-company-library-heading-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.spec-company-library-guidance { display: flex; flex-wrap: wrap; gap: 5px 10px; padding: 10px 12px; border-left: 4px solid #2c6e9b; border-radius: 6px; background: #edf6fc; color: #214f70; font-size: 13px; }
.spec-company-library-layout { display: grid; grid-template-columns: minmax(250px, 0.75fr) minmax(480px, 2fr); gap: 16px; min-height: 0; }
.spec-company-library-add { display: flex; flex-direction: column; gap: 14px; padding: 16px; border: 1px solid #bfd0df; border-radius: 10px; background: #f8fbfe; }
.spec-company-library-add p { margin: 5px 0 0; color: #52606d; font-size: 13px; line-height: 1.45; }
.spec-company-library-add > small { margin-top: auto; color: #647789; }
.spec-company-library-form { display: grid; gap: 12px; }
.spec-company-library-form label:not(.button-link) { display: grid; gap: 5px; font-weight: 600; }
.spec-company-library-form textarea { resize: vertical; }
.spec-company-library-upload { display: grid; gap: 5px; place-items: center; min-height: 120px; margin: 2px 0 0; padding: 18px 12px; border: 2px dashed #8faec5; border-radius: 9px; background: #fff; color: #17476f; cursor: pointer; text-align: center; transition: border-color 0.15s ease, background 0.15s ease; }
.spec-company-library-upload span { color: #5f7486; font-size: 12px; }
.spec-company-library-upload.dragover { border-color: #0b5d91; background: #eaf4fb; }
.spec-company-upload-pending { display: grid; gap: 3px; padding: 9px 10px; border-radius: 7px; background: #edf2f6; color: #526879; font-size: 12px; overflow-wrap: anywhere; }
.spec-company-library-browser { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 16px; border: 1px solid #d5e0ea; border-radius: 10px; background: #fff; }
.spec-company-library-toolbar { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(170px, 0.38fr); gap: 10px; align-items: center; }
.spec-company-knowledge-list { display: grid; gap: 9px; min-height: 0; margin-top: 12px; padding-right: 4px; overflow-y: auto; }
.spec-company-knowledge-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px; border: 1px solid #d5e0ea; border-radius: 8px; background: #fff; }
.spec-company-knowledge-info { display: grid; gap: 3px; min-width: 0; }
.spec-company-knowledge-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.spec-company-knowledge-info strong { overflow-wrap: anywhere; }
.spec-company-knowledge-info span { color: #52606d; font-size: 13px; }
.spec-company-knowledge-info .spec-company-kind { padding: 3px 7px; border: 1px solid #9ebbd1; border-radius: 999px; background: #edf6fc; color: #17476f; font-size: 11px; font-weight: 750; }
.spec-company-knowledge-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start; padding-top: 10px; border-top: 1px solid #e3eaf0; }
.spec-company-knowledge-actions button { min-height: 38px; }
.spec-load-status { margin-top: 12px; padding: 10px 12px; border-radius: 7px; background: #eef2f5; color: #4f6374; font-size: 13px; }
.spec-load-status.is-loading { background: #fff5dc; color: #76520f; }
.spec-load-status.is-complete { background: #e8f6ed; color: #17623a; }
.spec-load-status.is-partial { background: #fff5dc; color: #76520f; }
.spec-load-status.is-error { background: #fff0ef; color: #8d251e; }
.spec-ai-progress { margin: 12px 0; }
.spec-ai-progress .spec-load-status { flex: 1 1 auto; margin-top: 0; }
.spec-ai-progress.is-complete { border-color: #78b88f; background: #eff9f2; box-shadow: inset 4px 0 0 #24834c; }
.spec-ai-progress.is-complete .packet-build-messages summary,
.spec-ai-progress.is-complete .packet-build-elapsed { color: #17623a; }
.spec-ai-progress.is-error { border-color: #d99a94; background: #fff7f6; box-shadow: inset 4px 0 0 #c8392b; }
.spec-ai-progress-controls { display: flex; align-items: center; gap: 10px; }
.spec-ai-progress-controls .delete-btn { white-space: nowrap; }
#specAiMessageHistory li.is-error { margin-block: 3px; padding: 6px 8px; border-left: 3px solid #c8392b; border-radius: 4px; background: #fff0ef; color: #7d261f; }
.spec-direct-fill-panel { margin: 4px 0 18px; padding: 16px; border: 1px solid #bdd3e3; border-radius: 9px; background: #f5f9fc; }
.spec-direct-fill-panel h3 { margin: 0 0 5px; color: #173e61; }
.spec-extracted-fill-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin-top: 12px; }
.spec-extracted-fill-card { padding: 14px; border: 1px solid #c8d8e4; border-radius: 8px; background: #fff; }
.spec-extracted-fill-card.accepted { border-color: #9bc9aa; background: #f1faf4; }
.spec-extracted-fill-card.has-conflict { border-color: #e0a33a; background: #fffaf0; }
.spec-status.conflict { border-color: #e0a33a; background: #fff0c7; color: #805000; }
.spec-equipment-approval-card.has-conflict { border-color: #e0a33a; background: #fffaf0; }
.spec-equipment-identity { margin: 8px 0 3px; color: #183e5b; font-weight: 650; }
.spec-equipment-technical { margin: 4px 0; color: #4a6578; font-size: 12px; }
.spec-equipment-warning { margin: 8px 0; padding: 7px 9px; border-left: 3px solid #d28a11; background: #fff3d6; color: #674500; font-size: 12px; }
.spec-equipment-approval-card details { margin-top: 8px; color: #506778; }
.spec-equipment-approval-card details p { line-height: 1.4; }
.spec-fill-conflict { margin: 10px 0; padding: 9px 10px; border-left: 3px solid #d28a11; background: #fff3d6; color: #674500; font-size: 12px; }
.spec-extracted-fill-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.spec-extracted-fill-heading > div { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.spec-extracted-fill-heading code { padding: 2px 5px; border-radius: 4px; background: #edf2f6; color: #405c73; font-size: 11px; }
.spec-confidence { flex: 0 0 auto; font-size: 11px; }
.spec-confidence-badge { display: inline-flex; align-items: center; justify-self: start; width: max-content; max-width: 100%; padding: 4px 9px; border: 1px solid transparent; border-radius: 999px; font-size: 11px; font-weight: 750; line-height: 1.15; white-space: nowrap; }
.spec-confidence-badge.confidence-high { border-color: #9acbab; background: #e8f6ed; color: #17623a; }
.spec-confidence-badge.confidence-medium { border-color: #9fc4de; background: #edf6fc; color: #174f76; }
.spec-confidence-badge.confidence-low { border-color: #e2c277; background: #fff5d9; color: #76520f; }
.spec-possible-findings { grid-column: 1 / -1; margin-top: 10px; padding: 10px 12px; border: 1px solid #e2c277; border-radius: 8px; background: #fffaf0; }
.spec-possible-findings > summary { cursor: pointer; color: #76520f; font-weight: 750; }
.spec-possible-findings > summary span { margin-left: 6px; color: #846d43; font-size: 11px; font-weight: 600; }
.spec-possible-findings-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin-top: 12px; }
.spec-modal-content:has(.spec-source-page-preview) { display: flex; flex-direction: column; width: min(1400px, 96vw); height: min(900px, 94vh); max-height: 94vh; overflow: hidden; }
.spec-modal-content:has(.spec-source-page-preview) #specModalBody { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.spec-modal-content:has(.spec-source-page-preview) #specModalActions { flex: 0 0 auto; margin-top: 14px; padding-top: 12px; border-top: 1px solid #d5e0ea; background: #fff; }
.spec-source-page-preview { display: grid; grid-template-columns: minmax(260px, 0.55fr) minmax(0, 1.45fr); gap: 16px; height: 100%; min-height: 0; }
.spec-source-page-evidence { padding: 14px; border: 1px solid #bdd3e3; border-radius: 8px; background: #f5f9fc; overflow-y: auto; }
.spec-source-page-evidence p { white-space: pre-wrap; line-height: 1.5; }
.spec-source-page-canvas { display: grid; min-width: 0; min-height: 320px; padding: 10px; border: 1px solid #d5e0ea; border-radius: 8px; background: #697580; overflow: auto; place-items: start center; }
.spec-source-page-canvas canvas { display: block; width: auto; max-width: 100%; height: auto; margin: 0 auto; background: #fff; box-shadow: 0 3px 14px rgba(0,0,0,0.24); }
.spec-source-text-preview { padding: 16px; border-radius: 7px; background: #fff; }
.spec-extracted-value { margin: 12px 0 7px; color: #102f49; font-size: 16px; font-weight: 700; }
.spec-extracted-value span { display: block; margin-bottom: 3px; color: #66798b; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.spec-extracted-fill-card small { color: #627788; }
.spec-extracted-fill-card details { margin: 10px 0; color: #506778; }
.spec-extracted-fill-card details p { margin: 7px 0 0; line-height: 1.4; }
.spec-document-list { display: grid; gap: 10px; margin-top: 16px; }
.spec-suggestion-list { display: grid; gap: 12px; margin-top: 14px; }
.spec-suggestion-card { padding: 16px; border: 1px solid #cedbe5; border-radius: 10px; background: #fff; box-shadow: 0 2px 7px rgba(11, 45, 77, 0.05); }
.spec-suggestion-card.accepted { border-color: #9bc9aa; background: #f3faf5; }
.spec-suggestion-card.rejected { opacity: 0.66; background: #f5f6f7; }
.spec-suggestion-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, 38%); align-items: start; gap: 16px; margin: -4px -4px 14px; padding: 12px; border-radius: 8px; background: #f5f8fb; }
.spec-suggestion-heading > div { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 7px 9px; min-width: 0; }
.spec-suggestion-heading .spec-confidence-badge { grid-column: auto; }
.spec-suggestion-heading > div > strong { overflow-wrap: anywhere; color: #102f4b; }
.spec-suggestion-heading small { color: #697b8c; }
.spec-suggestion-heading > select { width: 100%; min-height: 38px; }
.spec-description-for { grid-column: 1 / -1; display: grid; grid-template-columns: 132px minmax(190px, 330px); align-items: center; gap: 9px; margin-top: 4px; color: #415c72; font-size: 12px; font-weight: 700; }
.spec-description-for input { width: 100%; min-width: 0; padding: 8px 10px; border-color: #bdcedc; background: #fff; font: inherit; font-size: 13px; font-weight: 500; }
.spec-suggestion-card textarea { width: 100%; box-sizing: border-box; min-height: 112px; margin-bottom: 12px; padding: 12px; resize: vertical; border-color: #c5d5e2; background: #fcfdfe; line-height: 1.5; }
.spec-inline-placement-preview { margin: 0 0 12px; overflow: hidden; border: 1px solid #bfd2e0; border-radius: 8px; background: #fff; }
.spec-equipment-approval-list { display: grid; gap: 8px; }
.spec-equipment-approval-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 12px; border: 1px solid #cedbe5; border-radius: 8px; background: #fff; }
.spec-equipment-approval-card > div:first-child { display: grid; grid-template-columns: auto minmax(220px, 1fr); align-items: center; gap: 7px 10px; flex: 1; }
.spec-equipment-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.spec-equipment-approval-card input { width: 100%; box-sizing: border-box; }
.spec-equipment-approval-card small { grid-column: 2; color: #61798b; }
.spec-equipment-approval-card.accepted { border-color: #9bc9aa; background: #f3faf5; }
.spec-inline-placement-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 11px; background: #eaf3f9; color: #31536b; font-size: 12px; }
.spec-inline-placement-heading span { text-align: right; }
.spec-inline-placement-body { max-height: 240px; padding: 12px 16px; overflow: auto; background: #fff; color: #111; font-family: "Times New Roman", Times, serif; font-size: 13px; line-height: 1.45; }
.spec-fill-placement-preview { margin-top: 10px; }
.spec-fill-editor-wide textarea { width: 100%; min-height: 210px; box-sizing: border-box; font-family: "Times New Roman", Times, serif; font-size: 14px; line-height: 1.4; }
.spec-preview-line { display: grid; grid-template-columns: 2.2em minmax(0, 1fr); align-items: start; }
.spec-preview-line.level-0 { margin-left: 0; font-weight: 600; }
.spec-preview-line.level-1 { margin-left: 1.25em; }
.spec-preview-line.level-2 { margin-left: 2.5em; }
.spec-preview-line.level-3 { margin-left: 3.75em; }
.spec-preview-line.level-4 { margin-left: 5em; }
.spec-preview-marker { padding-right: .55em; text-align: right; }
.spec-preview-content { min-width: 0; overflow-wrap: anywhere; }
.spec-preview-line.unmarked { display: block; margin-left: 2.5em; }
.spec-preview-spacer { height: .65em; }
.spec-suggestion-destination { display: grid; grid-template-columns: max-content minmax(220px, 1fr); align-items: center; gap: 10px; margin: -4px 0 10px; padding: 8px 10px; border-left: 3px solid #4e83ab; background: #eef5fa; color: #345870; font-size: 12px; }
.spec-suggestion-destination select { width: 100%; min-height: 34px; background: #fff; }
.spec-suggestion-placement-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.spec-suggestion-placement-controls .spec-suggestion-destination { margin-bottom: 10px; }
.spec-placement-preview { max-height: 56vh; margin: 12px 0 0; padding: 18px; overflow: auto; white-space: pre-wrap; border: 1px solid #cbd8e2; border-radius: 7px; background: #fff; color: #111; font-family: "Times New Roman", Times, serif; font-size: 14px; line-height: 1.45; }
.spec-suggestion-actions { padding-top: 2px; }
.spec-review-toolbar { display: grid; grid-template-columns: minmax(260px, 1.4fr) minmax(170px, 0.55fr) minmax(190px, 0.65fr) max-content; gap: 12px; align-items: end; margin: 14px 0 18px; padding: 14px; border: 1px solid #d7e2ea; border-radius: 8px; background: #f8fafc; }
.spec-review-toolbar label { display: grid; gap: 6px; color: #38566d; font-size: 12px; font-weight: 700; }
.spec-review-toolbar input,
.spec-review-toolbar select { width: 100%; min-width: 0; min-height: 38px; box-sizing: border-box; background: #fff; }
.spec-review-toolbar > button { min-height: 38px; margin: 0; }
.spec-review-header-actions { display: grid; grid-template-columns: repeat(3, max-content); gap: 8px; align-items: center; flex: 0 0 auto; }
.spec-review-header-actions button { min-height: 36px; margin: 0; padding: 8px 11px; white-space: nowrap; font-size: 11px; }
.spec-suggestion-example { border-style: dashed; background: #f8fafc; }
.spec-inline-example { margin: 14px 0; border: 1px solid #d7e2ea; border-radius: 8px; background: #f8fafc; }
.spec-inline-example summary { padding: 10px 12px; color: #173e61; }
.spec-inline-example > div { padding: 0 12px 12px; line-height: 1.5; color: #526779; }
.spec-status.pending { background: #fff0d5; color: #7a4b00; }
.spec-status.accepted { background: #dff4e7; color: #17623a; }
.spec-status.rejected { background: #edf0f2; color: #5d6974; }
.spec-document-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; border: 1px solid #dbe3ea; border-radius: 8px; }
.spec-document-row span { display: block; margin-top: 4px; color: #657789; font-size: 12px; }
.spec-document-info { min-width: 0; flex: 1 1 auto; }
.spec-document-info strong { display: block; overflow-wrap: anywhere; }
.spec-document-actions { display: grid; grid-template-columns: repeat(4, max-content); align-items: center; gap: 7px; flex: 0 0 auto; }
.spec-document-actions button { min-height: 34px; margin: 0; padding: 7px 10px; white-space: nowrap; font-size: 11px; }
.spec-filter-row { display: grid; grid-template-columns: minmax(260px, 1fr) auto auto; gap: 10px; margin: 18px 0 12px; }
.spec-table-wrap { overflow-x: auto; margin: 14px 0; }
.spec-table { width: 100%; border-collapse: collapse; min-width: 980px; font-size: 13px; }
.spec-table th,
.spec-table td { padding: 9px; border: 1px solid #d9e2ea; vertical-align: middle; text-align: left; }
.spec-table th { background: #eef3f7; color: #24384b; white-space: nowrap; }
.spec-row-actions { display: flex; flex-wrap: wrap; gap: 5px; }
.spec-row-actions button { padding: 6px 8px; font-size: 12px; }
.spec-status { display: inline-block; padding: 4px 7px; border-radius: 999px; background: #edf1f5; white-space: nowrap; font-size: 11px; font-weight: 700; }
.spec-ai-origin-badge { display: inline-flex; align-items: center; width: max-content; padding: 3px 7px; border: 1px solid #9bc7e5; border-radius: 999px; background: #e8f5ff; color: #075d91; font-size: 10px; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; }
.spec-ai-origin-badge.is-built-in { border-color: #b8c4cf; background: #f1f4f7; color: #465a6b; }
.spec-status.engineer-approved,
.spec-status.database-verified { background: #dff4e7; color: #17623a; }
.spec-status.needs-review { background: #fff0d5; color: #7a4b00; }
.spec-sheet-row { margin: 14px 0; padding: 16px; border: 1px solid #d8e1e9; border-radius: 9px; background: #fbfcfd; }
.spec-sheet-row-heading { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.spec-review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 18px 0; }
.spec-review-card { display: flex; flex-direction: column; gap: 5px; padding: 16px; border: 1px solid #cfe2d6; border-radius: 8px; background: #f3faf6; }
.spec-review-card.needs-review { border-color: #efd6a7; background: #fff8eb; }
.spec-review-card strong { font-size: 24px; color: #0b2d4d; }
.spec-modal-content { width: min(820px, 92vw); }
.spec-quantity-link { padding: 0; background: transparent; color: #0b5d91; border: 0; text-decoration: underline; }

@media (max-width: 760px) {
  .spec-part-guide-grid { grid-template-columns: 1fr; }
  .spec-toolbar-card,
  .spec-section-heading,
  .spec-document-row,
  .spec-suggestion-heading,
  .spec-part-editor-heading,
  .spec-project-transfer { flex-direction: column; align-items: stretch; }
  .spec-company-library-form,
  .spec-company-library-toolbar,
  .spec-company-knowledge-row { grid-template-columns: 1fr; }
  .spec-modal-content:has(.spec-company-library) { max-height: 96vh; overflow-y: auto; }
  .spec-company-library { min-height: auto; }
  .spec-company-library-heading { flex-direction: column; }
  .spec-company-library-layout { grid-template-columns: 1fr; }
  .spec-company-library-browser { min-height: 420px; }
  .spec-company-knowledge-actions { justify-content: flex-start; }
  .spec-source-page-preview { grid-template-columns: 1fr; max-height: none; }
  .spec-source-page-canvas { min-height: 260px; }
  .spec-modal-content:has(.spec-source-page-preview) { height: 96vh; max-height: 96vh; }
  .spec-modal-content:has(.spec-source-page-preview) #specModalBody { overflow-y: auto; }
  .spec-template-actions { grid-template-columns: 1fr; width: 100%; }
  .spec-form-grid,
  .spec-filter-row { grid-template-columns: 1fr; }
  .spec-review-toolbar { grid-template-columns: 1fr; }
  .spec-review-header-actions { grid-template-columns: repeat(3, 1fr); width: 100%; }
  .spec-document-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; max-width: none; flex-basis: auto; }
  .spec-document-actions button { width: 100%; }
  .spec-suggestion-heading { grid-template-columns: 1fr; }
  .spec-description-for { grid-template-columns: 1fr; }
  .spec-suggestion-placement-controls { grid-template-columns: 1fr; }
  .spec-wide-field { grid-column: auto; }
}

@media (max-width: 640px) {
  .home-heading {
    flex-direction: column;
  }

  .continue-work-heading {
    align-items: stretch;
    flex-direction: column;
  }
}
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.modal.hidden {
  display: none;
}

.modal-content {
  background: white;
  padding: 24px;
  width: 600px;
  max-width: 90%;
  max-height: 85vh;
  overflow-y: auto;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}

.warranty-modal-content {
  width: 520px;
  max-height: 86vh;
  overflow-y: auto;
}

.warranty-create-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding: 14px;
  border: 1px solid #ccd5df;
  border-radius: 8px;
  background: #f7f9fb;
}

.warranty-create-toggle input {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.warranty-standard-coverage {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 8px;
  padding: 14px;
  border: 2px solid #7aa7d2;
  border-radius: 8px;
  background: #eef6ff;
  cursor: pointer;
}

.warranty-standard-coverage input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex: 0 0 auto;
}

.warranty-standard-coverage span {
  display: grid;
  gap: 3px;
}

.warranty-standard-coverage small {
  color: #4c5661;
  font-weight: 400;
}

.build-summary {
  display: grid;
  gap: 8px;
  margin: 14px 0;
  padding: 12px;
  border: 1px solid #d6e0ea;
  border-radius: 8px;
  background: #f8fbff;
}

.build-summary-heading {
  margin: 4px 0 0;
  color: #1f2933;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
}

.build-summary-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 14px;
}

.build-summary-row span:first-child {
  color: #4c5661;
}

.build-summary-row strong {
  color: #1f2933;
}

.build-summary-row.is-missing strong {
  color: #8a2d20;
}

.warranty-creator-fields {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}

.warranty-creator-fields label {
  margin-top: 8px;
  font-weight: 600;
}

.warranty-transit-fields {
  display: grid;
  gap: 8px;
}

.warranty-duration-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: 10px;
}

.warranty-unit-label {
  display: flex;
  align-items: center;
  padding: 8px;
  border: 1px solid #c7c7c7;
  background: #f3f5f7;
  color: #4c5661;
  box-sizing: border-box;
}

.warranty-date-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}

.warranty-date-row > div {
  display: grid;
  gap: 8px;
}

.warranty-status {
  min-height: 20px;
  margin: 6px 0 0;
  color: #8a2d20;
  font-size: 14px;
}

button:disabled {
  cursor: wait;
  opacity: 0.65;
}

@media (max-width: 600px) {
  .warranty-duration-row,
  .warranty-date-row {
    grid-template-columns: 1fr;
  }
}

.order-row {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}

.uploaded-pdf-row {
  display: flex;
  justify-content: space-between;
  align-items: center; /* vertically centers */
  padding: 10px 14px;
  margin-top: 8px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
}

.uploaded-pdf-name {
  font-size: 14px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
}

.remove-pdf-btn {
  flex-shrink: 0;
  padding: 6px 12px;
}

.hamburger-container {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 10000;
}

.hamburger {
  position: relative;
  width: 44px;
  height: 44px;
  font-size: 0;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02)),
    #0b2d4d;
  color: white;
  cursor: pointer;
  transition: transform 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
}

.hamburger::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 19px;
  height: 2px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 -6px 0 #ffffff, 0 6px 0 #ffffff;
  transform: translate(-50%, -50%);
  transition: box-shadow 0.16s ease, transform 0.16s ease;
}

.hamburger.open::before {
  box-shadow: 0 0 0 transparent, 0 0 0 transparent;
  transform: translate(-50%, -50%) rotate(45deg);
}

.hamburger.open::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 19px;
  height: 2px;
  border-radius: 999px;
  background: #ffffff;
  transform: translate(-50%, -50%) rotate(-45deg);
}

.hamburger:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04)),
    #17476f;
  transform: translateY(-1px);
}

.hamburger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(242, 184, 128, 0.34), 0 8px 18px rgba(11, 45, 77, 0.22);
}

.side-menu {
  position: absolute;
  top: 56px;
  left: 0;
  width: 244px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(135deg, rgba(124, 163, 184, 0.18) 0%, rgba(124, 163, 184, 0) 42%),
    linear-gradient(180deg, #123b5d 0%, #0b2d4d 100%);
  background-size: 40px 40px, 40px 40px, auto, auto;
  display: flex;
  flex-direction: column;
  gap: 7px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px) scale(0.98);
  transform-origin: top left;
  transition: opacity 0.16s ease, transform 0.16s ease;
  box-shadow: 0 18px 42px rgba(6, 20, 34, 0.24);
}

.side-menu::before {
  content: "N/S Tools";
  display: block;
  margin: 0 0 4px;
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.105);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.88);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.2;
}

.side-menu.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.side-menu a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: white;
  text-decoration: none;
  padding: 8px 13px;
  font-size: 14px;
  font-weight: 700;
  transition: background-color 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.side-menu a:hover {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.1);
  transform: translateX(2px);
}

.side-menu a.active {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.side-menu a.active::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12);
}
.side-menu a:has(.spec-menu-analysis-status),
.side-menu a:has(.menu-ai-tag) { display: flex; align-items: center; gap: 10px; }
.spec-menu-analysis-status { margin-left: auto; padding: 3px 7px; border-radius: 999px; background: #e7edf2; color: #526579; font-size: 10px; font-weight: 700; white-space: nowrap; }
.spec-menu-analysis-status.is-running { background: #fff0c9; color: #76520f; }
.spec-menu-analysis-status.is-done { background: #dff3e6; color: #17623a; }
.side-menu .menu-ai-tag { margin-left: auto; border-color: rgba(155, 199, 229, .75); background: rgba(232, 245, 255, .96); }

.home-wip-tag,
.menu-wip-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 8px;
  border: 1px solid #e2c277;
  border-radius: 999px;
  background: #fff5d9;
  color: #76520f;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.2;
  white-space: nowrap;
}

.side-menu a:has(.menu-wip-tag) { gap: 6px; }
.side-menu .menu-wip-tag { padding-inline: 6px; border-color: rgba(226, 194, 119, .85); background: rgba(255, 245, 217, .97); }

.attach-pdf-btn {
  display: inline-block;
  background: #0b2d4d;
  color: white;
  padding: 10px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}

.attach-pdf-btn:hover {
  background: #17476f;
}

.attach-pdf-btn input[type="file"] {
  display: none;
}

.large-modal {
  width: 1000px;
  max-width: 95%;
  max-height: 90vh;
  overflow: hidden;
}

.subsection-layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 20px;
}

.subsection-preview-panel {
  max-height: 65vh;
  overflow-y: auto;
  border: 1px solid #ccc;
  padding: 12px;
  background: #f9f9f9;
}

.subsection-page-actions {
  position: sticky;
  top: -12px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: -12px -12px 12px;
  padding: 12px;
  border-bottom: 1px solid #dce4ec;
  background: #f5f8fb;
  box-shadow: 0 8px 14px rgba(15, 36, 54, 0.08);
}

.subsection-page-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  margin: 0;
  padding: 10px 14px;
  line-height: 1;
  white-space: nowrap;
}

.subsection-page-selection-status {
  margin: 0 0 10px;
  color: #4c5661;
  font-size: 13px;
  font-weight: 600;
}

.toc-format-options {
  margin-bottom: 16px;
  padding: 12px;
  border: 1px solid #ccd5df;
  border-radius: 6px;
  background: #f7f9fb;
}

.toc-format-options .checkbox-row {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  margin: 0;
}

.toc-format-options input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
}

.toc-format-options .checkbox-text {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.toc-format-options .checkbox-text small {
  color: #58636f;
  line-height: 1.35;
}

.subsection-form-panel {
  max-height: 65vh;
  overflow-y: auto;
}

.pdf-page-preview {
  border: 2px solid transparent;
  background: white;
  padding: 8px;
  margin-bottom: 14px;
  border-radius: 8px;
  cursor: pointer;
}

.pdf-page-preview:hover {
  border-color: #17476f;
}

.pdf-page-preview.selected {
  border-color: #0b2d4d;
  background: #e8eef4;
}

.pdf-page-preview.page-action-selected {
  border-color: #b42318;
  box-shadow: 0 0 0 1px #b42318;
}

.page-preview-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.page-preview-header input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin: 0;
}

.page-preview-header .page-preview-label {
  margin: 0;
}

.pdf-page-preview canvas {
  width: 100%;
  height: auto;
  display: block;
}

.page-preview-label {
  font-weight: bold;
  margin-bottom: 6px;
}



.final-build-preview-modal-content {
  width: min(760px, 94vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.final-build-preview-pages {
  flex: 1;
  min-height: 0;
  max-height: calc(92vh - 170px);
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px;
  border: 1px solid #d7dee8;
  border-radius: 6px;
  background: #f4f7fb;
}

.final-build-preview-pages .page-preview-label {
  width: min(100%, 612px);
  margin-bottom: 8px;
}

.final-build-preview-page-wrap {
  max-width: 100%;
  margin: 0 auto 18px;
}

.final-build-preview-page {
  max-width: 100%;
}

.final-build-preview-modal-content .preview-modal-actions {
  margin-top: 12px;
  flex-shrink: 0;
}

.toc-template-modal-content {
  width: 900px;
  max-width: 95%;
}

.toc-template-search {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 12px;
}

.toc-template-list {
  margin-top: 16px;
  overflow-x: auto;
}

.toc-template-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}

.toc-template-table th,
.toc-template-table td {
  border: 1px solid #ccc;
  padding: 10px;
  text-align: left;
  vertical-align: top;
}

.toc-template-table th {
  background: #f4f7fb;
}

.toc-template-table td:last-child {
  width: 110px;
  text-align: right;
}

.toc-template-table summary {
  cursor: pointer;
  font-weight: 700;
}

.toc-template-level-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}

.toc-template-level-row {
  --toc-level: 0;
  display: grid;
  grid-template-columns: 14px minmax(160px, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin-left: calc(var(--toc-level) * 20px);
  padding: 4px 0;
}

.toc-template-level-rail {
  position: relative;
  width: 14px;
  height: 100%;
  min-height: 24px;
}

.toc-template-level-rail::before {
  content: "";
  position: absolute;
  top: -6px;
  bottom: -6px;
  left: 6px;
  border-left: 2px solid #c8d5e1;
}

.toc-template-level-rail::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid #17476f;
  background: #fff;
  transform: translateY(-50%);
}

.toc-template-level-0 .toc-template-level-rail::before {
  border-left-color: transparent;
}

.toc-template-level-1 .toc-template-level-rail::after {
  border-color: #5f7f43;
}

.toc-template-level-2 .toc-template-level-rail::after {
  border-color: #9f732c;
}

.toc-template-level-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

.toc-template-level-badge {
  display: inline-block;
  border: 1px solid #bfd0df;
  border-radius: 999px;
  padding: 2px 7px;
  background: #eef5fb;
  color: #12324f;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.toc-template-level-1 .toc-template-level-badge {
  background: #f2f6ee;
  border-color: #cbd8bf;
  color: #365523;
}

.toc-template-level-2 .toc-template-level-badge {
  background: #f8f3e8;
  border-color: #dfcfad;
  color: #6b4a16;
}

@media (max-width: 720px) {
  .toc-template-level-row {
    grid-template-columns: 1fr;
  }

  .toc-template-table th,
  .toc-template-table td {
    padding: 8px;
  }
}

.subsection-entry-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  border: 1px solid #ccc;
  padding: 8px;
  margin-top: 8px;
  border-radius: 6px;
  background: white;
}

.subsection-entry-info {
  font-size: 14px;
}

.toc-entry-missing-page {
  color: #b42318;
  font-weight: 700;
}


.builder-history-status {
  margin: 8px 0 0;
  color: #58636f;
  font-size: 13px;
  font-weight: 600;
}

.toc-tree-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toc-tree-empty {
  margin: 8px 0 0;
  color: #58636f;
}

.toc-tree-row {
  --toc-level: 0;
  position: relative;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-left: calc(var(--toc-level) * 22px);
  border: 1px solid #d4dde7;
  border-radius: 6px;
  background: #fff;
  padding: 9px;
  box-shadow: 0 1px 2px rgba(15, 36, 54, 0.04);
}

.toc-tree-row-missing-page {
  border-color: #efbbb4;
  background: #fff8f6;
}

.toc-tree-row-required {
  box-shadow: inset 3px 0 0 #b42318, 0 1px 2px rgba(15, 36, 54, 0.04);
}

.toc-tree-row-attention {
  outline: 3px solid rgba(180, 35, 24, 0.22);
  outline-offset: 2px;
}

.toc-tree-rail {
  position: relative;
  width: 18px;
  height: 100%;
  min-height: 42px;
}

.toc-tree-rail::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 8px;
  border-left: 2px solid #c8d5e1;
}

.toc-tree-rail::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid #17476f;
  background: #fff;
  transform: translateY(-50%);
}

.toc-tree-level-0 .toc-tree-rail::before {
  border-left-color: transparent;
}

.toc-tree-level-1 .toc-tree-rail::after {
  border-color: #5f7f43;
}

.toc-tree-level-2 .toc-tree-rail::after {
  border-color: #9f732c;
}

.toc-tree-content {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.toc-tree-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.toc-tree-title {
  min-width: 0;
  color: #20262d;
  overflow-wrap: anywhere;
}

.toc-tree-level-badge {
  flex: 0 0 auto;
  border: 1px solid #bfd0df;
  border-radius: 999px;
  padding: 2px 7px;
  background: #eef5fb;
  color: #12324f;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;
}

.toc-tree-level-1 .toc-tree-level-badge {
  background: #f2f6ee;
  border-color: #cbd8bf;
  color: #365523;
}

.toc-tree-level-2 .toc-tree-level-badge {
  background: #f8f3e8;
  border-color: #dfcfad;
  color: #6b4a16;
}

.toc-tree-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: #58636f;
  font-size: 12px;
  font-weight: 600;
}

.toc-tree-pill {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  border: 1px solid #d7dee8;
  border-radius: 999px;
  padding: 2px 8px;
  background: #f7f9fb;
}

.toc-tree-pill.toc-entry-missing-page {
  border-color: #efbbb4;
  background: #fff1ef;
}

.toc-tree-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.toc-tree-actions button {
  margin: 0;
  padding: 8px 10px;
}

@media (max-width: 760px) {
  .toc-tree-row {
    grid-template-columns: 18px minmax(0, 1fr);
    margin-left: calc(var(--toc-level) * 14px);
  }

  .toc-tree-actions {
    grid-column: 2;
    justify-content: flex-start;
  }
}

.subsection-count {
  font-size: 12px;
  color: #555;
  margin-top: 4px;
}

.drop-zone {
  border: 3px dashed  #17476f;
  border-radius: 8px;
  padding: 30px;
  text-align: center;
  margin-bottom: 20px;
  background: #f8fbff;
  transition: 0.2s;
}

.drop-zone.dragover {
  background: #e6f2ff;
  border-color:  #17476f;;
}

.import-drop-zone {
  display: grid;
  justify-items: center;
  gap: 12px;
  margin: 16px 0;
  padding: 22px;
}

.import-drop-zone p {
  margin: 0;
}

.import-summary {
  display: grid;
  gap: 10px;
  margin: 12px 0 16px;
  padding: 12px;
  border: 1px solid #d9e2ea;
  border-radius: 8px;
  background: #f8fbff;
  text-align: left;
}

.import-summary.hidden {
  display: none;
}

.import-summary h3 {
  margin: 0;
  color: #17476f;
  font-size: 15px;
}

.import-summary-section {
  display: grid;
  gap: 4px;
  padding: 8px 0;
  border-top: 1px solid #e3ebf2;
}

.import-summary-section:first-of-type {
  border-top: 0;
}

.import-summary-section strong {
  color: #1f2933;
}

.import-summary-section ul {
  margin: 2px 0 0 18px;
  padding: 0;
}

.import-summary-section li {
  margin: 2px 0;
}

.upload-instructions {
  text-align: center;
  margin-bottom: 15px;
  font-size: 16px;
}

.upload-toolbar {
  justify-content: flex-start;
  margin-bottom: 15px;
}

.table-action-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.table-action-buttons button {
  margin: 0;
  white-space: nowrap;
}

.attachment-name {
  margin-top: 6px;
  font-size: 12px;
  color: #555;
}

.pdf-attachment-card {
  display: grid;
  gap: 9px;
  min-width: 260px;
  padding: 10px;
  border: 1px solid #d8e0e8;
  border-radius: 8px;
  background: #f8fbff;
}

.pdf-attachment-card.empty {
  background: #fff;
  border-style: dashed;
}

.pdf-attachment-summary {
  display: grid;
  gap: 3px;
}

.pdf-attachment-status {
  color: #0b2d4d;
  font-size: 13px;
  font-weight: 700;
}

.pdf-attachment-card .attachment-name {
  margin: 0;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.attachment-actions {
  gap: 6px;
}

.attachment-action-groups {
  display: grid;
  gap: 7px;
}

.attachment-action-group {
  display: grid;
  gap: 6px;
}

.attachment-action-builders {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.attachment-action-files {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.attachment-action-files .delete-btn {
  grid-column: 1 / -1;
}

.attachment-actions button,
.attachment-upload-btn,
.attachment-action-group button {
  min-height: 34px;
  padding: 8px 10px;
  font-size: 13px;
}

.library-build-level-cell {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.library-build-level-cell select {
  min-height: 34px;
  padding-top: 7px;
  padding-bottom: 7px;
  padding-right: 38px;
  font-size: 13px;
}

.library-level-summary {
  color: #555;
  font-size: 12px;
  font-weight: 600;
}

.library-table-wrap .pdf-attachment-card {
  min-width: 0;
}

.library-table-wrap .attachment-action-group button {
  padding-left: 8px;
  padding-right: 8px;
}

.selected-library-pdf {
  margin: 10px 0 18px;
  font-size: 14px;
  color: #555;
}

.database-entry-grid {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(220px, 1.35fr) minmax(180px, 1fr) minmax(180px, 1fr) minmax(160px, 0.8fr);
  gap: 16px;
  align-items: start;
  margin-bottom: 16px;
}

.database-entry-grid label {
  display: grid;
  gap: 6px;
  margin: 0;
}

.database-entry-grid label span {
  color: #30445a;
  font-size: 13px;
  font-weight: 800;
}

.selected-excel-summary {
  display: block;
  margin-bottom: 8px;
  color: #12344f;
  font-weight: 700;
}

.selected-excel-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.selected-excel-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  padding: 6px 9px;
  border: 1px solid #c7d3df;
  border-radius: 6px;
  background: #f8fbff;
  color: #12344f;
  overflow-wrap: anywhere;
}

.selected-excel-chip span {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #17476f;
  color: white;
  font-size: 12px;
  font-weight: 700;
}

.storage-usage-card {
  margin: 16px 0;
  padding: 14px;
  border: 1px solid #d6e0ea;
  border-radius: 8px;
  background: #f8fbff;
}

header .storage-usage-card {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.storage-usage-label {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  font-size: 13.5px;
}

.storage-usage-label strong {
  color: #0b2d4d;
}

.storage-usage-label span,
.storage-usage-card p {
  color: #536170;
}

header .storage-usage-label strong,
header .storage-usage-label span,
header .storage-usage-card p {
  color: #ffffff;
}

.storage-usage-card p {
  margin: 8px 0 0;
  font-size: 13px;
}

.storage-usage-bar {
  height: 10px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #dce6ef;
}

header .storage-usage-bar {
  background: rgba(255, 255, 255, 0.26);
}

.storage-usage-bar span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: #0b2d4d;
  transition: width 0.2s ease;
}

header .storage-usage-bar span {
  background: #f2b880;
}

.storage-usage-card.warning .storage-usage-bar span {
  background: #a76600;
}

.storage-usage-card.danger .storage-usage-bar span {
  background: #a92727;
}

.login-modal-content {
  max-width: 420px;
}

.login-modal-content label {
  display: block;
  margin-top: 12px;
  margin-bottom: 6px;
  font-weight: 600;
}

.header-actions {
  margin-top: 18px;
  display: grid;
  gap: 12px;
  justify-items: center;
}

.database-header-actions {
  width: min(100%, 720px);
  margin: 20px auto 0;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto;
  align-items: center;
  justify-items: stretch;
  gap: 16px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.115);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 12px 28px rgba(6, 20, 34, 0.16);
  backdrop-filter: blur(2px);
}

.database-header-actions:has(.storage-usage-card.hidden) {
  width: auto;
  display: inline-grid;
  grid-template-columns: auto;
}

.database-header-actions:has(.storage-usage-card.hidden) .database-account-actions {
  padding-left: 0;
  border-left: 0;
}

.login-btn {
  background: #17476f;
  color: white;
  border: none;
  padding: 10px 18px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
}

.database-account-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  width: auto;
  min-width: 0;
  padding-left: 16px;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.database-account-actions .secondary {
  background: #ffffff;
  color: #0b2d4d;
  border-color: rgba(255, 255, 255, 0.85);
  box-shadow: 0 1px 2px rgba(6, 20, 34, 0.14);
}

.login-btn.account-email-pill {
  max-width: min(34vw, 320px);
  overflow: hidden;
  cursor: default;
  text-overflow: ellipsis;
  background: rgba(255, 255, 255, 0.11);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #ffffff;
  padding-left: 12px;
  padding-right: 12px;
}

.login-btn:hover {
  opacity: 0.9;
}

.login-btn.account-email-pill:hover {
  opacity: 1;
}

@media (max-width: 720px) {
  .database-header-actions {
    grid-template-columns: 1fr;
    width: min(100%, 520px);
    gap: 12px;
  }

  .database-account-actions {
    justify-content: center;
    padding-left: 0;
    padding-top: 12px;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
  }

  .login-btn.account-email-pill {
    max-width: min(72vw, 320px);
  }
}

.header-link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 20px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.03)),
    #17476f;
  box-shadow: 0 10px 22px rgba(6, 20, 34, 0.18);
  color: #ffffff;
  font-weight: 800;
  text-decoration: none;
  transition: transform 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
}

.header-link-btn:hover,
.header-link-btn:focus-visible {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.05)),
    #1e527d;
  box-shadow: 0 14px 28px rgba(6, 20, 34, 0.22);
  opacity: 1;
  outline: none;
  transform: translateY(-1px);
}

.hidden {
  display: none !important;
}

.page-preview-card {
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 14px;
  text-align: center;
}

.page-preview-card canvas {
  max-width: 100%;
  border: 1px solid #ccc;
}

.page-preview-label {
  font-weight: 600;
  margin-bottom: 8px;
}

.merge-order-row {
  display: grid;
  grid-template-columns: 1fr 80px;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}

.preview-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 16px;
}

.page-manager-modal-content {
  width: min(1320px, 98vw);
  max-height: 92vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.page-manager-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid #dce4ec;
}

.page-manager-header h2 {
  margin: 0;
}

.page-manager-header .warranty-status {
  margin: 6px 0 0;
}

.page-manager-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0;
  padding: 8px;
  border: 1px solid #dce4ec;
  border-radius: 8px;
  background: #f5f8fb;
}

.page-manager-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  margin: 0;
  padding: 10px 14px;
  line-height: 1;
  white-space: nowrap;
}

.page-manager-actions .remove-pdf-btn,
.page-manager-actions .delete-btn {
  padding: 10px 14px;
  background: #b42318;
}

.page-manager-actions .remove-pdf-btn:hover,
.page-manager-actions .delete-btn:hover {
  background: #8f1b13;
}

.page-manager-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
  gap: 18px;
  max-height: calc(92vh - 150px);
  overflow-y: auto;
  padding: 14px;
  border: 1px solid #dce4ec;
  border-radius: 8px;
  background: #f5f8fb;
}

.library-page-manager-modal {
  width: min(1320px, 98vw);
}

.library-page-manager-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr));
  gap: 18px;
}

.database-format-levels-layout {
  align-items: start;
  overflow: auto;
  padding-right: 4px;
}

.database-format-levels-layout .library-page-manager-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.page-manager-card {
  min-width: 0;
  border: 2px solid #c7d0d9;
  border-radius: 8px;
  padding: 10px;
  background: white;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(15, 36, 54, 0.08);
}

.page-manager-card.selected {
  border-color: #0b2d4d;
  background: #e8eef4;
}

.page-manager-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-weight: 600;
}

.page-manager-card canvas {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #d8dde2;
  background: white;
}

.converter-upload-grid,
.tool-upload-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  margin-top: 16px;
}

.upload-panel h3 {
  margin-top: 0;
}

.count-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #e8eef4;
  color: #0b2d4d;
  font-size: 13px;
  font-weight: 600;
  vertical-align: middle;
  white-space: nowrap;
}

.converter-drop-zone {
  min-height: 190px;
}

.converter-drop-zone p {
  margin: 4px 0;
}

.converter-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.converter-section-heading h2 {
  margin: 0;
}

.converter-preview-modal-content {
  width: 98vw;
  max-width: 1600px;
}

.converter-preview-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: 16px;
  align-items: start;
}

.converter-preview-main {
  min-width: 0;
}

.converter-preview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.converter-preview-jump-list {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  margin: 10px 0 12px;
  padding: 8px;
  border: 1px solid #d6e0ea;
  border-radius: 8px;
  background: #f8fbff;
}

.converter-preview-jump-list:empty {
  display: none;
}

.converter-placement-editor {
  position: sticky;
  top: 12px;
  align-self: start;
  display: grid;
  gap: 12px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  margin: 10px 0 12px;
  padding: 14px;
  border: 1px solid #d6e0ea;
  border-radius: 8px;
  background: linear-gradient(180deg, #f8fbff 0%, #eef6fb 100%);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
}

.converter-placement-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.converter-placement-summary span,
.converter-placement-group > span,
.converter-placement-values {
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.converter-placement-summary span {
  text-transform: uppercase;
}

.converter-placement-summary strong {
  color: #12344f;
}

.converter-editor-empty,
.converter-editor-header {
  display: grid;
  gap: 5px;
}

.converter-editor-empty span,
.converter-editor-header span,
.converter-editor-label {
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.converter-editor-empty strong,
.converter-editor-header strong {
  color: #12344f;
}

.converter-editor-empty p,
.converter-editor-note {
  margin: 0;
  color: #536170;
  font-size: 13px;
  line-height: 1.35;
}

.converter-editor-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid #cbd8e5;
  border-radius: 8px;
  background: white;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}

.converter-editor-before,
.converter-editor-after {
  min-height: 34px;
  width: 100%;
  box-sizing: border-box;
  padding: 7px 9px;
  border-radius: 6px;
  overflow-wrap: anywhere;
  text-align: center;
}

.converter-editor-before {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed #f472b6;
  background: #fff1f7;
  color: #9d174d;
  text-decoration: line-through;
  font-weight: 700;
}

.converter-editor-after {
  border: 1px solid #67c7d8;
  background: #ecfeff;
  color: #0e7490;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
}

.converter-placement-controls {
  display: grid;
  gap: 8px;
}

.converter-placement-group {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid #dbe5ee;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
}

.converter-placement-group > span {
  text-align: center;
}

.converter-nudge-grid {
  display: grid;
  grid-template-areas:
    ". up ."
    "left . right"
    ". down .";
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.converter-nudge-up {
  grid-area: up;
}

.converter-nudge-left {
  grid-area: left;
}

.converter-nudge-right {
  grid-area: right;
}

.converter-nudge-down {
  grid-area: down;
}

.converter-button-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.converter-cover-row + .converter-cover-row {
  margin-top: 2px;
}

.converter-placement-editor button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  width: 100%;
  padding: 7px 10px;
  border: 1px solid #b7cadc;
  border-radius: 6px;
  background: linear-gradient(180deg, #ffffff 0%, #f4f8fc 100%);
  color: #12344f;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.converter-placement-editor button:hover {
  border-color: #0e7490;
  background: #ecfeff;
  box-shadow: 0 0 0 2px rgba(14, 116, 144, 0.12);
}

.converter-placement-editor button:active {
  transform: translateY(1px);
}

.converter-placement-reset {
  min-height: 36px;
  margin-top: 2px;
}

.converter-preview-jump-list > span:first-child {
  flex: 0 0 auto;
  color: #466275;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.converter-preview-jump-list button,
.converter-page-jump-btn,
.converter-change-preview-btn {
  border: 1px solid #b8c8d8;
  border-radius: 6px;
  background: #eef5fb;
  color: #12344f;
  font-weight: 700;
  cursor: pointer;
}

.converter-jump-chip {
  display: inline-flex;
  align-items: stretch;
  flex: 0 0 auto;
}

.converter-jump-chip > button:first-child {
  flex: 0 0 auto;
  display: inline-grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: center;
  padding: 7px 9px;
  white-space: nowrap;
  border-radius: 6px 0 0 6px;
}

.converter-jump-chip > button:only-child {
  border-radius: 6px;
}

.converter-jump-unselect,
.converter-jump-select {
  padding: 7px 9px;
  border-left: 0;
  border-radius: 0 6px 6px 0;
}

.converter-jump-unselect {
  background: #fff7ed;
  color: #9a3412;
}

.converter-jump-select {
  background: #ecfdf5;
  color: #047857;
}

.converter-jump-chip.unselected > button:first-child {
  opacity: 0.62;
  text-decoration: none;
}

.converter-jump-chip.active > button {
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.16);
}

.converter-jump-chip.active .converter-jump-select,
.converter-jump-chip.active .converter-jump-unselect {
  font-weight: 800;
}

.converter-jump-chip:hover > button:first-child {
  background: #e8f0ff;
}

.converter-jump-page {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  background: #17476f;
  color: white;
  font-size: 12px;
}

.converter-jump-change {
  display: inline-grid;
  gap: 2px;
  text-align: left;
}

.converter-jump-change span:first-child {
  color: #64748b;
  font-size: 11px;
  text-decoration: line-through;
}

.converter-jump-change span:last-child {
  color: #12344f;
  font-size: 12px;
}

.converter-page-jump-btn {
  min-width: 38px;
  padding: 6px 8px;
}

.converter-change-preview-btn {
  width: 100%;
  padding: 7px 9px;
}

.converter-preview-page-wrap {
  position: relative;
  margin-bottom: 16px;
  line-height: 0;
}

.converter-preview-page {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #ccc;
  background: white;
}

.converter-preview-highlight {
  position: absolute;
  z-index: 5;
  padding: 0;
  border: 2px solid rgba(219, 39, 119, 0.85);
  border-radius: 4px;
  background: rgba(244, 114, 182, 0.2);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9);
  cursor: pointer;
  transform-origin: left top;
}

.converter-preview-highlight.after {
  border-color: rgba(14, 116, 144, 0.9);
  background: rgba(34, 211, 238, 0.18);
}

.converter-preview-highlight.text-fit {
  border-color: rgba(21, 94, 117, 0.95);
  background: rgba(34, 211, 238, 0.12);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 0 0 4px rgba(14, 116, 144, 0.18);
}

.converter-preview-highlight.focused {
  border-color: #7c3aed;
  background: rgba(124, 58, 237, 0.26);
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.22);
}

.converter-preview-highlight.unselected {
  border-color: rgba(100, 116, 139, 0.8);
  background: rgba(148, 163, 184, 0.14);
  opacity: 0.45;
}

.converter-preview-highlight:hover {
  border-color: #7c3aed;
  background: rgba(124, 58, 237, 0.18);
}

.converter-draft-cover,
.converter-draft-box-sizing,
.converter-draft-text {
  position: absolute;
  pointer-events: none;
}

.converter-draft-cover {
  z-index: 2;
  border-radius: 2px;
  box-shadow: 0 0 0 0.5px rgba(15, 23, 42, 0.04);
}

.converter-draft-box-sizing {
  z-index: 4;
  border: 1px dashed rgba(124, 58, 237, 0.95);
  border-radius: 3px;
  background: transparent;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.75), 0 0 0 4px rgba(124, 58, 237, 0.12);
}

.converter-draft-text {
  z-index: 3;
  display: inline-block;
  max-width: 220px;
  padding: 0 1px;
  color: #111827;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  white-space: nowrap;
  transform-origin: left bottom;
}

.upload-drop-zone {
  min-height: 190px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}

.upload-drop-zone p {
  margin: 4px 0;
}

.upload-drop-zone.dragover {
  border-color: #0b2d4d;
  background: #eef5fb;
}

.merge-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.merge-toolbar input {
  flex: 1;
}

.merge-btn {
  margin-left: auto;
  white-space: nowrap;
}

.library-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}

.library-card-header > div:first-child {
  flex: 1;
  min-width: 260px;
}

.library-merge-actions {
  margin-left: auto;
  display: grid;
  grid-template-columns: minmax(220px, 1fr);
  gap: 8px;
  width: min(100%, 860px);
}

.library-merge-actions input {
  width: 100%;
  min-width: 0;
}

.library-merge-buttons {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.library-merge-actions button,
.library-merge-buttons button {
  white-space: nowrap;
  min-width: 0;
  width: 100%;
  padding-inline: 12px;
}

.database-upload-card h2,
.library-card-header h2 {
  margin-top: 0;
}

.card-intro {
  margin-top: -4px;
  color: #536170;
  line-height: 1.45;
}

.history-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}

.history-card-header h2 {
  margin-top: 0;
}

.packet-history-list {
  display: grid;
  gap: 10px;
}

.packet-history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px;
  border: 1px solid #d8e0e8;
  border-radius: 8px;
  background: #f8fbff;
}

.packet-history-info {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.packet-history-info strong {
  color: #0b2d4d;
  overflow-wrap: anywhere;
}

.packet-history-info span {
  color: #536170;
  font-size: 13px;
}

.packet-history-actions {
  flex: 0 0 auto;
  margin-top: 0;
}

@media (max-width: 760px) {
  .history-card-header,
  .packet-history-row {
    flex-direction: column;
    align-items: stretch;
  }

  .packet-history-actions {
    justify-content: flex-start;
  }
}

.library-filters {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(210px, 260px);
  gap: 12px;
  margin-bottom: 16px;
}

.library-filters input,
.library-filters select {
  min-height: 42px;
}

.library-table-wrap {
  overflow-x: auto;
  border: 1px solid #d8e0e8;
  border-radius: 8px;
}

.library-table-wrap table {
  margin: 0;
  min-width: 1180px;
  table-layout: fixed;
}

.library-table-wrap th:nth-child(1),
.library-table-wrap td:nth-child(1) {
  width: 60px;
}

.library-table-wrap th:nth-child(2),
.library-table-wrap td:nth-child(2) {
  width: 84px;
}

.library-table-wrap th:nth-child(3),
.library-table-wrap td:nth-child(3) {
  width: 250px;
}

.library-table-wrap th:nth-child(4),
.library-table-wrap td:nth-child(4) {
  width: 165px;
}

.library-table-wrap th:nth-child(5),
.library-table-wrap td:nth-child(5) {
  width: 150px;
}

.library-table-wrap th:nth-child(6),
.library-table-wrap td:nth-child(6) {
  width: 165px;
}

.library-table-wrap th:nth-child(7),
.library-table-wrap td:nth-child(7) {
  width: 120px;
}

.library-table-wrap th:nth-child(8),
.library-table-wrap td:nth-child(8) {
  width: 150px;
}

.library-table-wrap th:nth-child(9),
.library-table-wrap td:nth-child(9) {
  width: 236px;
}

.library-table-wrap th {
  background: #edf3f8;
}

.library-table-wrap td {
  vertical-align: top;
}

.library-table-wrap input,
.library-table-wrap select {
  width: 100%;
  min-width: 0;
}

.library-category-tables {
  display: grid;
  gap: 12px;
}

.library-category-section {
  border: 1px solid #d8e0e8;
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff;
}

.library-category-section summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px 14px;
  cursor: pointer;
  background: #edf3f8;
  color: #0b2d4d;
  font-weight: 800;
}

.library-category-section summary strong {
  color: #536170;
  font-size: 13px;
}

.library-category-section .library-table-wrap {
  border: 0;
  border-top: 1px solid #d8e0e8;
  border-radius: 0;
}

.library-empty-category {
  margin: 0;
  padding: 16px;
  color: #536170;
  font-size: 13px;
  font-weight: 700;
}

@media (max-width: 760px) {
  .database-entry-grid {
    grid-template-columns: 1fr;
  }

  .library-card-header {
    display: grid;
  }

  .library-merge-actions {
    margin-left: 0;
    width: 100%;
  }

  .library-merge-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .library-filters {
    grid-template-columns: 1fr;
  }
}

table th {
  position: sticky;
  top: 0;
  z-index: 2;
}

tbody tr:nth-child(even) {
  background: rgba(0, 0, 0, 0.03);
}

tbody tr:hover {
  background: rgba(39, 94, 254, 0.08);
}

details summary {
  cursor: pointer;
  padding: 8px 0;
  font-size: 16px;
}

details summary:hover {
  color: #17476f;
}

.build-options-card {
  margin: 14px 0 18px;
  padding: 14px;
  border: 1px solid #d6e0ea;
  border-radius: 8px;
  background: #f8fbff;
}

.build-options-header {
  display: grid;
  gap: 4px;
  margin-bottom: 12px;
}

.build-options-header span {
  color: #4c5661;
  font-size: 14px;
}

.export-options {
  display: grid;
  gap: 10px;
}

.export-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid #ccd5df;
  border-radius: 8px;
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  cursor: pointer;
  transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.export-option:hover {
  border-color: var(--ns-primary-border);
  background:
    linear-gradient(180deg, #ffffff 0%, #eef5fb 100%);
  box-shadow: 0 8px 18px rgba(11, 45, 77, 0.14);
  transform: translateY(-1px);
}

.export-option:has(input:checked) {
  border-color: rgba(255, 255, 255, 0.28);
  background:
    linear-gradient(180deg, #ffffff 0%, var(--ns-primary-soft) 100%);
  box-shadow: inset 4px 0 0 var(--ns-primary-hover), inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 1px 1px rgba(15, 23, 42, 0.06);
}

.export-option:has(input:checked):hover {
  box-shadow: inset 4px 0 0 var(--ns-primary-hover), inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 8px 18px rgba(11, 45, 77, 0.14);
}

.export-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.export-option div {
  min-width: 0;
}

.export-option small {
  display: block;
  margin-top: 3px;
  color: #4c5661;
}

.uploaded-pdf-section {
  display: grid;
  gap: 4px;
  margin-top: 8px;
  font-size: 13px;
  color: #4c5661;
}

.uploaded-pdf-section select {
  max-width: 320px;
}

.section-order-group {
  border: 1px solid #d6e0ea;
  border-radius: 8px;
  margin-bottom: 10px;
  background: #f8fbff;
}

.section-order-group summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  cursor: pointer;
}

.section-order-list {
  display: grid;
  gap: 8px;
  padding: 0 12px 12px;
}
.app-prompt-modal-content {
  width: 480px;
}

.app-prompt-message {
  margin: 10px 0 18px;
  white-space: pre-line;
  color: #3d4b5b;
  font-size: 14px;
  line-height: 1.5;
}

.app-prompt-input-group {
  display: grid;
  gap: 8px;
  margin: 16px 0;
}

.app-prompt-input-group.hidden {
  display: none;
}

.app-prompt-actions {
  justify-content: flex-end;
}

.parts-message-modal-content {
  max-width: min(92vw, 520px);
}

.parts-message-modal-content .button-row {
  justify-content: flex-end;
}

.parts-message-modal-content .hidden {
  display: none;
}
.converter-part-edit-input {
  width: 150px;
  max-width: 100%;
}

.converter-change-select {
  width: 100%;
  min-width: 180px;
}

.converter-muted {
  color: #64748b;
  font-size: 13px;
}

.converter-after-edit-panel {
  margin: 10px 0 16px;
  padding: 10px;
  border: 1px solid #d6e0ea;
  border-radius: 8px;
  background: #f8fbff;
}

.converter-after-edit-header {
  margin-bottom: 8px;
  font-weight: 700;
}

.converter-after-edit-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 8px;
}

.history-header-actions {
  justify-content: flex-end;
  margin-top: 0;
}


.converter-preview-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.converter-ocr-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #40576c;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.converter-ocr-option input {
  width: auto;
  margin: 0;
}

.converter-ocr-option span {
  color: #8a2d20;
  font-weight: 600;
}

.converter-progress {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid #bfd0e0;
  border-left: 4px solid #2875b8;
  border-radius: 8px;
  background: #f7fbff;
}

.converter-progress.hidden {
  display: none;
}

.packet-build-progress {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid #bfd0e0;
  border-left: 4px solid #2875b8;
  border-radius: 8px;
  background: #f7fbff;
}

.packet-build-progress.hidden {
  display: none;
}

.packet-build-current,
.packet-preview-progress {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.packet-build-current > span {
  color: #263f55;
  font-weight: 600;
}

.packet-build-elapsed {
  flex: 0 0 auto;
  min-width: 58px;
  color: #075f72;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.packet-build-messages {
  margin-top: 8px;
  color: #526579;
  font-size: 12px;
}

.packet-build-messages summary {
  cursor: pointer;
  font-weight: 700;
}

.packet-build-messages ol {
  display: grid;
  gap: 5px;
  max-height: 180px;
  margin: 8px 0 0;
  padding-left: 24px;
  overflow: auto;
}

.packet-build-messages time {
  display: inline-block;
  width: 46px;
  color: #075f72;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.packet-download-retry {
  margin-top: 10px;
}

.packet-download-retry.hidden {
  display: none;
}

.packet-preview-progress .warranty-status {
  flex: 1 1 auto;
}

.converter-progress-current,
.converter-modal-progress {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.converter-progress-current > span {
  color: #263f55;
  font-weight: 600;
}

.converter-elapsed-time {
  flex: 0 0 auto;
  min-width: 58px;
  color: #075f72;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.converter-message-details {
  margin-top: 8px;
  color: #526579;
  font-size: 12px;
}

.converter-message-details summary {
  cursor: pointer;
  font-weight: 700;
}

.converter-message-details ol {
  display: grid;
  gap: 5px;
  max-height: 180px;
  margin: 8px 0 0;
  padding-left: 24px;
  overflow: auto;
}

.converter-message-details li {
  padding-left: 4px;
}

.converter-message-details time {
  display: inline-block;
  width: 46px;
  color: #075f72;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.converter-modal-progress .warranty-status {
  flex: 1 1 auto;
}

.converter-modal-progress .converter-elapsed-time:empty {
  display: none;
}

.converter-mapping-help {
  margin: -2px 0 10px;
  color: #526579;
  font-size: 13px;
}

.converter-mapping-review-card {
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid #c8d7e5;
  border-radius: 8px;
  background: #ffffff;
}

.converter-mapping-number-grid {
  display: grid;
  grid-template-columns: minmax(150px, 0.9fr) 42px minmax(180px, 1.1fr);
  gap: 12px;
  align-items: stretch;
}

.converter-mapping-number-grid > div,
.converter-mapping-number-grid label,
.converter-mapping-description {
  display: grid;
  gap: 4px;
}

.converter-mapping-label {
  color: #526579;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.converter-mapping-number {
  min-width: 0;
  padding: 10px 12px;
  border-radius: 7px;
}

.converter-mapping-old-number {
  border: 1px solid #f1c5cf;
  background: #fff7f9;
}

.converter-mapping-old-number strong {
  color: #8f1635;
  font-size: 16px;
  overflow-wrap: anywhere;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.converter-mapping-new-number {
  border: 1px solid #9fd4df;
  background: #f0fbfd;
}

.converter-mapping-new-number input {
  width: 100%;
  min-width: 0;
  border-color: #62b9ca;
  color: #075f72;
  font-size: 16px;
  font-weight: 700;
}

.converter-mapping-arrow {
  display: grid;
  place-items: center;
  color: #2563eb;
  font-size: 26px;
  font-weight: 800;
}

.converter-mapping-description {
  padding-top: 8px;
  border-top: 1px solid #e3eaf1;
  color: #263746;
}

.converter-master-description {
  color: #17476f;
}

.converter-mapping-source {
  color: #64748b;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.converter-after-edit-row {
  display: grid;
  grid-template-columns: minmax(80px, 0.8fr) minmax(120px, 1fr);
  gap: 8px;
  align-items: center;
}
.converter-page-change-row td {
  vertical-align: middle;
}

.converter-row-toggle {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid #b8c8d8;
  border-radius: 6px;
  background: #eef5fb;
  color: #12344f;
  font-weight: 700;
  cursor: pointer;
}

.converter-row-toggle-arrow {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
  transition: transform 0.2s ease;
}

.converter-row-toggle.open .converter-row-toggle-arrow {
  transform: rotate(180deg);
}

.converter-page-detail-row > td {
  padding: 0;
  background: #f8fbff;
}

.converter-page-change-list {
  display: grid;
  gap: 8px;
  max-width: 820px;
  margin: 0 auto;
  padding: 12px;
  border-top: 1px solid #d6e0ea;
}

.converter-page-change-heading,
.converter-page-change-edit {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) minmax(130px, 1fr) minmax(160px, 1.4fr);
  gap: 10px;
  align-items: center;
  justify-items: center;
  text-align: center;
}

.converter-page-change-heading {
  color: #466275;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.converter-page-change-edit span,
.converter-page-change-heading span,
.converter-after-edit-row span {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 620px) {
  .converter-preview-layout {
    grid-template-columns: 1fr;
  }

  .converter-placement-editor {
    position: static;
    max-height: none;
  }

  .converter-preview-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .converter-page-change-heading,
  .converter-page-change-edit,
  .converter-after-edit-row {
    grid-template-columns: 1fr;
  }

  .converter-after-edit-list,
  .converter-mapping-number-grid {
    grid-template-columns: 1fr;
  }

  .converter-mapping-arrow {
    display: none;
  }
}







.converter-master-note {
  color: #2563eb;
  font-size: 0.85rem;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Shared application polish: spacing, controls, feedback, and motion

   This intentionally follows the feature styles above. It is the final shared
   theme layer, so moving it earlier would change the cascade.
   -------------------------------------------------------------------------- */
:root {
  --ns-bg: #f4f6f8;
  --ns-bg-strong: #e8eef4;
  --ns-surface: #ffffff;
  --ns-surface-soft: #f8fbff;
  --ns-surface-muted: #f9f9f9;
  --ns-border: #dddddd;
  --ns-border-strong: #cccccc;
  --ns-text: #222222;
  --ns-muted: #555555;
  --ns-primary: #0b2d4d;
  --ns-primary-hover: #17476f;
  --ns-primary-soft: #eef5fb;
  --ns-primary-border: #9db4c8;
  --ns-danger: #b42318;
  --ns-danger-hover: #8f1b13;
  --ns-danger-soft: #fff1f0;
  --ns-success: #0f766e;
  --ns-warning: #b45309;
  --ns-info: #1d4ed8;
  --ns-radius: 8px;
  --ns-radius-sm: 6px;
  --ns-shadow-card: 0 1px 2px rgba(15, 23, 42, 0.06), 0 10px 24px rgba(15, 23, 42, 0.07);
  --ns-shadow-hover: 0 2px 4px rgba(15, 23, 42, 0.08), 0 14px 28px rgba(15, 23, 42, 0.09);
  --ns-focus: 0 0 0 3px rgba(23, 71, 111, 0.22);
}

* {
  box-sizing: border-box;
}

html {
  scrollbar-color: #8ba0b5 #e5ebf2;
}

body {
  font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.45;
  background: var(--ns-bg);
  color: var(--ns-text);
}

header {
  padding: 30px 32px 32px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 4px 16px rgba(7, 22, 36, 0.16);
}

header h1,
header p,
header .header-actions {
  position: relative;
  z-index: 1;
  margin-left: auto;
  margin-right: auto;
  max-width: 1120px;
}

header h1 {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: clamp(30px, 2.3vw, 40px);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.08;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

header p {
  margin-top: 0;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 15.5px;
  font-weight: 400;
}

@media (max-width: 720px) {
  header {
    padding: 26px 18px 28px;
  }

  header h1 {
    font-size: 30px;
  }
}

main {
  width: min(1480px, calc(100% - 32px));
  max-width: none;
  margin: 20px auto 36px;
  padding: 0;
}

h1,
h2,
h3 {
  letter-spacing: 0;
}

h2 {
  margin: 0 0 12px;
  color: var(--ns-text);
  font-size: 19px;
  line-height: 1.25;
}

h3 {
  margin: 16px 0 10px;
  color: var(--ns-text);
  font-size: 15px;
  line-height: 1.3;
}

p,
label,
summary,
td,
th,
li {
  color: inherit;
}

label {
  display: inline-block;
  margin-bottom: 6px;
  color: #26384a;
  font-size: 13px;
  font-weight: 650;
}

.card,
.home-feature,
.uploaded-pdf-row,
.packet-history-row,
.order-row,
.page-manager-card,
.pdf-page-preview,
.toc-template-picker,
.toc-template-preview-panel,
.subsection-entry,
.section-order-group,
.converter-placement-editor,
.converter-preview-item,
.database-card,
.saved-packet-card {
  border: 1px solid var(--ns-border);
  border-radius: var(--ns-radius);
  background: var(--ns-surface);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.card {
  padding: 18px;
  margin-bottom: 16px;
  box-shadow: var(--ns-shadow-card);
}

.card > :first-child,
.modal-content > :first-child {
  margin-top: 0;
}

.card > :last-child,
.modal-content > :last-child {
  margin-bottom: 0;
}

.grid {
  gap: 14px;
}

.button-row,
.template-info,
.builder-history-controls,
.toc-template-table-actions,
.toc-tree-actions,
.preview-build-actions {
  gap: 10px;
  align-items: center;
}

.table-action-buttons button,
.toc-template-table-actions button,
.toc-tree-actions button,
.preview-build-actions button,
.builder-history-controls button {
  min-height: 34px;
  padding: 7px 11px;
}

button,
.attach-pdf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 9px 15px;
  border: 1px solid rgba(11, 45, 77, 0.18);
  border-radius: var(--ns-radius-sm);
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.2;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0)),
    var(--ns-primary);
  color: #ffffff;
  box-shadow: 0 1px 1px rgba(6, 20, 34, 0.12);
  transition: background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, color 0.16s ease, transform 0.16s ease;
  user-select: none;
}

button:hover,
.attach-pdf-btn:hover {
  border-color: rgba(11, 45, 77, 0.28);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.02)),
    var(--ns-primary-hover);
  box-shadow: 0 8px 18px rgba(11, 45, 77, 0.18);
  transform: translateY(-1px);
}

button:active,
.attach-pdf-btn:active {
  transform: translateY(0);
  box-shadow: none;
}

button:disabled,
button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.58;
  transform: none;
  box-shadow: none;
}

.secondary,
button.secondary {
  border: 1px solid #c7d3df;
  background:
    linear-gradient(180deg, #ffffff 0%, var(--ns-primary-soft) 100%);
  color: var(--ns-primary);
  box-shadow: 0 1px 1px rgba(15, 23, 42, 0.06);
}

.secondary:hover,
button.secondary:hover {
  border-color: var(--ns-primary-border);
  background:
    linear-gradient(180deg, #ffffff 0%, #e7f0f8 100%);
  color: var(--ns-primary);
}

.delete-btn,
.remove-pdf-btn,
button.danger {
  border-color: rgba(180, 35, 24, 0.22);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0)),
    var(--ns-danger);
  color: #ffffff;
}

.delete-btn:hover,
.remove-pdf-btn:hover,
button.danger:hover {
  border-color: rgba(180, 35, 24, 0.3);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.02)),
    var(--ns-danger-hover);
}

button:focus-visible,
.attach-pdf-btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
a:focus-visible {
  outline: none;
  box-shadow: var(--ns-focus);
}

input,
select,
textarea {
  min-height: 40px;
  padding: 9px 11px;
  border: 1px solid #c6d1dc;
  border-radius: var(--ns-radius-sm);
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  color: var(--ns-text);
  font: inherit;
  font-size: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease, transform 0.16s ease;
}

select {
  padding-right: 42px;
  appearance: none;
  cursor: pointer;
  background:
    linear-gradient(45deg, transparent 50%, #17476f 50%) calc(100% - 22px) 50% / 7px 7px no-repeat,
    linear-gradient(135deg, #17476f 50%, transparent 50%) calc(100% - 16px) 50% / 7px 7px no-repeat,
    linear-gradient(90deg, transparent calc(100% - 40px), #eef5fb calc(100% - 40px), #eef5fb 100%),
    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

textarea {
  line-height: 1.45;
  resize: vertical;
}

input:hover,
select:hover,
textarea:hover {
  border-color: var(--ns-primary-border);
  background-color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 4px 12px rgba(11, 45, 77, 0.08);
}

select:hover {
  background:
    linear-gradient(45deg, transparent 50%, #0b2d4d 50%) calc(100% - 22px) 50% / 7px 7px no-repeat,
    linear-gradient(135deg, #0b2d4d 50%, transparent 50%) calc(100% - 16px) 50% / 7px 7px no-repeat,
    linear-gradient(90deg, transparent calc(100% - 40px), #e4eef7 calc(100% - 40px), #e4eef7 100%),
    linear-gradient(180deg, #ffffff 0%, #f6faff 100%);
}

select:focus-visible {
  background:
    linear-gradient(45deg, transparent 50%, #0b2d4d 50%) calc(100% - 22px) 50% / 7px 7px no-repeat,
    linear-gradient(135deg, #0b2d4d 50%, transparent 50%) calc(100% - 16px) 50% / 7px 7px no-repeat,
    linear-gradient(90deg, transparent calc(100% - 40px), #e4eef7 calc(100% - 40px), #e4eef7 100%),
    linear-gradient(180deg, #ffffff 0%, #f6faff 100%);
}

input::placeholder,
textarea::placeholder {
  color: #7b8794;
}

input:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed;
  border-color: #d9e1e8;
  background: #eef2f6;
  color: #7b8794;
}

input[type="checkbox"],
input[type="radio"] {
  width: 18px;
  min-height: 18px;
  height: 18px;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  accent-color: var(--ns-primary-hover);
  cursor: pointer;
}

input[type="checkbox"]:hover,
input[type="radio"]:hover,
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  background: transparent;
  transform: none;
}

input[type="file"] {
  min-height: auto;
  padding: 8px;
  background: #ffffff;
}

input[type="file"]::file-selector-button {
  margin-right: 10px;
  padding: 8px 12px;
  border: 1px solid rgba(11, 45, 77, 0.18);
  border-radius: var(--ns-radius-sm);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0)),
    var(--ns-primary);
  color: #ffffff;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}

input[type="file"]::file-selector-button:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.02)),
    var(--ns-primary-hover);
}

table {
  overflow: hidden;
  border: 1px solid #d8e2eb;
  border-radius: var(--ns-radius);
  border-collapse: separate;
  border-spacing: 0;
  background: var(--ns-surface);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

th,
td {
  border: 0;
  border-bottom: 1px solid var(--ns-border);
  padding: 9px 10px;
}

th {
  background:
    linear-gradient(180deg, #edf4fa 0%, #e3ecf5 100%);
  color: #26384a;
  font-size: 12px;
  font-weight: 750;
  text-align: left;
  text-transform: uppercase;
}

tr:nth-child(even) {
  background: #fafcff;
}

tr:hover {
  background: #f3f8fd;
}

.drop-zone,
.import-drop-zone {
  border-width: 2px;
  border-color: #9db4c8;
  background:
    linear-gradient(180deg, #ffffff 0%, #f4f9fd 100%);
  color: #26384a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.drop-zone.dragover,
.import-drop-zone.dragover {
  border-color: var(--ns-primary-hover);
  background:
    linear-gradient(180deg, #ffffff 0%, #eaf4ff 100%);
  box-shadow: inset 0 0 0 1px rgba(23, 71, 111, 0.18), 0 12px 24px rgba(11, 45, 77, 0.14);
  transform: translateY(-1px);
}

.uploaded-pdf-row,
.packet-history-row,
.order-row,
.page-manager-card,
.pdf-page-preview,
.subsection-entry,
.converter-preview-item,
.saved-packet-card {
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease, transform 0.16s ease;
}

.uploaded-pdf-row:hover,
.packet-history-row:hover,
.order-row:hover,
.page-manager-card:hover,
.pdf-page-preview:hover,
.subsection-entry:hover,
.converter-preview-item:hover,
.saved-packet-card:hover {
  border-color: #a9bad0;
  box-shadow: var(--ns-shadow-hover);
}

.uploaded-pdf-row {
  gap: 14px;
  align-items: flex-start;
  padding: 12px 14px;
}

.uploaded-pdf-name,
.packet-history-title,
.toc-tree-title {
  color: var(--ns-text);
  font-weight: 750;
}

.uploaded-pdf-title,
.subsection-count,
.builder-history-status,
.toc-tree-meta,
.toc-tree-empty,
.converter-master-note {
  color: var(--ns-muted);
}

.order-row {
  padding: 9px 10px;
  cursor: grab;
}

.order-row.dragging {
  opacity: 0.76;
  cursor: grabbing;
  box-shadow: 0 10px 24px rgba(11, 45, 77, 0.18);
  transform: scale(0.996);
}

.drag-handle {
  color: #6e8195;
}

.modal {
  background: rgba(15, 23, 42, 0.48);
  backdrop-filter: blur(2px);
}

.modal-content {
  border: 1px solid rgba(184, 198, 213, 0.82);
  border-radius: var(--ns-radius);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.24);
  animation: ns-modal-in 0.16s ease-out;
}

@keyframes ns-modal-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.99);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.warranty-status,
.builder-history-status,
.subsection-page-selection-status,
.toc-template-page-status,
.preview-build-status,
.converter-status,
.database-status {
  border-left: 3px solid #7f9ab7;
  border-radius: var(--ns-radius-sm);
  background: var(--ns-surface-muted);
  padding: 8px 10px;
  color: var(--ns-muted);
}

.warranty-status:empty,
.builder-history-status:empty,
.subsection-page-selection-status:empty,
.toc-template-page-status:empty,
.preview-build-status:empty,
.converter-status:empty,
.database-status:empty {
  display: none;
}

.toc-entry-missing-page,
.toc-template-page-error {
  color: var(--ns-danger);
}

.toc-tree-list {
  gap: 10px;
}

.toc-tree-row {
  grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: 10px;
  margin-left: calc(var(--toc-level) * 28px);
  border-color: var(--ns-border);
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease, transform 0.16s ease;
}

.toc-tree-row::before {
  border-left-color: #d4dde7;
}

.toc-tree-row::after {
  background: #d4dde7;
}

.toc-tree-row:hover {
  border-color: #c7d4e2;
  background: #f8fbff;
  box-shadow: 0 6px 16px rgba(11, 45, 77, 0.09);
}

.toc-tree-row-attention {
  border-color: #f59e0b;
  background: #fff8ed;
}

.toc-tree-level-badge {
  border-color: #d4dde7;
  background: #f8fbff;
  color: var(--ns-primary);
}

.toc-tree-actions {
  opacity: 0.88;
  transition: opacity 0.16s ease;
}

.toc-tree-row:hover .toc-tree-actions,
.toc-tree-row:focus-within .toc-tree-actions {
  opacity: 1;
}

.toc-template-table-row,
.converter-preview-row,
.database-row {
  transition: background-color 0.16s ease;
}

.final-preview-frame,
.converter-preview-frame,
.pdf-viewer-frame,
.preview-build-viewer {
  border-color: var(--ns-border);
  border-radius: var(--ns-radius);
  background: #f3f6fa;
}

.side-menu {
  box-shadow: 0 18px 42px rgba(6, 20, 34, 0.24);
}

.hamburger {
  border-radius: var(--ns-radius-sm);
  box-shadow: 0 8px 18px rgba(11, 45, 77, 0.22);
}

details {
  transition: background-color 0.16s ease, border-color 0.16s ease;
}

summary {
  cursor: pointer;
  border-radius: var(--ns-radius-sm);
}

@media (max-width: 900px) {
  main {
    width: min(100% - 20px, 1480px);
    margin-top: 14px;
  }

  .card,
  .modal-content {
    padding: 14px;
  }

  .toc-tree-row {
    margin-left: calc(var(--toc-level) * 16px);
  }
}

@media (max-width: 620px) {
  header {
    padding: 18px 16px;
  }

  .button-row {
    align-items: stretch;
  }

  .button-row > button,
  .button-row > .attach-pdf-btn {
    flex: 1 1 150px;
  }

  .uploaded-pdf-row {
    align-items: stretch;
  }
}


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

/* Parts Library */
.parts-db-page {
  display: grid;
  gap: 18px;
}

.parts-login-locked > section {
  opacity: 0.45;
  pointer-events: none;
}

.parts-login-locked #partsLoginModal {
  opacity: 1;
  pointer-events: auto;
}

.parts-import-card,
.parts-list-card,
.parts-db-toolbar-card {
  display: grid;
  gap: 16px;
}

.parts-status-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.parts-status-row .warranty-status {
  flex: 1;
}

.parts-status-row button {
  width: auto;
  white-space: nowrap;
}

.parts-local-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
}

.parts-list-heading {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: start;
}

.parts-list-heading h2 {
  margin-bottom: 4px;
}

.parts-import-card .tool-upload-grid {
  align-items: stretch;
}

.parts-import-card .upload-panel {
  display: grid;
  align-content: start;
  gap: 10px;
}

.parts-import-card .drop-zone {
  min-height: 178px;
}

.drop-zone.drag-over {
  border-color: #0f3a5d;
  background: #eef6ff;
  box-shadow: 0 0 0 3px rgba(15, 58, 93, 0.12);
}

.parts-db-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1.4fr) minmax(170px, 0.55fr) minmax(190px, 0.65fr);
  gap: 12px;
  align-items: end;
}

.parts-db-toolbar label,
.parts-edit-fields label,
.parts-edit-destination,
.parts-column-mapping label {
  display: grid;
  gap: 6px;
  font-weight: 700;
}

.parts-db-toolbar input,
.parts-db-toolbar select,
.parts-edit-fields input,
.parts-edit-fields textarea,
.parts-edit-destination select,
.parts-column-mapping select,
.parts-data-table input {
  min-width: 0;
}

.parts-db-check {
  grid-template-columns: auto 1fr;
  align-items: center;
  padding-bottom: 10px;
}

.parts-db-actions {
  justify-content: flex-start;
}

.parts-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

.parts-summary-card {
  width: 100%;
  min-height: 92px;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 16px;
  border: 1px solid #d7dee7;
  border-radius: 8px;
  background: #f8fafc;
  text-align: left;
  cursor: pointer;
  box-shadow: none;
}

.parts-summary-card.active {
  border-color: #0f3a5d;
  background: #eef6ff;
  box-shadow: inset 4px 0 0 #0f3a5d;
}

.parts-summary-card strong {
  font-size: 2rem;
  color: #123858;
}

.parts-summary-card span {
  color: #516070;
  font-weight: 700;
}

.parts-list-bulk-actions {
  justify-content: flex-end;
  align-items: center;
}

.parts-list-bulk-actions button {
  width: auto;
  white-space: nowrap;
}

.parts-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.parts-cell-lines {
  display: block;
  white-space: pre-line;
}

.parts-cell-empty {
  color: #7b8995;
  font-size: 0.82rem;
  font-style: italic;
  line-height: 1.3;
}

.parts-review-explanation {
  display: grid;
  gap: 4px;
  max-width: 780px;
  margin-top: 10px;
  padding: 10px 12px;
  border-left: 3px solid #7ca3b8;
  border-radius: 0 6px 6px 0;
  background: #f2f7fa;
  color: #44596b;
  font-size: 0.88rem;
  line-height: 1.45;
}

.parts-review-explanation strong {
  color: #173b58;
}

.parts-review-explanation.hidden {
  display: none;
}

.parts-table-heading {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding-top: 4px;
}

.parts-table-heading h3 {
  margin: 0;
}

.parts-data-table {
  min-width: 760px;
  border-collapse: separate;
  border-spacing: 0 8px;
}

.parts-data-table th,
.parts-data-table td {
  vertical-align: middle;
}

.parts-data-table tbody tr {
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.parts-data-table tbody tr.selected {
  outline: 2px solid rgba(15, 58, 93, 0.26);
  outline-offset: -2px;
  background: #f3f8fc;
}

.parts-data-table tbody td:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.parts-data-table tbody td:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

.parts-select-column {
  width: 44px;
  text-align: center;
}

.parts-select-column input {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.parts-row-actions {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  min-width: 116px;
}

.parts-row-actions button {
  width: auto;
  min-height: 34px;
  padding: 7px 11px;
  font-size: 0.85rem;
}

.parts-action-button {
  min-width: 58px;
}

.review-action-group {
  display: grid;
  width: 280px;
}

.parts-status-copy {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.parts-list-status-row {
  margin: -6px 0 -2px;
  padding: 0 2px;
  border: 0;
  background: transparent;
}

.parts-list-status-row .warranty-status {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  color: #687b8c;
  font-size: 0.76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.parts-list-status-row .parts-local-actions {
  flex-wrap: nowrap;
  gap: 6px;
}

.parts-list-status-row .parts-local-actions button {
  min-height: 30px;
  padding: 5px 9px;
  font-size: 0.76rem;
}

.parts-list-status-row .parts-quiet-action {
  border-color: transparent;
  background: transparent;
  color: #65798a;
}

.parts-save-indicator {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid #cbd9e5;
  border-radius: 999px;
  background: #f6f9fb;
  color: #42586b;
  font-size: 0.78rem;
}

.parts-save-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6d8193;
}

.parts-save-indicator.saving .parts-save-dot {
  background: #d38b16;
  animation: parts-save-pulse 0.9s ease-in-out infinite alternate;
}

.parts-save-indicator.saved-shared .parts-save-dot { background: #26845b; }
.parts-save-indicator.saved-local .parts-save-dot { background: #557b98; }
.parts-save-indicator.unsaved .parts-save-dot { background: #b87518; }
.parts-save-indicator.save-failed {
  border-color: #e4aaa5;
  background: #fff4f3;
  color: #8d2c25;
}
.parts-save-indicator.save-failed .parts-save-dot { background: #c7352b; }

.parts-save-indicator button {
  width: auto;
  min-height: 24px;
  padding: 3px 8px;
  font-size: 0.72rem;
}

@keyframes parts-save-pulse {
  from { opacity: 0.45; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}

.parts-health-modal-content {
  position: relative;
  width: min(560px, 44vw);
  min-width: 360px;
  min-height: 260px;
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 96px);
  overflow: auto;
  resize: both;
  pointer-events: auto;
  box-shadow: 0 18px 48px rgba(15, 35, 52, 0.22);
}


#partsHealthModal {
  justify-content: flex-end;
  align-items: flex-start;
  padding: 72px 18px 18px;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none;
}

#databaseHealthModal {
  justify-content: flex-end;
  align-items: flex-start;
  padding: 72px 18px 18px;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none;
}

.database-health-modal-content {
  pointer-events: auto;
}

.database-health-drag-handle {
  cursor: move;
  user-select: none;
  touch-action: none;
}

.database-inline-health-button {
  width: auto;
  min-height: 30px;
  padding: 5px 9px;
  white-space: nowrap;
  font-size: 0.76rem;
}

.parts-health-modal-content .parts-modal-heading {
  cursor: move;
  user-select: none;
  touch-action: none;
}

.parts-health-modal-content .parts-modal-heading button {
  cursor: pointer;
}

.parts-health-modal-content.dragging {
  transition: none;
  animation: none;
  box-shadow: 0 22px 56px rgba(15, 35, 52, 0.3);
}

.parts-health-panel-hint {
  margin: 5px 0 0;
  color: #617487;
  font-size: 0.78rem;
}

.parts-health-corner-grip {
  position: absolute;
  top: 7px;
  left: 9px;
  color: #7890a3;
  font-size: 1.05rem;
  line-height: 1;
  cursor: move;
  opacity: 0.78;
}

.parts-health-modal-content > .parts-modal-heading {
  padding-left: 8px;
}

.parts-health-report {
  display: grid;
  gap: 12px;
}

.parts-health-section {
  padding: 12px 14px;
  border: 1px solid #d7e1e9;
  border-radius: 9px;
  background: #f8fafc;
}

.parts-health-section.good {
  border-color: #b9ddca;
  background: #f1faf5;
}

.parts-health-section h3 {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 5px;
  font-size: 0.96rem;
}

.parts-health-section p {
  margin: 0;
  color: #536779;
  font-size: 0.84rem;
}

.parts-health-section ul {
  margin: 8px 0 0;
  padding-left: 20px;
  color: #34495b;
  font-size: 0.82rem;
}

.parts-health-item-action {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 6px;
}

.parts-health-item-action button {
  width: auto;
  min-height: 30px;
  padding: 5px 9px;
  white-space: nowrap;
  font-size: 0.75rem;
}

@media (max-width: 900px) {
  #partsHealthModal {
    justify-content: center;
    align-items: center;
    padding: 18px;
    background: rgba(10, 25, 38, 0.42);
    pointer-events: auto;
  }

  #databaseHealthModal {
    justify-content: center;
    align-items: center;
    padding: 18px;
    background: rgba(10, 25, 38, 0.42);
    pointer-events: auto;
  }

  .parts-health-modal-content {
    position: static !important;
    width: min(920px, 94vw);
    min-width: 0;
    max-height: 88vh;
    resize: none;
  }


  .parts-health-modal-content .parts-modal-heading {
    cursor: default;
    touch-action: auto;
  }

  .parts-health-corner-grip {
    display: none;
  }
}

/* Compact only the wide review list so its actions fit without changing its layout. */
.parts-review-table th,
.parts-review-table td {
  padding-left: 4px;
  padding-right: 4px;
  overflow-wrap: anywhere;
}

.parts-review-table {
  min-width: 1289px;
  table-layout: fixed;
}

.parts-review-table .parts-select-column {
  width: 50px;
  max-width: 50px;
  min-width: 0;
  padding-left: 2px;
  padding-right: 2px;
  white-space: nowrap;
}

.parts-review-table col.parts-review-select-col {
  width: 50px;
}

.parts-review-table col.parts-review-actions-col {
  width: 244px;
}

.parts-review-table col.review-col-found-number { width: 80px; }
.parts-review-table col.review-col-found-description { width: 130px; }
.parts-review-table col.review-col-source-file { width: 110px; }
.parts-review-table col.review-col-source-page { width: 75px; }
.parts-review-table col.review-col-suggested-number { width: 110px; }
.parts-review-table col.review-col-category { width: 95px; }
.parts-review-table col.review-col-subcategory { width: 100px; }
.parts-review-table col.review-col-suggested-description { width: 125px; }
.parts-review-table col.review-col-confidence { width: 85px; }
.parts-review-table col.review-col-type { width: 135px; }

.parts-review-table .parts-review-group-headings th {
  padding: 7px 10px;
  border-bottom: 1px solid #cbd9e5;
  background: #dce9f3;
  color: #31536d;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-align: left;
  text-transform: uppercase;
}

.parts-review-table tbody td {
  vertical-align: top;
  padding-top: 18px;
  padding-bottom: 18px;
  line-height: 1.4;
}

.parts-review-table tbody .parts-actions-column {
  padding-top: 14px;
  padding-bottom: 8px;
  padding-left: 10px;
}

.parts-review-table thead tr:not(.parts-review-group-headings) th:first-child,
.parts-review-table tbody td:first-child {
  padding-left: 10px;
}


.parts-review-table .parts-select-column input {
  display: block;
  margin: 0;
}

.parts-review-table .parts-select-control {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.parts-review-table .parts-actions-column {
  width: 244px;
  min-width: 244px;
}

.parts-review-table .review-action-group {
  width: 236px;
}

.parts-review-table .review-list-action {
  padding-left: 7px;
  padding-right: 7px;
}

.review-action-menu {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.parts-row-actions .review-list-action {
  display: grid;
  gap: 2px;
  width: 100%;
  min-height: 36px;
  padding: 7px 9px;
  line-height: 1.15;
  text-align: left;
}

.parts-row-actions .review-list-action span {
  color: #607386;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.25;
}

.parts-row-actions .review-action-disabled,
.parts-row-actions .review-action-disabled:hover {
  cursor: not-allowed;
  opacity: 0.62;
}

.parts-row-actions .review-dismiss-action {
  color: #fff;
}

.parts-row-actions .review-dismiss-action span {
  color: #fde8e6;
}

.parts-row-actions .review-dismiss-action:hover,
.parts-row-actions .review-dismiss-action:focus-visible {
  background: #8f1b13;
}

.parts-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 0 4px;
  color: var(--ns-muted);
  font-size: 0.92rem;
}

.parts-page-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
}

.parts-page-actions button {
  width: auto;
  min-width: 40px;
  white-space: nowrap;
}

.parts-page-button.active {
  background: var(--ns-primary);
  border-color: var(--ns-primary);
  color: #fff;
}

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

.parts-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #e8edf2;
  color: #23313f;
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}

.parts-badge.exact {
  background: #dff3e8;
  color: #17603a;
}

.parts-badge.needs-review {
  background: #fff1cf;
  color: #75520a;
}

.parts-badge.conflict {
  background: #f8dddd;
  color: #8c2222;
}

.parts-badge.new-part {
  background: #dfefff;
  color: #164d83;
}

.parts-empty-state {
  padding: 28px;
  border: 1px dashed #b7c4d0;
  border-radius: 8px;
  color: #5e6b77;
  background: #f8fafc;
  text-align: center;
  font-weight: 700;
}

.parts-preview-modal-content {
  width: min(1220px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  height: calc(100vh - 24px);
  max-height: calc(100vh - 24px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.parts-modal-heading {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: start;
}

.parts-progress {
  display: grid;
  gap: 8px;
  margin: 0;
}

.parts-preview-file {
  display: grid;
  gap: 6px;
  font-weight: 800;
}

.parts-preview-file input {
  width: 100%;
}

.parts-column-mapping {
  margin: 0;
  padding: 12px;
  border: 1px solid #d7dee7;
  border-radius: 8px;
  background: #f8fafc;
  overflow: visible;
}

.parts-mapping-summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.parts-mapping-summary p {
  margin: 4px 0 0;
  color: #516070;
}

.parts-mapping-editor {
  margin-top: 12px;
  max-height: 210px;
  overflow: auto;
  padding-top: 10px;
  border-top: 1px solid #d7dee7;
}

.parts-mapping-grid,
.parts-edit-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.parts-data-table input {
  width: 220px;
  padding: 7px 8px;
}

.parts-preview-toolbar,
.parts-preview-footer {
  flex-shrink: 0;
  margin: 0;
}

.parts-preview-footer {
  flex: 0 0 auto;
  padding-top: 10px;
  border-top: 1px solid #d7dee7;
  background: #fff;
  min-height: 50px;
}

#partsPreviewTable {
  flex: 1 1 0;
  min-height: 180px;
  overflow: auto;
  padding-right: 4px;
}

.parts-import-log {
  flex: 0 0 auto;
  max-height: 58px;
  overflow: auto;
  padding: 10px 12px;
  border: 1px solid #d7dee7;
  border-radius: 8px;
  background: #f8fafc;
  color: #425364;
  font-size: 0.9rem;
}

.parts-import-log div + div {
  margin-top: 5px;
}

.parts-preview-list {
  display: grid;
  gap: 10px;
}

.parts-preview-row {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #d7dee7;
  border-radius: 8px;
  background: #fff;
}

.parts-preview-row.excluded {
  opacity: 0.58;
  background: #f5f7f9;
}

.parts-preview-include {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 6px;
  font-weight: 800;
  color: #314254;
}

.parts-preview-include input {
  width: 20px;
  height: 20px;
}

.parts-preview-main {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.parts-preview-row-header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: start;
}

.parts-preview-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.parts-preview-fields {
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) minmax(260px, 1.7fr) minmax(80px, 0.35fr);
  gap: 8px;
}

.parts-preview-fields label {
  display: grid;
  gap: 5px;
  font-weight: 800;
  color: #314254;
}

.parts-preview-fields input {
  width: 100%;
  min-width: 0;
}

.parts-preview-note {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  color: #5b6875;
  font-size: 0.9rem;
}

@media (max-width: 980px) {
  .parts-db-toolbar,
  .parts-summary-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 620px) {
  .parts-db-toolbar,
  .parts-summary-grid {
    grid-template-columns: 1fr;
  }

  .parts-list-heading {
    display: grid;
  }

  .parts-modal-heading {
    display: grid;
  }

  .parts-preview-modal-content {
    width: calc(100vw - 12px);
    max-width: calc(100vw - 12px);
    height: calc(100vh - 12px);
    max-height: calc(100vh - 12px);
  }

  .parts-preview-row {
    grid-template-columns: 1fr;
  }

  .parts-preview-include {
    justify-items: start;
    grid-template-columns: auto 1fr;
  }

  .parts-preview-fields {
    grid-template-columns: 1fr;
  }
}
.spec-ai-notice-choice {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1rem;
  font-weight: 600;
}

.spec-ai-notice-choice input {
  width: auto;
  margin: 0;
}

.button-link {
  display: inline-block;
  padding: 0.65rem 0.9rem;
  border-radius: 5px;
  background: #12395b;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

.button-link:hover,
.button-link:focus-visible {
  background: #0b2943;
  color: #fff;
}
.ns-global-account {
  width: min(100%, 720px);
  margin: 20px auto 0;
}

.ns-global-account .ns-global-access-summary { display: block; }
.ns-global-account .ns-global-account-actions { display: flex; }
.ns-global-login-content { max-width: 30rem; }
.ns-global-login-content label { display: grid; gap: 0.35rem; margin: 0.8rem 0; font-weight: 700; }

.spec-local-ai-banner {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid #8eb7d6;
  border-left: 5px solid #155b8f;
  border-radius: 7px;
  background: #edf7ff;
}

.spec-local-ai-banner p { margin: 0.3rem 0 0; }
.spec-local-ai-banner-actions { display: grid; justify-items: end; gap: 0.5rem; flex: 0 0 auto; }
.spec-local-ai-banner-actions > span { padding: 0.35rem 0.55rem; border-radius: 999px; background: #d8efe1; color: #185b34; font-weight: 700; }

@media (max-width: 720px) {
  .ns-global-account { width: min(100%, 520px); margin: 20px auto 0; }
  .spec-local-ai-banner { align-items: flex-start; flex-direction: column; }
}
.spec-ai-header-button {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid #8ec5e9;
  background: linear-gradient(135deg, #e8f5ff, #dcefff);
  color: #075985;
  box-shadow: 0 3px 9px rgba(36, 125, 184, 0.12);
}

.spec-ai-header-button .spec-ai-header-status-dot {
  width: 0.55rem;
  height: 0.55rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #9aa9b5;
  box-shadow: 0 0 0 3px rgba(154, 169, 181, 0.15);
}

.spec-ai-header-button.is-ready .spec-ai-header-status-dot { background: #29a35a; box-shadow: 0 0 0 3px rgba(41, 163, 90, 0.16); }
.spec-ai-header-button.is-error .spec-ai-header-status-dot { background: #d14338; box-shadow: 0 0 0 3px rgba(209, 67, 56, 0.15); }
.spec-ai-header-button.is-checking .spec-ai-header-status-dot { animation: spec-ai-status-pulse 1.1s ease-in-out infinite; }
.spec-ai-header-status-label { white-space: nowrap; }
.spec-ai-header-button:hover,
.spec-ai-header-button:focus-visible { border-color: #62acd9; background: linear-gradient(135deg, #dff1ff, #cfe8fb); color: #064d75; }

@keyframes spec-ai-status-pulse { 50% { opacity: 0.4; transform: scale(0.82); } }

.spec-document-actions .spec-ai-source-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid #8ec5e9; background: linear-gradient(135deg, #e8f5ff, #dcefff); color: #075985; box-shadow: 0 2px 7px rgba(36, 125, 184, 0.12); }
.spec-document-actions .spec-ai-source-button:hover, .spec-document-actions .spec-ai-source-button:focus-visible { border-color: #62acd9; background: linear-gradient(135deg, #dff1ff, #cfe8fb); color: #064d75; }
.spec-document-actions .spec-ai-source-button > span:first-child { display: grid; width: 19px; height: 19px; place-items: center; border-radius: 6px; background: #3188bd; color: #fff; font-size: 11px; box-shadow: 0 1px 4px rgba(31, 111, 161, 0.2); }

.spec-ai-status-dashboard { display: grid; gap: 1rem; }
.spec-ai-status-hero { display: flex; align-items: center; gap: 0.9rem; padding: 1rem; border: 1px solid #b8d8c5; border-radius: 12px; background: linear-gradient(135deg, #eefaf3, #f5fbff); }
.spec-ai-status-hero.is-error { border-color: #e3aaa6; background: linear-gradient(135deg, #fff3f2, #fff8f1); }
.spec-ai-status-orb { display: grid; place-items: center; width: 48px; height: 48px; flex: 0 0 auto; border-radius: 50%; background: #187443; color: #fff; font-size: 13px; font-weight: 800; box-shadow: 0 0 0 7px rgba(24,116,67,0.1); }
.spec-ai-status-hero.is-error .spec-ai-status-orb { background: #a53b32; box-shadow: 0 0 0 7px rgba(165,59,50,0.1); }
.spec-ai-status-hero h3 { margin: 0 0 0.2rem; color: #12395b; }
.spec-ai-status-hero p { margin: 0; color: #526579; }
.spec-ai-status-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
.spec-ai-status-card { padding: 0.8rem 0.9rem; border: 1px solid #d5e0e8; border-radius: 9px; background: #fff; }
.spec-ai-status-card span { display: block; margin-bottom: 0.2rem; color: #65788a; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.spec-ai-status-card strong { color: #163a59; overflow-wrap: anywhere; }
.spec-ai-pipeline { padding: 0.9rem; border-radius: 10px; background: #f2f7fb; }
.spec-ai-pipeline > strong { display: block; margin-bottom: 0.7rem; color: #163a59; }
.spec-ai-pipeline-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.55rem; }
.spec-ai-pipeline-step { padding: 0.65rem; border: 1px solid #cadae6; border-radius: 8px; background: #fff; color: #40586d; font-size: 12px; }
.spec-ai-pipeline-step b { display: block; margin-bottom: 0.2rem; color: #155b8f; }
.spec-ai-status-note { margin: 0; padding: 0.75rem 0.85rem; border-left: 4px solid #d59b21; border-radius: 6px; background: #fff7e5; color: #6f5015; }
.spec-ai-status-next { margin: 0; padding: 0.8rem 0.9rem; border-left: 4px solid #318fc4; border-radius: 7px; background: #eef7fd; color: #173f5d; }
.spec-ai-setup-link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
#specModalBody:has(.spec-ai-status-dashboard) + #specModalActions > button,
#specModalBody:has(.spec-ai-status-dashboard) + #specModalActions > .spec-ai-setup-link {
  box-sizing: border-box;
  min-width: 150px;
  min-height: 38px;
  margin: 0;
  padding: 9px 14px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.2;
}
.spec-local-ai-setup-steps { margin: 0.65rem 0; padding-left: 1.35rem; }
.spec-local-ai-setup-steps li + li { margin-top: 0.45rem; }
.spec-ai-example-editor { display: grid; gap: 0.85rem; }
.spec-ai-example-editor > p { margin: 0; line-height: 1.5; }
.spec-ai-example-editor label { display: grid; gap: 0.4rem; color: #294b66; font-weight: 750; }
.spec-ai-example-editor textarea { width: 100%; min-height: 320px; box-sizing: border-box; padding: 12px; resize: vertical; border-color: #b8cddd; background: #fbfdff; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; line-height: 1.45; }
.spec-ai-example-help { display: grid; gap: 0.25rem; padding: 0.75rem 0.85rem; border-radius: 8px; background: #eef6fb; color: #456278; font-size: 12px; }
.spec-ai-example-help strong { color: #173e61; }
.spec-ai-example-default { display: grid; gap: 0.35rem; padding: 0.85rem; border: 1px solid #a9d2b7; border-radius: 9px; background: #eef9f2; color: #315e40; }
.spec-ai-example-default > strong { color: #17623a; }
.spec-ai-example-default details { margin-top: 0.3rem; }
.spec-ai-example-default summary { cursor: pointer; font-weight: 750; }
.spec-ai-example-default pre { margin: 0.65rem 0 0; padding: 0.75rem; overflow: auto; border-radius: 7px; background: #fff; color: #29465c; white-space: pre-wrap; font-size: 11px; line-height: 1.45; }

.spec-ai-writing-modal { display: grid; gap: 14px; color: #29465c; }
.spec-modal-content:has(.spec-ai-writing-modal) { width: min(1280px, 96vw); max-height: 94vh; padding: 26px 28px; }
.spec-modal-content:has(.spec-ai-writing-modal) > h2 { margin-bottom: 18px; color: #123f60; font-size: 22px; }
.spec-ai-writing-intro { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 13px; padding: 15px 17px; border: 1px solid #91c7e9; border-radius: 11px; background: linear-gradient(135deg, #e8f5ff, #f5faff); }
.spec-ai-writing-intro strong { display: block; margin-bottom: 3px; color: #075985; font-size: 15px; }
.spec-ai-writing-intro p { margin: 0; color: #49728e; font-size: 12px; line-height: 1.45; }
.spec-ai-writing-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 12px; background: #3188bd; color: #fff; font-size: 19px; font-weight: 800; box-shadow: 0 4px 11px rgba(31, 111, 161, 0.22); }
.spec-ai-scope-badge { align-self: start; padding: 5px 8px; border: 1px solid #a9d2b7; border-radius: 999px; background: #fff; color: #17623a; font-size: 10px; font-weight: 800; white-space: nowrap; }
.spec-ai-writing-setup { display: grid; grid-template-columns: 1fr; gap: 13px; }
.spec-ai-writing-guardrails { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.spec-ai-writing-guardrails span { padding: 9px 10px; border: 1px solid #d9e5ed; border-radius: 8px; background: #f7fafc; color: #63798a; font-size: 10px; line-height: 1.35; }
.spec-ai-writing-guardrails strong { display: block; margin-bottom: 2px; color: #214b6a; font-size: 11px; }
.spec-ai-workspace-details { overflow: hidden; border: 1px solid #d6e2ea; border-radius: 9px; background: #fff; }
.spec-ai-workspace-details > summary { padding: 11px 13px; cursor: pointer; background: #f6f9fb; color: #214b6a; font-size: 12px; font-weight: 800; }
.spec-ai-workspace-details[open] > summary { border-bottom: 1px solid #e0e8ee; background: #eef6fb; }
.spec-ai-workspace-details .spec-ai-writing-guardrails { padding: 10px; }
.spec-ai-part-picker { display: grid; grid-template-columns: minmax(150px, 0.38fr) minmax(230px, 1fr); align-items: center; gap: 5px 12px; padding: 11px 12px; border: 1px solid #c9dbe7; border-radius: 9px; background: #f2f7fb; color: #294b66; font-size: 11px; font-weight: 800; }
.spec-ai-part-picker select { width: 100%; min-height: 40px; box-sizing: border-box; border-color: #a9c3d5; background: #fff; color: #153d5b; font-weight: 750; }
.spec-ai-part-picker small { grid-column: 2; color: #718496; font-size: 10px; font-weight: 500; }
.spec-ai-writing-prompt { display: grid; gap: 6px; color: #294b66; font-size: 12px; font-weight: 750; }
.spec-ai-writing-prompt > span { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.spec-ai-writing-prompt em { padding: 3px 6px; border-radius: 999px; background: #e5f2fb; color: #17638f; font-size: 9px; font-style: normal; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; }
.spec-ai-writing-prompt small { color: #718496; font-size: 10px; font-weight: 500; }
.spec-ai-writing-prompt textarea { width: 100%; min-height: 94px; box-sizing: border-box; padding: 12px 14px; resize: vertical; border: 1px solid #b8cddd; border-radius: 8px; background: #fbfdff; color: #253c4f; font: 12px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; }
.spec-ai-writing-prompt textarea:focus { border-color: #21709f; outline: none; box-shadow: 0 0 0 3px rgba(33, 112, 159, 0.12); }
.spec-ai-prompt-compose { position: relative; }
.spec-ai-prompt-compose textarea { min-height: 158px; padding-right: 58px; padding-bottom: 48px; }
.spec-ai-prompt-compose #specAiGenerateSlot { position: absolute; right: 10px; bottom: 10px; display: flex; }
.spec-ai-prompt-compose #specAiGenerateButton { display: grid; width: 38px; height: 38px; min-height: 0; margin: 0; padding: 0; place-items: center; border: 1px solid #2279ac; border-radius: 50%; background: linear-gradient(135deg, #318fc4, #2279ac); color: #fff; font-size: 21px; font-weight: 800; line-height: 1; box-shadow: 0 3px 9px rgba(34, 121, 172, 0.22); }
.spec-ai-prompt-compose #specAiGenerateButton:hover { background: linear-gradient(135deg, #277dab, #176590); }
.spec-ai-writing-review .spec-ai-writing-prompt textarea { min-height: 310px; }
.spec-ai-field-error { padding: 7px 9px; border-left: 3px solid #c93d32; border-radius: 4px; background: #fff0ef; color: #90271f !important; font-size: 10px !important; font-weight: 700 !important; }
.spec-ai-source-preview { overflow: hidden; border: 1px solid #d6e2ea; border-radius: 9px; background: #fff; }
.spec-ai-source-preview summary { padding: 11px 13px; cursor: pointer; color: #214b6a; font-size: 12px; font-weight: 800; }
.spec-ai-source-preview summary:hover { background: #f4f8fb; }
.spec-ai-source-preview summary small { color: #748798; font-size: 10px; font-weight: 500; }
.spec-ai-source-preview pre { max-height: 330px; margin: 0; padding: 15px; overflow: auto; border-top: 1px solid #e0e8ee; background: #f8fafc; color: #263f52; white-space: pre; font: 10px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; }
.spec-ai-writing-history { overflow: hidden; border: 1px solid #ccdce7; border-radius: 9px; background: #fff; }
.spec-ai-writing-history > summary { padding: 11px 13px; cursor: pointer; background: #f3f8fb; color: #214b6a; font-size: 12px; font-weight: 800; }
.spec-ai-writing-history > summary:hover { background: #eaf3f9; }
.spec-ai-writing-history > summary small { color: #718496; font-size: 10px; font-weight: 600; }
.spec-ai-writing-history > .converter-muted { margin: 0; padding: 13px; }
.spec-ai-history-list { display: grid; gap: 9px; max-height: 420px; padding: 10px; overflow: auto; border-top: 1px solid #dce6ed; background: #f8fafc; }
.spec-ai-history-card { padding: 11px; border: 1px solid #d6e1e9; border-radius: 8px; background: #fff; }
.spec-ai-history-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.spec-ai-history-heading > div { display: grid; gap: 3px; min-width: 0; }
.spec-ai-history-heading strong { overflow-wrap: anywhere; color: #193f5b; font-size: 11px; }
.spec-ai-history-heading small { color: #7a8b99; font-size: 9px; }
.spec-ai-history-heading > span { flex: 0 0 auto; padding: 4px 7px; border-radius: 999px; background: #fff2d9; color: #805000; font-size: 9px; font-weight: 800; }
.spec-ai-history-heading > span.is-accepted { background: #e6f6ec; color: #17623a; }
.spec-ai-history-card > p { margin: 9px 0 0; color: #5a7182; font-size: 10px; line-height: 1.45; }
.spec-ai-history-card > details { margin-top: 9px; border-top: 1px solid #e2e9ee; }
.spec-ai-history-card > details > summary { padding-top: 9px; cursor: pointer; color: #397096; font-size: 10px; font-weight: 750; }
.spec-ai-history-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.spec-ai-history-compare > div { min-width: 0; }
.spec-ai-history-compare strong { display: block; margin-bottom: 4px; color: #526d80; font-size: 9px; text-transform: uppercase; letter-spacing: 0.04em; }
.spec-ai-history-compare pre { max-height: 220px; margin: 0; padding: 9px; overflow: auto; border: 1px solid #dee7ed; border-radius: 6px; background: #f8fafb; color: #263f52; white-space: pre; font: 9px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; }
.spec-ai-github-diff { overflow: hidden; border: 1px solid #c9d8e2; border-radius: 9px; background: #fff; }
.spec-ai-github-diff > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 13px; border-bottom: 1px solid #d8e2e9; background: #f6f8fa; color: #294b66; font-size: 11px; }
.spec-ai-github-diff > header > span { display: flex; align-items: center; gap: 6px; color: #647788; font-size: 9px; font-weight: 650; }
.spec-ai-github-diff > header b { width: 10px; height: 10px; margin-left: 5px; border-radius: 2px; }
.spec-ai-github-diff > header b.removed { background: #ff8182; }
.spec-ai-github-diff > header b.added { background: #56d364; }
.spec-ai-github-diff > header b.neutral { border: 1px solid #afb8c1; background: #f6f8fa; }
.spec-ai-diff-lines { max-height: 330px; overflow: auto; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 10px; line-height: 1.5; }
.spec-ai-diff-line { display: grid; grid-template-columns: 40px 40px 22px minmax(max-content, 1fr); min-width: max-content; border-bottom: 1px solid rgba(208, 215, 222, 0.55); background: #fff; }
.spec-ai-diff-line > span { padding: 2px 7px; border-right: 1px solid rgba(208, 215, 222, 0.7); color: #81909c; text-align: right; user-select: none; }
.spec-ai-diff-line > b { padding: 2px 5px; font-weight: 700; text-align: center; user-select: none; }
.spec-ai-diff-line > code { padding: 2px 9px; color: #24292f; white-space: pre; font: inherit; }
.spec-ai-diff-line.removed { background: #ffebe9; }
.spec-ai-diff-line.removed > span, .spec-ai-diff-line.removed > b { background: #ffd7d5; color: #82071e; }
.spec-ai-diff-line.added { background: #dafbe1; }
.spec-ai-diff-line.added > span, .spec-ai-diff-line.added > b { background: #aceebb; color: #116329; }
.spec-ai-diff-line.same { color: #57606a; }
.spec-ai-diff-empty { padding: 18px; color: #637585; text-align: center; font-size: 11px; }
.spec-ai-fillable-warning { padding: 10px 12px; border: 1px solid #e7a39e; border-left: 4px solid #c93d32; border-radius: 7px; background: #fff0ef; color: #8c251e; font-size: 11px; font-weight: 750; line-height: 1.45; }
.spec-ai-unified-diff { max-height: 66vh; overflow: auto; background: #fff; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; line-height: 1.55; }
.spec-ai-unified-content { display: grid; grid-template-columns: max-content; min-width: 100%; }
.spec-ai-unified-line { display: grid; width: 100%; min-width: 0; box-sizing: border-box; border-bottom: 1px solid #d8dee4; }
.spec-ai-unified-line.same { grid-template-columns: 88px 40px 40px minmax(920px, max-content); background: #fff; }
.spec-ai-unified-line.same::before { content: ""; border-right: 1px solid #d8dee4; background: #f6f8fa; }
.spec-ai-unified-line.removed, .spec-ai-unified-line.added, .spec-ai-unified-line.edited { grid-template-columns: 40px 40px 22px minmax(920px, max-content); }
.spec-ai-unified-line > span { padding: 2px 7px; border-right: 1px solid rgba(208, 215, 222, 0.75); color: #81909c; text-align: right; user-select: none; }
.spec-ai-unified-line > b { padding: 2px 5px; text-align: center; user-select: none; }
.spec-ai-unified-line > code { min-width: 0; padding: 2px 9px; color: #24292f; white-space: pre; font: inherit; }
.spec-ai-unified-line.same > code { padding-left: 9px; }
.spec-ai-unified-line.removed { background: #ffebe9; }
.spec-ai-unified-line.removed > span, .spec-ai-unified-line.removed > b { background: #ffd7d5; color: #82071e; }
.spec-ai-unified-line.removed > code { color: #641c16; }
.spec-ai-unified-line.removed > code mark { padding: 1px 2px; border-radius: 2px; background: #ffb8b8; color: inherit; }
.spec-ai-unified-line.added { background: #dafbe1; }
.spec-ai-unified-line.added > span, .spec-ai-unified-line.added > b { background: #aceebb; color: #116329; }
.spec-ai-unified-line.added > code { color: #0d5123; }
.spec-ai-unified-line.added > code mark { padding: 1px 2px; border-radius: 2px; background: #abf2bc; color: inherit; }
.spec-ai-unified-line.edited { background: #fff; }
.spec-ai-unified-line.edited > span, .spec-ai-unified-line.edited > b { background: #f6f8fa; color: #57606a; }
.spec-ai-unified-line.edited del { padding: 1px 2px; border-radius: 2px; background: #ffebe9; color: #82071e; text-decoration: line-through; }
.spec-ai-unified-line.edited ins { padding: 1px 2px; border-radius: 2px; background: #dafbe1; color: #116329; text-decoration: none; }
.spec-ai-unified-change { display: grid; grid-template-columns: 88px minmax(920px, max-content); width: 100%; min-width: 0; border-bottom: 1px solid #d8dee4; }
.spec-ai-unified-change .spec-ai-unified-line { grid-column: 2; width: 100%; min-width: 0; border-bottom: 0; }
.spec-ai-line-decisions { grid-column: 1; grid-row: 1 / span 2; display: grid; align-content: center; gap: 4px; padding: 6px; border-right: 1px solid #c7d3dc; background: #f6f8fa; }
.spec-ai-line-decisions button { width: 100%; min-height: 25px; margin: 0; padding: 4px 5px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: #526879; font-size: 9px; }
.spec-ai-line-decisions button:hover { background: #edf3f7; color: #234a67; }
.spec-ai-line-decisions [data-ai-diff-decision="accept"] { border-color: #79c78d; color: #116329; }
.spec-ai-line-decisions [data-ai-diff-decision="accept"].active { border-color: #2da44e; background: #2da44e; color: #fff; }
.spec-ai-line-decisions [data-ai-diff-decision="revert"] { border-color: #e09b95; color: #a22920; }
.spec-ai-line-decisions [data-ai-diff-decision="revert"]:hover { border-color: #cf3d32; background: #fff0ef; color: #8c251e; }
.spec-ai-line-decisions [data-ai-diff-decision="revert"].active { border-color: #cf3d32; background: #cf3d32; color: #fff; }
.spec-ai-unified-change.is-reverted .spec-ai-unified-line.added { opacity: 0.36; }
.spec-ai-unified-change.is-reverted .spec-ai-unified-line.removed { background: #f6f8fa; }
.spec-ai-unified-change.is-reverted .spec-ai-unified-line.removed > span, .spec-ai-unified-change.is-reverted .spec-ai-unified-line.removed > b { background: #e9eef2; color: #526879; }
.spec-ai-unified-change.is-reverted .spec-ai-unified-line.edited ins { opacity: 0.35; }
.spec-ai-unified-change.is-reverted .spec-ai-unified-line.edited del { background: #f0f3f5; color: #344b5c; text-decoration: none; }
.spec-ai-unified-change.removes-fillable { outline: 2px solid #d14338; outline-offset: -2px; }
.spec-ai-unified-change.removes-fillable .spec-ai-line-decisions { background: #fff0ef; }
.spec-ai-unified-change.protects-fillable .spec-ai-line-decisions { border-left: 3px solid #3188bd; background: #eef7fd; }
.spec-ai-line-decisions button:disabled { cursor: not-allowed; opacity: 0.45; }
.spec-ai-workspace-details > summary, .spec-ai-source-preview > summary, .spec-ai-writing-history > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto 16px; align-items: center; gap: 10px; list-style: none; }
.spec-ai-workspace-details > summary::-webkit-details-marker, .spec-ai-source-preview > summary::-webkit-details-marker, .spec-ai-writing-history > summary::-webkit-details-marker { display: none; }
.spec-ai-workspace-details > summary::after, .spec-ai-source-preview > summary::after, .spec-ai-writing-history > summary::after { content: "›"; color: #39779f; font-size: 20px; font-weight: 500; line-height: 1; transform: rotate(0deg); transition: transform 0.16s ease; }
.spec-ai-workspace-details[open] > summary::after, .spec-ai-source-preview[open] > summary::after, .spec-ai-writing-history[open] > summary::after { transform: rotate(90deg); }
#specModalBody:has(.spec-ai-writing-modal) + #specModalActions { position: sticky; bottom: -26px; margin: 18px -28px -26px; padding: 15px 28px; border-top: 1px solid #dce5ec; background: rgba(255, 255, 255, 0.97); box-shadow: 0 -8px 18px rgba(15, 23, 42, 0.05); backdrop-filter: blur(6px); }
#specModalBody:has(.spec-ai-writing-modal) + #specModalActions > button:not(.secondary) { border: 1px solid #2279ac; background: #2279ac; color: #fff; }
#specModalBody:has(.spec-ai-writing-modal) + #specModalActions > button:not(.secondary):hover { background: #176590; }

@media (max-width: 980px) {
  .spec-part-editor-heading { flex-direction: column; align-items: stretch; }
  .spec-editor-actions { width: 100%; box-sizing: border-box; }
  .spec-template-action-group { flex: 1 1 auto; }
  .spec-template-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .spec-template-actions button { width: 100%; }
}

@media (max-width: 640px) {
  .spec-editor-actions { display: grid; }
  .spec-template-action-group { padding: 9px 0 0; border-top: 1px solid #d5e0e8; border-left: 0; }
  .spec-ai-write-button { justify-content: center; }
  .spec-ai-writing-intro { grid-template-columns: 38px minmax(0, 1fr); }
  .spec-ai-writing-setup { grid-template-columns: 1fr; }
  .spec-ai-prompt-compose #specAiGenerateButton { width: 38px; height: 38px; min-height: 0; }
  .spec-ai-writing-guardrails { grid-template-columns: 1fr; }
  .spec-ai-part-picker { grid-template-columns: 1fr; }
  .spec-ai-part-picker small { grid-column: auto; }
  .spec-ai-history-compare { grid-template-columns: 1fr; }
  .spec-ai-source-preview summary { align-items: flex-start; flex-direction: column; gap: 3px; }
}
@media (max-width: 620px) { .spec-ai-status-grid, .spec-ai-pipeline-steps { grid-template-columns: 1fr; } }
@media (max-width: 620px) {
  #specModalBody:has(.spec-ai-status-dashboard) + #specModalActions > button,
  #specModalBody:has(.spec-ai-status-dashboard) + #specModalActions > .spec-ai-setup-link { flex: 1 1 100%; width: 100%; }
}
/* ===== Peer Review ===== */
.peer-review-main { max-width: 1500px; }
.peer-type-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.peer-type-card { min-height: 150px; padding: 22px; border: 1px solid #cbdbe7; border-radius: 12px; background: #fff; color: #17354b; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 9px; text-align: left; box-shadow: 0 7px 20px rgba(33, 68, 91, .08); }
.peer-type-card:hover:not(:disabled) { transform: translateY(-2px); border-color: #2176a8; }
.peer-type-card strong { font-size: 1.08rem; }
.peer-type-card small { color: #62798a; }
.peer-type-card.is-disabled { opacity: .62; cursor: not-allowed; background: #eef3f6; }
.peer-card-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: #d9edf8; color: #17658f; font-weight: 800; }
.peer-badge { display: inline-flex; width: fit-content; padding: 4px 9px; border-radius: 999px; background: #dcecf5; color: #185d82; font-size: .76rem; font-weight: 800; }
.peer-saved-heading, .peer-section-heading, .peer-review-summary, .peer-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.peer-saved-heading { margin-top: 30px; }
.peer-history-header { margin-top: 30px; padding-top: 22px; border-top: 1px solid #d8e3e9; }
.peer-saved-list { display: grid; gap: 9px; }
.peer-saved-item { width: 100%; padding: 13px 15px; border: 1px solid #d4e0e7; background: #fff; color: #17354b; display: flex; justify-content: space-between; align-items: center; text-align: left; }
.peer-saved-item span:first-child { display: grid; gap: 3px; }
.peer-saved-item small { color: #62798a; }
.peer-review-summary h2 { margin: 8px 0 4px; }
.peer-review-summary p, .peer-section-heading p { margin: 4px 0 0; color: #62798a; }
.peer-step-nav { position: sticky; top: 10px; z-index: 20; display: flex; gap: 6px; overflow-x: auto; padding: 8px; margin: 14px 0; border: 1px solid #cbdbe7; border-radius: 10px; background: rgba(245, 249, 251, .96); box-shadow: 0 5px 18px rgba(28, 60, 80, .1); }
.peer-step-nav button { flex: 1 0 auto; background: transparent; color: #31566e; box-shadow: none; }
.peer-step-nav button.active { background: #176e9d; color: #fff; }
.peer-analysis-progress { margin: 0 0 14px; padding: 14px 16px; border: 1px solid #9ec9df; border-radius: 10px; background: #edf7fc; color: #234f68; box-shadow: 0 4px 13px rgba(35, 89, 120, .08); }
.peer-analysis-progress.is-complete { border-color: #9bc9ad; background: #eef8f2; color: #285d3c; }
.peer-analysis-progress.is-partial { border-color: #dbb96d; background: #fff9e8; color: #6e510f; }
.peer-analysis-progress.is-error { border-color: #e0aaa5; background: #fff2f1; color: #8a312a; }
.peer-analysis-progress-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
.peer-analysis-progress-head strong { display: block; margin-bottom: 3px; }
.peer-analysis-progress-head p { margin: 0; color: inherit; opacity: .82; }
.peer-analysis-progress-head > span:last-child { font-size: .78rem; font-weight: 800; }
.peer-analysis-spinner { width: 20px; height: 20px; border: 3px solid rgba(33, 110, 157, .2); border-top-color: #216e9d; border-radius: 50%; animation: peer-spin .8s linear infinite; }
.peer-analysis-spinner.is-stopped { border-color: currentColor; animation: none; }
.peer-analysis-progress.is-complete .peer-analysis-spinner { position: relative; border: 0; }
.peer-analysis-progress.is-complete .peer-analysis-spinner::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 20px; font-weight: 900; }
.peer-analysis-progress-track { height: 7px; margin-top: 12px; overflow: hidden; border-radius: 999px; background: rgba(33, 110, 157, .14); }
.peer-analysis-progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: #2581b5; transition: width .25s ease; }
.peer-analysis-progress.is-complete .peer-analysis-progress-track span { background: #369267; }
.peer-analysis-progress.is-error .peer-analysis-progress-track span { background: #c75349; }
@keyframes peer-spin { to { transform: rotate(360deg); } }
.peer-analysis-progress.packet-build-progress { margin: 12px 0 14px; padding: 10px 12px; border: 1px solid #bfd0e0; border-left: 4px solid #2875b8; border-radius: 8px; background: #f7fbff; color: inherit; box-shadow: none; }
.peer-analysis-progress.packet-build-progress.is-complete { border-color: #78b88f; background: #eff9f2; color: inherit; box-shadow: inset 4px 0 0 #24834c; }
.peer-analysis-progress.packet-build-progress.is-partial { border-color: #dbb96d; background: #fff9e8; color: inherit; box-shadow: inset 4px 0 0 #c58a18; }
.peer-analysis-progress.packet-build-progress.is-error { border-color: #d99a94; background: #fff7f6; color: inherit; box-shadow: inset 4px 0 0 #c8392b; }
#peerAnalysisMessageHistory li.is-error { margin-block: 3px; padding: 6px 8px; border-left: 3px solid #c8392b; border-radius: 4px; background: #fff0ef; color: #7d261f; }
.peer-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.peer-form-grid label { display: grid; gap: 7px; font-weight: 700; }
#peerDropZone { margin-top: 16px; cursor: pointer; }
.peer-page-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.peer-maximum-sweep-control { display: flex; align-items: flex-start; gap: 12px; margin: 14px 0 18px; padding: 14px 16px; border: 1px solid #9fc3d5; border-radius: 10px; background: #f1f8fb; color: #234f68; cursor: pointer; }
.peer-maximum-sweep-control input { width: 19px; height: 19px; margin-top: 2px; accent-color: #176e9d; }
.peer-maximum-sweep-control span { display: grid; gap: 4px; }
.peer-maximum-sweep-control strong { color: #174d69; }
.peer-maximum-sweep-control small { color: #577484; line-height: 1.45; }
.peer-page-card { padding: 12px; border: 1px solid #cbdbe7; border-radius: 10px; background: #f8fbfc; }
.peer-page-preview { min-height: 240px; display: grid; place-items: center; overflow: hidden; margin-bottom: 10px; background: #dce4e8; color: #567080; }
.peer-page-preview canvas { width: 100%; height: auto; background: white; box-shadow: 0 3px 12px rgba(0,0,0,.14); }
.peer-page-card label { display: grid; gap: 5px; font-weight: 700; }
.peer-page-recommendation { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 3px 8px; margin: 0 0 10px; padding: 9px 10px; border: 1px solid #b9d7e7; border-radius: 8px; background: #edf7fb; color: #163f58; }
.peer-page-recommendation span { font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #39718d; }
.peer-page-recommendation strong { justify-self: end; font-size: .82rem; }
.peer-page-recommendation small { grid-column: 1 / -1; line-height: 1.35; color: #547184; }
.peer-page-selection-status { font-weight: 500; color: #5b7484; }
.peer-page-selection-status.is-manual { color: #865b12; }
.table-scroll { width: 100%; overflow-x: auto; }
#peerStep-equipment .table-scroll {
  position: relative;
  max-height: min(68vh, 760px);
  overflow: auto;
  scrollbar-gutter: stable;
  border: 1px solid #cbdbe7;
  border-radius: 9px;
  background: #fff;
}
.peer-equipment-table {
  width: max-content;
  min-width: 100%;
  margin: 0;
}
.peer-equipment-table th {
  position: sticky;
  top: 0;
  z-index: 3;
  white-space: normal;
  line-height: 1.2;
}
.peer-equipment-table th,
.peer-equipment-table td {
  min-width: 120px;
  vertical-align: top;
}
.peer-equipment-table input,
.peer-equipment-table textarea {
  display: block;
  min-width: 100%;
  margin: 0;
  font: inherit;
}
.peer-equipment-table input { min-height: 38px; }
.peer-equipment-table textarea {
  min-height: 54px;
  max-height: 120px;
  resize: vertical;
  overflow: auto;
  line-height: 1.35;
  white-space: pre-wrap;
}
.peer-equipment-table [data-field="tag"] { min-width: 96px; }
.peer-equipment-table [data-field="description"] { min-width: 180px; }
.peer-equipment-table [data-field="quantity"] { min-width: 150px; }
.peer-equipment-table [data-field="parentPartNumber"] { min-width: 240px; }
.peer-equipment-table [data-field="parentQuantity"] { min-width: 110px; }
.peer-equipment-table [data-field="partNumber"] { min-width: 190px; }
.peer-equipment-table [data-field="details"] { min-width: 360px; }
.peer-equipment-table [data-field="purpose"] { min-width: 300px; }
.peer-equipment-table [data-field="voltage"],
.peer-equipment-table [data-field="phase"],
.peer-equipment-table [data-field="horsepower"],
.peer-equipment-table [data-field="amperage"] { min-width: 125px; }
.peer-equipment-table .peer-equipment-page-cell {
  position: sticky;
  left: 0;
  z-index: 2;
  min-width: 58px;
  width: 58px;
  background: #f7fafc;
}
.peer-equipment-table th.peer-equipment-page-cell { z-index: 5; background: #e8eef4; }
.peer-equipment-table .peer-equipment-action-cell {
  position: sticky;
  right: 0;
  z-index: 2;
  min-width: 92px;
  width: 92px;
  background: #f7fafc;
  box-shadow: -5px 0 8px rgba(35, 65, 84, .08);
}
.peer-equipment-table th.peer-equipment-action-cell { z-index: 5; background: #e8eef4; }
.peer-equipment-table .peer-equipment-action-cell button { width: 100%; }
.peer-hint { color: #62798a; }
.peer-severity { display: inline-flex; padding: 4px 7px; border-radius: 999px; font-weight: 800; font-size: .75rem; white-space: nowrap; }
.peer-severity.error { background: #f9d7d7; color: #872a2a; }.peer-severity.warning { background: #fff0c2; color: #73510a; }.peer-severity.manual-review { background: #dcebf5; color: #245b7e; }
.peer-confidence { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border: 1px solid #9ec6dc; border-radius: 999px; background: #e4f2fa; color: #155b82; font-size: .73rem; font-weight: 800; white-space: nowrap; }
.peer-confidence::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.peer-confidence.high { border-color: #8cc5a4; background: #dff3e7; color: #1f7044; }
.peer-confidence.supported { border-color: #8fbfd9; background: #dfeff8; color: #155f89; }
.peer-confidence.low { border-color: #e0aa65; background: #fff0d9; color: #8a4e09; }
.peer-confidence.rule { border-color: #b7a8d9; background: #eee9f8; color: #58428d; }
.peer-confidence.rule.is-clickable { cursor: pointer; }
.peer-confidence.rule.is-clickable:hover, .peer-confidence.rule.is-clickable:focus { outline: 2px solid #8069b7; outline-offset: 2px; }
.peer-ai-status-modal { width: min(720px, 92vw); }
.peer-ai-status-modal > h2 { margin: 0 0 16px; }
.peer-ai-status-actions { justify-content: flex-end; margin-top: 18px; }
.peer-ai-status-actions button { min-width: 150px; min-height: 38px; }
.peer-overall-review-card { grid-column: 1 / -1; min-height: 120px; }
.peer-knowledge-modal { width: min(780px, 94vw); }
.peer-source-library-modal { width: min(920px, 96vw); max-height: 92vh; overflow-y: auto; }
.peer-knowledge-upload-grid { display: grid; grid-template-columns: minmax(240px, 420px); gap: 12px; margin: 14px 0; }
.peer-knowledge-upload-grid label { display: grid; gap: 6px; color: #294f66; font-weight: 700; }
.peer-knowledge-drop-zone { min-height: 150px; margin: 12px 0; }
.peer-knowledge-drop-zone.dragover { border-color: #277da8; background: #e9f6fc; box-shadow: inset 0 0 0 2px rgba(39,125,168,.12); }
.peer-knowledge-source-list { display: grid; gap: 10px; margin: 14px 0; }
.peer-knowledge-source { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid #d4e1e8; border-radius: 10px; background: #f9fbfc; }
.peer-knowledge-source strong, .peer-knowledge-source span { display: block; }
.peer-knowledge-source span { margin-top: 4px; color: #667b89; font-size: .84rem; }
.peer-knowledge-status { display: inline-flex; margin-top: 7px; padding: 3px 7px; border-radius: 999px; background: #fff1c8; color: #76520c; font-size: .72rem; font-weight: 800; }
.peer-knowledge-status.approved { background: #e2f3e8; color: #23603b; }
.peer-knowledge-examples { margin-top: 16px; padding: 12px; border: 1px solid #d5e2e9; border-radius: 10px; }
.peer-company-guidance { display: grid; gap: 7px; margin: 16px 0; padding: 14px; border: 1px solid #bcd8e8; border-radius: 10px; background: #f0f8fc; color: #234e67; }
.peer-company-guidance span { color: #5d7482; font-size: .86rem; line-height: 1.45; }
.company-guidance-builder { display: grid; gap: 10px; margin: 16px 0; padding: 16px; border: 1px solid #bcd8e8; border-radius: 11px; background: #f5fafc; }
.company-guidance-heading { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px; }
.company-guidance-heading > div { display: grid; gap: 3px; }
.company-guidance-heading span, .company-guidance-progress, .company-guidance-inline-actions { color: #5d7482; font-size: .82rem; }
.company-guidance-progress { padding: 5px 9px; border-radius: 999px; background: #e4f1f8; color: #245b7b; font-weight: 700; }
.company-guidance-sections { display: grid; gap: 8px; }
.company-guidance-sections details { overflow: hidden; border: 1px solid #cedde6; border-radius: 9px; background: #fff; }
.company-guidance-sections summary { padding: 12px 14px; cursor: pointer; color: #173f57; }
.company-guidance-sections summary > span { display: inline-grid; gap: 3px; margin-left: 4px; vertical-align: top; }
.company-guidance-sections summary small { color: #687d8a; font-weight: 400; }
.company-guidance-sections textarea { width: calc(100% - 28px); margin: 0 14px 14px; resize: vertical; }
.company-guidance-inline-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }
.company-guidance-inline-actions span { margin-right: auto; }
.company-library-footer { align-items: center; border-top: 1px solid #d6e2e9; padding-top: 14px; }
.company-library-footer > span { margin-right: auto; color: #637985; font-size: .82rem; }
.company-terms-chat { display: grid; gap: 11px; margin: 16px 0; padding: 16px; border: 1px solid #bcd8e8; border-radius: 11px; background: #f5fafc; }
.company-term-category { display: grid; grid-template-columns: auto minmax(180px, 280px); align-items: center; justify-content: start; gap: 10px; color: #294f66; font-size: .84rem; font-weight: 700; }
.company-term-compose { position: relative; }
.company-term-compose textarea { width: 100%; min-height: 100px; padding-right: 58px; resize: vertical; }
.company-term-send { position: absolute; right: 10px; bottom: 10px; display: grid; width: 38px; height: 38px; min-height: 0; padding: 0; place-items: center; border: 1px solid #2279ac; border-radius: 50%; background: linear-gradient(135deg, #318fc4, #2279ac); color: #fff; font-size: 21px; font-weight: 800; line-height: 1; box-shadow: 0 3px 9px rgba(34,121,172,.22); }
.company-terms-history { display: grid; gap: 9px; max-height: 360px; padding: 10px; overflow-y: auto; border: 1px solid #d6e2e9; border-radius: 9px; background: #eef4f7; }
.company-term-message { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px 12px; padding: 12px; border: 1px solid #d3dfe7; border-radius: 9px; background: #fff; }
.company-term-message > div { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.company-term-message > div span { padding: 3px 7px; border-radius: 999px; background: #e4f2f8; color: #245b7b; font-size: .72rem; font-weight: 800; }
.company-term-message small { color: #7a8d99; }
.company-term-message p { grid-column: 1 / -1; margin: 0; color: #294858; line-height: 1.5; white-space: pre-wrap; }
.company-term-message-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; grid-column: 1 / -1; }
.company-term-message-actions button { min-height: 30px; }
.company-terms-empty { margin: 0; padding: 12px; color: #6b7e89; text-align: center; }
.company-library-note { display: grid; gap: 4px; margin: 12px 0; padding: 12px 14px; border-left: 4px solid #397da5; border-radius: 7px; background: #edf6fb; color: #294f66; }
.company-library-note span { color: #627987; font-size: .84rem; line-height: 1.45; }
.peer-knowledge-hub-modal { width: min(880px, 94vw); }
.peer-knowledge-hub-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; margin: 18px 0; }
.peer-knowledge-hub-grid > button { display: grid; min-height: 170px; padding: 20px; place-items: center; align-content: center; gap: 8px; border: 1px solid #b9d1df; border-radius: 12px; background: #f7fbfd; color: #183f57; text-align: center; box-shadow: none; }
.peer-knowledge-hub-grid > button:hover { border-color: #4385aa; background: #edf7fc; }
.peer-knowledge-hub-grid small { color: #607888; font-weight: 500; line-height: 1.45; }
.peer-database-hub-status { min-width: 44px; padding: 4px 10px; border-radius: 999px; background: #e9eef1; color: #5f717c; font-size: .72rem; font-weight: 900; text-transform: uppercase; }
.peer-database-hub-status.is-on { background: #dff2e6; color: #22613b; }
.peer-database-knowledge-modal { width: min(820px, 94vw); }
.peer-database-knowledge-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; }
.peer-database-knowledge-heading h2 { margin: 3px 0 6px; }
.peer-database-knowledge-heading p { max-width: 600px; margin: 0; color: #5c7483; line-height: 1.5; }
.peer-database-toggle { display: flex; flex: 0 0 auto; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid #c8d8e1; border-radius: 999px; background: #f4f8fa; cursor: pointer; }
.peer-database-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.peer-database-toggle > span { position: relative; width: 42px; height: 23px; border-radius: 999px; background: #93a5af; transition: .18s ease; }
.peer-database-toggle > span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); transition: .18s ease; }
.peer-database-toggle input:checked + span { background: #2279ac; }
.peer-database-toggle input:checked + span::after { transform: translateX(19px); }
.peer-database-toggle input:focus-visible + span { outline: 3px solid rgba(34,121,172,.25); outline-offset: 2px; }
.peer-database-toggle strong { min-width: 24px; color: #244c63; }
.peer-database-status { margin: 18px 0 12px; padding: 10px 12px; border-radius: 8px; background: #edf5f9; color: #315c73; }
.peer-database-status.is-error { background: #fff3dd; color: #74520d; }
.peer-database-summary { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
.peer-database-summary > div { display: grid; gap: 4px; min-width: 0; padding: 14px; border: 1px solid #d5e2e9; border-radius: 10px; background: #f8fbfc; }
.peer-database-summary small { color: #5f7786; font-weight: 800; }
.peer-database-summary strong { color: #173f57; font-size: 1.45rem; }
.peer-database-summary span { color: #69808d; font-size: .78rem; line-height: 1.35; }
.company-term-message.is-warning { border-color: #e5c885; background: #fffaf0; }
.company-term-message.is-warning > div span { background: #fff0c8; color: #79580e; }
.company-term-message.is-saved > div span { background: #e3f3e9; color: #23603b; }
.company-term-user::before { content: "You: "; color: #667d8b; font-weight: 800; }
.company-term-ai { padding: 9px 11px; border-radius: 8px; background: #edf5f9; }
@media (max-width: 820px) { .peer-knowledge-hub-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }.peer-database-summary { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px) { .peer-knowledge-hub-grid, .peer-database-summary { grid-template-columns: 1fr; }.peer-knowledge-hub-grid > button { min-height: 130px; }.peer-database-knowledge-heading { display: grid; }.peer-database-toggle { justify-self: start; } }
.peer-warning-modal { width: min(520px, 92vw); text-align: center; }
.peer-warning-modal p { color: #5f717e; line-height: 1.55; }
.peer-warning-icon { display: grid; width: 46px; height: 46px; margin: 0 auto 12px; place-items: center; border-radius: 50%; background: #fff0d2; color: #8a5a00; font-size: 25px; font-weight: 900; }
@media (max-width: 680px) { .peer-knowledge-upload-grid { grid-template-columns: 1fr; }.peer-knowledge-source { grid-template-columns: 1fr; } }
.peer-how-to { display: none; }
.peer-how-to summary { padding: 13px 15px; cursor: pointer; color: #173f57; }
.peer-how-to-content { margin: 0 14px 14px; }
.peer-how-to-content ol { margin: 0; padding-left: 22px; }
.peer-how-to-content li { margin: 8px 0; line-height: 1.5; }
.peer-page-link { padding: 0; background: none; color: #176e9d; text-decoration: underline; box-shadow: none; }
.peer-findings-heading { align-items: flex-start; gap: 28px; padding-bottom: 17px; border-bottom: 1px solid #dce6eb; }
.peer-findings-heading > div:first-child { max-width: 780px; }
.peer-section-kicker { display: block; margin-bottom: 3px; color: #21749e; font-size: .68rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.peer-findings-heading h2 { margin: 0; color: #173f57; font-size: 1.45rem; }
.peer-findings-heading p { max-width: 760px; line-height: 1.45; }
.peer-findings-actions { flex: 0 0 auto; flex-wrap: nowrap; align-self: center; margin-top: 0; padding: 5px; border: 1px solid #d5e2e9; border-radius: 10px; background: #f5f9fb; }
.peer-findings-actions button { min-height: 38px; white-space: nowrap; }
.peer-finding-summary { display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr)); gap: 10px; margin: 16px 0 12px; }
.peer-finding-summary span { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 9px; min-width: 0; overflow: hidden; padding: 11px 13px; border: 1px solid #d5e2e9; border-radius: 10px; background: #f7fafb; color: #526d7e; }
.peer-finding-summary span::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: #7c95a4; }
.peer-finding-summary strong { color: #173f57; font-size: 1.15rem; line-height: 1; }
.peer-finding-summary small { color: #526d7e; font-size: .76rem; font-weight: 750; line-height: 1.2; }
.peer-finding-summary .is-pending::before { background: #d19a35; }
.peer-finding-summary .is-accepted::before { background: #39916a; }
.peer-finding-summary .is-strong::before { background: #297b57; }
.peer-finding-summary .is-judgment::before { background: #8069b7; }
.peer-finding-level-guide { width: fit-content; max-width: 100%; margin: 8px 0 12px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: #405d6d; }
.peer-finding-level-guide[open] { width: 100%; border-color: #d5e2e9; background: #f8fbfc; }
.peer-finding-level-guide summary { display: flex; align-items: center; gap: 7px; padding: 7px 9px; list-style: none; cursor: pointer; color: #315d75; font-size: .78rem; font-weight: 800; }
.peer-finding-level-guide summary::-webkit-details-marker { display: none; }
.peer-finding-level-guide summary::before { content: "?"; display: grid; width: 18px; height: 18px; place-items: center; border-radius: 50%; background: #dcecf5; color: #17658f; font-size: .7rem; font-weight: 900; }
.peer-finding-level-guide > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; padding: 0 13px 13px; }
.peer-finding-level-guide p { margin: 0; font-size: .84rem; line-height: 1.45; }
@media (max-width: 760px) { .peer-finding-level-guide > div { grid-template-columns: 1fr; } }
.peer-coverage-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 12px 0 4px; padding: 13px; border: 1px solid #c5d9e4; border-radius: 10px; background: #edf5f8; }
.peer-coverage-summary.is-partial { border-color: #dbb96d; background: #fff9e8; }
.peer-coverage-summary > div { display: grid; gap: 3px; min-width: 0; padding: 9px 11px; border-radius: 8px; background: #fff; }
.peer-coverage-summary small { color: #687f8d; font-size: .7rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.peer-coverage-summary strong { color: #173f57; font-size: 1rem; }
.peer-coverage-summary span { color: #597382; font-size: .78rem; line-height: 1.35; }
.peer-tier-badge { display: inline-flex; align-items: center; min-height: 24px; padding: 3px 8px; border-radius: 999px; font-size: .7rem; font-weight: 900; }
.peer-tier-badge.confirmed { background: #dcefe5; color: #236b49; }
.peer-tier-badge.evidence-located { background: #e2eef5; color: #285f7e; }
.peer-tier-badge.review-idea { background: #f5ead2; color: #835f19; }
.peer-tier-badge.manual { background: #ece7f5; color: #684d8a; }
.peer-findings-list { display: grid; gap: 13px; }
.peer-finding-group { display: grid; gap: 13px; }
.peer-finding-group + .peer-finding-group { margin-top: 8px; }
.peer-finding-group-heading { display: flex; align-items: center; justify-content: space-between; padding: 10px 13px; border: 1px solid #cadbe5; border-radius: 9px; background: #edf5f9; color: #214e68; }
.peer-finding-group-heading span { color: #627987; font-size: .8rem; }
.peer-finding-group.is-possible { opacity: .88; }
.peer-finding-group.is-possible .peer-finding-group-heading { background: #fff8e8; color: #755615; }
.peer-finding-card { overflow: hidden; border: 1px solid #d3e0e7; border-radius: 12px; background: #fff; box-shadow: 0 5px 16px rgba(32, 66, 87, .07); }
.peer-finding-card h3 { margin: 0; color: #173f57; font-size: 1.02rem; line-height: 1.5; }
.peer-finding-card-head, .peer-finding-card-head > div, .peer-finding-card-actions { display: flex; align-items: center; gap: 10px; }
.peer-finding-card-head { justify-content: space-between; padding: 13px 16px; border-bottom: 1px solid #e1e9ed; background: #f7fafb; }
.peer-finding-identity { display: flex; align-items: center; gap: 11px; }
.peer-finding-identity > div { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.peer-finding-number { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: #e1edf4; color: #285d7b; font-size: .8rem; font-weight: 800; }
.peer-equipment-tag { color: #244b62; font-weight: 800; }
.peer-finding-acceptance { display: flex; align-items: center; gap: 9px; min-width: 132px; padding: 8px 11px; border: 1px solid #ccdce4; border-radius: 9px; background: #fff; color: #536f7f; cursor: pointer; }
.peer-finding-acceptance input { flex: 0 0 auto; }
.peer-finding-acceptance > span { display: grid; gap: 1px; }
.peer-finding-acceptance strong { color: #294f66; font-size: .82rem; }
.peer-finding-acceptance small { color: #6b818e; font-size: .7rem; }
.peer-finding-card.is-accepted { border-color: #9fcbb2; }
.peer-finding-card.is-accepted .peer-finding-card-head { background: #f1f8f4; }
.peer-finding-card.is-accepted .peer-finding-acceptance { border-color: #8fc1a5; background: #e3f2e9; }
.peer-finding-content { display: grid; gap: 14px; padding: 18px 20px; }
.peer-finding-explanation { max-width: 920px; margin: -5px 0 0; color: #587181; line-height: 1.55; }
.peer-finding-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.peer-finding-detail-grid section { min-width: 0; padding: 11px 13px; border: 1px solid #dbe5ea; border-radius: 8px; background: #f8fafb; }
.peer-finding-detail-grid small { display: block; margin-bottom: 5px; color: #5e7482; font-size: .72rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.peer-finding-detail-grid p { margin: 0; color: #294b60; line-height: 1.45; overflow-wrap: anywhere; }
.peer-finding-detail-grid section:nth-child(2) { border-left: 4px solid #1b759f; background: #f2f8fb; }
.peer-finding-detail-grid .peer-finding-confidence-reason { grid-column: 1 / -1; border-left: 4px solid #8069b7; background: #f6f3fb; }
.peer-value-compare { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 10px; }
.peer-value-compare > div { display: grid; align-content: start; gap: 5px; min-width: 0; padding: 12px 14px; border: 1px solid #dce6eb; border-radius: 8px; background: #f7fafb; }
.peer-value-compare small { color: #6b7f8c; font-weight: 700; }
.peer-value-compare strong { overflow-wrap: anywhere; color: #294b60; }
.peer-compare-arrow { align-self: center; color: #78909e; font-size: 0; }
.peer-compare-arrow::before { content: "\2192"; font-size: 1.25rem; }
.peer-finding-card-actions { justify-content: space-between; padding: 11px 16px; border-top: 1px solid #e3eaee; background: #fbfcfd; }
.peer-finding-card-actions button { min-height: 36px; }
.peer-preview-button { color: #176e9d; }
.peer-finding-page-label { align-self: center; color: #62798a; font-size: .84rem; font-weight: 800; }
.peer-empty-findings { display: grid; gap: 4px; padding: 32px; border: 1px dashed #cbdbe4; border-radius: 10px; color: #718592; text-align: center; }
.peer-empty-findings strong { color: #365d73; }
.peer-page-preview-modal { display: flex; flex-direction: column; width: min(1280px, 94vw); height: min(900px, 92vh); max-width: none; overflow: hidden; }
.peer-preview-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.peer-preview-heading h2 { margin: 0; }
.peer-page-preview-canvas { flex: 1 1 auto; min-height: 0; margin-top: 14px; padding: 18px; overflow: auto; border: 1px solid #cad8e0; border-radius: 9px; background: #dce4e8; text-align: center; }
.peer-page-preview-canvas canvas { display: block; max-width: 100%; height: auto; margin: 0 auto; background: #fff; box-shadow: 0 5px 22px rgba(0,0,0,.2); }
.peer-preview-error { padding: 30px; color: #922f2f; font-weight: 700; }
.peer-redline-modal { display: flex; flex-direction: column; width: min(1720px, 98vw); height: min(1060px, 97vh); max-width: none; padding: 18px 22px; overflow: hidden; }
.peer-redline-modal .peer-preview-heading p { margin: 4px 0 0; color: #637987; }
.peer-redline-editor { display: grid; gap: 9px; margin: 9px 0 0; }
.peer-redline-comment-label { display: grid; gap: 5px; margin: 0; color: #294f66; font-weight: 800; }
.peer-redline-comment-label textarea { min-height: 54px; resize: vertical; }
.peer-redline-tools { display: flex; align-items: stretch; justify-content: space-between; gap: 20px; padding: 12px; border: 1px solid #d3e0e7; border-radius: 11px; background: #f5f8fa; }
.peer-redline-placement, .peer-redline-history, .peer-redline-zoom { display: grid; gap: 5px; }
.peer-redline-placement > span, .peer-redline-history > span, .peer-redline-zoom > span { color: #294f66; font-size: .78rem; font-weight: 800; }
.peer-redline-placement > div, .peer-redline-history > div, .peer-redline-zoom > div { display: flex; align-items: center; gap: 6px; }
.peer-redline-placement button, .peer-redline-history button, .peer-redline-zoom button { min-height: 36px; padding: 7px 12px; }
.peer-redline-placement { flex: 1 1 660px; gap: 8px; }
.peer-redline-arrow-setting { display: flex !important; align-items: center; justify-content: space-between; gap: 16px !important; padding: 9px 11px; border: 1px solid #cfdee6; border-radius: 9px; background: #fff; }
.peer-redline-arrow-setting > span { display: grid; gap: 2px; }
.peer-redline-arrow-setting > span strong { color: #244e66; font-size: .82rem; }
.peer-redline-arrow-setting > span small { color: #687f8d; font-size: .7rem; font-weight: 600; }
.peer-redline-arrow-toggle { display: flex; align-items: center; gap: 8px; color: #294f66; cursor: pointer; }
.peer-redline-arrow-toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.peer-redline-arrow-toggle > span { position: relative; width: 44px; height: 24px; border-radius: 999px; background: #aebec7; box-shadow: inset 0 0 0 1px rgba(32, 73, 96, .16); transition: background .16s ease; }
.peer-redline-arrow-toggle > span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(26, 57, 75, .28); transition: transform .16s ease; }
.peer-redline-arrow-toggle input:checked + span { background: #23759e; }
.peer-redline-arrow-toggle input:checked + span::after { transform: translateX(20px); }
.peer-redline-arrow-toggle input:focus-visible + span { outline: 3px solid rgba(35, 117, 158, .24); outline-offset: 2px; }
.peer-redline-arrow-toggle > strong { min-width: 24px; color: #244e66; font-size: .76rem; }
.peer-redline-mode-options { display: grid !important; grid-template-columns: repeat(2, minmax(180px, 1fr)); gap: 8px !important; }
.peer-redline-mode { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 9px; min-height: 58px !important; padding: 8px 11px !important; border: 1px solid #c9d8e0; border-radius: 9px; background: #fff; color: #294f66; text-align: left; box-shadow: none; }
.peer-redline-mode:hover { border-color: #7fa9be; background: #f7fbfd; transform: none; }
.peer-redline-mode > b { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 8px; background: #e7eff3; color: #2d607b; font-size: 1.15rem; }
.peer-redline-mode > span { display: grid; gap: 2px; min-width: 0; }
.peer-redline-mode strong { color: #244e66; font-size: .82rem; }
.peer-redline-mode small { color: #687f8d; font-size: .68rem; font-weight: 600; line-height: 1.25; }
.peer-redline-mode.is-active { border-color: #1f668b; background: #e8f3f8; box-shadow: 0 0 0 2px rgba(31, 102, 139, .12); }
.peer-redline-mode.is-active > b { background: #1f668b; color: #fff; }
.peer-redline-mode.is-active strong { color: #174a66; }
.peer-redline-mode:disabled { cursor: not-allowed; opacity: .48; }
.peer-redline-placement-help { display: flex; align-items: center; gap: 6px; min-height: 26px; color: #567181; font-size: .72rem; line-height: 1.35; }
.peer-redline-placement-help > span { display: grid; flex: 0 0 auto; width: 18px; height: 18px; place-items: center; border-radius: 50%; background: #dceaf1; color: #245b77; font-size: .68rem; font-weight: 900; }
.peer-redline-tool-actions { display: flex; align-items: center; gap: 18px; }
.peer-redline-history { padding-right: 18px; border-right: 1px solid #d3e0e7; }
.peer-redline-history button:disabled { opacity: .45; cursor: not-allowed; }
.peer-redline-zoom button { min-width: 36px; }
.peer-redline-zoom strong { min-width: 46px; color: #173f57; text-align: center; }
.peer-redline-canvas-root, .peer-redline-canvas-root canvas { cursor: crosshair; }
.peer-redline-canvas-root { display: block; margin-top: 9px; padding: 10px; text-align: center; scroll-behavior: smooth; }
.peer-redline-canvas-root canvas { width: auto; max-width: none; max-height: none; height: auto; margin: 0 auto; object-fit: contain; }
.peer-redline-actions { justify-content: flex-end; padding-top: 12px; }
.peer-redline-action-spacer { flex: 1 1 auto; }
.peer-remove-redline-button { border-color: #d5a2a2 !important; color: #9b2f2f !important; background: #fff7f7 !important; }
.peer-remove-redline-button:hover { border-color: #b94a4a !important; background: #fbeaea !important; }
.peer-redline-button { margin-left: auto; }
@media (max-width: 1100px) {
  .peer-redline-tools { flex-wrap: wrap; }
  .peer-redline-tool-actions { width: 100%; justify-content: flex-end; padding-top: 10px; border-top: 1px solid #d8e3e8; }
}
@media (max-width: 820px) {
  .peer-redline-tools, .peer-redline-tool-actions { align-items: flex-start; flex-wrap: wrap; }
  .peer-redline-placement { justify-content: start; }
  .peer-redline-history { padding-right: 0; border-right: 0; }
  .peer-finding-detail-grid { grid-template-columns: 1fr; }
  .peer-finding-detail-grid .peer-finding-confidence-reason { grid-column: auto; }
}
@media (max-width: 680px) {
  .peer-redline-mode-options { grid-template-columns: 1fr; }
  .peer-redline-tool-actions { justify-content: flex-start; }
}
.peer-check-row { display: grid; grid-template-columns: 1fr minmax(180px, 240px); gap: 16px; align-items: start; padding: 13px 0; border-bottom: 1px solid #dbe5ea; }
.peer-check-row > div { display: grid; gap: 7px; }.peer-check-row textarea { min-height: 55px; }
.peer-filter-row { display: grid; grid-template-columns: 1fr 190px 190px; gap: 10px; margin: 12px 0; }
.peer-finding-filters { grid-template-columns: minmax(240px, 1fr) repeat(3, minmax(150px, 190px)); margin: 12px 0 18px; padding: 10px; border: 1px solid #d8e3e9; border-radius: 10px; background: #f7fafb; }
.peer-finding-filters input, .peer-finding-filters select { min-height: 42px; background-color: #fff; }
.peer-equipment-heading { align-items: flex-start; }
.peer-equipment-actions { align-self: flex-start; margin-top: -7px; }
.peer-equipment-checks-modal { width: min(700px, 92vw); max-height: 88vh; overflow-y: auto; }
.peer-equipment-checks-modal, .peer-rule-explanation-modal { background: #fff; color: #173f57; }
.peer-equipment-checks-modal > p { color: #4f6d7e !important; font-size: .95rem; }
.peer-check-rule-list { display: grid; gap: 10px; margin: 18px 0; }
.peer-check-rule-list section { display: grid; gap: 7px; padding: 15px 17px; border: 1px solid #bfd0da; border-radius: 9px; background: #f5f9fb; }
.peer-check-rule-list strong { color: #123d57; font-size: 1rem; }
.peer-check-rule-list span { color: #234f68; line-height: 1.5; }
.peer-check-rule-list small { color: #506f80; line-height: 1.45; font-size: .86rem; }
.peer-rule-explanation-modal { width: min(640px, 92vw); max-height: 86vh; overflow-y: auto; }
.peer-rule-explanation-body { display: grid; gap: 10px; margin: 16px 0; }
.peer-rule-explanation-body section { padding: 13px 15px; border-left: 4px solid #8069b7; border-radius: 7px; background: #f5f2fb; }
.peer-rule-explanation-body strong { color: #44316f; }
.peer-rule-explanation-body p { margin: 5px 0 0; color: #294f66; line-height: 1.48; }
.peer-rule-values { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; margin-top: 10px; padding: 10px; border-radius: 7px; background: #fff; color: #173f57; }
.peer-fix-list { display: grid; gap: 10px; }
.peer-fix-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 13px; align-items: start; padding: 14px; border: 1px solid #cad9e2; border-left: 5px solid #dfaa36; border-radius: 9px; background: #fff; }
.peer-finding-card-actions button[onclick^="openPeerComments"] { display: none; }
.peer-fix-item.is-fixed { border-left-color: #3a9368; background: #f1f8f4; }.peer-fix-item.is-fixed strong { text-decoration: line-through; }
.peer-fix-item p { margin: 5px 0; }.peer-fix-note { margin-top: 9px !important; padding: 8px 10px; border-radius: 7px; background: #edf4f7; }
.peer-actions { position: sticky; bottom: 10px; z-index: 18; flex-wrap: wrap; justify-content: flex-end; box-shadow: 0 -5px 24px rgba(31, 62, 81, .15); }
.peer-action-help { flex-basis: 100%; margin: 2px 0 0; color: #62798a; font-size: .86rem; text-align: right; }
.peer-export-modal { width: min(720px, 94vw); max-width: none; padding: 0; overflow: hidden; border: 1px solid #c8d7df; border-radius: 14px; background: #f7fafb; }
.peer-export-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 24px 26px 19px; border-bottom: 1px solid #dbe5ea; background: #fff; }
.peer-export-heading h2 { margin: 2px 0 5px; color: #173f57; font-size: 1.35rem; }
.peer-export-heading p { margin: 0; color: #62798a; }
.peer-export-kicker { color: #247aa2; font-size: .72rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.peer-export-close { display: grid; width: 36px; height: 36px; min-height: 0; padding: 0; place-items: center; border: 1px solid #d6e1e7; border-radius: 50%; background: #f5f8fa; color: #496778; font-size: 1.35rem; line-height: 1; }
.peer-export-close:hover { border-color: #9eb5c2; background: #eaf1f4; color: #173f57; }
.peer-export-summary { display: flex; flex-wrap: wrap; gap: 8px 16px; min-height: 48px; padding: 13px 26px; border-bottom: 1px solid #dbe5ea; background: #edf4f7; color: #4f6b7b; font-size: .86rem; }
.peer-export-summary span { display: inline-flex; align-items: center; gap: 5px; }
.peer-export-summary strong { color: #173f57; }
.peer-export-options { display: grid; gap: 11px; margin: 0; padding: 20px 26px; }
.peer-export-option { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; align-items: center; gap: 14px; width: 100%; min-height: 92px; padding: 14px 16px; border: 1px solid #cbdbe4; border-radius: 11px; background: #fff; color: #173f57; text-align: left; box-shadow: 0 3px 10px rgba(30, 63, 82, .05); }
.peer-export-option:hover { border-color: #7fa9be; background: #f7fbfd; box-shadow: 0 6px 16px rgba(30, 63, 82, .1); transform: translateY(-1px); }
.peer-export-option.is-primary { border-color: #5a90ac; background: #f2f8fb; }
.peer-export-option:disabled { cursor: not-allowed; opacity: .55; transform: none; box-shadow: none; }
.peer-export-file-icon { display: grid; width: 48px; height: 52px; place-items: center; border-radius: 8px; color: #fff; font-size: .68rem; font-weight: 900; letter-spacing: .04em; }
.peer-export-file-icon.is-pdf { background: #b64646; }
.peer-export-file-icon.is-report { background: #2d6f91; }
.peer-export-file-icon.is-excel { background: #398062; }
.peer-export-option-copy { display: grid; gap: 3px; min-width: 0; }
.peer-export-option-copy strong { color: #173f57; font-size: 1rem; }
.peer-export-option-copy > span { color: #4f6d7e; font-size: .87rem; font-weight: 500; line-height: 1.4; }
.peer-export-option-copy small { color: #748995; font-size: .76rem; font-weight: 500; }
.peer-export-option-arrow { color: #4e7d96; font-size: 1.25rem; }
.peer-complete-section { margin: 0; padding: 0; border: 0; border-top: 1px solid #d7e3e9; }
.peer-complete-review-modal { max-height: calc(100vh - 32px); overflow-x: hidden; overflow-y: auto; }
.peer-complete-section > legend { margin-left: 26px; padding: 0 8px; color: #173f57; font-size: .84rem; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }
.peer-complete-review-modal .peer-export-option { grid-template-columns: auto 50px minmax(0, 1fr); cursor: pointer; }
.peer-complete-review-modal .peer-export-option > input { width: 19px; height: 19px; margin: 0; accent-color: #1d6688; }
.peer-complete-review-modal .peer-export-option:has(input:checked) { border-color: #5a90ac; background: #f2f8fb; }
.peer-complete-review-modal .peer-export-option:has(input:disabled) { cursor: default; }
.peer-learning-confirmation { display: grid; gap: 9px; padding: 17px 26px 20px; }
.peer-learning-confirmation > p { margin: 0 0 4px; color: #607987; font-size: .84rem; line-height: 1.45; }
.peer-learning-confirmation > label { display: flex; align-items: flex-start; gap: 11px; padding: 12px 13px; border: 1px solid #d1dfe6; border-radius: 9px; background: #fff; cursor: pointer; }
.peer-learning-confirmation > label:has(input:checked) { border-color: #5a90ac; background: #f2f8fb; }
.peer-learning-confirmation input { width: 18px; height: 18px; margin-top: 2px; accent-color: #1d6688; }
.peer-learning-confirmation label span { display: grid; gap: 3px; }
.peer-learning-confirmation label strong { color: #173f57; }
.peer-learning-confirmation label small { color: #647d8b; line-height: 1.4; }
.peer-export-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 26px 18px; border-top: 1px solid #dbe5ea; background: #fff; }
.peer-complete-review-modal .peer-export-footer { position: sticky; bottom: 0; z-index: 3; box-shadow: 0 -8px 20px rgba(23, 63, 87, .08); }
.peer-export-footer > span { flex: 1 1 280px; min-width: 0; color: #6b808d; font-size: .8rem; line-height: 1.45; }
.peer-export-footer button { min-width: 104px; }
.peer-export-footer .peer-complete-actions { flex: 0 0 auto; flex-wrap: nowrap; align-items: stretch; gap: 10px; margin: 0; }
.peer-complete-actions > button { min-height: 46px; margin: 0; border-radius: 8px; box-shadow: none; }
.peer-complete-actions > .secondary { padding-inline: 20px; border-color: #b9cbd5; background: #fff; color: #294f66; }
.peer-complete-actions > .secondary:hover { border-color: #799bab; background: #f2f7f9; }
#peerConfirmCompleteButton { display: grid; min-width: 216px; padding: 8px 20px; place-content: center; gap: 1px; background: #123f5d; }
#peerConfirmCompleteButton:hover { background: #0b3049; }
#peerConfirmCompleteButton span { font-size: .9rem; font-weight: 900; line-height: 1.15; }
#peerConfirmCompleteButton small { color: rgba(255, 255, 255, .78); font-size: .68rem; font-weight: 600; line-height: 1.15; }
#peerConfirmCompleteButton:disabled { background: #7891a0; cursor: wait; }
@media (max-width: 600px) {
  .peer-export-heading, .peer-export-options, .peer-export-footer { padding-left: 18px; padding-right: 18px; }
  .peer-export-summary { padding-left: 18px; padding-right: 18px; }
  .peer-export-option { grid-template-columns: 42px minmax(0, 1fr); }
  .peer-complete-review-modal .peer-export-option { grid-template-columns: auto 42px minmax(0, 1fr); }
  .peer-export-file-icon { width: 40px; height: 46px; }
  .peer-export-option-arrow { display: none; }
  .peer-export-footer { align-items: stretch; flex-direction: column; }
  .peer-export-footer .peer-complete-actions { display: grid; grid-template-columns: minmax(96px, .7fr) minmax(180px, 1.3fr); width: 100%; }
  #peerConfirmCompleteButton { min-width: 0; }
}
.peer-modal-content { max-width: 680px; }.peer-comment { padding: 10px 0; border-bottom: 1px solid #d7e2e8; }.peer-comment small { margin-left: 8px; color: #667d8d; }
.peer-fix-resolution-modal { width: min(560px, 92vw); padding: 26px; }
.peer-fix-resolution-heading { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 13px; align-items: start; padding-bottom: 18px; border-bottom: 1px solid #d9e4ea; }
.peer-fix-resolution-heading h2 { margin: 1px 0 6px; }
.peer-fix-resolution-heading p { margin: 0; color: #62798a; line-height: 1.45; }
.peer-fix-resolution-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #e1f3e9; color: #23764f; font-size: 1.25rem; font-weight: 900; }
.peer-fix-resolution-fields { display: grid; gap: 17px; padding: 20px 0; }
.peer-fix-resolution-fields label { display: grid; gap: 7px; width: 100%; color: #294f66; font-weight: 800; }
.peer-fix-resolution-fields select, .peer-fix-resolution-fields textarea { width: 100%; margin: 0; }
.peer-fix-resolution-fields textarea { min-height: 118px; resize: vertical; }
.peer-toast { position: fixed; right: 22px; bottom: 22px; z-index: 1000; max-width: 420px; padding: 13px 18px; border-radius: 8px; background: #173f57; color: white; box-shadow: 0 8px 30px rgba(0,0,0,.25); }
.warranty-status.is-error { color: #a52c2c; font-weight: 700; }

@media (max-width: 980px) { .peer-findings-heading { display: grid; }.peer-findings-actions { justify-self: start; align-self: auto; } }
@media (max-width: 900px) { .peer-type-grid { grid-template-columns: 1fr 1fr; }.peer-form-grid, .peer-filter-row { grid-template-columns: 1fr; }.peer-finding-filters, .peer-coverage-summary, .peer-finding-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }.peer-fix-item { grid-template-columns: auto 1fr; }.peer-fix-item > select { grid-column: 2; }.peer-actions { justify-content: stretch; }.peer-actions button { flex: 1 1 45%; } }
@media (max-width: 560px) { .peer-type-grid { grid-template-columns: 1fr; }.peer-section-heading, .peer-review-summary { align-items: stretch; flex-direction: column; }.peer-check-row { grid-template-columns: 1fr; }.peer-finding-filters, .peer-coverage-summary, .peer-finding-summary { grid-template-columns: 1fr; }.peer-findings-actions { display: grid; width: 100%; box-sizing: border-box; }.peer-findings-actions button { width: 100%; }.peer-fix-item { grid-template-columns: auto 1fr; }.peer-page-grid, .peer-value-compare { grid-template-columns: 1fr; }.peer-compare-arrow { display: none; }.peer-finding-card-head, .peer-finding-card-actions { align-items: stretch; flex-direction: column; }.peer-finding-acceptance { width: 100%; }.peer-page-preview-modal { width: 96vw; height: 94vh; } }
/* Arrow-style Source Review panels */
.spec-review-dropdown > summary { cursor: pointer; padding: 4px 2px; color: #173f57; }
.spec-review-dropdown > summary span { display: inline-flex; flex-direction: column; gap: 3px; vertical-align: middle; }
.spec-review-dropdown > summary strong { font-size: 1.08rem; }
.spec-review-dropdown > summary small { color: #62798a; font-weight: 400; }
.spec-review-dropdown[open] > summary { margin-bottom: 14px; }