:root {
  --red: #e60012;
  --red-dark: #ba0010;
  --blue: #1769e0;
  --navy: #142c43;
  --ink: #172b3a;
  --muted: #667789;
  --canvas: #f4f8fb;
  --surface: #ffffff;
  --soft: #edf3f7;
  --soft-blue: #eaf4ff;
  --green: #edf8ef;
  --yellow: #fff7d3;
  --line: #d7e2ea;
  --role: #dbe8f3;
  --focus: #dcefff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { min-width: 320px; margin: 0; background: var(--canvas); color: var(--ink); font-family: Arial, "Microsoft YaHei", sans-serif; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.loading-shell { min-height: 100vh; display: grid; place-items: center; color: var(--muted); }
.app-shell { width: min(1480px, 100%); margin: 0 auto; padding: 0 24px 52px; }

.app-header { display: flex; align-items: center; justify-content: space-between; min-height: 72px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.94); }
.brand-lockup { display: flex; align-items: center; gap: 16px; min-width: 0; }
.fusion-brand { color: var(--red); font-size: 24px; font-weight: 800; letter-spacing: 0; white-space: nowrap; }
.product-title { padding-left: 16px; border-left: 1px solid var(--line); color: var(--navy); font-size: 15px; font-weight: 700; white-space: nowrap; }
.header-actions { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 14px; font-size: 14px; }
.live-dot { color: #12834d; font-weight: 700; }.live-dot::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: currentColor; }
.draft-dot { color: #a86d00; }.draft-action { font-size: 13px; font-weight: 700; }.draft-action:disabled { color: #a8b2ba; cursor: not-allowed; }
.text-button, .icon-button { border: 0; background: transparent; color: var(--blue); padding: 0; }.text-button:hover, .icon-button:hover { color: var(--red); }
.admin-active { color: var(--red); font-weight: 800; }
.display-settings { position: absolute; top: calc(100% + 16px); right: 0; z-index: 40; width: 236px; display: grid; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 16px 36px rgba(20,44,67,.16); }
.display-settings label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 700; }.display-settings select { border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); padding: 8px; }

.hero-banner { position: relative; min-height: 180px; margin-top: 18px; overflow: hidden; border: 1px solid #dce7ef; border-radius: 8px; background: #eef6fb url("/documentation-banner.png") center / cover no-repeat; }
.hero-copy { position: relative; z-index: 1; display: grid; align-content: center; height: 180px; padding: 0 7%; }
.hero-copy span { color: var(--red-dark); font-size: 15px; font-weight: 800; letter-spacing: 0; }
.hero-copy h1 { margin: 8px 0 0; color: var(--navy); font-size: 34px; line-height: 1.12; letter-spacing: 0; white-space: nowrap; }
.board-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 12px; border-bottom: 1px solid var(--line); background: transparent; }
.board-tab { min-height: 48px; border: 0; background: transparent; color: #647384; font-size: 15px; font-weight: 800; position: relative; }.board-tab::after { content: ""; position: absolute; right: 22%; bottom: 0; left: 22%; height: 3px; background: transparent; }.board-tab.selected { color: var(--red-dark); }.board-tab.selected::after { background: var(--red); }

.board { padding-top: 30px; }.board h2 { margin: 0 0 18px; color: var(--navy); font-size: 28px; line-height: 1.15; letter-spacing: 0; }.directory-board > h2, .detail-board > h2, .empty-library > h2 { text-align: center; }
.edit-toolbar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; margin: 0 0 14px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--muted); font-size: 13px; line-height: 1.4; }.edit-toolbar span:last-child { color: var(--blue); text-align: right; }.drag-cue, .drag-handle { color: #7f8d99; font-weight: 900; letter-spacing: 1px; user-select: none; }
.history-action { display: inline-flex; align-items: center; gap: 5px; }.history-action small { max-width: 108px; overflow: hidden; color: var(--muted); font-size: 10px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }.history-action:disabled small { color: inherit; }

.matrix-scroll { overflow-x: auto; padding: 4px 0 12px; background: transparent; }
.matrix-shell { display: grid; grid-template-columns: 174px repeat(var(--scenario-count), minmax(0, 1fr)); gap: 12px; min-width: 1020px; }
.matrix-corner, .scenario-head, .role-cell, .scenario-role-block { min-width: 0; }
.matrix-corner { display: flex; flex-direction: column; justify-content: center; gap: 7px; min-height: 142px; padding: 22px; border: 1px solid #d7e3eb; border-radius: 8px; background: #eaf0f5; color: var(--navy); }.matrix-corner span { font-size: 20px; font-weight: 800; }.matrix-corner small { color: var(--muted); font-size: 12px; }
.scenario-head { display: grid; grid-template-columns: minmax(0, .82fr) minmax(150px, 1.18fr); align-items: center; min-height: 142px; padding: 16px 18px; border: 1px solid #d6e5d8; border-radius: 8px; background: var(--green); text-align: left; overflow: hidden; }.scenario-copy { display: grid; gap: 6px; align-content: center; z-index: 2; }.scenario-head strong { color: var(--red-dark); font-size: 25px; }.scenario-copy em { color: var(--ink); font-size: 14px; font-style: normal; font-weight: 700; }.scenario-products { position: relative; display: block; min-width: 0; height: 104px; }.scenario-products img { position: absolute; bottom: 1px; max-width: none; height: 94px; object-fit: contain; filter: drop-shadow(0 5px 5px rgba(25,49,70,.12)); }.scenario-max .scenario-products img:nth-child(1) { left: 0; z-index: 2; width: 52%; }.scenario-max .scenario-products img:nth-child(2) { right: -4%; width: 76%; }.scenario-pro .scenario-products img:nth-child(1) { left: -1%; bottom: 0; z-index: 4; width: 20%; height: 54px; }.scenario-pro .scenario-products img:nth-child(2) { left: 8%; z-index: 3; width: 48%; }.scenario-pro .scenario-products img:nth-child(3) { left: 38%; z-index: 2; width: 35%; height: 102px; }.scenario-pro .scenario-products img:nth-child(4) { right: -5%; z-index: 4; width: 42%; height: 69px; }.scenario-lite .scenario-products img:nth-child(1) { left: 0; z-index: 2; width: 57%; }.scenario-lite .scenario-products img:nth-child(2) { right: -2%; width: 63%; height: 102px; }
.scenario-products { overflow: hidden; border: 1px solid #c8d7df; border-radius: 6px; background: #dfe8ed; box-shadow: inset 0 0 0 3px rgba(255,255,255,.34); }
.scenario-products img { filter: drop-shadow(0 5px 4px rgba(25,49,70,.24)); }
.scenario-max .scenario-products img:nth-child(1) { left: -2%; width: 55%; }
.scenario-max .scenario-products img:nth-child(2) { right: -5%; width: 80%; }
.scenario-pro .scenario-products img:nth-child(1) { left: 0; bottom: 2px; z-index: 5; width: 22%; height: 56px; }
.scenario-pro .scenario-products img:nth-child(2) { width: 50%; }
.scenario-pro .scenario-products img:nth-child(3) { left: 39%; width: 36%; }
.scenario-pro .scenario-products img:nth-child(4) { right: -4%; width: 43%; height: 70px; }
.scenario-lite .scenario-products img:nth-child(1) { left: -2%; width: 60%; }
.scenario-lite .scenario-products img:nth-child(2) { right: -3%; width: 66%; }
.role-cell { display: flex; align-items: center; justify-content: flex-start; gap: 13px; padding: 18px; border: 1px solid #c6d8e6; border-radius: 8px; background: var(--role); color: var(--navy); text-align: left; }.role-copy { display: grid; gap: 4px; }.role-cell strong { font-size: 19px; }.role-copy em { color: #4f6780; font-size: 12px; font-style: normal; font-weight: 600; line-height: 1.25; }.role-glyph { display: grid; flex: 0 0 48px; width: 48px; height: 48px; place-items: center; border: 0; border-radius: 50%; color: #fff; box-shadow: 0 5px 12px rgba(34,67,96,.16); }.role-glyph svg { width: 27px; height: 27px; fill: currentColor; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }.role-glyph .icon-cut { fill: rgba(184,0,16,.95); stroke: none; }.role-glyph-sales { background: #eb4f59; }.role-glyph-solution { background: #347fdf; }.role-glyph-mkt { background: #7359cf; }.role-glyph-service { background: #3da15c; }
.scenario-role-block { padding: 15px 16px 17px; border-radius: 8px; background: rgba(255,255,255,.75); box-shadow: 0 1px 0 rgba(18,44,67,.03); }.empty-role-block { background: rgba(236,242,246,.55); }
.section-bar { position: relative; display: flex; align-items: center; justify-content: center; min-height: 31px; margin-bottom: 12px; }.section-title { border: 0; background: transparent; color: #c6000f; font-size: 18px; font-weight: 800; line-height: 1.25; text-align: center; }.section-title::before { display: none; }.add-cell { position: absolute; right: 0; width: 28px; height: 28px; border: 1px solid #bfd0dc; border-radius: 50%; background: #fff; color: var(--blue); font-size: 20px; line-height: 1; }
.cell-grid { display: grid; grid-template-columns: repeat(var(--cell-cols), minmax(0, 1fr)); grid-auto-rows: minmax(56px, auto); gap: 2px; background: #fff; }.nav-cell { position: relative; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid #fff; border-radius: 3px; background: #f1f2f3; color: #2e4050; padding: 9px 8px; font-size: 15px; line-height: 1.25; text-align: center; overflow-wrap: anywhere; transition: background .14s, border-color .14s, box-shadow .14s, transform .14s; }.nav-cell.has-documents { border-color: #bfd9ec; background: #f9fcfe; box-shadow: inset 0 -2px 0 #8ebddd; }.nav-cell.has-documents:hover { border-color: #5b9fcf; background: #edf7fd; box-shadow: inset 0 0 0 1px #80b7db; transform: translateY(-1px); }.nav-cell.empty, .nav-cell.no-documents { border-color: #fff; background: #eceff1; color: #8d9aa4; }.nav-cell.empty { pointer-events: none; }.admin-editing .nav-cell.empty { pointer-events: auto; }.label-cell { cursor: default; }.style-blue-head { border-color: #fff; background: #f4f5f6; color: #0873c1; font-style: normal; font-weight: 800; }.style-italic, .style-red-italic, .style-highlight-red { font-style: italic; }.style-red-italic, .style-highlight-red { color: #e00012; }.style-highlight-red { border-color: #ecd973; background: #fff8c9; font-weight: 800; }.cell-text { min-width: 0; }.cell-order-actions { position: absolute; top: 3px; right: 3px; display: none; gap: 2px; }.admin-editing .nav-cell:hover .cell-order-actions { display: flex; }.cell-order-button { display: grid; width: 20px; height: 20px; place-items: center; border: 1px solid #bfd0dc; border-radius: 3px; background: #fff; color: var(--blue); font-size: 12px; line-height: 1; }.cell-order-button:disabled { opacity: .3; cursor: not-allowed; }
.admin-editing .nav-cell { cursor: pointer; box-shadow: inset 0 0 0 1px rgba(230,0,18,.12); }.admin-editing .nav-cell[draggable="true"] { cursor: grab; }.admin-editing .scenario-head, .admin-editing .role-cell, .admin-editing .section-title { outline: 1px dashed rgba(230,0,18,.32); outline-offset: -4px; }.dragging { opacity: .42; transform: scale(.98); }.drop-target { background: var(--focus) !important; box-shadow: inset 0 0 0 2px var(--blue) !important; }

.detail-board { max-width: 1180px; margin: 0 auto; }.detail-context { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; padding: 11px 16px; border: 1px solid #d9e7dc; border-radius: 8px; background: var(--green); font-size: 14px; }.detail-context span { font-weight: 800; }.detail-context strong { color: var(--red-dark); white-space: nowrap; }.detail-tools { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 14px 0; }.detail-search, .detail-hierarchy-filter { min-width: 132px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--ink); padding: 9px 11px; }.detail-search { flex: 1; min-width: 190px; }.material-select, .product-select { min-width: 158px; }.scope-switch { display: inline-flex; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: #fff; }.scope-button { min-height: 37px; border: 0; border-right: 1px solid var(--line); background: #fff; color: #5a6d7d; padding: 0 11px; font-size: 13px; font-weight: 800; }.scope-button:last-child { border-right: 0; }.scope-button.selected { background: var(--navy); color: #fff; }.scope-button:disabled { color: #a5afb7; cursor: not-allowed; }.secondary, .primary, .danger { border: 1px solid #b8c8d3; border-radius: 7px; background: #fff; color: var(--ink); padding: 9px 12px; }.primary { border-color: var(--blue); background: var(--blue); color: #fff; }.danger { color: var(--red-dark); border-color: var(--red); }
.detail-tree-canvas { padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }.detail-tree-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; color: var(--navy); }.detail-tree-summary span { font-size: 18px; font-weight: 800; }.detail-tree-summary em { color: var(--muted); font-size: 12px; font-style: normal; }.tree-node { position: relative; margin-bottom: 10px; }.tree-node:not(.tree-scenario):not(.tree-unassigned) { margin-left: 34px; }.tree-node:not(.tree-scenario):not(.tree-unassigned)::before { content: ""; position: absolute; top: -10px; bottom: calc(100% - 30px); left: -18px; width: 1px; background: #d6e2eb; }.tree-toggle { display: grid; grid-template-columns: 31px minmax(0,1fr) 26px; align-items: center; width: 100%; min-height: 52px; border: 1px solid #d9e5ec; border-radius: 8px; background: #f8fbfd; color: var(--navy); padding: 0 14px; text-align: left; }.tree-toggle:hover { border-color: #a8c8df; background: #f1f8fc; }.tree-step { display: grid; width: 23px; height: 23px; place-items: center; border-radius: 50%; background: #e8f2fb; color: var(--blue); font-size: 12px; font-weight: 800; }.tree-label { display: flex; align-items: center; gap: 9px; min-width: 0; }.tree-label strong { font-size: 16px; overflow-wrap: anywhere; }.tree-label small { border-left: 1px solid #ccdbe5; color: var(--muted); padding-left: 9px; font-size: 11px; font-weight: 700; }.tree-chevron { color: var(--blue); font-size: 20px; text-align: right; }.tree-children { padding: 10px 0 0; }.tree-scenario > .tree-toggle { border-color: #c9ddec; background: #eff7fc; }.tree-subcategory > .tree-toggle { border-color: #d5e3ed; background: #f4f8fb; }.tree-material > .tree-toggle { border-color: #efd89d; background: var(--yellow); }.tree-unassigned > .tree-toggle { border-color: #e8b8bd; background: #fff3f4; }.tree-results { display: grid; gap: 10px; }
.detail-group { overflow: hidden; margin-bottom: 10px; border: 1px solid #d9e5ec; border-radius: 8px; background: #fff; }.group-head { display: flex; align-items: stretch; background: #f8fbfd; }.group-drag { display: grid; flex: 0 0 32px; place-items: center; border-right: 1px solid #dce6ec; cursor: grab; }.group-drag:active { cursor: grabbing; }.group-toggle { flex: 1; display: grid; grid-template-columns: 26px 1fr 34px; align-items: center; gap: 8px; border: 0; background: transparent; color: var(--ink); padding: 11px 14px; text-align: left; }.group-toggle span { color: var(--red); font-size: 20px; }.group-toggle strong { font-size: 15px; }.group-toggle em { color: var(--muted); font-size: 12px; font-style: normal; text-align: right; }.group-order-actions { display: inline-flex; align-items: center; gap: 3px; padding: 0 5px; border-left: 1px solid #dce6ec; }.group-head .icon-button { width: 48px; border-left: 1px solid #dce6ec; font-size: 12px; }.group-order-actions .icon-button { width: 26px; border-left: 0; }.detail-links { display: grid; min-height: 8px; }.detail-link-row { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border-top: 1px solid #e8eff3; }.admin-editing .detail-link-row { cursor: grab; }.detail-drag { flex: 0 0 16px; }.document-link { flex: 1; color: #086fc0; line-height: 1.3; text-decoration: none; overflow-wrap: anywhere; }.document-link:hover { text-decoration: underline; }.document-link.important { color: var(--red-dark); }.document-link-disabled { color: #6f7f8d; cursor: default; }.document-link-disabled:hover { text-decoration: none; }.document-meta { flex: 0 0 min(20%, 130px); color: var(--muted); font-size: 12px; text-align: right; overflow-wrap: anywhere; }.status-badge { display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; padding: 2px 5px; border-radius: 3px; font-size: 10px; font-style: normal; font-weight: 800; line-height: 1.2; vertical-align: 1px; }.status-badge svg { width: 10px; height: 10px; fill: currentColor; stroke: currentColor; stroke-width: 1.6; }.status-new { background: #cf0a2c; color: #fff; }.status-update { background: #f4c400; color: #26384a; }.status-update svg { fill: none; }.order-actions { display: inline-flex; gap: 3px; }.order-button { display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid #cedae3; border-radius: 4px; background: #fff; font-size: 12px; }.order-button:disabled { color: #b4bec6; cursor: not-allowed; }.empty-state { padding: 24px; border: 1px dashed #c6d4de; border-radius: 8px; color: var(--muted); text-align: center; }.empty-library { max-width: 800px; margin: 0 auto; text-align: center; }.empty-library p { color: var(--muted); }

.modal-backdrop { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 20px; background: rgba(20,44,67,.38); }.modal { width: min(720px, 94vw); max-height: 88vh; overflow: auto; border: 1px solid #cfdae1; border-radius: 8px; background: #fff; box-shadow: 0 22px 56px rgba(10,28,44,.28); }.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 17px 20px; border-bottom: 1px solid #e1e9ee; }.modal-head h2 { margin: 0; color: var(--navy); font-size: 21px; }.close { border: 0; background: transparent; color: var(--red); font-size: 24px; }.modal-body { padding: 20px; }.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.field { display: grid; gap: 5px; font-size: 13px; }.field.full { grid-column: 1 / -1; }.field input, .field select { min-width: 0; border: 1px solid #c6d4dd; border-radius: 6px; padding: 8px 10px; }.wizard-grid { align-items: end; }.form-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 18px; }.hint, .confirm-delete p { color: var(--muted); font-size: 13px; line-height: 1.5; }.confirm-delete strong { color: var(--ink); font-size: 16px; }.check-field { display: flex; gap: 8px; margin-top: 14px; }
.context-menu { position: fixed; z-index: 60; width: 232px; margin: 0; padding: 6px; list-style: none; border: 1px solid #cad8e2; border-radius: 8px; background: #fff; box-shadow: 0 18px 40px rgba(20,44,67,.2); }.context-menu button { display: block; width: 100%; border: 0; border-radius: 5px; background: transparent; color: var(--ink); padding: 9px 10px; text-align: left; font-size: 13px; }.context-menu button:hover { background: #eef6fb; color: var(--blue); }.context-menu hr { height: 1px; margin: 6px 2px; border: 0; background: #e0e8ed; }.context-menu .context-danger { color: var(--red-dark); }.context-menu .context-danger:hover { background: #fff0f1; color: var(--red-dark); }

.app-shell[data-theme="ocean"] { --red: #0d5b99; --red-dark: #0d5b99; --blue: #0089bf; --navy: #123f5b; --green: #e4f6fa; --yellow: #dff3f8; --focus: #d6f2fb; }.app-shell[data-theme="forest"] { --red: #9a331f; --red-dark: #872c1b; --blue: #187960; --navy: #23483c; --green: #e8f4e8; --yellow: #f0efcb; --focus: #d8efe1; }.app-shell[data-theme="graphite"] { --red: #a42828; --red-dark: #8f2424; --blue: #3c6477; --navy: #293b46; --green: #eef2f3; --yellow: #edf0d4; --focus: #dfedf1; --role: #e8edf0; }.app-shell[data-font="yahei"] { font-family: "Microsoft YaHei", Arial, sans-serif; }.app-shell[data-font="serif"] { font-family: Georgia, "Times New Roman", serif; }.app-shell[data-density="compact"] .scenario-role-block { padding: 11px 10px; }.app-shell[data-density="compact"] .cell-grid { grid-auto-rows: minmax(44px, auto); }.app-shell[data-density="compact"] .nav-cell { min-height: 44px; padding: 5px; }.app-shell[data-density="compact"] .detail-link-row { min-height: 40px; }

@media (max-width: 780px) { .app-shell { padding: 0 14px 34px; }.app-header { min-height: auto; padding: 14px 0; gap: 10px; align-items: flex-start; flex-wrap: wrap; }.brand-lockup { gap: 9px; }.fusion-brand { font-size: 18px; }.product-title { display: none; }.header-actions { width: 100%; justify-content: flex-start; gap: 9px; font-size: 12px; }.draft-action { font-size: 12px; }.history-action small { max-width: 72px; }.hero-banner { min-height: 132px; margin-top: 14px; background-position: 58% center; }.hero-copy { height: 132px; padding: 0 18px; }.hero-copy span { font-size: 12px; }.hero-copy h1 { margin-top: 5px; font-size: 13px; white-space: nowrap; }.board-switch { margin-top: 10px; }.board { padding-top: 25px; }.board h2 { margin-bottom: 17px; font-size: 23px; }.edit-toolbar { grid-template-columns: auto 1fr; }.edit-toolbar span:last-child { grid-column: 1 / -1; text-align: left; }.matrix-scroll { margin: 0 -14px; padding: 4px 14px 12px; }.matrix-shell { min-width: 966px; grid-template-columns: 142px repeat(var(--scenario-count), minmax(274px, 1fr)); gap: 9px; }.matrix-corner, .scenario-head { min-height: 122px; }.scenario-head { grid-template-columns: .86fr 1.14fr; padding: 12px; }.scenario-head strong { font-size: 22px; }.scenario-products { height: 82px; }.scenario-products img { height: 76px; }.role-cell { padding: 14px 12px; }.role-cell strong { font-size: 17px; }.role-glyph { flex-basis: 42px; width: 42px; height: 42px; }.scenario-role-block { padding: 13px 11px; }.nav-cell { font-size: 15px; }.detail-context { align-items: flex-start; flex-direction: column; gap: 4px; }.detail-tools { align-items: stretch; flex-direction: column; }.detail-search, .detail-hierarchy-filter { width: 100%; min-height: 42px; }.scope-switch { width: 100%; }.scope-button { flex: 1; }.detail-tree-canvas { padding: 10px; }.detail-tree-summary { align-items: flex-start; flex-direction: column; }.tree-node:not(.tree-scenario):not(.tree-unassigned) { margin-left: 18px; }.tree-toggle { min-height: 48px; padding: 0 10px; }.tree-label { align-items: flex-start; flex-direction: column; gap: 2px; padding: 7px 0; }.tree-label strong { font-size: 14px; }.tree-label small { border-left: 0; padding-left: 0; }.group-drag { flex-basis: 26px; }.group-order-actions { gap: 2px; padding: 0 3px; }.detail-link-row { flex-wrap: wrap; padding: 8px 10px; }.document-meta { flex-basis: 86px; }.order-actions { margin-left: auto; }.display-settings { right: -4px; width: min(250px, calc(100vw - 30px)); }.form-grid { grid-template-columns: 1fr; }.field.full { grid-column: auto; } }

/* Premium V2 accessibility and compact responsive overrides. */
.fusion-brand, .fusion-brand-button { cursor: pointer; }
.app-header { min-height: 54px; }
.header-actions .live-dot { display: none; }
.hero-banner, .hero-copy { min-height: 108px; height: 108px; }
.directory-board .matrix-corner, .directory-board .scenario-head { min-height: 118px; }
.directory-board .scenario-products { height: 76px; }
.directory-board .scenario-products img { height: 70px; filter: drop-shadow(0 4px 5px rgba(25,49,70,.12)); }
.directory-board .scenario-pro .scenario-products img:nth-child(3), .directory-board .scenario-lite .scenario-products img:nth-child(2) { height: 74px; }
.directory-board .scenario-head strong { font-size: 23px; }
.directory-board .cell-text { font-size: 14px; font-weight: 450; }
.directory-board .nav-cell.key-document .cell-text { color: var(--red-dark); font-weight: 800; }
.document-link.important, .document-link-disabled.important { color: var(--red-dark); font-weight: 800; }
.status-badge { margin-left: 7px; padding: 0; border: 0; border-radius: 0; background: transparent !important; font-size: .86em; font-style: italic; font-weight: 700; }
.status-badge svg { display: none; }
.status-new { color: #cf0a2c !important; }
.status-update { color: #e17a17 !important; }
.status-filter { min-height: 68px; }
.bookmark-toggle.selected strong, .bookmark-material.selected strong { font-size: 1.08em; font-weight: 800; }

@media (max-width: 780px) {
  .app-header { min-height: 48px; padding-top: 8px; padding-bottom: 8px; }
  .hero-banner, .hero-copy { min-height: 94px; height: 94px; }
  .directory-board .matrix-corner, .directory-board .scenario-head { min-height: 106px; }
  .directory-board .scenario-products { height: 64px; }
  .directory-board .scenario-products img { height: 58px; }
  .directory-board .scenario-head strong { font-size: 19px; }
  .status-filter { width: 100%; min-height: 74px; }
}

/* Premium V2 design system */
html, body { max-width: 100%; overflow-x: hidden; }
body { background: #fff; color: #101f3d; font-family: "Segoe UI", Arial, sans-serif; }
.app-shell { width: 100%; max-width: none; padding: 0 32px 56px; }
.app-header { min-height: 64px; margin: 0 -32px; padding: 0 32px; border-color: #e2e9f1; box-shadow: 0 2px 10px rgba(18,42,70,.05); }
.brand-lockup { gap: 8px; }
.fusion-mark { color: #e60012; font-size: 24px; transform: rotate(45deg); }
.fusion-brand { font-size: 24px; letter-spacing: -.6px; }
.header-actions { gap: 12px; }
.region-label { color: #12213f; font-weight: 600; }
.search-entry { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid #dae4ef; border-radius: 7px; background: #fff; color: #0e2144; font-size: 26px; box-shadow: 0 3px 10px rgba(17,41,73,.07); }
.hero-banner { min-height: 146px; margin: 0 -32px; border: 0; border-radius: 0; background-color: #edf5fb; background-position: center; }
.hero-copy { height: 146px; padding: 0 4%; }
.hero-copy h1 { margin: 0; max-width: 70%; color: #0d1d3a; font-size: clamp(30px, 3vw, 46px); letter-spacing: -1.6px; white-space: normal; }
.board-switch { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 -32px; padding: 0 32px; background: #fff; }
.board-tab { min-height: 58px; font-size: 15px; font-weight: 600; }
.board-tab::after { right: 10%; left: 10%; height: 2px; }
.board { padding-top: 28px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; max-width: 1390px; margin: 0 auto 18px; }
.section-heading h2, .directory-board .section-heading h2 { margin: 0 0 5px; text-align: left; font-size: 25px; letter-spacing: -.5px; }
.section-heading p { margin: 0; color: #64748a; font-size: 13px; }
.matrix-scroll { max-width: 1390px; margin: 0 auto; padding: 0 0 14px; scrollbar-color: #a8bad0 #edf3f8; }
.matrix-shell { grid-template-columns: 190px repeat(var(--scenario-count), minmax(330px, 1fr)); gap: 10px; min-width: 1230px; }
.matrix-corner { min-height: 184px; padding: 20px; border-color: #dbe5ef; background: #f4f7fa; }
.scenario-head { position: relative; grid-template-columns: 42% 58%; grid-template-rows: 1fr auto; min-height: 184px; padding: 15px 15px 11px; border-color: #dce6ef; background: #f8fbfd; box-shadow: 0 7px 18px rgba(23,52,84,.06); }
.scenario-head strong { color: #0e1f40; font-size: 25px; letter-spacing: -.5px; }
.scenario-copy em { color: #718096; font-size: 12px; }
.scenario-products { height: 112px; border: 0; background: transparent; box-shadow: none; overflow: visible; }
.scenario-metrics { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding-top: 8px; border-top: 1px solid #e1e9f1; }
.scenario-metrics small { display: grid; grid-template-columns: auto 1fr; column-gap: 6px; padding: 0 9px; border-right: 1px solid #e1e9f1; color: #1761aa; font-size: 13px; font-style: normal; }
.scenario-metrics small:last-child { border-right: 0; }
.scenario-metrics b { color: #20365a; font-weight: 600; }
.scenario-metrics em { grid-column: 2; color: #244267; font-size: 11px; font-style: normal; white-space: nowrap; }
.role-cell { min-height: 78px; padding: 12px 14px; border-color: #dce5ef; background: #fff; box-shadow: 0 3px 10px rgba(21,48,79,.04); }
.role-glyph { flex-basis: 42px; width: 42px; height: 42px; box-shadow: none; }
.role-glyph svg { width: 23px; height: 23px; }
.role-cell strong { font-size: 17px; }
.scenario-role-block { min-height: 78px; padding: 0; border: 1px solid #dce5ef; background: #fff; box-shadow: 0 4px 13px rgba(21,48,79,.05); }
.category-entry { display: grid; grid-template-columns: 42px minmax(0,1fr) auto 18px; align-items: center; gap: 10px; width: 100%; min-height: 76px; padding: 10px 14px; border: 0; background: #fff; color: #102241; text-align: left; }
.category-entry:hover { background: #f7fbfe; }
.category-entry .role-glyph { width: 34px; height: 34px; flex-basis: 34px; border-radius: 6px; }
.category-entry .role-glyph svg { width: 19px; height: 19px; }
.category-entry strong { font-size: 15px; }
.category-entry b { color: #0f2448; font-size: 25px; font-weight: 400; }
.availability { position: relative; padding-left: 13px; color: #557087; font-size: 11px; white-space: nowrap; }
.availability::before { content: ""; position: absolute; top: 4px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: #9ba9b6; }
.availability.available::before { background: #1aa25b; }
.admin-cell-strip { display: flex; gap: 4px; max-width: 100%; padding: 7px; overflow-x: auto; border-top: 1px solid #e4ebf2; }
.admin-cell-strip .nav-cell { flex: 0 0 120px; min-height: 42px; font-size: 11px; }
.admin-cell-strip .add-cell { position: static; flex: 0 0 30px; }
.detail-board { max-width: 1390px; }
.detail-board > h2 { text-align: left; }
.detail-context { border-color: #dce6ef; background: #f4f8fc; }
.tree-material > .tree-toggle { border-color: #d6e3ee; background: #fff; }
.tree-subcategory > .tree-toggle { border-color: #bfd9ef; background: #edf7ff; color: #075fa9; }
.utility-board { max-width: 1200px; margin: 0 auto; }
.resource-list, .release-list { display: grid; border-top: 1px solid #dce5ef; }
.resource-row, .release-row { display: grid; grid-template-columns: 52px 210px minmax(0,1fr) auto; align-items: center; gap: 18px; min-height: 78px; padding: 12px 6px; border: 0; border-bottom: 1px solid #dce5ef; background: #fff; color: #102241; text-align: left; }
.resource-row:hover, .release-row:hover { background: #f7fbfe; }
.resource-row > span { color: #e60012; font-weight: 800; }
.resource-row strong, .release-row strong { font-size: 16px; }
.resource-row em, .release-row em { color: #66778b; font-size: 13px; font-style: normal; }
.resource-row b { color: #1769b0; font-size: 12px; }
.release-row { grid-template-columns: 94px minmax(280px,1fr) 1fr; }

@media (max-width: 780px) {
  .app-shell { padding: 0 14px 34px; }
  .app-header { min-height: 58px; margin: 0 -14px; padding: 0 14px; align-items: center; flex-wrap: nowrap; }
  .brand-lockup { flex: 0 0 auto; }
  .fusion-mark { font-size: 17px; }
  .fusion-brand { font-size: 18px; }
  .header-actions { width: auto; margin-left: auto; justify-content: flex-end; flex-wrap: nowrap; }
  .header-actions .live-dot, .header-actions [data-action="toggle-display"] { display: none; }
  .region-label { font-size: 11px; }
  .search-entry { width: 34px; height: 34px; font-size: 21px; }
  .hero-banner { min-height: 112px; margin: 0 -14px; background-position: 61% center; }
  .hero-copy { height: 112px; padding: 0 18px; }
  .hero-copy h1 { max-width: 74%; font-size: 20px; line-height: 1.15; white-space: normal; }
  .board-switch { grid-template-columns: repeat(3, minmax(138px, 1fr)); margin: 0 -14px; padding: 0 14px; overflow-x: auto; }
  .board-tab { min-height: 48px; font-size: 12px; white-space: nowrap; }
  .section-heading { align-items: flex-start; flex-direction: column; }
  .section-heading h2, .directory-board .section-heading h2 { font-size: 22px; }
  .matrix-scroll { margin: 0 -14px; padding: 0 14px 12px; overflow-x: auto; }
  .matrix-shell { grid-template-columns: 145px repeat(var(--scenario-count), 310px); min-width: 1105px; gap: 8px; }
  .matrix-corner, .scenario-head { min-height: 166px; }
  .scenario-head { grid-template-columns: 40% 60%; }
  .scenario-head strong { font-size: 21px; }
  .scenario-products { height: 94px; }
  .scenario-metrics small { padding: 0 5px; font-size: 11px; }
  .role-cell, .scenario-role-block { min-height: 70px; }
  .category-entry { min-height: 68px; }
  .availability { display: none; }
  .resource-row, .release-row { grid-template-columns: 38px 1fr; gap: 6px 12px; padding: 14px 4px; }
  .resource-row em, .resource-row b, .release-row em { grid-column: 2; }
}

/* Final approved directory and master-detail library */
.directory-board .section-heading { align-items: center; margin-bottom: 10px; }
.directory-board .matrix-shell { grid-template-columns: 170px repeat(var(--scenario-count), minmax(360px, 1fr)); gap: 10px; min-width: 1280px; }
.directory-board .matrix-corner,
.directory-board .scenario-head,
.directory-board .role-cell,
.directory-board .scenario-role-block { border: 1px solid #dbe5ed; border-radius: 8px; background: #fff; box-shadow: 0 3px 12px rgba(25, 48, 76, .045); }
.directory-board .matrix-corner { min-height: 164px; background: #f7f9fb; }
.directory-board .scenario-head { grid-template-columns: 37% 63%; grid-template-rows: 1fr; min-height: 164px; padding: 18px 20px; overflow: hidden; }
.directory-board .scenario-copy { align-content: center; gap: 9px; }
.directory-board .scenario-head strong { color: #0d2042; font-size: 26px; }
.directory-board .scenario-copy em { color: #718096; font-size: 14px; }
.directory-board .scenario-products { height: 124px; overflow: visible; }
.directory-board .scenario-products img { bottom: 0; max-width: 100%; height: 118px; filter: drop-shadow(0 6px 7px rgba(29, 50, 73, .12)); }
.directory-board .scenario-max .scenario-products img { inset: 0 0 0 auto; width: 100%; height: 124px; object-fit: contain; }
.directory-board .scenario-pro .scenario-products img:nth-child(1) { left: 1%; bottom: 4px; width: 17%; height: 48px; }
.directory-board .scenario-pro .scenario-products img:nth-child(2) { left: 12%; width: 43%; height: 108px; }
.directory-board .scenario-pro .scenario-products img:nth-child(3) { left: 42%; width: 31%; height: 116px; }
.directory-board .scenario-pro .scenario-products img:nth-child(4) { right: 0; width: 36%; height: 66px; }
.directory-board .scenario-lite .scenario-products img:nth-child(1) { left: 3%; width: 52%; height: 104px; }
.directory-board .scenario-lite .scenario-products img:nth-child(2) { right: 2%; width: 58%; height: 116px; }
.directory-board .role-cell { min-height: 82px; background: #fff; }
.directory-board .scenario-role-block { min-height: 82px; padding: 11px 12px 13px; }
.directory-board .section-bar { min-height: 24px; margin-bottom: 8px; }
.directory-board .section-title { color: #cf0716; font-size: 16px; }
.directory-board .cell-grid { gap: 5px; background: transparent; }
.directory-board .nav-cell { min-height: 34px; padding: 6px 8px; border: 0; border-radius: 4px; background: #edf1f4; color: #183457; font-size: 12px; box-shadow: none; }
.directory-board .nav-cell.has-documents { border: 0; background: #edf2f6; box-shadow: none; }
.directory-board .nav-cell.has-documents::after { content: "›"; margin-left: auto; color: #183457; font-size: 15px; }
.directory-board .nav-cell.has-documents:hover { border: 0; background: #e2e9ef; box-shadow: none; transform: none; }
.directory-board .nav-cell.empty,
.directory-board .nav-cell.no-documents { border: 0; background: #e6eaed; color: #929da7; }
.directory-board .style-blue-head { background: transparent; color: #1762a4; font-weight: 700; }
.directory-board .style-blue-head::after { display: none; }
.directory-board .style-highlight-red { background: #e9edf0; color: #b80b18; }

.library-workspace { display: grid; grid-template-columns: 310px minmax(0, 1fr); gap: 14px; align-items: start; }
.bookmark-rail { position: sticky; top: 10px; overflow: hidden; border: 1px solid #d7e2eb; border-radius: 8px; background: #f9fbfc; box-shadow: 0 4px 14px rgba(20, 44, 67, .05); }
.bookmark-rail-head { display: flex; align-items: center; gap: 9px; min-height: 50px; padding: 0 14px; border-bottom: 1px solid #dce6ed; color: #102546; }
.bookmark-rail-head span { color: #d00918; font-size: 19px; }
.bookmark-tree { max-height: calc(100vh - 340px); min-height: 360px; overflow: auto; padding: 8px 0; }
.bookmark-node { position: relative; }
.bookmark-toggle,
.bookmark-material { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 7px; width: calc(100% - 10px - var(--bookmark-indent, 0px)); min-height: 38px; margin: 2px 5px 2px calc(5px + var(--bookmark-indent, 0px)); padding: 6px 9px; border: 0; border-radius: 0 6px 6px 0; background: transparent; color: #17304e; text-align: left; }
.bookmark-toggle:hover,
.bookmark-material:hover { background: #eef4f8; }
.bookmark-toggle strong,
.bookmark-material strong { min-width: 0; font-size: 13px; overflow-wrap: anywhere; }
.bookmark-toggle small,
.bookmark-material small { color: #74859a; font-size: 10px; }
.bookmark-chevron { display: grid; width: 20px; height: 20px; place-items: center; border: 1px solid #d4e0e8; border-radius: 4px; color: #2c5b86; font-size: 12px; }
.bookmark-subcategory > .bookmark-toggle { color: #1769aa; }
.bookmark-material { grid-template-columns: 22px minmax(0, 1fr) 24px; }
.bookmark-material > span { color: #1769aa; }
.bookmark-material.selected { position: relative; background: #e9f2f9; color: #075fa5; }
.bookmark-material.selected::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 3px; background: #e60012; }
.bookmark-children { position: relative; }
.bookmark-children::before { content: ""; position: absolute; top: 0; bottom: 4px; left: calc(22px + var(--bookmark-indent, 0px)); width: 1px; background: #e0e8ee; }
.unassigned-bookmark { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 8px; width: 100%; min-height: 54px; padding: 10px 14px; border: 0; border-top: 1px solid #dce6ed; background: #fff; color: #9f1821; text-align: left; }
.unassigned-bookmark.selected { background: #fff1f2; }
.library-content { min-width: 0; min-height: 510px; padding: 16px; border: 1px solid #d7e2eb; border-radius: 8px; background: #fff; }
.material-content-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.material-content-head small { color: #1769aa; font-size: 11px; }
.material-content-head h3 { margin: 5px 0 2px; color: #102546; font-size: 22px; }
.material-content-head p { margin: 0; color: #74859a; font-size: 12px; }
.material-groups .detail-group { margin-bottom: 10px; }
.library-content .group-head { background: #f5f8fa; }
.library-content .detail-link-row { min-height: 44px; }

@media (max-width: 780px) {
  .directory-board .matrix-shell { grid-template-columns: 145px repeat(var(--scenario-count), 320px); min-width: 1129px; }
  .directory-board .matrix-corner,
  .directory-board .scenario-head { min-height: 148px; }
  .directory-board .scenario-head { grid-template-columns: 40% 60%; padding: 14px; }
  .directory-board .scenario-head strong { font-size: 21px; }
  .directory-board .scenario-copy em { font-size: 12px; }
  .directory-board .scenario-products { height: 106px; }
  .directory-board .scenario-products img { height: 100px; }
  .directory-board .scenario-max .scenario-products img { height: 106px; }
  .library-workspace { grid-template-columns: 1fr; }
  .bookmark-rail { position: static; }
  .bookmark-tree { min-height: 0; max-height: 300px; }
  .library-content { padding: 10px; }
  .material-content-head { align-items: flex-start; flex-direction: column; }
}

/* Theme-aware directory states and document labels */
.app-shell[data-theme="ocean"] {
  --theme-deep: #123f5b;
  --theme-accent: #1769e0;
  --theme-scenario: #dcebfa;
  --theme-available: #e4eff9;
  --theme-empty: #f2f7fb;
  --theme-empty-text: #8ba1b4;
}
.app-shell[data-theme="forest"] {
  --theme-deep: #23483c;
  --theme-accent: #21805e;
  --theme-scenario: #e4f2e9;
  --theme-available: #e9f4ed;
  --theme-empty: #f4f8f5;
  --theme-empty-text: #8da299;
}
.app-shell[data-theme="orange"] {
  --theme-deep: #7a361d;
  --theme-accent: #f26a21;
  --theme-scenario: #fff0e5;
  --theme-available: #fff1e7;
  --theme-empty: #fbf8f5;
  --theme-empty-text: #ae9689;
}
.app-shell[data-theme="graphite"] {
  --theme-deep: #293b46;
  --theme-accent: #586574;
  --theme-scenario: #e8edf1;
  --theme-available: #edf1f4;
  --theme-empty: #f6f7f8;
  --theme-empty-text: #929ca4;
}
.fusion-brand, .fusion-mark { color: #e60012 !important; }
.hero-copy { align-content: center; }
.hero-copy > span { color: #c80716; font-size: 18px; font-weight: 800; letter-spacing: .2px; }
.directory-board .scenario-head { border-color: color-mix(in srgb, var(--theme-accent) 24%, #dce6ef); background: var(--theme-scenario); }
.directory-board .scenario-head strong,
.directory-board .scenario-copy em,
.directory-board .style-blue-head { color: var(--theme-deep); }
.directory-board .style-blue-head { background: transparent; font-size: 14px; font-weight: 700; }
.directory-board .nav-cell { min-height: 40px; justify-content: center; background: var(--theme-empty); color: var(--theme-empty-text); padding: 7px 8px; font-size: 14px; font-style: normal; font-weight: 500; text-align: center; }
.directory-board .nav-cell.has-documents { background: var(--theme-available); color: var(--theme-deep); }
.directory-board .nav-cell.has-documents::after { display: none; content: none; }
.directory-board .nav-cell.has-documents:hover { background: color-mix(in srgb, var(--theme-available) 78%, var(--theme-accent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--theme-accent) 42%, transparent); }
.directory-board .nav-cell.empty,
.directory-board .nav-cell.no-documents { background: var(--theme-empty); color: var(--theme-empty-text); }
.directory-board .nav-cell.style-blue-head,
.directory-board .nav-cell.style-blue-head.no-documents { min-height: 28px; padding: 1px 5px 5px; background: transparent; color: var(--theme-deep); }
.directory-board .directory-category-label { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 28px; padding: 1px 5px 5px; border: 0; border-radius: 0; background: transparent; color: var(--theme-deep); font-size: 14px; font-style: normal; font-weight: 700; line-height: 1.2; text-align: center; overflow-wrap: anywhere; cursor: default; box-shadow: none; }
.directory-board .style-highlight-red,
.directory-board .style-red-italic { color: var(--theme-deep); }
.cell-label { display: grid; justify-items: center; gap: 4px; min-width: 0; }
.cell-statuses, .bookmark-statuses { display: inline-flex; align-items: center; justify-content: center; gap: 3px; }
.cell-statuses .status-badge, .bookmark-statuses .status-badge { margin-left: 0; }
.bookmark-toggle, .bookmark-material { color: var(--theme-deep); }
.bookmark-subcategory > .bookmark-toggle,
.bookmark-material > span { color: var(--theme-accent); }
.bookmark-material.selected { background: color-mix(in srgb, var(--theme-scenario) 74%, #fff); color: var(--theme-deep); }
.bookmark-material.selected::after { background: var(--theme-accent); }
.bookmark-material { grid-template-columns: 22px minmax(0, 1fr) auto 24px; }
.bookmark-statuses:empty { display: none; }
.bookmark-statuses .status-new,
.release-row .status-new,
.detail-link-row .status-new { color: #fff !important; }
.bookmark-statuses .status-new svg,
.release-row .status-new svg,
.detail-link-row .status-new svg { color: #fff; fill: #fff; stroke: #fff; }
.material-admin-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.material-breadcrumb { color: var(--theme-accent) !important; font-size: 16px !important; font-weight: 600; line-height: 1.4; }
.status-important { background: #b80b18; color: #fff; }
.document-link-disabled.important { color: #b80b18; }
.check-field { align-items: center; min-height: 38px; color: #23384d; font-size: 13px; font-weight: 700; }
.check-field input { width: 17px; height: 17px; accent-color: var(--theme-accent, #1769e0); }

@media (max-width: 780px) {
  .hero-copy > span { font-size: 15px; }
  .directory-board .nav-cell { font-size: 14px; }
  .directory-board .directory-category-label { font-size: 12px; }
  .material-breadcrumb { font-size: 15px !important; }
}