/* styles/tabs/144-mapping-theme-fix.css */
/* Mapping + HTML Deep WBS theme alignment.
   Converts the older dark/blue mapping UI to the current cream/olive/gold
   application palette without changing mapping logic or generated data. */

#tp-mapping,
#tp-mapping .mapping-v2-workspace,
#tp-mapping .map-outer,
#tp-mapping .map-wrap,
#tp-mapping .map-tbl,
.mapping-v2-workspace {
  color: #1B1A17 !important;
}

#tp-mapping .map-outer,
#tp-mapping .mapping-v2-workspace,
#tp-mapping .m2-card,
#tp-mapping .m2-stage-card {
  background: linear-gradient(180deg, rgba(255, 253, 248, .98), rgba(250, 248, 244, .96)) !important;
  border: 1px solid rgba(36, 180, 126, .32) !important;
  box-shadow: 0 18px 42px rgba(62, 74, 42, .09) !important;
}

#tp-mapping .map-wrap,
#tp-mapping .mapping-v2-workspace .m2-tbl-wrap,
#tp-mapping .mapping-v2-workspace .m2-tbl-scroll,
#tp-mapping .m2-deep-child-tbl-wrap {
  background: rgba(255, 252, 246, .84) !important;
  border-color: rgba(36, 180, 126, .24) !important;
}

#tp-mapping .map-stats,
#tp-mapping .m2-deep-stats-bar {
  background: linear-gradient(180deg, rgba(255, 248, 226, .82), rgba(238, 241, 230, .62)) !important;
  border-color: rgba(36, 180, 126, .30) !important;
}

#tp-mapping .map-stat,
#tp-mapping .mapping-v2-workspace [style*="background:rgba(5,12,30"],
#tp-mapping .mapping-v2-workspace [style*="background:rgba(5, 12, 30"],
#tp-mapping .mapping-v2-workspace [style*="background:rgba(5,12,28"],
#tp-mapping .mapping-v2-workspace [style*="background:rgba(5, 12, 28"] {
  background: rgba(255, 252, 246, .86) !important;
  border-color: rgba(36, 180, 126, .28) !important;
  color: #1B1A17 !important;
}

#tp-mapping .map-stat .ms-val,
#tp-mapping .m2-deep-stat .dsv {
  color: #188D68 !important;
}

#tp-mapping .map-stat .ms-lbl,
#tp-mapping .m2-deep-stat .dsl,
#tp-mapping .mapping-v2-workspace .m2-muted,
#tp-mapping .mapping-v2-workspace .m2-muted-lbl,
#tp-mapping .mapping-v2-workspace .m2-muted-td,
#tp-mapping .mapping-v2-workspace .m2-file-sub,
#tp-mapping .mapping-v2-workspace .m2-sec-hint,
#tp-mapping .m2-deep-method,
#tp-mapping .m2-deep-child-boq,
#tp-mapping .m2-deep-rid {
  color: #746D61 !important;
}

#tp-mapping .map-toolbar,
#tp-mapping .mapping-v2-workspace .m2-levelbar,
#tp-mapping #smart-map-tabs {
  background: rgba(255, 252, 246, .70) !important;
  border-color: rgba(36, 180, 126, .22) !important;
}

#tp-mapping .map-search,
#tp-mapping .map-filter-btn,
#tp-mapping .mapping-v2-workspace .m2-btn,
#tp-mapping .mapping-v2-workspace .m2-levelbtn,
#tp-mapping .smart-map-tab-btn {
  background: linear-gradient(180deg, rgba(255, 253, 248, .96), rgba(238, 241, 230, .78)) !important;
  border-color: rgba(92, 107, 63, .24) !important;
  color: #4F4A42 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .70) !important;
}

#tp-mapping .map-filter-btn:hover,
#tp-mapping .mapping-v2-workspace .m2-btn:hover,
#tp-mapping .mapping-v2-workspace .m2-levelbtn:hover,
#tp-mapping .smart-map-tab-btn:hover {
  background: rgba(238, 241, 230, .90) !important;
  border-color: rgba(92, 107, 63, .42) !important;
  color: #3E4A2A !important;
}

#tp-mapping .map-filter-btn.active,
#tp-mapping .mapping-v2-workspace .m2-btn.active,
#tp-mapping .mapping-v2-workspace .m2-levelbtn.active,
#tp-mapping .smart-map-tab-btn.active {
  background: rgba(36, 180, 126, .18) !important;
  border-color: rgba(36, 180, 126, .58) !important;
  color: #188D68 !important;
}

#tp-mapping .map-tbl {
  background: #FFFCF6 !important;
  border-color: rgba(36, 180, 126, .22) !important;
}

#tp-mapping .map-tbl thead th,
#tp-mapping .mapping-v2-workspace .map-tbl thead th,
#tp-mapping .mapping-v2-workspace .m2-table thead th,
#tp-mapping .mapping-v2-workspace .m2-th,
#tp-mapping .mapping-v2-workspace .map-tbl thead tr.m2-th-group th,
#tp-mapping .mapping-v2-workspace .map-tbl thead tr.m2-th-cols th {
  background: linear-gradient(180deg, #F5F0E7, #EEE6D8) !important;
  border-color: rgba(36, 180, 126, .30) !important;
  color: #625C52 !important;
}

#tp-mapping .mapping-v2-workspace .map-tbl thead tr.m2-th-group th.m2-zone-act,
#tp-mapping .mapping-v2-workspace .map-tbl thead tr.m2-th-cols th.m2-act-col,
#tp-mapping .mapping-v2-workspace .m2-th.m2-th-act {
  background: rgba(238, 241, 230, .78) !important;
  color: #4E5C35 !important;
}

#tp-mapping .map-tbl td,
#tp-mapping .mapping-v2-workspace .m2-table td,
#tp-mapping .mapping-v2-workspace .map-tbl td {
  background: transparent !important;
  border-color: rgba(226, 221, 211, .78) !important;
  color: #25221E !important;
}

#tp-mapping .map-tbl tbody tr:nth-child(even),
#tp-mapping .mapping-v2-workspace .m2-dr:nth-child(even),
#tp-mapping .mapping-v2-workspace .map-tbl tbody tr:nth-child(even) {
  background: rgba(245, 240, 231, .58) !important;
}

#tp-mapping .map-tbl tr.map-act-row:hover td,
#tp-mapping .map-tbl tbody tr:hover,
#tp-mapping .mapping-v2-workspace .m2-dr:hover,
#tp-mapping .mapping-v2-workspace .map-tbl tbody tr:hover,
#tp-mapping .m2-deep-child-row:hover td {
  background: rgba(238, 241, 230, .72) !important;
}

#tp-mapping .map-tbl tr.map-wbs-row td,
#tp-mapping .smart-group-line td,
#tp-mapping .mapping-v2-workspace .m2-row-activity,
#tp-mapping .mapping-v2-workspace .m2-row-activity td {
  background: linear-gradient(90deg, rgba(238, 241, 230, .88), rgba(255, 252, 246, .58)) !important;
  border-color: rgba(92, 107, 63, .18) !important;
  color: #3E4A2A !important;
}

#tp-mapping .map-tbl tr.map-act-row.map-crit td,
#tp-mapping .mapping-v2-workspace .m2-row-warn,
#tp-mapping .mapping-v2-workspace .m2-review-row td {
  background: rgba(184, 105, 62, .08) !important;
  border-color: rgba(184, 105, 62, .18) !important;
}

#tp-mapping .map-id,
#tp-mapping .mapping-v2-workspace .m2-code,
#tp-mapping .mapping-v2-workspace .m2-td-id,
#tp-mapping .mapping-v2-workspace .m2-td-id-activity,
#tp-mapping .mapping-v2-workspace .m2-td-id-child {
  color: #4E5C35 !important;
}

#tp-mapping .map-name,
#tp-mapping .mapping-v2-workspace .m2-desc,
#tp-mapping .mapping-v2-workspace .m2-td-item,
#tp-mapping .mapping-v2-workspace .m2-itemline,
#tp-mapping .mapping-v2-workspace .m2-activity-oneline,
#tp-mapping .mapping-v2-workspace .m2-team-nm,
#tp-mapping .m2-deep-child-act {
  color: #25221E !important;
}

#tp-mapping .map-num,
#tp-mapping .mapping-v2-workspace .m2-num,
#tp-mapping .mapping-v2-workspace .m2-td-num,
#tp-mapping .mapping-v2-workspace .m2-tr {
  color: #5B533F !important;
}

#tp-mapping .map-pill,
#tp-mapping .mapping-v2-workspace .m2-pill,
#tp-mapping .mapping-v2-workspace .m2-pa,
#tp-mapping .mapping-v2-workspace .m2-pq,
#tp-mapping .mapping-v2-workspace .m2-pr,
#tp-mapping .m2-deep-meta-pill {
  background: rgba(255, 252, 246, .82) !important;
  border-color: rgba(36, 180, 126, .30) !important;
  color: #5B533F !important;
}

#tp-mapping .map-pill.ok,
#tp-mapping .mapping-v2-workspace .m2-pr-ok,
#tp-mapping .m2-deep-lnk.ok,
#tp-mapping .m2-deep-stat .dsv.ok,
#tp-mapping .m2-deep-meta-pill.crew,
#tp-mapping .m2-deep-meta-pill.wpc {
  background: rgba(92, 107, 63, .10) !important;
  border-color: rgba(92, 107, 63, .24) !important;
  color: #4E5C35 !important;
}

#tp-mapping .map-pill.warn,
#tp-mapping .mapping-v2-workspace .m2-pr-warn,
#tp-mapping .m2-deep-lnk.warn,
#tp-mapping .m2-deep-stat .dsv.warn,
#tp-mapping .m2-deep-warn-item,
#tp-mapping .m2-deep-meta-pill.wrk,
#tp-mapping .m2-deep-meta-pill.cd,
#tp-mapping .m2-deep-meta-pill.md {
  background: rgba(36, 180, 126, .13) !important;
  border-color: rgba(36, 180, 126, .30) !important;
  color: #188D68 !important;
}

#tp-mapping .map-pill.crit,
#tp-mapping .m2-deep-stat .dsv.err {
  background: rgba(184, 105, 62, .12) !important;
  border-color: rgba(184, 105, 62, .30) !important;
  color: #9E3A26 !important;
}

#tp-mapping .mapping-v2-workspace details.m2-file,
#tp-mapping .mapping-v2-workspace details.m2-file-block {
  background: rgba(255, 252, 246, .88) !important;
  border-color: rgba(36, 180, 126, .30) !important;
}

#tp-mapping .mapping-v2-workspace details.m2-file > summary,
#tp-mapping .mapping-v2-workspace details.m2-file-block > summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  background: linear-gradient(180deg, rgba(255, 248, 226, .76), rgba(238, 241, 230, .62)) !important;
  border-color: rgba(36, 180, 126, .24) !important;
}

#tp-mapping .mapping-v2-workspace .m2-file-lbl,
#tp-mapping .mapping-v2-workspace details.m2-file-block > summary .m2-file-title,
#tp-mapping .mapping-v2-workspace .m2-major-lbl,
#tp-mapping .mapping-v2-workspace details.m2-major > summary .m2-major-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}

#tp-mapping .mapping-v2-workspace .m2-file-sub,
#tp-mapping .mapping-v2-workspace details.m2-file-block > summary .m2-file-meta {
  flex-shrink: 0 !important;
  margin-left: auto !important;
}

#tp-mapping .mapping-v2-workspace .m2-file-name,
#tp-mapping .mapping-v2-workspace details.m2-file-block > summary .m2-file-title {
  color: #1B1A17 !important;
}

#tp-mapping .mapping-v2-workspace details.m2-major {
  background: rgba(238, 241, 230, .50) !important;
  border-color: rgba(92, 107, 63, .28) !important;
  border-left-color: #5C6B3F !important;
}

#tp-mapping .mapping-v2-workspace details.m2-major > summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  background: rgba(238, 241, 230, .72) !important;
  border-color: rgba(92, 107, 63, .22) !important;
}

#tp-mapping .mapping-v2-workspace .m2-major-dot {
  background: #5C6B3F !important;
}

#tp-mapping .mapping-v2-workspace .m2-major-title,
#tp-mapping .mapping-v2-workspace details.m2-major > summary .m2-major-label {
  color: #3E4A2A !important;
}

#tp-mapping .mapping-v2-workspace .m2-badge-major,
#tp-mapping .mapping-v2-workspace details.m2-major > summary .m2-badge-type {
  background: rgba(92, 107, 63, .10) !important;
  border-color: rgba(92, 107, 63, .24) !important;
  color: #4E5C35 !important;
}

#tp-mapping .mapping-v2-workspace details.m2-section {
  background: rgba(255, 248, 226, .42) !important;
  border-color: rgba(36, 180, 126, .28) !important;
  border-left-color: #24B47E !important;
}

#tp-mapping .mapping-v2-workspace details.m2-section > summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  background: rgba(255, 248, 226, .62) !important;
  border-color: rgba(36, 180, 126, .24) !important;
}

#tp-mapping .mapping-v2-workspace .m2-sec-title,
#tp-mapping .mapping-v2-workspace details.m2-section > summary .m2-sec-title {
  color: #188D68 !important;
}

#tp-mapping .mapping-v2-workspace .m2-badge-sec,
#tp-mapping .mapping-v2-workspace details.m2-section > summary .m2-badge-type {
  background: rgba(36, 180, 126, .13) !important;
  border-color: rgba(36, 180, 126, .28) !important;
  color: #188D68 !important;
}

#tp-mapping .mapping-v2-workspace details.m2-group,
#tp-mapping .mapping-v2-workspace details.m2-desc-block {
  background: rgba(255, 252, 246, .70) !important;
  border-color: rgba(184, 105, 62, .24) !important;
  border-left-color: #B8693E !important;
}

#tp-mapping .mapping-v2-workspace .m2-group-sum,
#tp-mapping .mapping-v2-workspace .m2-desc-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  background: rgba(184, 105, 62, .08) !important;
  border-color: rgba(184, 105, 62, .20) !important;
}

#tp-mapping .mapping-v2-workspace .m2-group-name,
#tp-mapping .mapping-v2-workspace .m2-desc-title {
  color: #8B3A1F !important;
}

#tp-mapping .mapping-v2-workspace .m2-note,
#tp-mapping .mapping-v2-workspace .m2-table-note,
#tp-mapping .smart-map-note,
#tp-mapping .m2-deep-fallback-banner,
#tp-mapping .mapping-v2-workspace [style*="rgba(74,222,128"],
#tp-mapping .mapping-v2-workspace [style*="rgba(74, 222, 128"] {
  background: rgba(238, 241, 230, .72) !important;
  border-color: rgba(92, 107, 63, .22) !important;
  color: #5B533F !important;
}

#tp-mapping .mapping-v2-workspace .m2-summary-title,
#tp-mapping .mapping-v2-workspace .m2-summary-meta,
#tp-mapping .mapping-v2-workspace .m2-td-summary-num,
#tp-mapping .mapping-v2-workspace .m2-td-summary-unit,
#tp-mapping .mapping-v2-workspace .m2-cd,
#tp-mapping .mapping-v2-workspace .m2-dur,
#tp-mapping .mapping-v2-workspace .m2-pl,
#tp-mapping .mapping-v2-workspace .m2-mu,
#tp-mapping .mapping-v2-workspace .m2-mp {
  color: #5B533F !important;
}

/* HTML Deep WBS — emphasize the DAYS (duration) column: bold + distinct blue */
#tp-mapping .mapping-v2-workspace .m2-deep .m2-dur {
  color: #1D4ED8 !important;   /* blue, stands out from brown #5B533F number columns */
  font-weight: 700 !important;
}

#tp-mapping .mapping-v2-workspace .m2-summary-toggle {
  background: rgba(36, 180, 126, .14) !important;
  border-color: rgba(36, 180, 126, .32) !important;
  color: #188D68 !important;
}

#tp-mapping .mapping-v2-workspace .m2-child-branch::before,
#tp-mapping .mapping-v2-workspace .m2-child-branch::after {
  border-color: rgba(92, 107, 63, .28) !important;
}

#tp-mapping .m2-deep-act-group > summary.m2-deep-act-sum {
  background: rgba(238, 241, 230, .70) !important;
  border-left-color: #5C6B3F !important;
}

#tp-mapping .m2-deep-act-group > summary.m2-deep-act-sum:hover {
  background: rgba(238, 241, 230, .92) !important;
}

#tp-mapping .m2-deep-act-name {
  color: #3E4A2A !important;
}

#tp-mapping .m2-deep-meta-pill.dur,
#tp-mapping .m2-deep-meta-pill.qty {
  background: rgba(36, 180, 126, .12) !important;
  border-color: rgba(36, 180, 126, .28) !important;
  color: #188D68 !important;
}

/* Deep WBS generated HTML uses inline legacy colors. These stronger rules
   normalize the visible hierarchy into the new warm cream/olive/gold theme. */
#tp-mapping .m2-html-deep-root {
  background: linear-gradient(180deg, #FFFDF8, #F8F4EA) !important;
  border: 1px solid rgba(36, 180, 126, .28) !important;
  border-radius: 10px !important;
  box-shadow: 0 18px 36px rgba(62, 74, 42, .08) !important;
}

#tp-mapping #mapping-v2-view > div[style*="rgba(5,12,28"],
#tp-mapping #mapping-v2-view > div[style*="rgba(5, 12, 28"],
#tp-mapping .mapping-v2-workspace > div[style*="rgba(5,12,28"],
#tp-mapping .mapping-v2-workspace > div[style*="rgba(5, 12, 28"] {
  background: linear-gradient(180deg, #F7F0DE, #EEF1E6) !important;
  border: 1px solid rgba(36, 180, 126, .36) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72), 0 10px 26px rgba(62, 74, 42, .08) !important;
}

#tp-mapping #mapping-v2-view > div[style*="rgba(5,12,28"] div[style*="JetBrains"],
#tp-mapping #mapping-v2-view > div[style*="rgba(5, 12, 28"] div[style*="JetBrains"],
#tp-mapping .mapping-v2-workspace > div[style*="rgba(5,12,28"] div[style*="JetBrains"],
#tp-mapping .mapping-v2-workspace > div[style*="rgba(5, 12, 28"] div[style*="JetBrains"] {
  color: #188D68 !important;
  text-shadow: none !important;
}

#tp-mapping #mapping-v2-view > div[style*="rgba(5,12,28"] div[style*="font-size:10px"],
#tp-mapping #mapping-v2-view > div[style*="rgba(5, 12, 28"] div[style*="font-size:10px"],
#tp-mapping .mapping-v2-workspace > div[style*="rgba(5,12,28"] div[style*="font-size:10px"],
#tp-mapping .mapping-v2-workspace > div[style*="rgba(5, 12, 28"] div[style*="font-size:10px"] {
  color: #6B665C !important;
}

#tp-mapping .m2-html-deep-root .m2-levelbar {
  gap: 8px !important;
  padding: 0 0 12px !important;
  background: transparent !important;
  border: 0 !important;
}

#tp-mapping .m2-html-deep-root .m2-btn {
  min-height: 36px !important;
  padding: 8px 14px !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, #FFFDF8, #F3E9D3) !important;
  border: 1px solid rgba(36, 180, 126, .26) !important;
  color: #24211D !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  box-shadow: 0 7px 16px rgba(62, 74, 42, .08), inset 0 1px 0 rgba(255, 255, 255, .75) !important;
}

#tp-mapping .m2-html-deep-root .m2-btn:hover {
  background: linear-gradient(180deg, #e8f5e9, #EEF1E6) !important;
  border-color: rgba(92, 107, 63, .45) !important;
  color: #3E4A2A !important;
}

#tp-mapping .m2-html-deep-root details.m2-major {
  background: #F5F7EF !important;
  border-color: rgba(92, 107, 63, .34) !important;
  border-left: 4px solid #5C6B3F !important;
}

#tp-mapping .m2-html-deep-root details.m2-major > summary {
  background: linear-gradient(180deg, #EEF1E6, #E5EBD8) !important;
  color: #2F3A20 !important;
}

#tp-mapping .m2-html-deep-root .m2-major-title,
#tp-mapping .m2-html-deep-root details.m2-major > summary .m2-major-label {
  color: #2F3A20 !important;
  font-weight: 900 !important;
}

#tp-mapping .m2-html-deep-root details.m2-section {
  background: #e8f5e9 !important;
  border-color: rgba(36, 180, 126, .42) !important;
  border-left: 4px solid #24B47E !important;
}

#tp-mapping .m2-html-deep-root details.m2-section > summary {
  background: linear-gradient(180deg, #c8f0d0, #a8e8b8) !important;
  color: #188D68 !important;
}

#tp-mapping .m2-html-deep-root .m2-sec-title,
#tp-mapping .m2-html-deep-root details.m2-section > summary .m2-sec-title {
  color: #188D68 !important;
  font-weight: 900 !important;
}

#tp-mapping .m2-html-deep-root details.m2-group {
  background: #FFFCF6 !important;
  border-color: rgba(184, 105, 62, .30) !important;
  color: #1B1A17 !important;
}

#tp-mapping .m2-html-deep-root details.m2-group[data-tree-level="4"] {
  background: #F8E9DF !important;
  border-color: rgba(184, 105, 62, .42) !important;
}

#tp-mapping .m2-html-deep-root details.m2-group[data-tree-level="4"] > summary.m2-group-sum {
  background: linear-gradient(180deg, #F3DCCF, #EBC9B7) !important;
  border-left-color: #B8693E !important;
}

#tp-mapping .m2-html-deep-root details.m2-group[data-tree-level="4"] > summary .m2-group-name {
  color: #71361F !important;
}

#tp-mapping .m2-html-deep-root details.m2-group[data-tree-level="5"] {
  background: #F6F1E8 !important;
  border-color: rgba(126, 111, 84, .30) !important;
}

#tp-mapping .m2-html-deep-root details.m2-group[data-tree-level="5"] > summary.m2-group-sum {
  background: linear-gradient(180deg, #EFE7D8, #E4DBC9) !important;
  border-left-color: #7E6F54 !important;
}

#tp-mapping .m2-html-deep-root details.m2-group[data-tree-level="5"] > summary .m2-group-name {
  color: #4A3F2F !important;
}

#tp-mapping .m2-html-deep-root details.m2-group[data-tree-level="6"],
#tp-mapping .m2-html-deep-root details.m2-group[data-tree-level="7"],
#tp-mapping .m2-html-deep-root details.m2-group[data-tree-level="8"] {
  background: #F9F5ED !important;
  border-color: rgba(92, 107, 63, .24) !important;
}

#tp-mapping .m2-html-deep-root details.m2-group[data-tree-level="6"] > summary.m2-group-sum,
#tp-mapping .m2-html-deep-root details.m2-group[data-tree-level="7"] > summary.m2-group-sum,
#tp-mapping .m2-html-deep-root details.m2-group[data-tree-level="8"] > summary.m2-group-sum {
  background: linear-gradient(180deg, #EEF1E6, #E8E3D6) !important;
  border-left-color: #5C6B3F !important;
}

#tp-mapping .m2-html-deep-root details.m2-group[data-tree-level="6"] > summary .m2-group-name,
#tp-mapping .m2-html-deep-root details.m2-group[data-tree-level="7"] > summary .m2-group-name,
#tp-mapping .m2-html-deep-root details.m2-group[data-tree-level="8"] > summary .m2-group-name {
  color: #3E4A2A !important;
}

#tp-mapping .m2-html-deep-root .m2-group-sum {
  min-height: 40px !important;
  padding: 10px 14px !important;
  color: #1B1A17 !important;
}

#tp-mapping .m2-html-deep-root .m2-group-name {
  color: #1B1A17 !important;
  font-weight: 900 !important;
  text-shadow: none !important;
}

#tp-mapping .m2-html-deep-root .m2-group-body {
  background: rgba(255, 252, 246, .74) !important;
  color: #1B1A17 !important;
}

#tp-mapping .m2-html-deep-root .m2-tbl-scroll {
  background: #FFFCF6 !important;
  border: 1px solid rgba(126, 111, 84, .28) !important;
  border-radius: 8px !important;
}

#tp-mapping .m2-html-deep-root .m2-table {
  background: #FFFCF6 !important;
  color: #1B1A17 !important;
}

#tp-mapping .m2-html-deep-root .m2-table thead th,
#tp-mapping .m2-html-deep-root .m2-table .m2-th {
  background: #2F2B24 !important;
  border-color: rgba(36, 180, 126, .45) !important;
  color: #FFF8E8 !important;
  font-weight: 900 !important;
  text-shadow: none !important;
}

#tp-mapping .m2-html-deep-root .m2-table tbody tr {
  background: #FFFCF6 !important;
}

#tp-mapping .m2-html-deep-root .m2-table tbody tr:nth-child(even) {
  background: #F7F0E2 !important;
}

#tp-mapping .m2-html-deep-root .m2-table td {
  background: transparent !important;
  border-color: rgba(126, 111, 84, .24) !important;
  color: #24211D !important;
  text-shadow: none !important;
}

#tp-mapping .m2-html-deep-root .m2-table tbody tr:hover td {
  background: rgba(238, 241, 230, .76) !important;
}

#tp-mapping .m2-html-deep-root .m2-td-id,
#tp-mapping .m2-html-deep-root .m2-td-id-activity,
#tp-mapping .m2-html-deep-root .m2-code {
  color: #3E3429 !important;
  font-weight: 900 !important;
}

#tp-mapping .m2-html-deep-root .m2-summary-title,
#tp-mapping .m2-html-deep-root .m2-td-item,
#tp-mapping .m2-html-deep-root .m2-itemline,
#tp-mapping .m2-html-deep-root .m2-desc {
  color: #1B1A17 !important;
  font-weight: 800 !important;
}

#tp-mapping .m2-html-deep-root .m2-summary-meta,
#tp-mapping .m2-html-deep-root .m2-team-nm {
  color: #5B533F !important;
}

#tp-mapping .m2-html-deep-root .m2-pr-ok {
  color: #2F6B3F !important;
  font-weight: 800 !important;
}

#tp-mapping .m2-html-deep-root .m2-pr-warn {
  color: #188D68 !important;
  font-weight: 800 !important;
}

#tp-mapping .m2-html-deep-root .m2-pa,
#tp-mapping .m2-html-deep-root .m2-pq,
#tp-mapping .m2-html-deep-root .m2-pill,
#tp-mapping .m2-html-deep-root .m2-badge-type,
#tp-mapping .m2-html-deep-root .m2-badge-major,
#tp-mapping .m2-html-deep-root .m2-badge-sec {
  background: rgba(255, 252, 246, .82) !important;
  border: 1px solid rgba(36, 180, 126, .32) !important;
  color: #188D68 !important;
  font-weight: 800 !important;
}

#tp-mapping .m2-html-deep-root .m2-summary-toggle {
  background: #e8f5e9 !important;
  border-color: rgba(36, 180, 126, .28) !important;
  color: #3E3429 !important;
}

/* The visible Mapping V2 surface can be mounted under the Labour panel rather
   than #tp-mapping, so keep these final rules scoped to the real workspace. */
#tp-labour .mapping-v2-workspace,
.mapping-v2-workspace {
  color: #1B1A17 !important;
}

#tp-labour .mapping-v2-workspace .m2-html-deep-root,
.mapping-v2-workspace .m2-html-deep-root {
  background: linear-gradient(180deg, #FFFDF8, #F8F4EA) !important;
  border: 1px solid rgba(36, 180, 126, .28) !important;
  border-radius: 10px !important;
  box-shadow: 0 18px 36px rgba(62, 74, 42, .08) !important;
}

#mapping-v2-view > div[style*="background:rgba(5,12,28"],
#mapping-v2-view > div[style*="background:rgba(5, 12, 28"],
#mapping-v2-view > div[style*="rgba(5,12,28"],
#mapping-v2-view > div[style*="rgba(5, 12, 28"] {
  background: linear-gradient(180deg, #F7F0DE, #EEF1E6) !important;
  border: 1px solid rgba(36, 180, 126, .36) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72), 0 10px 26px rgba(62, 74, 42, .08) !important;
}

#mapping-v2-view > div[style*="rgba(5,12,28"] div[style*="font-family"],
#mapping-v2-view > div[style*="rgba(5, 12, 28"] div[style*="font-family"] {
  color: #188D68 !important;
  text-shadow: none !important;
}

#mapping-v2-view > div[style*="rgba(5,12,28"] div[style*="font-size:10px"],
#mapping-v2-view > div[style*="rgba(5, 12, 28"] div[style*="font-size:10px"] {
  color: #6B665C !important;
}

.mapping-v2-workspace .m2-html-deep-root .m2-levelbar {
  gap: 8px !important;
  padding: 0 0 12px !important;
  background: transparent !important;
  border: 0 !important;
}

.mapping-v2-workspace .m2-html-deep-root .m2-btn {
  min-height: 36px !important;
  padding: 8px 14px !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, #FFFDF8, #F3E9D3) !important;
  border: 1px solid rgba(36, 180, 126, .26) !important;
  color: #24211D !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  box-shadow: 0 7px 16px rgba(62, 74, 42, .08), inset 0 1px 0 rgba(255, 255, 255, .75) !important;
}

.mapping-v2-workspace .m2-html-deep-root .m2-btn:hover {
  background: linear-gradient(180deg, #e8f5e9, #EEF1E6) !important;
  border-color: rgba(92, 107, 63, .45) !important;
  color: #3E4A2A !important;
}

.mapping-v2-workspace .m2-html-deep-root details.m2-major {
  background: #F5F7EF !important;
  border-color: rgba(92, 107, 63, .34) !important;
  border-left: 4px solid #5C6B3F !important;
}

.mapping-v2-workspace .m2-html-deep-root details.m2-major > summary {
  background: linear-gradient(180deg, #EEF1E6, #E5EBD8) !important;
  color: #2F3A20 !important;
}

.mapping-v2-workspace .m2-html-deep-root .m2-major-dot {
  background: #5C6B3F !important;
}

.mapping-v2-workspace .m2-html-deep-root .m2-major-title,
.mapping-v2-workspace .m2-html-deep-root details.m2-major > summary .m2-major-label {
  color: #2F3A20 !important;
  font-weight: 900 !important;
}

.mapping-v2-workspace .m2-html-deep-root details.m2-section {
  background: #e8f5e9 !important;
  border-color: rgba(36, 180, 126, .42) !important;
  border-left: 4px solid #24B47E !important;
}

.mapping-v2-workspace .m2-html-deep-root details.m2-section > summary {
  background: linear-gradient(180deg, #c8f0d0, #a8e8b8) !important;
  color: #188D68 !important;
}

.mapping-v2-workspace .m2-html-deep-root .m2-sec-title,
.mapping-v2-workspace .m2-html-deep-root details.m2-section > summary .m2-sec-title {
  color: #188D68 !important;
  font-weight: 900 !important;
}

.mapping-v2-workspace .m2-html-deep-root details.m2-group {
  background: #FFFCF6 !important;
  border-color: rgba(184, 105, 62, .30) !important;
  color: #1B1A17 !important;
}

.mapping-v2-workspace .m2-html-deep-root details.m2-group[data-tree-level="4"] {
  background: #F8E9DF !important;
  border-color: rgba(184, 105, 62, .42) !important;
}

.mapping-v2-workspace .m2-html-deep-root details.m2-group[data-tree-level="4"] > summary.m2-group-sum {
  background: linear-gradient(180deg, #F3DCCF, #EBC9B7) !important;
  border-left-color: #B8693E !important;
}

.mapping-v2-workspace .m2-html-deep-root details.m2-group[data-tree-level="4"] > summary .m2-group-name {
  color: #71361F !important;
}

.mapping-v2-workspace .m2-html-deep-root details.m2-group[data-tree-level="5"] {
  background: #F6F1E8 !important;
  border-color: rgba(126, 111, 84, .30) !important;
}

.mapping-v2-workspace .m2-html-deep-root details.m2-group[data-tree-level="5"] > summary.m2-group-sum {
  background: linear-gradient(180deg, #EFE7D8, #E4DBC9) !important;
  border-left-color: #7E6F54 !important;
}

.mapping-v2-workspace .m2-html-deep-root details.m2-group[data-tree-level="5"] > summary .m2-group-name {
  color: #4A3F2F !important;
}

.mapping-v2-workspace .m2-html-deep-root details.m2-group[data-tree-level="6"],
.mapping-v2-workspace .m2-html-deep-root details.m2-group[data-tree-level="7"],
.mapping-v2-workspace .m2-html-deep-root details.m2-group[data-tree-level="8"] {
  background: #F9F5ED !important;
  border-color: rgba(92, 107, 63, .24) !important;
}

.mapping-v2-workspace .m2-html-deep-root details.m2-group[data-tree-level="6"] > summary.m2-group-sum,
.mapping-v2-workspace .m2-html-deep-root details.m2-group[data-tree-level="7"] > summary.m2-group-sum,
.mapping-v2-workspace .m2-html-deep-root details.m2-group[data-tree-level="8"] > summary.m2-group-sum {
  background: linear-gradient(180deg, #EEF1E6, #E8E3D6) !important;
  border-left-color: #5C6B3F !important;
}

.mapping-v2-workspace .m2-html-deep-root details.m2-group[data-tree-level="6"] > summary .m2-group-name,
.mapping-v2-workspace .m2-html-deep-root details.m2-group[data-tree-level="7"] > summary .m2-group-name,
.mapping-v2-workspace .m2-html-deep-root details.m2-group[data-tree-level="8"] > summary .m2-group-name {
  color: #3E4A2A !important;
}

.mapping-v2-workspace .m2-html-deep-root .m2-group-sum {
  min-height: 40px !important;
  padding: 10px 14px !important;
  color: #1B1A17 !important;
}

.mapping-v2-workspace .m2-html-deep-root .m2-group-name {
  color: #1B1A17 !important;
  font-weight: 900 !important;
  text-shadow: none !important;
}

.mapping-v2-workspace .m2-html-deep-root .m2-group-body {
  background: rgba(255, 252, 246, .74) !important;
  color: #1B1A17 !important;
}

.mapping-v2-workspace .m2-html-deep-root .m2-tbl-scroll {
  background: #FFFCF6 !important;
  border: 1px solid rgba(126, 111, 84, .28) !important;
  border-radius: 8px !important;
}

.mapping-v2-workspace .m2-html-deep-root .m2-table {
  background: #FFFCF6 !important;
  color: #1B1A17 !important;
}

.mapping-v2-workspace .m2-html-deep-root .m2-table thead th,
.mapping-v2-workspace .m2-html-deep-root .m2-table .m2-th {
  background: #2F2B24 !important;
  border-color: rgba(36, 180, 126, .45) !important;
  color: #FFF8E8 !important;
  font-weight: 900 !important;
  text-shadow: none !important;
}

.mapping-v2-workspace .m2-html-deep-root .m2-table tbody tr {
  background: #FFFCF6 !important;
}

.mapping-v2-workspace .m2-html-deep-root .m2-table tbody tr:nth-child(even) {
  background: #F7F0E2 !important;
}

.mapping-v2-workspace .m2-html-deep-root .m2-table td {
  background: transparent !important;
  border-color: rgba(126, 111, 84, .24) !important;
  color: #24211D !important;
  text-shadow: none !important;
}

.mapping-v2-workspace .m2-html-deep-root .m2-table tbody tr:hover td {
  background: rgba(238, 241, 230, .76) !important;
}

.mapping-v2-workspace .m2-html-deep-root .m2-td-id,
.mapping-v2-workspace .m2-html-deep-root .m2-td-id-activity,
.mapping-v2-workspace .m2-html-deep-root .m2-code {
  color: #3E3429 !important;
  font-weight: 900 !important;
}

.mapping-v2-workspace .m2-html-deep-root .m2-summary-title,
.mapping-v2-workspace .m2-html-deep-root .m2-td-item,
.mapping-v2-workspace .m2-html-deep-root .m2-itemline,
.mapping-v2-workspace .m2-html-deep-root .m2-desc {
  color: #1B1A17 !important;
  font-weight: 800 !important;
}

.mapping-v2-workspace .m2-html-deep-root .m2-summary-meta,
.mapping-v2-workspace .m2-html-deep-root .m2-team-nm {
  color: #5B533F !important;
}

.mapping-v2-workspace .m2-html-deep-root .m2-pr-ok {
  color: #2F6B3F !important;
  font-weight: 800 !important;
}

.mapping-v2-workspace .m2-html-deep-root .m2-pr-warn {
  color: #188D68 !important;
  font-weight: 800 !important;
}

.mapping-v2-workspace .m2-html-deep-root .m2-pa,
.mapping-v2-workspace .m2-html-deep-root .m2-pq,
.mapping-v2-workspace .m2-html-deep-root .m2-pill,
.mapping-v2-workspace .m2-html-deep-root .m2-badge-type,
.mapping-v2-workspace .m2-html-deep-root .m2-badge-major,
.mapping-v2-workspace .m2-html-deep-root .m2-badge-sec {
  background: rgba(255, 252, 246, .86) !important;
  border: 1px solid rgba(36, 180, 126, .34) !important;
  color: #188D68 !important;
  font-weight: 800 !important;
}

.mapping-v2-workspace .m2-html-deep-root .m2-summary-toggle {
  background: #e8f5e9 !important;
  border-color: rgba(36, 180, 126, .28) !important;
  color: #3E3429 !important;
}

.mapping-v2-workspace [style*="background:rgba(5,12,30"],
.mapping-v2-workspace [style*="background:rgba(5, 12, 30"],
.mapping-v2-workspace [style*="background:rgba(5,12,28"],
.mapping-v2-workspace [style*="background:rgba(5, 12, 28"] {
  background: linear-gradient(180deg, #F7F0DE, #EEF1E6) !important;
  border-color: rgba(36, 180, 126, .34) !important;
  color: #1B1A17 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72), 0 8px 18px rgba(62, 74, 42, .08) !important;
}

.mapping-v2-workspace [style*="background:rgba(5,12,30"] [style*="font-family"],
.mapping-v2-workspace [style*="background:rgba(5, 12, 30"] [style*="font-family"],
.mapping-v2-workspace [style*="background:rgba(5,12,28"] [style*="font-family"],
.mapping-v2-workspace [style*="background:rgba(5, 12, 28"] [style*="font-family"] {
  color: #188D68 !important;
}

.mapping-v2-workspace [style*="background:rgba(5,12,30"] [style*="font-size:9px"],
.mapping-v2-workspace [style*="background:rgba(5, 12, 30"] [style*="font-size:9px"],
.mapping-v2-workspace [style*="background:rgba(5,12,30"] [style*="font-size:10px"],
.mapping-v2-workspace [style*="background:rgba(5, 12, 30"] [style*="font-size:10px"],
.mapping-v2-workspace [style*="background:rgba(5,12,28"] [style*="font-size:10px"],
.mapping-v2-workspace [style*="background:rgba(5, 12, 28"] [style*="font-size:10px"] {
  color: #6B665C !important;
}

.mapping-v2-workspace > .m2-levelbar,
.mapping-v2-workspace #mapping-v2-view > .m2-levelbar {
  background: transparent !important;
  border: 0 !important;
}

.mapping-v2-workspace .m2-btn {
  min-height: 36px !important;
  padding: 8px 14px !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, #FFFDF8, #F3E9D3) !important;
  border: 1px solid rgba(36, 180, 126, .26) !important;
  color: #24211D !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  box-shadow: 0 7px 16px rgba(62, 74, 42, .08), inset 0 1px 0 rgba(255, 255, 255, .75) !important;
}

.mapping-v2-workspace .m2-btn:hover {
  background: linear-gradient(180deg, #e8f5e9, #EEF1E6) !important;
  border-color: rgba(92, 107, 63, .45) !important;
  color: #3E4A2A !important;
}

.mapping-v2-workspace .m2-btn.m2-btn-sub,
.mapping-v2-workspace .m2-btn:disabled {
  opacity: .66 !important;
  color: #6B665C !important;
}

.mapping-v2-workspace .m2-html-deep-root .m2-table {
  min-width: 1280px !important;
  table-layout: auto !important;
}

.mapping-v2-workspace .m2-html-deep-root .m2-table td,
.mapping-v2-workspace .m2-html-deep-root .m2-table th {
  overflow: visible !important;
  text-overflow: clip !important;
}

.mapping-v2-workspace .m2-html-deep-root .m2-summary-inline {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
}

.mapping-v2-workspace .m2-html-deep-root .m2-summary-title {
  white-space: normal !important;
  line-height: 1.35 !important;
}

.mapping-v2-workspace .m2-html-deep-root .m2-summary-meta {
  white-space: nowrap !important;
}

/* User-facing Mapping Sheet cleanup: hide only the marked status/control
   strips, keeping the sub-tabs and the Deep WBS grouped content visible. */
.mapping-v2-workspace .m2-workflow-summary-strip,
.mapping-v2-workspace .m2-html-deep-control-strip,
.mapping-v2-workspace .m2-html-deep-result-stats {
  display: none !important;
}

#labourOut .aipe-result-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

#labourOut .aipe-result-download {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 13px;
  border: 1px solid rgba(36, 180, 126, .42) !important;
  border-radius: 999px !important;
  background: rgba(255, 253, 248, .10) !important;
  color: #F5EFE3 !important;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 253, 248, .10) !important;
}

#labourOut .aipe-result-download svg {
  width: 15px;
  height: 15px;
  stroke-width: 2.4;
}

#labourOut .aipe-result-download:hover {
  border-color: rgba(242, 213, 133, .72) !important;
  background: rgba(255, 253, 248, .16) !important;
  color: #FFF8E8 !important;
  transform: translateY(-1px);
}

.hdr .aipe-mapping-header-download {
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  justify-self: end !important;
  grid-column: 4 !important;
  gap: 8px !important;
  min-height: 36px !important;
  padding: 8px 14px !important;
  border: 1px solid rgba(36, 180, 126, .34) !important;
  border-radius: 999px !important;
  border-color: rgba(36, 180, 126, .34) !important;
  background: linear-gradient(180deg, #FFFDF8, #F3E9D3) !important;
  color: #2F2B24 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  box-shadow: 0 8px 18px rgba(62, 74, 42, .10), inset 0 1px 0 rgba(255, 255, 255, .78) !important;
}

body[data-active-tab="labour"] .hdr .aipe-mapping-header-download,
body[data-active-tab="mapping"] .hdr .aipe-mapping-header-download,
.hdr .aipe-mapping-header-download.is-visible {
  display: inline-flex !important;
}

.hdr .aipe-mapping-header-download svg {
  width: 15px !important;
  height: 15px !important;
  stroke-width: 2.4 !important;
  flex: 0 0 15px !important;
}

.hdr .aipe-mapping-header-download:hover {
  border-color: rgba(36, 180, 126, .72) !important;
  background: linear-gradient(180deg, #e8f5e9, #EEF1E6) !important;
  color: #3E4A2A !important;
}

@media (max-width: 860px) {
  .hdr .aipe-mapping-header-download {
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;
    width: 100% !important;
  }

  #labourOut .aipe-result-actions {
    width: 100%;
    justify-content: space-between;
  }
}

/* styles/tabs/maestro-relations.css */
#tp-maestro {
  --mr-bg: #f8fafc;
  --mr-card: #ffffff;
  --mr-line: rgba(15, 23, 42, .10);
  --mr-text: #0f172a;
  --mr-muted: #64748b;
  --mr-blue: #2563eb;
  --mr-green: #16a34a;
  --mr-amber: #d97706;
  --mr-red: #dc2626;
  color: var(--mr-text);
}

.maestro-shell {
  padding: 18px;
  max-width: 1500px;
  margin: 0 auto;
}

.maestro-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  padding: 18px;
  background: linear-gradient(135deg, #0f172a, #1f2937);
  border-radius: 8px;
  color: #f8fafc;
  box-shadow: 0 16px 36px rgba(15, 23, 42, .16);
}

.maestro-kicker {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #93c5fd;
  font-weight: 800;
}

.maestro-title {
  margin: 3px 0 4px;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: 0;
}

.maestro-sub {
  margin: 0;
  color: #cbd5e1;
  font-size: 13px;
}

.maestro-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 420px;
}

.maestro-btn,
.maestro-icon-btn {
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .08);
  color: #f8fafc;
  border-radius: 6px;
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.maestro-btn.primary {
  background: #2563eb;
  border-color: #2563eb;
  min-width: 170px;
}
.maestro-btn.success { background: #16a34a; border-color: #16a34a; }
.maestro-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.maestro-notice {
  margin: 14px 0;
  padding: 11px 13px;
  border: 1px solid rgba(37, 99, 235, .18);
  background: rgba(37, 99, 235, .06);
  color: #1e40af;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
}

.maestro-notice.warn {
  border-color: rgba(217, 119, 6, .24);
  background: rgba(217, 119, 6, .08);
  color: #92400e;
}

.maestro-notice.fail {
  border-color: rgba(220, 38, 38, .24);
  background: rgba(220, 38, 38, .08);
  color: #991b1b;
}

.maestro-health {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 12px;
  margin-bottom: 14px;
}

.maestro-score,
.maestro-kpis > div,
.maestro-panel {
  background: var(--mr-card);
  border: 1px solid var(--mr-line);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .06);
}

.maestro-score {
  min-height: 96px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.maestro-score span {
  font-size: 34px;
  font-weight: 900;
  color: var(--mr-blue);
  line-height: 1;
}

.maestro-score small,
.maestro-kpis span,
.maestro-panel-head span {
  color: var(--mr-muted);
  font-size: 11px;
  font-weight: 700;
}

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

.maestro-kpis > div {
  padding: 15px;
}

.maestro-kpis b {
  display: block;
  font-size: 24px;
  line-height: 1;
}

.maestro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}

.maestro-panel {
  min-height: 260px;
  overflow: hidden;
}

.maestro-panel.priority {
  min-height: 340px;
}

.maestro-panel.wide,
.maestro-panel.full {
  grid-column: 1 / -1;
}

.maestro-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--mr-line);
  background: #f8fafc;
}

.maestro-panel-head h3 {
  margin: 0;
  font-size: 14px;
  letter-spacing: 0;
}

.maestro-table-wrap,
.maestro-tree,
.maestro-list,
.maestro-explain,
.maestro-gantt {
  padding: 12px;
  overflow: auto;
  max-height: 390px;
  font-size: 12px;
}

.maestro-empty {
  color: var(--mr-muted);
  display: flex;
  align-items: center;
  min-height: 120px;
}

.maestro-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 880px;
}

.maestro-demo-intro {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 12px;
  align-items: center;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid rgba(37, 99, 235, .18);
  border-radius: 8px;
  background: rgba(37, 99, 235, .06);
}

.maestro-demo-intro b {
  font-size: 13px;
}

.maestro-demo-intro span {
  color: var(--mr-muted);
  font-size: 12px;
}

.maestro-demo-intro button {
  grid-row: 1 / span 2;
  grid-column: 2;
}

.maestro-table th,
.maestro-table td {
  text-align: left;
  border-bottom: 1px solid rgba(15, 23, 42, .08);
  padding: 8px 9px;
  vertical-align: top;
}

.maestro-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f8fafc;
  color: #334155;
  font-size: 11px;
}

.maestro-table tr {
  cursor: default;
}

.maestro-table tr:hover td {
  background: rgba(37, 99, 235, .04);
}

.mr-pill {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  border: 1px solid rgba(15, 23, 42, .10);
  color: #334155;
  background: #f1f5f9;
  white-space: nowrap;
}

.mr-pill.high { color: #166534; background: #dcfce7; border-color: rgba(22, 101, 52, .18); }
.mr-pill.mid { color: #92400e; background: #fef3c7; border-color: rgba(146, 64, 14, .18); }
.mr-pill.low { color: #991b1b; background: #fee2e2; border-color: rgba(153, 27, 27, .18); }
.mr-pill.ai { color: #3730a3; background: #e0e7ff; border-color: rgba(55, 48, 163, .18); }

.maestro-list {
  display: block;
}

.maestro-list-item {
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 7px;
  padding: 9px;
  margin-bottom: 8px;
  background: #ffffff;
}

.maestro-list-item b {
  display: block;
  margin-bottom: 3px;
}

.maestro-list-item.warn { border-color: rgba(217, 119, 6, .25); }
.maestro-list-item.fail { border-color: rgba(220, 38, 38, .25); }
.maestro-list-item.pass { border-color: rgba(22, 163, 74, .25); }

.maestro-tree-row {
  padding: 6px 8px;
  border-bottom: 1px solid rgba(15, 23, 42, .06);
  font-family: "JetBrains Mono", monospace;
  color: #334155;
}

.maestro-explain-block {
  display: grid;
  gap: 9px;
}

.maestro-explain-block div {
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 7px;
  padding: 9px;
}

.maestro-gantt {
  min-height: 260px;
  max-height: 520px;
}

.maestro-gantt-row {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 10px;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid rgba(15, 23, 42, .06);
}

.maestro-gantt-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #334155;
}

.maestro-gantt-track {
  position: relative;
  height: 22px;
  background: #eef2f7;
  border-radius: 4px;
  overflow: hidden;
}

.maestro-gantt-bar {
  position: absolute;
  top: 4px;
  height: 14px;
  min-width: 4px;
  border-radius: 4px;
  background: #2563eb;
}

.maestro-gantt-bar.warn { background: #d97706; }
.maestro-gantt-bar.critical { background: #dc2626; }

@media (max-width: 980px) {
  .maestro-header,
  .maestro-health,
  .maestro-grid {
    grid-template-columns: 1fr;
  }
  .maestro-header {
    display: grid;
  }
  .maestro-actions {
    min-width: 0;
    justify-content: stretch;
  }
  .maestro-btn {
    flex: 1 1 160px;
  }
  .maestro-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .maestro-panel.wide,
  .maestro-panel.full {
    grid-column: auto;
  }
}

/* styles/tabs/nexus.css */
/* Nexus Relations — standalone styling (.nx- prefix). Independent of Maestro. */
#tp-nexus {
  --nx-bg: #f7f7fb;
  --nx-card: #ffffff;
  --nx-line: rgba(15, 23, 42, .10);
  --nx-text: #0f172a;
  --nx-muted: #64748b;
  --nx-accent: #6d28d9;       /* indigo/violet — distinct from Maestro blue */
  --nx-accent2: #4f46e5;
  --nx-green: #16a34a;
  --nx-amber: #d97706;
  --nx-red: #dc2626;
  color: var(--nx-text);
}

.nx-shell { padding: 18px; max-width: 1540px; margin: 0 auto; }

.nx-header {
  display: flex; justify-content: space-between; gap: 16px; align-items: flex-start;
  padding: 18px; border-radius: 10px; color: #f8fafc;
  background: linear-gradient(135deg, #1e1b4b, #312e81 55%, #4c1d95);
  box-shadow: 0 16px 36px rgba(30, 27, 75, .22);
}
.nx-kicker { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #c4b5fd; font-weight: 800; }
.nx-title { margin: 3px 0 4px; font-size: 28px; line-height: 1.1; }
.nx-sub { margin: 0; color: #ddd6fe; font-size: 13px; max-width: 640px; }

.nx-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; align-items: center; min-width: 460px; }
.nx-toggle { display: inline-flex; align-items: center; gap: 6px; color: #ede9fe; font-size: 12px; font-weight: 700; cursor: pointer; user-select: none; }
.nx-toggle input { accent-color: #a78bfa; }

.nx-btn {
  border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .08);
  color: #f8fafc; border-radius: 7px; padding: 9px 12px; font-size: 12px; font-weight: 800; cursor: pointer;
}
.nx-btn.primary { background: var(--nx-accent2); border-color: var(--nx-accent2); min-width: 150px; }
.nx-btn.success { background: var(--nx-green); border-color: var(--nx-green); }
.nx-btn.xs { padding: 4px 9px; min-width: 0; font-size: 11px; }
.nx-btn:hover { filter: brightness(1.08); }
.nx-btn:disabled { opacity: .45; cursor: not-allowed; }

.nx-notice {
  margin: 14px 0; padding: 11px 13px; border-radius: 8px; font-size: 12px; font-weight: 700;
  border: 1px solid rgba(109, 40, 217, .18); background: rgba(109, 40, 217, .06); color: #5b21b6;
}
.nx-notice.warn { border-color: rgba(217, 119, 6, .24); background: rgba(217, 119, 6, .08); color: #92400e; }
.nx-notice.fail { border-color: rgba(220, 38, 38, .24); background: rgba(220, 38, 38, .08); color: #991b1b; }

.nx-health { display: grid; grid-template-columns: 170px 1fr; gap: 12px; margin-bottom: 14px; }
.nx-score, .nx-kpis > div, .nx-panel {
  background: var(--nx-card); border: 1px solid var(--nx-line); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .06);
}
.nx-score { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px; }
.nx-score span { font-size: 40px; font-weight: 900; color: var(--nx-accent); line-height: 1; }
.nx-score small { color: var(--nx-muted); font-size: 11px; font-weight: 700; margin-top: 4px; }
.nx-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.nx-kpis > div { padding: 10px; text-align: center; }
.nx-kpis b { display: block; font-size: 20px; font-weight: 900; color: var(--nx-text); }
.nx-kpis span { font-size: 10px; color: var(--nx-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }

.nx-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.nx-panel { padding: 14px; overflow: hidden; }
.nx-panel.full { grid-column: 1 / -1; }
.nx-panel.wide { grid-column: 1 / -1; }
.nx-panel.priority { border-color: rgba(109, 40, 217, .35); box-shadow: 0 12px 30px rgba(109, 40, 217, .12); }
@media (min-width: 1180px) { .nx-panel.wide { grid-column: auto; } }

.nx-panel-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; gap: 10px; }
.nx-panel-head h3 { margin: 0; font-size: 14px; font-weight: 800; }
.nx-panel-head span { font-size: 11px; color: var(--nx-muted); font-weight: 700; }

.nx-empty { color: var(--nx-muted); font-size: 12px; font-style: italic; padding: 10px 2px; }
.nx-muted { color: var(--nx-muted); }

.nx-tree { max-height: 320px; overflow: auto; font-size: 12px; }
.nx-tree-row { padding: 3px 6px; border-bottom: 1px dashed var(--nx-line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.nx-table-wrap { max-height: 420px; overflow: auto; }
.nx-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.nx-table th { position: sticky; top: 0; background: #f1f0fa; text-align: left; padding: 7px 8px; font-weight: 800; border-bottom: 1px solid var(--nx-line); white-space: nowrap; }
.nx-table td { padding: 6px 8px; border-bottom: 1px solid var(--nx-line); vertical-align: top; }
.nx-table tbody tr:hover { background: rgba(109, 40, 217, .05); cursor: default; }
#nexusRelationships .nx-table tbody tr { cursor: pointer; }

.nx-pill { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 800; background: #eef2ff; color: #3730a3; white-space: nowrap; }
.nx-pill.high { background: rgba(22, 163, 74, .12); color: #166534; }
.nx-pill.mid { background: rgba(217, 119, 6, .12); color: #92400e; }
.nx-pill.low { background: rgba(220, 38, 38, .12); color: #991b1b; }

.nx-list { max-height: 360px; overflow: auto; display: flex; flex-direction: column; gap: 8px; }
.nx-list-item { padding: 8px 10px; border-radius: 8px; border-left: 3px solid var(--nx-line); background: #fafafe; font-size: 12px; }
.nx-list-item b { display: block; font-weight: 800; margin-bottom: 2px; }
.nx-list-item span { color: var(--nx-muted); }
.nx-list-item.warn { border-left-color: var(--nx-amber); background: rgba(217, 119, 6, .05); }
.nx-list-item.fail { border-left-color: var(--nx-red); background: rgba(220, 38, 38, .05); }
.nx-list-item.pass { border-left-color: var(--nx-green); background: rgba(22, 163, 74, .05); }
.nx-learn-actions { display: flex; gap: 6px; margin-top: 6px; }
.nx-learn-actions .nx-btn { color: #1e1b4b; background: #ede9fe; border-color: #ddd6fe; }
.nx-learn-actions .nx-btn.success { color: #fff; background: var(--nx-green); border-color: var(--nx-green); }

.nx-explain { font-size: 12px; }
.nx-explain-block > div { padding: 7px 0; border-bottom: 1px dashed var(--nx-line); }
.nx-explain-block b { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--nx-accent); margin-bottom: 2px; }

/* Gantt preview */
.nx-gantt { max-height: 460px; overflow: auto; }
.nx-gantt-group { margin-bottom: 10px; }
.nx-gantt-group-head { font-size: 11px; font-weight: 800; color: #312e81; background: #f1f0fa; padding: 4px 8px; border-radius: 6px; position: sticky; left: 0; }
.nx-gantt-row { display: grid; grid-template-columns: 340px 1fr; gap: 8px; align-items: center; padding: 2px 0; }
.nx-gantt-name { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-gantt-track { position: relative; height: 16px; background: repeating-linear-gradient(90deg, #f3f4f6, #f3f4f6 9.9%, #e9e9f3 10%); border-radius: 4px; }
.nx-gantt-bar { position: absolute; top: 2px; height: 12px; border-radius: 4px; background: linear-gradient(90deg, var(--nx-accent2), var(--nx-accent)); box-shadow: 0 1px 3px rgba(49, 46, 129, .3); }
.nx-gantt-bar.warn { background: linear-gradient(90deg, #f59e0b, #d97706); }
.nx-gantt-bar.crit { background: linear-gradient(90deg, #ef4444, #b91c1c); }
.nx-gantt-bar.bottleneck { outline: 2px solid #1e1b4b; outline-offset: 1px; }
.nx-tag { display: inline-block; font-size: 9px; font-weight: 800; padding: 0 5px; border-radius: 999px; margin-left: 4px; }
.nx-tag.crit { background: rgba(220, 38, 38, .14); color: #991b1b; }
.nx-tag.bn { background: rgba(30, 27, 75, .12); color: #1e1b4b; }

/* Test harness */
.nx-test-table td { font-size: 12px; }
.nx-test-head td { background: #f1f0fa; padding-top: 9px; }

/* styles/core/nexora-theme05.css */
:root {
  --nx-midnight: #0F1B2E;
  --nx-midnight-2: #0A1423;
  --nx-soft-blue: #4D6E91;
  --nx-gold: #24B47E;
  --nx-gold-2: #188D68;
  --nx-beige: #F3E9DA;
  --nx-charcoal: #2A2F36;
  --nx-ivory: #FBF7F1;
  --nx-panel: #FFFDF8;
  --nx-line: rgba(15, 27, 46, .14);
  --nx-line-strong: rgba(15, 27, 46, .24);
  --nx-shadow: 0 18px 42px rgba(15, 27, 46, .12);

  --bg: var(--nx-ivory);
  --bg2: var(--nx-beige);
  --p: var(--nx-panel);
  --p2: var(--nx-beige);
  --sk: var(--nx-line);
  --sk2: rgba(42, 47, 54, .11);
  --mu: var(--nx-soft-blue);
  --so: var(--nx-charcoal);
  --tx: var(--nx-charcoal);
  --st: var(--nx-midnight);
  --bl: var(--nx-midnight);
  --cy: var(--nx-soft-blue);
  --gn: var(--nx-soft-blue);
  --am: var(--nx-gold);

  --ap-page: var(--nx-ivory);
  --ap-surface: var(--nx-panel);
  --ap-surface-2: var(--nx-beige);
  --ap-border: var(--nx-line);
  --ap-border-strong: var(--nx-line-strong);
  --ap-text: var(--nx-midnight);
  --ap-muted: var(--nx-soft-blue);
  --ap-faint: #7B8794;
  --ap-ink: var(--nx-midnight);
  --ap-olive: var(--nx-midnight);
  --ap-olive-dark: var(--nx-midnight-2);
  --ap-sage: var(--nx-soft-blue);
  --ap-honey: var(--nx-gold);
  --ap-honey-deep: var(--nx-gold-2);

  --rs-ink: var(--nx-midnight);
  --rs-olive-2: var(--nx-midnight);
  --rs-sage: var(--nx-soft-blue);
  --rs-gold: var(--nx-gold);
  --rs-cream: var(--nx-panel);
  --rs-ivory: var(--nx-ivory);
  --rs-parchment: var(--nx-beige);

  --gt-text: var(--nx-midnight);
  --gt-olive2: var(--nx-midnight);
  --gt-honey: var(--nx-gold);

  --docai-accent: var(--nx-gold);
  --docai-olive: var(--nx-midnight);
  --docai-ink: var(--nx-midnight);
}

html,
body {
  background: var(--nx-beige) !important;
  color: var(--nx-charcoal) !important;
}

.app {
  background:
    radial-gradient(ellipse 58% 40% at 22% -5%, rgba(36, 180, 126, .16), transparent 64%),
    radial-gradient(ellipse 50% 38% at 86% 8%, rgba(77, 110, 145, .10), transparent 60%),
    linear-gradient(180deg, var(--nx-beige) 0%, #F7EFE3 48%, var(--nx-beige) 100%) !important;
}

.app::before {
  background:
    radial-gradient(circle at 96% 4%, rgba(36, 180, 126, .35) 1.4px, transparent 1.8px),
    linear-gradient(rgba(15, 27, 46, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 27, 46, .025) 1px, transparent 1px) !important;
  background-size: 22px 22px, 46px 46px, 46px 46px !important;
  opacity: .28 !important;
}

.hdr {
  background: rgba(251, 247, 241, .88) !important;
  border-bottom: 1px solid rgba(15, 27, 46, .10) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .72) inset, 0 14px 36px rgba(15, 27, 46, .08) !important;
}

.hdr .logo-ico,
body.ap-vertical-shell .hdr .logo-ico,
body.ap-vertical-shell .hdr.ap-nav-collapsed:not(.ap-nav-peek) .logo-ico {
  width: var(--app-logo-w) !important;
  height: var(--app-logo-h) !important;
  flex: 0 0 var(--app-logo-w) !important;
  flex-basis: var(--app-logo-w) !important;
  background-image: url('../nexora-ai-theme05-logo.png') !important;
  background-size: contain !important;
  background-position: left center !important;
  background-repeat: no-repeat !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.ap-vertical-shell .hdr:not(.ap-nav-collapsed) .logo,
body.ap-vertical-shell .hdr.ap-nav-peek .logo,
body.ap-vertical-shell .hdr.ap-nav-collapsed:not(.ap-nav-peek) .logo {
  opacity: 1 !important;
  width: auto !important;
  min-width: var(--app-logo-w) !important;
  max-width: var(--app-logo-w) !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  transform: none !important;
  filter: none !important;
  pointer-events: auto !important;
}

.hdr .logo>div:last-child,
body.ap-vertical-shell .hdr .logo>div:last-child {
  display: none !important;
}

.ai-pill,
.api-st {
  background: rgba(243, 233, 218, .68) !important;
  border-color: rgba(15, 27, 46, .12) !important;
  color: var(--nx-soft-blue) !important;
}

.ai-dot,
#apiDot {
  background: var(--nx-gold) !important;
  box-shadow: 0 0 0 4px rgba(36, 180, 126, .16), 0 0 12px rgba(36, 180, 126, .34) !important;
}

body.ap-vertical-shell .tabs {
  background:
    linear-gradient(180deg, #071222 0%, var(--nx-midnight) 45%, #091626 100%) !important;
  border-right: 1px solid rgba(36, 180, 126, .18) !important;
  box-shadow: 18px 0 48px rgba(15, 27, 46, .16) !important;
}

body.ap-vertical-shell .ap-sidebar-brand {
  min-height: 72px !important;
  padding: 6px 12px !important;
  border-bottom: 1px solid rgba(251, 247, 241, .08) !important;
  display: flex !important;
  align-items: center !important;
}

body.ap-vertical-shell .ap-sidebar-mark {
  width: 100% !important;
  height: 56px !important;
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

body.ap-vertical-shell .ap-sidebar-logo {
  content: url('../logo.png') !important;
  width: 100% !important;
  height: 56px !important;
  object-fit: contain !important;
  object-position: left center !important;
}

body.ap-vertical-shell .ap-sidebar-copy {
  display: none !important;
}

body.ap-vertical-shell .tabs.ap-nav-collapsed:not(.ap-nav-peek) .ap-sidebar-mark {
  width: 46px !important;
  height: 46px !important;
  flex: 0 0 46px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, var(--nx-ivory), var(--nx-beige)) !important;
  border: 1px solid rgba(36, 180, 126, .54) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .74), 0 12px 24px rgba(0, 0, 0, .24) !important;
  overflow: hidden !important;
}

body.ap-vertical-shell .tabs.ap-nav-collapsed:not(.ap-nav-peek) .ap-sidebar-logo {
  content: url('../nexora-ai-sidebar-icon.png') !important;
  width: 38px !important;
  height: 38px !important;
  margin: 0 !important;
  object-fit: contain !important;
}

body.ap-vertical-shell .tab {
  color: rgba(251, 247, 241, .78) !important;
  border-color: rgba(251, 247, 241, .07) !important;
}

body.ap-vertical-shell .tab:hover {
  background: rgba(251, 247, 241, .07) !important;
  border-color: rgba(36, 180, 126, .24) !important;
  color: var(--nx-ivory) !important;
}

body.ap-vertical-shell .tab.active {
  background: linear-gradient(180deg, var(--nx-gold), #B99451) !important;
  border-color: rgba(255, 255, 255, .32) !important;
  color: var(--nx-midnight) !important;
  box-shadow: 0 12px 26px rgba(36, 180, 126, .28), inset 0 1px 0 rgba(255, 255, 255, .42) !important;
}

body.ap-vertical-shell .tab .ap-tab-icon {
  background: rgba(251, 247, 241, .08) !important;
  color: currentColor !important;
}

body.ap-vertical-shell .tab.active .ap-tab-icon {
  background: rgba(251, 247, 241, .70) !important;
  color: var(--nx-midnight) !important;
}

.home-hero {
  background:
    radial-gradient(ellipse 46% 52% at 96% 0%, rgba(36, 180, 126, .18), transparent 62%),
    linear-gradient(135deg, #091525 0%, var(--nx-midnight) 54%, #172A42 100%) !important;
  color: var(--nx-ivory) !important;
  box-shadow: 0 18px 42px rgba(15, 27, 46, .22) !important;
}

.home-hero-eyebrow,
.home-card-h,
.lgb-title {
  color: var(--nx-gold) !important;
}

.home-btn-primary,
.apr-btn.pri,
.hbtn.primary,
.home-active .home-btn-primary,
.home-getstarted .home-btn-primary {
  background: linear-gradient(180deg, #F6E7C8, var(--nx-gold)) !important;
  border-color: rgba(168, 135, 74, .62) !important;
  color: var(--nx-midnight) !important;
  box-shadow: 0 12px 22px rgba(36, 180, 126, .24) !important;
}

.hbtn,
.home-btn-ghost,
.home-active .home-btn-ghost,
.home-getstarted .home-btn-ghost {
  background: rgba(251, 247, 241, .10) !important;
  border-color: rgba(251, 247, 241, .24) !important;
  color: inherit !important;
}

.panel,
.home-card,
.card,
.modal,
.docai-card,
.dsett-card,
.home-quick,
.home-recent-row,
.zwiz-card,
.map-card,
.m2-card,
.nexus-card,
.maestro-card,
.forge-sbox,
.forge-cpm-card,
.forge-con,
.forge-board-wrap {
  background: rgba(255, 255, 255, .92) !important;
  border-color: rgba(232, 236, 239, .94) !important;
  color: var(--nx-charcoal) !important;
  box-shadow: 0 18px 36px rgba(15, 27, 46, .08) !important;
}

input,
textarea,
select,
.input,
.chat-input,
.docai-input,
.dsett-input {
  background: rgba(251, 247, 241, .88) !important;
  border-color: rgba(15, 27, 46, .16) !important;
  color: var(--nx-midnight) !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: rgba(36, 180, 126, .82) !important;
  box-shadow: 0 0 0 3px rgba(36, 180, 126, .18) !important;
}

.pill,
.chip,
.badge,
.home-plan-badge,
.tbadge,
.forge-chip {
  background: rgba(77, 110, 145, .10) !important;
  border-color: rgba(77, 110, 145, .22) !important;
  color: var(--nx-midnight) !important;
}

.home-step-n,
.home-quality,
.home-quick-ic,
.home-usage-bar i,
.progress-fill,
.bar-fill {
  background: linear-gradient(135deg, var(--nx-midnight), var(--nx-soft-blue)) !important;
  color: var(--nx-ivory) !important;
}

.home-dot,
.dot,
.forge-chip .dot {
  background: var(--nx-gold) !important;
  box-shadow: 0 0 0 4px rgba(36, 180, 126, .16) !important;
}

.forge-ov {
  background:
    radial-gradient(ellipse 46% 36% at 18% 12%, rgba(36, 180, 126, .18), transparent 62%),
    radial-gradient(ellipse 48% 38% at 82% 72%, rgba(77, 110, 145, .16), transparent 62%),
    linear-gradient(135deg, var(--nx-ivory) 0%, var(--nx-beige) 100%) !important;
  color: var(--nx-midnight) !important;
}

.forge-top,
.forge-footer {
  background: rgba(251, 247, 241, .94) !important;
  border-color: rgba(15, 27, 46, .12) !important;
}

.forge-logo-mark {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.forge-logo-mark img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

.forge-pipe-fill,
.forge-seg.act,
.forge-es-dot {
  background: linear-gradient(90deg, var(--nx-midnight), var(--nx-soft-blue), var(--nx-gold)) !important;
}

a,
.link,
.home-seeall,
.accent,
.txt-accent {
  color: var(--nx-soft-blue) !important;
}

::selection {
  background: rgba(36, 180, 126, .34);
  color: var(--nx-midnight);
}

/* Theme 05 final calibration: match the provided brand board color distribution. */
html,
body,
.app {
  background: var(--nx-beige) !important;
}

.app {
  background:
    radial-gradient(ellipse 58% 40% at 22% -5%, rgba(36, 180, 126, .16), transparent 64%),
    radial-gradient(ellipse 50% 38% at 86% 8%, rgba(77, 110, 145, .10), transparent 60%),
    linear-gradient(180deg, var(--nx-beige) 0%, #F7EFE3 48%, var(--nx-beige) 100%) !important;
}

body.ap-vertical-shell .tabs,
body.ap-vertical-shell .tabs.ap-nav-collapsed:not(.ap-nav-peek) {
  background: var(--nx-midnight) !important;
  border-right: 1px solid rgba(36, 180, 126, .22) !important;
  box-shadow: 14px 0 34px rgba(15, 27, 46, .18) !important;
}

body.ap-vertical-shell .ap-sidebar-mark,
body.ap-vertical-shell .tabs.ap-nav-collapsed:not(.ap-nav-peek) .ap-sidebar-mark {
  background: linear-gradient(180deg, #FFF8EC, var(--nx-beige)) !important;
  border: 1px solid rgba(36, 180, 126, .58) !important;
}

body.ap-vertical-shell .ap-sidebar-logo,
body.ap-vertical-shell .tabs.ap-nav-collapsed:not(.ap-nav-peek) .ap-sidebar-logo {
  content: url('../nexora-ai-sidebar-icon.png') !important;
  object-fit: contain !important;
}

body.ap-vertical-shell .tab,
body.ap-vertical-shell .tabs.ap-nav-collapsed:not(.ap-nav-peek) .tab {
  background: rgba(251, 247, 241, .035) !important;
  border-color: rgba(251, 247, 241, .10) !important;
  color: rgba(251, 247, 241, .72) !important;
}

body.ap-vertical-shell .tab.active,
body.ap-vertical-shell .tabs.ap-nav-collapsed:not(.ap-nav-peek) .tab.active {
  background: linear-gradient(180deg, #DAB96F, var(--nx-gold)) !important;
  border-color: rgba(255, 255, 255, .36) !important;
  color: var(--nx-midnight) !important;
}

body.ap-vertical-shell .tabs.ap-nav-collapsed:not(.ap-nav-peek) .tab.active {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

body.ap-vertical-shell .tab .ap-tab-icon,
body.ap-vertical-shell .tabs.ap-nav-collapsed:not(.ap-nav-peek) .ap-tab-icon {
  background: rgba(251, 247, 241, .075) !important;
  color: currentColor !important;
}

body.ap-vertical-shell .tab.active .ap-tab-icon,
body.ap-vertical-shell .tabs.ap-nav-collapsed:not(.ap-nav-peek) .tab.active .ap-tab-icon {
  background: rgba(251, 247, 241, .70) !important;
  color: var(--nx-midnight) !important;
}

body.ap-vertical-shell .tabs.ap-nav-collapsed:not(.ap-nav-peek) .tab.active .ap-tab-icon {
  background: linear-gradient(180deg, #DAB96F, var(--nx-gold)) !important;
  border-color: rgba(255, 255, 255, .34) !important;
  box-shadow: 0 10px 20px rgba(36, 180, 126, .28), inset 0 1px 0 rgba(255, 255, 255, .40) !important;
}

.home-card,
.panel,
.card,
.home-quick,
.home-recent-row {
  background: rgba(255, 255, 255, .92) !important;
}

.home-step-n,
.home-quality {
  background: linear-gradient(135deg, var(--nx-midnight), #253D5A) !important;
  color: var(--nx-ivory) !important;
}

.home-quick-ic {
  background: linear-gradient(180deg, #FFF8EC, var(--nx-beige)) !important;
  border: 1px solid rgba(36, 180, 126, .28) !important;
  color: var(--nx-midnight) !important;
}

.home-quick-ic svg {
  stroke: var(--nx-midnight) !important;
}

.home-card-h,
.home-hero-eyebrow {
  color: var(--nx-gold) !important;
}

/* Theme 05 shell lock: exact palette, no olive, no Gantt/table body overrides. */
html,
body,
.app {
  background: var(--nx-beige) !important;
}

.app {
  background:
    radial-gradient(ellipse 50% 38% at 12% 0%, rgba(36, 180, 126, .14), transparent 64%),
    radial-gradient(ellipse 46% 32% at 96% 6%, rgba(77, 110, 145, .10), transparent 62%),
    linear-gradient(180deg, var(--nx-ivory) 0%, var(--nx-beige) 100%) !important;
}

.hdr,
body.ap-vertical-shell .hdr {
  background: var(--nx-ivory) !important;
  border-bottom: 1px solid rgba(15, 27, 46, .09) !important;
  box-shadow: 0 10px 28px rgba(15, 27, 46, .07) !important;
}

body.ap-vertical-shell .tabs,
body.ap-vertical-shell .tabs.ap-nav-collapsed:not(.ap-nav-peek) {
  background: var(--nx-midnight) !important;
  border-right: 1px solid rgba(36, 180, 126, .24) !important;
  box-shadow: 14px 0 34px rgba(15, 27, 46, .20) !important;
}

body.ap-vertical-shell .tabs::before,
body.ap-vertical-shell .tabs::after {
  background: transparent !important;
}

body.ap-vertical-shell .ap-sidebar-brand {
  min-height: 74px !important;
  padding: 12px 0 14px !important;
  border-bottom: 1px solid rgba(251, 247, 241, .10) !important;
}

body.ap-vertical-shell .ap-sidebar-mark,
body.ap-vertical-shell .tabs.ap-nav-collapsed:not(.ap-nav-peek) .ap-sidebar-mark {
  width: 56px !important;
  height: 56px !important;
  flex: 0 0 56px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 17px !important;
  overflow: hidden !important;
}

body.ap-vertical-shell .ap-sidebar-logo,
body.ap-vertical-shell .tabs.ap-nav-collapsed:not(.ap-nav-peek) .ap-sidebar-logo {
  content: url('../nexora-ai-sidebar-icon.png') !important;
  width: 56px !important;
  height: 56px !important;
  margin: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 17px !important;
}

body.ap-vertical-shell .tabs.ap-nav-collapsed:not(.ap-nav-peek) .ap-sidebar-brand {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.ap-vertical-shell .tabs.ap-nav-collapsed:not(.ap-nav-peek) .ap-sidebar-mark,
body.ap-vertical-shell .tabs.ap-nav-collapsed:not(.ap-nav-peek) .ap-sidebar-logo {
  width: 48px !important;
  height: 48px !important;
  flex-basis: 48px !important;
  border-radius: 15px !important;
}

body.ap-vertical-shell .ap-sidebar-search {
  background: rgba(251, 247, 241, .07) !important;
  border: 1px solid rgba(251, 247, 241, .12) !important;
  box-shadow: none !important;
}

body.ap-vertical-shell .ap-sidebar-nav,
body.ap-vertical-shell .tabs.ap-nav-collapsed:not(.ap-nav-peek) .ap-sidebar-nav {
  gap: 8px !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
}

body.ap-vertical-shell .tab {
  margin: 0 !important;
  background: rgba(251, 247, 241, .055) !important;
  border: 1px solid rgba(251, 247, 241, .10) !important;
  color: rgba(251, 247, 241, .78) !important;
  box-shadow: none !important;
}

body.ap-vertical-shell .tab:hover {
  background: rgba(251, 247, 241, .09) !important;
  border-color: rgba(36, 180, 126, .32) !important;
  color: var(--nx-ivory) !important;
}

body.ap-vertical-shell .tab.active {
  background: linear-gradient(180deg, #DAB96F, var(--nx-gold)) !important;
  border-color: rgba(255, 255, 255, .32) !important;
  color: var(--nx-midnight) !important;
  box-shadow: 0 12px 22px rgba(36, 180, 126, .24), inset 0 1px 0 rgba(255, 255, 255, .42) !important;
}

body.ap-vertical-shell .tab .ap-tab-icon {
  background: rgba(251, 247, 241, .08) !important;
  border: 1px solid rgba(251, 247, 241, .10) !important;
  color: currentColor !important;
}

body.ap-vertical-shell .tab.active .ap-tab-icon {
  background: rgba(251, 247, 241, .78) !important;
  border-color: rgba(15, 27, 46, .08) !important;
  color: var(--nx-midnight) !important;
}

body.ap-vertical-shell .tabs.ap-nav-collapsed:not(.ap-nav-peek) .tab {
  width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  justify-content: center !important;
  align-items: center !important;
  border-radius: 13px !important;
  background: transparent !important;
  border-color: transparent !important;
}

body.ap-vertical-shell .tabs.ap-nav-collapsed:not(.ap-nav-peek) .tab .ap-tab-icon {
  width: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
  background: rgba(251, 247, 241, .08) !important;
  border: 1px solid rgba(251, 247, 241, .10) !important;
}

body.ap-vertical-shell .tabs.ap-nav-collapsed:not(.ap-nav-peek) .tab.active .ap-tab-icon {
  background: linear-gradient(180deg, #DAB96F, var(--nx-gold)) !important;
  border-color: rgba(255, 255, 255, .34) !important;
  color: var(--nx-midnight) !important;
  box-shadow: 0 10px 20px rgba(36, 180, 126, .28), inset 0 1px 0 rgba(255, 255, 255, .42) !important;
}

body.ap-vertical-shell .tabs.ap-nav-collapsed:not(.ap-nav-peek) .ap-sidebar-search,
body.ap-vertical-shell .tabs.ap-nav-collapsed:not(.ap-nav-peek) .ap-sidebar-section-title,
body.ap-vertical-shell .tabs.ap-nav-collapsed:not(.ap-nav-peek) .ap-tab-label,
body.ap-vertical-shell .tabs.ap-nav-collapsed:not(.ap-nav-peek) .ap-tab-badge {
  display: none !important;
}

.home-hero,
.hero,
.welcome-card {
  background:
    radial-gradient(ellipse 44% 50% at 96% 0%, rgba(36, 180, 126, .16), transparent 64%),
    linear-gradient(135deg, #091525 0%, var(--nx-midnight) 58%, #172A42 100%) !important;
  color: var(--nx-ivory) !important;
}

.home-btn-primary,
.btn.primary,
.primary-btn,
.apr-btn.pri {
  background: linear-gradient(180deg, #F6E7C8, var(--nx-gold)) !important;
  border-color: rgba(168, 135, 74, .62) !important;
  color: var(--nx-midnight) !important;
}

.home-step-n,
.home-quality,
.home-quick-ic {
  background: linear-gradient(135deg, var(--nx-midnight), #253D5A) !important;
  color: var(--nx-ivory) !important;
}

.home-dot,
.dot,
.status-dot,
.ai-dot,
#apiDot {
  background: var(--nx-gold) !important;
  box-shadow: 0 0 0 4px rgba(36, 180, 126, .16) !important;
}

body #tp-gantt #ganttOut {
  --aipe-toolbar: #1A1E24;
  --aipe-toolbar-2: #2A2F36;
  --aipe-toolbar-border: rgba(36, 180, 126, .28);
}

body #tp-gantt #ganttOut .p6-toolbar,
body[data-gantt-theme] #tp-gantt #ganttOut .p6-toolbar,
body[data-gantt-theme="light"] #tp-gantt #ganttOut .p6-toolbar,
body[data-gantt-theme="dark"] #tp-gantt #ganttOut .p6-toolbar {
  background: linear-gradient(180deg, #2A2F36, #1A1E24) !important;
  border-color: rgba(36, 180, 126, .22) !important;
  box-shadow: 0 12px 24px rgba(15, 27, 46, .18) !important;
}

#ganttOut .p6-tb-btn,
#ganttOut .p6-exp-btn,
#ganttOut .v12-menu-trigger,
#ganttOut .v12-chip {
  background: rgba(251, 247, 241, .06) !important;
  border-color: rgba(251, 247, 241, .16) !important;
  color: var(--nx-ivory) !important;
}

#ganttOut .p6-tb-btn:hover,
#ganttOut .p6-exp-btn:hover,
#ganttOut .v12-menu-trigger:hover,
#ganttOut .v12-chip:hover {
  background: rgba(36, 180, 126, .16) !important;
  border-color: rgba(36, 180, 126, .38) !important;
}

#ganttOut .p6-toolbar input,
#ganttOut .p6-toolbar .search,
#ganttOut .p6-toolbar [type="search"] {
  background: rgba(15, 27, 46, .36) !important;
  border-color: rgba(251, 247, 241, .18) !important;
  color: var(--nx-ivory) !important;
}

#Z_FAI_BTN,
#Z_ICO,
#Z_SD,
#Z_AGENT,
.zai-fab,
.zai-launcher,
.zai-orb,
.agent-fab,
.floating-agent,
#floatingPlannerButton {
  background: linear-gradient(145deg, var(--nx-midnight), #172A42) !important;
  border-color: rgba(36, 180, 126, .34) !important;
  color: var(--nx-ivory) !important;
  box-shadow: 0 16px 34px rgba(15, 27, 46, .24), inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}

#Z_FAI_BADGE,
#Z_AGENT_PROG_BAR,
.zr.za .zav {
  background: var(--nx-gold) !important;
  color: var(--nx-midnight) !important;
}

#Z_FAI_PNL,
#Z_APR_BOX,
.zmodal-box,
#Z_ACTION_FLASH {
  background: var(--nx-panel) !important;
  border-color: rgba(15, 27, 46, .14) !important;
  color: var(--nx-midnight) !important;
}

#Z_TP,
.zcp,
.zfq:hover,
.zr.zu .zb,
.zb code,
.apr-btn.all,
.zmsg-note,
.z-dl-btn {
  background: rgba(77, 110, 145, .10) !important;
  border-color: rgba(77, 110, 145, .24) !important;
  color: var(--nx-midnight) !important;
}

.zb b,
.zmsg-section,
.ag-step.active,
.res-bar-val {
  color: var(--nx-midnight) !important;
}

#perf-demo-bar.aipe-perf-demo-v2>div {
  background: var(--nx-ivory) !important;
  border-color: rgba(15, 27, 46, .10) !important;
  box-shadow: 0 10px 28px rgba(15, 27, 46, .08) !important;
}

#perf-demo-bar.aipe-perf-demo-v2 b {
  color: var(--nx-soft-blue) !important;
}

#perf-demo-bar.aipe-perf-demo-v2 b::before {
  background: rgba(36, 180, 126, .18) !important;
  color: var(--nx-midnight) !important;
}

#perf-demo-bar.aipe-perf-demo-v2 button,
#perf-demo-bar.aipe-perf-demo-v2 button:nth-of-type(1),
#perf-demo-bar.aipe-perf-demo-v2 button:nth-of-type(2),
#perf-demo-bar.aipe-perf-demo-v2 button:nth-of-type(3),
#perf-demo-bar.aipe-perf-demo-v2 button:nth-of-type(4),
#perf-demo-bar.aipe-perf-demo-v2 button:nth-of-type(5),
#perf-demo-bar.aipe-perf-demo-v2 button:nth-of-type(6) {
  background: rgba(77, 110, 145, .10) !important;
  border-color: rgba(77, 110, 145, .20) !important;
  color: var(--nx-midnight) !important;
  box-shadow: none !important;
}

#perf-demo-bar.aipe-perf-demo-v2 button:nth-of-type(1),
#perf-demo-bar.aipe-perf-demo-v2 button:nth-of-type(2),
#perf-demo-bar.aipe-perf-demo-v2 button:nth-of-type(5) {
  background: rgba(36, 180, 126, .20) !important;
  border-color: rgba(36, 180, 126, .36) !important;
}

#perf-demo-bar.aipe-perf-demo-v2 button:nth-of-type(3) {
  background: rgba(77, 110, 145, .16) !important;
  border-color: rgba(77, 110, 145, .30) !important;
}

#perf-demo-bar.aipe-perf-demo-v2 button:nth-of-type(6) {
  background: var(--nx-midnight) !important;
  border-color: var(--nx-midnight) !important;
  color: var(--nx-ivory) !important;
}

#perf-demo-bar.aipe-perf-demo-v2 button:hover {
  background: rgba(36, 180, 126, .22) !important;
  border-color: rgba(36, 180, 126, .44) !important;
}

/* Theme 05 reference correction - lock the UI to Soft Beige & Midnight Blue. */
:root {
  --nx-page-wash: #FBF7F1;
  --nx-muted-text: rgba(42, 47, 54, .72);
  --nx-soft-line: rgba(42, 47, 54, .12);
}

html,
body {
  background: var(--nx-page-wash) !important;
}

.app,
body.ap-vertical-shell .app {
  background:
    radial-gradient(ellipse 42% 28% at 100% 0%, rgba(36, 180, 126, .07), transparent 62%),
    linear-gradient(180deg, var(--nx-page-wash) 0%, var(--nx-page-wash) 62%, #F3E9DA 100%) !important;
}

.app::before,
body.ap-vertical-shell .app::before {
  opacity: .12 !important;
  background:
    radial-gradient(circle, rgba(36, 180, 126, .22) 1.2px, transparent 1.8px),
    linear-gradient(rgba(42, 47, 54, .014) 1px, transparent 1px),
    linear-gradient(90deg, rgba(42, 47, 54, .014) 1px, transparent 1px) !important;
  background-position: calc(100% - 72px) 26px, 0 0, 0 0 !important;
  background-size: 24px 24px, 48px 48px, 48px 48px !important;
}

.hdr,
.topbar,
.app-header {
  background: var(--nx-page-wash) !important;
  border-bottom-color: rgba(42, 47, 54, .08) !important;
}

body.ap-vertical-shell .tabs {
  background: var(--nx-midnight) !important;
  background-image: linear-gradient(180deg, #0A1626 0%, var(--nx-midnight) 100%) !important;
  border-color: rgba(251, 247, 241, .10) !important;
}

body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .ap-sidebar-brand,
body.ap-vertical-shell .tabs.ap-nav-peek .ap-sidebar-brand {
  display: flex !important;
}

body.ap-vertical-shell .hdr:not(.ap-nav-collapsed) .logo,
body.ap-vertical-shell .hdr.ap-nav-peek .logo {
  opacity: 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

body.ap-vertical-shell .hdr.ap-nav-collapsed:not(.ap-nav-peek) .logo {
  opacity: 1 !important;
  width: auto !important;
  min-width: var(--app-logo-w) !important;
  max-width: var(--app-logo-w) !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  overflow: visible !important;
  pointer-events: auto !important;
}

body.ap-vertical-shell .ap-cmd-trigger,
body.ap-vertical-shell .ap-sidebar-search,
body.ap-vertical-shell .ap-settings-shortcut,
body.ap-vertical-shell .ap-sidebar-toggle,
body.ap-vertical-shell .ap-sidebar-foot {
  background: rgba(251, 247, 241, .07) !important;
  border-color: rgba(251, 247, 241, .14) !important;
  color: var(--nx-ivory) !important;
  box-shadow: none !important;
}

body.ap-vertical-shell .ap-cmd-trigger:hover,
body.ap-vertical-shell .ap-settings-shortcut:hover,
body.ap-vertical-shell .ap-settings-shortcut.active,
body.ap-vertical-shell .ap-sidebar-toggle:hover,
body.ap-vertical-shell .ap-sidebar-foot:hover,
body.ap-vertical-shell .tab:hover {
  background: rgba(77, 110, 145, .22) !important;
  border-color: rgba(36, 180, 126, .30) !important;
  color: var(--nx-ivory) !important;
}

body.ap-vertical-shell .ap-sidebar-foot {
  background: rgba(15, 27, 46, .72) !important;
}

body.ap-vertical-shell .ap-account-avatar,
body.ap-vertical-shell .ap-sidebar-foot .ap-avatar {
  background: var(--nx-soft-blue) !important;
  color: var(--nx-ivory) !important;
  border-color: rgba(251, 247, 241, .18) !important;
}

body.ap-vertical-shell .tab.active {
  background: linear-gradient(180deg, #E7C67D 0%, var(--nx-gold) 100%) !important;
  border-color: rgba(255, 255, 255, .34) !important;
  color: var(--nx-midnight) !important;
  box-shadow: 0 12px 22px rgba(36, 180, 126, .24), inset 0 1px 0 rgba(255, 255, 255, .42) !important;
}

body.ap-vertical-shell .tabs.ap-nav-collapsed:not(.ap-nav-peek) .tab:hover .ap-tab-icon,
body.ap-vertical-shell .tabs.ap-nav-collapsed:not(.ap-nav-peek) .ap-settings-shortcut:hover,
body.ap-vertical-shell .tabs.ap-nav-collapsed:not(.ap-nav-peek) .ap-sidebar-toggle:hover {
  background: rgba(77, 110, 145, .22) !important;
  border-color: rgba(36, 180, 126, .30) !important;
  color: var(--nx-ivory) !important;
}

body.ap-vertical-shell .tabs.ap-nav-collapsed:not(.ap-nav-peek) .tab.active .ap-tab-icon {
  background: linear-gradient(180deg, #E7C67D 0%, var(--nx-gold) 100%) !important;
  color: var(--nx-midnight) !important;
}

.home-hero,
.hero,
.welcome-card {
  background: linear-gradient(135deg, #071222 0%, var(--nx-midnight) 62%, #172A42 100%) !important;
  color: var(--nx-ivory) !important;
  box-shadow: 0 18px 38px rgba(15, 27, 46, .18) !important;
}

.home-hero-glow,
.home-hero::before,
.home-hero::after,
.hero::before,
.welcome-card::before {
  background: none !important;
  opacity: 0 !important;
}

.home-hero-eyebrow,
.home-card-h {
  color: var(--nx-gold) !important;
}

.home-hero-sub {
  color: rgba(251, 247, 241, .90) !important;
}

.home-card,
.home-active,
.home-getstarted,
.home-usage,
.home-recent,
.home-quick-panel {
  background: rgba(255, 253, 248, .94) !important;
  border-color: rgba(42, 47, 54, .11) !important;
  box-shadow: 0 18px 36px rgba(15, 27, 46, .08) !important;
}

.home-step small,
.home-quick-txt small,
.home-card small,
.home-card p,
.home-muted,
.home-usage-note,
.home-active-meta,
.home-active-empty {
  color: var(--nx-muted-text) !important;
}

.home-quick-txt b,
.home-step b,
.home-card h2,
.home-card h3,
.home-card strong {
  color: var(--nx-midnight) !important;
}

.home-dot,
.dot,
.status-dot,
.ai-dot,
#apiDot {
  width: 10px !important;
  height: 10px !important;
  background: var(--nx-gold) !important;
  border: 1px solid rgba(36, 180, 126, .38) !important;
  box-shadow: inset 0 0 0 3px #F3E9DA !important;
}

.home-hero .home-btn-primary {
  background: linear-gradient(180deg, #F7E6C2 0%, var(--nx-gold) 100%) !important;
  border-color: rgba(168, 135, 74, .62) !important;
  color: var(--nx-midnight) !important;
  box-shadow: 0 12px 24px rgba(36, 180, 126, .22), inset 0 1px 0 rgba(255, 255, 255, .42) !important;
}

.home-getstarted .home-btn-primary,
.home-active .home-btn-primary,
.home-card:not(.home-hero) .home-btn-primary {
  background: var(--nx-midnight) !important;
  border-color: var(--nx-midnight) !important;
  color: var(--nx-ivory) !important;
  box-shadow: 0 10px 20px rgba(15, 27, 46, .18) !important;
}

.home-btn-ghost,
.home-hero .home-btn-ghost {
  background: rgba(251, 247, 241, .08) !important;
  border-color: rgba(251, 247, 241, .24) !important;
  color: var(--nx-ivory) !important;
}

.home-card .home-btn-ghost {
  background: rgba(15, 27, 46, .04) !important;
  border-color: var(--nx-soft-line) !important;
  color: var(--nx-midnight) !important;
}

.home-btn:hover {
  transform: translateY(-1px) !important;
  filter: brightness(1.02) !important;
}

.home-step-n,
.home-quality {
  background: var(--nx-midnight) !important;
  color: var(--nx-ivory) !important;
}

.home-quick {
  background: rgba(255, 253, 248, .96) !important;
  border-color: rgba(42, 47, 54, .13) !important;
  color: var(--nx-midnight) !important;
  box-shadow: 0 8px 18px rgba(15, 27, 46, .045) !important;
}

.home-quick:hover,
.home-quick:focus-visible {
  background: var(--nx-page-wash) !important;
  border-color: rgba(36, 180, 126, .44) !important;
  box-shadow: 0 12px 24px rgba(15, 27, 46, .08) !important;
}

.home-quick-ic {
  background: var(--nx-midnight) !important;
  border: 1px solid rgba(15, 27, 46, .18) !important;
  color: var(--nx-ivory) !important;
}

.home-quick-ic svg,
.home-quick:hover .home-quick-ic svg {
  color: var(--nx-ivory) !important;
  stroke: var(--nx-ivory) !important;
}

body #tp-gantt #ganttOut .p6-toolbar,
body #tp-gantt #ganttOut .p6-toolbar.aipe-gantt-tools-v2,
body[data-gantt-theme] #tp-gantt #ganttOut .p6-toolbar,
body[data-gantt-theme="light"] #tp-gantt #ganttOut .p6-toolbar,
body[data-gantt-theme="light"] #tp-gantt #ganttOut .p6-toolbar.aipe-gantt-tools-v2,
body[data-gantt-theme="dark"] #tp-gantt #ganttOut .p6-toolbar,
body[data-gantt-theme="dark"] #tp-gantt #ganttOut .p6-toolbar.aipe-gantt-tools-v2 {
  background: rgb(18 58 83 / 54%) !important;
  border-color: rgba(251, 247, 241, .18) !important;
  color: #FFF !important;
  box-shadow: 0 12px 24px rgba(15, 27, 46, .18) !important;
}

body #tp-gantt #ganttOut .p6-toolbar.aipe-gantt-tools-v2 {
  border-color: rgba(36, 180, 126, .22) !important;
}

body #tp-gantt #ganttOut .p6-toolbar>.v12-toolgroup,
body #tp-gantt #ganttOut .p6-toolbar .v12-toolgroup,
body #tp-gantt #ganttOut .p6-toolbar .aipe-tool-block,
body #tp-gantt #ganttOut .p6-toolbar .p6-levels,
body[data-gantt-theme="light"] #tp-gantt #ganttOut .p6-toolbar .v12-toolgroup,
body[data-gantt-theme="light"] #tp-gantt #ganttOut .p6-toolbar .aipe-tool-block {
  background: transparent !important;
  background-image: none !important;
  border-color: rgba(251, 247, 241, .18) !important;
}

body #tp-gantt #ganttOut .p6-toolbar button,
body #tp-gantt #ganttOut .p6-toolbar .p6-tb-btn,
body #tp-gantt #ganttOut .p6-toolbar .p6-exp-btn,
body #tp-gantt #ganttOut .p6-toolbar .v12-menu-trigger,
body #tp-gantt #ganttOut .p6-toolbar .v12-switch-btn,
body #tp-gantt #ganttOut .p6-toolbar #ganttLinkHandlesToggle,
body #tp-gantt #ganttOut .p6-toolbar .v12-chip {
  background: rgba(255, 255, 255, .10) !important;
  background-image: none !important;
  border-color: rgba(255, 255, 255, .18) !important;
  color: #FFFFFF !important;
}

body #tp-gantt #ganttOut .p6-toolbar button:hover,
body #tp-gantt #ganttOut .p6-toolbar .p6-tb-btn:hover,
body #tp-gantt #ganttOut .p6-toolbar .p6-exp-btn:hover,
body #tp-gantt #ganttOut .p6-toolbar .v12-menu-trigger:hover,
body #tp-gantt #ganttOut .p6-toolbar .v12-switch-btn:hover,
body #tp-gantt #ganttOut .p6-toolbar #ganttLinkHandlesToggle:hover,
body #tp-gantt #ganttOut .p6-toolbar .v12-chip:hover {
  background: rgba(36, 180, 126, .18) !important;
  border-color: rgba(36, 180, 126, .38) !important;
  color: #FFFFFF !important;
}

body #tp-gantt #ganttOut .p6-toolbar .p6-tb-btn.on,
body #tp-gantt #ganttOut .p6-toolbar .p6-tb-btn.active,
body #tp-gantt #ganttOut .p6-toolbar .p6-tb-btn[aria-pressed="true"],
body #tp-gantt #ganttOut .p6-toolbar #ganttLinkHandlesToggle.on {
  background: var(--nx-gold) !important;
  border-color: rgba(251, 247, 241, .32) !important;
  color: var(--nx-midnight) !important;
}

body #tp-gantt #ganttOut .p6-toolbar input,
body #tp-gantt #ganttOut .p6-toolbar .search,
body #tp-gantt #ganttOut .p6-toolbar [type="search"] {
  background: rgba(0, 0, 0, .30) !important;
  border-color: rgba(255, 255, 255, .18) !important;
  color: #FFFFFF !important;
}

.aipe-cpm-modal {
  background: rgba(15, 27, 46, .46) !important;
}

.aipe-cpm-card {
  background: var(--nx-page-wash) !important;
  border-color: rgba(36, 180, 126, .34) !important;
  color: var(--nx-midnight) !important;
  box-shadow: 0 26px 80px rgba(15, 27, 46, .24) !important;
}

.aipe-cpm-head {
  background: linear-gradient(135deg, #071222 0%, var(--nx-midnight) 66%, #172A42 100%) !important;
  color: var(--nx-ivory) !important;
}

.aipe-cpm-k {
  color: var(--nx-gold) !important;
}

.aipe-cpm-sub {
  color: rgba(251, 247, 241, .76) !important;
}

.aipe-cpm-field {
  background: rgba(255, 253, 248, .96) !important;
  border-color: rgba(36, 180, 126, .30) !important;
}

.aipe-cpm-field label {
  color: rgba(42, 47, 54, .64) !important;
}

.aipe-cpm-field input,
.aipe-cpm-field select {
  color: var(--nx-midnight) !important;
}

.aipe-cpm-note {
  background: rgba(243, 233, 218, .54) !important;
  border-color: rgba(36, 180, 126, .32) !important;
  color: var(--nx-charcoal) !important;
}

.aipe-cpm-btn {
  background: rgba(255, 253, 248, .92) !important;
  border-color: rgba(36, 180, 126, .34) !important;
  color: var(--nx-midnight) !important;
}

.aipe-cpm-btn.primary {
  background: linear-gradient(180deg, #F7E6C2 0%, var(--nx-gold) 100%) !important;
  border-color: rgba(168, 135, 74, .62) !important;
  color: var(--nx-midnight) !important;
}

.aipe-cpm-btn.green {
  background: var(--nx-midnight) !important;
  border-color: var(--nx-midnight) !important;
  color: var(--nx-ivory) !important;
}

.aipe-cpm-btn.ghost {
  background: rgba(251, 247, 241, .08) !important;
  border-color: rgba(251, 247, 241, .24) !important;
  color: var(--nx-ivory) !important;
}

.aipe-cpm-toolbar-btn,
#aipe-cpm-demo-fallback-btn {
  background: linear-gradient(180deg, #F7E6C2 0%, var(--nx-gold) 100%) !important;
  border-color: rgba(168, 135, 74, .62) !important;
  color: var(--nx-midnight) !important;
}

body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .ap-sidebar-brand,
body.ap-vertical-shell .tabs.ap-nav-peek .ap-sidebar-brand {
  position: relative !important;
  min-height: 94px !important;
  padding: 0 !important;
  justify-content: flex-start !important;
  align-items: center !important;
}

body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .ap-sidebar-mark,
body.ap-vertical-shell .tabs.ap-nav-peek .ap-sidebar-mark {
  position: absolute !important;
  left: 18px !important;
  right: 128px !important;
  top: 34px !important;
  width: auto !important;
  height: 52px !important;
  flex: 0 1 auto !important;
  display: grid !important;
  place-items: center start !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}

body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .ap-sidebar-logo,
body.ap-vertical-shell .tabs.ap-nav-peek .ap-sidebar-logo {
  content: url('../logo.png') !important;
  display: block !important;
  width: 100% !important;
  max-width: 166px !important;
  height: 52px !important;
  object-fit: contain !important;
  object-position: left center !important;
  border-radius: 0 !important;
}

body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .ap-settings-shortcut,
body.ap-vertical-shell .tabs.ap-nav-peek .ap-settings-shortcut,
body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .ap-sidebar-toggle,
body.ap-vertical-shell .tabs.ap-nav-peek .ap-sidebar-toggle {
  top: 35px !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  max-width: 34px !important;
  max-height: 34px !important;
  border-radius: 12px !important;
}

body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .ap-settings-shortcut,
body.ap-vertical-shell .tabs.ap-nav-peek .ap-settings-shortcut {
  right: 58px !important;
}

body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .ap-sidebar-toggle,
body.ap-vertical-shell .tabs.ap-nav-peek .ap-sidebar-toggle {
  right: 18px !important;
}

body.ap-vertical-shell .tabs.ap-nav-collapsed:not(.ap-nav-peek) .ap-sidebar-logo {
  content: url('../nexora-ai-sidebar-icon.png') !important;
}

/* Final sidebar brand alignment lock. Keep the logo and top actions in one clean row. */
html body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .ap-sidebar-brand,
html body.ap-vertical-shell .tabs.ap-nav-peek .ap-sidebar-brand {
  position: relative !important;
  min-height: 100px !important;
  padding: 0 !important;
  display: block !important;
  border-bottom-color: rgba(251, 247, 241, .10) !important;
}

html body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .ap-sidebar-mark,
html body.ap-vertical-shell .tabs.ap-nav-peek .ap-sidebar-mark {
  position: absolute !important;
  left: 22px !important;
  top: 34px !important;
  right: 116px !important;
  width: auto !important;
  height: 50px !important;
  display: block !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

html body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .ap-sidebar-logo,
html body.ap-vertical-shell .tabs.ap-nav-peek .ap-sidebar-logo {
  content: url('../logo.png') !important;
  display: block !important;
  width: 158px !important;
  max-width: 100% !important;
  height: 50px !important;
  object-fit: contain !important;
  object-position: left center !important;
}

html body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .ap-settings-shortcut,
html body.ap-vertical-shell .tabs.ap-nav-peek .ap-settings-shortcut,
html body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .ap-sidebar-toggle,
html body.ap-vertical-shell .tabs.ap-nav-peek .ap-sidebar-toggle {
  top: 35px !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  max-width: 34px !important;
  max-height: 34px !important;
  border-radius: 12px !important;
}

html body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .ap-settings-shortcut,
html body.ap-vertical-shell .tabs.ap-nav-peek .ap-settings-shortcut {
  right: 60px !important;
}

html body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .ap-sidebar-toggle,
html body.ap-vertical-shell .tabs.ap-nav-peek .ap-sidebar-toggle {
  right: 18px !important;
}

/* Precise sidebar header alignment: logo and action buttons share one visual line. */
html body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .ap-sidebar-brand,
html body.ap-vertical-shell .tabs.ap-nav-peek .ap-sidebar-brand {
  min-height: 78px !important;
  margin-bottom: 4px !important;
}

html body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .ap-sidebar-mark,
html body.ap-vertical-shell .tabs.ap-nav-peek .ap-sidebar-mark {
  left: 18px !important;
  right: 94px !important;
  top: 21px !important;
  height: 42px !important;
  display: flex !important;
  align-items: center !important;
}

html body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .ap-sidebar-logo,
html body.ap-vertical-shell .tabs.ap-nav-peek .ap-sidebar-logo {
  width: 184px !important;
  height: 42px !important;
  max-width: 100% !important;
  object-fit: contain !important;
  object-position: left center !important;
}

html body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .ap-settings-shortcut,
html body.ap-vertical-shell .tabs.ap-nav-peek .ap-settings-shortcut,
html body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .ap-sidebar-toggle,
html body.ap-vertical-shell .tabs.ap-nav-peek .ap-sidebar-toggle {
  top: 37px !important;
}

/* Theme 05 final app-wide lock: Soft Beige, Midnight Blue, Muted Gold. */
:root {
  --nx-midnight: #0F1B2E;
  --nx-midnight-2: #0A1423;
  --nx-soft-blue: #4D6E91;
  --nx-gold: #24B47E;
  --nx-gold-2: #188D68;
  --nx-beige: #F3E9DA;
  --nx-charcoal: #2A2F36;
  --nx-ivory: #FBF7F1;
  --nx-panel: #FFFDF8;
  --nx-muted-text: rgba(42, 47, 54, .72);
  --nx-soft-line: rgba(42, 47, 54, .12);

  --bg: var(--nx-ivory);
  --bg2: var(--nx-beige);
  --p: var(--nx-panel);
  --p2: var(--nx-beige);
  --sk: rgba(15, 27, 46, .14);
  --sk2: rgba(42, 47, 54, .11);
  --mu: var(--nx-soft-blue);
  --so: var(--nx-charcoal);
  --tx: var(--nx-charcoal);
  --st: var(--nx-midnight);
  --bl: var(--nx-midnight);
  --cy: var(--nx-soft-blue);
  --gn: var(--nx-soft-blue);
  --am: var(--nx-gold);

  --ap-page: var(--nx-ivory);
  --ap-surface: var(--nx-panel);
  --ap-surface-2: var(--nx-beige);
  --ap-border: rgba(15, 27, 46, .14);
  --ap-border-strong: rgba(15, 27, 46, .24);
  --ap-text: var(--nx-midnight);
  --ap-muted: var(--nx-soft-blue);
  --ap-faint: #7B8794;
  --ap-ink: var(--nx-midnight);
  --ap-olive: var(--nx-midnight);
  --ap-olive-deep: var(--nx-midnight);
  --ap-olive-dark: var(--nx-midnight-2);
  --ap-sage: var(--nx-soft-blue);
  --ap-honey: var(--nx-gold);
  --ap-honey-deep: var(--nx-gold-2);

  --rs-ink: var(--nx-midnight);
  --rs-olive: var(--nx-midnight);
  --rs-olive-2: var(--nx-midnight);
  --rs-sage: var(--nx-soft-blue);
  --rs-gold: var(--nx-gold);
  --docai-accent: var(--nx-gold);
  --docai-olive: var(--nx-midnight);
  --docai-ink: var(--nx-midnight);
}

/* Home: match the reference board exactly. */
.home-hero {
  background: linear-gradient(135deg, #071222 0%, var(--nx-midnight) 62%, #172A42 100%) !important;
  color: var(--nx-ivory) !important;
  border: 1px solid rgba(251, 247, 241, .08) !important;
  box-shadow: 0 18px 38px rgba(15, 27, 46, .18) !important;
}

.home-hero-eyebrow {
  color: var(--nx-gold) !important;
}

.home-card-h,
.home-getstarted .home-card-h,
.home-plan .home-card-h,
.home-card .home-card-h {
  color: var(--nx-charcoal) !important;
}

.home-card-h .home-dot,
.home-dot {
  background: var(--nx-gold) !important;
  border-color: rgba(36, 180, 126, .38) !important;
  box-shadow: 0 0 0 4px rgba(36, 180, 126, .12) !important;
}

.home-btn,
.home-btn-primary,
.home-btn-ghost {
  border-radius: 8px !important;
}

.home-hero .home-btn-primary,
.home-hero-actions .home-btn-primary,
#tp-home .home-hero .home-btn-primary {
  background: linear-gradient(180deg, #e8f5e9 0%, var(--nx-gold) 100%) !important;
  border-color: rgba(168, 135, 74, .62) !important;
  color: var(--nx-midnight) !important;
  box-shadow: 0 12px 24px rgba(36, 180, 126, .22), inset 0 1px 0 rgba(255, 255, 255, .50) !important;
}

.home-hero .home-btn-primary:hover,
.home-hero-actions .home-btn-primary:hover {
  background: linear-gradient(180deg, #FFF1D2 0%, #D6B36E 100%) !important;
  border-color: rgba(168, 135, 74, .74) !important;
  color: var(--nx-midnight) !important;
}

.home-getstarted .home-btn-primary,
.home-active .home-btn-primary,
.home-card:not(.home-hero) .home-btn-primary {
  background: var(--nx-midnight) !important;
  border-color: var(--nx-midnight) !important;
  color: var(--nx-ivory) !important;
  box-shadow: 0 10px 20px rgba(15, 27, 46, .18) !important;
}

.home-getstarted .home-btn-primary:hover,
.home-active .home-btn-primary:hover,
.home-card:not(.home-hero) .home-btn-primary:hover {
  background: #172A42 !important;
  border-color: #172A42 !important;
  color: var(--nx-ivory) !important;
}

.home-quick-ic,
.home-step-n {
  background: var(--nx-midnight) !important;
  border-color: rgba(15, 27, 46, .18) !important;
  color: var(--nx-ivory) !important;
}

.home-plan-badge,
.chip,
.badge,
.pill,
.tbadge {
  background: rgba(77, 110, 145, .10) !important;
  border-color: rgba(77, 110, 145, .22) !important;
  color: var(--nx-midnight) !important;
}

.home-usage-bar i,
.progress-fill,
.bar-fill {
  background: linear-gradient(90deg, var(--nx-midnight), var(--nx-soft-blue), var(--nx-gold)) !important;
}

/* Settings and usage tabs. */
#tp-settings .dsett-card,
#tp-settings .appr-block,
#tp-settings .usage-panel,
#tp-settings .usage-plan-card,
#tp-settings .usage-hero-meter,
#tp-settings .usage-suggestion,
#tp-settings .usage-user-quota,
#tp-settings .usage-current-model,
#tp-settings .usage-kpis div,
#tp-settings .usage-model-table,
#tp-settings .appr-card,
#tp-settings .appr-custom-row {
  background: rgba(255, 253, 248, .94) !important;
  border-color: rgba(42, 47, 54, .12) !important;
  color: var(--nx-midnight) !important;
  box-shadow: 0 14px 30px rgba(15, 27, 46, .07) !important;
}

#tp-settings .dsett-title,
#tp-settings .dsett-card h2,
#tp-settings .dsett-card h3,
#tp-settings .appr-block-title,
#tp-settings .appr-card-name,
#tp-settings .usage-panel-hdr h3,
#tp-settings .usage-plan-card strong,
#tp-settings .usage-meter-head b,
#tp-settings .usage-user-quota-head b,
#tp-settings .usage-current-model b,
#tp-settings .usage-row>span,
#tp-settings .usage-kpis b {
  color: var(--nx-midnight) !important;
}

#tp-settings .dsett-sub,
#tp-settings .appr-block-sub,
#tp-settings .usage-panel-hdr p,
#tp-settings .usage-plan-card small,
#tp-settings .usage-row small,
#tp-settings .usage-kpis small,
#tp-settings .usage-meter-head span,
#tp-settings .usage-form-grid label>span,
#tp-settings .usage-user-picker label>span,
#tp-settings .usage-user-quota-head span,
#tp-settings .usage-user-quota-foot span {
  color: var(--nx-muted-text) !important;
}

#tp-settings .usage-meter-track span,
#tp-settings .usage-user-quota-track span,
#tp-settings .usage-audience-switch button.is-active {
  background: linear-gradient(90deg, var(--nx-midnight), var(--nx-soft-blue), var(--nx-gold)) !important;
  border-color: rgba(36, 180, 126, .38) !important;
  color: var(--nx-ivory) !important;
}

#tp-settings .usage-ico,
#tp-settings .usage-suggestion-icon,
#tp-settings .usage-tag--user {
  background: rgba(77, 110, 145, .12) !important;
  border-color: rgba(77, 110, 145, .22) !important;
  color: var(--nx-midnight) !important;
}

#tp-settings .usage-tag,
#tp-settings .usage-tier,
#tp-settings .usage-plan-kicker,
#tp-settings .usage-suggestion-main b,
#tp-settings .usage-suggestion-meta small {
  background: rgba(36, 180, 126, .16) !important;
  color: var(--nx-gold-2) !important;
}

#tp-settings .usage-row--head {
  background: var(--nx-midnight) !important;
}

#tp-settings .usage-row--head span {
  color: var(--nx-ivory) !important;
}

#tp-settings .usage-reco {
  background: rgba(77, 110, 145, .08) !important;
  border-color: rgba(77, 110, 145, .20) !important;
}

#tp-settings .usage-reco b,
#tp-settings .usage-reco span {
  color: var(--nx-midnight) !important;
}

#tp-settings .appr-card.is-active,
#tp-settings .usage-plan-card.is-active,
#tp-settings .usage-suggestion.is-active {
  border-color: var(--nx-gold) !important;
  box-shadow: 0 0 0 2px rgba(36, 180, 126, .18) !important;
}

/* Common tab surfaces and action controls. */
.panel,
.card,
.box,
.modal,
.sheet-picker-modal,
.map-outer,
.map-stats,
.mapping-v2-workspace,
.m2-card,
.m2-stage-card,
.docai-workspace,
.docai-control-hero,
.nexus-card,
.maestro-card,
.forge-board,
.forge-sbox,
.forge-cbox,
.forge-cpm-card {
  background: rgba(255, 255, 255, .92) !important;
  border-color: rgba(232, 236, 239, .94) !important;
  color: var(--nx-charcoal) !important;
}

.ptitle,
.map-stat .ms-val,
.m2-title,
.docai-card-title,
.nexus-title,
.maestro-title,
.forge-app-name,
.forge-step-title,
.forge-sval,
.forge-rtxt {
  color: var(--nx-midnight) !important;
}

.muted,
.subtle,
.logo-sub,
.forge-app-sub,
.forge-step-detail,
.forge-board-meta,
.forge-cpm-sub,
.forge-cline.dim {
  color: var(--nx-muted-text) !important;
}

.hbtn.primary,
.btn.primary,
.primary-btn,
.gen-btn,
.send-btn,
.apr-btn.pri,
.apr-btn.all,
.aipe-cpm-btn.green,
.zs-btn--primary,
.aipe-v29-action.primary {
  background: var(--nx-midnight) !important;
  border-color: var(--nx-midnight) !important;
  color: var(--nx-ivory) !important;
  box-shadow: 0 12px 24px rgba(15, 27, 46, .18) !important;
}

.aipe-cpm-btn.primary,
.tour-arrow-primary,
.aipe-cpm-toolbar-btn,
#aipe-cpm-demo-fallback-btn {
  background: linear-gradient(180deg, #e8f5e9 0%, var(--nx-gold) 100%) !important;
  border-color: rgba(168, 135, 74, .62) !important;
  color: var(--nx-midnight) !important;
  box-shadow: 0 12px 24px rgba(36, 180, 126, .22) !important;
}

.hbtn:hover,
.btn:hover,
.primary-btn:hover,
.gen-btn:hover,
.send-btn:hover,
.apr-btn:hover {
  border-color: rgba(36, 180, 126, .42) !important;
  filter: brightness(1.02) !important;
}

input:focus,
textarea:focus,
select:focus,
.inp:focus,
.chat-inp:focus {
  border-color: rgba(36, 180, 126, .82) !important;
  box-shadow: 0 0 0 3px rgba(36, 180, 126, .18) !important;
}

/* Forge/live builder remnants from the older olive theme. */
.forge-ov {
  background:
    radial-gradient(ellipse 46% 36% at 18% 12%, rgba(36, 180, 126, .12), transparent 62%),
    radial-gradient(ellipse 48% 38% at 82% 72%, rgba(77, 110, 145, .10), transparent 62%),
    linear-gradient(135deg, var(--nx-ivory) 0%, var(--nx-beige) 100%) !important;
  color: var(--nx-midnight) !important;
}

.forge-top,
.forge-footer,
.forge-pipeline,
.forge-right {
  background: rgba(255, 253, 248, .94) !important;
  border-color: rgba(42, 47, 54, .12) !important;
}

.forge-chip,
.forge-step-tag,
.forge-cpm-icon {
  background: rgba(77, 110, 145, .10) !important;
  border-color: rgba(77, 110, 145, .22) !important;
  color: var(--nx-midnight) !important;
}

.forge-chip b,
.forge-board-meta.active,
.forge-es-label b,
.forge-fmsg,
.forge-fstep,
.forge-badge,
.forge-pipe-pct,
.forge-cpm-top,
.forge-cline.cmd,
.forge-cline.ok,
.forge-row.forge-wbs-r .forge-rid,
.forge-row.forge-wbs-r .forge-rtxt {
  color: var(--nx-midnight) !important;
}

.forge-chip .dot,
.forge-badge-dot,
.forge-es-dot {
  background: var(--nx-gold) !important;
  box-shadow: 0 0 0 4px rgba(36, 180, 126, .14) !important;
}

.forge-pipe-fill,
.forge-seg.done,
.forge-seg.active,
.forge-bar,
.forge-bar.forge-go,
.forge-bar.forge-wb {
  background: linear-gradient(90deg, var(--nx-midnight), var(--nx-soft-blue), var(--nx-gold)) !important;
}

.forge-step.done .forge-step-node,
.forge-step.active .forge-step-node {
  background: var(--nx-gold) !important;
  border-color: var(--nx-gold-2) !important;
  color: var(--nx-midnight) !important;
}

.forge-links .forge-lnk,
.forge-lnk {
  stroke: var(--nx-soft-blue) !important;
}

/* Mapping, results, helper overlays and late-loaded local tab styles. */
.m2-pill,
.type-pill,
.v9-badge,
.zai-chip,
.aipe-v29-badge,
.zs-chip--on,
.zs-chip--ai {
  background: rgba(77, 110, 145, .10) !important;
  border-color: rgba(77, 110, 145, .22) !important;
  color: var(--nx-midnight) !important;
}

.map-pill.active,
.m2-tab.active,
.zs-btn--primary,
.zs-row-ord,
.aipe-v29-action.primary,
.aipe-v29-sheet.active {
  background: var(--nx-midnight) !important;
  border-color: var(--nx-midnight) !important;
  color: var(--nx-ivory) !important;
}

.zs-conn,
.zs-leg-dot {
  stroke: var(--nx-gold) !important;
  border-top-color: var(--nx-gold) !important;
}

/* Data Input tab lock: override the older cream/olive/red input theme. */
#tp-input {
  color: var(--nx-charcoal) !important;
}

#tp-input .dinput-card {
  background: #F5F5F5 !important;
  border-color: rgba(42, 47, 54, .12) !important;
  border-radius: 8px !important;
  box-shadow: 0 18px 36px rgba(15, 27, 46, .08) !important;
  color: var(--nx-charcoal) !important;
}

#tp-input .dinput-card-title,
#tp-input .dinput-check-title,
#tp-input .dinput-dz-title,
#tp-input .dinput-files-title,
#tp-input .dinput-fname-text,
#tp-input .dinput-setup-val,
#tp-input .dinput-ring-pct {
  color: var(--nx-midnight) !important;
}

#tp-input .dinput-card-desc,
#tp-input .dinput-lbl,
#tp-input .dinput-check-sub,
#tp-input .dinput-dz-sub,
#tp-input .dinput-fsize,
#tp-input .dinput-fdate,
#tp-input .dinput-setup-key,
#tp-input .dinput-char-count {
  color: var(--nx-muted-text) !important;
}

#tp-input .dinput-card-num {
  background: rgba(36, 180, 126, .18) !important;
  border: 1px solid rgba(36, 180, 126, .34) !important;
  color: var(--nx-midnight) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .62) !important;
}

#tp-input .dinput-inp,
#tp-input .dinput-textarea,
#tp-input .dinput-files-table,
#tp-input .dinput-dropzone,
#tp-input .dinput-check-item,
#tp-input .dinput-settings-btn,
#tp-input .dinput-browse-btn {
  background: rgba(251, 247, 241, .72) !important;
  border-color: rgba(42, 47, 54, .13) !important;
  color: var(--nx-midnight) !important;
  box-shadow: none !important;
}

#tp-input .dinput-inp:focus,
#tp-input .dinput-textarea:focus {
  background: var(--nx-panel) !important;
  border-color: rgba(36, 180, 126, .82) !important;
  box-shadow: 0 0 0 3px rgba(36, 180, 126, .18) !important;
}

#tp-input .dinput-inp::placeholder,
#tp-input .dinput-textarea::placeholder {
  color: rgba(42, 47, 54, .42) !important;
}

#tp-input .dinput-input-icon,
#tp-input .dinput-dz-icon,
#tp-input .dinput-setup-key svg,
#tp-input .dinput-settings-btn svg,
#tp-input .dinput-browse-btn svg {
  color: var(--nx-soft-blue) !important;
  stroke: currentColor !important;
}

#tp-input .dinput-dropzone:hover,
#tp-input .dinput-dropzone.drag,
#tp-input .dinput-check-item:hover,
#tp-input .dinput-settings-btn:hover,
#tp-input .dinput-browse-btn:hover {
  background: var(--nx-panel) !important;
  border-color: rgba(36, 180, 126, .44) !important;
}

#tp-input .dinput-files-row--head {
  background: rgba(243, 233, 218, .78) !important;
  color: var(--nx-soft-blue) !important;
}

#tp-input .dinput-fname-ico,
#tp-input .dinput-ftype-pill,
#tp-input .dinput-fstatus {
  background: rgba(77, 110, 145, .10) !important;
  border-color: rgba(77, 110, 145, .22) !important;
  color: var(--nx-midnight) !important;
}

#tp-input .dinput-status-dot {
  background: var(--nx-soft-blue) !important;
  box-shadow: 0 0 0 3px rgba(77, 110, 145, .16) !important;
}

#tp-input .dinput-ring-bg {
  stroke: rgba(15, 27, 46, .12) !important;
}

#tp-input .dinput-ring-fg {
  stroke: var(--nx-soft-blue) !important;
}

#tp-input .dinput-check-item.is-pending .dinput-check-icon {
  background: var(--nx-gold) !important;
  box-shadow: 0 0 0 4px rgba(36, 180, 126, .14) !important;
  color: var(--nx-ivory) !important;
}

#tp-input .dinput-check-item.is-ok .dinput-check-icon {
  background: var(--nx-soft-blue) !important;
  box-shadow: 0 0 0 4px rgba(77, 110, 145, .16) !important;
  color: var(--nx-ivory) !important;
}

#tp-input .dinput-check-chev {
  color: rgba(77, 110, 145, .42) !important;
}

#tp-input .dinput-ready-cta--pending {
  background: rgba(36, 180, 126, .14) !important;
  border-color: rgba(36, 180, 126, .34) !important;
  color: var(--nx-gold-2) !important;
}

#tp-input .dinput-ready-cta--ok {
  background: rgba(77, 110, 145, .10) !important;
  border-color: rgba(77, 110, 145, .24) !important;
  color: var(--nx-midnight) !important;
}

#tp-input .dinput-ready-cta svg {
  color: currentColor !important;
  stroke: currentColor !important;
}

#tp-input .dinput-setup-row {
  border-bottom-color: rgba(42, 47, 54, .10) !important;
}

/* Header AI status and Generate button states, including "Configure AI First". */
#apiSt,
.hdr .hbtns #apiSt,
.hdr>#apiSt {
  background: rgba(243, 233, 218, .72) !important;
  border-color: rgba(36, 180, 126, .34) !important;
  color: var(--nx-midnight) !important;
  box-shadow: none !important;
}

#apiSt #apiTxt {
  color: var(--nx-midnight) !important;
}

#apiSt #apiDot {
  background: var(--nx-gold) !important;
  box-shadow: 0 0 0 4px rgba(36, 180, 126, .14) !important;
}

#hGenBtn.gbtn,
.gbtn {
  border-radius: 8px !important;
}

#hGenBtn.gbtn--unconfigured,
.gbtn--unconfigured,
#hGenBtn.gbtn--ready,
.gbtn--ready {
  background: linear-gradient(180deg, #e8f5e9 0%, var(--nx-gold) 100%) !important;
  border-color: rgba(168, 135, 74, .62) !important;
  color: var(--nx-midnight) !important;
  box-shadow: 0 12px 24px rgba(36, 180, 126, .22), inset 0 1px 0 rgba(255, 255, 255, .48) !important;
}

#hGenBtn.gbtn--unconfigured:hover:not(:disabled),
.gbtn--unconfigured:hover:not(:disabled),
#hGenBtn.gbtn--ready:hover:not(:disabled),
.gbtn--ready:hover:not(:disabled) {
  background: linear-gradient(180deg, #FFF1D2 0%, #D6B36E 100%) !important;
  border-color: rgba(168, 135, 74, .74) !important;
  color: var(--nx-midnight) !important;
}

#hGenBtn.gbtn--missing,
.gbtn--missing {
  background: rgba(243, 233, 218, .74) !important;
  border-color: rgba(42, 47, 54, .12) !important;
  color: rgba(42, 47, 54, .60) !important;
  box-shadow: none !important;
}

#hGenBtn.gbtn--generating,
.gbtn--generating,
#hGenBtn.gbtn--generated,
.gbtn--generated {
  background: var(--nx-midnight) !important;
  border-color: var(--nx-midnight) !important;
  color: var(--nx-ivory) !important;
  box-shadow: 0 12px 24px rgba(15, 27, 46, .22) !important;
}

#hGenBtn.gbtn--failed,
.gbtn--failed {
  background: var(--nx-charcoal) !important;
  border-color: var(--nx-charcoal) !important;
  color: var(--nx-ivory) !important;
  box-shadow: 0 12px 24px rgba(42, 47, 54, .22) !important;
}

.gbtn--open-secondary {
  background: var(--nx-panel) !important;
  border-color: rgba(77, 110, 145, .28) !important;
  color: var(--nx-midnight) !important;
  box-shadow: none !important;
}

/* Result tabs: remove the old near-black/olive inheritance from visible panels. */
.tp,
.aipe-result-out,
.aipe-result-copy,
.wbs-view-switch,
.wbs-view-tabs,
.acts-page-hdr,
.lk-page-hdr,
.empty,
.empty-t,
.empty-v5 {
  color: var(--nx-charcoal) !important;
}

.aipe-result-title,
.aipe-result-title-wrap,
.acts-page-title,
.wbs-title,
.wbs-view-switch b,
.empty-t,
.ptitle,
.panel h1,
.panel h2,
.panel h3 {
  color: var(--nx-midnight) !important;
}

.aipe-result-kicker,
.aipe-result-sub,
.acts-page-sub,
.empty p,
.empty-v5,
.subtle,
.muted {
  color: var(--nx-muted-text) !important;
}

#tp-links .lk-page-hdr {
  background: rgba(255, 255, 255, .92) !important;
  border-color: rgba(232, 236, 239, .94) !important;
  color: #1B1A17 !important;
  box-shadow: 0 18px 36px rgba(15, 27, 46, .08) !important;
}

#tp-calendar,
#tp-links {
  --cal-navy: var(--nx-midnight);
  --cal-navy-2: #172A42;
  --cal-gold: var(--nx-gold);
  --cal-gold-2: var(--nx-gold-2);
  --cal-ink: var(--nx-midnight);
  --cal-muted: var(--nx-soft-blue);
  --cal-line: rgba(42, 47, 54, .12);
  --rel-navy: var(--nx-midnight);
  --rel-navy-2: #172A42;
  --rel-ink: var(--nx-midnight);
  --rel-muted: var(--nx-soft-blue);
  --rel-line: rgba(42, 47, 54, .12);
  --rel-gold: var(--nx-gold);
}

html body .tp.active .empty-t,
html body .tp.active .empty-v5 .t,
html body .tp.active .empty .empty-t,
html body #tp-wbs.tp.active .wbs-view-tabs button,
html body #tp-wbs.tp.active .wbs-view-switch button,
html body #tp-calendar.tp.active .pcal-editor-hdr,
html body #tp-calendar.tp.active .pcal-title-wrap,
html body #tp-calendar.tp.active .pcal-title-line,
html body #tp-calendar.tp.active .pcal-header-actions,
html body #tp-calendar.tp.active .pcal-prem-data,
html body #tp-calendar.tp.active .pcal-prem-head,
html body #tp-calendar.tp.active .pcal-section {
  color: var(--nx-midnight) !important;
}

html body .tp.active .empty,
html body .tp.active .empty-v5,
html body #tp-calendar.tp.active {
  color: var(--nx-charcoal) !important;
}

html body #tp-wbs.tp.active .wbs-view-tabs button.active,
html body #tp-wbs.tp.active .wbs-view-switch button.active {
  background: linear-gradient(180deg, #e8f5e9 0%, var(--nx-gold) 100%) !important;
  border-color: rgba(168, 135, 74, .62) !important;
  color: var(--nx-midnight) !important;
}

/* Generated result headers are intentionally dark: blue surface, light copy. */
html body #wbsOut .aipe-result-head,
html body #actsOut .aipe-result-head,
html body #linksOut .aipe-result-head,
html body #cpOut .aipe-result-head,
html body #msOut .aipe-result-head,
html body #labourOut .aipe-result-head,
html body #histOut .aipe-result-head {
  background: radial-gradient(ellipse 46% 62% at 88% 28%, rgba(127, 216, 197, .28), transparent 62%),
    linear-gradient(135deg, #EAF7F4 0%, #F8FCFB 58%, #FFFFFF 100%);
  border-color: rgba(36, 180, 126, .34) !important;
  color: var(--nx-ivory) !important;
  box-shadow:
    inset 0 1px 0 rgba(251, 247, 241, .08),
    0 16px 36px rgba(15, 27, 46, .18) !important;
}

html body #wbsOut .aipe-result-head .aipe-result-title,
html body #actsOut .aipe-result-head .aipe-result-title,
html body #linksOut .aipe-result-head .aipe-result-title,
html body #cpOut .aipe-result-head .aipe-result-title,
html body #msOut .aipe-result-head .aipe-result-title,
html body #labourOut .aipe-result-head .aipe-result-title,
html body #histOut .aipe-result-head .aipe-result-title {
  color: var(--nx-midnight-2) !important;
}

html body #wbsOut .aipe-result-head .aipe-result-kicker,
html body #actsOut .aipe-result-head .aipe-result-kicker,
html body #linksOut .aipe-result-head .aipe-result-kicker,
html body #cpOut .aipe-result-head .aipe-result-kicker,
html body #msOut .aipe-result-head .aipe-result-kicker,
html body #labourOut .aipe-result-head .aipe-result-kicker,
html body #histOut .aipe-result-head .aipe-result-kicker {
  color: var(--nx-gold) !important;
}

html body #wbsOut .aipe-result-head .aipe-result-sub,
html body #actsOut .aipe-result-head .aipe-result-sub,
html body #linksOut .aipe-result-head .aipe-result-sub,
html body #cpOut .aipe-result-head .aipe-result-sub,
html body #msOut .aipe-result-head .aipe-result-sub,
html body #labourOut .aipe-result-head .aipe-result-sub,
html body #histOut .aipe-result-head .aipe-result-sub {
  color: var(--nx-midnight) !important;
}

html body #wbsOut .aipe-result-head .aipe-result-icon,
html body #actsOut .aipe-result-head .aipe-result-icon,
html body #linksOut .aipe-result-head .aipe-result-icon,
html body #cpOut .aipe-result-head .aipe-result-icon,
html body #msOut .aipe-result-head .aipe-result-icon,
html body #labourOut .aipe-result-head .aipe-result-icon,
html body #histOut .aipe-result-head .aipe-result-icon {
  background: linear-gradient(180deg, #e8f5e9 0%, var(--nx-gold) 100%) !important;
  border-color: rgba(251, 247, 241, .32) !important;
  color: var(--nx-midnight) !important;
}

html body #wbsOut .aipe-result-head .aipe-result-pill,
html body #actsOut .aipe-result-head .aipe-result-pill,
html body #linksOut .aipe-result-head .aipe-result-pill,
html body #cpOut .aipe-result-head .aipe-result-pill,
html body #msOut .aipe-result-head .aipe-result-pill,
html body #labourOut .aipe-result-head .aipe-result-pill,
html body #histOut .aipe-result-head .aipe-result-pill {
  background: rgba(251, 247, 241, .08) !important;
  border-color: rgba(36, 180, 126, .42) !important;
  color: var(--nx-midnight) !important;
}

html body #wbsOut .aipe-result-head .aipe-result-pill::before,
html body #actsOut .aipe-result-head .aipe-result-pill::before,
html body #linksOut .aipe-result-head .aipe-result-pill::before,
html body #cpOut .aipe-result-head .aipe-result-pill::before,
html body #msOut .aipe-result-head .aipe-result-pill::before,
html body #labourOut .aipe-result-head .aipe-result-pill::before,
html body #histOut .aipe-result-head .aipe-result-pill::before {
  background: var(--nx-gold) !important;
  box-shadow: 0 0 0 3px rgba(36, 180, 126, .16) !important;
}

html body .aipe-result-out table thead th,
html body .aipe-result-out .tree-table thead th,
html body .aipe-result-out .lk-tbl thead th,
html body .aipe-result-out .lb-tbl thead th,
html body .aipe-result-out .h-tbl thead th,
html body .aipe-result-out .h-mtbl thead th {
  background: linear-gradient(180deg, #172A42 0%, var(--nx-midnight) 100%) !important;
  border-bottom: 2px solid rgba(36, 180, 126, .44) !important;
  color: var(--nx-ivory) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

/* Settings page: Theme 05, consistent with the rest of Nexora AI. */
html body #tp-settings.tp.active,
html body #tp-settings .dsett-shell {
  color: var(--nx-charcoal) !important;
}

html body #tp-settings .dsett-aside,
html body #tp-settings .dsett-main,
html body #tp-settings .dsett-right-card,
html body #tp-settings .dsett-history,
html body #tp-settings .dsett-history-table,
html body #tp-settings .dsett-empty-state,
html body #tp-settings .usage-hero-meter,
html body #tp-settings .usage-panel,
html body #tp-settings .usage-plan-card,
html body #tp-settings .usage-current-model,
html body #tp-settings .usage-user-quota,
html body #tp-settings .usage-suggestion,
html body #tp-settings .usage-user-strip,
html body #tp-settings .usage-kpis div,
html body #tp-settings .usage-reco,
html body #tp-settings .usage-model-table,
html body #tp-settings .appr-block,
html body #tp-settings .appr-card,
html body #tp-settings .appr-custom-row,
html body #tp-settings .appr-mock {
  background: rgba(255, 255, 255, .92) !important;
  border-color: rgba(232, 236, 239, .94) !important;
  box-shadow: 0 18px 36px rgba(15, 27, 46, .08) !important;
}

html body #tp-settings .dsett-aside-title,
html body #tp-settings .dsett-history-thead,
html body #tp-settings .usage-plan-kicker,
html body #tp-settings .usage-tag,
html body #tp-settings .usage-meter-head span,
html body #tp-settings .usage-form-grid label>span,
html body #tp-settings .usage-kpis span,
html body #tp-settings .usage-user-picker label>span {
  color: var(--nx-gold) !important;
}

html body #tp-settings .dsett-sect-title,
html body #tp-settings .dsett-nav-title,
html body #tp-settings .dsett-lbl,
html body #tp-settings .dsett-banner b,
html body #tp-settings .dsett-toggle b,
html body #tp-settings .dsett-history-hdr h3,
html body #tp-settings .dsett-history-empty b,
html body #tp-settings .dsett-right-card-hdr,
html body #tp-settings .dsett-right-card-title,
html body #tp-settings .dsett-right-card-body b,
html body #tp-settings .dsett-related b,
html body #tp-settings .usage-meter-head b,
html body #tp-settings .usage-panel-hdr h3,
html body #tp-settings .usage-current-model b,
html body #tp-settings .usage-user-quota-head b,
html body #tp-settings .usage-suggestion-main b,
html body #tp-settings .usage-suggestion-main strong,
html body #tp-settings .usage-suggestion-meta b,
html body #tp-settings .usage-user-strip b,
html body #tp-settings .usage-kpis b,
html body #tp-settings .usage-reco b,
html body #tp-settings .usage-row>span,
html body #tp-settings .usage-plan-card strong,
html body #tp-settings .appr-block-title,
html body #tp-settings .appr-card-name,
html body #tp-settings .appr-custom-lbl,
html body #tp-settings .appr-mock-act {
  color: var(--nx-midnight) !important;
}

html body #tp-settings .dsett-sect-desc,
html body #tp-settings .dsett-nav-sub,
html body #tp-settings .dsett-optional,
html body #tp-settings .dsett-hint,
html body #tp-settings .dsett-banner span,
html body #tp-settings .dsett-toggle small,
html body #tp-settings .dsett-history-sub,
html body #tp-settings .dsett-history-empty span,
html body #tp-settings .dsett-right-card p,
html body #tp-settings .dsett-right-card-body span,
html body #tp-settings .dsett-related small,
html body #tp-settings .usage-panel-hdr p,
html body #tp-settings .usage-plan-card small,
html body #tp-settings .usage-row small,
html body #tp-settings .usage-kpis small,
html body #tp-settings .usage-meter-foot,
html body #tp-settings .usage-current-model span,
html body #tp-settings .usage-user-quota-foot span,
html body #tp-settings .usage-suggestion-main small,
html body #tp-settings .usage-reco span,
html body #tp-settings .appr-block-sub,
html body #tp-settings .appr-sw-hex {
  color: var(--nx-muted-text) !important;
}

html body #tp-settings .dsett-nav-btn,
html body #tp-settings .dsett-toggle,
html body #tp-settings .dsett-related,
html body #tp-settings .usage-audience-switch,
html body #tp-settings .usage-current-model,
html body #tp-settings .appr-custom-hex {
  background: rgba(255, 255, 255, .92) !important;
  border-color: rgba(232, 236, 239, .94) !important;
  color: var(--nx-midnight) !important;
}

html body #tp-settings .dsett-nav-btn:hover,
html body #tp-settings .dsett-toggle:hover,
html body #tp-settings .dsett-related:hover,
html body #tp-settings .appr-card:hover,
html body #tp-settings .usage-suggestion:hover {
  background: rgba(232, 236, 239, .70) !important;
  border-color: rgba(36, 180, 126, .38) !important;
}

html body #tp-settings .dsett-nav-btn.is-active,
html body #tp-settings .usage-audience-switch button.is-active,
html body #tp-settings .usage-plan-card.is-active,
html body #tp-settings .usage-suggestion.is-active,
html body #tp-settings .appr-card.is-active {
  background: rgba(36, 180, 126, .10) !important;
  border-color: rgba(36, 180, 126, .32) !important;
  box-shadow: 0 8px 20px rgba(36, 180, 126, .12) !important;
}

html body #tp-settings .dsett-nav-btn.is-active .dsett-nav-title,
html body #tp-settings .usage-audience-switch button.is-active,
html body #tp-settings .usage-plan-card.is-active *,
html body #tp-settings .usage-suggestion.is-active *,
html body #tp-settings .appr-card.is-active * {
  color: var(--nx-midnight) !important;
}

html body #tp-settings .dsett-nav-ico,
html body #tp-settings .dsett-sect-icon,
html body #tp-settings .dsett-empty-icon,
html body #tp-settings .usage-suggestion-icon,
html body #tp-settings .usage-ico {
  background: rgba(36, 180, 126, .10) !important;
  border-color: rgba(36, 180, 126, .24) !important;
  color: #188D68 !important;
}

html body #tp-settings .dsett-nav-btn.is-active .dsett-nav-ico,
html body #tp-settings .dsett-banner-icon {
  background: #24B47E !important;
  border-color: #24B47E !important;
  color: #FFFDF8 !important;
}

html body #tp-settings .dsett-aside-foot,
html body #tp-settings .dsett-banner {
  background: rgba(36, 180, 126, .06) !important;
  border-color: rgba(36, 180, 126, .22) !important;
}

html body #tp-settings .dsett-aside-foot svg,
html body #tp-settings .dsett-history-hdr h3 svg,
html body #tp-settings .dsett-ekg,
html body #tp-settings .dsett-link,
html body #tp-settings .dsett-related-chev {
  color: var(--nx-soft-blue) !important;
}

html body #tp-settings .dsett-link:hover {
  color: var(--nx-midnight) !important;
}

html body #tp-settings .dsett-inp,
html body #tp-settings .dsett-textarea,
html body #tp-settings .appr-custom-hex {
  background: rgba(245, 247, 250, .92) !important;
  border-color: rgba(232, 236, 239, .94) !important;
  color: var(--nx-midnight) !important;
}

html body #tp-settings .dsett-inp:focus,
html body #tp-settings .dsett-textarea:focus,
html body #tp-settings .appr-custom-hex:focus {
  background: #ffffff !important;
  border-color: rgba(36, 180, 126, .55) !important;
  box-shadow: 0 0 0 4px rgba(36, 180, 126, .10) !important;
}

html body #tp-settings .dsett-inp::placeholder,
html body #tp-settings .dsett-textarea::placeholder {
  color: rgba(27, 26, 23, .42) !important;
}

html body #tp-settings .dsett-eye-btn {
  color: rgba(27, 26, 23, .50) !important;
}

html body #tp-settings .dsett-eye-btn:hover,
html body #tp-settings .dsett-eye-btn.is-on {
  background: rgba(36, 180, 126, .08) !important;
  color: #188D68 !important;
}

html body #tp-settings .dsett-btn {
  background: rgba(255, 255, 255, .92) !important;
  border-color: rgba(232, 236, 239, .94) !important;
  color: var(--nx-midnight) !important;
}

html body #tp-settings .dsett-btn:hover {
  background: rgba(232, 236, 239, .70) !important;
  border-color: rgba(36, 180, 126, .42) !important;
}

html body #tp-settings .dsett-btn--primary {
  background: #188D68 !important;
  border-color: #188D68 !important;
  color: #ffffff !important;
  box-shadow: 0 10px 24px rgba(36, 180, 126, .24) !important;
}

html body #tp-settings .dsett-btn--primary:hover {
  background: #24B47E !important;
  border-color: #24B47E !important;
}

html body #tp-settings .dsett-btn--danger {
  background: rgba(184, 105, 62, .10) !important;
  border-color: rgba(184, 105, 62, .32) !important;
  color: #8B3A1F !important;
}

html body #tp-settings .dsett-btn--ghost {
  background: transparent !important;
  color: rgba(27, 26, 23, .72) !important;
}

html body #tp-settings .dsett-toggle-slider {
  background: rgba(200, 200, 200, .60) !important;
}

html body #tp-settings .dsett-toggle-slider::after {
  background: #ffffff !important;
}

html body #tp-settings .dsett-toggle input:checked+.dsett-toggle-slider {
  background: #24B47E !important;
}

html body #tp-settings .dsett-status-dot.is-off,
html body #tp-settings .dsett-status-dot.is-err {
  background: #8B3A1F !important;
  box-shadow: 0 0 0 3px rgba(139, 58, 31, .14) !important;
}

html body #tp-settings .dsett-status-dot.is-ok {
  background: #24B47E !important;
  box-shadow: 0 0 0 3px rgba(36, 180, 126, .16) !important;
}

html body #tp-settings .dsett-status-dot.is-pend,
html body #tp-settings .dsett-status-dot.is-idle {
  background: #188D68 !important;
  box-shadow: 0 0 0 3px rgba(36, 180, 126, .16) !important;
}

html body #tp-settings .usage-meter-track,
html body #tp-settings .usage-user-quota-track {
  background: rgba(42, 47, 54, .12) !important;
}

html body #tp-settings .usage-meter-track span,
html body #tp-settings .usage-user-quota-track span {
  background: linear-gradient(90deg, var(--nx-midnight), #24B47E) !important;
}

html body #tp-settings .usage-row--head,
html body #tp-settings .dsett-history-thead {
  background: rgba(15, 27, 46, .06) !important;
}

html body #tp-settings .appr-mock-chart {
  background: rgba(36, 180, 126, .06) !important;
}

html body #tp-settings .appr-mock-sum {
  background: var(--nx-midnight) !important;
}

html body #tp-settings .appr-mock-green {
  background: linear-gradient(90deg, #24B47E, rgba(36, 180, 126, .58)) !important;
}

html body #tp-settings .appr-mock-crit {
  background: linear-gradient(90deg, #8B3A1F, rgba(139, 58, 31, .54)) !important;
}

/* Settings sidebar should stay flat: no card borders around each item/icon. */
html body #tp-settings .dsett-nav-btn,
html body #tp-settings .dsett-nav-btn.is-active {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body #tp-settings .dsett-nav-btn:hover {
  background: rgba(232, 236, 239, .45) !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body #tp-settings .dsett-nav-btn.is-active .dsett-nav-title {
  color: #188D68 !important;
}

html body #tp-settings .dsett-nav-btn.is-active .dsett-nav-sub {
  color: var(--nx-muted-text) !important;
}

html body #tp-settings .dsett-nav-ico,
html body #tp-settings .dsett-nav-btn.is-active .dsett-nav-ico {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: rgba(27, 26, 23, .50) !important;
}

html body #tp-settings .dsett-nav-btn.is-active .dsett-nav-ico {
  color: #188D68 !important;
}

/* Sidebar header compacting: trim only the red-marked empty bands in the rail. */
html body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .ap-sidebar-brand,
html body.ap-vertical-shell .tabs.ap-nav-peek .ap-sidebar-brand {
  min-height: 70px !important;
  height: 70px !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  border-bottom-color: rgba(251, 247, 241, .08) !important;
}

html body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .ap-sidebar-mark,
html body.ap-vertical-shell .tabs.ap-nav-peek .ap-sidebar-mark {
  top: 7px !important;
  left: 14px !important;
  right: 106px !important;
  height: 56px !important;
  display: flex !important;
  align-items: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .ap-sidebar-logo,
html body.ap-vertical-shell .tabs.ap-nav-peek .ap-sidebar-logo {
  width: 100% !important;
  max-width: 180px !important;
  height: 56px !important;
  object-fit: contain !important;
  object-position: left center !important;
  border-radius: 0 !important;
}

html body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .ap-settings-shortcut,
html body.ap-vertical-shell .tabs.ap-nav-peek .ap-settings-shortcut,
html body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .ap-sidebar-toggle,
html body.ap-vertical-shell .tabs.ap-nav-peek .ap-sidebar-toggle {
  top: 18px !important;
  background: rgba(255, 255, 255, .92) !important;
  border: 1px solid rgba(0, 0, 0, .10) !important;
  color: #1a1a1a !important;
}

html body.ap-vertical-shell .ap-cmd-trigger {
  margin-top: 8px !important;
}

html body.ap-vertical-shell .ap-settings-shortcut,
html body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .ap-settings-shortcut,
html body.ap-vertical-shell .tabs.ap-nav-peek .ap-settings-shortcut {
  background: rgba(255, 255, 255, .92) !important;
  border: 1px solid rgba(0, 0, 0, .10) !important;
  color: #1a1a1a !important;
  box-shadow: none !important;
}

html body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .ap-sidebar-toggle .ap-toggle-line,
html body.ap-vertical-shell .tabs.ap-nav-peek .ap-sidebar-toggle .ap-toggle-line {
  display: none !important;
}

html body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .ap-sidebar-toggle::before,
html body.ap-vertical-shell .tabs.ap-nav-peek .ap-sidebar-toggle::before {
  content: "" !important;
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  background: currentColor !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat !important;
}

html body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .ap-sidebar-toggle::after,
html body.ap-vertical-shell .tabs.ap-nav-peek .ap-sidebar-toggle::after {
  display: none !important;
}

html body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .ap-sidebar-toggle,
html body.ap-vertical-shell .tabs.ap-nav-peek .ap-sidebar-toggle {
  top: 30px !important;
}

html body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .ap-settings-shortcut,
html body.ap-vertical-shell .tabs.ap-nav-peek .ap-settings-shortcut,
html body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .ap-sidebar-toggle,
html body.ap-vertical-shell .tabs.ap-nav-peek .ap-sidebar-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html body.ap-vertical-shell .ap-settings-shortcut > svg {
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
}

html body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .ap-settings-shortcut:hover,
html body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .ap-settings-shortcut:focus-visible,
html body.ap-vertical-shell .tabs.ap-nav-peek .ap-settings-shortcut:hover,
html body.ap-vertical-shell .tabs.ap-nav-peek .ap-settings-shortcut:focus-visible,
html body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .ap-sidebar-toggle:hover,
html body.ap-vertical-shell .tabs.ap-nav-peek .ap-sidebar-toggle:hover,
html body.ap-vertical-shell .ap-settings-shortcut:hover,
html body.ap-vertical-shell .ap-settings-shortcut.active,
html body.ap-vertical-shell .ap-sidebar-toggle:hover {
  background: #6EDBA0 !important;
  border-color: #6EDBA0 !important;
  color: #1B1A17 !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.22), 0 0 0 3px rgba(110,219,160,.20) !important;
  transform: translateY(-1px) scale(1.04) !important;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease !important;
}
/* tabs/gantt/styles/164-gantt-column-manager.css */
/* ============================================================================
   164-gantt-column-manager.css
   Nexora-native column manager skin.
   Scope: only the Gantt column context menu, column picker, and dynamic cells.
   ============================================================================ */

:root {
  --gcm-navy: var(--nx-midnight, #0F1B2E);
  --gcm-navy-2: var(--nx-midnight-2, #0A1423);
  --gcm-blue: var(--nx-soft-blue, #4D6E91);
  --gcm-gold: var(--nx-gold, #C8A869);
  --gcm-gold-2: var(--nx-gold-2, #A8874A);
  --gcm-ivory: var(--nx-ivory, #FBF7F1);
  --gcm-panel: var(--nx-panel, #FFFDF8);
  --gcm-beige: var(--nx-beige, #F3E9DA);
  --gcm-ink: var(--nx-charcoal, #2A2F36);
  --gcm-line: rgba(15, 27, 46, .13);
  --gcm-line-strong: rgba(15, 27, 46, .24);
  --gcm-shadow: 0 24px 70px rgba(15, 27, 46, .24), 0 8px 22px rgba(15, 27, 46, .10);
  --gcm-font: var(--g-font, "DM Sans", "Segoe UI", Arial, sans-serif);
  --gcm-num: var(--g-num, "JetBrains Mono", Consolas, monospace);
}

#ganttOut .p6-hdr-left,
#ganttOut .p6-left {
  user-select: none;
}

/* Dynamic table cells ------------------------------------------------------- */
#ganttOut .p6-extra-col {
  justify-content: center;
  text-align: center;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--gcm-ink);
  font-family: var(--gcm-font) !important;
}

#ganttOut .p6-extra-col .gcm-chip {
  max-width: calc(100% - 6px);
  min-width: 0;
  min-height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  border-radius: 0;
  border: 0;
  background: transparent;
  color: #314156;
  font-size: 10.5px;
  font-weight: 760;
  line-height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: none;
}

#ganttOut .p6-extra-col.is-editable {
  cursor: pointer;
  position: relative;
}

#ganttOut .p6-extra-col.is-editable:hover {
  background: rgba(200, 168, 105, .10);
}

#ganttOut .p6-extra-col.is-editable .gcm-chip {
  position: relative;
  padding-right: 12px;
  transition: color .16s ease, text-shadow .16s ease;
}

#ganttOut .p6-extra-col.is-editable .gcm-chip::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 4px;
  height: 4px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  opacity: 0;
  transform: translateY(-60%) rotate(45deg);
  transition: opacity .16s ease;
}

#ganttOut .p6-extra-col.is-editable:hover .gcm-chip,
#ganttOut .p6-extra-col.is-editable:focus .gcm-chip {
  color: var(--gcm-navy);
  text-shadow: 0 0 0 var(--gcm-navy);
}

#ganttOut .p6-extra-col.is-editable:hover .gcm-chip::after,
#ganttOut .p6-extra-col.is-editable:focus .gcm-chip::after {
  opacity: .45;
}

#ganttOut .p6-extra-col.is-editing {
  padding: 1px 2px !important;
  overflow: hidden;
  z-index: 8;
}

#ganttOut .gcm-cell-editor {
  box-sizing: border-box;
  width: calc(100% - 4px);
  max-width: calc(100% - 4px);
  min-width: 0;
  height: 18px;
  display: block;
  margin: 0 auto;
  border: 1px solid rgba(200, 168, 105, .76);
  border-radius: 4px;
  outline: none;
  background: var(--gcm-panel);
  color: var(--gcm-navy);
  box-shadow: 0 0 0 1px rgba(200, 168, 105, .16);
  font-family: var(--gcm-font);
  font-size: 10px;
  font-weight: 760;
  line-height: 16px;
  padding: 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#ganttOut select.gcm-cell-editor {
  padding-right: 14px;
  appearance: auto;
}

#ganttOut input.gcm-cell-editor[type="number"] {
  font-family: var(--gcm-num);
  text-align: center;
}

#ganttOut .p6-extra-col.is-warn .gcm-chip {
  color: #6D4C12;
}

#ganttOut .p6-extra-col.is-bad .gcm-chip {
  color: #7A1E1E;
}

#ganttOut .p6-extra-col.is-good .gcm-chip {
  color: #1D5630;
}

#ganttOut .p6-extra-col.is-muted .gcm-chip {
  color: #5F7085;
}

#ganttOut .p6-left.p6-wbs-row .p6-extra-col .gcm-chip,
#ganttOut .p6-row[data-rowkind="wbs"] .p6-extra-col .gcm-chip {
  color: rgba(255, 255, 255, .92);
}

#ganttOut .gcm-col-activityType .gcm-chip,
#ganttOut .gcm-col-status .gcm-chip {
  font-size: 10px;
}

#ganttOut .gcm-col-totalFloat .gcm-chip,
#ganttOut .gcm-col-freeFloat .gcm-chip,
#ganttOut .gcm-col-startVariance .gcm-chip,
#ganttOut .gcm-col-finishVariance .gcm-chip,
#ganttOut .gcm-col-delayRiskScore .gcm-chip,
#ganttOut .gcm-col-priorityIndex .gcm-chip,
#ganttOut .gcm-col-slippageDays .gcm-chip,
#ganttOut .gcm-col-resourcePressure .gcm-chip,
#ganttOut .gcm-col-crewEfficiency .gcm-chip,
#ganttOut .gcm-col-manhoursPerUnit .gcm-chip,
#ganttOut .gcm-col-costOfDelay .gcm-chip {
  font-family: var(--gcm-num);
  font-weight: 800;
}

#ganttOut .gcm-col-actionRequired .gcm-chip,
#ganttOut .gcm-col-criticalityReason .gcm-chip,
#ganttOut .gcm-col-scheduleQualityFlag .gcm-chip,
#ganttOut .gcm-col-blockingReason .gcm-chip,
#ganttOut .gcm-col-areaZoneDependency .gcm-chip,
#ganttOut .gcm-col-handoverPackage .gcm-chip,
#ganttOut .gcm-col-accelerationOption .gcm-chip {
  justify-content: flex-start;
  text-align: left;
}

/* Context menu ------------------------------------------------------------- */
.gcm-menu {
  position: fixed;
  z-index: 99998;
  width: 224px;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid rgba(200, 168, 105, .28);
  background:
    linear-gradient(180deg, rgba(255, 253, 248, .98), rgba(251, 247, 241, .98));
  box-shadow: 0 20px 48px rgba(15, 27, 46, .20), 0 4px 12px rgba(15, 27, 46, .12);
  backdrop-filter: blur(18px);
  font-family: var(--gcm-font);
  overflow: hidden;
}

.gcm-menu::before {
  content: "Columns";
  display: block;
  padding: 5px 9px 8px;
  color: var(--gcm-blue);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.gcm-menu button {
  width: 100%;
  height: 36px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--gcm-navy);
  font: 820 12.5px var(--gcm-font);
  cursor: pointer;
}

.gcm-menu .gcm-ico {
  width: 22px;
  height: 22px;
  position: relative;
  display: inline-block;
  flex: 0 0 22px;
  border-radius: 7px;
  color: var(--gcm-navy);
  background: rgba(243, 233, 218, .82);
  border: 1px solid rgba(15, 27, 46, .08);
}

.gcm-menu .gcm-ico::before,
.gcm-menu .gcm-ico::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
}

.gcm-menu .gcm-ico-add::before {
  width: 10px;
  height: 2px;
  border-radius: 2px;
}

.gcm-menu .gcm-ico-add::after {
  width: 2px;
  height: 10px;
  border-radius: 2px;
}

.gcm-menu .gcm-ico-edit::before {
  width: 11px;
  height: 10px;
  background: transparent;
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translate(-50%, -50%);
}

.gcm-menu .gcm-ico-edit::after {
  width: 11px;
  height: 2px;
  border-radius: 2px;
}

.gcm-menu .gcm-ico-reset::before {
  width: 11px;
  height: 11px;
  background: transparent;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-24deg);
}

.gcm-menu .gcm-ico-reset::after {
  width: 5px;
  height: 5px;
  left: 14px;
  top: 7px;
  background: transparent;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(15deg);
}

.gcm-menu button:hover {
  background: linear-gradient(180deg, rgba(246, 231, 200, .78), rgba(243, 233, 218, .66));
  color: var(--gcm-navy);
}

.gcm-menu button:hover .gcm-ico {
  background: linear-gradient(180deg, #F6E7C8, var(--gcm-gold));
  border-color: rgba(168, 135, 74, .38);
}

.gcm-menu .gcm-sep {
  height: 1px;
  margin: 7px 6px;
  background: linear-gradient(90deg, transparent, rgba(15, 27, 46, .14), transparent);
}

/* Modal shell -------------------------------------------------------------- */
.gcm-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(ellipse 60% 50% at 50% 12%, rgba(200, 168, 105, .18), transparent 62%),
    rgba(7, 18, 34, .66);
  backdrop-filter: blur(12px) saturate(1.05);
}

.gcm-overlay.open {
  display: flex;
}

.gcm-modal {
  width: min(1060px, calc(100vw - 36px));
  max-height: min(760px, calc(100vh - 44px));
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid rgba(251, 247, 241, .44);
  background: var(--gcm-panel);
  color: var(--gcm-ink);
  box-shadow: var(--gcm-shadow), inset 0 1px 0 rgba(255, 255, 255, .80);
  font-family: var(--gcm-font);
}

.gcm-head {
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background:
    radial-gradient(ellipse 60% 90% at 88% 0%, rgba(200, 168, 105, .20), transparent 64%),
    linear-gradient(135deg, var(--gcm-navy-2), var(--gcm-navy));
  border-bottom: 1px solid rgba(200, 168, 105, .22);
  color: var(--gcm-ivory);
}

.gcm-title {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.gcm-title b {
  color: var(--gcm-ivory);
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0;
}

.gcm-title span {
  color: rgba(251, 247, 241, .66);
  font-size: 11.5px;
  font-weight: 760;
}

.gcm-close {
  margin-left: auto;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  border: 1px solid rgba(251, 247, 241, .18);
  background: rgba(251, 247, 241, .08);
  color: rgba(251, 247, 241, .86);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.gcm-close:hover {
  background: rgba(251, 247, 241, .15);
  color: #fff;
}

.gcm-tools {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(180deg, var(--gcm-ivory), #F7F0E6);
  border-bottom: 1px solid rgba(15, 27, 46, .10);
}

.gcm-search {
  width: 100%;
  height: 42px;
  border-radius: 10px;
  border: 1px solid rgba(15, 27, 46, .14);
  background: #FFFDF8;
  color: var(--gcm-navy);
  padding: 0 14px;
  font: 760 12.5px var(--gcm-font);
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .76), 0 1px 2px rgba(15, 27, 46, .04);
}

.gcm-search::placeholder {
  color: rgba(42, 47, 54, .48);
}

.gcm-search:focus {
  border-color: rgba(200, 168, 105, .78);
  box-shadow: 0 0 0 3px rgba(200, 168, 105, .18), inset 0 1px 0 rgba(255, 255, 255, .8);
}

.gcm-selected {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  flex-wrap: wrap;
  max-width: 470px;
}

.gcm-selected span {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(200, 168, 105, .30);
  background: rgba(255, 253, 248, .78);
  color: var(--gcm-blue);
  font-size: 10.5px;
  font-weight: 900;
}

.gcm-body {
  display: grid;
  grid-template-columns: 194px minmax(0, 1fr);
  min-height: 0;
  background: #F7F0E6;
}

.gcm-cats {
  padding: 13px;
  border-right: 1px solid rgba(15, 27, 46, .10);
  background:
    linear-gradient(180deg, rgba(15, 27, 46, .04), rgba(15, 27, 46, .02)),
    var(--gcm-beige);
  overflow: auto;
}

.gcm-cat {
  width: 100%;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: rgba(42, 47, 54, .70);
  font: 850 12px var(--gcm-font);
  cursor: pointer;
}

.gcm-cat small {
  min-width: 24px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 253, 248, .70);
  color: rgba(77, 110, 145, .78);
  font: 900 10px var(--gcm-num);
}

.gcm-cat:hover {
  background: rgba(255, 253, 248, .58);
  border-color: rgba(15, 27, 46, .08);
  color: var(--gcm-navy);
}

.gcm-cat.on {
  background: linear-gradient(180deg, var(--gcm-navy), var(--gcm-navy-2));
  border-color: rgba(200, 168, 105, .26);
  color: var(--gcm-ivory);
  box-shadow: 0 8px 18px rgba(15, 27, 46, .14);
}

.gcm-cat.on small {
  background: rgba(200, 168, 105, .22);
  color: #F6E7C8;
}

.gcm-list {
  min-height: 0;
  padding: 14px;
  overflow: auto;
  background: linear-gradient(180deg, #FBF7F1, #F6EFE4);
}

.gcm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
  gap: 10px;
}

.gcm-card {
  position: relative;
  min-height: 86px;
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 10px;
  align-items: start;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid rgba(15, 27, 46, .09);
  background: rgba(255, 253, 248, .88);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .80), 0 1px 2px rgba(15, 27, 46, .04);
  cursor: pointer;
}

.gcm-card:hover {
  border-color: rgba(200, 168, 105, .48);
  background: #FFFDF8;
  box-shadow: 0 10px 24px rgba(15, 27, 46, .08), inset 0 1px 0 rgba(255, 255, 255, .86);
}

.gcm-card input {
  appearance: none;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  border-radius: 6px;
  border: 1px solid rgba(15, 27, 46, .28);
  background: #FFFDF8;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .80);
}

.gcm-card input:checked {
  border-color: rgba(168, 135, 74, .72);
  background:
    linear-gradient(180deg, #F6E7C8, var(--gcm-gold));
}

.gcm-card input:checked::after {
  content: "";
  display: block;
  width: 9px;
  height: 5px;
  margin: 5px auto 0;
  border-left: 2px solid var(--gcm-navy);
  border-bottom: 2px solid var(--gcm-navy);
  transform: rotate(-45deg);
}

.gcm-card:has(input:checked) {
  border-color: rgba(200, 168, 105, .70);
  background: linear-gradient(180deg, #FFFDF8, #FBF3E7);
}

.gcm-card b {
  display: block;
  color: var(--gcm-navy);
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: 0;
}

.gcm-card p {
  margin: 4px 0 0;
  color: rgba(77, 110, 145, .82);
  font-size: 11px;
  line-height: 1.35;
  font-weight: 720;
}

.gcm-empty {
  min-height: 180px;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(77, 110, 145, .28);
  border-radius: 8px;
  background: rgba(251, 247, 241, .58);
  color: rgba(77, 110, 145, .78);
  font-size: 12px;
  font-weight: 850;
}

.gcm-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-top: 1px solid rgba(15, 27, 46, .10);
  background: linear-gradient(180deg, #FFFDF8, #F5EBDD);
}

.gcm-foot .spacer {
  flex: 1;
}

.gcm-btn {
  height: 36px;
  padding: 0 14px;
  border-radius: 9px;
  border: 1px solid rgba(15, 27, 46, .12);
  background: #FFFDF8;
  color: var(--gcm-navy);
  font: 900 12px var(--gcm-font);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 27, 46, .05), inset 0 1px 0 rgba(255, 255, 255, .78);
}

.gcm-btn.primary {
  border-color: rgba(168, 135, 74, .56);
  background: linear-gradient(180deg, #F6E7C8, var(--gcm-gold));
  color: var(--gcm-navy);
  box-shadow: 0 10px 20px rgba(200, 168, 105, .22), inset 0 1px 0 rgba(255, 255, 255, .48);
}

.gcm-btn:hover {
  filter: brightness(1.02);
  border-color: rgba(15, 27, 46, .22);
}

.gcm-list::-webkit-scrollbar,
.gcm-cats::-webkit-scrollbar {
  width: 10px;
}

.gcm-list::-webkit-scrollbar-thumb,
.gcm-cats::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: rgba(77, 110, 145, .38);
  background-clip: content-box;
}

body[data-gantt-theme="dark"] .gcm-menu {
  background: linear-gradient(180deg, rgba(15, 27, 46, .98), rgba(10, 20, 35, .98));
  border-color: rgba(200, 168, 105, .24);
}

body[data-gantt-theme="dark"] .gcm-menu button {
  color: var(--gcm-ivory);
}

body[data-gantt-theme="dark"] .gcm-menu::before {
  color: rgba(246, 231, 200, .72);
}

body[data-gantt-theme="dark"] .gcm-menu button .gcm-ico {
  color: #F6E7C8;
  background: rgba(251, 247, 241, .08);
  border-color: rgba(251, 247, 241, .12);
}

body[data-gantt-theme="dark"] .gcm-menu button:hover {
  background: rgba(251, 247, 241, .08);
}

@media (max-width: 760px) {
  .gcm-overlay {
    padding: 10px;
  }

  .gcm-modal {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
  }

  .gcm-tools {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .gcm-selected {
    justify-content: flex-start;
    max-width: 100%;
  }

  .gcm-body {
    grid-template-columns: 1fr;
  }

  .gcm-cats {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid rgba(15, 27, 46, .10);
  }

  .gcm-cat {
    width: auto;
    flex: 0 0 auto;
  }
}

/* tabs/gantt/styles/165-gantt-smart-context-menu.css */
#gantt-smart-context-menu,
.gsc-submenu {
  position: fixed;
  z-index: 2147483000;
  min-width: 238px;
  max-width: min(330px, calc(100vw - 18px));
  padding: 6px;
  border: 1px solid rgba(195, 168, 116, .34);
  border-radius: 8px;
  background: #fbf7ef;
  color: #10213a;
  box-shadow: 0 18px 46px rgba(16, 33, 58, .18), 0 2px 0 rgba(255, 255, 255, .75) inset;
  font-family: Inter, "DM Sans", system-ui, sans-serif;
  font-size: 12px;
  line-height: 1.25;
}

#gantt-smart-context-menu[hidden],
.gsc-submenu[hidden] {
  display: none !important;
}

.gsc-title {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin: 2px 2px 5px;
  padding: 8px 9px;
  border-radius: 7px;
  background: linear-gradient(90deg, #0b2a4a, #163b63);
  color: #d9c188;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.gsc-title b {
  color: #ffffff;
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gsc-group {
  padding: 3px 0;
}

.gsc-group + .gsc-group {
  border-top: 1px solid rgba(195, 168, 116, .22);
}

.gsc-item {
  width: 100%;
  min-height: 32px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #10213a;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  font: inherit;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
}

.gsc-item:hover,
.gsc-item.is-open {
  background: #edf3f8;
  color: #0b2a4a;
}

.gsc-item:focus-visible {
  outline: 2px solid rgba(71, 122, 163, .75);
  outline-offset: 1px;
}

.gsc-item[disabled] {
  color: rgba(71, 85, 105, .42);
  cursor: not-allowed;
}

.gsc-item[disabled]:hover {
  background: transparent;
}

.gsc-ico {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  background: #e8ddc8;
  color: #0b2a4a;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0;
}

.gsc-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gsc-meta {
  color: #5f89ae;
  font-size: 10px;
}

.gsc-panel {
  position: fixed;
  z-index: 2147482999;
  width: min(760px, calc(100vw - 24px));
  min-width: 520px;
  min-height: 280px;
  max-height: calc(100vh - 32px);
  overflow: auto;
  resize: both;
  border: 1px solid rgba(126, 151, 176, .36);
  border-radius: 8px;
  background: #f4efe6;
  color: #10213a;
  box-shadow: 0 18px 48px rgba(16, 33, 58, .22);
  font-family: Inter, "DM Sans", system-ui, sans-serif;
}

.gsc-panel-rel {
  width: min(700px, calc(100vw - 24px));
  min-width: 640px;
  min-height: 190px;
  max-height: min(380px, calc(100vh - 28px));
}

.gsc-assign-panel {
  width: min(760px, calc(100vw - 28px));
  min-height: 360px;
  max-height: min(640px, calc(100vh - 28px));
}

.gsc-panel-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 13px;
  border-bottom: 1px solid rgba(195, 168, 116, .24);
  background: linear-gradient(90deg, #0b2a4a, #12385e);
  cursor: move;
  user-select: none;
}

.gsc-panel-head h3 {
  margin: 0;
  color: #ffffff;
  font-size: 13px;
  letter-spacing: 0;
}

.gsc-panel-head span {
  display: block;
  margin-top: 3px;
  color: #d9c188;
  font-size: 10px;
}

.gsc-x,
.gsc-btn {
  border: 1px solid rgba(95, 137, 174, .28);
  border-radius: 6px;
  background: #ffffff;
  color: #10213a;
  min-height: 28px;
  padding: 5px 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.gsc-x {
  width: 30px;
  min-height: 30px;
  padding: 0;
  border-color: rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .1);
  color: #ffffff;
  font-size: 18px;
}

.gsc-btn:hover {
  background: #edf3f8;
}

.gsc-btn.primary {
  background: #477aa3;
  border-color: #477aa3;
  color: #ffffff;
}

.gsc-btn.primary:hover {
  background: #355f8c;
}

.gsc-btn.danger {
  background: #fff5f3;
  border-color: rgba(147, 51, 38, .28);
  color: #933326;
}

.gsc-body {
  padding: 9px 10px 10px;
}

.gsc-panel-rel .gsc-body {
  padding: 7px 8px 8px;
}

.gsc-panel.is-dragging {
  opacity: .96;
  box-shadow: 0 28px 78px rgba(16, 33, 58, .32);
}

.gsc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px 12px;
}

.gsc-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.gsc-field.wide {
  grid-column: 1 / -1;
}

.gsc-field span,
.gsc-section-title {
  color: #4f6884;
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.gsc-inp,
.gsc-sel,
.gsc-text {
  width: 100%;
  min-height: 34px;
  border: 1px solid rgba(95, 137, 174, .34);
  border-radius: 7px;
  background: #fffdf9;
  color: #10213a;
  padding: 8px 10px;
  font: inherit;
  box-sizing: border-box;
}

.gsc-inp:focus,
.gsc-sel:focus,
.gsc-text:focus {
  outline: 2px solid rgba(71, 122, 163, .28);
  border-color: #477aa3;
}

.gsc-text {
  min-height: 74px;
  resize: vertical;
}

.gsc-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}

.gsc-panel-rel .gsc-actions {
  margin-top: 8px;
}

.gsc-actions.compact {
  gap: 6px;
  margin-top: 0;
}

.gsc-actions.compact .gsc-btn {
  min-height: 28px;
  padding: 5px 10px;
  font-size: 12px;
}

.gsc-rel-workbench {
  display: grid;
  gap: 5px;
}

.gsc-rel-panes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 6px;
}

.gsc-rel-pane {
  border: 1px solid rgba(116, 139, 163, .24);
  border-radius: 5px;
  background: #ffffff;
  overflow: hidden;
}

.gsc-rel-pane.is-active {
  border-color: rgba(36, 76, 115, .36);
  box-shadow: inset 0 2px 0 rgba(36, 76, 115, .68);
}

.gsc-rel-pane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 20px;
  padding: 2px 6px;
  border-bottom: 1px solid rgba(126, 151, 176, .16);
  background: #f3f6fa;
}

.gsc-rel-pane-head > div {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.gsc-rel-pane-head span {
  color: #4f6884;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.gsc-rel-pane-head strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 15px;
  border-radius: 999px;
  background: #0b2a4a;
  color: #ffffff;
  font-size: 9px;
}

.gsc-rel-pane-head button {
  min-height: 18px;
  border: 1px solid rgba(71, 122, 163, .28);
  border-radius: 4px;
  background: #ffffff;
  color: #0b2a4a;
  font: inherit;
  font-size: 9px;
  font-weight: 900;
  cursor: pointer;
}

.gsc-rel-pane.is-active .gsc-rel-pane-head button {
  background: #244c73;
  border-color: #244c73;
  color: #ffffff;
}

.gsc-rel-cols {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) 52px 42px 52px;
  gap: 3px;
  align-items: center;
  min-height: 16px;
  padding: 0 6px;
  border-bottom: 1px solid rgba(95, 137, 174, .13);
  background: #f8fafc;
  color: #4f6884;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.gsc-rel-list {
  display: block;
  max-height: 84px;
  overflow: auto;
  padding: 3px;
}

.gsc-rel-row {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) 52px 42px 52px;
  gap: 3px;
  align-items: center;
  min-height: 21px;
  padding: 1px 2px;
  border: 0;
  border-bottom: 1px solid rgba(126, 151, 176, .16);
  border-radius: 0;
  background: transparent;
}

.gsc-rel-row:last-child {
  border-bottom: 0;
}

.gsc-rel-row.is-selected-rel {
  background: rgba(36, 76, 115, .07);
  box-shadow: inset 2px 0 0 #244c73;
}

.gsc-rel-link {
  min-width: 0;
}

.gsc-rel-link span,
.gsc-rel-mini span {
  display: none;
  color: #5f7288;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .06em;
  line-height: 1.1;
  text-transform: uppercase;
}

.gsc-rel-link strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: #10213a;
  font-size: 9.8px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gsc-rel-mini {
  display: block;
}

.gsc-rel-mini .gsc-sel,
.gsc-rel-mini .gsc-inp {
  height: 20px;
  min-height: 0;
  padding: 0 5px;
  border-radius: 4px;
  font-size: 10px;
  line-height: 18px;
}

.gsc-rel-mini input[type="number"]::-webkit-outer-spin-button,
.gsc-rel-mini input[type="number"]::-webkit-inner-spin-button {
  margin: 0;
}

.gsc-rel-delete {
  height: 20px;
  min-height: 0;
  border: 1px solid rgba(147, 51, 38, .18);
  border-radius: 4px;
  background: #fffdfc;
  color: #8f3a2f;
  font: inherit;
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
}

.gsc-rel-delete:hover {
  background: #fbe6e2;
}

.gsc-rel-empty {
  padding: 6px 7px;
  color: #5f7288;
  font-size: 10px;
  font-weight: 750;
}

.gsc-add-rel {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(195, 168, 116, .28);
  border-radius: 8px;
  background: #fbf7ef;
}

.gsc-assign-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.gsc-assign-hint {
  color: #6b7d91;
  font-size: 11px;
  font-weight: 750;
}

.gsc-rel-footer-note {
  padding: 4px 6px;
  border: 1px solid rgba(126, 151, 176, .16);
  border-radius: 5px;
  background: rgba(248, 250, 252, .74);
  color: #5f7288;
  font-size: 9.8px;
  font-weight: 700;
}

.gsc-floating-panel {
  z-index: 2147483100;
}

.gsc-assign-window {
  display: grid;
  gap: 8px;
}

.gsc-assign-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 84px 70px;
  gap: 7px;
  align-items: end;
  padding: 8px;
  border: 1px solid rgba(126, 151, 176, .22);
  border-radius: 7px;
  background: rgba(255, 253, 249, .82);
}

.gsc-field.tiny {
  min-width: 0;
}

.gsc-assign-window .gsc-field {
  gap: 3px;
}

.gsc-assign-window .gsc-field span {
  font-size: 8.5px;
}

.gsc-assign-window .gsc-inp,
.gsc-assign-window .gsc-sel {
  min-height: 28px;
  padding: 5px 8px;
  font-size: 12px;
}

.gsc-rel-pick {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.gsc-picker {
  overflow: hidden;
  border: 1px solid rgba(95, 137, 174, .34);
  border-radius: 8px;
  background: #fffdf9;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72), 0 8px 22px rgba(16, 33, 58, .07);
}

.gsc-picker-assign {
  border-color: rgba(126, 151, 176, .34);
  border-radius: 7px;
  box-shadow: none;
}

.gsc-picker-assign .gsc-picker-head {
  min-height: 24px;
  font-size: 8.5px;
}

.gsc-picker-assign .gsc-picker-head span,
.gsc-picker-assign .gsc-pick-row span {
  padding: 4px 7px;
}

.gsc-picker-assign .gsc-picker-body {
  max-height: 300px;
}

.gsc-picker-assign .gsc-pick-row {
  min-height: 23px;
  font-size: 11px;
}

.gsc-picker-assign .gsc-pick-toggle {
  width: 16px;
  height: 16px;
  font-size: 11px;
}

.gsc-picker-head,
.gsc-pick-row {
  display: grid;
  grid-template-columns: 132px minmax(260px, 1fr) 102px 102px;
  align-items: center;
}

.gsc-picker-head {
  position: sticky;
  top: 0;
  z-index: 1;
  min-height: 28px;
  border-bottom: 1px solid rgba(95, 137, 174, .26);
  background: linear-gradient(180deg, #f5f8fb, #e9f0f6);
  color: #405a78;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.gsc-picker-head span,
.gsc-pick-row span {
  min-width: 0;
  overflow: hidden;
  padding: 5px 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-right: 1px solid rgba(95, 137, 174, .16);
}

.gsc-picker-head span:last-child,
.gsc-pick-row span:last-child {
  border-right: 0;
}

.gsc-picker-body {
  max-height: 300px;
  overflow: auto;
  background: linear-gradient(180deg, #fffdf9, #fbf7ef);
}

.gsc-pick-row {
  width: 100%;
  min-height: 26px;
  border: 0;
  border-bottom: 1px solid rgba(95, 137, 174, .12);
  background: transparent;
  color: #10213a;
  font: inherit;
  font-size: 12px;
  text-align: left;
}

.gsc-pick-row.is-act {
  background: rgba(255, 253, 249, .88);
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease, box-shadow .16s ease;
}

.gsc-pick-row.is-act span:first-child,
.gsc-pick-row.is-act span:nth-child(2) {
  padding-left: calc(8px + (var(--lvl, 0) * 12px));
}

.gsc-pick-row.is-act:hover {
  background: #edf3f8;
  box-shadow: inset 3px 0 0 #477aa3;
}

.gsc-pick-row.is-selected {
  background: #477aa3;
  color: #ffffff;
  box-shadow: inset 3px 0 0 #d9c188;
}

.gsc-pick-row.is-current {
  background: linear-gradient(90deg, rgba(217, 193, 136, .32), rgba(255, 253, 249, .92));
  color: #10213a;
  box-shadow: inset 4px 0 0 #d9c188;
  cursor: default;
}

.gsc-pick-row.is-current em {
  margin-left: 8px;
  color: #6a5a32;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.gsc-pick-row.is-wbs {
  min-height: 27px;
  border-bottom: 1px solid var(--pick-wbs-border, rgba(95, 137, 174, .32));
  background:
    linear-gradient(90deg, var(--pick-wbs-a, #071A33), var(--pick-wbs-b, #071A33));
  color: var(--pick-wbs-fg, #ffffff);
  font-size: 12px;
  font-weight: 900;
  box-shadow: inset 4px 0 0 var(--pick-wbs-subtle, #e7eef6);
}

.gsc-pick-row.is-wbs span:first-child,
.gsc-pick-row.is-wbs span:nth-child(2) {
  padding-left: calc(8px + (var(--lvl, 0) * 14px));
}

.gsc-pick-row.is-wbs span {
  border-right-color: rgba(255, 255, 255, .18);
}

.gsc-pick-row.is-wbs span:first-child {
  display: flex;
  align-items: center;
  gap: 7px;
}

.gsc-pick-row.is-wbs strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gsc-pick-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  color: currentColor;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.gsc-pick-toggle:hover {
  background: rgba(255, 255, 255, .26);
}

.gsc-pick-toggle.is-empty {
  border-color: transparent;
  background: transparent;
}

.gsc-picker-empty {
  padding: 18px;
  color: #5f7288;
  font-weight: 750;
  text-align: center;
}

.gsc-rel-controls {
  display: grid;
  grid-template-columns: 1fr 92px 78px;
  gap: 8px;
}

.gsc-report {
  display: grid;
  gap: 8px;
}

.gsc-report-row {
  padding: 9px 10px;
  border-radius: 7px;
  border: 1px solid rgba(195, 168, 116, .24);
  background: #fffaf2;
  color: #10213a;
}

#ganttOut .gsc-highlight-selected > .p6-left,
#ganttOut .gsc-highlight-selected > .p6-right {
  box-shadow: inset 0 0 0 2px rgba(71, 122, 163, .9);
}

#ganttOut .gsc-action-anchor > .p6-left,
#ganttOut .gsc-action-anchor > .p6-right {
  background-image: linear-gradient(90deg, rgba(37, 99, 235, .12), rgba(212, 154, 34, .08), transparent) !important;
  box-shadow: inset 0 0 0 2px rgba(15, 42, 76, .78), inset 4px 0 0 rgba(212, 154, 34, .95);
}

#ganttOut .gsc-action-anchor .p6-act-bar,
#ganttOut .gsc-action-anchor .p6-ms {
  filter: drop-shadow(0 0 8px rgba(37, 99, 235, .25));
}

#ganttOut .gsc-highlight-related > .p6-left,
#ganttOut .gsc-highlight-related > .p6-right {
  background-image: linear-gradient(90deg, rgba(71, 122, 163, .16), transparent) !important;
}

#ganttOut .gsc-path-upstream > .p6-left,
#ganttOut .gsc-path-upstream > .p6-right {
  background-image: linear-gradient(90deg, rgba(217, 193, 136, .28), transparent) !important;
  box-shadow: inset 3px 0 0 rgba(217, 193, 136, .95);
}

#ganttOut .gsc-path-downstream > .p6-left,
#ganttOut .gsc-path-downstream > .p6-right {
  background-image: linear-gradient(90deg, rgba(71, 122, 163, .22), transparent) !important;
  box-shadow: inset 3px 0 0 rgba(71, 122, 163, .95);
}

#ganttOut .gsc-highlight-critical > .p6-left,
#ganttOut .gsc-highlight-critical > .p6-right {
  box-shadow: inset 0 0 0 1px rgba(147, 51, 38, .9);
}

#ganttOut .ga-link-path.gsc-link-highlight {
  stroke-width: 2.4 !important;
  stroke-opacity: 1 !important;
}

#ganttOut .ga-link-path.gsc-link-execution {
  stroke: #2563eb !important;
  filter: drop-shadow(0 0 5px rgba(37, 99, 235, .22));
}

#ganttOut .ga-link-path.gsc-link-material-feed {
  stroke: #d49a22 !important;
  stroke-dasharray: 7, 4 !important;
  filter: drop-shadow(0 0 5px rgba(212, 154, 34, .28));
}

#ganttOut .p6-row.gsc-wbs-hidden {
  display: none !important;
}

#ganttOut .p6-row.gsc-path-filter-hidden {
  display: none !important;
}

#ganttOut.gsc-path-filter-active #ga-svg .ga-link-path:not(.gsc-link-in-path),
#ganttOut.gsc-path-filter-active #ga-svg .ga-link-hit:not(.gsc-link-in-path) {
  display: none !important;
}

.gsc-focus-chip {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 2147482000;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid rgba(195, 168, 116, .34);
  border-radius: 8px;
  background: #fbf7ef;
  color: #10213a;
  box-shadow: 0 12px 36px rgba(16, 33, 58, .2);
  font-size: 12px;
}

.gsc-path-chip {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 2147482000;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: min(680px, calc(100vw - 36px));
  padding: 9px 10px;
  border: 1px solid rgba(195, 168, 116, .34);
  border-radius: 8px;
  background: #fbf7ef;
  color: #10213a;
  box-shadow: 0 12px 36px rgba(16, 33, 58, .2);
  font-size: 12px;
  font-weight: 750;
}

.gsc-path-chip .gsc-path-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  flex: 0 0 auto;
}

.gsc-path-chip .gsc-path-dot.exec {
  background: #2563eb;
}

.gsc-path-chip .gsc-path-dot.feed {
  background: #d49a22;
}

.gsc-focus-chip .gsc-btn,
.gsc-path-chip .gsc-btn {
  border: 1px solid rgba(16, 33, 58, .14);
  border-radius: 7px;
  background: #fff;
  color: #10213a;
  cursor: pointer;
  font: inherit;
  font-weight: 850;
  padding: 5px 9px;
}

#tp-labour .gsc-mapping-activity-focus,
#mapping-v2-view .gsc-mapping-activity-focus {
  outline: 2px solid rgba(205, 171, 93, .85) !important;
  outline-offset: -2px;
  background: linear-gradient(90deg, rgba(205, 171, 93, .2), rgba(231, 238, 246, .28)) !important;
  box-shadow: inset 4px 0 0 #12385f, 0 0 0 1px rgba(18, 56, 95, .18) !important;
}

#tp-labour tr.gsc-mapping-activity-focus > td,
#mapping-v2-view tr.gsc-mapping-activity-focus > td {
  background: transparent !important;
}

@media (max-width: 760px) {
  .gsc-panel {
    left: 12px !important;
    right: 12px !important;
    width: auto;
  }

  .gsc-picker-head,
  .gsc-pick-row {
    grid-template-columns: 112px minmax(180px, 1fr) 88px 88px;
  }

  .gsc-grid,
  .gsc-rel-controls {
    grid-template-columns: 1fr;
  }

  .gsc-rel-panes {
    grid-template-columns: 1fr;
  }

  .gsc-rel-row,
  .gsc-rel-cols {
    grid-template-columns: minmax(150px, 1fr) 68px 58px 58px;
  }

  .gsc-path-chip {
    left: 12px;
    right: 12px;
    flex-wrap: wrap;
  }
}

/* styles/tabs/zones-layer.css */
/* ════════════════════════════════════════════════════════════════════════
   ZONES / LEVELS PLANNING LAYER — STYLES
   Card 5 matches the Data Input cards (light). Drawer is a polished light
   workspace. The Mapping-tab zone bar matches the dark mapping theme.
   Scoped to .zone-* so nothing else is affected.
   ════════════════════════════════════════════════════════════════════════ */
:root {
  --zone-gold: var(--nx-gold, #c9a25a);
  --zone-line: var(--nx-line, rgba(20,30,50,.12));
  --zone-line-2: var(--nx-soft-line, rgba(20,30,50,.07));
  --zone-panel: var(--nx-panel, #fff);
  --zone-wash: var(--nx-page-wash, #faf8f3);
  --zone-ink: var(--nx-charcoal, #1d2330);
  --zone-muted: var(--nx-muted-text, #6b7280);
  --zone-on: #2563eb;
  --zone-bad: #dc2626;
  --zone-ok: #16a34a;
}

/* ── Card 5 (inside the dinput grid) ── */
.zone-card .zone-switch { margin-inline-start: auto; display: inline-flex; align-items: center; cursor: pointer; }
.zone-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.zone-switch-track { width: 44px; height: 25px; border-radius: 999px; background: var(--zone-line); display: inline-block; position: relative; transition: background .2s; }
.zone-switch-thumb { position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.3); transition: transform .2s; }
.zone-switch input:checked + .zone-switch-track { background: var(--zone-gold); }
.zone-switch input:checked + .zone-switch-track .zone-switch-thumb { transform: translateX(19px); }
.zone-switch input:focus-visible + .zone-switch-track { outline: 2px solid var(--zone-on); outline-offset: 2px; }

.zone-card-summary { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; }
.zone-chip { font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: rgba(20,30,50,.05); color: var(--zone-ink); border: 1px solid var(--zone-line); }
.zone-chip--on { background: var(--zone-gold); color: #1a1206; border-color: transparent; }
.zone-chip--off { background: transparent; color: var(--zone-muted); }
.zone-chip--warn { background: #fef3c7; color: #92400e; border-color: #fcd34d; }

.zone-open-btn { display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px; border-radius: 11px; border: 1px solid var(--zone-line); background: var(--zone-wash); color: var(--zone-ink); font-weight: 600; font-size: 14px; cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s; }
.zone-open-btn:hover { border-color: var(--zone-gold); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(201,162,90,.18); }
.zone-open-btn svg { width: 19px; height: 19px; color: var(--zone-gold); }
.zone-open-btn:focus-visible { outline: 2px solid var(--zone-on); outline-offset: 2px; }

/* ── Drawer ── */
.zone-drawer-ov { position: fixed; inset: 0; z-index: 9000; background: rgba(12,16,26,.5); backdrop-filter: blur(4px); display: flex; justify-content: flex-end; opacity: 0; transition: opacity .2s; }
.zone-drawer-ov.open { opacity: 1; }
.zone-drawer { width: min(1240px, 97vw); height: 100%; background: var(--zone-wash); color: var(--zone-ink); display: flex; flex-direction: column; box-shadow: -24px 0 70px rgba(0,0,0,.32); transform: translateX(48px); transition: transform .26s cubic-bezier(.22,.61,.36,1); }
.zone-drawer-ov.open .zone-drawer { transform: translateX(0); }
.zone-drawer-hdr { display: flex; align-items: flex-start; gap: 12px; padding: 20px 26px; border-bottom: 1px solid var(--zone-line); background: var(--zone-panel); }
.zone-drawer-titles h3 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.zone-drawer-titles p { margin: 5px 0 0; font-size: 13px; color: var(--zone-muted); }
.zone-x { margin-inline-start: auto; width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--zone-line); background: transparent; cursor: pointer; font-size: 16px; color: var(--zone-muted); transition: background .15s; }
.zone-x:hover { background: rgba(20,30,50,.06); }

.zone-drawer-body { flex: 1; overflow: hidden; display: grid; grid-template-columns: 372px 1fr; }
@media (max-width: 920px) { .zone-drawer-body { grid-template-columns: 1fr; overflow: auto; } }

.zone-cfg { padding: 20px 22px; border-inline-end: 1px solid var(--zone-line); background: var(--zone-panel); display: flex; flex-direction: column; gap: 18px; overflow: auto; }
.zone-field { display: flex; flex-direction: column; gap: 7px; }
.zone-lbl { font-size: 11px; font-weight: 800; color: var(--zone-muted); text-transform: uppercase; letter-spacing: .06em; }
.zone-inp { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--zone-line); background: var(--zone-wash); color: var(--zone-ink); font: inherit; font-size: 13.5px; transition: border-color .15s, box-shadow .15s; }
.zone-inp:hover { border-color: var(--zone-muted); }
.zone-inp:focus-visible { outline: none; border-color: var(--zone-on); box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
.zone-ta { resize: vertical; line-height: 1.5; }
.zone-mini { width: 100px; padding: 8px 10px; }

/* ── Quick builder ── */
.zone-builder { gap: 10px; }
.zone-build-levels, .zone-build-zones { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; }
.zone-step { display: flex; flex-direction: column; gap: 4px; padding: 7px 9px; border: 1px solid var(--zone-line); border-radius: 9px; background: var(--zone-wash); min-width: 78px; }
.zone-step-lbl { font-size: 9.5px; font-weight: 700; color: var(--zone-muted); text-transform: uppercase; letter-spacing: .04em; }
.zone-step-inp { width: 100%; padding: 5px 6px; border: 1px solid var(--zone-line); border-radius: 7px; background: var(--zone-panel); font: inherit; font-size: 14px; font-weight: 700; text-align: center; }
.zone-toggle-pill { display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; border: 1px solid var(--zone-line); border-radius: 9px; background: var(--zone-wash); font-size: 12.5px; font-weight: 600; color: var(--zone-ink); cursor: pointer; transition: border-color .15s, background .15s; }
.zone-toggle-pill:has(input:checked) { border-color: var(--zone-gold); background: rgba(201,162,90,.1); }
.zone-toggle-pill input { width: 15px; height: 15px; accent-color: var(--zone-gold); }
.zone-build-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; }
.zone-build-preview { font-size: 12.5px; font-weight: 800; color: var(--zone-gold); }
.zone-build-btn { padding: 8px 16px; }
.zone-pattern { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.zone-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--zone-ink); cursor: pointer; }
.zone-check input { width: 16px; height: 16px; accent-color: var(--zone-gold); }
.zone-groups { display: flex; flex-direction: column; gap: 8px; }
.zone-grp { display: flex; gap: 8px; align-items: center; }
.zone-grp-idx { width: 24px; height: 32px; flex: 0 0 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; background: rgba(201,162,90,.14); color: #8a6d2f; font-size: 12px; font-weight: 800; }
.zone-grp-name { flex: 1; }
.zone-grp-del { width: 32px; height: 34px; border-radius: 8px; border: 1px solid var(--zone-line); background: transparent; color: var(--zone-bad); cursor: pointer; transition: background .15s; }
.zone-grp-del:hover { background: rgba(220,38,38,.08); }
.zone-add { align-self: flex-start; }
.zone-hint { font-size: 11.5px; color: var(--zone-muted); line-height: 1.5; }

.zone-btn { padding: 10px 15px; border-radius: 10px; border: 1px solid var(--zone-line); background: var(--zone-panel); color: var(--zone-ink); font-weight: 600; font-size: 13px; cursor: pointer; transition: transform .12s, border-color .12s, box-shadow .12s; }
.zone-btn:hover { transform: translateY(-1px); }
.zone-btn:focus-visible { outline: 2px solid var(--zone-on); outline-offset: 2px; }
.zone-btn--ghost { background: transparent; }
.zone-btn--ghost:hover { border-color: var(--zone-muted); }
.zone-btn--primary { background: var(--zone-gold); border-color: transparent; color: #1a1206; }
.zone-btn--primary:hover { box-shadow: 0 6px 18px rgba(201,162,90,.3); }
.zone-btn--ai { background: linear-gradient(120deg, #6d28d9, #2563eb); color: #fff; border-color: transparent; }
.zone-btn--ai:hover { box-shadow: 0 6px 18px rgba(99,57,217,.35); }

/* ── Preview ── */
.zone-preview { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; min-width: 0; overflow: hidden; }
.zone-preview-bar { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.zone-preview-bar h4 { margin: 0; font-size: 17px; font-weight: 800; }
.zone-preview-tools { margin-inline-start: auto; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.zone-table-wrap { flex: 1; overflow: auto; border: 1px solid var(--zone-line); border-radius: 13px; background: var(--zone-panel); box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.zone-empty { padding: 56px 24px; text-align: center; color: var(--zone-muted); display: flex; flex-direction: column; gap: 6px; }
.zone-empty b { font-size: 15px; color: var(--zone-ink); }

.zone-table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 12.5px; }
.zone-table th { position: sticky; top: 0; z-index: 3; background: var(--nx-midnight, #20283a); color: #eef1f6; font-weight: 700; padding: 11px 12px; text-align: center; white-space: nowrap; font-size: 11px; letter-spacing: .03em; }
.zone-table th.zone-th-desc { text-align: start; min-width: 260px; position: sticky; left: 0; z-index: 4; }
.zone-table th.zone-th-qty { text-align: end; }
.zone-table th.zone-th-grp { background: #2a3346; }
.zone-table td { padding: 8px 12px; border-bottom: 1px solid var(--zone-line-2); text-align: center; vertical-align: middle; }
.zone-td-desc { text-align: start; max-width: 340px; position: sticky; left: 0; background: var(--zone-panel); z-index: 1; font-weight: 600; }
.zone-td-desc { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.35; }
.zone-td-unit { color: var(--zone-muted); }
.zone-td-qty, .zone-th-qty { text-align: end; font-variant-numeric: tabular-nums; font-weight: 600; }
.zone-table tbody tr:nth-child(even) td { background: rgba(20,30,50,.018); }
.zone-table tbody tr:nth-child(even) .zone-td-desc { background: #faf9f6; }
.zone-table tbody tr:hover td { background: rgba(201,162,90,.08); }
.zone-table tbody tr:hover .zone-td-desc { background: rgba(201,162,90,.12); }
.zone-row-bad td { background: rgba(220,38,38,.05) !important; }

.zone-cell { padding: 5px 7px; }
.zone-cell--on { background: rgba(37,99,235,.045); }
.zone-cell--off .zone-cell-qty { opacity: .4; }
.zone-share { width: 60px; padding: 6px 4px; text-align: center; border: 1px solid var(--zone-line); border-radius: 8px; background: var(--zone-wash); font: inherit; font-size: 12px; font-variant-numeric: tabular-nums; }
.zone-share:focus-visible { outline: none; border-color: var(--zone-on); box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
.zone-share:disabled { opacity: .4; }
.zone-cell-qty { display: block; font-size: 10.5px; color: var(--zone-muted); margin-top: 3px; font-variant-numeric: tabular-nums; }
.zone-td-mode { white-space: nowrap; }
.zone-mode-sel { padding: 6px 8px; border-radius: 8px; border: 1px solid var(--zone-line); background: var(--zone-wash); font: inherit; font-size: 11.5px; max-width: 140px; }
.zone-sum { display: inline-block; margin-inline-start: 8px; font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; }
.zone-sum.ok { color: var(--zone-ok); } .zone-sum.bad { color: var(--zone-bad); }
.zone-tag { font-size: 9px; font-weight: 800; padding: 1px 6px; border-radius: 5px; background: rgba(20,30,50,.08); color: var(--zone-muted); text-transform: uppercase; letter-spacing: .04em; vertical-align: middle; }
.zone-tag--ai { background: linear-gradient(120deg,#6d28d9,#2563eb); color: #fff; }

.zone-drawer-ft { display: flex; align-items: center; gap: 12px; padding: 15px 26px; border-top: 1px solid var(--zone-line); background: var(--zone-panel); }
.zone-ft-actions { margin-inline-start: auto; display: flex; gap: 9px; }
.zone-status { font-size: 12.5px; color: var(--zone-muted); }
.zone-status--ok { color: var(--zone-ok); } .zone-status--bad { color: var(--zone-bad); } .zone-status--busy { color: var(--zone-on); }

/* ── Mapping-tab zone selector (DARK, matches mapping workspace) ── */
.zone-map-bar { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin: 0 0 14px; padding: 10px 12px; border: 1px solid rgba(59,130,246,.18); border-radius: 10px; background: rgba(8,18,42,.55); }
.zone-map-bar-lbl { font-size: 9.5px; font-weight: 800; letter-spacing: .08em; color: #5b7595; margin-inline-end: 4px; }
.zone-map-tab { padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(148,163,184,.2); background: rgba(15,30,60,.7); color: #9bb6d4; font-size: 11.5px; font-weight: 700; cursor: pointer; transition: all .15s; }
.zone-map-tab:hover { background: rgba(59,130,246,.18); border-color: rgba(96,165,250,.45); color: #dbeafe; }
.zone-map-tab.on { background: var(--zone-gold); border-color: transparent; color: #1a1206; }
.zone-map-bar-note { margin-inline-start: auto; font-size: 10.5px; color: #5b7595; }

/* ── HTML Deep WBS per-zone blocks (dark) ── */
.zone-deep-wrap { display: grid; gap: 16px; }
.zone-deep-block { border: 1px solid rgba(201,162,90,.35); border-radius: 12px; background: rgba(8,18,42,.4); overflow: hidden; }
.zone-deep-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; background: linear-gradient(90deg, rgba(201,162,90,.22), rgba(201,162,90,.05)); border-bottom: 1px solid rgba(201,162,90,.25); list-style: none; }
.zone-deep-block > .zone-deep-head { user-select: none; }
.zone-deep-badge { font-size: 9.5px; font-weight: 800; letter-spacing: .08em; color: #1a1206; background: var(--zone-gold); padding: 3px 9px; border-radius: 5px; }
.zone-deep-name { font-size: 15px; font-weight: 800; color: #f0e6d2; }
.zone-deep-meta { margin-inline-start: auto; font-size: 11px; color: #9bb6d4; }
.zone-deep-body { padding: 12px 14px; }
.zone-map-tab:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) { .zone-drawer, .zone-drawer-ov, .zone-open-btn, .zone-btn { transition: none; } }

/* styles/tabs/zonesense.css */
/* ZONESENSE — Detected Zones / Levels / Phases card (Data Input) */
.zs-card .dinput-card-num{display:inline-flex;align-items:center;justify-content:center}
.zs-card .dinput-card-num svg{width:18px;height:18px}

.zs-switch{margin-left:auto;cursor:pointer;display:inline-flex;align-items:center}
.zs-switch input{display:none}
.zs-switch-track{width:38px;height:22px;border-radius:999px;background:var(--st,#c9c4b4);position:relative;transition:.2s;display:inline-block}
.zs-switch-thumb{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.zs-switch input:checked + .zs-switch-track{background:var(--bl,#5C6B3F)}
.zs-switch input:checked + .zs-switch-track .zs-switch-thumb{left:18px}

.zs-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.zs-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:var(--r3,10px);border:1px solid var(--st,#d8d3c4);background:var(--p,#fff);color:var(--tx,#33301f);font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:.15s}
.zs-btn svg{width:15px;height:15px}
.zs-btn:hover{border-color:var(--bl,#5C6B3F)}
.zs-btn--primary{background:var(--bl,#5C6B3F);color:#fff;border-color:var(--bl,#5C6B3F)}
.zs-btn--primary:hover{filter:brightness(1.06)}
.zs-btn:disabled{opacity:.6;cursor:default}

.zs-body{margin-top:12px}
.zs-note{padding:12px;border-radius:var(--r3,10px);background:var(--p2,#f5f2e9);color:var(--tx,#4a4632);font-size:13px;line-height:1.5}
.zs-note--off{opacity:.8}
.zs-reasons{font-size:11px;color:var(--st-tx,#8a866f);opacity:.85;margin-top:6px}

.zs-summary{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.zs-chip{font-size:11px;font-weight:600;padding:4px 9px;border-radius:999px;background:var(--p2,#efeada);color:var(--tx,#4a4632);border:1px solid var(--st,#e2dccb)}
.zs-chip--on{background:var(--bl,#5C6B3F);color:#fff;border-color:var(--bl,#5C6B3F)}
.zs-chip--ai{background:var(--am,#24B47E);color:#3a2f10;border-color:var(--am,#24B47E)}

.zs-seq{display:flex;align-items:center;gap:8px;margin:10px 0}
.zs-seq label{font-size:12px;font-weight:600;color:var(--tx,#4a4632)}
.zs-seq select{flex:1;padding:7px 10px;border-radius:var(--r3,10px);border:1px solid var(--st,#d8d3c4);background:var(--p,#fff);font:inherit;font-size:13px}
.zs-auto{font-size:10px;color:var(--st-tx,#8a866f);text-transform:uppercase;letter-spacing:.5px}

.zs-hint{font-size:11px;color:var(--st-tx,#8a866f);margin:8px 0 4px;line-height:1.4}
.zs-list{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.zs-row{display:grid;grid-template-columns:auto 22px 1fr auto auto auto;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--r3,10px);background:var(--p2,#f7f4ec);border:1px solid var(--st,#e7e1d0)}
.zs-row-move{display:inline-flex;gap:2px}
.zs-mv{width:22px;height:22px;border-radius:6px;border:1px solid var(--st,#d8d3c4);background:var(--p,#fff);cursor:pointer;font-size:12px;line-height:1;color:var(--tx,#4a4632);padding:0}
.zs-mv:hover:not(:disabled){border-color:var(--bl,#5C6B3F);background:var(--p2,#f1eee3)}
.zs-mv:disabled{opacity:.3;cursor:default}
.zs-row--off{opacity:.45}
.zs-row-ord{font-size:11px;font-weight:700;color:#fff;background:var(--bl,#5C6B3F);width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center}
.zs-row-label{border:1px solid transparent;background:transparent;font:inherit;font-size:13px;font-weight:600;color:var(--tx,#33301f);padding:4px 6px;border-radius:6px}
.zs-row-label:focus{outline:none;border-color:var(--bl,#5C6B3F);background:#fff}
.zs-row-kind{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--st-tx,#8a866f)}
.zs-row-count{font-size:11px;color:var(--st-tx,#8a866f);white-space:nowrap}

/* cross-zone (ZoneSense) link arrows in the Gantt — distinct blue + animated flow.
   !important needed: a .ga-link-path CSS rule overrides the SVG stroke attribute,
   which left only the arrowhead (marker fill) coloured. */
.ga-link-zone{stroke:#2563EB !important;stroke-width:2.2 !important;stroke-opacity:1 !important;animation:zsLinkFlow 1.1s linear infinite}
@keyframes zsLinkFlow{to{stroke-dashoffset:-26}}
@media (prefers-reduced-motion: reduce){ .ga-link-zone{animation:none} }

/* Line-of-Balance sketch (mini visual editor) */
.zs-sketch-wrap{margin:6px 0 10px;padding:8px 6px;border-radius:var(--r3,10px);background:var(--p2,#f7f4ec);border:1px solid var(--st,#e7e1d0)}
.zs-sketch{width:100%;height:auto;display:block;overflow:visible}
.zs-sketch rect{filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.18))}
.zs-zbar{animation:zsBarIn .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d,0ms)}
.zs-zbar:hover rect{filter:drop-shadow(0 2px 4px rgba(0,0,0,.28));opacity:.92}
@keyframes zsBarIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
.zs-conn{fill:none;stroke:var(--am,#24B47E);stroke-width:2;stroke-dasharray:7,5;animation:zsLinkFlow 1.1s linear infinite}
.zs-conn-hit{fill:none;stroke:transparent;stroke-width:14;cursor:pointer}
.zs-conn-hit:hover + .zs-conn,.zs-conn-hit:hover{}
.zs-conn-lbl{fill:#188D68;font-size:9px;font-weight:700;text-anchor:middle;pointer-events:none}
.zs-sketch-hint{font-size:10px;color:var(--st-tx,#8a866f);margin-top:4px;text-align:center}
@media (prefers-reduced-motion: reduce){ .zs-zbar{animation:none} .zs-conn{animation:none} }

/* cross-zone relations */
.zs-rel{margin-top:14px;padding-top:12px;border-top:1px dashed var(--st,#e2dccb)}
.zs-rel-hdr{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--bl,#5C6B3F);margin-bottom:8px}
.zs-step{font-size:12px;font-weight:800;color:var(--bl,#5C6B3F);margin:14px 0 8px;display:flex;align-items:center;gap:6px}
.zs-rel-note{font-size:11px;color:var(--st-tx,#8a866f);line-height:1.45;margin:2px 0 6px}
.zs-rel-note--dim{opacity:.75;font-style:italic}
.zs-rel-note b{color:var(--tx,#4a4632)}
.zs-legend{display:inline-flex;align-items:center;gap:5px;margin-top:3px;color:#188D68}
.zs-leg-dot{width:14px;height:0;border-top:2px dashed var(--am,#24B47E);display:inline-block}
.zs-rel-tbl{display:flex;flex-direction:column;gap:4px;margin:8px 0}
.zs-rel-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:5px 10px;border-radius:8px;background:var(--p2,#f7f4ec);font-size:12px}
.zs-rel-row small{color:var(--st-tx,#8a866f);font-size:10px;margin-left:4px}
.zs-rel-row--head{background:transparent;font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--st-tx,#8a866f);font-weight:700;padding-bottom:0}
.zs-pair-sel{font:inherit;font-size:11px;padding:3px 6px;border-radius:7px;border:1px solid var(--st,#d8d3c4);background:var(--p,#fff);color:var(--tx,#33301f)}
.zs-rel-row--pair{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.zs-rel-row--pair>span:first-child{flex:1 1 130px;min-width:120px}
.zs-lag{flex:1 1 100%;font-size:11px;color:var(--st-tx,#8a866f);display:flex;align-items:center;gap:6px;padding-left:2px}
.zs-lag-in{width:54px;font:inherit;font-size:11px;padding:2px 5px;border-radius:6px;border:1px solid var(--st,#d8d3c4);background:var(--p,#fff)}
.zs-def{display:inline-block;margin-top:3px;font-size:11px;color:#188D68}
.zs-def b{color:#188D68}
.zs-tag{font-size:10px;font-weight:700;padding:2px 8px;border-radius:999px;text-align:center}
.zs-tag--fs{background:#e7e1d0;color:#5b5640}
.zs-tag--ss{background:var(--am,#24B47E);color:#0d5c3f}
.zs-smart{margin-top:10px;padding:8px 10px;border-radius:var(--r3,10px);background:rgba(36,180,126,.10);border:1px solid rgba(36,180,126,.35)}
.zs-smart-hdr{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#188D68;margin-bottom:5px}
.zs-smart-row{font-size:12px;color:var(--tx,#4a4632);padding:2px 0;display:flex;align-items:center;gap:6px}
.zs-smart-row em{color:var(--st-tx,#8a866f);font-style:normal;font-size:11px}
.zs-dot{width:7px;height:7px;border-radius:50%;background:var(--am,#24B47E);flex:0 0 auto}
.zs-exec{margin-top:10px;padding:8px 10px;border-radius:var(--r3,10px);background:rgba(110,130,90,.10);border:1px solid rgba(110,130,90,.30)}
.zs-smart-hdr-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:5px}
.zs-smart-hdr-row .zs-smart-hdr{margin-bottom:0}
.zs-open-review{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:999px;border:1px solid rgba(110,130,90,.4);background:#fff;color:#4a5b35;cursor:pointer}
.zs-open-review:hover{background:#eef2e8}
.zs-exec-row{padding:6px 0;border-bottom:1px dashed rgba(110,130,90,.25)}
.zs-exec-row:last-child{border-bottom:0}
.zs-exec-row--mand{background:rgba(180,90,60,.06);border-radius:6px;padding-left:6px;padding-right:6px}
.zs-exec-head{font-size:12px;color:var(--tx,#3a3a2c);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.zs-exec-rel{font-size:10px;font-weight:700;padding:1px 7px;border-radius:999px;background:#e2e8d6;color:#4a5b35}
.zs-exec-badge{font-size:9px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;padding:1px 6px;border-radius:999px}
.zs-exec-badge--mand{background:#f3ded6;color:#8a3f22}
.zs-exec-badge--flex{background:#dce7d6;color:#3f6b2e}
.zs-exec-badge--ai{background:#dde6f5;color:#2d4f8a}
.zs-exec-pt{font-size:11px;color:var(--st-tx,#6a6a55);margin-top:3px;display:flex;align-items:center;gap:6px}
.zs-exec-pt em{font-style:normal;color:var(--tx,#4a4632);font-weight:600}
.zs-exec-note{font-size:10.5px;color:#8a866f;margin-top:2px}
.zs-exec-internal{font-size:10px;color:#6a7d5a;margin-top:4px;padding:4px 7px;border-radius:6px;background:rgba(110,130,90,.08)}
.zs-field{margin-top:10px}
.zs-field label{display:block;font-size:12px;font-weight:600;color:var(--tx,#4a4632);margin-bottom:4px}
.zs-ta{width:100%;box-sizing:border-box;padding:8px 10px;border-radius:var(--r3,10px);border:1px solid var(--st,#d8d3c4);background:var(--p,#fff);font:inherit;font-size:12px;resize:vertical}
.zs-ta:focus{outline:none;border-color:var(--bl,#5C6B3F)}

/* styles/tabs/zone-planning-merge.css */
/* ════════════════════════════════════════════════════════════════════════
   ZONE PLANNING MERGE — one compact Data-Input card (sibling-styled) with a
   segmented selector; all editing happens in a slide-in WINDOW (drawer).
   The two original cards live hidden in #planStash and are moved into a
   drawer only while being edited.
   ════════════════════════════════════════════════════════════════════════ */
.plan-card .dinput-card-num{display:inline-flex;align-items:center;justify-content:center}
.plan-card .dinput-card-num svg{width:18px;height:18px}
.plan-stash{display:none!important}

/* ── segmented selector ── */
.plan-seg{
  display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:12px;
  padding:5px;border-radius:14px;background:var(--p2,#f2efe6);
  border:1px solid var(--st,#e4dfce);
}
.plan-seg-tab{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:11px 8px 10px;border:1px solid transparent;border-radius:10px;
  background:transparent;color:var(--tx,#5a5640);font:inherit;cursor:pointer;
  transition:background .18s,box-shadow .18s,border-color .18s,transform .12s;
}
.plan-seg-tab:hover{background:var(--p,#fff)}
.plan-seg-tab:active{transform:translateY(1px)}
.plan-seg-ic{width:22px;height:22px;color:var(--st-tx,#8a866f);transition:color .18s}
.plan-seg-ic svg{width:22px;height:22px}
.plan-seg-t{font-size:12.5px;font-weight:700;line-height:1}
.plan-seg-s{font-size:10px;font-weight:500;color:var(--st-tx,#8a866f);line-height:1.2;text-align:center}
.plan-seg-tab.is-active{background:var(--p,#fff);border-color:var(--bl,#5C6B3F);box-shadow:0 2px 8px rgba(92,107,63,.14)}
.plan-seg-tab.is-active .plan-seg-ic,.plan-seg-tab.is-active .plan-seg-t{color:var(--bl,#5C6B3F)}
.plan-seg-dot{
  position:absolute;top:7px;right:8px;width:8px;height:8px;border-radius:50%;
  background:var(--am,#24B47E);box-shadow:0 0 0 3px rgba(36,180,126,.18);
  opacity:0;transform:scale(.4);transition:opacity .18s,transform .18s;
}
.plan-seg-tab.is-on .plan-seg-dot{opacity:1;transform:scale(1)}

/* ── live summary line ── */
.plan-summary{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 4px;min-height:0}
.plan-summary:empty{margin:0}
.plan-chip{font-size:11px;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--p2,#efeada);color:var(--tx,#4a4632);border:1px solid var(--st,#e2dccb)}
.plan-chip--on{background:var(--bl,#5C6B3F);color:#fff;border-color:var(--bl,#5C6B3F)}
.plan-chip--ai{background:var(--am,#24B47E);color:#0d3f2c;border-color:var(--am,#24B47E)}
.plan-chip--warn{background:#fef3c7;color:#92400e;border-color:#fcd34d}
.plan-chip--off,.plan-chip--idle{background:transparent;color:var(--st-tx,#8a866f)}

.plan-seg-tab{cursor:pointer}
.plan-seg-tab.is-active{outline:none}

/* ════════════════════════════════════════════════════════════════════════
   CENTERED PROFESSIONAL MODAL — overrides the side-drawer shell for BOTH the
   ZonePlan and ZoneSense windows (loaded after zones-layer.css so it wins).
   ════════════════════════════════════════════════════════════════════════ */
.zone-drawer-ov{
  justify-content:center;align-items:center;padding:28px;
  background:rgba(14,18,28,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.zone-drawer{
  height:auto;max-height:90vh;border-radius:20px;overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 40px 120px rgba(0,0,0,.5),0 4px 14px rgba(0,0,0,.25);
  transform:scale(.94) translateY(8px);opacity:0;
  transition:transform .26s cubic-bezier(.22,.61,.36,1),opacity .2s ease;
}
.zone-drawer-ov.open .zone-drawer{transform:none;opacity:1}
.zone-drawer-hdr{align-items:center;gap:14px}
@media (prefers-reduced-motion: reduce){ .zone-drawer{transition:none} }

/* ════ ZoneSense window — same shell, single scrolling column, comfy width ════ */
.zs-drawer{width:min(720px,96vw)}
.zs-drawer-body{flex:1;min-height:0;display:block;overflow:auto;padding:24px 28px}

/* header badge (professional accent) */
.zs-drawer-badge{
  flex:0 0 auto;width:42px;height:42px;border-radius:12px;display:inline-flex;
  align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(135deg,var(--bl,#5C6B3F),#7a8a55);
  box-shadow:0 4px 12px rgba(92,107,63,.3);
}
.zs-drawer-badge svg{width:22px;height:22px}

/* the moved ZoneSense card sheds its own card chrome + header inside the drawer */
.zs-drawer-body .dinput-card{border:0!important;background:none!important;box-shadow:none!important;padding:0!important;margin:0!important}
.zs-drawer-body #zsCard>.dinput-card-hdr,
.zs-drawer-body #zsCard>.dinput-card-desc{display:none!important}
.zs-drawer-body .zs-body{margin-top:4px}

/* styles/tabs/zonesense-review.css */
/* ZoneSense — Zone Relations Review modal (professional preview/edit surface) */
#zrr-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(15, 27, 46, .55);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 28px;
  opacity: 0; transition: opacity .18s ease;
}
#zrr-overlay.zrr-in { opacity: 1; }
#zrr-overlay.zrr-in .zrr-modal { transform: none; opacity: 1; }

.zrr-modal {
  width: min(1180px, 100%);
  height: min(760px, 100%);
  background: var(--p, #FBF7F1);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(15,27,46,.35), 0 2px 8px rgba(15,27,46,.15);
  display: flex; flex-direction: column;
  overflow: hidden;
  opacity: 0; transform: scale(.96) translateY(8px);
  transition: transform .28s cubic-bezier(.16,1,.3,1), opacity .28s ease;
  font-family: inherit;
}

/* ── header ── */
.zrr-hdr {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 20px; border-bottom: 1px solid rgba(15,27,46,.08);
  background: linear-gradient(180deg, rgba(36,180,126,.10), transparent);
}
.zrr-hdr-title { display: flex; align-items: center; gap: 14px; }
.zrr-hdr-title h2 { margin: 0; font-size: 17px; font-weight: 800; color: var(--st, #0F1B2E); letter-spacing: -.01em; }
.zrr-chip-counts { display: flex; gap: 6px; }
.zrr-chip { font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: #eee7d6; color: #5b5640; }
.zrr-chip--mand { background: #f3ded6; color: #8a3f22; }
.zrr-chip--flex { background: #dce7d6; color: #3f6b2e; }

.zrr-hdr-tools { display: flex; align-items: center; gap: 10px; }
.zrr-search {
  font: inherit; font-size: 12.5px; padding: 7px 12px; width: 210px;
  border-radius: 999px; border: 1px solid rgba(15,27,46,.15); background: #fff; color: var(--tx,#2A2F36);
}
.zrr-search:focus { outline: 2px solid rgba(36,180,126,.5); outline-offset: 1px; }
.zrr-filters { display: flex; background: rgba(15,27,46,.06); border-radius: 999px; padding: 2px; gap: 2px; }
.zrr-filter-tab {
  font: inherit; font-size: 11.5px; font-weight: 700; padding: 5px 12px; border-radius: 999px;
  border: none; background: transparent; color: var(--mu,#4D6E91); cursor: pointer; transition: background .15s;
}
.zrr-filter-tab.on { background: #fff; color: var(--st,#0F1B2E); box-shadow: 0 1px 3px rgba(15,27,46,.15); }
.zrr-close {
  width: 30px; height: 30px; border-radius: 50%; border: none; background: rgba(15,27,46,.08);
  color: var(--st,#0F1B2E); font-size: 18px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.zrr-close:hover { background: rgba(15,27,46,.16); }

/* ── body: diagram + table ── */
.zrr-body { flex: 1; display: flex; min-height: 0; }
.zrr-diagram {
  width: 280px; flex: 0 0 280px; border-right: 1px solid rgba(15,27,46,.08);
  overflow-y: auto; padding: 14px 10px; background: rgba(15,27,46,.02);
}
.zrr-flow { width: 100%; height: auto; overflow: visible; }
.zrr-zchip { opacity: 0; animation: zrrChipIn .3s ease forwards; animation-delay: var(--d,0ms); cursor: pointer; }
.zrr-zchip rect { transition: filter .12s; }
.zrr-zchip:hover rect { filter: brightness(1.12); }
@keyframes zrrChipIn { from { opacity:0; transform: translateY(-4px);} to { opacity:1; transform: translateY(0);} }
.zrr-conn { fill: none; stroke-width: 2.6; stroke-linecap: round; opacity: .9; cursor: pointer; }
.zrr-conn:hover { opacity: 1; stroke-width: 3.4; }
.zrr-conn--dash { stroke-dasharray: 6,5; }
.zrr-diagram-empty, .zrr-empty { padding: 24px; text-align: center; color: var(--mu,#4D6E91); font-size: 12.5px; }
.zrr-diagram-hint { font-size: 10px; color: var(--mu,#4D6E91); text-align: center; margin-top: 6px; opacity: .75; }

/* jump-to flash when a diagram chip/connector is clicked */
.zrr-pair-group.zrr-flash { animation: zrrFlash .9s ease; }
@keyframes zrrFlash { 0%,100% { box-shadow: none; } 25% { box-shadow: 0 0 0 3px rgba(36,180,126,.6); } }

/* floating tooltip for diagram connectors (real pred -> succ names) */
.zrr-tooltip {
  position: fixed; z-index: 10001; display: none; pointer-events: none;
  background: var(--st,#0F1B2E); color: #fff; font-size: 11px; line-height: 1.5;
  padding: 6px 10px; border-radius: 8px; white-space: pre-line; max-width: 240px;
  box-shadow: 0 6px 18px rgba(15,27,46,.3);
}

.zrr-table-wrap { flex: 1; overflow-y: auto; padding: 14px 18px; }
.zrr-pair-group { margin-bottom: 14px; border: 1px solid rgba(15,27,46,.08); border-radius: 12px; overflow: hidden; background: #fff; }
.zrr-pair-hdr {
  display: flex; align-items: center; gap: 10px; padding: 9px 14px;
  background: rgba(15,27,46,.035); border-bottom: 1px solid rgba(15,27,46,.06);
}
.zrr-pair-hdr b { font-size: 12.5px; color: var(--st,#0F1B2E); margin-right: auto; }
.zrr-mode-sel {
  font: inherit; font-size: 11.5px; padding: 4px 8px; border-radius: 8px;
  border: 1px solid rgba(15,27,46,.15); background: #fff; color: var(--tx,#2A2F36);
}
.zrr-lag { font-size: 11px; color: var(--mu,#4D6E91); display: flex; align-items: center; gap: 4px; }
.zrr-lag-in { width: 44px; font: inherit; font-size: 11px; padding: 3px 5px; border-radius: 6px; border: 1px solid rgba(15,27,46,.15); }

.zrr-pair-rows { padding: 6px 10px; }
.zrr-row { padding: 8px 6px; border-bottom: 1px dashed rgba(15,27,46,.08); }
.zrr-row:last-child { border-bottom: 0; }
.zrr-row--empty { color: var(--mu,#4D6E91); font-size: 11.5px; font-style: italic; }
.zrr-row-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.zrr-badge { font-size: 9px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; }
.zrr-badge--mand { background: #f3ded6; color: #8a3f22; }
.zrr-badge--flex { background: #dce7d6; color: #3f6b2e; }
.zrr-badge--ai { background: #dde6f5; color: #2d4f8a; }
.zrr-rel { font-size: 11px; font-weight: 700; color: var(--st,#0F1B2E); }
.zrr-driver { font-size: 10.5px; padding: 1px 7px; border-radius: 999px; background: rgba(36,180,126,.2); color: #188D68; }
.zrr-row-note { font-size: 10.5px; color: var(--mu,#4D6E91); margin-top: 6px; }
.zrr-internal { font-size: 10.5px; color: #5c6b3f; margin-top: 6px; padding: 6px 9px; border-radius: 8px; background: rgba(92,138,63,.08); }
.zrr-internal-lbl { font-weight: 700; }

/* boundary card: FROM (zone A's last work) -> TO (zone B's gated entries) */
.zrr-bnd { display: flex; align-items: stretch; gap: 8px; margin-top: 7px; }
.zrr-bnd-box {
  flex: 1; min-width: 0; border-radius: 10px; padding: 7px 10px;
  border: 1px solid rgba(15,27,46,.08);
}
.zrr-bnd-box--from { background: rgba(36,180,126,.08); border-color: rgba(36,180,126,.3); }
.zrr-bnd-box--to { background: rgba(92,138,63,.07); border-color: rgba(92,138,63,.25); }
.zrr-bnd-box small { display: block; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--mu,#4D6E91); margin-bottom: 4px; }
.zrr-bnd-item { font-size: 12px; font-weight: 600; color: var(--tx,#2A2F36); line-height: 1.5; }
.zrr-bnd-item--pred { font-weight: 700; color: var(--st,#0F1B2E); }
.zrr-bnd-mid { flex: 0 0 auto; display: flex; align-items: center; color: var(--mu,#4D6E91); padding: 0 2px; }

/* ── footer ── */
.zrr-ftr {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 18px; border-top: 1px solid rgba(15,27,46,.08); background: rgba(15,27,46,.02);
}
.zrr-diag { font-size: 11px; color: var(--mu,#4D6E91); display: flex; gap: 6px; flex-wrap: wrap; }
.zrr-diag-sep { opacity: .5; }
.zrr-warn { font-size: 11px; color: #8a3f22; margin-top: 4px; }
.zrr-ftr-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.zrr-btn {
  font: inherit; font-size: 12px; font-weight: 700; padding: 8px 16px; border-radius: 999px;
  border: 1px solid rgba(15,27,46,.15); background: #fff; color: var(--st,#0F1B2E); cursor: pointer;
}
.zrr-btn:hover { background: rgba(15,27,46,.05); }
.zrr-btn:disabled { opacity: .6; cursor: default; }
.zrr-btn--primary { background: var(--st,#0F1B2E); color: #fff; border-color: var(--st,#0F1B2E); }
.zrr-btn--primary:hover { background: #17263f; }
.zrr-btn--recompute { border-color: rgba(36,180,126,.5); color: #188D68; }
.zrr-btn--recompute:hover { background: rgba(36,180,126,.12); }

@media (max-width: 860px) {
  .zrr-body { flex-direction: column; }
  .zrr-diagram { width: 100%; flex: 0 0 auto; border-right: 0; border-bottom: 1px solid rgba(15,27,46,.08); max-height: 180px; }
  .zrr-hdr { flex-wrap: wrap; }
  .zrr-search { width: 140px; }
}

/* styles/core/nexora-premium-redesign.css */
/* Nexora AI premium redesign: presentation layer only. */
:root {
  --nx-bg: #EEF1F3;
  --nx-surface: #FFFFFF;
  --nx-surface-2: #F7F8F9;
  --nx-sidebar-active: #DDF4ED;
  --nx-accent: #24B47E;
  --nx-accent-2: #BFE8DD;
  --nx-info: #7FD8C5;
  --nx-warning: #EAC9F8;
  --nx-text: #1A1D21;
  --nx-muted: #72777E;
  --nx-border: #E8ECEF;
  --nx-shadow-soft: 0 24px 70px rgba(26, 29, 33, .08);
  --nx-shadow-card: 0 16px 42px rgba(26, 29, 33, .07);
  --nx-radius-card: 28px;
  --nx-radius-button: 18px;
  --nx-radius-sidebar: 32px;
  --nx-radius-input: 18px;

  --bg: var(--nx-bg);
  --bg2: var(--nx-bg);
  --p: var(--nx-surface);
  --p2: var(--nx-surface-2);
  --sk: var(--nx-border);
  --sk2: var(--nx-border);
  --mu: var(--nx-muted);
  --so: var(--nx-text);
  --tx: var(--nx-text);
  --st: var(--nx-text);
  --bl: var(--nx-text);
  --cy: var(--nx-info);
  --gn: var(--nx-accent);
  --am: var(--nx-warning);
  --r: var(--nx-radius-card);
  --r2: 20px;
  --r3: var(--nx-radius-button);
}

html,
body,
.app {
  background: var(--nx-bg) !important;
  color: var(--nx-text) !important;
  font-family: Inter, "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.app {
  min-height: 100vh;
  background:
    radial-gradient(ellipse 42% 32% at 88% -6%, rgba(127, 216, 197, .22), transparent 62%),
    radial-gradient(ellipse 36% 28% at 20% 4%, rgba(234, 201, 248, .16), transparent 60%),
    linear-gradient(180deg, #F8FAFA 0%, var(--nx-bg) 54%, #F5F7F8 100%) !important;
}

.app::before {
  display: none !important;
}

button,
[role="button"],
.tab,
.home-quick,
.home-action,
.home-stage,
.home-btn,
.plog-btn {
  cursor: pointer;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.tab:focus-visible {
  outline: 3px solid rgba(36, 180, 126, .22) !important;
  outline-offset: 3px !important;
}

body.ap-vertical-shell .tabs,
body.ap-vertical-shell .tabs:not(.ap-nav-collapsed),
body.ap-vertical-shell .tabs.ap-nav-peek {
  position: fixed !important;
  inset: 28px auto 28px 28px !important;
  width: 260px !important;
  height: auto !important;
  z-index: 120 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding: 12px !important;
  overflow: hidden !important;
  border: 1px solid rgba(232, 236, 239, .92) !important;
  border-radius: var(--nx-radius-sidebar) !important;
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: 0 24px 70px rgba(26, 29, 33, .10) !important;
  backdrop-filter: blur(22px) !important;
  transition: width .46s cubic-bezier(.19, 1, .22, 1), border-radius .46s cubic-bezier(.19, 1, .22, 1) !important;
}

body.ap-vertical-shell .tabs.ap-nav-collapsed:not(.ap-nav-peek) {
  position: fixed !important;
  inset: 28px auto 28px 28px !important;
  width: 72px !important;
  height: auto !important;
  z-index: 120 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 12px 8px !important;
  overflow: hidden !important;
  border: 1px solid rgba(232, 236, 239, .92) !important;
  border-radius: var(--nx-radius-sidebar) !important;
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: 0 24px 70px rgba(26, 29, 33, .10) !important;
  backdrop-filter: blur(22px) !important;
  transition: width .4s cubic-bezier(.19, 1, .22, 1), align-items .4s cubic-bezier(.19, 1, .22, 1) !important;
}

body.ap-vertical-shell .tabs::before,
body.ap-vertical-shell .tabs::after {
  display: none !important;
}

/* Sidebar brand permanently hidden — Nexora logo lives in the header only */
body.ap-vertical-shell .ap-sidebar-brand,
body.ap-vertical-shell .ap-sidebar-mark,
body.ap-vertical-shell .ap-sidebar-logo {
  display: none !important;
}

body.ap-vertical-shell .ap-sidebar-copy,
body.ap-vertical-shell .ap-sidebar-toggle,
body.ap-vertical-shell .ap-cmd-trigger,
body.ap-vertical-shell .ap-workspace-label,
body.ap-vertical-shell .ap-tab-glow {
  display: none !important;
}

body.ap-vertical-shell .tabs.ap-nav-collapsed:not(.ap-nav-peek) .ap-tab-label,
body.ap-vertical-shell .tabs.ap-nav-collapsed:not(.ap-nav-peek) .ap-section-text {
  display: none !important;
}

body.ap-vertical-shell .ap-sidebar-section {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 8px 4px 6px !important;
  pointer-events: none !important;
}

body.ap-vertical-shell .ap-section-line {
  flex: 1 !important;
  height: 1px !important;
  border-radius: 1px !important;
}

body.ap-vertical-shell .ap-section-text {
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .ap-section-line,
body.ap-vertical-shell .tabs.ap-nav-peek .ap-section-line {
  background: linear-gradient(90deg, transparent, rgba(36, 180, 126, .18) 30%, rgba(36, 180, 126, .06)) !important;
}

body.ap-vertical-shell .tabs.ap-nav-collapsed:not(.ap-nav-peek) .ap-section-line {
  background: linear-gradient(90deg, transparent, rgba(36, 180, 126, .12), transparent) !important;
}

body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .ap-section-text,
body.ap-vertical-shell .tabs.ap-nav-peek .ap-section-text {
  color: #188D68 !important;
}

body.ap-vertical-shell .tabs.ap-nav-collapsed:not(.ap-nav-peek) .ap-sidebar-section {
  height: 1px !important;
  margin: 10px 6px 8px !important;
  padding: 0 !important;
  overflow: hidden !important;
}

body.ap-vertical-shell .ap-sidebar-nav,
body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .ap-sidebar-nav,
body.ap-vertical-shell .tabs.ap-nav-peek .ap-sidebar-nav {
  order: 2 !important;
  width: 100% !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 6px !important;
  padding: 0 0 4px !important;
  margin: 0 !important;
  overflow-y: auto !important;
  scrollbar-width: none !important;
}

body.ap-vertical-shell .tabs.ap-nav-collapsed:not(.ap-nav-peek) .ap-sidebar-nav {
  order: 2 !important;
  width: 100% !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow-y: auto !important;
  scrollbar-width: none !important;
}

body.ap-vertical-shell .ap-sidebar-nav::-webkit-scrollbar {
  display: none;
}

body.ap-vertical-shell .tab,
body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .tab,
body.ap-vertical-shell .tabs.ap-nav-peek .tab {
  width: 100% !important;
  height: 45px !important;
  min-height: 45px !important;
  margin: 0 !important;
  padding: 0 11px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: transparent !important;
  color: #344054 !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: transform .18s ease, background-color .18s ease, color .18s ease !important;
}

body.ap-vertical-shell .tabs.ap-nav-collapsed:not(.ap-nav-peek) .tab {
  width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: transparent !important;
  color: #344054 !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: transform .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease !important;
}

body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .tab:hover,
body.ap-vertical-shell .tabs.ap-nav-peek .tab:hover {
  background: var(--nx-surface-2) !important;
  color: var(--nx-accent) !important;
}

body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .tab.active,
body.ap-vertical-shell .tabs.ap-nav-peek .tab.active {
  background: var(--nx-sidebar-active) !important;
  color: #188D68 !important;
  box-shadow: inset 0 0 0 1px rgba(36, 180, 126, .10) !important;
}

body.ap-vertical-shell .tabs.ap-nav-collapsed:not(.ap-nav-peek) .tab:hover {
  background: var(--nx-surface-2) !important;
  color: var(--nx-accent) !important;
}

body.ap-vertical-shell .tabs.ap-nav-collapsed:not(.ap-nav-peek) .tab.active {
  background: var(--nx-sidebar-active) !important;
  color: #188D68 !important;
  box-shadow: inset 0 0 0 1px rgba(36, 180, 126, .10) !important;
}

body.ap-vertical-shell .tab .ap-tab-icon,
body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .tab .ap-tab-icon,
body.ap-vertical-shell .tabs.ap-nav-peek .tab .ap-tab-icon {
  flex: 0 0 30px !important;
  width: 30px !important;
  height: 30px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(36, 180, 126, .08) !important;
  border-radius: 10px !important;
  background: rgba(36, 180, 126, .04) !important;
  color: currentColor !important;
  box-shadow: none !important;
  transition: background .2s ease, transform .3s cubic-bezier(.19, 1, .22, 1) !important;
}

body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .tab.active .ap-tab-icon,
body.ap-vertical-shell .tabs.ap-nav-peek .tab.active .ap-tab-icon {
  background: rgba(36, 180, 126, .10) !important;
  border-color: rgba(36, 180, 126, .15) !important;
}

body.ap-vertical-shell .tab .ap-tab-icon svg {
  width: 20px !important;
  height: 20px !important;
  stroke-width: 1.8 !important;
}

body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .ap-tab-label,
body.ap-vertical-shell .tabs.ap-nav-peek .ap-tab-label {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: #344054 !important;
  line-height: 1.2 !important;
  letter-spacing: -.01em !important;
  transition: opacity .25s ease, transform .38s cubic-bezier(.19, 1, .22, 1) !important;
}

body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .tab.active .ap-tab-label,
body.ap-vertical-shell .tabs.ap-nav-peek .tab.active .ap-tab-label {
  color: #188D68 !important;
  font-weight: 750 !important;
}

/* Badge number (shown after generation) → mint to match active label */
body.ap-vertical-shell .tab .tbadge {
  color: #188D68 !important;
  background: rgba(36, 180, 126, .12) !important;
  border-color: rgba(36, 180, 126, .20) !important;
}

/* Keyboard shortcut pill → mint theme */
body.ap-vertical-shell .tab .ap-tab-shortcut {
  color: rgba(36, 180, 126, .78) !important;
  background: rgba(36, 180, 126, .08) !important;
  border-color: rgba(36, 180, 126, .14) !important;
}

body.ap-vertical-shell .tab.active .ap-tab-shortcut {
  color: #0f1b2e !important;
  background: rgba(36, 180, 126, .72) !important;
  border-color: rgba(36, 180, 126, .72) !important;
}

body.ap-vertical-shell .tab[data-tab="story"],
body.ap-vertical-shell .tab[data-tab="maestro"],
body.ap-vertical-shell .tab[data-tab="nexus"],
body.ap-vertical-shell .tab[data-tab="calendar"],
body.ap-vertical-shell .tab[data-tab="cp"],
body.ap-vertical-shell .tab[data-tab="ms"],
body.ap-vertical-shell .tab[data-tab="cost"],
body.ap-vertical-shell .tab[data-tab="histogram"],
body.ap-vertical-shell .tab[data-tab="filesreview"],
body.ap-vertical-shell .tab[data-tab="docai"],
body.ap-vertical-shell .tab[data-tab="chat"] {
  display: none !important;
}

body.ap-vertical-shell .ap-settings-shortcut,
body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .ap-settings-shortcut,
body.ap-vertical-shell .tabs.ap-nav-peek .ap-settings-shortcut {
  order: 3 !important;
  width: auto !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: 8px 0 4px !important;
  padding: 0 11px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  border: 0 !important;
  border-top: 1px solid rgba(36, 180, 126, .10) !important;
  border-radius: 14px !important;
  background: transparent !important;
  color: #344054 !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: background .2s ease, color .2s ease !important;
}

body.ap-vertical-shell .ap-settings-shortcut svg {
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 20px !important;
  stroke-width: 1.8 !important;
}

body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .ap-settings-shortcut:hover,
body.ap-vertical-shell .tabs.ap-nav-peek .ap-settings-shortcut:hover,
body.ap-vertical-shell .ap-settings-shortcut:hover {
  background: var(--nx-surface-2) !important;
  color: var(--nx-accent) !important;
}

body.ap-vertical-shell .ap-sidebar-foot,
body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .ap-sidebar-foot,
body.ap-vertical-shell .tabs.ap-nav-peek .ap-sidebar-foot {
  order: 9999 !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-height: 52px !important;
  margin-top: 4px !important;
  padding: 6px 10px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  border: 1px solid rgba(36, 180, 126, .10) !important;
  border-radius: 14px !important;
  background: rgba(36, 180, 126, .03) !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

body.ap-vertical-shell .ap-account-avatar,
body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .ap-account-avatar,
body.ap-vertical-shell .tabs.ap-nav-peek .ap-account-avatar {
  width: 32px !important;
  height: 32px !important;
  flex: 0 0 32px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: #2DBE9F !important;
  color: #10231F !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  box-shadow: none !important;
}

body.ap-vertical-shell .ap-account-copy {
  display: none !important;
}

body.ap-vertical-shell .tabs.ap-nav-collapsed:not(.ap-nav-peek) .ap-sidebar-foot {
  order: 4 !important;
  width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.ap-vertical-shell .tabs.ap-nav-collapsed:not(.ap-nav-peek) .ap-account-avatar {
  width: 36px !important;
  height: 36px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  background: var(--nx-sidebar-active) !important;
  color: var(--nx-text) !important;
  border: 0 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}

.hdr,
body.ap-vertical-shell .hdr,
body.ap-vertical-shell .hdr:not(.ap-nav-collapsed),
body.ap-vertical-shell .hdr.ap-nav-peek {
  position: fixed !important;
  top: var(--app-header-top) !important;
  left: 316px !important;
  right: 28px !important;
  z-index: 110 !important;
  height: var(--app-header-height) !important;
  min-height: var(--app-header-height) !important;
  padding: 0 0 0 0 !important;
  display: grid !important;
  grid-template-columns: minmax(var(--app-logo-w), auto) minmax(240px, 420px) auto !important;
  align-items: center !important;
  gap: 18px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  transition: left .4s cubic-bezier(.19, 1, .22, 1) !important;
}

body.ap-vertical-shell .hdr.ap-nav-collapsed:not(.ap-nav-peek) {
  position: fixed !important;
  top: var(--app-header-top) !important;
  left: 130px !important;
  right: 28px !important;
  z-index: 110 !important;
  height: var(--app-header-height) !important;
  min-height: var(--app-header-height) !important;
  padding: 0 0 0 0 !important;
  display: grid !important;
  grid-template-columns: minmax(var(--app-logo-w), auto) minmax(240px, 420px) auto !important;
  align-items: center !important;
  gap: 18px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  transition: left .4s cubic-bezier(.19, 1, .22, 1) !important;
}

body.ap-vertical-shell::before {
  content: "" !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: var(--app-header-band) !important;
  z-index: 105 !important;
  background: #F8FAFA !important;
  border-bottom: 1px solid rgba(20, 60, 48, .06) !important;
  pointer-events: none !important;
}

.hdr .logo,
body.ap-vertical-shell .hdr .logo {
  min-width: var(--app-logo-w) !important;
  max-width: none !important;
  width: auto !important;
  margin: 0 !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.hdr .logo-ico,
body.ap-vertical-shell .hdr .logo-ico,
body.ap-vertical-shell .hdr.ap-nav-collapsed:not(.ap-nav-peek) .logo-ico {
  width: var(--app-logo-w) !important;
  height: var(--app-logo-h) !important;
  flex: 0 0 var(--app-logo-w) !important;
  background-image: url("../nexora-ai-theme05-logo.png") !important;
  background-size: contain !important;
  background-position: left center !important;
  background-repeat: no-repeat !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.hdr .logo>div:last-child {
  display: none !important;
}

.hdr-search {
  height: var(--app-hdr-control);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 15px;
  border-radius: var(--nx-radius-input);
  background: rgba(255, 255, 255, .86);
  border: 1px solid var(--nx-border);
  box-shadow: 0 8px 22px rgba(26, 29, 33, .05);
}

.hdr-search svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  fill: none;
  stroke: #4A5568;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hdr-search input {
  width: 100%;
  min-width: 0;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--nx-text) !important;
  font-size: 13.5px !important;
  font-weight: 500;
}

.hdr-search input::placeholder {
  color: #9AA1AA;
}

.hdr-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
}

.hdr-icon-btn,
.hdr-profile {
  height: var(--app-hdr-control);
  border: 1px solid var(--nx-border);
  background: rgba(255, 255, 255, .88);
  color: var(--nx-text);
  box-shadow: 0 8px 22px rgba(26, 29, 33, .05);
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.hdr-icon-btn {
  position: relative;
  width: var(--app-hdr-control);
  display: grid;
  place-items: center;
  border-radius: var(--nx-radius-input);
}

.hdr-icon-btn svg,
.hdr-profile svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hdr-notification-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #A58AF2;
  border: 2px solid #FFFFFF;
}

.hdr-profile {
  display: grid;
  grid-template-columns: 32px minmax(100px, auto) 16px;
  align-items: center;
  gap: 10px;
  min-width: 196px;
  padding: 0 14px 0 8px;
  border-radius: 999px;
  text-align: left;
}

.hdr-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #1A1D21, #49515A);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 800;
}

.hdr-profile-copy b,
.hdr-profile-copy small {
  display: block;
  white-space: nowrap;
}

.hdr-profile-copy b {
  font-size: 12.5px;
  line-height: 1.15;
}

.hdr-profile-copy small {
  margin-top: 1px;
  color: var(--nx-muted);
  font-size: 11px;
}

.hdr-icon-btn:hover,
.hdr-profile:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(26, 29, 33, .08);
}

.nx-hidden-engine {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.body,
body.ap-vertical-shell .body,
body.ap-vertical-shell .body:not(.ap-body-closed) {
  background-color: #fafdff !important;
  padding: var(--app-content-top) 34px 54px 316px !important;
  margin: 0 !important;
  min-height: 100vh !important;
  position: relative !important;
  z-index: 1 !important;
  transition: padding-left .4s cubic-bezier(.19, 1, .22, 1) !important;
}

body.ap-vertical-shell .body.ap-body-closed {
  background-color: #fafdff !important;
  padding: var(--app-content-top) 34px 54px 130px !important;
  margin: 0 !important;
  min-height: 100vh !important;
  position: relative !important;
  z-index: 1 !important;
  transition: padding-left .4s cubic-bezier(.19, 1, .22, 1) !important;
}

.panel,
.card,
.home-card,
.modal,
.docai-card,
.dsett-card,
.home-quick,
.home-action,
.home-stage,
.home-kpi,
.home-mini-gantt,
.home-logic-card,
.home-snapshot,
.home-command-hero,
.plog-card,
.map-card,
.m2-card,
.nexus-card,
.maestro-card,
.forge-sbox,
.forge-cpm-card,
.forge-con,
.forge-board-wrap {
  background: rgba(255, 255, 255, .92) !important;
  border: 1px solid rgba(232, 236, 239, .94) !important;
  border-radius: var(--nx-radius-card) !important;
  color: var(--nx-text) !important;
  box-shadow: var(--nx-shadow-card) !important;
}

input,
textarea,
select,
.input,
.chat-input,
.docai-input,
.dsett-input {
  min-height: 44px;
  border-radius: var(--nx-radius-input) !important;
  background: #FFFFFF !important;
  border: 1px solid var(--nx-border) !important;
  color: var(--nx-text) !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: rgba(36, 180, 126, .55) !important;
  box-shadow: 0 0 0 4px rgba(36, 180, 126, .12) !important;
}

.hbtn,
.home-btn,
.btn,
.apr-btn,
.dsett-btn,
.plog-btn {
  border-radius: var(--nx-radius-button) !important;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease !important;
}

.home-btn-primary,
.btn.primary,
.primary-btn,
.apr-btn.pri,
.dsett-btn--primary {
  background: #0F1720 !important;
  border-color: #0F1720 !important;
  color: #FFFFFF !important;
  box-shadow: 0 16px 30px rgba(26, 29, 33, .16) !important;
}

.home-btn-primary:hover,
.btn.primary:hover,
.primary-btn:hover,
.apr-btn.pri:hover,
.dsett-btn--primary:hover {
  transform: translateY(-1px);
  background: #1A1D21 !important;
  box-shadow: 0 18px 34px rgba(26, 29, 33, .20) !important;
}

.home-btn-ghost,
.btn:not(.primary),
.apr-btn.sec,
.dsett-btn {
  background: #FFFFFF !important;
  border: 1px solid var(--nx-border) !important;
  color: var(--nx-text) !important;
}

.home-btn-ghost:hover,
.btn:not(.primary):hover,
.apr-btn.sec:hover,
.dsett-btn:hover {
  border-color: rgba(36, 180, 126, .32) !important;
  background: var(--nx-surface-2) !important;
}

.aipe-result-out table,
.tree-table,
.lk-tbl,
.lb-tbl,
.h-tbl,
.h-mtbl {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden !important;
  border-radius: 22px !important;
  border: 1px solid var(--nx-border) !important;
  background: #FFFFFF !important;
}

.aipe-result-out table thead th,
.tree-table thead th,
.lk-tbl thead th,
.lb-tbl thead th,
.h-tbl thead th,
.h-mtbl thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #F7F8F9 !important;
  color: #44505C !important;
  border-bottom: 1px solid var(--nx-border) !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
}

.aipe-result-out table tbody tr:hover,
.tree-table tbody tr:hover,
.lk-tbl tbody tr:hover,
.lb-tbl tbody tr:hover {
  background: rgba(221, 244, 237, .42) !important;
}

#tp-home {
  padding: 0 !important;
}

#home-root {
  max-width: 1660px;
  margin: 0 auto;
}

.home-shell {
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* Compact scale for the whole dashboard. Tune 0.75–1.0 to taste. */
  zoom: .82;
}

.home-empty {
  padding: 22px 16px;
  border-radius: 16px;
  background: #F6F8F9;
  color: var(--nx-muted);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

.home-welcome {
  position: relative;
  min-height: 286px;
  overflow: hidden;
  border-radius: 34px;
  padding: 42px 46px;
  background:
    radial-gradient(ellipse 46% 62% at 88% 28%, rgba(127, 216, 197, .28), transparent 62%),
    linear-gradient(135deg, #EAF7F4 0%, #F8FCFB 58%, #FFFFFF 100%);
  border: 1px solid rgba(255, 255, 255, .96);
  box-shadow: var(--nx-shadow-soft);
}

.home-welcome::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-radial-gradient(ellipse at 72% 52%, rgba(36, 180, 126, .12) 0 1px, transparent 1px 12px);
  mask-image: linear-gradient(90deg, transparent 46%, black 100%);
  opacity: .72;
}

.home-welcome::after {
  content: "";
  position: absolute;
  right: 70px;
  top: 38px;
  width: 300px;
  height: 198px;
  opacity: .82;
  background:
    linear-gradient(90deg, transparent 20%, rgba(36, 180, 126, .18) 21% 22%, transparent 23%),
    linear-gradient(0deg, transparent 48%, rgba(36, 180, 126, .16) 49% 50%, transparent 51%),
    linear-gradient(135deg, rgba(36, 180, 126, .10), rgba(234, 201, 248, .18));
  border: 1px solid rgba(36, 180, 126, .18);
  border-radius: 28px;
  transform: perspective(560px) rotateY(-16deg) rotateX(8deg);
  box-shadow: 0 24px 70px rgba(36, 180, 126, .14);
}

.home-welcome-content {
  position: relative;
  z-index: 1;
  max-width: 720px;
}

.home-eyebrow,
.home-section-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #15966C;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.home-section-label::before,
.home-eyebrow::before {
  content: "";
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--nx-info);
  box-shadow: 0 0 0 5px rgba(127, 216, 197, .24);
}

.home-welcome h1,
.home-command-title {
  margin: 12px 0 12px;
  color: var(--nx-text);
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: 0;
}

.home-command-title {
  margin: 8px 0 10px;
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.1;
}

.home-welcome p,
.home-command-sub {
  margin: 0;
  color: #4F5C68;
  font-size: 17px;
  line-height: 1.7;
}

.home-command-sub {
  font-size: 14px;
  line-height: 1.55;
  max-width: 60ch;
}

.home-hero-actions,
.home-command-actions,
.home-active-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 26px;
}

.home-btn {
  min-height: 54px;
  padding: 0 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid transparent;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
}

.home-btn svg,
.home-quick svg,
.home-action svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.62fr) minmax(320px, .98fr);
  gap: 20px;
}

.home-card {
  padding: 28px;
}

.home-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

.home-card-title {
  margin: 0;
  color: var(--nx-text);
  font-size: 18px;
  font-weight: 800;
}

.home-getstarted-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  align-items: start;
  margin-bottom: 24px;
}

.home-step {
  position: relative;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 12px;
}

.home-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 31px;
  left: calc(50% + 56px);
  width: calc(100% - 92px);
  border-top: 2px dashed #D9DEE3;
}

.home-step-num {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(calc(-50% - 30px));
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--nx-accent);
  color: #FFFFFF;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 0 0 3px #FFFFFF, 0 4px 10px rgba(36, 180, 126, .35);
  z-index: 2;
}

.home-step-icon,
.home-quick-icon,
.home-action-icon {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: linear-gradient(180deg, #F1FAF7, #EAF4F1);
  color: #1A9B75;
  border: 1px solid rgba(36, 180, 126, .10);
}

.home-step b,
.home-quick b,
.home-action b {
  display: block;
  color: var(--nx-text);
  font-size: 15px;
  line-height: 1.35;
}

.home-step small,
.home-quick small,
.home-action small {
  display: block;
  margin-top: 5px;
  color: var(--nx-muted);
  font-size: 13px;
  line-height: 1.45;
}

.home-plan-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.home-plan-name {
  color: var(--nx-text);
  font-size: 18px;
  font-weight: 800;
}

.home-plan-badge {
  padding: 8px 18px;
  border-radius: 999px;
  background: #E8F8F3 !important;
  color: #188D68 !important;
  font-size: 13px;
  font-weight: 800;
}

.home-usage-bar {
  height: 8px;
  margin: 28px 0 14px;
  overflow: hidden;
  border-radius: 999px;
  background: #E8ECEF;
}

.home-usage-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #6EC6B4, var(--nx-accent)) !important;
}

.home-usage small {
  color: #66717E;
  font-size: 14px;
}

.home-plan-note {
  margin-top: 26px;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 16px;
  align-items: center;
  padding: 20px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(234, 201, 248, .32), rgba(221, 244, 237, .38));
  color: #5E6670;
  line-height: 1.55;
}

.home-plan-note span {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #A88AF0;
  color: #FFFFFF;
}

.home-quick-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 16px 20px;
}

.home-quick,
.home-action {
  min-height: 84px;
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: center;
  gap: 18px;
  padding: 14px 18px;
  border-radius: 16px !important;
  text-align: left;
  font: inherit;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

.home-quick:hover,
.home-action:hover,
.home-stage:hover {
  transform: translateY(-2px);
  border-color: rgba(36, 180, 126, .26) !important;
  box-shadow: 0 22px 46px rgba(26, 29, 33, .09) !important;
}

.home-quick-icon,
.home-action-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
}

.home-command-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(460px, .9fr);
  gap: 16px;
  align-items: stretch;
}

.home-command-hero {
  padding: 26px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 36% 60% at 96% 10%, rgba(127, 216, 197, .24), transparent 62%),
    linear-gradient(135deg, #FFFFFF 0%, #F4FBF9 100%) !important;
}

.home-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.home-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: #F1F5F4;
  color: #4E5965;
  font-size: 13px;
  font-weight: 700;
}

.home-pill::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--nx-accent);
}

.home-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.home-kpi {
  min-height: 100px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  border-radius: 20px !important;
}

.home-kpi small {
  color: var(--nx-muted);
  font-size: 12px;
  font-weight: 700;
}

.home-kpi b {
  color: var(--nx-text);
  font-size: clamp(24px, 2.1vw, 34px);
  line-height: 1;
}

.home-kpi span {
  color: #188D68;
  font-size: 12px;
  font-weight: 800;
}

.home-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(360px, 1.05fr) minmax(340px, .9fr) minmax(280px, .62fr);
  gap: 16px;
  align-items: start;
}

.home-stages {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.home-stage {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 96px 80px;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border-radius: 18px;
  background: #FFFFFF;
  border: 1px solid var(--nx-border);
  box-shadow: 0 8px 20px rgba(26, 29, 33, .035);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.home-stage-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #EDF8F5;
  color: #188D68;
  font-weight: 900;
}

.home-stage-name {
  min-width: 0;
}

.home-stage-name b {
  display: block;
  overflow: hidden;
  color: var(--nx-text);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-stage-name small,
.home-stage-meta,
.home-stage-status {
  color: var(--nx-muted);
  font-size: 12px;
  font-weight: 700;
}

.home-progress {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #E8ECEF;
}

.home-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7FD8C5, #24B47E);
}

.home-stage-status {
  justify-self: end;
  padding: 6px 10px;
  border-radius: 999px;
  background: #F1F8F6;
  color: #188D68;
}

.home-mini-gantt {
  position: relative;
  padding: 20px;
}

.home-gantt-axis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 4px 0 14px;
  padding-left: 106px;
  color: #9098A2;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.home-gantt-axis span:not(:first-child) {
  text-align: center;
}

.home-gantt-axis span:last-child {
  text-align: right;
}

.home-gantt-plot {
  position: relative;
}

.home-gantt-row {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 14px;
  align-items: center;
  height: 42px;
}

.home-gantt-row span {
  color: #586371;
  font-size: 12px;
  font-weight: 700;
}

.home-gantt-track {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: #EDF1F3;
}

.home-gantt-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: inherit;
  background: #7FD8C5;
}

.home-gantt-bar.is-critical {
  background: #24B47E;
}

.home-gantt-today {
  position: absolute;
  top: 16px;
  bottom: 6px;
  width: 2px;
  background: #A58AF2;
  border-radius: 2px;
  z-index: 1;
  pointer-events: none;
}

.home-gantt-today::before {
  content: "Today";
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  color: #7B61D8;
  font-size: 11px;
  font-weight: 800;
}

.home-logic-card {
  padding: 20px;
}

.home-logic-score {
  width: 128px;
  height: 128px;
  margin: 6px auto 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--nx-accent) calc(var(--score, 0) * 1%), #E8ECEF 0);
}

.home-logic-score span {
  width: 98px;
  height: 98px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #FFFFFF;
  color: var(--nx-text);
  font-size: 30px;
  font-weight: 900;
}

.home-logic-list,
.home-snapshot-list {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.home-logic-list div,
.home-snapshot-list div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--nx-border);
  color: #5E6874;
  font-size: 13px;
}

.home-logic-list div:last-child,
.home-snapshot-list div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.home-logic-list b,
.home-snapshot-list b {
  color: var(--nx-text);
}

.home-third-grid {
  display: grid;
  grid-template-columns: minmax(430px, 1.1fr) minmax(300px, .78fr) minmax(280px, .62fr);
  gap: 16px;
  align-items: start;
}

.home-actions-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.home-action {
  min-height: 70px;
  grid-template-columns: 46px 1fr auto;
  padding: 12px 14px;
  border-radius: 18px !important;
}

.home-action-icon {
  width: 46px;
  height: 46px;
  border-radius: 15px;
}

.home-action .home-action-open {
  color: #188D68;
  font-size: 20px;
}

.home-snapshot {
  padding: 26px;
}

.home-seeall {
  border: 0;
  background: transparent;
  color: #188D68;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
}

@media (max-width: 1280px) {

  .home-command-grid,
  .home-dashboard-grid,
  .home-third-grid,
  .home-grid {
    grid-template-columns: 1fr;
  }

  .home-kpi-grid,
  .home-quick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {

  body.ap-vertical-shell .tabs,
  body.ap-vertical-shell .tabs.ap-nav-collapsed:not(.ap-nav-peek),
  body.ap-vertical-shell .tabs.ap-nav-peek {
    inset: auto 14px 14px 14px !important;
    width: auto !important;
    height: 76px !important;
    flex-direction: row !important;
    padding: 10px 14px !important;
  }

  body.ap-vertical-shell .ap-sidebar-brand,
  body.ap-vertical-shell .ap-settings-shortcut,
  body.ap-vertical-shell .ap-sidebar-foot {
    display: none !important;
  }

  body.ap-vertical-shell .ap-sidebar-nav {
    flex-direction: row !important;
    overflow-x: auto !important;
  }

  .hdr,
  body.ap-vertical-shell .hdr {
    left: 16px !important;
    right: 16px !important;
    top: var(--app-header-top) !important;
    grid-template-columns: 1fr auto !important;
  }

  .hdr-search {
    display: none;
  }

  .hdr-profile {
    min-width: var(--app-hdr-control);
    width: var(--app-hdr-control);
    padding: 0;
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .hdr-profile-copy,
  .hdr-profile>svg {
    display: none;
  }

  .body,
  body.ap-vertical-shell .body,
  body.ap-vertical-shell .body:not(.ap-body-closed),
  body.ap-vertical-shell .body.ap-body-closed {
    padding: var(--app-content-top) 16px 112px !important;
  }

  .home-welcome {
    padding: 30px 24px;
  }

  .home-welcome::after {
    display: none;
  }

  .home-getstarted-flow,
  .home-kpi-grid,
  .home-quick-grid {
    grid-template-columns: 1fr;
  }

  .home-step:not(:last-child)::after {
    display: none;
  }

  .home-stage {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .home-stage-meta,
  .home-stage-status {
    justify-self: start;
    grid-column: 2;
  }
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
}

/* Final cascade lock against legacy shell/theme offsets loaded earlier. */
html body.ap-vertical-shell .hdr,
html body.ap-vertical-shell .hdr:not(.ap-nav-collapsed),
html body.ap-vertical-shell .hdr.ap-nav-peek {
  top: var(--app-header-top) !important;
  left: 316px !important;
  right: 28px !important;
  width: auto !important;
  max-width: none !important;
  height: var(--app-header-height) !important;
  min-height: var(--app-header-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  transition: left .4s cubic-bezier(.19, 1, .22, 1) !important;
}

html body.ap-vertical-shell .hdr.ap-nav-collapsed:not(.ap-nav-peek) {
  top: var(--app-header-top) !important;
  left: 130px !important;
  right: 28px !important;
  width: auto !important;
  max-width: none !important;
  height: var(--app-header-height) !important;
  min-height: var(--app-header-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  transition: left .4s cubic-bezier(.19, 1, .22, 1) !important;
}

html body.ap-vertical-shell .hdr .logo,
html body.ap-vertical-shell .hdr:not(.ap-nav-collapsed) .logo,
html body.ap-vertical-shell .hdr.ap-nav-peek .logo,
html body.ap-vertical-shell .hdr.ap-nav-collapsed:not(.ap-nav-peek) .logo {
  display: flex !important;
  width: var(--app-logo-w) !important;
  min-width: var(--app-logo-w) !important;
  max-width: var(--app-logo-w) !important;
  opacity: 1 !important;
  visibility: visible !important;
  margin: 0 !important;
  transform: none !important;
  filter: none !important;
}

html body.ap-vertical-shell .hdr .logo-ico,
html body.ap-vertical-shell .hdr.ap-nav-collapsed:not(.ap-nav-peek) .logo-ico {
  width: var(--app-logo-w) !important;
  min-width: var(--app-logo-w) !important;
  max-width: var(--app-logo-w) !important;
  height: var(--app-logo-h) !important;
  flex: 0 0 var(--app-logo-w) !important;
  opacity: 1 !important;
}

html body.ap-vertical-shell .body,
html body.ap-vertical-shell .body:not(.ap-body-closed) {
  left: auto !important;
  right: auto !important;
  width: 100vw !important;
  max-width: none !important;
  margin: 0 !important;
  padding: var(--app-content-top) 34px 54px 316px !important;
  transform: none !important;
  transition: padding-left .4s cubic-bezier(.19, 1, .22, 1) !important;
}

html body.ap-vertical-shell .body.ap-body-closed {
  left: auto !important;
  right: auto !important;
  width: 100vw !important;
  max-width: none !important;
  margin: 0 !important;
  padding: var(--app-content-top) 34px 54px 130px !important;
  transform: none !important;
  transition: padding-left .4s cubic-bezier(.19, 1, .22, 1) !important;
}

html body .home-btn.home-btn-primary,
html body .home-active .home-btn.home-btn-primary,
html body .home-getstarted .home-btn.home-btn-primary {
  background: #0F1720 !important;
  border-color: #0F1720 !important;
  color: #FFFFFF !important;
  box-shadow: 0 16px 30px rgba(26, 29, 33, .16) !important;
}

html body .home-btn.home-btn-primary:hover {
  background: #1A1D21 !important;
  box-shadow: 0 18px 34px rgba(26, 29, 33, .20) !important;
}

html body .home-step-icon svg,
html body .home-quick-icon svg,
html body .home-action-icon svg,
html body .home-plan-note svg,
html body .home-action-open svg {
  width: 22px !important;
  height: 22px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.75 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

html body.ap-vertical-shell .tab[data-tab="compress"],
html body.ap-vertical-shell .tab[data-tab="ai-rel-lab"],
html body.ap-vertical-shell .tab[data-tab="packages"] {
  display: none !important;
}

html body.ap-vertical-shell .tab,
html body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .tab,
html body.ap-vertical-shell .tabs.ap-nav-peek .tab {
  width: 100% !important;
  height: 45px !important;
  min-height: 45px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  padding: 0 11px !important;
  border-radius: 14px !important;
}

html body.ap-vertical-shell .tabs.ap-nav-collapsed:not(.ap-nav-peek) .tab {
  width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  gap: 0 !important;
  border-radius: 14px !important;
}

html body.ap-vertical-shell .tab .ap-tab-icon,
html body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .tab .ap-tab-icon,
html body.ap-vertical-shell .tabs.ap-nav-peek .tab .ap-tab-icon,
html body.ap-vertical-shell .tab.active .ap-tab-icon,
html body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .tab.active .ap-tab-icon,
html body.ap-vertical-shell .tabs.ap-nav-peek .tab.active .ap-tab-icon {
  flex: 0 0 30px !important;
  width: 30px !important;
  height: 30px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(36, 180, 126, .08) !important;
  border-radius: 10px !important;
  background: rgba(36, 180, 126, .04) !important;
  color: currentColor !important;
  box-shadow: none !important;
}

html body.ap-vertical-shell .tabs.ap-nav-collapsed:not(.ap-nav-peek) .tab .ap-tab-icon,
html body.ap-vertical-shell .tabs.ap-nav-collapsed:not(.ap-nav-peek) .tab.active .ap-tab-icon {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  color: currentColor !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.ap-vertical-shell .tab .ap-tab-icon svg,
html body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .tab .ap-tab-icon svg,
html body.ap-vertical-shell .tabs.ap-nav-peek .tab .ap-tab-icon svg {
  width: 20px !important;
  height: 20px !important;
  stroke-width: 1.8 !important;
  color: currentColor !important;
  stroke: currentColor !important;
}

html body.ap-vertical-shell .tabs.ap-nav-collapsed:not(.ap-nav-peek) .tab .ap-tab-icon svg {
  color: currentColor !important;
  stroke: currentColor !important;
}

html body.ap-vertical-shell .ap-settings-shortcut,
html body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .ap-settings-shortcut,
html body.ap-vertical-shell .tabs.ap-nav-peek .ap-settings-shortcut {
  width: auto !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: 8px 0 4px !important;
  padding: 0 11px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  border: 0 !important;
  border-top: 1px solid rgba(36, 180, 126, .10) !important;
  border-radius: 14px !important;
  background: transparent !important;
  color: #344054 !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

html body.ap-vertical-shell .tabs.ap-nav-collapsed:not(.ap-nav-peek) .ap-settings-shortcut {
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  flex: 0 0 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: 6px auto 2px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: transparent !important;
  color: #344054 !important;
  cursor: pointer !important;
}

html body.ap-vertical-shell .ap-settings-shortcut svg {
  width: 20px !important;
  height: 20px !important;
  stroke-width: 1.8 !important;
  color: currentColor !important;
  stroke: currentColor !important;
}

html body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .ap-settings-shortcut:hover,
html body.ap-vertical-shell .tabs.ap-nav-peek .ap-settings-shortcut:hover,
html body.ap-vertical-shell .ap-settings-shortcut:hover {
  background: var(--nx-surface-2) !important;
  color: var(--nx-accent) !important;
}

html body.ap-vertical-shell .tabs.ap-nav-collapsed:not(.ap-nav-peek) .ap-sidebar-foot {
  width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
}

html body.ap-vertical-shell .tabs.ap-nav-collapsed:not(.ap-nav-peek) .ap-account-avatar {
  width: 38px !important;
  height: 38px !important;
  font-size: 11px !important;
}

html body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .ap-sidebar-foot,
html body.ap-vertical-shell .tabs.ap-nav-peek .ap-sidebar-foot {
  order: 9999 !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-height: 52px !important;
  margin-top: 4px !important;
  padding: 6px 10px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  border: 1px solid rgba(36, 180, 126, .10) !important;
  border-radius: 14px !important;
  background: rgba(36, 180, 126, .03) !important;
  cursor: pointer !important;
}

html body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .ap-account-avatar,
html body.ap-vertical-shell .tabs.ap-nav-peek .ap-account-avatar {
  width: 32px !important;
  height: 32px !important;
  flex: 0 0 32px !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  background: #2DBE9F !important;
  color: #10231F !important;
}

html body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .tab:not(.active) .ap-tab-icon svg,
html body.ap-vertical-shell .tabs.ap-nav-peek .tab:not(.active) .ap-tab-icon svg {
  color: #344054 !important;
  stroke: #344054 !important;
}

html body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .tab.active .ap-tab-icon svg,
html body.ap-vertical-shell .tabs.ap-nav-peek .tab.active .ap-tab-icon svg {
  color: #188D68 !important;
  stroke: #188D68 !important;
}

html body.ap-vertical-shell .tab:not(.active) .ap-tab-icon svg,
html body.ap-vertical-shell .tab:not(.active) .ap-tab-icon svg *,
html body.ap-vertical-shell .tabs.ap-nav-collapsed:not(.ap-nav-peek) .tab:not(.active) .ap-tab-icon svg,
html body.ap-vertical-shell .tabs.ap-nav-collapsed:not(.ap-nav-peek) .tab:not(.active) .ap-tab-icon svg * {
  color: #344054 !important;
  stroke: #344054 !important;
}

html body.ap-vertical-shell .tab.active .ap-tab-icon svg,
html body.ap-vertical-shell .tab.active .ap-tab-icon svg *,
html body.ap-vertical-shell .tabs.ap-nav-collapsed:not(.ap-nav-peek) .tab.active .ap-tab-icon svg,
html body.ap-vertical-shell .tabs.ap-nav-collapsed:not(.ap-nav-peek) .tab.active .ap-tab-icon svg * {
  color: #188D68 !important;
  stroke: #188D68 !important;
}

/* ══════════════════════════════════════════════════════════════════════
   COLLAPSED RAIL — group dividers (reference-match)
   One clean centered hairline between every icon group. No text, no
   double lines. Soft neutral fade so it reads as a quiet separator on
   the light rail — matches the reference sidebar exactly.
   ══════════════════════════════════════════════════════════════════════ */

/* Section wrapper becomes a centered slot that holds one drawn line */
html body.ap-vertical-shell .tabs.ap-nav-collapsed:not(.ap-nav-peek) .ap-sidebar-section {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: auto !important;
  margin: 13px auto 11px !important;
  padding: 0 !important;
  overflow: visible !important;
  pointer-events: none !important;
}

/* Kill the raw label + the two stock gradient lines in the rail */
html body.ap-vertical-shell .tabs.ap-nav-collapsed:not(.ap-nav-peek) .ap-section-text,
html body.ap-vertical-shell .tabs.ap-nav-collapsed:not(.ap-nav-peek) .ap-section-line {
  display: none !important;
}

/* The divider itself — a single fading hairline, centered */
html body.ap-vertical-shell .tabs.ap-nav-collapsed:not(.ap-nav-peek) .ap-sidebar-section::after {
  content: "" !important;
  display: block !important;
  width: 26px !important;
  height: 1px !important;
  border-radius: 1px !important;
  background: linear-gradient(90deg,
      transparent,
      rgba(26, 29, 33, .16) 22%,
      rgba(26, 29, 33, .16) 78%,
      transparent) !important;
}

/* No line above the first group — separators sit BETWEEN groups only */
html body.ap-vertical-shell .tabs.ap-nav-collapsed:not(.ap-nav-peek) .ap-sidebar-nav>.ap-sidebar-section:first-child {
  display: none !important;
}

/* ══════════════════════════════════════════════════════════════════════
   COLLAPSED RAIL — start at Home
   Drop the brand mark + the search pill from the compact rail so the first
   thing in it is the Home icon. Both still show in the expanded/peek rail.
   ══════════════════════════════════════════════════════════════════════ */
html body.ap-vertical-shell .tabs.ap-nav-collapsed:not(.ap-nav-peek) .ap-sidebar-brand,
html body.ap-vertical-shell .tabs.ap-nav-collapsed:not(.ap-nav-peek) .ap-cmd-trigger {
  display: none !important;
}

/* ══════════════════════════════════════════════════════════════════════
   SLEEP STATE — the rail idles to a slimmer bar
   `.ap-nav-sleep` is toggled by the shell JS 1s after the rail is left
   untouched while collapsed. Hover peeks it open; leaving re-sleeps it.
   Strong, springy motion on width / padding / icon sizing.
   ══════════════════════════════════════════════════════════════════════ */

/* Punchy spring on the collapse ⇄ sleep width change */
html body.ap-vertical-shell .tabs.ap-nav-collapsed:not(.ap-nav-peek) {
  transition:
    width .52s cubic-bezier(.34, 1.56, .44, 1),
    padding .52s cubic-bezier(.34, 1.56, .44, 1),
    border-radius .46s cubic-bezier(.19, 1, .22, 1) !important;
}

/* Every NON-sleep state keeps its normal top/bottom anchoring — no transform */
html body.ap-vertical-shell .tabs,
html body.ap-vertical-shell .tabs.ap-nav-peek,
html body.ap-vertical-shell .tabs.ap-nav-collapsed:not(.ap-nav-sleep):not(.ap-nav-peek) {
  transform: none !important;
}

/* ── SLEEP ── a calm mini-capsule: vertically centered, short, dimmed,
   showing only a few icons (one per group + the active one). */
html body.ap-vertical-shell .tabs.ap-nav-collapsed.ap-nav-sleep:not(.ap-nav-peek) {
  width: 54px !important;
  top: 50% !important;
  bottom: auto !important;
  height: auto !important;
  max-height: 82vh !important;
  transform: translateY(-50%) !important;
  padding: 12px 6px !important;
  border-radius: 24px !important;
  justify-content: center !important;
  /* calmer, faded surface */
  background: rgba(255, 255, 255, .72) !important;
  border-color: rgba(232, 236, 239, .68) !important;
  box-shadow: 0 18px 46px rgba(26, 29, 33, .07) !important;
  transition:
    width .5s cubic-bezier(.34, 1.56, .44, 1),
    top .52s cubic-bezier(.19, 1, .22, 1),
    transform .52s cubic-bezier(.19, 1, .22, 1),
    padding .5s cubic-bezier(.34, 1.56, .44, 1),
    border-radius .46s cubic-bezier(.19, 1, .22, 1),
    background .5s ease, box-shadow .5s ease !important;
}

/* nav hugs its content instead of stretching full height */
html body.ap-vertical-shell .tabs.ap-nav-collapsed.ap-nav-sleep:not(.ap-nav-peek) .ap-sidebar-nav {
  flex: 0 0 auto !important;
  gap: 8px !important;
  overflow: visible !important;
}

/* drop everything that adds height: footer, group dividers */
html body.ap-vertical-shell .tabs.ap-nav-collapsed.ap-nav-sleep:not(.ap-nav-peek) .ap-sidebar-foot,
html body.ap-vertical-shell .tabs.ap-nav-collapsed.ap-nav-sleep:not(.ap-nav-peek) .ap-sidebar-section {
  display: none !important;
}

/* show FEWER icons — first 7 visible tabs + active + settings (controlled by JS) */
html body.ap-vertical-shell .tabs.ap-nav-collapsed.ap-nav-sleep:not(.ap-nav-peek) .ap-sidebar-nav .tab {
  display: none !important;
}

html body.ap-vertical-shell .tabs.ap-nav-collapsed.ap-nav-sleep:not(.ap-nav-peek) .ap-sidebar-nav .tab[data-sleep-lead],
html body.ap-vertical-shell .tabs.ap-nav-collapsed.ap-nav-sleep:not(.ap-nav-peek) .ap-sidebar-nav .tab.active {
  display: grid !important;
  flex: 0 0 36px !important;
  width: 36px !important;
  max-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  transition:
    width .5s cubic-bezier(.34, 1.56, .44, 1),
    height .5s cubic-bezier(.34, 1.56, .44, 1) !important;
}

/* settings shortcut in sleep mode — same size as tab icons */
html body.ap-vertical-shell .tabs.ap-nav-collapsed.ap-nav-sleep:not(.ap-nav-peek) .ap-settings-shortcut {
  display: grid !important;
  flex: 0 0 36px !important;
  width: 36px !important;
  max-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  order: 9999 !important;
  transition:
    width .5s cubic-bezier(.34, 1.56, .44, 1),
    height .5s cubic-bezier(.34, 1.56, .44, 1) !important;
}

/* settings icon in sleep — same faded look and size as others */
html body.ap-vertical-shell .tabs.ap-nav-collapsed.ap-nav-sleep:not(.ap-nav-peek) .ap-settings-shortcut svg,
html body.ap-vertical-shell .tabs.ap-nav-collapsed.ap-nav-sleep:not(.ap-nav-peek) .ap-settings-shortcut svg * {
  color: #9AA0A6 !important;
  stroke: #9AA0A6 !important;
  opacity: .85 !important;
}

html body.ap-vertical-shell .tabs.ap-nav-collapsed.ap-nav-sleep:not(.ap-nav-peek) .ap-settings-shortcut svg {
  width: 24px !important;
  height: 24px !important;
}

/* smaller icons for the quiet state */
html body.ap-vertical-shell .tabs.ap-nav-collapsed.ap-nav-sleep:not(.ap-nav-peek) .ap-tab-icon {
  width: 24px !important;
  height: 24px !important;
}

/* Everything in sleep is faded the same — including the active icon.
   The active tab also drops its highlight tint so it matches its siblings. */
html body.ap-vertical-shell .tabs.ap-nav-collapsed.ap-nav-sleep:not(.ap-nav-peek) .tab.active {
  background: transparent !important;
  box-shadow: none !important;
}

html body.ap-vertical-shell .tabs.ap-nav-collapsed.ap-nav-sleep:not(.ap-nav-peek) .tab .ap-tab-icon,
html body.ap-vertical-shell .tabs.ap-nav-collapsed.ap-nav-sleep:not(.ap-nav-peek) .tab .ap-tab-icon svg,
html body.ap-vertical-shell .tabs.ap-nav-collapsed.ap-nav-sleep:not(.ap-nav-peek) .tab .ap-tab-icon svg *,
html body.ap-vertical-shell .tabs.ap-nav-collapsed.ap-nav-sleep:not(.ap-nav-peek) .tab.active .ap-tab-icon,
html body.ap-vertical-shell .tabs.ap-nav-collapsed.ap-nav-sleep:not(.ap-nav-peek) .tab.active .ap-tab-icon svg,
html body.ap-vertical-shell .tabs.ap-nav-collapsed.ap-nav-sleep:not(.ap-nav-peek) .tab.active .ap-tab-icon svg * {
  color: #9AA0A6 !important;
  stroke: #9AA0A6 !important;
  opacity: .85 !important;
}

/* Sleep state: body expands to reclaim space around the 54px capsule */
html body.ap-vertical-shell .tabs.ap-nav-collapsed.ap-nav-sleep:not(.ap-nav-peek)~.body {
  padding: var(--app-content-top) 34px 54px 112px !important;
}

/* ══════════════════════════════════════════════════════════════════════
   BOOT — stable, no flicker
   Tabs register progressively over the deferred boot (~15s) and the
   MutationObserver re-appends them on each addition, which restarted the
   `apNavEnter` opacity animation every time → the rail blinked on/off for
   the whole boot. Drop the entrance animation outright: the rail simply
   appears and stays put.
   ══════════════════════════════════════════════════════════════════════ */
html body.ap-vertical-shell .tab,
html body.ap-vertical-shell .ap-sidebar-section,
html body.ap-vertical-shell.ap-nav-booting .tab,
html body.ap-vertical-shell.ap-nav-booting .ap-sidebar-section {
  animation: none !important;
  opacity: 1 !important;
}

/* ══════════════════════════════════════════════════════════════════════
   COLLAPSED (pre-sleep) rail — a touch shorter than full height
   Pull the top & bottom in so the 72px bar floats with clearer margins,
   without touching the sleep capsule (which anchors via top:50%).
   ══════════════════════════════════════════════════════════════════════ */
html body.ap-vertical-shell .tabs.ap-nav-collapsed:not(.ap-nav-peek):not(.ap-nav-sleep) {
  inset: 52px auto 52px 28px !important;
}

/* ══════════════════════════════════════════════════════════════════════
   HEADER — notifications are Home-only, search is global
   ══════════════════════════════════════════════════════════════════════ */
html body.ap-vertical-shell:not(.nx-on-home) .hdr-actions {
  display: none !important;
}

/* Header as an adaptive flex row instead of a fixed 3-column grid:
   logo (far left) → any per-tab toolbar buttons → search → notifications.
   Search is pushed right (margin-left:auto): it sits right after the tab
   buttons when they exist, otherwise starts from the far right. */
html body.ap-vertical-shell .hdr,
html body.ap-vertical-shell .hdr:not(.ap-nav-collapsed),
html body.ap-vertical-shell .hdr.ap-nav-peek,
html body.ap-vertical-shell .hdr.ap-nav-collapsed:not(.ap-nav-peek) {
  display: flex !important;
  grid-template-columns: none !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 12px !important;
}

html body.ap-vertical-shell .hdr .logo {
  order: 0 !important;
  flex: 0 0 auto !important;
}

/* per-tab header toolbars live just after the logo */
html body.ap-vertical-shell .hdr>.aipe-header-export,
html body.ap-vertical-shell .hdr>.aipe-mapping-header-download,
html body.ap-vertical-shell .hdr>.hbtns,
html body.ap-vertical-shell .hdr>.hist-header-export,
html body.ap-vertical-shell .hdr>.ai-pill,
html body.ap-vertical-shell .hdr>.api-st {
  order: 5 !important;
}

/* search: always visible, pushed to the right, left of notifications.
   Rests as a compact icon; expands to a full field on hover / focus. */
html body.ap-vertical-shell .hdr .hdr-search,
html body.ap-vertical-shell:not(.nx-on-home) .hdr .hdr-search {
  display: flex !important;
  order: 10 !important;
  flex: 0 0 var(--app-hdr-control) !important;
  width: var(--app-hdr-control) !important;
  min-width: var(--app-hdr-control) !important;
  max-width: var(--app-hdr-control) !important;
  height: var(--app-hdr-control) !important;
  margin-left: auto !important;
  padding: 0 !important;
  justify-content: center !important;
  cursor: text !important;
  border-radius: 12px !important;
  border: 1px solid var(--nx-border) !important;
  background: rgba(255, 255, 255, .70) !important;
  box-shadow: none !important;
  transition:
    flex-basis .34s cubic-bezier(.19, 1, .22, 1),
    width .34s cubic-bezier(.19, 1, .22, 1),
    min-width .34s cubic-bezier(.19, 1, .22, 1),
    max-width .34s cubic-bezier(.19, 1, .22, 1),
    padding .3s ease,
    border-color .2s ease, box-shadow .22s ease, background .2s ease !important;
}

/* search sits right AFTER the tab's toolbar buttons when they exist,
   otherwise it starts from the far right */
html body.ap-vertical-shell .hdr.nx-has-tools .hdr-search {
  margin-left: 16px !important;
}

html body.ap-vertical-shell .hdr:not(.nx-has-tools) .hdr-search {
  margin-left: auto !important;
}

html body.ap-vertical-shell .hdr .hdr-search:hover,
html body.ap-vertical-shell .hdr .hdr-search:focus-within {
  flex-basis: 320px !important;
  width: 320px !important;
  min-width: 320px !important;
  max-width: 320px !important;
  padding: 0 15px !important;
  justify-content: flex-start !important;
  background: #FFFFFF !important;
  box-shadow: 0 16px 38px rgba(26, 29, 33, .08) !important;
}

/* resting magnifier: muted; turns accent when the field opens */
html body.ap-vertical-shell .hdr-search svg {
  stroke: #6B7280 !important;
}

html body.ap-vertical-shell .hdr-search:hover svg,
html body.ap-vertical-shell .hdr-search:focus-within svg {
  stroke: var(--nx-accent, #24B47E) !important;
}

/* the input only shows once the field is open */
html body.ap-vertical-shell .hdr-search input {
  width: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  opacity: 0 !important;
  transition: opacity .2s ease, width .3s cubic-bezier(.19, 1, .22, 1) !important;
}

html body.ap-vertical-shell .hdr-search:hover input,
html body.ap-vertical-shell .hdr-search:focus-within input {
  width: 100% !important;
  opacity: 1 !important;
}

/* keep the magnifier from squashing */
html body.ap-vertical-shell .hdr-search svg {
  flex: 0 0 auto !important;
}

/* notifications: rightmost */
html body.ap-vertical-shell .hdr .hdr-actions {
  order: 20 !important;
  flex: 0 0 auto !important;
  margin-left: 0 !important;
}

/* notification icon — matches the resting search: clean, subtle, consistent */
html body.ap-vertical-shell .hdr-icon-btn {
  width: var(--app-hdr-control) !important;
  height: var(--app-hdr-control) !important;
  min-height: 0 !important;
  border-radius: 12px !important;
  border: 1px solid var(--nx-border) !important;
  background: rgba(255, 255, 255, .70) !important;
  box-shadow: none !important;
  color: #6B7280 !important;
  transition: background .18s ease, color .18s ease, border-color .18s ease !important;
}

html body.ap-vertical-shell .hdr-icon-btn:hover {
  background: #FFFFFF !important;
  color: var(--nx-accent, #24B47E) !important;
  border-color: rgba(36, 180, 126, .35) !important;
}

html body.ap-vertical-shell .hdr-icon-btn svg {
  width: 18px !important;
  height: 18px !important;
}

html body.ap-vertical-shell .hdr-notification-dot {
  top: 7px !important;
  right: 7px !important;
  width: 7px !important;
  height: 7px !important;
}

/* ── Focus polish for the search field ── */
html body.ap-vertical-shell .hdr-search {
  transition: border-color .2s ease, box-shadow .22s ease, background .2s ease !important;
}

html body.ap-vertical-shell .hdr-search:focus-within {
  background: #FFFFFF !important;
  border-color: var(--nx-accent, #24B47E) !important;
  box-shadow: 0 0 0 4px rgba(36, 180, 126, .14), 0 16px 38px rgba(26, 29, 33, .08) !important;
}

html body.ap-vertical-shell .hdr-search:focus-within svg {
  stroke: var(--nx-accent, #24B47E) !important;
}

html body.ap-vertical-shell .hdr-search input {
  caret-color: var(--nx-accent, #24B47E) !important;
}

html body.ap-vertical-shell .hdr-search input::selection {
  background: rgba(36, 180, 126, .22);
}

html body.ap-vertical-shell .hdr-search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

/* ══════════════════════════════════════════════════════════════════════
   HEADER SEARCH — live results dropdown
   ══════════════════════════════════════════════════════════════════════ */
html body.ap-vertical-shell .hdr-search {
  position: relative !important;
}

html body.ap-vertical-shell .hdr-search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 400;
  max-height: min(60vh, 460px);
  overflow-y: auto;
  padding: 6px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .98);
  border: 1px solid var(--nx-border, #E8ECEF);
  box-shadow: 0 24px 60px rgba(26, 29, 33, .16);
  backdrop-filter: blur(20px);
  opacity: 0;
  transform: translateY(-6px) scale(.99);
  pointer-events: none;
  transition: opacity .16s ease, transform .2s cubic-bezier(.19, 1, .22, 1);
  scrollbar-width: thin;
}

html body.ap-vertical-shell .hdr-search.hsr-open .hdr-search-results {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

html body.ap-vertical-shell .hsr-group {
  padding: 8px 12px 4px;
  font: 800 9.5px/1 'DM Sans', system-ui, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--nx-muted, #72777E);
}

html body.ap-vertical-shell .hsr-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--nx-text, #1A1D21);
  font: 600 13.5px/1.2 'DM Sans', system-ui, sans-serif;
  text-align: left;
  cursor: pointer;
  transition: background .13s ease;
}

html body.ap-vertical-shell .hsr-item:hover,
html body.ap-vertical-shell .hsr-item.hsr-item--active {
  background: var(--nx-sidebar-active, #DDF4ED);
}

html body.ap-vertical-shell .hsr-ico {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--nx-surface-2, #F7F8F9);
  color: var(--nx-accent, #24B47E);
}

html body.ap-vertical-shell .hsr-ico svg {
  width: 16px;
  height: 16px;
}

html body.ap-vertical-shell .hsr-ico--dot {
  background: transparent;
}

html body.ap-vertical-shell .hsr-ico--dot::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--nx-accent, #24B47E);
}

html body.ap-vertical-shell .hsr-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body.ap-vertical-shell .hsr-label mark {
  background: rgba(36, 180, 126, .20);
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
}

html body.ap-vertical-shell .hsr-kind {
  flex: 0 0 auto;
  font: 700 10px/1 'DM Sans', system-ui, sans-serif;
  letter-spacing: .04em;
  color: var(--nx-muted, #72777E);
  opacity: 0;
  transition: opacity .13s ease;
}

html body.ap-vertical-shell .hsr-item:hover .hsr-kind,
html body.ap-vertical-shell .hsr-item.hsr-item--active .hsr-kind {
  opacity: 1;
}

html body.ap-vertical-shell .hsr-empty {
  padding: 16px 14px;
  font: 600 13px/1.3 'DM Sans', system-ui, sans-serif;
  color: var(--nx-muted, #72777E);
  text-align: center;
}

/* flash target when jumping to an in-page match */
.hsr-flash {
  animation: hsrFlash 2.2s ease !important;
  border-radius: 8px;
}

@keyframes hsrFlash {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(36, 180, 126, 0);
    background-color: transparent;
  }

  12% {
    box-shadow: 0 0 0 3px rgba(36, 180, 126, .55);
    background-color: rgba(36, 180, 126, .12);
  }

  70% {
    box-shadow: 0 0 0 3px rgba(36, 180, 126, .30);
    background-color: rgba(36, 180, 126, .08);
  }
}

/* =====================================================================
   Planning Overview dashboard (post-generate home). Self-contained.
   ===================================================================== */
.pv-shell {
  --pv-green: #24B47E;
  --pv-green-soft: #7FD8C5;
  --pv-green-2: #A7E8D6;
  --pv-crit: #F4746B;
  --pv-crit-soft: #FBB4AE;
  --pv-ms: #12314F;
  --pv-warn: #E5972A;
  --pv-ink: #1A1D21;
  --pv-mut: #6B7580;
  --pv-line: #E8ECEF;
  --pv-card-r: 20px;
  --pv-head-font: 'Plus Jakarta Sans', Inter, system-ui, -apple-system, sans-serif;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 1560px;
  margin: 0 auto;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: -0.01em;
  /* Slightly zoomed-out so the whole dashboard reads comfortably. Tune 0.85–1.0. */
  zoom: 0.9;
}

.pv-shell *,
.pv-shell *::before,
.pv-shell *::after {
  box-sizing: border-box;
}

.pv-hero-title,
.pv-card-head h3,
.pv-kpi>b,
.pv-donut-in b,
.pv-foot-stat b,
.pv-metric-val,
.pv-snap-row>b {
  font-family: var(--pv-head-font);
}

.pv-card {
  background: #FFFFFF !important;
  border: 1px solid var(--pv-line) !important;
  border-radius: var(--pv-card-r) !important;
  box-shadow: 0 12px 34px rgba(26, 29, 33, .055) !important;
  padding: 20px;
  min-width: 0;
}

.pv-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.pv-card-ic {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: #EAF7F1;
  color: var(--pv-green);
  flex-shrink: 0;
}

.pv-card-ic svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pv-card-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--pv-ink);
}

.pv-empty {
  padding: 22px 14px;
  border-radius: 12px;
  background: #F6F8F9;
  color: var(--pv-mut);
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
}

/* ---- HERO ---- */
.pv-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, .82fr);
  gap: 22px;
  align-items: center;
  padding: 28px 32px;
  border-radius: 24px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 130% at 100% 0%, rgba(127, 216, 197, .28), transparent 55%),
    linear-gradient(118deg, #E9F7F1 0%, #F2FBF8 52%, #EAF4FA 100%);
  border: 1px solid rgba(127, 216, 197, .4);
}

.pv-hero-title {
  margin: 0 0 10px;
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #14202A;
}

.pv-hero-meta {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  color: #4C6A63;
}

.pv-hero-desc {
  margin: 0 0 20px;
  max-width: 54ch;
  font-size: 14px;
  line-height: 1.6;
  color: #46555E;
}

.pv-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pv-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease;
}

.pv-btn svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pv-btn:hover {
  transform: translateY(-1px);
}

.pv-btn-primary {
  background: var(--pv-green);
  border-color: var(--pv-green);
  color: #FFFFFF;
  box-shadow: 0 12px 24px rgba(36, 180, 126, .28);
}

.pv-btn-primary:hover {
  background: #1EA372;
}

.pv-btn-ghost {
  background: rgba(255, 255, 255, .85);
  border-color: #D5E3DE;
  color: #24303A;
}

.pv-btn-ghost:hover {
  border-color: var(--pv-green-soft);
  background: #FFFFFF;
}

.pv-kpi-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  padding: 16px 10px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .74);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 10px 26px rgba(26, 29, 33, .06);
}

.pv-kpi {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 8px;
  min-width: 0;
  position: relative;
}

.pv-kpi:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 18%;
  bottom: 18%;
  width: 1px;
  background: var(--pv-line);
}

.pv-kpi-head {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--pv-mut);
  min-width: 0;
}

.pv-kpi-head svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--pv-green);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pv-kpi-head small {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.pv-kpi>b {
  font-size: clamp(22px, 1.8vw, 30px);
  font-weight: 800;
  color: var(--pv-ink);
  line-height: 1;
}

/* ---- 3-column rows ---- */
.pv-grid-3 {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.05fr) minmax(0, .78fr);
  gap: 16px;
  align-items: start;
}

/* ---- Project summary ---- */
.pv-summary-body {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}

.pv-summary-metrics {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pv-metric {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.pv-metric-ic {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: #F1F5F4;
  color: var(--pv-mut);
}

.pv-metric-ic svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pv-metric-lab {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--pv-mut);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pv-metric-val {
  font-size: 13px;
  font-weight: 800;
  color: var(--pv-ink);
  white-space: nowrap;
}

.pv-metric-val.is-good {
  color: var(--pv-green);
}

.pv-metric-val.is-warn {
  color: var(--pv-warn);
}

.pv-summary-metrics .pv-metric {
  grid-template-columns: 26px minmax(0, 1fr);
  grid-template-rows: auto auto;
  row-gap: 1px;
  align-items: center;
}

.pv-summary-metrics .pv-metric-ic {
  grid-row: 1 / span 2;
}

.pv-summary-metrics .pv-metric-lab {
  grid-column: 2;
  grid-row: 1;
  white-space: normal;
  line-height: 1.2;
}

.pv-summary-metrics .pv-metric-val {
  grid-column: 2;
  grid-row: 2;
  justify-self: start;
}

.pv-chart {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.pv-chart-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.pv-chart-title span {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--pv-ink);
  white-space: nowrap;
}

.pv-chart-title em {
  font-size: 11px;
  font-weight: 700;
  font-style: normal;
  color: var(--pv-green);
  white-space: nowrap;
}

.pv-chart-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.pv-chart-svg .pv-bar {
  fill: var(--pv-green-2);
}

.pv-chart-svg .pv-line {
  fill: none;
  stroke: var(--pv-green);
  stroke-width: 2;
}

.pv-chart-svg .pv-dot {
  fill: var(--pv-green);
}

.pv-chart-svg .pv-xlab {
  fill: #9098A2;
  font-size: 10px;
  font-weight: 600;
}

/* ---- Gantt chart summary ---- */
.pv-gantt-axis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-left: 108px;
  margin-bottom: 10px;
  font-size: 10.5px;
  font-weight: 700;
  color: #9098A2;
}

.pv-gantt-axis span:nth-child(2),
.pv-gantt-axis span:nth-child(3) {
  text-align: center;
}

.pv-gantt-axis span:last-child {
  text-align: right;
}

.pv-gantt-plot {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.pv-gantt-row {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 0;
  align-items: center;
}

.pv-gantt-lab {
  font-size: 11.5px;
  font-weight: 700;
  color: #55606B;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 10px;
}

.pv-gantt-track {
  position: relative;
  height: 13px;
  border-radius: 999px;
  background: #EFF2F4;
}

.pv-bar-seg {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--pv-green-soft), var(--pv-green));
}

.pv-bar-seg.is-critical {
  background: linear-gradient(90deg, var(--pv-crit-soft), var(--pv-crit));
}

.pv-ms {
  position: absolute;
  top: 50%;
  width: 11px;
  height: 11px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--pv-ms);
  border: 2px solid #FFFFFF;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}

.pv-gantt-today {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 2px;
  background: #8B6FE0;
  z-index: 2;
  pointer-events: none;
}

.pv-gantt-today span {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 800;
  color: #7358D6;
}

.pv-gantt-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 16px;
}

.pv-lg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--pv-mut);
}

.pv-lg::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.pv-lg-plan::before {
  background: var(--pv-green);
}

.pv-lg-crit::before {
  background: var(--pv-crit);
}

.pv-lg-ms::before {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  transform: rotate(45deg);
  background: var(--pv-ms);
}

.pv-gantt-foot {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--pv-line);
}

.pv-foot-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.pv-foot-stat small {
  font-size: 11px;
  font-weight: 600;
  color: var(--pv-mut);
}

.pv-foot-stat b {
  font-size: 13px;
  font-weight: 800;
  color: var(--pv-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Logic health ---- */
.pv-logic-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.pv-donut {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: conic-gradient(var(--pv-green) calc(var(--score, 0) * 1%), #E8ECEF 0);
}

.pv-donut-in {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #FFFFFF;
  display: grid;
  place-items: center;
  gap: 2px;
}

.pv-donut-in b {
  font-size: 27px;
  font-weight: 800;
  color: var(--pv-ink);
  line-height: 1;
}

.pv-donut-in small {
  font-size: 11px;
  font-weight: 700;
  color: var(--pv-green);
}

.pv-logic-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

/* ---- Quick access ---- */
.pv-quick-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.pv-quick {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 13px;
  background: #FFFFFF;
  border: 1px solid var(--pv-line);
  cursor: pointer;
  text-align: left;
  min-width: 0;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.pv-quick:hover {
  transform: translateY(-1px);
  border-color: var(--pv-green-soft);
  box-shadow: 0 8px 18px rgba(26, 29, 33, .06);
}

.pv-quick-ic {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #EAF7F1;
  color: var(--pv-green);
  flex-shrink: 0;
}

.pv-quick-ic svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pv-quick-txt {
  min-width: 0;
}

.pv-quick-txt b {
  display: block;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--pv-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pv-quick-txt small {
  font-size: 11px;
  color: var(--pv-mut);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

/* ---- Recommended actions ---- */
.pv-actions-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pv-action {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 20px;
  gap: 11px;
  align-items: center;
  padding: 11px 12px;
  border-radius: 13px;
  background: #FFFFFF;
  border: 1px solid var(--pv-line);
  cursor: pointer;
  text-align: left;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.pv-action:hover {
  transform: translateY(-1px);
  border-color: var(--pv-green-soft);
  box-shadow: 0 8px 18px rgba(26, 29, 33, .06);
}

.pv-action-ic {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: #EAF7F1;
  color: var(--pv-green);
}

.pv-action-ic svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pv-action-txt {
  min-width: 0;
}

.pv-action-txt b {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: var(--pv-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pv-action-txt small {
  font-size: 11.5px;
  color: var(--pv-mut);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.pv-action-go {
  color: var(--pv-green);
  display: grid;
  place-items: center;
}

.pv-action-go svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- Snapshot ---- */
.pv-snap-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pv-snap-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--pv-line);
}

.pv-snap-row:last-child {
  border-bottom: 0;
}

.pv-snap-row>span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--pv-mut);
}

.pv-snap-row>span svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: var(--pv-mut);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pv-snap-row>b {
  font-size: 13px;
  font-weight: 800;
  color: var(--pv-ink);
}

.pv-badge {
  padding: 4px 10px;
  border-radius: 999px;
  background: #EAF7F1;
  color: var(--pv-green);
  font-size: 11.5px;
}

.pv-snap-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 13px;
  background: #F6FAF8;
  border: 1px solid var(--pv-line);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--pv-ink);
  transition: border-color .16s ease, background-color .16s ease;
}

.pv-snap-link:hover {
  border-color: var(--pv-green-soft);
  background: #EFF8F4;
}

.pv-snap-link svg {
  width: 16px;
  height: 16px;
  color: var(--pv-green);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- Responsive ---- */
@media (max-width: 1200px) {
  .pv-grid-3 {
    grid-template-columns: 1fr;
  }

  .pv-hero {
    grid-template-columns: 1fr;
  }

  .pv-gantt-row {
    grid-template-columns: 80px minmax(0, 1fr);
  }

  .pv-gantt-axis {
    padding-left: 80px;
    font-size: clamp(8px, 1.8vw, 10.5px);
  }

  .pv-gantt-lab {
    font-size: clamp(9px, 2vw, 11.5px);
  }

  .pv-gantt-plot {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .pv-gantt-track {
    min-width: 400px;
  }
}

@media (max-width: 720px) {
  .pv-kpi-strip {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 14px;
  }

  .pv-kpi:nth-child(3)::after {
    display: none;
  }

  .pv-summary-body {
    grid-template-columns: 1fr;
  }

  .pv-gantt-foot {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 12px;
  }

  .pv-gantt-row {
    grid-template-columns: 60px minmax(0, 1fr);
  }

  .pv-gantt-axis {
    padding-left: 60px;
    font-size: clamp(7px, 1.6vw, 9px);
  }

  .pv-gantt-lab {
    font-size: clamp(8px, 1.8vw, 10px);
  }

  .pv-gantt-track {
    min-height: 20px;
  }

  .pv-ms {
    width: 14px;
    height: 14px;
  }
}

@media (max-width: 480px) {
  .pv-gantt-foot {
    grid-template-columns: 1fr;
  }

  .pv-gantt-legend {
    gap: 10px;
    font-size: 10px;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   MOBILE OVERRIDES — built into the theme so they don't rely on
   external files fighting specificity wars.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* ── Sidebar → full-height off-canvas drawer ── */
  body.ap-vertical-shell .tabs,
  body.ap-vertical-shell .tabs:not(.ap-nav-collapsed),
  body.ap-vertical-shell .tabs.ap-nav-peek {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: 290px !important;
    max-width: 86vw !important;
    height: 100% !important;
    border-radius: 0 !important;
    z-index: 1200 !important;
    transform: translateX(-110%) !important;
    transition: transform .3s cubic-bezier(.4, 0, .2, 1) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border: 0 !important;
    box-shadow: 18px 0 48px rgba(15, 27, 46, .16) !important;
    backdrop-filter: blur(22px) !important;
    gap: 0 !important;
    padding: 12px !important;
  }

  /* ── Header: full-width compact bar ── */
  .hdr,
  body.ap-vertical-shell .hdr,
  body.ap-vertical-shell .hdr:not(.ap-nav-collapsed),
  body.ap-vertical-shell .hdr.ap-nav-peek,
  body.ap-vertical-shell .hdr.ap-nav-collapsed:not(.ap-nav-peek) {
    position: fixed !important;
    top: var(--app-header-top) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: var(--app-header-height) !important;
    min-height: var(--app-header-height) !important;
    margin: 0 !important;
    padding: 0 12px 0 62px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    grid-template-columns: none !important;
    gap: 8px !important;
    transform: none !important;
    transition: none !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    z-index: 110 !important;
  }

  /* ── Body: full-width, no sidebar gutter ── */
  body.ap-vertical-shell::before {
    content: "" !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: var(--app-header-band) !important;
    z-index: 105 !important;
    background: #F8FAFA !important;
    border-bottom: 1px solid rgba(20, 60, 48, .06) !important;
    pointer-events: none !important;
  }

  /* ── Logo sizing ── */
  .hdr .logo,
  body.ap-vertical-shell .hdr .logo {
    min-width: 0 !important;
    max-width: 62vw !important;
    flex: 0 1 auto !important;
    overflow: hidden !important;
  }
  .hdr .logo-ico,
  body.ap-vertical-shell .hdr .logo-ico,
  body.ap-vertical-shell .hdr.ap-nav-collapsed:not(.ap-nav-peek) .logo-ico {
    width: var(--app-logo-w) !important;
    height: var(--app-logo-h) !important;
    min-width: 0 !important;
    max-width: var(--app-logo-w) !important;
    flex: 0 0 var(--app-logo-w) !important;
    background-size: contain !important;
    background-position: left center !important;
    background-repeat: no-repeat !important;
  }

  /* ── Header children ── */
  .hdr-search { display: none !important; }
  .hdr .logo > div:last-child { display: none !important; }
}
/* styles/tabs/00-59-activities-links-mobile.css */
/* ════════════════════════════════════════════════════════════════════════
   ACTIVITIES & RELATIONS (LINKS) — Mobile & Tablet Responsive
   Loaded last so it overrides the desktop-first layout.
   ── Breakpoints ──
   1024px  : tablet — compact table, hide secondary columns
   768px   : mobile — card-based layout, compact toolbars
   480px   : small phone — tighter spacing
   ════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════
   ACTIVITIES — TABLET (≤1024px): compact table
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  html body #tp-acts {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }

  html body #tp-acts .acts-toolbar {
    padding: 8px 14px !important;
    gap: 10px !important;
  }
  html body #tp-acts .acts-toolbar-hint {
    display: none !important;
  }
  html body #tp-acts .acts-recalc-btn {
    padding: 6px 12px !important;
    font-size: 11px !important;
  }
  html body #tp-acts .acts-toggle-label {
    font-size: 11px !important;
  }
  html body #tp-acts .acts-filter-bar {
    padding: 8px 14px !important;
    gap: 6px !important;
  }
  html body #tp-acts .acts-search-wrap {
    min-width: 140px !important;
    max-width: 240px !important;
  }
  html body #tp-acts .acts-count-badge {
    font-size: 10px !important;
    padding: 3px 8px !important;
  }
  html body #tp-acts .acts-filter-chip {
    padding: 5px 10px !important;
    font-size: 11px !important;
  }
  html body #tp-acts .acts-icon-btn {
    width: 30px !important;
    height: 30px !important;
  }

  html body #tp-acts .tbl-wrap {
    max-height: none !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }
  html body #tp-acts .acts-tbl {
    min-width: 0 !important;
    width: 100% !important;
    overflow: visible !important;
    border-radius: 0 !important;
    border: none !important;
  }
  html body #tp-acts .acts-tbl thead th {
    padding: 8px 8px !important;
    font-size: 8.5px !important;
    letter-spacing: .5px !important;
  }
  html body #tp-acts .acts-tbl td {
    padding: 7px 8px !important;
    font-size: 11px !important;
  }
  html body #tp-acts .act-cell {
    min-width: 120px !important;
    gap: 6px !important;
  }
  html body #tp-acts .act-cell-icon {
    width: 20px !important;
    height: 20px !important;
  }
  html body #tp-acts .act-cell-name {
    font-size: 11px !important;
  }
  html body #tp-acts .act-cell-type {
    font-size: 9px !important;
  }
  html body #tp-acts .type-badge {
    padding: 2px 7px !important;
    font-size: 9px !important;
  }
  html body #tp-acts .act-duration-bar-wrap {
    display: none !important;
  }
  html body #tp-acts .float-dot {
    display: none !important;
  }
  html body #tp-acts .act-critical-badge {
    font-size: 7px !important;
    padding: 1px 4px !important;
  }

  /* Hide less important columns */
  html body #tp-acts .acts-tbl thead th:nth-child(9),
  html body #tp-acts .acts-tbl thead th:nth-child(10),
  html body #tp-acts .acts-tbl thead th:nth-child(11),
  html body #tp-acts .acts-tbl thead th:nth-child(12),
  html body #tp-acts .acts-tbl thead th:nth-child(13),
  html body #tp-acts .acts-tbl tbody td:nth-child(9),
  html body #tp-acts .acts-tbl tbody td:nth-child(10),
  html body #tp-acts .acts-tbl tbody td:nth-child(11),
  html body #tp-acts .acts-tbl tbody td:nth-child(12),
  html body #tp-acts .acts-tbl tbody td:nth-child(13) {
    display: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   ACTIVITIES — MOBILE (≤768px): professional card-based layout
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  html body #tp-acts {
    overflow-x: hidden !important;
  }

  html body #tp-acts #actsOut {
    padding: 0 6px !important;
  }

  /* ── Reset ALL table chrome ── */
  html body #tp-acts .tbl-wrap {
    overflow: visible !important;
    max-height: none !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  html body #tp-acts .acts-tbl {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    border: none !important;
    border-radius: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: transparent !important;
    display: table !important;
  }

  /* ── Hide header ── */
  html body #tp-acts .acts-tbl thead {
    display: none !important;
  }

  /* ── tbody becomes the card container ── */
  html body #tp-acts .acts-tbl tbody {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }

  /* ── Each tr is a card ── */
  html body #tp-acts .acts-tbl tbody tr {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    grid-template-rows: auto auto auto !important;
    gap: 4px 8px !important;
    width: 100% !important;
    background: #FFFFFF !important;
    border: 1px solid #E8ECEF !important;
    border-radius: 14px !important;
    padding: 14px 16px !important;
    box-shadow: 0 12px 34px rgba(26,29,33,.055) !important;
    transition: box-shadow .2s, border-color .2s !important;
    position: relative !important;
    box-sizing: border-box !important;
  }
  html body #tp-acts .acts-tbl tbody tr.act-critical {
    border-left: 3px solid #F4746B !important;
  }
  html body #tp-acts .acts-tbl tbody tr.act-near-critical {
    border-left: 3px solid #E5972A !important;
  }
  html body #tp-acts .acts-tbl tbody tr:active {
    box-shadow: 0 4px 14px rgba(36,180,126,.13) !important;
    border-color: rgba(36,180,126,.3) !important;
  }
  html body #tp-acts .acts-tbl tbody tr:nth-child(even) {
    background: #FFFFFF !important;
  }
  html body #tp-acts .acts-tbl tbody tr:hover td {
    background: transparent !important;
  }

  /* ── Reset all tds to work as grid items inside the card ── */
  html body #tp-acts .acts-tbl tbody td {
    display: block !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    text-align: left !important;
    vertical-align: middle !important;
    line-height: normal !important;
    font-style: normal !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
    white-space: normal !important;
    text-indent: 0 !important;
  }

  /* ── ID badge (cell 1) — grid row 1, col 1 ── */
  html body #tp-acts .acts-tbl tbody td:nth-child(1) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    grid-row: 1 !important;
    grid-column: 1 !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    background: #24B47E !important;
    padding: 2px 8px !important;
    border-radius: 6px !important;
    height: 22px !important;
    align-self: start !important;
    white-space: nowrap !important;
    letter-spacing: .3px !important;
  }
  /* Critical ID badge in mobile */
  html body #tp-acts .acts-tbl tbody tr.act-critical td:nth-child(1) {
    background: #F4746B !important;
  }
  html body #tp-acts .acts-tbl tbody tr.act-near-critical td:nth-child(1) {
    background: #E5972A !important;
  }

  /* ── Activity name (cell 2) — grid row 1, col 2 ── */
  html body #tp-acts .acts-tbl tbody td:nth-child(2) {
    display: block !important;
    grid-row: 1 !important;
    grid-column: 2 !important;
  }
  html body #tp-acts .acts-tbl tbody td:nth-child(2) .act-cell {
    min-width: 0 !important;
    width: 100% !important;
    gap: 6px !important;
  }
  html body #tp-acts .acts-tbl tbody td:nth-child(2) .act-cell-icon {
    display: none !important;
  }
  html body #tp-acts .acts-tbl tbody td:nth-child(2) .act-cell-info {
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
  }
  html body #tp-acts .acts-tbl tbody td:nth-child(2) .act-cell-name {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1A1D21 !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  html body #tp-acts .acts-tbl tbody td:nth-child(2) .act-critical-badge {
    font-size: 8px !important;
    padding: 1px 5px !important;
    margin-left: 4px !important;
    color: #F4746B !important;
  }
  html body #tp-acts .acts-tbl tbody td:nth-child(2) .act-cell-type {
    display: inline-flex !important;
    font-size: 9px !important;
    color: #72777E !important;
    font-weight: 600 !important;
  }

  /* ── Type badge (cell 4) — grid row 2, col 1 ── */
  html body #tp-acts .acts-tbl tbody td:nth-child(4) {
    display: inline-flex !important;
    align-items: center !important;
    grid-row: 2 !important;
    grid-column: 1 !important;
  }
  html body #tp-acts .acts-tbl tbody td:nth-child(4) .type-badge {
    font-size: 9px !important;
    padding: 2px 8px !important;
    border-radius: 999px !important;
  }

  /* ── Duration (cell 5) — grid row 2, col 2 ── */
  html body #tp-acts .acts-tbl tbody td:nth-child(5) {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    grid-row: 2 !important;
    grid-column: 2 !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #E5972A !important;
  }
  html body #tp-acts .acts-tbl tbody td:nth-child(5) .act-duration-bar-wrap {
    display: none !important;
  }
  html body #tp-acts .acts-tbl tbody td:nth-child(5) .act-duration-milestone {
    font-size: 11px !important;
    color: #72777E !important;
  }
  html body #tp-acts .acts-tbl tbody td:nth-child(5)::before {
    content: "" !important;
    display: none !important;
  }

  /* ── Total Float (cell 8) — grid row 2, col 3 ── */
  html body #tp-acts .acts-tbl tbody td:nth-child(8) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    grid-row: 2 !important;
    grid-column: 3 !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    padding: 2px 10px !important;
    border-radius: 8px !important;
    background: rgba(0,0,0,.04) !important;
    height: 26px !important;
    align-self: center !important;
    justify-self: end !important;
    white-space: nowrap !important;
  }
  html body #tp-acts .acts-tbl tbody tr.act-critical td:nth-child(8) {
    color: #F4746B !important;
    background: rgba(244,116,107,.08) !important;
  }
  html body #tp-acts .acts-tbl tbody tr.act-near-critical td:nth-child(8) {
    color: #E5972A !important;
    background: rgba(229,151,42,.08) !important;
  }

  /* ── Dates row: ES → EF (cells 6, 7) — grid row 3, col 1/2/3 ── */
  html body #tp-acts .acts-tbl tbody td:nth-child(6),
  html body #tp-acts .acts-tbl tbody td:nth-child(7) {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 11px !important;
    color: #4D6E91 !important;
  }
  html body #tp-acts .acts-tbl tbody td:nth-child(6) {
    grid-row: 3 !important;
    grid-column: 1 !important;
  }
  html body #tp-acts .acts-tbl tbody td:nth-child(7) {
    grid-row: 3 !important;
    grid-column: 2 / 4 !important;
  }
  html body #tp-acts .acts-tbl tbody td:nth-child(6)::after {
    content: "  →  " !important;
    color: #D1D5DB !important;
    font-weight: 400 !important;
    white-space: pre !important;
  }
  html body #tp-acts .acts-tbl tbody td:nth-child(7)::before {
    content: "" !important;
    display: none !important;
  }

  /* ── WBS, Source Refs, Resource, Crews, Workers, Actions ── */
  html body #tp-acts .acts-tbl tbody td:nth-child(3),
  html body #tp-acts .acts-tbl tbody td:nth-child(9),
  html body #tp-acts .acts-tbl tbody td:nth-child(10),
  html body #tp-acts .acts-tbl tbody td:nth-child(11),
  html body #tp-acts .acts-tbl tbody td:nth-child(12),
  html body #tp-acts .acts-tbl tbody td:nth-child(13) {
    display: none !important;
  }

  /* ── Toolbar: single compact row ── */
  html body #tp-acts .acts-toolbar {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    scrollbar-width: none !important;
  }
  html body #tp-acts .acts-toolbar::-webkit-scrollbar { display: none !important; }
  html body #tp-acts .acts-toggle-label {
    font-size: 10px !important;
    white-space: nowrap !important;
  }
  html body #tp-acts .acts-recalc-btn {
    font-size: 10px !important;
    padding: 5px 10px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
  html body #tp-acts .acts-toolbar-hint {
    display: none !important;
  }

  /* ── Filter bar: scrollable chips + full-width search ── */
  html body #tp-acts .acts-filter-bar {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 8px 12px !important;
    gap: 6px !important;
    scrollbar-width: none !important;
  }
  html body #tp-acts .acts-filter-bar::-webkit-scrollbar { display: none !important; }
  html body #tp-acts .acts-filter-chip {
    flex-shrink: 0 !important;
    font-size: 10px !important;
    padding: 5px 9px !important;
  }
  html body #tp-acts .acts-count-badge {
    flex-shrink: 0 !important;
    font-size: 9px !important;
    padding: 3px 7px !important;
  }
  html body #tp-acts .acts-search-wrap {
    flex: 1 1 auto !important;
    min-width: 100px !important;
    max-width: none !important;
  }
  html body #tp-acts .acts-search {
    font-size: 11px !important;
    padding: 5px 10px 5px 28px !important;
  }
  html body #tp-acts .acts-search-icon {
    left: 8px !important;
    width: 12px !important;
    height: 12px !important;
  }
  html body #tp-acts .acts-icon-btn {
    width: 30px !important;
    height: 30px !important;
    flex-shrink: 0 !important;
  }

  /* ── Empty state ── */
  html body #tp-acts .empty {
    padding: 40px 16px !important;
  }
  html body #tp-acts .empty-icon {
    font-size: 32px !important;
  }
  html body #tp-acts .empty-t {
    font-size: 13px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   ACTIVITIES — SMALL PHONE (≤480px): tighter cards
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  html body #tp-acts .acts-tbl tbody tr {
    padding: 12px 14px !important;
    border-radius: 12px !important;
    gap: 3px 6px !important;
  }
  html body #tp-acts .acts-tbl tbody td:nth-child(2) .act-cell-name {
    font-size: 14px !important;
  }
  html body #tp-acts .acts-tbl tbody td:nth-child(1) {
    font-size: 9px !important;
    padding: 1px 6px !important;
    height: 20px !important;
  }
  html body #tp-acts .acts-tbl tbody td:nth-child(5),
  html body #tp-acts .acts-tbl tbody td:nth-child(8) {
    font-size: 11px !important;
  }
  html body #tp-acts .acts-tbl tbody td:nth-child(6),
  html body #tp-acts .acts-tbl tbody td:nth-child(7) {
    font-size: 10px !important;
  }
  html body #tp-acts .acts-toolbar {
    padding: 6px 10px !important;
    gap: 6px !important;
  }
  html body #tp-acts .acts-filter-bar {
    padding: 6px 10px !important;
    gap: 4px !important;
  }
  html body #tp-acts .acts-search-wrap {
    min-width: 80px !important;
  }
  html body #tp-acts .acts-search {
    font-size: 10px !important;
    padding: 4px 8px 4px 24px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   RELATIONS (LINKS) — TABLET (≤1024px): compact stats + table
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  html body #tp-links {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }

  html body #tp-links > .lk-page-hdr {
    padding: 14px 18px !important;
    gap: 10px !important;
  }
  html body #tp-links > .lk-page-hdr .lk-page-title {
    font-size: 20px !important;
  }
  html body #tp-links > .lk-page-hdr .lk-page-sub {
    font-size: 10.5px !important;
  }
  html body #tp-links > .lk-page-hdr .lk-nqa-btn {
    padding: 6px 12px !important;
    font-size: 11px !important;
  }
  html body #tp-links > .lk-page-hdr .lk-page-hdr-icon {
    width: 38px !important;
    height: 38px !important;
  }

  /* Stats: 4-column grid */
  html body #tp-links #linksOut .lk-stats {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 10px !important;
    padding: 12px 18px !important;
  }
  html body #tp-links #linksOut .lk-stat .sv {
    font-size: 18px !important;
  }
  html body #tp-links #linksOut .lk-stat .sl {
    font-size: 8px !important;
    letter-spacing: .5px !important;
  }
  html body #tp-links #linksOut .lk-actions {
    grid-column: 1 / -1 !important;
    margin-left: 0 !important;
    justify-content: flex-start !important;
  }
  html body #tp-links #linksOut .lk-copy-btn {
    padding: 5px 10px !important;
    font-size: 10px !important;
  }
  html body #tp-links #linksOut .lk-copy-status {
    font-size: 9px !important;
    min-width: 0 !important;
  }

  /* Coverage block: horizontal on tablet */
  html body #tp-links #linksOut .lk-coverage-block {
    padding: 12px 16px !important;
    margin: 10px 12px !important;
  }
  html body #tp-links #linksOut .lk-coverage-stats {
    gap: 16px !important;
  }
  html body #tp-links #linksOut .lk-cov-stat .cv {
    font-size: 18px !important;
  }
  html body #tp-links #linksOut .lk-cov-stat .cl {
    font-size: 8px !important;
  }

  /* Table: compact */
  html body #tp-links #linksOut .lk-tbl-wrap {
    max-height: none !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
  }
  html body #tp-links #linksOut .lk-tbl {
    min-width: 0 !important;
    width: 100% !important;
    border-radius: 0 !important;
    border: none !important;
  }
  html body #tp-links #linksOut .lk-tbl thead th {
    padding: 8px 8px !important;
    font-size: 8px !important;
    letter-spacing: .6px !important;
  }
  html body #tp-links #linksOut .lk-tbl td {
    padding: 6px 8px !important;
    font-size: 10.5px !important;
  }

  /* Hide less important columns: #, Source Logic, Reasoning, Action */
  html body #tp-links #linksOut .lk-tbl thead th:nth-child(1),
  html body #tp-links #linksOut .lk-tbl thead th:nth-child(9),
  html body #tp-links #linksOut .lk-tbl thead th:nth-child(10),
  html body #tp-links #linksOut .lk-tbl thead th:nth-child(11),
  html body #tp-links #linksOut .lk-tbl tbody td:nth-child(1),
  html body #tp-links #linksOut .lk-tbl tbody td:nth-child(9),
  html body #tp-links #linksOut .lk-tbl tbody td:nth-child(10),
  html body #tp-links #linksOut .lk-tbl tbody td:nth-child(11) {
    display: none !important;
  }

  /* Impact panel: stack vertically */
  html body #tp-links #linksOut .lk-impact-body {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 10px 14px !important;
  }
  html body #tp-links #linksOut .lk-impact-hdr {
    padding: 8px 14px !important;
    font-size: 10px !important;
    gap: 6px !important;
  }
  html body #tp-links #linksOut .lk-del-btn {
    padding: 4px 8px !important;
    font-size: 10px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   RELATIONS (LINKS) — MOBILE (≤768px): professional card layout
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  html body #tp-links {
    overflow-x: hidden !important;
  }

  html body #tp-links #linksOut {
    padding: 0 6px !important;
  }

  /* ── Page header: compact ── */
  html body #tp-links > .lk-page-hdr {
    padding: 12px 14px !important;
    border-radius: 14px !important;
    margin: 0 0 10px !important;
    min-height: 0 !important;
  }
  html body #tp-links > .lk-page-hdr .lk-page-title {
    font-size: 18px !important;
  }
  html body #tp-links > .lk-page-hdr .lk-page-sub {
    font-size: 10px !important;
  }
  html body #tp-links > .lk-page-hdr .lk-page-hdr-icon {
    width: 34px !important;
    height: 34px !important;
  }
  html body #tp-links > .lk-page-hdr .lk-page-hdr-icon svg {
    width: 18px !important;
    height: 18px !important;
  }
  html body #tp-links > .lk-page-hdr .lk-nqa-btn {
    padding: 5px 10px !important;
    font-size: 10px !important;
    gap: 5px !important;
  }
  html body #tp-links > .lk-page-hdr .lk-nqa-dot {
    display: none !important;
  }

  /* ── Stats: 2-column grid ── */
  html body #tp-links #linksOut .lk-stats {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    padding: 10px 14px !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    margin: 0 0 10px !important;
  }
  html body #tp-links #linksOut .lk-stat {
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    background: #FFFFFF !important;
    border: 1px solid #E8ECEF !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,.04) !important;
  }
  html body #tp-links #linksOut .lk-stat::before {
    display: none !important;
  }
  html body #tp-links #linksOut .lk-stat .sv {
    grid-column: auto !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #1B1A17 !important;
  }
  html body #tp-links #linksOut .lk-stat .sl {
    grid-column: auto !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    color: #9CA3AF !important;
    text-transform: uppercase !important;
    letter-spacing: .5px !important;
  }
  html body #tp-links #linksOut .lk-stat .sl::after {
    display: none !important;
  }
  html body #tp-links #linksOut .lk-stat:nth-of-type(6),
  html body #tp-links #linksOut .lk-stat:nth-of-type(7) {
    display: flex !important;
  }

  html body #tp-links #linksOut .lk-actions {
    flex-wrap: wrap !important;
    gap: 6px !important;
    grid-column: 1 / -1 !important;
    margin-left: 0 !important;
    justify-content: stretch !important;
  }
  html body #tp-links #linksOut .lk-copy-btn {
    flex: 1 1 auto !important;
    justify-content: center !important;
    font-size: 10px !important;
    padding: 7px 10px !important;
  }
  html body #tp-links #linksOut .lk-copy-status {
    width: 100% !important;
    text-align: center !important;
    font-size: 9px !important;
  }

  /* ── Coverage block: stacked card ── */
  html body #tp-links #linksOut .lk-coverage-block {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 16px !important;
    margin: 0 0 10px !important;
    gap: 14px !important;
    background: #FFFFFF !important;
    border: 1px solid #E8ECEF !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.04) !important;
  }
  html body #tp-links #linksOut .lk-coverage-stats {
    justify-content: center !important;
    gap: 24px !important;
  }
  html body #tp-links #linksOut .lk-cov-stat {
    align-items: center !important;
  }

  /* ── Hide table header ── */
  html body #tp-links #linksOut .lk-tbl thead {
    display: none !important;
  }

  /* ── Reset table chrome ── */
  html body #tp-links #linksOut .lk-tbl-wrap {
    overflow: visible !important;
    max-height: none !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  html body #tp-links #linksOut .lk-tbl {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  /* ── tbody as flex column ── */
  html body #tp-links #linksOut .lk-tbl tbody {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }

  /* ── Each tr as card ── */
  html body #tp-links #linksOut .lk-tbl tbody tr {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 2px !important;
    width: 100% !important;
    background: #FFFFFF !important;
    border: 1px solid #E8ECEF !important;
    border-radius: 14px !important;
    padding: 14px 16px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.05) !important;
    cursor: pointer !important;
    transition: box-shadow .2s, border-color .2s !important;
    box-sizing: border-box !important;
  }
  html body #tp-links #linksOut .lk-tbl tbody tr:nth-child(even) {
    background: #FFFFFF !important;
  }
  html body #tp-links #linksOut .lk-tbl tbody tr:hover td {
    background: transparent !important;
  }
  html body #tp-links #linksOut .lk-tbl tbody tr.lk-selected {
    border-color: rgba(59,130,246,.4) !important;
    box-shadow: 0 4px 14px rgba(59,130,246,.13) !important;
  }
  html body #tp-links #linksOut .lk-tbl tbody tr:active {
    box-shadow: 0 4px 14px rgba(59,130,246,.13) !important;
    border-color: rgba(59,130,246,.3) !important;
  }

  /* ── Reset all tds to work as grid items inside the card ── */
  html body #tp-links #linksOut .lk-tbl tbody td {
    display: block !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    text-align: left !important;
    vertical-align: middle !important;
    line-height: normal !important;
    font-style: normal !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
    white-space: normal !important;
    text-indent: 0 !important;
  }

  /* ── Line 1: Pred ID  →  Succ ID ── */
  html body #tp-links #linksOut .lk-tbl tbody td:nth-child(2),
  html body #tp-links #linksOut .lk-tbl tbody td:nth-child(6) {
    display: inline !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;
  }
  html body #tp-links #linksOut .lk-tbl tbody td:nth-child(2) {
    color: #3B82F6 !important;
  }
  html body #tp-links #linksOut .lk-tbl tbody td:nth-child(2)::after {
    content: "  →  " !important;
    color: #9CA3AF !important;
    font-weight: 400 !important;
    white-space: pre !important;
  }
  html body #tp-links #linksOut .lk-tbl tbody td:nth-child(6) {
    color: #10B981 !important;
  }
  html body #tp-links #linksOut .lk-tbl tbody td:nth-child(6)::after {
    content: "" !important;
    display: block !important;
  }

  /* ── Line 2: Pred Name  →  Succ Name ── */
  html body #tp-links #linksOut .lk-tbl tbody td:nth-child(3),
  html body #tp-links #linksOut .lk-tbl tbody td:nth-child(7) {
    display: inline !important;
    font-size: 12px !important;
    color: #6B7280 !important;
    line-height: 1.3 !important;
  }
  html body #tp-links #linksOut .lk-tbl tbody td:nth-child(3)::after {
    content: "  →  " !important;
    color: #D1D5DB !important;
    white-space: pre !important;
  }
  html body #tp-links #linksOut .lk-tbl tbody td:nth-child(7)::after {
    content: "" !important;
    display: block !important;
  }

  /* ── Line 3: Type + Lag + Confidence ── */
  html body #tp-links #linksOut .lk-tbl tbody td:nth-child(4),
  html body #tp-links #linksOut .lk-tbl tbody td:nth-child(5),
  html body #tp-links #linksOut .lk-tbl tbody td:nth-child(8) {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin-top: 4px !important;
  }
  html body #tp-links #linksOut .lk-tbl tbody td:nth-child(4) { margin-right: 8px !important; }
  html body #tp-links #linksOut .lk-tbl tbody td:nth-child(5) { margin-right: 8px !important; }
  html body #tp-links #linksOut .lk-tbl tbody td:nth-child(4) .lt {
    font-size: 10px !important;
    padding: 3px 10px !important;
    border-radius: 999px !important;
  }
  html body #tp-links #linksOut .lk-tbl tbody td:nth-child(5) {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #D97706 !important;
  }

  /* ── Hide remaining ── */
  html body #tp-links #linksOut .lk-tbl tbody td:nth-child(1),
  html body #tp-links #linksOut .lk-tbl tbody td:nth-child(9),
  html body #tp-links #linksOut .lk-tbl tbody td:nth-child(10),
  html body #tp-links #linksOut .lk-tbl tbody td:nth-child(11) {
    display: none !important;
  }

  /* ── Impact panel: full width ── */
  html body #tp-links #linksOut .lk-impact {
    margin-top: 8px !important;
    border-radius: 12px !important;
  }
  html body #tp-links #linksOut .lk-impact-body {
    grid-template-columns: 1fr !important;
    padding: 12px !important;
    gap: 8px !important;
  }
  html body #tp-links #linksOut .lk-impact-hdr {
    padding: 10px 12px !important;
    font-size: 10px !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  html body #tp-links #linksOut .lk-del-btn {
    margin-left: 0 !important;
    padding: 5px 10px !important;
    font-size: 10px !important;
  }
  html body #tp-links #linksOut .lk-gantt-hint {
    font-size: 10px !important;
    padding: 8px 12px !important;
  }
  html body #tp-links #linksOut .lk-act-card {
    padding: 10px 12px !important;
  }
  html body #tp-links #linksOut .lk-act-name {
    font-size: 11px !important;
  }
  html body #tp-links #linksOut .lk-act-dates {
    font-size: 9px !important;
    gap: 6px !important;
  }

  /* ── Empty state ── */
  html body #tp-links #linksOut .empty {
    padding: 40px 16px !important;
  }
  html body #tp-links #linksOut .empty-icon {
    font-size: 32px !important;
  }
  html body #tp-links #linksOut .empty-t {
    font-size: 13px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   RELATIONS (LINKS) — SMALL PHONE (≤480px): tighter cards
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  html body #tp-links > .lk-page-hdr {
    padding: 10px 12px !important;
    border-radius: 12px !important;
  }
  html body #tp-links > .lk-page-hdr .lk-page-title {
    font-size: 16px !important;
  }
  html body #tp-links > .lk-page-hdr .lk-page-hdr-icon {
    width: 30px !important;
    height: 30px !important;
  }
  html body #tp-links > .lk-page-hdr .lk-page-hdr-icon svg {
    width: 16px !important;
    height: 16px !important;
  }
  html body #tp-links #linksOut .lk-stats {
    padding: 8px 12px !important;
    gap: 6px !important;
  }
  html body #tp-links #linksOut .lk-stat {
    padding: 10px 12px !important;
  }
  html body #tp-links #linksOut .lk-stat .sv {
    font-size: 18px !important;
  }
  html body #tp-links #linksOut .lk-tbl tbody tr {
    padding: 12px 14px !important;
    border-radius: 12px !important;
  }
  html body #tp-links #linksOut .lk-tbl tbody td:nth-child(2),
  html body #tp-links #linksOut .lk-tbl tbody td:nth-child(6) {
    font-size: 12px !important;
  }
  html body #tp-links #linksOut .lk-tbl tbody td:nth-child(3),
  html body #tp-links #linksOut .lk-tbl tbody td:nth-child(7) {
    font-size: 11px !important;
  }
  html body #tp-links #linksOut .lk-coverage-block {
    padding: 14px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   TOUCH DEVICES — kill hover-only affordances
   ════════════════════════════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
  html body #tp-acts .acts-tbl tbody tr:hover td {
    background: transparent !important;
  }
  html body #tp-acts .acts-row-action {
    opacity: 1 !important;
  }
  html body #tp-links #linksOut .lk-tbl tbody tr:hover td {
    background: transparent !important;
  }
}

/* styles/tabs/dinput-redesign.css */
/* ════════════════════════════════════════════════════════════════════════
   DATA INPUT — "SETUP CONSOLE"  (v6, fully new UI)
   Sticky cockpit rail (live readiness ring + step nav + Generate) beside a
   single scrolling work area of full-width panels. Mint/white/green theme to
   match the Dashboard. Loads LAST; scoped to #tp-input. All functional IDs
   from 998-data-input-runtime.js are preserved.
   ════════════════════════════════════════════════════════════════════════ */

#tp-input {
  --ic-green:#24B47E; --ic-green-d:#1EA372; --ic-green-soft:#7FD8C5;
  --ic-tint:#EAF7F1; --ic-ink:#14202A; --ic-ink-2:#1A1D21; --ic-mut:#6B7580;
  --ic-line:#E8ECEF; --ic-card:#FFFFFF; --ic-wash:#F6FAF8;
  /* retheme injected Zones/Levels plan card (uses these fallback vars) */
  --bl:#24B47E; --am:#24B47E; --p:#FFFFFF; --p2:#EAF7F1;
  --st:#E8ECEF; --tx:#1A1D21; --st-tx:#6B7580; --r3:12px;
  color:var(--ic-ink-2) !important;
  font-family:Inter,'Plus Jakarta Sans',system-ui,-apple-system,"Segoe UI",sans-serif !important;
  letter-spacing:-.01em;
}
#tp-input.tp { padding:2px 2px 40px !important; background:transparent !important; }

/* ─── SHELL ────────────────────────────────────────────────────────────── */
#tp-input .ic-shell {
  display:grid; grid-template-columns:288px minmax(0,1fr) 288px; gap:20px;
  max-width:1600px; margin:0 auto; align-items:start;
}
#tp-input .ic-shell *, #tp-input .ic-shell *::before, #tp-input .ic-shell *::after { box-sizing:border-box; }
@media (max-width:1280px){ #tp-input .ic-shell { grid-template-columns:270px minmax(0,1fr); } #tp-input .ic-side { grid-column:1 / -1; } }
@media (max-width:1080px){ #tp-input .ic-shell { grid-template-columns:1fr; } }

/* Wide screens: the tab gets its OWN scroll — only the middle column scrolls,
   so the left rail and right section stay truly fixed. (Works around .app's
   overflow-x:hidden, which turns it into a scroll container and breaks
   position:sticky while the window is what actually scrolls.) */
@media (min-width:1281px){
  #tp-input.tp { padding-bottom:8px !important; }
  #tp-input .ic-shell { height:calc(100vh - var(--app-content-top) - 26px); }
  #tp-input .ic-body { height:100%; overflow-y:auto; overflow-x:hidden; padding-right:6px; }
  #tp-input .ic-rail, #tp-input .ic-side { max-height:100%; overflow:auto; }
}

/* ─── COCKPIT RAIL ─────────────────────────────────────────────────────── */
#tp-input .ic-rail {
  align-self:start;
  display:flex; flex-direction:column; gap:16px;
  padding:20px; border-radius:24px;
  background:var(--ic-card);
  border:1px solid var(--ic-line);
  box-shadow:0 12px 34px rgba(26,29,33,.055);
  animation:icUp .5s cubic-bezier(.22,.61,.36,1) both;
}

#tp-input .ic-rail-brand { display:flex; align-items:center; gap:11px; }
#tp-input .ic-rail-mark {
  width:40px; height:40px; border-radius:13px; display:grid; place-items:center; flex:0 0 40px;
  background:linear-gradient(160deg,#24B47E,#1EA372); color:#fff;
  box-shadow:0 8px 18px rgba(36,180,126,.32), inset 0 1px 0 rgba(255,255,255,.3);
}
#tp-input .ic-rail-mark svg { width:20px; height:20px; }
#tp-input .ic-rail-titles { display:flex; flex-direction:column; line-height:1.2; }
#tp-input .ic-rail-titles b { font-family:'Plus Jakarta Sans',Inter,sans-serif; font-size:16px; font-weight:800; color:var(--ic-ink); }
#tp-input .ic-rail-titles small { font-size:11px; font-weight:600; color:var(--ic-mut); }

/* readiness ring block */
#tp-input .ic-rail-ring {
  display:flex; align-items:center; gap:13px; padding:14px;
  border-radius:16px; background:var(--ic-wash); border:1px solid var(--ic-line);
}
#tp-input .dinput-ready-ring { position:relative; width:60px; height:60px; flex:0 0 60px; }
#tp-input .dinput-ready-ring svg { width:100%; height:100%; }
#tp-input .dinput-ring-bg { stroke:#DCEDE6 !important; }
#tp-input .dinput-ring-fg { stroke:var(--ic-green) !important; transition:stroke-dasharray .6s cubic-bezier(.19,1,.22,1); }
#tp-input .dinput-ring-pct { position:absolute; inset:0; display:grid; place-items:center; font-size:14px; font-weight:800; color:var(--ic-ink) !important; font-variant-numeric:tabular-nums; font-family:'Plus Jakarta Sans',Inter,sans-serif; }
#tp-input .ic-rail-ring-meta { min-width:0; }
#tp-input .ic-rail-ring-meta small { display:block; font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ic-green) !important; margin-bottom:3px; }
#tp-input .ic-rail-ring-meta b { font-size:12px; font-weight:700; line-height:1.35; color:#2B3640 !important; }

/* step nav */
#tp-input .ic-steps { display:flex; flex-direction:column; gap:6px; }
#tp-input .ic-step {
  display:grid; grid-template-columns:36px minmax(0,1fr) 16px; align-items:center; gap:11px;
  padding:11px 12px; border-radius:14px; border:1px solid transparent; background:transparent;
  font:inherit; text-align:left; cursor:pointer; width:100%;
  transition:background .16s ease, border-color .16s ease, transform .12s ease;
}
#tp-input .ic-step:hover { background:var(--ic-wash); }
#tp-input .ic-step:active { transform:translateY(1px); }
#tp-input .ic-step-ic { width:36px; height:36px; border-radius:11px; display:grid; place-items:center; background:var(--ic-tint); color:var(--ic-green); flex:0 0 36px; transition:background .16s ease, color .16s ease; }
#tp-input .ic-step-ic svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
#tp-input .ic-step-txt { min-width:0; line-height:1.25; }
#tp-input .ic-step-txt b { display:block; font-size:13.5px; font-weight:800; color:var(--ic-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#tp-input .ic-step-txt small { font-size:11px; color:var(--ic-mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
#tp-input .ic-step-dot { width:20px; height:20px; border-radius:50%; background:#E4E8EC; border:1px solid #D3DAE0; justify-self:center; display:grid; place-items:center; color:#fff; transition:background .18s ease, border-color .18s ease, box-shadow .18s ease; }
#tp-input .ic-step-dot svg { width:12px; height:12px; opacity:0; transform:scale(.5); transition:opacity .18s ease, transform .18s ease; }

#tp-input .ic-step.is-active { background:#fff; border-color:var(--ic-green); box-shadow:0 6px 16px rgba(36,180,126,.14); }
#tp-input .ic-step.is-active .ic-step-ic { background:var(--ic-green); color:#fff; }
#tp-input .ic-step.is-done .ic-step-dot { background:var(--ic-green); border-color:var(--ic-green); box-shadow:0 0 0 3px rgba(36,180,126,.18); }
#tp-input .ic-step.is-done .ic-step-dot svg { opacity:1; transform:none; }

/* fixed-rail footer (Generate + settings pinned below the steps) */
#tp-input .ic-rail-foot { display:flex; flex-direction:column; gap:10px; margin-top:2px; }

/* generate + settings */
#tp-input .ic-generate {
  display:flex; align-items:center; justify-content:center; gap:9px; width:100%; min-height:50px;
  border-radius:15px; border:0; cursor:pointer; font:inherit; font-size:14px; font-weight:800; color:#fff;
  background:linear-gradient(160deg,#24B47E,#1EA372);
  box-shadow:0 14px 28px rgba(36,180,126,.34);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease, opacity .15s ease;
}
#tp-input .ic-generate svg { width:18px; height:18px; }
#tp-input .ic-generate:not(:disabled):hover { transform:translateY(-1px); filter:brightness(1.05); box-shadow:0 18px 34px rgba(36,180,126,.4); }
#tp-input .ic-generate:disabled { background:#E4E9ED; color:#9BA4AD; box-shadow:none; cursor:not-allowed; }
#tp-input .ic-generate.is-ready { animation:icPulse 2.2s ease-in-out infinite; }
/* Generate promoted into the Review & Generate section (out of the rail) */
#tp-input .ic-generate--section { margin-top:18px; min-height:56px; font-size:15px; border-radius:16px; }

#tp-input .ic-settings-link {
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:42px;
  border-radius:12px; border:1px solid var(--ic-line); background:transparent; cursor:pointer;
  font:inherit; font-size:12.5px; font-weight:700; color:var(--ic-mut);
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
#tp-input .ic-settings-link:hover { border-color:var(--ic-green-soft); color:var(--ic-ink); background:var(--ic-wash); }
#tp-input .ic-settings-link svg { width:15px; height:15px; }

/* ─── RIGHT SECTION (Planning Setup) — fixed on scroll ─────────────────── */
#tp-input .ic-side {
  align-self:start;
  display:flex; flex-direction:column; gap:14px;
  background:var(--ic-card); border:1px solid var(--ic-line); border-radius:24px; padding:20px;
  box-shadow:0 12px 34px rgba(26,29,33,.055);
  animation:icUp .5s cubic-bezier(.22,.61,.36,1) both;
}
#tp-input .ic-side-head { display:flex; align-items:center; gap:11px; }
#tp-input .ic-side-ic { flex:0 0 40px; width:40px; height:40px; border-radius:13px; display:grid; place-items:center; background:linear-gradient(160deg,#24B47E,#1EA372); color:#fff; box-shadow:0 8px 18px rgba(36,180,126,.32), inset 0 1px 0 rgba(255,255,255,.3); }
#tp-input .ic-side-ic svg { width:20px; height:20px; }
#tp-input .ic-side-titles h2 { margin:0 0 2px; font-family:'Plus Jakarta Sans',Inter,sans-serif; font-size:16px; font-weight:800; letter-spacing:-.01em; color:var(--ic-ink); }
#tp-input .ic-side-titles p { margin:0; font-size:11px; line-height:1.35; font-weight:600; color:var(--ic-mut); }

/* compact tiles — matched to the rail's step scale */
#tp-input .ic-side .ic-setup-grid { grid-template-columns:1fr; gap:6px; margin-bottom:0; }
#tp-input .ic-side .ic-setup-tile { padding:11px 12px; gap:6px; border-radius:14px; }
#tp-input .ic-side .ic-setup-k { font-size:11px; gap:8px; }
#tp-input .ic-side .ic-setup-k svg { width:15px; height:15px; }
#tp-input .ic-side .ic-setup-tile .dinput-setup-val { font-size:13px; }
@media (max-width:1280px){ #tp-input .ic-side { position:static; max-height:none; } #tp-input .ic-side .ic-setup-grid { grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); } }

/* ─── WORK AREA PANELS ─────────────────────────────────────────────────── */
#tp-input .ic-body { display:flex; flex-direction:column; gap:18px; min-width:0; }
#tp-input .ic-panel {
  scroll-margin-top:18px;
  background:var(--ic-card); border:1px solid var(--ic-line); border-radius:22px; padding:26px 28px;
  box-shadow:0 12px 34px rgba(26,29,33,.055);
  animation:icUp .5s cubic-bezier(.22,.61,.36,1) both;
}
#tp-input .ic-panel:nth-child(2){ animation-delay:.05s; }
#tp-input .ic-panel:nth-child(3){ animation-delay:.1s; }
#tp-input .ic-panel:nth-child(4){ animation-delay:.15s; }
#tp-input .ic-panel:nth-child(5){ animation-delay:.2s; }

#tp-input .ic-panel-head { display:flex; align-items:flex-start; gap:14px; margin-bottom:22px; }
#tp-input .ic-panel-step {
  flex:0 0 auto; min-width:44px; height:44px; padding:0 12px; border-radius:13px; display:grid; place-items:center;
  font-family:'Plus Jakarta Sans',Inter,sans-serif; font-size:16px; font-weight:800; letter-spacing:.02em;
  color:var(--ic-green); background:var(--ic-tint);
}
#tp-input .ic-panel-titles h2 { margin:0 0 4px; font-family:'Plus Jakarta Sans',Inter,sans-serif; font-size:20px; font-weight:800; letter-spacing:-.01em; color:var(--ic-ink); }
#tp-input .ic-panel-titles p { margin:0; font-size:13px; line-height:1.55; color:var(--ic-mut); max-width:66ch; }

/* ─── FORM ─────────────────────────────────────────────────────────────── */
#tp-input .dinput-form { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px 18px; }
#tp-input .dinput-field--full { grid-column:1 / -1; }
#tp-input .dinput-lbl { display:block; font-size:11px !important; font-weight:800 !important; letter-spacing:.02em !important; text-transform:none !important; color:var(--ic-mut) !important; margin-bottom:7px !important; }
#tp-input .dinput-inp, #tp-input .dinput-textarea {
  width:100% !important; min-height:46px !important; padding:12px 14px !important; font:inherit !important;
  font-size:13.5px !important; font-weight:500 !important; background:#F8FAFB !important;
  border:1px solid var(--ic-line) !important; border-radius:12px !important; color:var(--ic-ink-2) !important;
  box-shadow:none !important; transition:border-color .16s ease, box-shadow .16s ease, background .16s ease !important;
}
#tp-input .dinput-inp:hover, #tp-input .dinput-textarea:hover { border-color:#CFDAD6 !important; }
#tp-input .dinput-inp:focus, #tp-input .dinput-textarea:focus { outline:none !important; background:#fff !important; border-color:var(--ic-green) !important; box-shadow:0 0 0 4px rgba(36,180,126,.12) !important; }
#tp-input .dinput-inp::placeholder, #tp-input .dinput-textarea::placeholder { color:#9AA3AC !important; }
#tp-input select.dinput-inp { cursor:pointer; }
#tp-input .dinput-textarea { min-height:96px !important; padding:13px 14px 28px !important; resize:vertical; line-height:1.55; }
#tp-input .dinput-input-wrap { position:relative; }
#tp-input .dinput-input-wrap .dinput-inp { padding-right:42px !important; }
#tp-input .dinput-input-icon { position:absolute; right:13px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--ic-green) !important; pointer-events:none; }
#tp-input .dinput-textarea-wrap { position:relative; }
#tp-input .dinput-char-count { position:absolute; bottom:9px; left:14px; font-size:10.5px; font-weight:700; color:#A2ABB3 !important; pointer-events:none; font-variant-numeric:tabular-nums; }
#tp-input .dinput-duration-hint { margin-top:6px; font-size:11px; color:var(--ic-mut) !important; line-height:1.4; }
@media (max-width:640px){ #tp-input .dinput-form { grid-template-columns:1fr; } }

/* ─── DROPZONE + FILES ─────────────────────────────────────────────────── */
#tp-input .dinput-dropzone {
  display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important;
  gap:8px !important; min-height:210px !important; padding:30px 24px !important; text-align:center; cursor:pointer;
  border:1.6px dashed rgba(36,180,126,.34) !important; border-radius:18px !important;
  background:radial-gradient(520px 180px at 50% 0%, rgba(36,180,126,.05), transparent 70%), #F8FBFA !important;
  transition:border-color .18s ease, background .18s ease !important; box-shadow:none !important;
}
#tp-input .dinput-dropzone:hover, #tp-input .dinput-dropzone.drag { border-color:var(--ic-green) !important; background:radial-gradient(520px 200px at 50% 0%, rgba(36,180,126,.12), transparent 70%), #F3FAF7 !important; }
#tp-input .dinput-dz-icon { width:66px !important; height:66px !important; margin-bottom:6px !important; display:grid !important; place-items:center; border-radius:20px; background:var(--ic-tint); color:var(--ic-green) !important; }
#tp-input .dinput-dz-icon svg { width:30px !important; height:30px !important; filter:none !important; }
#tp-input .dinput-dz-title { font-size:15px !important; font-weight:800 !important; color:var(--ic-ink) !important; }
#tp-input .dinput-dz-sub { font-size:12px !important; color:var(--ic-mut) !important; margin-bottom:6px !important; }
#tp-input .dinput-browse-btn { display:inline-flex; align-items:center; gap:8px; margin-top:6px !important; padding:10px 20px !important; background:var(--ic-green) !important; border:0 !important; color:#fff !important; border-radius:12px !important; font:inherit; font-size:13px; font-weight:800; cursor:pointer; box-shadow:0 8px 18px rgba(36,180,126,.26) !important; transition:transform .14s ease, background .14s ease !important; }
#tp-input .dinput-browse-btn:hover { transform:translateY(-1px); background:var(--ic-green-d) !important; border:0 !important; }
#tp-input .dinput-browse-btn svg { width:15px; height:15px; color:#fff !important; }

#tp-input .dinput-files-section { margin-top:18px; }
#tp-input .dinput-files-title { font-size:12.5px !important; font-weight:800 !important; color:var(--ic-ink) !important; margin-bottom:10px; }
#tp-input .dinput-files-table { border:1px solid var(--ic-line); border-radius:14px; overflow:hidden; background:#fff; }
#tp-input .dinput-files-row { display:grid !important; grid-template-columns:1.8fr .7fr .7fr 1.1fr 1fr 36px; align-items:center; gap:12px; padding:11px 16px; font-size:12.5px; border-bottom:1px solid #F0F3F5; background:transparent !important; }
#tp-input .dinput-files-row:last-child { border-bottom:none; }
#tp-input .dinput-files-row--head { background:var(--ic-wash) !important; color:var(--ic-mut) !important; font-size:10.5px !important; font-weight:800 !important; text-transform:uppercase; letter-spacing:.08em; padding:9px 16px !important; }
#tp-input .dinput-fname { display:flex; align-items:center; gap:10px; min-width:0; }
#tp-input .dinput-fname-ico { flex:0 0 26px; width:26px; height:26px; border-radius:8px; display:grid; place-items:center; font-size:14px; background:var(--ic-tint) !important; border:0 !important; }
#tp-input .dinput-fname-text { font-weight:700; color:var(--ic-ink-2) !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#tp-input .dinput-ftype-pill { display:inline-block; padding:3px 9px; border-radius:7px; background:var(--ic-tint) !important; border:1px solid rgba(36,180,126,.2) !important; font-size:10.5px; font-weight:800; letter-spacing:.04em; color:var(--ic-green-d) !important; }
#tp-input .dinput-fsize, #tp-input .dinput-fdate { color:var(--ic-mut) !important; font-weight:500; }
#tp-input .dinput-fstatus { display:inline-flex; align-items:center; gap:7px; padding:3px 10px; border-radius:999px; background:var(--ic-tint) !important; border:1px solid rgba(36,180,126,.24) !important; color:var(--ic-green-d) !important; font-size:10.5px; font-weight:800; width:fit-content; }
#tp-input .dinput-status-dot { width:6px; height:6px; border-radius:50%; background:var(--ic-green) !important; box-shadow:0 0 0 3px rgba(36,180,126,.16) !important; }
#tp-input .dinput-fdel { width:28px; height:28px; border-radius:8px; border:1px solid transparent; background:transparent; color:var(--ic-mut); cursor:pointer; display:grid; place-items:center; transition:all .14s; padding:0; }
#tp-input .dinput-fdel:hover { border-color:rgba(244,116,107,.28); background:rgba(244,116,107,.1); color:#D8453A; }
#tp-input .dinput-fdel svg { width:14px; height:14px; }

/* ─── PLANNING SETUP TILES ─────────────────────────────────────────────── */
#tp-input .ic-setup-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:20px; }
#tp-input .ic-setup-tile { display:flex; flex-direction:column; gap:8px; padding:14px; border-radius:15px; background:var(--ic-wash); border:1px solid var(--ic-line); }
#tp-input .ic-setup-k { display:flex; align-items:center; gap:8px; font-size:11.5px; font-weight:700; color:var(--ic-mut); }
#tp-input .ic-setup-k svg { width:15px; height:15px; color:var(--ic-green); flex-shrink:0; }
#tp-input .ic-setup-tile .dinput-setup-val { font-family:'Plus Jakarta Sans',Inter,sans-serif; font-size:14px; font-weight:800; color:var(--ic-ink) !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* injected Zones/Levels card sits flush inside its own section — the panel head
   already carries the "Zones, Levels & Phases" title, so hide the card's own */
#tp-input .ic-plan-mount { display:flex; flex-direction:column; gap:16px; }
#tp-input .ic-plan-mount .plan-card { border:0 !important; padding:0 !important; box-shadow:none !important; background:transparent !important; }
#tp-input .ic-plan-mount .plan-card > .dinput-card-hdr,
#tp-input .ic-plan-mount .plan-card > .dinput-card-desc { display:none !important; }
#tp-input .dinput-card { background:#fff !important; border:1px solid var(--ic-line) !important; border-radius:18px !important; padding:20px !important; box-shadow:0 6px 18px rgba(26,29,33,.05) !important; color:var(--ic-ink-2) !important; }
#tp-input .dinput-card::before { display:none !important; }
#tp-input .dinput-card .dinput-card-num { background:var(--ic-tint) !important; color:var(--ic-green) !important; border:0 !important; box-shadow:none !important; }
#tp-input .dinput-card .dinput-card-num svg { color:var(--ic-green) !important; }
#tp-input .dinput-card .dinput-card-title { font-family:'Plus Jakarta Sans',Inter,sans-serif !important; color:var(--ic-ink) !important; }
#tp-input .plan-seg-tab.is-active { border-color:var(--ic-green) !important; box-shadow:0 2px 8px rgba(36,180,126,.16) !important; }
#tp-input .plan-seg-tab.is-active .plan-seg-ic, #tp-input .plan-seg-tab.is-active .plan-seg-t { color:var(--ic-green) !important; }

/* ─── READINESS CHECKLIST (hidden data source in the rail) ─────────────── */
#tp-input .dinput-checklist[hidden] { display:none !important; }
#tp-input .dinput-checklist { display:flex; flex-direction:column; gap:10px; }
#tp-input .dinput-check-item { display:flex; align-items:center; gap:14px; padding:14px 16px; background:#fff; border:1px solid var(--ic-line); border-radius:15px; transition:all .18s; cursor:default; }
#tp-input .dinput-check-item:hover { border-color:var(--ic-green-soft); box-shadow:0 8px 18px rgba(26,29,33,.05); }
#tp-input .dinput-check-icon { flex:0 0 32px; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; color:#fff; }
#tp-input .dinput-check-icon svg { width:16px; height:16px; }
#tp-input .dinput-check-item.is-ok .dinput-check-icon { background:var(--ic-green) !important; box-shadow:0 0 0 3px rgba(36,180,126,.16) !important; }
#tp-input .dinput-check-item.is-pending .dinput-check-icon { background:#CBD3DA !important; color:#fff !important; box-shadow:0 0 0 3px rgba(203,211,218,.28) !important; }
#tp-input .dinput-check-item.is-ok { border-color:rgba(36,180,126,.3); background:#F6FCF9; }
#tp-input .dinput-check-text { flex:1; min-width:0; }
#tp-input .dinput-check-title { font-size:13.5px !important; font-weight:750 !important; color:var(--ic-ink-2) !important; margin-bottom:2px; }
#tp-input .dinput-check-sub { font-size:11.5px !important; color:var(--ic-mut) !important; }
#tp-input .dinput-check-chev { font-size:22px; color:#C4CCD3 !important; font-weight:300; line-height:1; }

#tp-input .dinput-ready-cta { display:flex; align-items:center; gap:12px; margin-top:16px; padding:15px 18px; border-radius:15px; font-size:13.5px; font-weight:600; }
#tp-input .dinput-cta-icon { flex:0 0 22px; width:22px; height:22px; }
#tp-input .dinput-ready-cta--pending { background:var(--ic-tint) !important; border:1px solid rgba(36,180,126,.28) !important; color:var(--ic-green-d) !important; }
#tp-input .dinput-ready-cta--ok { background:rgba(36,180,126,.12) !important; border:1px solid rgba(36,180,126,.4) !important; color:var(--ic-green-d) !important; }
#tp-input .dinput-ready-cta svg { color:currentColor !important; stroke:currentColor !important; }

/* ─── motion ───────────────────────────────────────────────────────────── */
@keyframes icUp { from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;} }
@keyframes icPulse { 0%,100%{ box-shadow:0 14px 28px rgba(36,180,126,.34);} 50%{ box-shadow:0 16px 40px rgba(36,180,126,.55);} }
@media (prefers-reduced-motion: reduce){
  #tp-input .ic-rail, #tp-input .ic-panel { animation:none !important; }
  #tp-input .ic-generate.is-ready { animation:none !important; }
  #tp-input .ic-step, #tp-input .dinput-card, #tp-input .dinput-dropzone, #tp-input .dinput-browse-btn { transition:none !important; }
}

/* styles/tabs/00-18-project-calendar-theme.css */
/* ═══════════════════════════════════════════════════════════════════
   CALENDAR TAB — HOME/INPUT PREMIUM THEME
   Warm white + gold/midnight — shadows, polish, rounded corners.
   Matches nexora-theme05 (Home) and dinput-redesign (Input).
   Loads last; adds premium visual polish without changing layout.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Theme variables ── */
#tp-calendar {
  --cal-navy: #0F1B2E !important;
  --cal-navy-2: #0A1423 !important;
  --cal-gold: #24B47E !important;
  --cal-gold-2: #1EA372 !important;
  --cal-ink: #1A1D21 !important;
  --cal-muted: #6B7580 !important;
  --cal-line: rgba(15, 27, 46, .14) !important;
  --cal-soft: #F3E9DA !important;
  --cal-white: #FFFDF8 !important;
  background: var(--cal-soft) !important;
  color: var(--cal-ink) !important;
}

/* ── Shell ── */
#tp-calendar .pcal-editor,
#tp-calendar .pcal-list-col {
  box-shadow: 0 12px 34px rgba(15, 27, 46, .07) !important;
  background: var(--cal-white) !important;
  border-color: var(--cal-line) !important;
}

#tp-calendar .pcal-editor {
  border-radius: 16px !important;
}

#tp-calendar .pcal-list-col {
  border-radius: 14px !important;
}

/* ── Sidebar ── */
#tp-calendar .pcal-list-hdr {
  background: transparent !important;
  border-color: var(--cal-line) !important;
}

#tp-calendar .pcal-list-hdr > span {
  color: var(--cal-navy) !important;
  font-weight: 850 !important;
  letter-spacing: -.02em;
}

#tp-calendar .pcal-list-hdr .pcal-new-btn {
  background: var(--cal-gold) !important;
  border-color: var(--cal-gold) !important;
  color: #fff !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 12px rgba(36, 180, 126, .28) !important;
  transition: all .18s ease !important;
}

#tp-calendar .pcal-list-hdr .pcal-new-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(36, 180, 126, .35) !important;
}

#tp-calendar .pcal-item {
  background: rgba(15, 27, 46, .03) !important;
  border-color: transparent !important;
  border-radius: 10px !important;
  transition: all .16s ease !important;
}

#tp-calendar .pcal-item:hover {
  background: rgba(15, 27, 46, .05) !important;
  border-color: var(--cal-line) !important;
}

#tp-calendar .pcal-item.active {
  background: rgba(36, 180, 126, .07) !important;
  border-color: var(--cal-gold) !important;
}

#tp-calendar .pcal-item-ico {
  background: rgba(36, 180, 126, .1) !important;
  border-color: rgba(36, 180, 126, .2) !important;
  color: var(--cal-gold) !important;
  border-radius: 9px !important;
  transition: all .16s ease !important;
}

#tp-calendar .pcal-item.active .pcal-item-ico {
  background: var(--cal-gold) !important;
  border-color: var(--cal-gold) !important;
  color: #fff !important;
}

#tp-calendar .pcal-item-name {
  color: var(--cal-navy) !important;
  font-weight: 800 !important;
}

#tp-calendar .pcal-item-meta {
  color: var(--cal-muted) !important;
  font-weight: 700 !important;
}

#tp-calendar .pcal-item-badge {
  font-weight: 850 !important;
  border-radius: 999px !important;
}

#tp-calendar .pcal-item-badge.default {
  background: rgba(36, 180, 126, .12) !important;
  color: var(--cal-gold-2) !important;
  border-color: rgba(36, 180, 126, .25) !important;
}

#tp-calendar .pcal-item-badge.custom {
  background: rgba(15, 27, 46, .06) !important;
  color: var(--cal-muted) !important;
  border-color: var(--cal-line) !important;
}

/* ── Editor header ── */
#tp-calendar .pcal-editor-hdr {
  background: var(--cal-white) !important;
  border-color: var(--cal-line) !important;
}

#tp-calendar .pcal-name-inp {
  color: var(--cal-navy) !important;
  font-weight: 850 !important;
  letter-spacing: -.02em;
}

#tp-calendar .pcal-editor-meta {
  color: var(--cal-muted) !important;
  font-weight: 700 !important;
}

/* ── Global buttons — gold gradient + shadow + hover lift ── */
#tp-calendar .hbtn.primary,
#tp-calendar .pcal-save-btn,
#tp-calendar .pcal-add-manual-btn,
#tp-calendar .pcal-add-years-btn,
#tp-calendar .pcal-open-planner-btn {
  background: linear-gradient(160deg, var(--cal-gold), var(--cal-gold-2)) !important;
  border-color: var(--cal-gold-2) !important;
  color: #fff !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 14px rgba(36, 180, 126, .28) !important;
  transition: all .18s ease !important;
}

#tp-calendar .hbtn.primary:hover,
#tp-calendar .pcal-save-btn:hover,
#tp-calendar .pcal-add-manual-btn:hover,
#tp-calendar .pcal-add-years-btn:hover,
#tp-calendar .pcal-open-planner-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 22px rgba(36, 180, 126, .38) !important;
  filter: brightness(1.04);
}

#tp-calendar .hbtn,
#tp-calendar .pcal-preset,
#tp-calendar .pcal-nav-sm {
  border-radius: 8px !important;
  border-color: var(--cal-line) !important;
  background: var(--cal-white) !important;
  color: var(--cal-ink) !important;
  font-weight: 700 !important;
  transition: all .15s ease !important;
}

#tp-calendar .hbtn:hover {
  border-color: #C5C9CE !important;
  background: rgba(15, 27, 46, .04) !important;
}

#tp-calendar .pcal-preset.applied {
  background: linear-gradient(160deg, var(--cal-gold), var(--cal-gold-2)) !important;
  border-color: var(--cal-gold-2) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(36, 180, 126, .2) !important;
}

/* ── Section headers ── */
#tp-calendar .pcal-section-title {
  background: var(--cal-navy) !important;
  border-bottom-color: rgba(36, 180, 126, .4) !important;
  color: #fffdf8 !important;
  font-weight: 850 !important;
  cursor: pointer !important;
  transition: background .2s ease;
}

#tp-calendar .pcal-section-title:hover {
  background: #15243D !important;
}

#tp-calendar .pcal-section-title .tbadge {
  background: rgba(36, 180, 126, .18) !important;
  border-color: rgba(36, 180, 126, .4) !important;
  color: #c8f0d0 !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
}

#tp-calendar .pcal-section-title .hbtn {
  background: rgba(255, 255, 255, .15) !important;
  border-color: rgba(255, 255, 255, .2) !important;
  color: #fffdf8 !important;
  border-radius: 7px !important;
}

#tp-calendar .pcal-section-title .hbtn:hover {
  background: rgba(255, 255, 255, .25) !important;
}

/* ── Stats strip ── */
#tp-calendar .pcal-stats-strip {
  background: var(--cal-white) !important;
  border-color: var(--cal-line) !important;
}

#tp-calendar .pcal-stat-card {
  border-color: var(--cal-line) !important;
  transition: background .15s ease;
}

#tp-calendar .pcal-stat-card:hover {
  background: rgba(15, 27, 46, .02) !important;
}

#tp-calendar .pcal-stat-icon {
  background: rgba(36, 180, 126, .08) !important;
  border-color: rgba(36, 180, 126, .18) !important;
  color: var(--cal-gold) !important;
  border-radius: 50% !important;
  width: 38px !important;
  height: 38px !important;
  transition: all .2s ease;
}

#tp-calendar .pcal-stat-card:hover .pcal-stat-icon {
  background: rgba(36, 180, 126, .14) !important;
  transform: scale(1.05);
}

#tp-calendar .pcal-sum-val {
  color: var(--cal-navy) !important;
  font-weight: 850 !important;
  letter-spacing: -.03em;
}

#tp-calendar .pcal-sum-lbl {
  color: var(--cal-muted) !important;
  font-weight: 750 !important;
}

/* ── Day buttons ── */
#tp-calendar .pcal-day-btn {
  border-color: #D9DCE1 !important;
  background: #F8FAFB !important;
  color: var(--cal-muted) !important;
  border-radius: 9px !important;
  font-weight: 800 !important;
  transition: all .18s ease !important;
}

#tp-calendar .pcal-day-btn:hover {
  border-color: #C5C9CE !important;
  background: #F0F2F4 !important;
  color: var(--cal-ink) !important;
}

#tp-calendar .pcal-day-btn.on {
  background: linear-gradient(160deg, var(--cal-gold), var(--cal-gold-2)) !important;
  border-color: var(--cal-gold-2) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(36, 180, 126, .22) !important;
}

#tp-calendar .pcal-day-btn.weekend-day.on {
  background: linear-gradient(160deg, #B45309, #92400E) !important;
  border-color: #92400E !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(180, 83, 9, .22) !important;
}

/* ── Inputs — polished (matches Input tab style) ── */
#tp-calendar .inp,
#tp-calendar input:not(.pcal-name-inp),
#tp-calendar select {
  border-color: #D9DCE1 !important;
  background: #F8FAFB !important;
  color: var(--cal-ink) !important;
  border-radius: 9px !important;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease !important;
}

#tp-calendar .inp:hover,
#tp-calendar input:not(.pcal-name-inp):hover,
#tp-calendar select:hover {
  border-color: #C5C9CE !important;
  background: #fff !important;
}

#tp-calendar .inp:focus,
#tp-calendar input:not(.pcal-name-inp):focus,
#tp-calendar select:focus {
  border-color: var(--cal-gold) !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(36, 180, 126, .1) !important;
}

#tp-calendar .pcal-days-label,
#tp-calendar .pcal-field-label,
#tp-calendar label,
#tp-calendar .lbl,
#tp-calendar .pcal-preset-label {
  color: var(--cal-navy) !important;
  font-weight: 800 !important;
}

/* ── Holiday presets / manual — soft warm bg ── */
#tp-calendar .pcal-holiday-manual,
#tp-calendar .pcal-holiday-presets,
#tp-calendar .pcal-override-form {
  background: var(--cal-soft) !important;
  border-color: var(--cal-line) !important;
  border-radius: 12px !important;
}

/* ── Exception items ── */
#tp-calendar .pcal-exc-item {
  background: rgba(245, 158, 11, .05) !important;
  border-color: rgba(245, 158, 11, .18) !important;
  border-radius: 9px !important;
}

#tp-calendar .pcal-exc-date {
  color: #B45309 !important;
  font-weight: 750 !important;
}

#tp-calendar .pcal-exc-desc {
  color: var(--cal-ink) !important;
}

/* ── Month cards ── */
#tp-calendar .pcal-month-card {
  box-shadow: 0 2px 10px rgba(15, 27, 46, .045) !important;
  border-color: var(--cal-line) !important;
  border-radius: 10px !important;
  background: var(--cal-white) !important;
  transition: box-shadow .2s ease;
}

#tp-calendar .pcal-month-card:hover {
  box-shadow: 0 6px 18px rgba(15, 27, 46, .07) !important;
}

#tp-calendar .pcal-month-card-hdr {
  background: var(--cal-soft) !important;
  border-color: var(--cal-line) !important;
}

#tp-calendar .pcal-month-card-hdr .mhdr-name {
  color: var(--cal-navy) !important;
  font-weight: 800 !important;
}

#tp-calendar .pcal-month-card-hdr .mhdr-stats {
  color: var(--cal-muted) !important;
  font-weight: 700 !important;
}

#tp-calendar .pcal-month-dow span {
  color: var(--cal-muted) !important;
  font-weight: 700 !important;
}

#tp-calendar .pcal-mday.work {
  background: rgba(36, 180, 126, .08) !important;
  color: var(--cal-gold-2) !important;
  font-weight: 600;
}

#tp-calendar .pcal-mday.off {
  background: rgba(15, 27, 46, .04) !important;
  color: var(--cal-muted) !important;
}

#tp-calendar .pcal-mday.holiday {
  background: rgba(245, 158, 11, .12) !important;
  color: #B45309 !important;
  font-weight: 700 !important;
}

#tp-calendar .pcal-mday.today-d,
#tp-calendar .pcal-mday.today {
  background: rgba(36, 180, 126, .15) !important;
  color: var(--cal-navy) !important;
  font-weight: 800 !important;
  outline: 2px solid rgba(36, 180, 126, .4) !important;
  border-radius: 50% !important;
}

#tp-calendar .pcal-legend {
  border-color: var(--cal-line) !important;
}

#tp-calendar .pcal-leg-item {
  color: var(--cal-muted) !important;
  font-weight: 700 !important;
}

/* ── Premium Data Panel (injected by 153-calendar-premium-ui.js) ── */
#tp-calendar .pcal-prem-data {
  background: var(--cal-white) !important;
}

#tp-calendar .pcal-prem-head {
  background: var(--cal-white) !important;
  border-color: var(--cal-line) !important;
}

#tp-calendar .pcal-prem-kicker {
  color: var(--cal-gold) !important;
  font-weight: 850 !important;
  letter-spacing: .1em !important;
}

#tp-calendar .pcal-prem-title {
  color: var(--cal-navy) !important;
  font-weight: 850 !important;
  letter-spacing: -.02em;
}

#tp-calendar .pcal-prem-desc {
  color: var(--cal-muted) !important;
}

#tp-calendar .pcal-prem-chip {
  background: var(--cal-soft) !important;
  border-color: var(--cal-line) !important;
  color: var(--cal-muted) !important;
  font-weight: 800 !important;
}

#tp-calendar .pcal-prem-layout {
  background: var(--cal-white) !important;
}

#tp-calendar .pcal-prem-label {
  color: var(--cal-muted) !important;
  font-weight: 850 !important;
  letter-spacing: .06em !important;
}

#tp-calendar .pcal-prem-value {
  color: var(--tone, var(--cal-navy)) !important;
  font-weight: 850 !important;
}

#tp-calendar .pcal-prem-week-wrap,
#tp-calendar .pcal-prem-holiday-strip,
#tp-calendar .pcal-prem-side {
  background: var(--cal-soft) !important;
  border-color: var(--cal-line) !important;
  border-radius: 10px !important;
}

#tp-calendar .pcal-prem-day {
  border-color: var(--cal-line) !important;
  background: var(--cal-white) !important;
  color: var(--cal-muted) !important;
  border-radius: 8px !important;
  font-weight: 800 !important;
}

#tp-calendar .pcal-prem-day.on {
  background: linear-gradient(160deg, var(--cal-gold), var(--cal-gold-2)) !important;
  border-color: var(--cal-gold-2) !important;
  color: #fff !important;
}

#tp-calendar .pcal-prem-holiday {
  border-color: var(--cal-line) !important;
}

#tp-calendar .pcal-prem-holiday b {
  color: var(--cal-gold-2) !important;
}

#tp-calendar .pcal-prem-rail-row {
  border-color: var(--cal-line) !important;
}

#tp-calendar .pcal-prem-rail-row b {
  color: var(--tone, var(--cal-navy)) !important;
}

#tp-calendar .pcal-prem-metric {
  border-color: var(--cal-line) !important;
  background: var(--cal-white) !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 8px rgba(15, 27, 46, .04) !important;
}

/* ── Sync bar ── */
#tp-calendar .pcal-sync-bar {
  background: rgba(36, 180, 126, .06) !important;
  border-color: rgba(36, 180, 126, .15) !important;
  color: var(--cal-gold-2) !important;
}

/* ── Delete buttons ── */
#tp-calendar .pcal-delete-btn,
#tp-calendar .pcal-clear-btn,
#tp-calendar .pcal-del-all-btn {
  background: rgba(220, 38, 38, .04) !important;
  border-color: rgba(220, 38, 38, .25) !important;
  color: #DC2626 !important;
  border-radius: 8px !important;
}

#tp-calendar .pcal-delete-btn:hover,
#tp-calendar .pcal-clear-btn:hover,
#tp-calendar .pcal-del-all-btn:hover {
  background: rgba(220, 38, 38, .08) !important;
  border-color: rgba(220, 38, 38, .45) !important;
}

#tp-calendar .pcal-exc-del {
  border-color: rgba(220, 38, 38, .2) !important;
  color: #DC2626 !important;
  border-radius: 6px !important;
}

/* ── Override items ── */
#tp-calendar .pcal-act-ov-item {
  background: rgba(15, 27, 46, .03) !important;
  border-color: var(--cal-line) !important;
  border-radius: 9px !important;
}

#tp-calendar .pcal-act-ov-ico {
  background: rgba(36, 180, 126, .1) !important;
  color: var(--cal-gold) !important;
  border-radius: 7px !important;
}

#tp-calendar .pcal-act-ov-name {
  color: var(--cal-navy) !important;
}

#tp-calendar .pcal-act-ov-meta {
  color: var(--cal-muted) !important;
}

#tp-calendar .pcal-override-details summary {
  color: var(--cal-navy) !important;
  font-weight: 700 !important;
}

/* ── Chips ── */
#tp-calendar .pcal-year-chip {
  border-color: rgba(36, 180, 126, .25) !important;
  background: rgba(36, 180, 126, .06) !important;
  color: var(--cal-gold-2) !important;
  border-radius: 999px !important;
}

#tp-calendar .pcal-applied-years-label {
  color: var(--cal-muted) !important;
}

/* ── Ghost icon ── */
#tp-calendar .pcal-ghost-icon {
  color: var(--cal-muted) !important;
}

/* ── Presets row ── */
#tp-calendar .pcal-presets-row {
  background: transparent !important;
  border: 0 !important;
}

#tp-calendar .pcal-preset {
  border-radius: 999px !important;
}

/* ── Islamic buttons ── */
#tp-calendar .pcal-islamic-btn {
  border-radius: 999px !important;
  border-color: #D9DCE1 !important;
  background: var(--cal-white) !important;
  color: var(--cal-ink) !important;
  transition: all .14s ease !important;
}

#tp-calendar .pcal-islamic-btn:hover {
  border-color: #C5C9CE !important;
  background: #F0F2F4 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE: ≤640px
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  #tp-calendar .pcal-section {
    border-bottom-color: var(--cal-soft) !important;
  }

  #tp-calendar [data-section] .pcal-section-title {
    background: var(--cal-navy) !important;
    border-bottom-color: rgba(36, 180, 126, .4) !important;
    color: #fffdf8 !important;
  }

  #tp-calendar [data-section] .pcal-acc-summary {
    color: rgba(255, 255, 255, .6) !important;
  }

  #tp-calendar [data-section] .pcal-acc-arrow {
    color: rgba(255, 255, 255, .6) !important;
  }

  #tp-calendar [data-section] .pcal-day-btn.on {
    background: linear-gradient(160deg, var(--cal-gold), var(--cal-gold-2)) !important;
    border-color: var(--cal-gold-2) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(36, 180, 126, .22) !important;
  }

  #tp-calendar [data-section] .pcal-holiday-manual,
  #tp-calendar [data-section] .pcal-holiday-presets,
  #tp-calendar [data-section] .pcal-override-form {
    background: var(--cal-soft) !important;
    border-color: var(--cal-line) !important;
    border-radius: 10px !important;
  }

  #tp-calendar [data-section] .pcal-exc-item {
    background: rgba(245, 158, 11, .05) !important;
    border-color: rgba(245, 158, 11, .18) !important;
  }

  #tp-calendar [data-section] .pcal-month-card-hdr {
    background: var(--cal-soft) !important;
    border-color: var(--cal-line) !important;
  }

  #tp-calendar [data-section] .pcal-month-card {
    box-shadow: 0 1px 6px rgba(15, 27, 46, .04) !important;
  }
}

/* styles/tabs/calendar-v2.css */
/* ════════════════════════════════════════════════════════════════════════
   CALENDAR V2 — workspace styles (scoped under #cv2Overlay: a full-screen
   overlay appended to document.body — NOT a .tp panel, see calendar-v2.tab.js)
   Design language: INPUT DATA visual family — mint #24B47E accent,
   ink #14202A, wash #F6FAF8, line #E8ECEF, radii 24/14/12,
   Plus Jakarta Sans (display) + Inter (body).
   ════════════════════════════════════════════════════════════════════════ */

#cv2Overlay {
  --cv-ink: #14202A;
  --cv-ink-2: #38434E;
  --cv-mut: #7A858F;
  --cv-line: #E8ECEF;
  --cv-wash: #F6FAF8;
  --cv-card: #FFFFFF;
  --cv-accent: #24B47E;
  --cv-accent-soft: rgba(36, 180, 126, .12);
  --cv-accent-line: rgba(36, 180, 126, .35);
  --cv-gold: #D4A853;
  --cv-red: #E05252;
  --cv-amber: #E8A13D;
  --cv-blue: #2F6FED;
  /* the country layer had the same gold as a calendar holiday's amber —
     two sources, one colour. Violet keeps them apart everywhere. */
  --cv-country: #7C5CD6;
  --cv-ink-head: #0F1B2E;
  --cv-r-24: 24px;
  --cv-r-14: 14px;
  --cv-r-12: 12px;
  --cv-font: 'Plus Jakarta Sans', 'Inter', 'Segoe UI', system-ui, sans-serif;
  --cv-font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

#cv2Overlay, #cv2Overlay * { box-sizing: border-box; }

/* Overlay root: full-viewport layer above the app shell. Hidden until .open
   (JS sets both .open and display). The app background stays untouched —
   the calendar owns the whole screen while it is open. */
#cv2Overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: none;
  background: var(--cv-wash);
  color: var(--cv-ink);
  font-family: var(--cv-font-body);
  overflow: hidden;
}

#cv2Overlay.open {
  display: block !important;
  animation: cv2OverlayIn .22s ease;
}

/* Docked beside the sidebar. The overlay used to cover the whole viewport at
   the top of the z-order, so the sidebar vanished and Esc was the only way
   out. On the vertical shell it now starts where the page content starts
   (calendar-v2.tab.js writes `left` from .body's padding, following the rail
   as it opens and closes), and the rail is lifted above it so it stays
   usable — hover-peek included. `contain: layout` makes the overlay the
   containing block for its fixed drawer and modal, so they centre in the
   calendar instead of sliding under the rail. */
#cv2Overlay.cv2-docked {
  border-left: 1px solid var(--cv-line);
  border-radius: 24px 0 0 24px;
  box-shadow: -10px 0 34px rgba(15, 27, 46, .06);
  contain: layout;
  transition: left var(--nx-nav-dur, 240ms) var(--nx-nav-ease, ease);
}
html body.cv2-overlay-lock.ap-vertical-shell #app-tabs.tabs,
html body.cv2-overlay-lock.ap-vertical-shell #app-tabs.tabs.ap-nav-collapsed,
html body.cv2-overlay-lock.ap-vertical-shell #app-tabs.tabs.ap-nav-peek,
html body.cv2-overlay-lock.ap-vertical-shell #app-tabs.tabs.ap-nav-sleep {
  z-index: 2147483001 !important;
}
/* The app's toasts (#v9-toast-wrap, z 9999, bottom-left) sat under the
   overlay, so every confirmation the calendar raised was invisible. Lift
   them above it, and clear of the rail. */
html body.cv2-overlay-lock #v9-toast-wrap {
  z-index: 2147483004 !important;
  left: calc(var(--cv2-dock-left, 0px) + 24px) !important;
}
/* Below 1025px the rail is an off-canvas drawer opened by the burger. Keep
   the burger, its backdrop and the drawer above the calendar so navigation
   is still one tap away. */
html body.cv2-overlay-lock #apMobileBurger { z-index: 2147483003 !important; }
html body.cv2-overlay-lock #apMobileBackdrop { z-index: 2147483000 !important; }
html body.cv2-overlay-lock.ap-mobile-nav-open #app-tabs.tabs { z-index: 2147483002 !important; }

@keyframes cv2OverlayIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

body.cv2-overlay-lock { overflow: hidden; }

#cv2Overlay .cv2-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  flex: 1;
}

/* ── Header ── */
#cv2Overlay .cv2-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 28px 14px;
  flex-wrap: wrap;
}
#cv2Overlay .cv2-kicker {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .22em;
  color: var(--cv-accent);
}
#cv2Overlay .cv2-title {
  font-family: var(--cv-font);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--cv-ink-head);
  margin: 2px 0 4px;
}
#cv2Overlay .cv2-title span {
  color: var(--cv-accent);
  font-weight: 800;
}
#cv2Overlay .cv2-sub { font-size: 12.5px; color: var(--cv-mut); }
#cv2Overlay .cv2-head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

#cv2Overlay .cv2-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--cv-card);
  border: 1px solid var(--cv-line);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--cv-ink-2);
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#cv2Overlay .cv2-chip.dim { color: var(--cv-mut); font-weight: 600; }
#cv2Overlay .cv2-chip::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cv-accent);
  flex: none;
}

/* ── Buttons ── */
#cv2Overlay .cv2-btn {
  font-family: var(--cv-font-body);
  font-size: 12.5px;
  font-weight: 700;
  border-radius: 12px;
  border: 1px solid var(--cv-line);
  background: var(--cv-card);
  color: var(--cv-ink-2);
  padding: 9px 16px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .1s;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
#cv2Overlay .cv2-btn:hover { border-color: var(--cv-accent-line); color: var(--cv-ink); }
#cv2Overlay .cv2-btn:active { transform: translateY(1px); }
#cv2Overlay .cv2-btn.primary {
  background: var(--cv-accent);
  border-color: var(--cv-accent);
  color: #fff;
}
#cv2Overlay .cv2-btn.primary:hover { background: #1FA36F; }
#cv2Overlay .cv2-btn.ghost { background: transparent; }
#cv2Overlay .cv2-btn.danger { color: var(--cv-red); border-color: rgba(224, 82, 82, .35); }
#cv2Overlay .cv2-btn.danger:hover { background: rgba(224, 82, 82, .08); border-color: var(--cv-red); }
#cv2Overlay .cv2-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
#cv2Overlay .cv2-btn.sm { padding: 6px 11px; font-size: 11.5px; border-radius: 10px; }
#cv2Overlay .cv2-btn.icon { padding: 7px 9px; }
#cv2Overlay .cv2-btn svg { width: 16px; height: 16px; flex: none; }

/* ── Section rail ── */
#cv2Overlay .cv2-rail {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 6px;
  /* No side padding on the scroller itself: the pinned arrows carry it, so
     no pill can scroll into a gap outside them and peek past an arrow. */
  padding: 8px 0;
  background: rgba(246, 250, 248, .92);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--cv-line);
  overflow-x: auto;
  scrollbar-width: none;
}
#cv2Overlay .cv2-rail::-webkit-scrollbar { display: none; }
#cv2Overlay .cv2-rail-pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 999px;
  padding: 6.5px 13px;
  font-family: var(--cv-font-body);
  font-size: 12px;
  font-weight: 700;
  color: var(--cv-mut);
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
#cv2Overlay .cv2-rail-pill:hover { color: var(--cv-ink); background: var(--cv-card); border-color: var(--cv-line); }
#cv2Overlay .cv2-rail-pill.active {
  background: var(--cv-accent);
  border-color: var(--cv-accent);
  color: #fff;
}
#cv2Overlay .cv2-rail-num { font-size: 10px; font-weight: 800; opacity: .75; letter-spacing: .04em; }
#cv2Overlay .cv2-rail-prev button,
#cv2Overlay .cv2-rail-next button {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--cv-line);
  background: var(--cv-card);
  color: var(--cv-ink-2);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
/* The arrows stay pinned to the rail's ends while the pills scroll between
   them, so the sections past the visible edge are always one click away. */
#cv2Overlay .cv2-rail-prev,
#cv2Overlay .cv2-rail-next {
  position: sticky;
  z-index: 1;
  flex: none;
  display: flex;
  align-items: center;
  align-self: stretch;
  background: var(--cv-wash);
}
#cv2Overlay .cv2-rail-prev { left: 0; padding: 0 6px 0 var(--cv2-rail-pad, 28px); box-shadow: 8px 0 10px -6px var(--cv-wash); }
#cv2Overlay .cv2-rail-next { right: 0; padding: 0 var(--cv2-rail-pad, 28px) 0 6px; margin-left: auto; box-shadow: -8px 0 10px -6px var(--cv-wash); }
#cv2Overlay .cv2-rail-prev button:disabled,
#cv2Overlay .cv2-rail-next button:disabled { opacity: .35; cursor: not-allowed; }

/* ── Body + sections ── */
#cv2Overlay .cv2-body { flex: 1; min-height: 0; overflow-y: auto; padding: 22px 28px 60px; }
#cv2Overlay .cv2-sec { display: none; animation: cv2Fade .18s ease; }
#cv2Overlay .cv2-sec[data-active="1"] { display: block; }
@keyframes cv2Fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

#cv2Overlay .cv2-sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
#cv2Overlay .cv2-sec-title {
  font-family: var(--cv-font);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--cv-ink-head);
}
#cv2Overlay .cv2-sec-sub { font-size: 12.5px; color: var(--cv-mut); margin-top: 3px; }
#cv2Overlay .cv2-sec-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── KPI strip ── */
#cv2Overlay .cv2-kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
#cv2Overlay .cv2-kpi {
  background: var(--cv-card);
  border: 1px solid var(--cv-line);
  border-radius: var(--cv-r-14);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#cv2Overlay .cv2-kpi-val {
  font-family: var(--cv-font);
  font-size: 22px;
  font-weight: 800;
  color: var(--cv-ink-head);
}
#cv2Overlay .cv2-kpi-val::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--cv-accent)); margin-right: 8px; vertical-align: middle; }
#cv2Overlay .cv2-kpi-lbl { font-size: 11px; font-weight: 700; color: var(--cv-mut); letter-spacing: .02em; }

/* ── Cards / panels ── */
#cv2Overlay .cv2-card {
  background: var(--cv-card);
  border: 1px solid var(--cv-line);
  border-radius: var(--cv-r-14);
  padding: 18px;
  margin-bottom: 14px;
}
#cv2Overlay .cv2-card-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
#cv2Overlay .cv2-card-title { font-family: var(--cv-font); font-size: 14px; font-weight: 800; color: var(--cv-ink-head); }
#cv2Overlay .cv2-card-sub { font-size: 11.5px; color: var(--cv-mut); margin-top: 2px; }

/* ── Tables ── */
#cv2Overlay .cv2-table-wrap { overflow-x: auto; border: 1px solid var(--cv-line); border-radius: var(--cv-r-12); background: var(--cv-card); }
#cv2Overlay table.cv2-table { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 560px; }
#cv2Overlay .cv2-table th {
  text-align: left;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--cv-mut);
  text-transform: uppercase;
  padding: 9px 12px;
  border-bottom: 1px solid var(--cv-line);
  background: var(--cv-wash);
  white-space: nowrap;
}
#cv2Overlay .cv2-table td { padding: 9px 12px; border-bottom: 1px solid var(--cv-line); color: var(--cv-ink-2); vertical-align: middle; }
#cv2Overlay .cv2-table tr:last-child td { border-bottom: none; }
#cv2Overlay .cv2-table tbody tr:hover td { background: rgba(36, 180, 126, .04); }
#cv2Overlay .cv2-table .num { font-variant-numeric: tabular-nums; font-weight: 700; }

/* ── Chips / badges ── */
#cv2Overlay .cv2-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .03em;
  white-space: nowrap;
}
#cv2Overlay .cv2-pill.mint { background: var(--cv-accent-soft); color: #15885C; }
#cv2Overlay .cv2-pill.gold { background: rgba(212, 168, 83, .15); color: #A97F2E; }
#cv2Overlay .cv2-pill.violet { background: rgba(124, 92, 214, .13); color: #5B3FB8; }
#cv2Overlay .cv2-pill.grey { background: #EEF1F3; color: var(--cv-mut); }
#cv2Overlay .cv2-pill.blue { background: rgba(47, 111, 237, .12); color: #2F6FED; }
#cv2Overlay .cv2-pill.red { background: rgba(224, 82, 82, .12); color: var(--cv-red); }
#cv2Overlay .cv2-pill.amber { background: rgba(232, 161, 61, .14); color: #B97A1D; }

/* ── Segmented control ── */
#cv2Overlay .cv2-seg { display: inline-flex; background: #EEF1F3; border-radius: 12px; padding: 3px; gap: 2px; }
#cv2Overlay .cv2-seg button {
  border: none;
  background: transparent;
  border-radius: 9px;
  padding: 6px 13px;
  font-family: var(--cv-font-body);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--cv-mut);
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
#cv2Overlay .cv2-seg button.active { background: var(--cv-card); color: var(--cv-ink); box-shadow: 0 1px 3px rgba(20, 32, 42, .12); }
#cv2Overlay .cv2-seg button:hover:not(.active) { color: var(--cv-ink); }

/* ── Day state dots ── */
#cv2Overlay .cv2-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; vertical-align: middle; }
#cv2Overlay .cv2-dot.working { background: var(--cv-accent); }
#cv2Overlay .cv2-dot.partial { background: var(--cv-blue); }
#cv2Overlay .cv2-dot.nonworking { background: #B7BEC5; }
#cv2Overlay .cv2-dot.holiday { background: var(--cv-amber); }
#cv2Overlay .cv2-dot.company { background: var(--cv-red); }
#cv2Overlay .cv2-dot.country { background: var(--cv-country); }

/* ── Country reference list ── */
#cv2Overlay .cv2-fw-list { display: flex; flex-direction: column; gap: 6px; }
#cv2Overlay .cv2-fw-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--cv-wash);
  border: 1px solid var(--cv-line);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--cv-ink-2);
}
#cv2Overlay .cv2-fw-row .num { min-width: 88px; }

/* ── Empty states ── */
#cv2Overlay .cv2-empty {
  text-align: center;
  padding: 46px 20px;
  color: var(--cv-mut);
}
#cv2Overlay .cv2-empty-icon { width: 54px; height: 54px; margin: 0 auto 12px; color: var(--cv-accent); }
#cv2Overlay .cv2-empty-icon svg { width: 100%; height: 100%; }
#cv2Overlay .cv2-empty-title { font-family: var(--cv-font); font-size: 14px; font-weight: 800; color: var(--cv-ink-2); margin-bottom: 4px; }
#cv2Overlay .cv2-empty-sub { font-size: 12px; }

/* ── Drawer ── */
#cv2Overlay .cv2-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 27, 46, .35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
  z-index: 950;
}
#cv2Overlay .cv2-drawer-backdrop.open { opacity: 1; pointer-events: auto; }
#cv2Overlay .cv2-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(460px, calc(100% - 24px));
  background: var(--cv-card);
  border-left: 1px solid var(--cv-line);
  box-shadow: -18px 0 44px rgba(15, 27, 46, .16);
  transform: translateX(102%);
  transition: transform .24s cubic-bezier(.32, .72, .32, 1);
  z-index: 960;
  display: flex;
  flex-direction: column;
}
#cv2Overlay .cv2-drawer.open { transform: none; }
#cv2Overlay .cv2-drawer-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 20px 12px;
  border-bottom: 1px solid var(--cv-line);
}
#cv2Overlay .cv2-drawer-kicker { font-size: 10px; font-weight: 800; letter-spacing: .2em; color: var(--cv-accent); }
#cv2Overlay .cv2-drawer-title { font-family: var(--cv-font); font-size: 17px; font-weight: 800; color: var(--cv-ink-head); margin-top: 2px; flex: 1; }
#cv2Overlay .cv2-drawer-x, #cv2Overlay .cv2-modal .cv2-drawer-x {
  border: none;
  background: #EEF1F3;
  border-radius: 9px;
  width: 30px;
  height: 30px;
  color: var(--cv-ink-2);
  cursor: pointer;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#cv2Overlay .cv2-drawer-x svg { width: 14px; height: 14px; }
#cv2Overlay .cv2-drawer-body { flex: 1; overflow-y: auto; padding: 16px 20px 24px; }
#cv2Overlay .cv2-drawer-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--cv-line);
  background: var(--cv-wash);
}

/* ── Modal ── */
#cv2Overlay .cv2-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 27, 46, .42);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
  z-index: 940;
}
#cv2Overlay .cv2-modal-backdrop.open { opacity: 1; pointer-events: auto; }
#cv2Overlay .cv2-modal {
  position: fixed;
  top: 4vh;
  left: 50%;
  transform: translate(-50%, -14px);
  width: min(1080px, calc(100% - 32px));
  max-height: 92vh;
  background: var(--cv-card);
  border: 1px solid var(--cv-line);
  border-radius: var(--cv-r-24);
  box-shadow: 0 30px 70px rgba(15, 27, 46, .28);
  opacity: 0;
  pointer-events: none;
  transition: all .22s cubic-bezier(.32, .72, .32, 1);
  z-index: 950;
  display: flex;
  flex-direction: column;
}
#cv2Overlay .cv2-modal.open { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
#cv2Overlay .cv2-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 22px 12px;
  border-bottom: 1px solid var(--cv-line);
}
#cv2Overlay .cv2-modal-title { font-family: var(--cv-font); font-size: 16px; font-weight: 800; color: var(--cv-ink-head); }
#cv2Overlay .cv2-modal-body { flex: 1; overflow-y: auto; padding: 18px 22px; }
#cv2Overlay .cv2-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 22px;
  border-top: 1px solid var(--cv-line);
  background: var(--cv-wash);
  border-radius: 0 0 var(--cv-r-24) var(--cv-r-24);
}

/* ── Forms ── */
#cv2Overlay .cv2-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
#cv2Overlay .cv2-field > label { font-size: 11px; font-weight: 800; color: var(--cv-ink-2); letter-spacing: .03em; text-transform: uppercase; }
#cv2Overlay .cv2-field input[type="text"],
#cv2Overlay .cv2-field input[type="number"],
#cv2Overlay .cv2-field input[type="date"],
#cv2Overlay .cv2-field input[type="time"],
#cv2Overlay .cv2-field select,
#cv2Overlay .cv2-input,
#cv2Overlay .cv2-select {
  border: 1px solid var(--cv-line);
  border-radius: 12px;
  padding: 9px 12px;
  font-family: var(--cv-font-body);
  font-size: 12.5px;
  color: var(--cv-ink);
  background: var(--cv-card);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  width: 100%;
}
#cv2Overlay .cv2-field input:focus, #cv2Overlay .cv2-field select:focus,
#cv2Overlay .cv2-input:focus, #cv2Overlay .cv2-select:focus {
  border-color: var(--cv-accent);
  box-shadow: 0 0 0 3px var(--cv-accent-soft);
}

/* ── Week grid (designer / preview) ── */
#cv2Overlay .cv2-week-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
}
#cv2Overlay .cv2-week-day {
  border: 1px solid var(--cv-line);
  border-radius: var(--cv-r-12);
  background: var(--cv-card);
  padding: 12px;
  text-align: center;
  min-height: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: all .15s;
}
#cv2Overlay .cv2-week-day:hover { border-color: var(--cv-accent-line); box-shadow: 0 4px 14px rgba(20, 32, 42, .07); }
#cv2Overlay .cv2-week-day.off { background: #FAFBFC; }
#cv2Overlay .cv2-week-day.off .cv2-week-name { color: var(--cv-mut); }
#cv2Overlay .cv2-week-name { font-family: var(--cv-font); font-size: 12px; font-weight: 800; color: var(--cv-ink-head); }
#cv2Overlay .cv2-week-hours { font-size: 11px; color: var(--cv-mut); font-variant-numeric: tabular-nums; }
#cv2Overlay .cv2-week-switch { display: flex; align-items: center; gap: 8px; }
#cv2Overlay .cv2-toggle {
  width: 34px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid var(--cv-line);
  background: #E4E8EA;
  position: relative;
  cursor: pointer;
  transition: all .15s;
  flex: none;
}
#cv2Overlay .cv2-toggle.on { background: var(--cv-accent); border-color: var(--cv-accent); }
#cv2Overlay .cv2-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: left .15s;
}
#cv2Overlay .cv2-toggle.on::after { left: 16px; }

/* ── Periods editor ── */
#cv2Overlay .cv2-period-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
#cv2Overlay .cv2-period-row input[type="time"] {
  border: 1px solid var(--cv-line);
  border-radius: 10px;
  padding: 7px 9px;
  font-family: var(--cv-font-body);
  font-size: 12px;
  width: 110px;
  color: var(--cv-ink);
  background: var(--cv-card);
}
#cv2Overlay .cv2-period-total { font-size: 11px; font-weight: 800; color: var(--cv-accent); min-width: 52px; }

/* ── Preview month grids ── */
#cv2Overlay .cv2-months {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}
#cv2Overlay .cv2-month {
  background: var(--cv-card);
  border: 1px solid var(--cv-line);
  border-radius: var(--cv-r-14);
  padding: 14px;
}
#cv2Overlay .cv2-month-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
#cv2Overlay .cv2-month-name { font-family: var(--cv-font); font-size: 13px; font-weight: 800; color: var(--cv-ink-head); }
#cv2Overlay .cv2-month-stats { font-size: 10.5px; color: var(--cv-mut); font-weight: 700; }
/* minmax(0, 1fr), not 1fr: a bare 1fr has an `auto` floor, so one wide cell
   widens its whole column and the month card overflows its neighbours. */
#cv2Overlay .cv2-mgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
#cv2Overlay .cv2-mdow { font-size: 9.5px; font-weight: 800; color: var(--cv-mut); text-align: center; padding: 3px 0; letter-spacing: .04em; }
#cv2Overlay .cv2-mday {
  aspect-ratio: 1;
  /* The day classes (off, working, holiday, today, dim …) are generic names
     the rest of the app styles too; pin the box so none of them can resize a
     cell. */
  min-width: 0;
  padding: 0;
  margin: 0;
  line-height: 1;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--cv-ink-2);
  cursor: pointer;
  border: 1px solid transparent;
  transition: all .12s;
}
#cv2Overlay .cv2-mday:hover { border-color: var(--cv-accent-line); }
#cv2Overlay .cv2-mday.cv2-mday-pad { background: none; cursor: default; pointer-events: none; }
#cv2Overlay .cv2-mday.off { background: #F2F4F5; color: #A8AFB6; }
#cv2Overlay .cv2-mday.working { background: var(--cv-accent-soft); color: #15885C; }
#cv2Overlay .cv2-mday.partial { background: rgba(47, 111, 237, .1); color: #2F6FED; }
#cv2Overlay .cv2-mday.holiday { background: rgba(232, 161, 61, .22); color: #B97A1D; }
#cv2Overlay .cv2-mday.company { background: rgba(224, 82, 82, .16); color: #C03939; }
#cv2Overlay .cv2-mday.country { background: rgba(124, 92, 214, .16); color: #5B3FB8; }
#cv2Overlay .cv2-mday.today { outline: 2px solid var(--cv-ink-head); outline-offset: 1px; }
#cv2Overlay .cv2-mday.dim { opacity: .45; }

/* ── Legend ── */
#cv2Overlay .cv2-legend { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; font-size: 11px; color: var(--cv-mut); margin-top: 12px; }
#cv2Overlay .cv2-leg-item { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }

/* ── Day detail panel ── */
#cv2Overlay .cv2-day-detail { background: var(--cv-card); border: 1px solid var(--cv-line); border-radius: var(--cv-r-14); padding: 16px; }
#cv2Overlay .cv2-day-detail-hdr { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
#cv2Overlay .cv2-day-detail-date { font-family: var(--cv-font); font-size: 15px; font-weight: 800; color: var(--cv-ink-head); }
#cv2Overlay .cv2-day-sources { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
#cv2Overlay .cv2-day-periods { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
#cv2Overlay .cv2-day-period {
  display: flex;
  justify-content: space-between;
  background: var(--cv-wash);
  border: 1px solid var(--cv-line);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--cv-ink-2);
}

/* ── Library list ── */
#cv2Overlay .cv2-lib { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
#cv2Overlay .cv2-lib-item {
  background: var(--cv-card);
  border: 1px solid var(--cv-line);
  border-radius: var(--cv-r-14);
  padding: 14px;
  cursor: pointer;
  transition: all .15s;
  position: relative;
}
#cv2Overlay .cv2-lib-item:hover { border-color: var(--cv-accent-line); box-shadow: 0 6px 18px rgba(20, 32, 42, .08); }
#cv2Overlay .cv2-lib-item.selected { border-color: var(--cv-accent); box-shadow: 0 0 0 3px var(--cv-accent-soft); }
#cv2Overlay .cv2-lib-name { font-family: var(--cv-font); font-size: 13.5px; font-weight: 800; color: var(--cv-ink-head); margin-bottom: 4px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
#cv2Overlay .cv2-lib-meta { font-size: 11px; color: var(--cv-mut); display: flex; flex-wrap: wrap; gap: 4px 12px; }
#cv2Overlay .cv2-lib-actions { display: flex; gap: 6px; margin-top: 10px; }

/* ── Week strip (mini 7-day preview) ── */
#cv2Overlay .cv2-wstrip { display: flex; gap: 4px; margin-top: 10px; }
#cv2Overlay .cv2-wstrip span {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: #E4E8EA;
}
#cv2Overlay .cv2-wstrip span.working { background: var(--cv-accent); }
#cv2Overlay .cv2-wstrip span.partial { background: var(--cv-blue); }

/* ── Assignment center ── */
#cv2Overlay .cv2-assign-split { display: grid; grid-template-columns: 300px 1fr; gap: 16px; min-height: 380px; }
#cv2Overlay .cv2-assign-tree {
  border: 1px solid var(--cv-line);
  border-radius: var(--cv-r-12);
  overflow-y: auto;
  max-height: 480px;
  padding: 8px;
  background: var(--cv-wash);
}
#cv2Overlay .cv2-tree-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 9px;
  font-size: 12px;
  cursor: pointer;
  color: var(--cv-ink-2);
}
#cv2Overlay .cv2-tree-row:hover { background: var(--cv-card); }
#cv2Overlay .cv2-tree-row.active { background: var(--cv-accent-soft); color: #15885C; font-weight: 700; }
#cv2Overlay .cv2-tree-row .cv2-tree-chev { color: var(--cv-mut); font-size: 9px; width: 10px; }
#cv2Overlay .cv2-tree-row .cv2-tree-count { margin-left: auto; font-size: 10px; font-weight: 800; color: var(--cv-mut); }
#cv2Overlay .cv2-act-row td { cursor: default; }
#cv2Overlay .cv2-act-row.sel td { background: var(--cv-accent-soft) !important; }
#cv2Overlay .cv2-act-table { max-height: 440px; overflow-y: auto; }
#cv2Overlay .cv2-act-check { width: 18px; height: 18px; accent-color: var(--cv-accent); cursor: pointer; }

/* ── Impact / compare ── */
#cv2Overlay .cv2-delta { font-family: var(--cv-font); font-size: 21px; font-weight: 800; }
#cv2Overlay .cv2-delta.worse { color: var(--cv-red); }
#cv2Overlay .cv2-delta.better { color: var(--cv-accent); }
#cv2Overlay .cv2-delta.flat { color: var(--cv-mut); }
#cv2Overlay .cv2-split2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
#cv2Overlay .cv2-split2 .vs { position: relative; }
#cv2Overlay .cv2-vs-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--cv-ink-head);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  border-radius: 999px;
  padding: 4px 10px;
  z-index: 2;
  border: 3px solid var(--cv-wash);
}

/* ── Validation list ── */
#cv2Overlay .cv2-issue {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--cv-r-12);
  border: 1px solid var(--cv-line);
  background: var(--cv-card);
  margin-bottom: 8px;
  font-size: 12px;
}
#cv2Overlay .cv2-issue.error { border-color: rgba(224, 82, 82, .4); }
#cv2Overlay .cv2-issue.warn { border-color: rgba(232, 161, 61, .4); }
#cv2Overlay .cv2-issue-ico { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; flex: none; }
#cv2Overlay .cv2-issue.error .cv2-issue-ico { background: rgba(224, 82, 82, .14); color: var(--cv-red); }
#cv2Overlay .cv2-issue.warn .cv2-issue-ico { background: rgba(232, 161, 61, .16); color: #B97A1D; }

/* ── Reports ── */
#cv2Overlay .cv2-report-opt { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
#cv2Overlay .cv2-export-row { display: flex; gap: 10px; flex-wrap: wrap; }

/* ════════════════════════════════════════════════════════════════════════
   OVERVIEW · WORKING WEEK · HOLIDAYS — the redesigned views
   ════════════════════════════════════════════════════════════════════════ */

/* ── Hero: the calendar in force ── */
#cv2Overlay .cv2-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: 18px;
  background: var(--cv-card);
  border: 1px solid var(--cv-line);
  border-radius: var(--cv-r-24);
  padding: 22px;
  margin-bottom: 16px;
  box-shadow: 0 10px 30px rgba(15, 27, 46, .05);
  background-image: radial-gradient(120% 90% at 0% 0%, rgba(36, 180, 126, .07), transparent 55%);
}
#cv2Overlay .cv2-hero-main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
#cv2Overlay .cv2-hero-kicker { font-size: 10.5px; font-weight: 800; letter-spacing: .2em; color: var(--cv-accent); }
#cv2Overlay .cv2-hero-name {
  font-family: var(--cv-font);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--cv-ink-head);
  line-height: 1.2;
  overflow-wrap: anywhere;
}
#cv2Overlay .cv2-hero-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
#cv2Overlay .cv2-hero-month .cv2-month { border-radius: var(--cv-r-14); background: var(--cv-wash); }
#cv2Overlay .cv2-hero-month .cv2-mday { font-size: 10px; border-radius: 6px; }

/* ── Week ribbon ── */
#cv2Overlay .cv2-ribbon { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin: 16px 0 14px; }
#cv2Overlay .cv2-ribbon-day {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 4px 9px;
  border-radius: 12px;
  background: var(--cv-accent-soft);
  border: 1px solid var(--cv-accent-line);
  min-width: 0;
}
#cv2Overlay .cv2-ribbon-day.off {
  background: repeating-linear-gradient(135deg, #F2F4F5 0 6px, #EAEDEF 6px 12px);
  border-color: var(--cv-line);
}
#cv2Overlay .cv2-ribbon-name { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #15885C; }
#cv2Overlay .cv2-ribbon-hrs { font-family: var(--cv-font); font-size: 16px; font-weight: 800; color: var(--cv-ink-head); }
#cv2Overlay .cv2-ribbon-span { font-size: 9.5px; color: var(--cv-mut); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
#cv2Overlay .cv2-ribbon-day.off .cv2-ribbon-name { color: var(--cv-mut); }
#cv2Overlay .cv2-ribbon-day.off .cv2-ribbon-hrs { color: #A8AFB6; }

/* ── Stat boxes ── */
#cv2Overlay .cv2-hero-stats { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 14px; }
#cv2Overlay .cv2-stat-val { font-family: var(--cv-font); font-size: 20px; font-weight: 800; color: var(--cv-ink-head); font-variant-numeric: tabular-nums; }
#cv2Overlay .cv2-stat-lbl { font-size: 11px; font-weight: 700; color: var(--cv-mut); }

/* ── Holiday rows (Overview, Holidays) ── */
#cv2Overlay .cv2-hol-list { display: flex; flex-direction: column; gap: 6px; }
#cv2Overlay .cv2-hol-row, #cv2Overlay .cv2-layer {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--cv-line);
  border-radius: var(--cv-r-12);
  background: var(--cv-card);
  transition: border-color .15s, background .15s;
}
#cv2Overlay .cv2-hol-row:hover { border-color: var(--cv-accent-line); background: #FCFEFD; }
#cv2Overlay .cv2-hol-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; display: inline-block; background: #B7BEC5; vertical-align: middle; }
#cv2Overlay .cv2-hol-dot.holiday { background: var(--cv-amber); }
#cv2Overlay .cv2-hol-dot.company { background: var(--cv-red); }
#cv2Overlay .cv2-hol-dot.country { background: var(--cv-country); }
#cv2Overlay .cv2-hol-dot.working { background: var(--cv-accent); }
#cv2Overlay .cv2-hol-dot.off { background: repeating-linear-gradient(135deg, #C9CFD4 0 2px, #E4E8EA 2px 4px); }
#cv2Overlay .cv2-hol-main { flex: 1; min-width: 0; }
#cv2Overlay .cv2-hol-name { font-weight: 800; font-size: 12.5px; color: var(--cv-ink-head); overflow-wrap: anywhere; }
#cv2Overlay .cv2-hol-when { font-size: 11.5px; color: var(--cv-mut); margin-top: 1px; font-variant-numeric: tabular-nums; }
#cv2Overlay .cv2-hol-in {
  flex: none; font-size: 11px; font-weight: 800; color: #15885C;
  background: var(--cv-accent-soft); border-radius: 999px; padding: 4px 10px; white-space: nowrap;
}
#cv2Overlay .cv2-weekly-note {
  display: flex; align-items: center; gap: 10px;
  line-height: 1.5;
  margin-top: 10px; padding: 9px 12px;
  border-radius: var(--cv-r-12); background: var(--cv-wash);
  font-size: 12px; color: var(--cv-ink-2);
}
#cv2Overlay .cv2-layers { display: flex; flex-direction: column; gap: 6px; }
#cv2Overlay .cv2-lib-meta a { color: var(--cv-accent); font-weight: 700; text-decoration: none; }

/* ── Working week: templates, timeline, same-hours ── */
#cv2Overlay .cv2-templates { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 14px; }
#cv2Overlay .cv2-templates-lbl { font-size: 11px; font-weight: 800; color: var(--cv-mut); letter-spacing: .04em; text-transform: uppercase; margin-right: 4px; }
#cv2Overlay .cv2-chipbtn {
  border: 1px solid var(--cv-line); background: var(--cv-card); color: var(--cv-ink-2);
  border-radius: 999px; padding: 6px 12px; font: 700 11.5px var(--cv-font-body); cursor: pointer;
  transition: all .15s;
}
#cv2Overlay .cv2-chipbtn:hover { border-color: var(--cv-accent-line); color: var(--cv-ink); }
#cv2Overlay .cv2-chipbtn.on { background: var(--cv-accent-soft); border-color: var(--cv-accent); color: #15885C; }

#cv2Overlay .cv2-tl { display: flex; flex-direction: column; gap: 6px; }
#cv2Overlay .cv2-tl-row {
  display: grid;
  grid-template-columns: 96px 38px minmax(0, 1fr) 52px auto;
  align-items: center;
  gap: 12px;
}
#cv2Overlay .cv2-tl-day { font-family: var(--cv-font); font-weight: 800; font-size: 12.5px; color: var(--cv-ink-head); }
#cv2Overlay .cv2-tl-row.off .cv2-tl-day { color: var(--cv-mut); }
#cv2Overlay .cv2-tl-track {
  position: relative; height: 34px;
  border-radius: 10px; background: var(--cv-wash); border: 1px solid var(--cv-line);
  cursor: pointer; overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
#cv2Overlay .cv2-tl-track:hover, #cv2Overlay .cv2-tl-track:focus-visible { border-color: var(--cv-accent); box-shadow: 0 0 0 3px var(--cv-accent-soft); outline: none; }
#cv2Overlay .cv2-tl-track i { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(20, 32, 42, .06); }
#cv2Overlay .cv2-tl-row.off .cv2-tl-track { background: repeating-linear-gradient(135deg, #F4F6F7 0 7px, #EDF0F2 7px 14px); }
#cv2Overlay .cv2-tl-bar {
  position: absolute; top: 5px; bottom: 5px;
  border-radius: 7px;
  background: linear-gradient(180deg, #2BC18A, var(--cv-accent));
  color: #fff; font-size: 10.5px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  white-space: nowrap; overflow: hidden;
  box-shadow: 0 2px 6px rgba(36, 180, 126, .28);
}
#cv2Overlay .cv2-tl-offlbl { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 11px; font-weight: 700; color: var(--cv-mut); }
#cv2Overlay .cv2-tl-hrs { font-family: var(--cv-font); font-weight: 800; font-size: 13px; color: var(--cv-ink-head); text-align: right; font-variant-numeric: tabular-nums; }
#cv2Overlay .cv2-tl-axis .cv2-tl-track { height: 16px; background: none; border: none; cursor: default; overflow: visible; box-shadow: none; }
#cv2Overlay .cv2-tl-axis .cv2-tl-track span { position: absolute; top: 0; transform: translateX(-50%); font-size: 9.5px; font-weight: 700; color: var(--cv-mut); font-variant-numeric: tabular-nums; }
#cv2Overlay .cv2-tl-axis .cv2-tl-track span:first-child { transform: none; }
#cv2Overlay .cv2-tl-axis .cv2-tl-track span:last-child { transform: translateX(-100%); }

#cv2Overlay .cv2-allhours {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 16px; padding: 12px 14px;
  border-radius: var(--cv-r-12); background: var(--cv-wash); border: 1px dashed var(--cv-accent-line);
}
#cv2Overlay .cv2-allhours-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
#cv2Overlay .cv2-allhours-form label { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--cv-ink-2); }
#cv2Overlay .cv2-allhours-form input[type="time"],
#cv2Overlay .cv2-hours-pair input[type="time"] {
  border: 1px solid var(--cv-line); border-radius: 10px; padding: 7px 9px;
  font: 12px var(--cv-font-body); color: var(--cv-ink); background: var(--cv-card);
}

/* ── Day editor extras ── */
#cv2Overlay .cv2-day-foot { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 14px; }
#cv2Overlay .cv2-day-total { font-family: var(--cv-font); font-weight: 800; color: var(--cv-accent); }
#cv2Overlay .cv2-check { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--cv-ink-2); cursor: pointer; }
#cv2Overlay .cv2-check input { width: 16px; height: 16px; accent-color: var(--cv-accent); }
#cv2Overlay .cv2-opt { font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--cv-mut); margin-left: 4px; }

/* ── Holidays: add form, year nav ── */
#cv2Overlay .cv2-addcard { border-color: var(--cv-accent-line); box-shadow: 0 8px 24px rgba(36, 180, 126, .07); }
#cv2Overlay .cv2-addform { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-bottom: 4px; }
#cv2Overlay .cv2-addform .cv2-field { margin-bottom: 8px; min-width: 150px; }
#cv2Overlay .cv2-addform .cv2-grow { flex: 1; min-width: 200px; }
#cv2Overlay .cv2-addform .cv2-field:last-child { min-width: 0; }
#cv2Overlay .cv2-addform .cv2-field:last-child .cv2-btn { padding-left: 22px; padding-right: 22px; }
#cv2Overlay .cv2-hol-right { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
#cv2Overlay .cv2-hours-pair { display: flex; align-items: center; gap: 6px; }
#cv2Overlay .cv2-yearnav { display: inline-flex; align-items: center; gap: 6px; font-family: var(--cv-font); font-weight: 800; color: var(--cv-ink-head); }
#cv2Overlay .cv2-yearnav span { min-width: 40px; text-align: center; }
#cv2Overlay .cv2-card-title .cv2-hol-dot { margin-right: 4px; }

/* ── Preview month stats ── */
#cv2Overlay .cv2-month-hol { color: #B97A1D; }

@media (max-width: 1200px) {
  #cv2Overlay .cv2-hero { grid-template-columns: 1fr; }
  #cv2Overlay .cv2-hero-month { max-width: 420px; }
}
@media (max-width: 700px) {
  #cv2Overlay .cv2-tl-row { grid-template-columns: 70px 38px minmax(0, 1fr) 44px; }
  #cv2Overlay .cv2-tl-row > .cv2-btn { display: none; }
  #cv2Overlay .cv2-ribbon-span { display: none; }
}

/* ── Print (reports section) ── */
#cv2PrintReport {
  display: none;
}
@media print {
  body > *:not(#cv2PrintReport) { display: none !important; }
  #cv2PrintReport {
    display: block !important;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    color: #14202A;
    padding: 24px;
  }
  #cv2PrintReport h1 { font-size: 22px; color: #0F1B2E; }
  #cv2PrintReport h3 { font-size: 14px; color: #14202A; margin-top: 18px; }
  #cv2PrintReport table { border-collapse: collapse; width: 100%; font-size: 11px; }
  #cv2PrintReport td { border: 1px solid #ddd; padding: 4px 8px; }
  #cv2PrintReport ul { font-size: 11px; color: #38434E; }
}

/* ── Responsive ── */
/* Below 1025px the burger (#apMobileBurger) floats top-left over the
   calendar's title; give the header room for it. */
@media (max-width: 1024px) {
  #cv2Overlay .cv2-head { padding-left: 72px; }
}
@media (max-width: 900px) {
  #cv2Overlay .cv2-head { padding: 16px 16px 10px 72px; }
  #cv2Overlay .cv2-rail { --cv2-rail-pad: 14px; }
  #cv2Overlay .cv2-body { padding: 16px 16px 40px; }
  #cv2Overlay .cv2-week-grid { grid-template-columns: repeat(4, 1fr); }
  #cv2Overlay .cv2-assign-split { grid-template-columns: 1fr; }
  #cv2Overlay .cv2-split2 { grid-template-columns: 1fr; }
  #cv2Overlay .cv2-vs-badge { display: none; }
}
@media (max-width: 560px) {
  #cv2Overlay .cv2-week-grid { grid-template-columns: repeat(2, 1fr); }
  #cv2Overlay .cv2-head-actions .cv2-btn { flex: 1; justify-content: center; }
}
/* tabs/gantt/styles/160-gantt-ui-pro-polish.css */
/* ============================================================================
   160-gantt-ui-pro-polish.css  —  ui-ux-pro-max "Data-Dense Dashboard" polish
   ----------------------------------------------------------------------------
   Visual-only micro-polish for the Gantt SAFE ZONE (toolbar/header controls and
   KPI cards). Reuses the existing `--g-*` tokens from 070-gantt-premium-ui-v13.css.

   PERF GUARD (non-negotiable): NO selector here targets .p6-row / .p6-left /
   .p6-right / .p6-act-bar / .p6-sum-bar / .bar* / .ga-link-node / .ga-edge-link-handle.
   Transitions are added ONLY to interactive controls that live OUTSIDE the
   per-row render hot path, so the scroll/drag/relation perf fixes are preserved.

   Loaded LAST among gantt styles, so it wins the cascade. Reversible: remove the
   single <link> in index.html.
   ============================================================================ */

/* ---- 1. Interactive affordance: cursor + smooth control transitions -------- */
body #ganttOut .p6-tb-btn,
body #ganttOut .v12-menu-trigger,
body #ganttOut .v12-switch-btn,
body #ganttOut .aipe-tool-block,
body #ganttOut .gpx-kpi[role="button"],
body #ganttOut .gpx-kpi--clickable {
  cursor: pointer;
}

/* Only color/shadow/transform transitions (GPU-friendly), never layout props. */
body #ganttOut .p6-tb-btn,
body #ganttOut .v12-menu-trigger,
body #ganttOut .v12-switch-btn {
  transition: background-color .18s ease, border-color .18s ease,
    color .18s ease, box-shadow .18s ease, transform .15s ease;
}

/* ---- 2. Hover micro-interaction (stable: no layout shift) ------------------ */
body #ganttOut .p6-tb-btn:hover,
body #ganttOut .v12-menu-trigger:hover {
  background-color: var(--g-surface-2);
  border-color: var(--g-line-2);
  color: var(--g-tx-strong);
  box-shadow: var(--g-shadow-sm);
}

body #ganttOut .p6-tb-btn:active,
body #ganttOut .v12-menu-trigger:active {
  transform: translateY(1px);
}

/* Active / selected control: subtle project accent (primary token). */
body #ganttOut .p6-tb-btn.is-active,
body #ganttOut .p6-tb-btn[aria-pressed="true"],
body #ganttOut .v12-switch-btn.is-active {
  border-color: color-mix(in srgb, var(--g-olive) 45%, var(--g-line-2));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--g-olive) 30%, transparent) inset, var(--g-shadow-sm);
}

/* ---- 3. Accessible keyboard focus rings ----------------------------------- */
body #ganttOut .p6-tb-btn:focus-visible,
body #ganttOut .v12-menu-trigger:focus-visible,
body #ganttOut .v12-switch-btn:focus-visible,
body #ganttOut .gpx-kpi[role="button"]:focus-visible {
  outline: 2px solid var(--g-olive);
  outline-offset: 2px;
  border-radius: var(--g-r3);
}

/* ---- 4. Tool-block grouping: cohesive density ----------------------------- */
body #ganttOut .aipe-tool-block {
  transition: box-shadow .18s ease, border-color .18s ease;
}

body #ganttOut .aipe-tool-block:hover {
  box-shadow: var(--g-shadow-sm);
}

/* ---- 5. KPI cards: gentle elevation on hover (header zone, not rows) ------- */
body #ganttOut .gpx-kpi {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

body #ganttOut .gpx-kpi:hover {
  transform: translateY(-1px);
  box-shadow: var(--g-shadow-md);
}

/* ---- 6. Dropdown menus: consistent elevation/surface ---------------------- */
body #ganttOut .v12-export-menu,
body #ganttOut .v12-menu-panel {
  box-shadow: var(--g-shadow-lg);
  border-radius: var(--g-r2);
  transform-origin: top center;
}

/* ============================================================================
   STATIC CHART POLISH (visible, perf-safe — colours/shape only, NO transitions
   on rows/bars, so the scroll/drag suppression system is untouched).
   ============================================================================ */

/* ---- 8. Activity bars: square edges (rounded corners removed per preference) */
body #ganttOut .p6-act-bar,
body #ganttOut .p6-sum-bar {
  border-radius: 1px !important;
}

/* Crisper readable label sitting on the bar. */
body #ganttOut .p6-act-bar .p6-bar-lbl,
body #ganttOut .p6-act-bar .bar-txt {
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

/* ---- 9. Milestones: cleaner diamond ---------------------------------------- */
body #ganttOut .p6-ms {
  filter: saturate(1.05);
}

/* ---- 10. Left table: sharper header + tabular, legible cells --------------- */
body #ganttOut .p6-hdr-left {
  letter-spacing: .04em;
  font-weight: 700;
}

/* Activity-ID column: monospaced + tabular reads like a clean code reference.
   (ID colour is left to the existing theme — it is a deliberate muted slate.) */
body #ganttOut .p6-act-row .p6-c-id {
  font-family: var(--g-num, ui-monospace, 'JetBrains Mono', Consolas, monospace);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

/* Numbers align cleanly in their columns. */
body #ganttOut .p6-c-dur,
body #ganttOut .p6-c-date {
  font-variant-numeric: tabular-nums;
}

/* Name column: a touch more weight for scan-ability. */
body #ganttOut .p6-act-row .p6-c-name {
  font-weight: 500;
}

/* ============================================================================
   12. LINK-EDIT POPUP (#ga-link-badge) — match the light project theme.
   The base style (024/051) is a dark navy badge; the rest of the Gantt runs in
   light theme, so the dark popup looked out of place. Re-skin it to the project
   surface/olive/amber system. Scoped to light theme; dark mode keeps its style.
   ============================================================================ */
body[data-gantt-theme="light"] #ga-link-badge {
  background: linear-gradient(180deg, #FFFFFF, #F8FAFC) !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .16), 0 0 0 1px rgba(255, 255, 255, .6) inset !important;
  color: #334155 !important;
}

body[data-gantt-theme="light"] #ga-link-badge .ga-link-rel {
  color: var(--g-olive-d) !important;
}

body[data-gantt-theme="light"] #ga-link-badge .ga-link-rel .ga-link-type {
  background: color-mix(in srgb, var(--g-sage) 14%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--g-sage) 42%, transparent) !important;
  color: var(--g-olive-d) !important;
}

body[data-gantt-theme="light"] #ga-link-badge .ga-link-name {
  color: #0F172A !important;
}

body[data-gantt-theme="light"] #ga-link-badge .ga-link-name.pred {
  color: #15803D !important;
}

body[data-gantt-theme="light"] #ga-link-badge .ga-link-name.succ {
  color: #B45309 !important;
}

body[data-gantt-theme="light"] #ga-link-badge .ga-link-arrow {
  color: #94A3B8 !important;
}

/* edit form inside the badge */
body[data-gantt-theme="light"] #ga-link-badge .geb-edit {
  border-top: 1px solid #E2E8F0 !important;
}

body[data-gantt-theme="light"] #ga-link-badge label.geb-lbl {
  color: #64748B !important;
}

body[data-gantt-theme="light"] #ga-link-badge select.geb-sel,
body[data-gantt-theme="light"] #ga-link-badge input.geb-inp {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
}

body[data-gantt-theme="light"] #ga-link-badge select.geb-sel:focus,
body[data-gantt-theme="light"] #ga-link-badge input.geb-inp:focus {
  border-color: var(--g-olive) !important;
}

body[data-gantt-theme="light"] #ga-link-badge .geb-btn.ok {
  border-color: rgba(22, 163, 74, .45) !important;
  color: #15803D !important;
  background: rgba(22, 163, 74, .10) !important;
}

body[data-gantt-theme="light"] #ga-link-badge .geb-btn.ok:hover {
  background: rgba(22, 163, 74, .20) !important;
}

body[data-gantt-theme="light"] #ga-link-badge .geb-btn.rm {
  border-color: rgba(220, 38, 38, .40) !important;
  color: #DC2626 !important;
  background: rgba(220, 38, 38, .08) !important;
}

body[data-gantt-theme="light"] #ga-link-badge .geb-btn.rm:hover {
  background: rgba(220, 38, 38, .18) !important;
}

body[data-gantt-theme="light"] #ga-link-badge .geb-btn.cl {
  border-color: #E2E8F0 !important;
  color: #64748B !important;
  background: #F1F5F9 !important;
}

body[data-gantt-theme="light"] #ga-link-badge .geb-btn.cl:hover {
  color: #334155 !important;
  background: #E2E8F0 !important;
}

/* ============================================================================
   13. ACTIVITY INSPECTOR — dock & reflow instead of covering the chart.
   On wide screens, when an activity is open the panel pins to the right edge
   (full height) and the Gantt shrinks to fit beside it, so nothing is hidden.
   On narrow screens it keeps the original floating behaviour.
   Engaged by body.gap-docked (added/removed in 007 open/closePanel).
   ============================================================================ */
@media (min-width: 1100px) {
  body.gap-docked #gap-panel {
    left: auto !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    max-height: 100vh !important;
    width: 440px !important;
    max-width: 440px !important;
    border-radius: 0 !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
  }

  /* Reflow the chart so it occupies the remaining width (its own h-scroll adapts). */
  body.gap-docked #ganttOut {
    margin-right: 452px;
  }
}

/* ============================================================================
   14. SURFACE THEME — light surface + white/light header & toolbar
   Background/surfaces: #F6F8F9.  Toolbar/Header: #F8FAFC.
   ============================================================================ */
:root,
body #ganttOut {
  --aipe-beige: #F6F8F9;
  --aipe-beige-2: #F1F3F4;
  --aipe-beige-3: #ECEEEF;
  --aipe-toolbar: #F8FAFC;
  --aipe-toolbar-2: #F1F5F9;
}

/* Project color source for the Gantt accent tokens.
   The legacy --g-olive / --g-sage names stay for compatibility. */
body #ganttOut {
  --aipe-toolbar-border: #E2E8F0;
  --aipe-scroll: #355F8C;
  --aipe-scroll-2: #1F4E79;
  --aipe-scroll-d: #0F1B2E;
  --g-olive: var(--aipe-scroll-2);
  --g-olive-d: var(--aipe-scroll-d);
  --g-sage: var(--aipe-scroll);
}

/* --- 14a. Surfaces -------------------------------------------------------- */
body #ganttOut {
  --g-bg: var(--aipe-beige);
  --g-surface: var(--aipe-beige);
  --g-surface-2: var(--aipe-beige-2);
  --g-surface-3: var(--aipe-beige-3);
  background: var(--aipe-beige) !important;
}

/* Header strip + chart/table headers → light (#F8FAFC) */
body[data-gantt-theme] #ganttOut .p6-hdr-left,
body[data-gantt-theme] #ganttOut .p6-hdr-right,
body[data-gantt-theme] #ganttOut .gh-l,
body[data-gantt-theme] #ganttOut .gh-r,
body[data-gantt-theme] #ganttOut .p6-head,
body[data-gantt-theme] #ganttOut .p6-mo-row,
body[data-gantt-theme] #ganttOut .p6-year-row,
body[data-gantt-theme] #ganttOut .months-row {
  background: #F8FAFC !important;
  background-image: none !important;
}

/* Header text → dark navy for readability */
body #ganttOut .p6-hdr-cell,
body #ganttOut .p6-month-lbl,
body #ganttOut .p6-year-lbl {
  color: #0F1B2E !important;
}

body #ganttOut .p6-year-row {
  border-bottom: none !important;
}

/* Activity (non-critical) rows: white → surface. Critical red tint kept. */
body #ganttOut .p6-left.p6-act-row:not(.crit),
body #ganttOut .p6-row:not(.crit) .p6-left.p6-act-row {
  background: var(--aipe-beige) !important;
}

/* Milestone/activity chart lane stays transparent so the beige shows through. */
body #ganttOut .p6-right.p6-act-row:not(.crit) {
  background: transparent !important;
}

/* --- 14b. Toolbar → grey-mint (#7DB8AD) with charcoal controls ------------ */
body #ganttOut .p6-toolbar,
body #ganttOut .p6-toolbar.aipe-gantt-tools-v2,
body[data-gantt-theme] #ganttOut .p6-toolbar,
body[data-gantt-theme="light"] #ganttOut .p6-toolbar.aipe-gantt-tools-v2,
body[data-gantt-theme="dark"] #ganttOut .p6-toolbar,
body[data-gantt-theme="dark"] #ganttOut .p6-toolbar.aipe-gantt-tools-v2 {
  background: #6BA89D !important;
  border: 1px solid #BAC0BE !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .04) !important;
}

/* Toolbar label/icon text → charcoal. */
body #ganttOut #gpx-toolset .gpx-btn,
body #ganttOut #gpx-toolset .gpx-menu-trigger,
body #ganttOut #gpx-toolset .gpx-menu-trigger>span,
body #ganttOut #gpx-toolset .gpx-menu-trigger>i,
body #ganttOut #gpx-toolset .gpx-btn>span,
body #ganttOut #gpx-toolset .gpx-tool-left>span,
body #ganttOut #gpx-toolset .gpx-label {
  color: #F6F8F9 !important;
}

body #ganttOut #gpx-toolset .gpx-btn svg,
body #ganttOut #gpx-toolset .gpx-btn svg *,
body #ganttOut #gpx-toolset .gpx-menu-trigger svg,
body #ganttOut #gpx-toolset .gpx-menu-trigger svg * {
  color: #F6F8F9 !important;
  stroke: #F6F8F9 !important;
}

body #ganttOut #gpx-toolset .gpx-toggle-btn,
body #ganttOut #gpx-toolset .gpx-toggle-btn>span {
  color: #2A2F36 !important;
}

body #ganttOut #gpx-toolset .gpx-toggle-btn svg,
body #ganttOut #gpx-toolset .gpx-toggle-btn svg * {
  color: #2A2F36 !important;
  stroke: #2A2F36 !important;
}

/* Value chips → white pill with navy text. */
body #ganttOut #gpx-toolset .gpx-menu-trigger>b,
body #ganttOut #gpx-toolset .gpx-menu>b,
body #ganttOut #gpx-toolset .gpx-toggle-btn>b,
body #ganttOut #gpx-toolset .gpx-link-btn b,
body #ganttOut #gpx-toolset #gpx-link-mode b {
  background: #FFFFFF !important;
  color: #0F1B2E !important;
  border: 1px solid rgba(15, 27, 46, .10) !important;
}

/* Link Mode → subtle translucent on light bar. */
body #ganttOut #gpx-toolset .gpx-link-btn,
body #ganttOut #gpx-toolset #gpx-link-mode {
  background: rgba(15, 27, 46, .04) !important;
  border: 1px solid rgba(15, 27, 46, .10) !important;
  color: #2A2F36 !important;
}

body #ganttOut #gpx-toolset .gpx-link-btn span,
body #ganttOut #gpx-toolset #gpx-link-mode span {
  color: #2A2F36 !important;
}

body #ganttOut #gpx-toolset .gpx-link-btn svg,
body #ganttOut #gpx-toolset .gpx-link-btn svg *,
body #ganttOut #gpx-toolset #gpx-link-mode svg,
body #ganttOut #gpx-toolset #gpx-link-mode svg * {
  color: #2A2F36 !important;
  stroke: #2A2F36 !important;
}

/* Hover: subtle dark wash. */
body #ganttOut #gpx-toolset .gpx-btn:hover,
body #ganttOut #gpx-toolset .gpx-menu-trigger:hover,
body #ganttOut #gpx-toolset .gpx-toggle-btn:hover,
body #ganttOut #gpx-toolset .gpx-link-btn:hover,
body #ganttOut #gpx-toolset #gpx-link-mode:hover {
  background: rgba(15, 27, 46, .06) !important;
  border-color: rgba(15, 27, 46, .16) !important;
}

body #ganttOut #gpx-toolset .gpx-btn:active,
body #ganttOut #gpx-toolset .gpx-menu-trigger:active,
body #ganttOut #gpx-toolset .gpx-toggle-btn:active,
body #ganttOut #gpx-toolset .gpx-link-btn:active,
body #ganttOut #gpx-toolset #gpx-link-mode:active {
  background: rgba(15, 27, 46, .10) !important;
  border-color: rgba(15, 27, 46, .22) !important;
  outline: none !important;
}

/* ── STABILITY: kill 1px press-jump ─────────────────────────────────────── */
body #ganttOut #gpx-toolset .gpx-btn,
body #ganttOut #gpx-toolset .gpx-toggle-btn,
body #ganttOut #gpx-toolset .gpx-link-btn,
body #ganttOut #gpx-toolset .gpx-icon-btn,
body #ganttOut #gpx-toolset .gpx-menu-trigger {
  transition: background .15s ease, color .15s ease, border-color .15s ease !important;
}

body #ganttOut #gpx-toolset .gpx-btn:hover,
body #ganttOut #gpx-toolset .gpx-btn:active,
body #ganttOut #gpx-toolset .gpx-toggle-btn:hover,
body #ganttOut #gpx-toolset .gpx-toggle-btn:active,
body #ganttOut #gpx-toolset .gpx-link-btn:hover,
body #ganttOut #gpx-toolset .gpx-link-btn:active,
body #ganttOut #gpx-toolset .gpx-icon-btn:hover,
body #ganttOut #gpx-toolset .gpx-icon-btn:active,
body #ganttOut #gpx-toolset .gpx-menu-trigger:hover,
body #ganttOut #gpx-toolset .gpx-menu-trigger:active,
body #ganttOut .p6-toolbar .v12-menu-trigger:active,
body #ganttOut .p6-toolbar .p6-tb-btn.v12-direct:active {
  transform: none !important;
}

/* ── PRESSED / ACTIVE STATE ─────────────────────────────────────────────── */
body #ganttOut #gpx-toolset .gpx-btn.on,
body #ganttOut #gpx-toolset .gpx-toggle-btn.on,
body #ganttOut #gpx-toolset .gpx-pill.on,
body #ganttOut #gpx-toolset .gpx-link-pill.on,
body #ganttOut #gpx-toolset .gpx-menu.open .gpx-menu-trigger {
  background: rgba(15, 27, 46, .08) !important;
  border-color: rgba(15, 27, 46, .22) !important;
  color: #2A2F36 !important;
}

/* Critical Path active → red accent. */
body #ganttOut #gpx-toolset #gpx-critical.on {
  background: rgba(220, 38, 38, .10) !important;
  border-color: rgba(220, 38, 38, .25) !important;
  color: #B91C1C !important;
}

body #ganttOut #gpx-toolset #gpx-critical.on svg,
body #ganttOut #gpx-toolset #gpx-critical.on svg * {
  color: #B91C1C !important;
  stroke: #B91C1C !important;
}

/* ── ID-styled buttons ──────────────────────────────────────────────────── */
body #ganttOut #gpx-toolset #gpx-show-logic,
body #ganttOut #gpx-toolset #gpx-link-mode,
body #ganttOut #gpx-toolset #gpx-link-mode.on,
body #ganttOut #gpx-toolset #gpx-show-logic.on {
  background: rgba(15, 27, 46, .04) !important;
  border-color: rgba(15, 27, 46, .12) !important;
  color: inherit !important;
}

body #ganttOut #gpx-toolset #gpx-show-logic span,
body #ganttOut #gpx-toolset #gpx-link-mode span {
  color: inherit !important;
}

body #ganttOut #gpx-toolset #gpx-show-logic svg,
body #ganttOut #gpx-toolset #gpx-show-logic svg *,
body #ganttOut #gpx-toolset #gpx-link-mode svg,
body #ganttOut #gpx-toolset #gpx-link-mode svg *,
body #ganttOut #gpx-toolset #gpx-critical svg,
body #ganttOut #gpx-toolset #gpx-critical svg * {
  color: currentColor !important;
  stroke: currentColor !important;
}

/* Group separators → subtle dark line. */
body #ganttOut #gpx-toolset .gpx-tool-right::before,
body #ganttOut #gpx-toolset .gpx-search::before,
body #ganttOut #gpx-toolset .gpx-tool-right::after {
  background: rgba(15, 27, 46, .08) !important;
  border-color: rgba(15, 27, 46, .08) !important;
}

body #ganttOut #gpx-toolset #gpx-search-inp {
  border-color: rgba(15, 27, 46, .14) !important;
}

body #ganttOut .p6-toolbar input {
  color: #2A2F36 !important;
}

body #ganttOut .p6-toolbar input::placeholder {
  color: rgba(15, 27, 46, .35) !important;
}

body #ganttOut #gpx-toolset .gpx-tool-right,
body #ganttOut #gpx-toolset .gpx-search,
body #ganttOut #gpx-toolset .gpx-tool-left {
  border-color: rgba(15, 27, 46, .08) !important;
}

body #ganttOut .p6-toolbar .p6-tb-sep,
body #ganttOut #gpx-toolset .gpx-sep {
  background: rgba(15, 27, 46, .08) !important;
}

/* --- 14c. KPI / Stats cards → white bg, 20px radius, soft shadow ---------- */
body #tp-gantt #gpx-stats {
  border-radius: 20px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .05) !important;
  border: 1px solid #E2E8F0 !important;
  background: #FFFFFF !important;
}

body #tp-gantt #gpx-stats .gpx-snapshot-grid {
  border-radius: 20px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .05) !important;
  border: 1px solid #E2E8F0 !important;
}

body #tp-gantt #gpx-stats .gpx-kpi {
  border-left: 1px solid #E2E8F0 !important;
  background: #FFFFFF !important;
}

body #tp-gantt #gpx-stats .gpx-kpi:first-child {
  border-left: none !important;
}

/* KPI hover lift */
body #ganttOut .gpx-kpi:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .06);
}

/* --- 14d. Left panel / activity list → clean separation ------------------- */
body #ganttOut .p6-left {
  border-right: 1px solid #E2E8F0 !important;
}

body #ganttOut .p6-act-row .p6-c-id {
  color: #64748B !important;
}

/* ============================================================================
   15. DEMO PROJECTS → compact toolbar dropdown (declutter the header)
   ============================================================================ */
body #ganttOut .p6-toolbar .aipe-demo-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
}

body #ganttOut .p6-toolbar .aipe-demo-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(15, 27, 46, .04);
  color: #2A2F36;
  border: 1px solid rgba(15, 27, 46, .10);
  border-radius: 10px;
  padding: 6px 11px;
  font: 700 12px/1 'DM Sans', system-ui, sans-serif;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}

body #ganttOut .p6-toolbar .aipe-demo-trigger:hover {
  background: rgba(15, 27, 46, .08);
  border-color: rgba(15, 27, 46, .18);
}

body #ganttOut .p6-toolbar .aipe-demo-trigger:active,
body #ganttOut .p6-toolbar .aipe-demo-trigger:focus-visible {
  background: rgba(15, 27, 46, .12);
  border-color: rgba(15, 27, 46, .24);
  outline: none;
}

body #ganttOut .p6-toolbar .aipe-demo-trigger svg {
  stroke: #2A2F36 !important;
}

body #ganttOut .p6-toolbar .aipe-demo-trigger i {
  font-style: normal;
  opacity: .8;
  font-size: 10px;
}

body #ganttOut .p6-toolbar .aipe-demo-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 70;
  min-width: 210px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .20);
}

body #ganttOut .p6-toolbar .aipe-demo-panel[hidden] {
  display: none;
}

body #ganttOut .p6-toolbar .aipe-demo-panel-title {
  font: 800 9px/1 'DM Sans', system-ui, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #64748B;
  padding: 2px 6px 5px;
}

body #ganttOut .p6-toolbar .aipe-demo-item {
  text-align: left;
  background: #FFFFFF;
  color: #0F1B2E;
  border: 1px solid rgba(15, 27, 46, .14);
  border-radius: 8px;
  padding: 8px 11px;
  font: 600 12px/1 'DM Sans', system-ui, sans-serif;
  cursor: pointer;
  white-space: nowrap;
  transition: background .14s ease, color .14s ease, border-color .14s ease;
  outline: none;
}

body #ganttOut .p6-toolbar .aipe-demo-item:hover {
  background: rgba(15, 27, 46, .05);
  color: #0F1B2E;
  border-color: rgba(15, 27, 46, .16);
}

body #ganttOut .p6-toolbar .aipe-demo-item:active,
body #ganttOut .p6-toolbar .aipe-demo-item:focus-visible {
  background: #0F1B2E;
  color: #FFFFFF;
  border-color: #0F1B2E;
  outline: none;
}

/* Original demo bar is kept in the DOM (for proxy clicks) but hidden once the
   toolbar menu is mounted. Body flag survives demo-loader rebuilds of the bar. */
body.aipe-demo-menu-on #perf-demo-bar {
  display: none !important;
}

/* ---- 7. Respect user motion preference: kill ALL added motion -------------- */
@media (prefers-reduced-motion: reduce) {

  body #ganttOut .p6-tb-btn,
  body #ganttOut .v12-menu-trigger,
  body #ganttOut .v12-switch-btn,
  body #ganttOut .aipe-tool-block,
  body #ganttOut .gpx-kpi {
    transition: none !important;
  }

  body #ganttOut .p6-tb-btn:active,
  body #ganttOut .v12-menu-trigger:active,
  body #ganttOut .gpx-kpi:hover {
    transform: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   16 · EXPORT BUTTON + LIST → MINT THEME
   ══════════════════════════════════════════════════════════════════════════ */
body[data-gantt-theme="light"] #ganttOut .v12-export-icon,
body[data-gantt-theme="dark"] #ganttOut .v12-export-icon {
  background: rgba(36, 180, 126, .14) !important;
  color: #188D68 !important;
}
body[data-gantt-theme="light"] #ganttOut .v12-export-trigger .v12-chip,
body[data-gantt-theme="dark"] #ganttOut .v12-export-trigger .v12-chip {
  background: rgba(36, 180, 126, .12) !important;
  color: #188D68 !important;
}
body[data-gantt-theme="light"] #ganttOut .v12-export-trigger {
  border-color: rgba(36, 180, 126, .35) !important;
  box-shadow: 0 9px 18px rgba(36, 180, 126, .10), inset 0 1px 0 rgba(255,255,255,.92) !important;
}
body[data-gantt-theme="light"] #ganttOut .v12-export-menu:hover .v12-export-trigger,
body[data-gantt-theme="light"] #ganttOut .v12-export-menu.open .v12-export-trigger {
  border-color: rgba(36, 180, 126, .60) !important;
  box-shadow: 0 12px 24px rgba(36, 180, 126, .14), 0 0 0 3px rgba(36, 180, 126, .10) !important;
}
/* Export list items → mint subtle hover & active */
body[data-gantt-theme="light"] #ganttOut .v12-export-item:hover,
body[data-gantt-theme="dark"] #ganttOut .v12-export-item:hover {
  background: rgba(36, 180, 126, .06) !important;
}
body[data-gantt-theme="light"] #ganttOut .v12-export-item:active,
body[data-gantt-theme="dark"] #ganttOut .v12-export-item:active {
  background: rgba(36, 180, 126, .12) !important;
}
/* Dots → refined mint palette */
body[data-gantt-theme="light"] #ganttOut .v12-export-item.excel .v12-export-dot,
body[data-gantt-theme="dark"] #ganttOut .v12-export-item.excel .v12-export-dot { background: #24B47E !important; }
body[data-gantt-theme="light"] #ganttOut .v12-export-item.pdf .v12-export-dot,
body[data-gantt-theme="dark"] #ganttOut .v12-export-item.pdf .v12-export-dot { background: #F97316 !important; }
body[data-gantt-theme="light"] #ganttOut .v12-export-item.xer .v12-export-dot,
body[data-gantt-theme="light"] #ganttOut .v12-export-item.xml .v12-export-dot,
body[data-gantt-theme="dark"] #ganttOut .v12-export-item.xer .v12-export-dot,
body[data-gantt-theme="dark"] #ganttOut .v12-export-item.xml .v12-export-dot { background: #0EA5E9 !important; }

/* Header export trigger → mint */
body .aipe-header-export-trigger {
  border-color: rgba(36, 180, 126, .30) !important;
  background: linear-gradient(180deg, #f4fdf9 0%, #e3f5ed 100%) !important;
  color: #188D68 !important;
  box-shadow: 0 8px 20px rgba(36, 180, 126, .10), inset 0 1px 0 rgba(255,255,255,.90) !important;
}
body .aipe-header-export-mark {
  background: rgba(36, 180, 126, .14) !important;
  color: #188D68 !important;
}
body .aipe-header-export:hover .aipe-header-export-trigger,
body .aipe-header-export.open .aipe-header-export-trigger {
  border-color: rgba(36, 180, 126, .60) !important;
  background: linear-gradient(180deg, #ffffff 0%, #d4f0e4 100%) !important;
  box-shadow: 0 12px 26px rgba(36, 180, 126, .14), 0 0 0 3px rgba(36, 180, 126, .10) !important;
}

/* Header export panel → elevated card with mint accent */
body .aipe-header-export-panel {
  border-color: rgba(36, 180, 126, .18) !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 54px rgba(15, 23, 42, .14), 0 0 0 1px rgba(36, 180, 126, .08) inset !important;
  padding: 10px !important;
  gap: 4px !important;
}

/* Title → crisp with divider */
body .aipe-header-export-title {
  padding: 2px 6px 10px !important;
  font: 800 9.5px/1 "DM Sans", system-ui, sans-serif !important;
  letter-spacing: .10em !important;
  color: rgba(24, 141, 104, .65) !important;
  border-bottom: 1px solid rgba(36, 180, 126, .10) !important;
  margin-bottom: 4px !important;
}

/* Items → bigger cards with proper spacing */
body .aipe-header-export .v12-export-item {
  min-height: 44px !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: #1B1A17 !important;
  font: 800 12.5px/1.2 "DM Sans", system-ui, sans-serif !important;
  transition: background .16s ease, transform .16s ease, box-shadow .16s ease !important;
}
body .aipe-header-export .v12-export-item:hover {
  background: linear-gradient(180deg, #edfaf4, #dbefe7) !important;
  transform: translateX(0) scale(1.01) !important;
  box-shadow: inset 0 0 0 1px rgba(36, 180, 126, .18) !important;
}
body .aipe-header-export .v12-export-item:active {
  background: linear-gradient(180deg, #d4f0e4, #c0e4d4) !important;
}

/* Dots → format-tag badges (colored pill with format abbreviation) */
body .aipe-header-export .v12-export-dot {
  width: auto !important;
  height: 20px !important;
  flex: 0 0 auto !important;
  border-radius: 5px !important;
  padding: 0 7px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font: 900 8.5px/1 "DM Sans", system-ui, sans-serif !important;
  letter-spacing: .04em !important;
  color: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.20) !important;
}
body .aipe-header-export .v12-export-item.excel .v12-export-dot {
  background: #24B47E !important;
}
body .aipe-header-export .v12-export-item.excel .v12-export-dot::before {
  content: 'XLSX' !important;
}
body .aipe-header-export .v12-export-item.pdf .v12-export-dot {
  background: #F97316 !important;
}
body .aipe-header-export .v12-export-item.pdf .v12-export-dot::before {
  content: 'PDF' !important;
}
body .aipe-header-export .v12-export-item.xer .v12-export-dot {
  background: #0EA5E9 !important;
}
body .aipe-header-export .v12-export-item.xer .v12-export-dot::before {
  content: 'XER' !important;
}
body .aipe-header-export .v12-export-item.xml .v12-export-dot {
  background: #8B5CF6 !important;
}
body .aipe-header-export .v12-export-item.xml .v12-export-dot::before {
  content: 'XML' !important;
}

/* Hide subtitle descriptions */
body .aipe-header-export .v12-export-item .sub {
  display: none !important;
}

/* Separator between (Excel/PDF) and (XER/XML) groups */
body .aipe-header-export .v12-export-item.xer {
  margin-top: 6px !important;
  border-top: 1px solid rgba(36, 180, 126, .08) !important;
  padding-top: 6px !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   17 · REMAINING GOLD → MINT OVERRIDES (016 / 162 / 147 / 165)
   ══════════════════════════════════════════════════════════════════════════ */

/* 016: toolbar button hover states */
body[data-gantt-theme="light"] #ganttOut .aipe-tool-block .v12-menu-trigger:hover,
body[data-gantt-theme="light"] #ganttOut .aipe-tool-block .p6-tb-btn.v12-direct:hover,
body[data-gantt-theme="light"] #ganttOut .aipe-gantt-tools-v2 #ganttLinkHandlesToggle:hover {
  border-color: rgba(36, 180, 126, .45) !important;
  background: #E8F8F0 !important;
}

/* 016: toolbar active switch / active button */
body[data-gantt-theme="light"] #ganttOut .aipe-tool-block .v12-switch-btn.active {
  background: linear-gradient(180deg, #D8F0E4, #C0E4D4) !important;
  box-shadow: 0 8px 16px rgba(36,180,126,.10), inset 0 1px 0 rgba(255,255,255,.72) !important;
}

/* 016: toolbar border */
body[data-gantt-theme="light"] #ganttOut .p6-toolbar.aipe-gantt-tools-v2 {
  border-color: rgba(36, 180, 126, .20) !important;
}

/* 016: icon button ::before badges */
body[data-gantt-theme="light"] #ganttOut .aipe-tool-block .v12-menu-trigger::before,
body[data-gantt-theme="light"] #ganttOut .aipe-tool-block .p6-tb-btn.v12-direct::before,
body[data-gantt-theme="light"] #ganttOut .aipe-gantt-tools-v2 #ganttLinkHandlesToggle::before,
body[data-gantt-theme="light"] #ganttOut .aipe-tool-block .v12-switch-btn::before {
  background: rgba(36, 180, 126, .14) !important;
  color: #188D68 !important;
}

/* 016: dark theme icon badges */
body[data-gantt-theme="dark"] #ganttOut .aipe-tool-block .v12-menu-trigger::before,
body[data-gantt-theme="dark"] #ganttOut .aipe-tool-block .p6-tb-btn.v12-direct::before,
body[data-gantt-theme="dark"] #ganttOut .aipe-gantt-tools-v2 #ganttLinkHandlesToggle::before,
body[data-gantt-theme="dark"] #ganttOut .aipe-tool-block .v12-switch-btn::before {
  background: rgba(36, 180, 126, .18) !important;
  color: #24B47E !important;
}

/* 016: demo bar borders → mint */
body[data-gantt-theme="light"] #perf-demo-bar.aipe-perf-demo-v2 > div,
body[data-gantt-theme="dark"] #perf-demo-bar.aipe-perf-demo-v2 > div {
  border-color: rgba(36, 180, 126, .20) !important;
}
body[data-gantt-theme="light"] #perf-demo-bar.aipe-perf-demo-v2 b::before,
body[data-gantt-theme="dark"] #perf-demo-bar.aipe-perf-demo-v2 b::before {
  background: rgba(36, 180, 126, .18) !important;
  color: #FFFFFF !important;
}
body[data-gantt-theme="light"] #perf-demo-bar.aipe-perf-demo-v2 b,
body[data-gantt-theme="dark"] #perf-demo-bar.aipe-perf-demo-v2 b {
  color: #24B47E !important;
}
body[data-gantt-theme="light"] #perf-demo-bar.aipe-perf-demo-v2 button:hover,
body[data-gantt-theme="dark"] #perf-demo-bar.aipe-perf-demo-v2 button:hover {
  border-color: rgba(36, 180, 126, .48) !important;
}
body[data-gantt-theme="light"] #perf-demo-bar.aipe-perf-demo-v2 button:nth-of-type(5),
body[data-gantt-theme="dark"] #perf-demo-bar.aipe-perf-demo-v2 button:nth-of-type(5) {
  background: rgba(36, 180, 126, .15) !important;
  border-color: rgba(36, 180, 126, .40) !important;
  color: #B8EACC !important;
}

/* 162: Deadline tool → mint */
body #ganttOut .aipe-deadline-toolbar {
  border-color: rgba(36, 180, 126, .45) !important;
}
body #ganttOut .aipe-deadline-toolbar button:focus-visible {
  box-shadow: 0 0 0 3px rgba(36, 180, 126, .14) !important;
}
body #ganttOut .aipe-deadline-set.active {
  box-shadow: 0 0 0 3px rgba(36, 180, 126, .15) !important;
}
body #ganttOut .aipe-deadline-item:focus-visible {
  outline: 3px solid rgba(36, 180, 126, .18) !important;
}

/* 147: Inline edit → mint border */
body #ganttOut .aipe-ie-wrap {
  border-color: rgba(36, 180, 126, .55) !important;
}

/* 165: Smart context menu → mint */
body #ganttOut .aipe-gantt-smart-menu .aipe-gsm-row.new {
  background-image: linear-gradient(90deg, rgba(36, 180, 126, .12), rgba(36, 180, 126, .06), transparent) !important;
  box-shadow: inset 0 0 0 2px rgba(15, 42, 76, .78), inset 4px 0 0 rgba(36, 180, 126, .95) !important;
}
body #ganttOut .aipe-gantt-smart-menu .aipe-gsm-badge.new {
  filter: drop-shadow(0 0 5px rgba(36, 180, 126, .28)) !important;
}
/* styles/core/00-89-plan-card.css */
/* ════════════════════════════════════════════════════════════════════════
   HOME "PLAN & USAGE" CARD (tier-colored)
   Lives here, not in services/05-auth-billing.js: that file's <style> tag is
   injected only after the Supabase lib loads, and the Home tab puts this card
   on screen before that. Injected CSS meant a bare, unstyled card on refresh.
   ════════════════════════════════════════════════════════════════════════ */
.nx-plan{position:relative;overflow:hidden;border-radius:20px;padding:22px 22px 20px;color:#eaf2ee;background:linear-gradient(150deg,#123a2b,#0F1B2E 70%);box-shadow:0 20px 44px rgba(15,27,46,.28);}
.nx-plan[data-tier="free"]{background:linear-gradient(150deg,#3b4658,#0F1B2E 75%);}
.nx-plan[data-tier="starter"]{background:linear-gradient(150deg,#12603f,#0c3b2a 72%);}
.nx-plan[data-tier="pro"]{background:linear-gradient(150deg,#f7df85 0%,#e8c766 25%,#d4af37 50%,#b8860b 75%,#8a6410 100%);color:#241a04;border:1px solid rgba(255,215,0,.5);box-shadow:0 20px 44px rgba(120,90,20,.38),0 0 32px rgba(212,175,55,.2),inset 0 1px 0 rgba(255,255,255,.5);}
.nx-plan[data-tier="pro"]:before{content:"";position:absolute;top:0;left:8%;right:8%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,215,0,.5),transparent);}
.nx-plan[data-tier="team"]{background:linear-gradient(150deg,#5B6C3F,#2A3A1A 72%);}
.nx-plan-glow{position:absolute;top:-70px;right:-50px;width:230px;height:230px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(36,180,126,.45),transparent 68%);}
.nx-plan[data-tier="pro"] .nx-plan-glow{background:radial-gradient(circle,rgba(255,238,175,.8),transparent 68%);}
.nx-plan[data-tier="team"] .nx-plan-glow{background:radial-gradient(circle,rgba(91,108,63,.42),transparent 68%);}
.nx-plan-h{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.nx-plan-eyebrow{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:rgba(255,255,255,.62);}
.nx-plan-badge{font-size:10px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:#0F1B2E;background:#fff;padding:4px 10px;border-radius:999px;}
.nx-plan-name{position:relative;z-index:1;font-size:26px;font-weight:800;letter-spacing:-.02em;color:#fff;line-height:1;}
.nx-plan-tagline{position:relative;z-index:1;font-size:12px;color:rgba(255,255,255,.66);margin-top:6px;margin-bottom:18px;}
.nx-usage{position:relative;z-index:1;margin-bottom:18px;}
.nx-usage-bar{height:9px;border-radius:999px;background:rgba(255,255,255,.16);overflow:hidden;}
.nx-usage-fill{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#24B47E,#5fe0ac);transition:width .35s;}
.nx-plan[data-tier="pro"] .nx-usage-fill{background:linear-gradient(90deg,#7a5a10,#4a3408);}
.nx-plan[data-tier="team"] .nx-usage-fill{background:linear-gradient(90deg,#7A8F5A,#A8C080);}
.nx-usage-txt{font-size:12px;color:rgba(255,255,255,.82);margin-top:9px;font-weight:600;}
.nx-plan-cta{position:relative;z-index:1;width:100%;padding:12px;border:none;border-radius:12px;font-family:inherit;font-size:13.5px;font-weight:800;cursor:pointer;color:#0F1B2E;background:#fff;transition:transform .05s,box-shadow .15s;}
.nx-plan-cta:hover{box-shadow:0 8px 20px rgba(0,0,0,.2);}
.nx-plan-cta:active{transform:translateY(1px);}
.nx-plan-savings{display:none;margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.1);text-align:center;font-size:11px;color:rgba(255,255,255,.6);line-height:1.5;position:relative;z-index:1}
.nx-plan-savings b{font-weight:800;color:#5fe0ac}
.nx-plan[data-tier="pro"] .nx-plan-savings b{color:#F5D76E}
.nx-plan[data-tier="team"] .nx-plan-savings b{color:#A8C080}
.nx-plan[data-tier="pro"] .nx-plan-eyebrow{color:#7a5a10}
.nx-plan[data-tier="pro"] .nx-plan-name{color:#201705}
.nx-plan[data-tier="pro"] .nx-plan-tagline{color:rgba(32,23,5,.7)}
.nx-plan[data-tier="pro"] .nx-usage-bar{background:rgba(32,23,5,.18)}
.nx-plan[data-tier="pro"] .nx-usage-txt{color:rgba(32,23,5,.85)}
.nx-plan[data-tier="pro"] .nx-plan-badge{color:#F5D76E;background:linear-gradient(135deg,#4a3408,#241a04);box-shadow:0 4px 14px rgba(0,0,0,.35)}
.nx-plan[data-tier="pro"] .nx-plan-cta{color:#fff;background:linear-gradient(135deg,#4a3408,#241a04);box-shadow:0 8px 20px rgba(0,0,0,.4)}
.nx-plan[data-tier="pro"] .nx-plan-cta:hover{box-shadow:0 10px 26px rgba(0,0,0,.5)}
.nx-plan[data-tier="pro"] .nx-plan-savings{border-top-color:rgba(255,238,175,.28);color:rgba(255,240,205,.78)}
.nx-plan-perks{position:relative;z-index:1;display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin:0 0 14px;}
.nx-plan-perks span{font-size:10px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;color:#F5D76E;background:rgba(255,238,175,.12);border:1px solid rgba(255,238,175,.3);padding:4px 10px;border-radius:999px;}
.nx-plan[data-tier="pro"]:after{content:"";position:absolute;top:-120%;left:-70%;width:45%;height:340%;transform:rotate(25deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);animation:nxShine 4.6s ease-in-out infinite;pointer-events:none;}
@keyframes nxShine{0%{left:-70%}40%{left:135%}100%{left:135%}}
.nx-plan[data-tier="pro"]{animation:nxGoldGlow 3.4s ease-in-out infinite;}
@keyframes nxGoldGlow{0%,100%{box-shadow:0 20px 44px rgba(120,90,20,.38),0 0 22px rgba(212,175,55,.22),inset 0 1px 0 rgba(255,255,255,.5)}50%{box-shadow:0 20px 44px rgba(120,90,20,.42),0 0 44px rgba(255,215,0,.4),inset 0 1px 0 rgba(255,255,255,.5)}}

/* Profile not loaded yet: the card keeps its size and says nothing, rather
   than telling a paying user "Free · Upgrade now" for a second. */
.nx-plan[data-tier="loading"]{background:linear-gradient(150deg,#3b4658,#0F1B2E 75%);}
.nx-plan[data-tier="loading"] .nx-plan-badge,
.nx-plan[data-tier="loading"] .nx-plan-name,
.nx-plan[data-tier="loading"] .nx-plan-tagline,
.nx-plan[data-tier="loading"] .nx-usage-txt,
.nx-plan[data-tier="loading"] .nx-plan-cta{color:transparent;background:rgba(255,255,255,.12);border-radius:8px;box-shadow:none;pointer-events:none;animation:nxPlanPulse 1.4s ease-in-out infinite;}
.nx-plan[data-tier="loading"] .nx-plan-badge{display:inline-block;width:46px;}
.nx-plan[data-tier="loading"] .nx-plan-name{width:55%;}
.nx-plan[data-tier="loading"] .nx-plan-tagline{width:70%;}
.nx-plan[data-tier="loading"] .nx-usage-txt{width:60%;}
@keyframes nxPlanPulse{0%,100%{opacity:.55}50%{opacity:1}}

@media(prefers-reduced-motion:reduce){.nx-plan[data-tier="pro"]:after{animation:none}.nx-plan[data-tier="pro"]{animation:none}.nx-plan[data-tier="loading"] *{animation:none}}

/* styles/core/00-90-responsive.css */
/* ════════════════════════════════════════════════════════════════════════
   RESPONSIVE — tablet & mobile
   Consolidates the vertical-shell layout for ≤1024px breakpoints.
   No rules in this file affect desktop (>1024px) layout.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Hamburger button + backdrop (hidden on desktop, shown ≤1024px) ── */
.ap-mobile-burger {
  position: fixed;
  top: calc(var(--app-header-top) + (var(--app-header-height) - 44px) / 2);
  left: 10px;
  z-index: 1300;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  border: 1px solid var(--sk2);
  background: var(--p);
  color: var(--st);
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(27, 26, 23, .14);
  cursor: pointer;
  touch-action: manipulation;
}
.ap-mobile-burger svg { width: 20px; height: 20px; }
.ap-mobile-burger:active { transform: scale(.94); }

.ap-mobile-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(27, 26, 23, .42);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  z-index: 1150;
}

/* ════════════════════════════════════════════════════════════════════════
   TABLET & MOBILE SHARED (≤1024px)
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* ── Document level ── */
  html, body { max-width: 100% !important; overflow-x: hidden !important; }

  /* Kill sidebar CSS variable offset */
  html body.ap-vertical-shell { --ap-side-open: 0 !important; --ap-side-closed: 0 !important; }

  /* ── Hamburger ── */
  .ap-mobile-burger { display: flex !important; }

  /* ── Header: full-width compact bar ── */
  html .hdr {
    top: var(--app-header-top) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: var(--app-header-height) !important;
    min-height: var(--app-header-height) !important;
    margin: 0 !important;
    padding: 0 12px 0 62px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    grid-template-columns: none !important;
    gap: 8px !important;
    transform: none !important;
    transition: none !important;
  }
  html body.ap-vertical-shell .hdr,
  html body.ap-vertical-shell .hdr:not(.ap-nav-collapsed),
  html body.ap-vertical-shell .hdr.ap-nav-peek,
  html body.ap-vertical-shell .hdr.ap-nav-collapsed:not(.ap-nav-peek) {
    top: var(--app-header-top) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: var(--app-header-height) !important;
    min-height: var(--app-header-height) !important;
    margin: 0 !important;
    padding: 0 12px 0 62px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    grid-template-columns: none !important;
    gap: 8px !important;
    transform: none !important;
    transition: none !important;
  }
  html body.ap-vertical-shell::before { height: var(--app-header-band) !important; }

  /* ── Header children ── */
  html body.ap-vertical-shell .hdr .hdr-search { display: none !important; }
  html body.ap-vertical-shell .hdr .logo-sub  { display: none !important; }

  html .hdr .logo {
    min-width: 0 !important;
    max-width: 62vw !important;
    flex: 0 1 auto !important;
    overflow: hidden !important;
  }
  html body.ap-vertical-shell .hdr .logo,
  html body.ap-vertical-shell .hdr:not(.ap-nav-collapsed) .logo,
  html body.ap-vertical-shell .hdr.ap-nav-peek .logo,
  html body.ap-vertical-shell .hdr.ap-nav-collapsed:not(.ap-nav-peek) .logo {
    position: static !important;
    left: auto !important;
    transform: none !important;
    margin: 0 !important;
    max-width: 62vw !important;
    min-width: 0 !important;
    flex: 0 1 auto !important;
    overflow: hidden !important;
  }

  html .hdr .logo-ico,
  html body.ap-vertical-shell .hdr .logo-ico,
  html body.ap-vertical-shell .hdr.ap-nav-collapsed:not(.ap-nav-peek) .logo-ico {
    width: var(--app-logo-w) !important;
    height: var(--app-logo-h) !important;
    min-width: 0 !important;
    max-width: var(--app-logo-w) !important;
    flex: 0 0 var(--app-logo-w) !important;
    background-size: contain !important;
    background-position: left center !important;
    background-repeat: no-repeat !important;
  }
  html .hdr .logo img,
  html .hdr .logo svg,
  html body.ap-vertical-shell .hdr .logo img,
  html body.ap-vertical-shell .hdr .logo svg {
    height: var(--app-logo-h) !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 1 auto !important;
  }

  /* ── Content area: full width, no sidebar gutter ── */
  html body .body,
  html body.ap-vertical-shell .body,
  html body.ap-vertical-shell .body:not(.ap-body-closed),
  html body.ap-vertical-shell .body.ap-body-closed {
    padding: var(--app-content-top) 18px 48px 18px !important;
    margin-left: 0 !important;
    width: 100% !important;
    transition: none !important;
  }
  .tp, #home-root, #cost-root, #tp-projlog, #tp-projlog,
  .tp > *:first-child,
  [id^="tp-"] > .panel, [id^="tp-"] > .card {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* ── Sidebar → off-canvas drawer ── */
  body.ap-vertical-shell #app-tabs.tabs {
    inset: 0 auto 0 0 !important;
    width: 290px !important;
    max-width: 86vw !important;
    border-radius: 0 !important;
    z-index: 1200 !important;
    transform: translateX(-110%) !important;
    transition: transform .3s cubic-bezier(.4, 0, .2, 1) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  body.ap-mobile-nav-open #app-tabs.tabs { transform: translateX(0) !important; }
  body.ap-mobile-nav-open .ap-mobile-backdrop { opacity: 1 !important; pointer-events: auto !important; }

  /* Hide collapse/peek toggle inside drawer */
  body.ap-vertical-shell .ap-sidebar-toggle { display: none !important; }

  /* Drawer labels */
  body.ap-mobile-nav-open #app-tabs.tabs .ap-tab-label { font-size: 13px !important; }
  body.ap-mobile-nav-open #app-tabs.tabs .ap-section-text { font-size: 10.5px !important; letter-spacing: .4px !important; }
  body.ap-mobile-nav-open #app-tabs.tabs .tab { padding: 9px 14px !important; gap: 11px !important; }

  /* ── Cards / panels breathe ── */
  body.ap-vertical-shell .panel,
  body.ap-vertical-shell .card,
  body.ap-vertical-shell .home-card { padding: 16px !important; }
  .home-grid, .home-quick-grid, .cost-kpis, .gpx-kpis, .gpx-snapshot-grid, .plog-grid { grid-template-columns: 1fr !important; }
  .home-quick-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* ── Home dashboard fills width ── */
  #home-root { max-width: 100% !important; margin: 0 !important; padding: 0 !important; }
  .home-shell { zoom: 1 !important; width: 100% !important; }
  .home-grid { gap: 14px !important; }
  .home-welcome { min-height: 0 !important; padding: 22px 18px !important; border-radius: 22px !important; }
  .home-welcome h1 { font-size: 25px !important; line-height: 1.15 !important; }
  .home-welcome p { font-size: 13.5px !important; }
  #tp-home .home-card, #tp-home .panel, #tp-home .card { width: auto !important; max-width: 100% !important; }

  /* ── pv-shell (Command Center) ── */
  .pv-shell { zoom: 1 !important; max-width: 100% !important; width: 100% !important; }
  .pv-hero { padding: 22px 20px !important; }
  .pv-hero-title { font-size: clamp(20px, 4vw, 30px) !important; }
  .pv-hero-desc { max-width: 100% !important; font-size: 13px !important; }

  /* ── Settings: stack ── */
  #tp-settings .dsett-shell { flex-direction: column !important; gap: 14px !important; }
  #tp-settings .dsett-aside { width: 100% !important; max-width: none !important; border-right: 0 !important; position: static !important; }
  #tp-settings .dsett-nav { display: flex !important; flex-direction: column !important; gap: 6px !important; }
  #tp-settings .dsett-main { width: 100% !important; }
  #tp-settings .appr-custom-grid,
  #tp-settings [class*="-grid"] { grid-template-columns: 1fr !important; }

  /* ── Data Input: single column ── */
  #tp-input .di-shell, #tp-input [class*="grid"], #tp-input .di-cols { grid-template-columns: 1fr !important; display: block !important; }
  #tp-input [class*="col"] { width: 100% !important; max-width: 100% !important; }

  /* ── Gantt: clamp scroll container ── */
  #tp-gantt #ganttOut .p6-outer,
  #tp-gantt #ganttOut #v9-gantt-outer {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  #ganttOut .p6-outer,
  #v9-gantt-outer,
  #ganttOut .gantt-shell,
  #tp-gantt .gantt-shell,
  #ganttOut .gantt-wrap,
  #tp-wbs #wbsOut,
  #tp-wbs .map-tbl-wrap,
  #tp-wbs .p6-outer {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  #ganttOut { max-width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
  #ganttOut, #v9-gantt-outer, #tp-gantt .gantt-shell, #tp-gantt .p6-outer { min-height: 60vh !important; }

  /* Gantt touch gestures */
  #tp-gantt #ganttOut .p6-outer,
  #tp-gantt #ganttOut #v9-gantt-outer,
  #tp-gantt #ganttOut .p6-grid,
  #tp-gantt #ganttOut .p6-left,
  #tp-gantt #ganttOut .p6-right,
  #tp-gantt #ganttOut .p6-hdr-left,
  #tp-gantt #ganttOut .p6-hdr-right {
    touch-action: pan-x pan-y !important;
  }
  #tp-gantt #ganttOut .p6-grid { zoom: var(--aipe-gv, 1) !important; }
  #tp-gantt #ganttOut,
  #tp-gantt #ganttOut * {
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
  }

  /* Gantt toolbar → icon-only row */
  html body #tp-gantt #ganttOut .p6-toolbar,
  html body #tp-gantt #ganttOut .p6-toolbar.aipe-gantt-tools-v2 {
    height: auto !important; min-height: 0 !important;
    align-items: center !important; flex-wrap: nowrap !important;
    padding: 5px 8px !important;
  }
  #ganttOut .p6-toolbar,
  #tp-gantt .p6-toolbar {
    flex-wrap: wrap !important; height: auto !important; min-height: 0 !important;
    gap: 6px !important; padding: 8px 10px !important; row-gap: 8px !important;
  }
  #ganttOut .p6-export-dock-safe {
    flex-wrap: wrap !important; height: auto !important; gap: 6px !important; row-gap: 6px !important;
  }
  html body #tp-gantt #ganttOut #gpx-toolset[data-gpx-version].gpx-live-tools .gpx-menu-trigger > span,
  html body #tp-gantt #ganttOut #gpx-toolset[data-gpx-version].gpx-live-tools .gpx-menu-trigger > i { display: none !important; }
  html body #tp-gantt #ganttOut #gpx-toolset[data-gpx-version].gpx-live-tools .gpx-menu-trigger,
  #tp-gantt #ganttOut #gpx-toolset .gpx-menu > button,
  #tp-gantt #ganttOut #gpx-toolset .gpx-btn.gpx-icon-btn {
    width: 38px !important; min-width: 38px !important; height: 38px !important; min-height: 38px !important;
    padding: 0 !important; justify-content: center !important; gap: 0 !important;
  }
  html body #tp-gantt #ganttOut #gpx-toolset[data-gpx-version].gpx-live-tools .gpx-menu-trigger svg,
  #tp-gantt #ganttOut #gpx-toolset .gpx-btn.gpx-icon-btn svg { width: 18px !important; height: 18px !important; }
  html body #tp-gantt #ganttOut .p6-toolbar #gpx-toolset[data-gpx-version].gpx-live-tools {
    flex-wrap: nowrap !important; justify-content: flex-start !important; align-items: center !important;
    gap: 6px !important; padding: 0 !important; height: auto !important; min-height: 0 !important;
    overflow: visible !important;
  }

  /* Gantt header compact */
  #tp-gantt #ganttOut .p6-hdr-left,
  #tp-gantt #ganttOut .p6-hdr-right { height: 30px !important; }
  #tp-gantt #ganttOut .p6-legend { padding-top: 4px !important; padding-bottom: 4px !important; }

  /* Gantt left panel: ID · Name · Finish on tablet */
  #tp-gantt #ganttOut .p6-grid { grid-template-columns: 300px 1fr !important; min-width: 0 !important; }
  #tp-gantt #ganttOut .p6-hdr-left,
  #tp-gantt #ganttOut .p6-left { grid-template-columns: 52px 1fr 84px !important; }
  #tp-gantt #ganttOut .p6-c-dur,
  #tp-gantt #ganttOut .p6-c-date:nth-of-type(4),
  #tp-gantt #ganttOut .p6-extra-col { display: none !important; }
  #tp-gantt #ganttOut .p6-c-name { font-size: 12px !important; }

  /* Gantt UX polish */
  #tp-gantt #ganttOut .p6-outer,
  #tp-gantt #ganttOut #v9-gantt-outer {
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }
  #tp-gantt #ganttOut .p6-c-name {
    -webkit-font-smoothing: antialiased !important;
    letter-spacing: .1px !important; line-height: 1.25 !important;
  }
  #tp-gantt #ganttOut .p6-c-name .p6-name-text { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
  #tp-gantt #ganttOut .p6-hdr-left { box-shadow: 0 1px 0 rgba(79,127,168,.28) !important; }
  #tp-gantt #ganttOut .p6-row .p6-left:active,
  #tp-gantt #ganttOut .p6-row .p6-right:active { filter: brightness(1.12) !important; }

  /* ── WBS Tablet ── */
  html body #tp-wbs,
  html body #tp-wbs #wbsOut {
    width: 100% !important; max-width: 100% !important; min-width: 0 !important;
    overflow-x: auto !important; -webkit-overflow-scrolling: touch !important;
  }
  html body #wbsOut .wbs-wrap.lv0 { margin-inline-start: 0px !important; --indent: 0px !important; }
  html body #wbsOut .wbs-wrap.lv1 { margin-inline-start: 14px !important; --indent: 14px !important; }
  html body #wbsOut .wbs-wrap.lv2 { margin-inline-start: 28px !important; --indent: 28px !important; }
  html body #wbsOut .wbs-wrap.lv3 { margin-inline-start: 42px !important; --indent: 42px !important; }
  html body #wbsOut .wbs-wrap.lv4 { margin-inline-start: 56px !important; --indent: 56px !important; }
  html body #wbsOut .wbs-wrap.lv5 { margin-inline-start: 70px !important; --indent: 70px !important; }
  html body #wbsOut .wbs-wrap.lv6 { margin-inline-start: 84px !important; --indent: 84px !important; }
  html body #wbsOut .wbs-wrap.lv7 { margin-inline-start: 98px !important; --indent: 98px !important; }
  html body #wbsOut .wbs-wrap.lv8,
  html body #wbsOut .wbs-wrap.lv9,
  html body #wbsOut .wbs-wrap.lv10 { margin-inline-start: 112px !important; --indent: 112px !important; }
  html body #wbsOut .wbs-wrap { height: auto !important; min-height: 46px !important; max-height: none !important; }
  html body #wbsOut .wnode,
  html body #wbsOut .wact {
    height: auto !important; min-height: 46px !important; max-height: none !important;
    padding: 6px 10px !important; gap: 8px !important; border-radius: 10px !important;
  }
  html body #wbsOut .wnode .wname,
  html body #wbsOut .wact .wname { font-size: 12.5px !important; }
  html body #wbsOut .wnode.lv0 .wname { font-size: 13.5px !important; }
  html body #wbsOut .wnode .wlevel,
  html body #wbsOut .wact .wlevel { min-width: 48px !important; padding: 3px 8px !important; font-size: 9.5px !important; }
  html body #wbsOut .wnode .wcode,
  html body #wbsOut .wact .wcode { padding: 3px 7px !important; font-size: 9.5px !important; }
  html body #wbsOut .wcnt,
  html body #wbsOut .wdur,
  html body #wbsOut .wdesc { font-size: 10px !important; padding: 3px 7px !important; }
  html body #wbsOut .tw { width: 24px !important; height: 24px !important; font-size: 10px !important; }
  html body #wbsOut .wbs-toolbar { gap: 6px !important; margin-bottom: 10px !important; }
  html body #wbsOut .wbs-btn,
  html body #wbsOut .wbs-leg { padding: 6px 10px !important; font-size: 10.5px !important; border-radius: 9px !important; }
  html body #wbsOut .wbs-level-legend { gap: 5px !important; margin-bottom: 10px !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   WIDE TABLES → allow horizontal scroll (≤900px)
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  #tp-acts, #tp-links, #tp-cost, #tp-labour, #tp-ms, #tp-cp,
  #tp-acts .panel, #tp-links .panel, #tp-labour .panel {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   PHONE (≤768px)
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* ── Open drawer: fully expanded, scrollable, labelled ── */
  body.ap-mobile-nav-open #app-tabs.tabs {
    width: 286px !important;
    max-width: 88vw !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-top: 60px !important;
    -webkit-overflow-scrolling: touch !important;
  }
  body.ap-mobile-nav-open #app-tabs.tabs .ap-tab-label,
  body.ap-mobile-nav-open #app-tabs.tabs.ap-nav-collapsed .ap-tab-label,
  body.ap-mobile-nav-open #app-tabs.tabs .ap-section-text,
  body.ap-mobile-nav-open #app-tabs.tabs.ap-nav-collapsed .ap-section-text {
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: auto !important;
    max-width: none !important;
    position: static !important;
    clip: auto !important;
    overflow: visible !important;
    white-space: nowrap !important;
    font-size: 14px !important;
  }
  body.ap-mobile-nav-open #app-tabs.tabs .tab {
    justify-content: flex-start !important;
    gap: 12px !important;
    padding: 10px 14px !important;
    width: auto !important;
  }
  body.ap-mobile-nav-open #app-tabs.tabs .ap-sidebar-foot { position: static !important; }

  /* ── Tab content padding tighter ── */
  #home-root, #cost-root, #tp-projlog { padding-left: 16px !important; padding-right: 16px !important; }

  /* ── KPI / snapshot grids 2-column ── */
  .gpx-snapshot-grid, .gpx-kpis, .cost-kpis { grid-template-columns: repeat(2, 1fr) !important; }
  .home-grid { grid-template-columns: 1fr !important; }

  /* ── Gantt toolbar labels smaller ── */
  #ganttOut .p6-toolbar .p6-tb-btn,
  #ganttOut .p6-toolbar .p6-tb-lbl,
  #ganttOut .p6-toolbar .p6-exp-btn { font-size: 11px !important; }

  /* ── WBS deep-view scroll ── */
  #tp-wbs, [id^="tp-"] .deep-wbs-scroll, .deep-wbs-tree-wrap, .vdw-scroll {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* ── WBS Mobile ── */
  html body #wbsOut .wbs-wrap.lv0 { margin-inline-start: 0px !important; --indent: 0px !important; }
  html body #wbsOut .wbs-wrap.lv1 { margin-inline-start: 8px !important; --indent: 8px !important; }
  html body #wbsOut .wbs-wrap.lv2 { margin-inline-start: 16px !important; --indent: 16px !important; }
  html body #wbsOut .wbs-wrap.lv3 { margin-inline-start: 24px !important; --indent: 24px !important; }
  html body #wbsOut .wbs-wrap.lv4 { margin-inline-start: 32px !important; --indent: 32px !important; }
  html body #wbsOut .wbs-wrap.lv5 { margin-inline-start: 40px !important; --indent: 40px !important; }
  html body #wbsOut .wbs-wrap.lv6 { margin-inline-start: 48px !important; --indent: 48px !important; }
  html body #wbsOut .wbs-wrap.lv7 { margin-inline-start: 56px !important; --indent: 56px !important; }
  html body #wbsOut .wbs-wrap.lv8,
  html body #wbsOut .wbs-wrap.lv9,
  html body #wbsOut .wbs-wrap.lv10 { margin-inline-start: 64px !important; --indent: 64px !important; }
  html body #wbsOut .wbs-tree-v10 { gap: 4px !important; }
  html body #wbsOut .wbs-wrap { height: auto !important; min-height: 42px !important; max-height: none !important; }
  html body #wbsOut .wnode,
  html body #wbsOut .wact {
    height: auto !important; min-height: 42px !important; max-height: none !important;
    padding: 5px 7px !important; gap: 5px !important; border-radius: 8px !important;
  }
  html body #wbsOut .grip { display: none !important; }
  html body #wbsOut .tw { width: 22px !important; min-width: 22px !important; height: 22px !important; font-size: 9.5px !important; border-radius: 6px !important; }
  html body #wbsOut .tw.empty { width: 12px !important; min-width: 12px !important; height: 22px !important; }
  html body #wbsOut .wnode .wlevel,
  html body #wbsOut .wact .wlevel { min-width: 36px !important; padding: 2px 5px !important; font-size: 8.5px !important; border-radius: 999px !important; line-height: 1 !important; }
  html body #wbsOut .wnode .wcode,
  html body #wbsOut .wact .wcode { padding: 2px 5px !important; font-size: 8.5px !important; border-radius: 5px !important; line-height: 1 !important; max-width: 70px !important; overflow: hidden !important; text-overflow: ellipsis !important; }
  html body #wbsOut .wnode .wname,
  html body #wbsOut .wact .wname { font-size: 11px !important; font-weight: 700 !important; line-height: 1.2 !important; min-width: 40px !important; }
  html body #wbsOut .wnode.lv0 .wname { font-size: 12px !important; }
  html body #wbsOut .wmeta { margin-inline-start: auto !important; gap: 3px !important; }
  html body #wbsOut .wcnt,
  html body #wbsOut .wdur,
  html body #wbsOut .wdesc { font-size: 8.5px !important; padding: 2px 5px !important; border-radius: 999px !important; line-height: 1 !important; }
  html body #wbsOut .wbs-toolbar { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 4px !important; margin-bottom: 8px !important; }
  html body #wbsOut .wbs-toolbar .sp { display: none !important; }
  html body #wbsOut .wbs-btn { padding: 5px 8px !important; font-size: 9.5px !important; border-radius: 7px !important; gap: 3px !important; }
  html body #wbsOut .wbs-note { font-size: 9px !important; width: 100% !important; margin-top: 2px !important; }
  html body #wbsOut .wbs-status { font-size: 9.5px !important; padding: 0 2px 4px !important; }
  html body #wbsOut .wbs-level-legend { display: flex !important; flex-wrap: wrap !important; gap: 3px !important; margin-bottom: 8px !important; max-height: 64px !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; padding-bottom: 2px !important; }
  html body #wbsOut .wbs-leg { padding: 2px 6px !important; font-size: 8.5px !important; border-radius: 999px !important; }
  html body #wbsOut .wbs-leg i { width: 8px !important; height: 8px !important; }
  html body #wbsOut .wbs-view-switch { padding: 6px 8px !important; gap: 6px !important; margin-bottom: 8px !important; flex-direction: column !important; align-items: flex-start !important; }
  html body #wbsOut .wbs-view-tabs { width: 100% !important; display: flex !important; }
  html body #wbsOut .wbs-view-tabs button { flex: 1 !important; height: 28px !important; padding: 0 6px !important; font-size: 10px !important; text-align: center !important; }
  html body #wbsOut .wbs-view-hint { font-size: 9px !important; }
  html body #wbsOut .wbs-map-panel { padding: 10px 8px !important; border-radius: 12px !important; }
  html body #wbsOut .wbs-map-head { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; padding-bottom: 8px !important; }
  html body #wbsOut .wbs-map-title > div { font-size: 13px !important; }
  html body #wbsOut .wbs-map-title p { font-size: 10px !important; }
  html body #wbsOut .wbs-map-tools { width: 100% !important; justify-content: flex-start !important; gap: 4px !important; }
  html body #wbsOut .wbs-map-tools button,
  html body #wbsOut .wbs-map-pill { height: 26px !important; padding: 0 7px !important; font-size: 9.5px !important; border-radius: 6px !important; }
  html body #wbsOut .wbs-map-tools .square { width: 26px !important; font-size: 12px !important; }
  html body #wbsOut .wbs-map-canvas { padding: 14px 10px !important; min-height: 260px !important; margin-top: 8px !important; touch-action: pan-x pan-y !important; }
  html body #wbsOut .wbs-map-card { width: 200px !important; padding: 5px 8px !important; grid-template-columns: 46px minmax(0, 1fr) !important; gap: 6px !important; border-radius: 8px !important; }
  html body #wbsOut .wbs-map-card .wbs-map-name { font-size: 11px !important; }
  html body #wbsOut .wbs-map-card .wbs-map-code { font-size: 8.5px !important; min-width: 40px !important; max-width: 46px !important; padding: 0 4px !important; }
  html body #wbsOut .wbs-map-stats { padding-top: 6px !important; gap: 4px !important; font-size: 9.5px !important; }
  html body #wbsOut .wbs-map-stats span { min-height: 20px !important; padding: 0 6px !important; }

  /* ── Touch target minimums (44×44 Apple HIG) ── */
  .tab, button, [role="button"], .home-btn, .hbtn, .hdr-icon-btn,
  .wbs-btn, .wbs-map-tools button, .wbs-view-tabs button,
  .p6-tb-btn, .gpx-menu-trigger, .gpx-btn, .gpx-icon-btn,
  .home-quick, .home-action, .pv-quick, .pv-action,
  .dsett-nav > *, .di-btn, .plog-btn,
  .ap-settings-shortcut, .ap-cmd-trigger {
    min-height: 44px !important;
  }

  /* ── Body text minimum size for readability ── */
  body, .app, .tab, .hdr, .body, .panel, .card,
  .wname, .wact, .home-welcome, .home-card, .home-quick,
  .pv-hero, .pv-card, .pv-quick, .pv-action,
  #tp-settings, #tp-home, #tp-cost, #tp-acts, #tp-links, #tp-labour,
  #tp-cp, #tp-ms, #tp-gantt, #tp-wbs, #tp-input, #tp-calendar {
    font-size: 14px !important;
  }

  /* ── Interactive spacing: adequate gaps between touch targets ── */
  .tab { gap: 10px !important; }
  .hdr { gap: 6px !important; }
  .home-quick-grid, .pv-quick-grid { gap: 10px !important; }
  .dsett-nav { gap: 8px !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   GANTT SPLITTER — PHONES ONLY (≤767px)
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  #tp-gantt #ganttOut.gvx-ganttonly .p6-grid { grid-template-columns: 1fr !important; }
  #tp-gantt #ganttOut.gvx-ganttonly .p6-left,
  #tp-gantt #ganttOut.gvx-ganttonly .p6-hdr-left { display: none !important; }
  #tp-gantt #ganttOut.gvx-details .p6-grid { grid-template-columns: 264px 1fr !important; }
  #tp-gantt #ganttOut.gvx-details .p6-hdr-left,
  #tp-gantt #ganttOut.gvx-details .p6-left { grid-template-columns: 40px 1fr 34px 58px 58px !important; }
  #tp-gantt #ganttOut.gvx-details .p6-left .p6-c-id,
  #tp-gantt #ganttOut.gvx-details .p6-left .p6-c-dur,
  #tp-gantt #ganttOut.gvx-details .p6-left .p6-c-date { display: flex !important; }
  #tp-gantt #ganttOut.gvx-details .p6-hdr-left .p6-hdr-cell:nth-child(-n+5) { display: flex !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   KPI / CARD GRIDS (≤760px)
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  .gpx-kpis, .gpx-snapshot-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .cost-kpis { grid-template-columns: repeat(2, 1fr) !important; }
  .home-grid { grid-template-columns: 1fr !important; }
  .home-quick-grid { grid-template-columns: 1fr !important; }
  .plog-grid { grid-template-columns: 1fr !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   GANTT PHONE (≤640px) — Name-only left panel
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  #tp-gantt #ganttOut .p6-grid { grid-template-columns: 144px 1fr !important; min-width: 0 !important; }
  #tp-gantt #ganttOut .p6-hdr-left,
  #tp-gantt #ganttOut .p6-left { grid-template-columns: 1fr !important; }
  #tp-gantt #ganttOut .p6-c-id,
  #tp-gantt #ganttOut .p6-c-dur,
  #tp-gantt #ganttOut .p6-c-date,
  #tp-gantt #ganttOut .p6-extra-col { display: none !important; }
  #tp-gantt #ganttOut .p6-c-name { font-size: 11.5px !important; padding-left: 10px !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   KPI STRIP 2-COLUMN (≤540px)
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 540px) {
  .pv-kpi-strip { grid-template-columns: repeat(2, 1fr) !important; }
  .pv-kpi:nth-child(3)::after { display: none !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   VERY SMALL PHONE (≤480px)
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .pv-quick-grid { grid-template-columns: repeat(2, 1fr) !important; }
  html .home-quick-grid { grid-template-columns: repeat(2, 1fr) !important; }

  .pv-hero { padding: 16px 14px !important; border-radius: 18px !important; }
  .pv-hero-title { font-size: 18px !important; }
  .pv-hero-meta { font-size: 11px !important; line-height: 1.4 !important; }

  .pv-card { padding: 16px !important; }
  .pv-kpi-strip { padding: 10px 6px !important; gap: 4px !important; }
  .pv-kpi { padding: 2px 6px !important; gap: 4px !important; }
  .pv-kpi > b { font-size: 18px !important; }
  .pv-kpi-head small { font-size: 10px !important; }

  .pv-quick { padding: 10px 10px !important; gap: 8px !important; }
  .pv-quick-ic { width: 30px !important; height: 30px !important; }
  .pv-quick-ic svg { width: 15px !important; height: 15px !important; }
  .pv-quick-txt b { font-size: 12px !important; }
  .pv-quick-txt small { font-size: 10px !important; }

  .pv-summary-body { gap: 10px !important; }
  .pv-gantt-foot { grid-template-columns: 1fr !important; }
  .pv-gantt-row { grid-template-columns: 50px minmax(0, 1fr) !important; }
  .pv-gantt-axis { padding-left: 50px !important; font-size: 8px !important; }
  .pv-gantt-lab { font-size: 9px !important; }

  .pv-donut { width: 100px !important; height: 100px !important; }
  .pv-donut-in { width: 76px !important; height: 76px !important; }
  .pv-donut-in b { font-size: 22px !important; }

  .pv-action { padding: 10px 10px !important; gap: 8px !important; }
  .pv-action-ic { width: 32px !important; height: 32px !important; }
  .pv-action-ic svg { width: 15px !important; height: 15px !important; }
  .pv-action-txt b { font-size: 12px !important; }
  .pv-action-txt small { font-size: 10px !important; }
  .pv-action-go svg { width: 15px !important; height: 15px !important; }

  .pv-snap-row { padding: 8px 0 !important; }
  .pv-snap-row > span { font-size: 11px !important; }
  .pv-snap-row > b { font-size: 12px !important; }
  .pv-snap-link { padding: 10px 12px !important; font-size: 11px !important; }

  .home-quick { padding: 10px 12px !important; min-height: 60px !important; gap: 12px !important; }
  .home-quick-icon { width: 42px !important; height: 42px !important; }
  .home-quick-icon svg { width: 18px !important; height: 18px !important; }
  .home-quick b { font-size: 13px !important; }
  .home-quick small { font-size: 11px !important; }

  .home-welcome { padding: 18px 16px !important; }
  .home-welcome h1 { font-size: 22px !important; }
  .home-welcome p { font-size: 13px !important; }
  .home-hero-actions { gap: 8px !important; }
  .home-btn { min-height: 44px !important; padding: 0 18px !important; font-size: 13px !important; }

  .home-card { padding: 16px !important; }
  .home-getstarted-flow { gap: 14px !important; }
  .home-step-icon { width: 54px !important; height: 54px !important; }
  .home-step-icon svg { width: 20px !important; height: 20px !important; }
  .home-step b { font-size: 13px !important; }
  .home-step small { font-size: 11px !important; }

  .nx-plan { padding: 16px !important; }
  .nx-plan-name { font-size: 18px !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   TOUCH DEVICES — kill hover-only affordances
   ════════════════════════════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
  #ganttOut .p6-row:hover .p6-left { filter: none !important; }
  #ganttOut .p6-row:hover .p6-right { background-color: inherit !important; }
}

/* styles/core/00-91-wbs-mobile-polish.css */
/* WBS mobile/tablet polish
   Keeps every node inside the available viewport while preserving hierarchy. */
#tp-wbs,
#tp-wbs #wbsOut,
#tp-wbs #wbsOut .wbs-tree-v10 {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#tp-wbs #wbsOut .wbs-wrap {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#tp-wbs #wbsOut .wnode,
#tp-wbs #wbsOut .wact {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#tp-wbs #wbsOut .wname {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

@media (max-width: 1024px) {
  #tp-wbs #wbsOut .wbs-tree-v10 { gap: 5px !important; }

  #tp-wbs #wbsOut .wnode,
  #tp-wbs #wbsOut .wact {
    gap: 6px !important;
    padding-inline: 8px !important;
  }

  #tp-wbs #wbsOut .wlevel {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
    min-width: 38px !important;
    padding-inline: 6px !important;
    font-size: 9px !important;
  }

  #tp-wbs #wbsOut .wcode {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
    max-width: 76px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    padding-inline: 6px !important;
    font-size: 9px !important;
  }

  #tp-wbs #wbsOut .wmeta {
    gap: 4px !important;
    margin-inline-start: 4px !important;
  }

  #tp-wbs #wbsOut .wcnt,
  #tp-wbs #wbsOut .wdur,
  #tp-wbs #wbsOut .wdesc {
    padding-inline: 6px !important;
    font-size: 9px !important;
  }
}

@media (max-width: 768px) {
  #tp-wbs #wbsOut {
    overflow-x: hidden !important;
    padding-inline: 0 !important;
  }

  #tp-wbs #wbsOut .wbs-tree-v10 { gap: 4px !important; }

  #tp-wbs #wbsOut .wbs-wrap {
    width: auto !important;
    max-width: calc(100% - var(--indent, 0px)) !important;
    min-height: 42px !important;
  }

  #tp-wbs #wbsOut .wnode,
  #tp-wbs #wbsOut .wact {
    min-height: 42px !important;
    height: 42px !important;
    gap: 8px !important;
    padding: 5px 7px !important;
    border-radius: 9px !important;
  }

  /* Use explicit columns on phones: flex shrinking was making the two
     hierarchy pills visually touch in the narrow WBS cards. */
  #tp-wbs #wbsOut .wnode {
    display: grid !important;
    grid-template-columns: 22px max-content max-content minmax(0, 1fr) !important;
    column-gap: 8px !important;
    align-items: center !important;
  }

  #tp-wbs #wbsOut .wnode > .tw { grid-column: 1 !important; }
  #tp-wbs #wbsOut .wnode > .wlevel { grid-column: 2 !important; }
  #tp-wbs #wbsOut .wnode > .wcode { grid-column: 3 !important; }
  #tp-wbs #wbsOut .wnode > .wname { grid-column: 4 !important; }

  #tp-wbs #wbsOut .wact {
    display: grid !important;
    grid-template-columns: max-content max-content minmax(0, 1fr) !important;
    column-gap: 8px !important;
    align-items: center !important;
  }

  #tp-wbs #wbsOut .wact > .wlevel { grid-column: 1 !important; }
  #tp-wbs #wbsOut .wact > .wcode { grid-column: 2 !important; }
  #tp-wbs #wbsOut .wact > .wname { grid-column: 3 !important; }

  #tp-wbs #wbsOut .grip,
  #tp-wbs #wbsOut .act-bullet {
    display: none !important;
  }

  #tp-wbs #wbsOut .tw,
  #tp-wbs #wbsOut .tw.empty {
    width: 22px !important;
    min-width: 22px !important;
    height: 22px !important;
    border-radius: 6px !important;
    font-size: 9px !important;
  }

  #tp-wbs #wbsOut .wlevel {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
    min-width: 32px !important;
    padding: 3px 5px !important;
    font-size: 8.5px !important;
  }

  #tp-wbs #wbsOut .wcode {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
    max-width: 66px !important;
    min-width: 36px !important;
    padding: 3px 5px !important;
    font-size: 8.5px !important;
  }

  #tp-wbs #wbsOut .wname,
  #tp-wbs #wbsOut .wact .wname,
  #tp-wbs #wbsOut .wnode.lv0 .wname {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
  }

  /* Keep the hierarchy badges visually separate on narrow cards. */
  #tp-wbs #wbsOut .wlevel + .wcode {
    margin-inline-start: 3px !important;
  }

  /* Counters and duration are secondary on a phone; keeping them out of the
     row gives the name a predictable, readable column instead of overlap. */
  #tp-wbs #wbsOut .wmeta {
    display: none !important;
  }

  #tp-wbs #wbsOut .wbs-toolbar,
  #tp-wbs #wbsOut .wbs-level-legend {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
}

@media (max-width: 390px) {
  #tp-wbs #wbsOut .wcode { max-width: 54px !important; min-width: 34px !important; }
  #tp-wbs #wbsOut .wname,
  #tp-wbs #wbsOut .wact .wname,
  #tp-wbs #wbsOut .wnode.lv0 .wname { font-size: 10.5px !important; }
}

@media (prefers-reduced-motion: reduce) {
  #tp-wbs #wbsOut .wnode,
  #tp-wbs #wbsOut .wact { transition: none !important; }
}

/* WBS controls: align with Nexora's navy / teal product theme. */
#tp-wbs #wbsOut .panel {
  direction: ltr !important;
  border: 1px solid #d9e5e8 !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbfc 100%) !important;
  box-shadow: 0 16px 36px rgba(15, 42, 61, .08) !important;
}

#tp-wbs #wbsOut .ptitle {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: #102a43 !important;
  font-size: 15px !important;
  font-weight: 850 !important;
  letter-spacing: -.2px !important;
}

#tp-wbs #wbsOut .ptitle .dot {
  width: 10px !important;
  height: 10px !important;
  flex: 0 0 10px !important;
  border-radius: 50% !important;
  background: #18b887 !important;
  box-shadow: 0 0 0 5px rgba(24, 184, 135, .13) !important;
}

#tp-wbs #wbsOut .wbs-count {
  color: #708496 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

#tp-wbs #wbsOut .wbs-toolbar {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  padding: 10px !important;
  border: 1px solid #dbe7e9 !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #f4faf9, #eef5f7) !important;
}

#tp-wbs #wbsOut .wbs-toolbar .wbs-btn {
  min-height: 34px !important;
  padding: 0 13px !important;
  border: 1px solid #cbdde1 !important;
  border-radius: 9px !important;
  background: #ffffff !important;
  color: #1c3b52 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  box-shadow: 0 3px 9px rgba(17, 58, 76, .06) !important;
}

#tp-wbs #wbsOut .wbs-toolbar .wbs-btn:hover {
  border-color: #1bb88a !important;
  color: #087d65 !important;
  background: #f4fffb !important;
}

#tp-wbs #wbsOut .wbs-toolbar .wbs-btn.active {
  border-color: #087d65 !important;
  background: linear-gradient(135deg, #0b5363, #087d65) !important;
  color: #ffffff !important;
  box-shadow: 0 7px 16px rgba(8, 125, 101, .2) !important;
}

#tp-wbs #wbsOut .wbs-note {
  flex: 1 1 220px !important;
  min-width: 0 !important;
  color: #6c8291 !important;
  font-size: 10.5px !important;
  font-weight: 650 !important;
  line-height: 1.4 !important;
}

#tp-wbs #wbsOut .wbs-level-legend {
  display: flex !important;
  gap: 7px !important;
  flex-wrap: wrap !important;
  padding: 2px 0 6px !important;
}

#tp-wbs #wbsOut .wbs-level-legend .wbs-leg {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 27px !important;
  padding: 0 9px !important;
  border: 1px solid #d5e2e5 !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #526a78 !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 7px rgba(17, 58, 76, .04) !important;
}

#tp-wbs #wbsOut .wbs-level-legend .wbs-leg i {
  width: 8px !important;
  height: 8px !important;
  margin-inline-end: 5px !important;
  border-radius: 50% !important;
}

@media (max-width: 768px) {
  #tp-wbs #wbsOut .panel { border-radius: 15px !important; }
  #tp-wbs #wbsOut .ptitle {
    align-items: flex-start !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
  }
  #tp-wbs #wbsOut .wbs-count {
    display: block !important;
    margin-top: 2px !important;
    font-size: 9.5px !important;
  }
  #tp-wbs #wbsOut .wbs-toolbar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 8px !important;
  }
  #tp-wbs #wbsOut .wbs-toolbar .wbs-btn {
    width: 100% !important;
    min-width: 0 !important;
    padding-inline: 6px !important;
    font-size: 10px !important;
    white-space: nowrap !important;
  }
  #tp-wbs #wbsOut .wbs-toolbar .sp { display: none !important; }
  #tp-wbs #wbsOut .wbs-note {
    grid-column: 1 / -1 !important;
    flex: none !important;
    font-size: 9px !important;
  }
  #tp-wbs #wbsOut .wbs-level-legend {
    display: none !important;
  }
}

/* Desktop tree rhythm: every WBS card gets its own row box and breathing room. */
@media (min-width: 769px) {
  #tp-wbs #wbsOut .wbs-tree-v10 {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
  }
  #tp-wbs #wbsOut .wbs-wrap {
    flex: 0 0 58px !important;
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    box-sizing: border-box !important;
  }
  #tp-wbs #wbsOut .wnode,
  #tp-wbs #wbsOut .wact {
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    box-sizing: border-box !important;
  }
}

/* styles/notifications-ui.css */
/* ════════════════════════════════════════════════════════════════════════
   Notifications UI — header dropdown, badge, rich toast, icon chips
   Shared by workspace.html and notifications.html
   ════════════════════════════════════════════════════════════════════════ */

/* ── Keyframes ── */
@keyframes nxDropIn {
  from { opacity: 0; transform: translateY(-8px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes nxItemIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@keyframes nxShimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
@keyframes nxBadgePop {
  0%   { transform: scale(.4); }
  60%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}
@keyframes nxToastBar {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}
@keyframes nxSheetUp {
  from { opacity: .4; transform: translateY(32px); }
  to   { opacity: 1; transform: none; }
}
@keyframes nxSheetDown {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(32px); }
}
@keyframes nxFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Icon chips (shared: dropdown + page + toasts) ── */
.nx-ic-bell            { background: rgba(59,130,246,.12);  color: #3b82f6; }
.nx-ic-system          { background: rgba(100,116,139,.14); color: #64748b; }
.nx-ic-project         { background: rgba(139,92,246,.13);  color: #8b5cf6; }
.nx-ic-account         { background: rgba(6,182,212,.13);   color: #06b6d4; }
.nx-ic-billing         { background: rgba(16,185,129,.13);  color: #10b981; }
.nx-ic-admin_broadcast { background: rgba(245,158,11,.14);  color: #f59e0b; }
.nx-ic-alert           { background: rgba(239,68,68,.12);   color: #ef4444; }

/* ── Header bell button ──
   Sized and coloured to sit with the rest of the header controls: a quiet
   resting state, the accent only on hover/open, and a single swing when
   something new arrives. */
html body .hdr .hdr-icon-btn[aria-label="Notifications"] {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
  color: #6B7280 !important;
}

html body .hdr .hdr-icon-btn[aria-label="Notifications"] .nx-bell-ico {
  width: 18.5px !important;
  height: 18.5px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.65 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  transform-origin: 50% 15%;
}

html body .hdr .hdr-icon-btn[aria-label="Notifications"]:hover {
  color: var(--nx-accent, #24B47E) !important;
}

html body .hdr .hdr-icon-btn[aria-label="Notifications"]:hover .nx-bell-ico,
html body .hdr .hdr-icon-btn[aria-label="Notifications"].nx-bell-open .nx-bell-ico {
  stroke-width: 1.85 !important;
}

/* Dropdown open — the control reads as pressed, not just hovered. */
html body .hdr .hdr-icon-btn[aria-label="Notifications"].nx-bell-open {
  background: #FFFFFF !important;
  color: var(--nx-accent, #24B47E) !important;
  border-color: rgba(36, 180, 126, .38) !important;
  box-shadow: 0 0 0 3px rgba(36, 180, 126, .12) !important;
}

/* One swing when a new notification lands — motion, not a size jump. */
.nx-bell-btn.nx-bell-ring .nx-bell-ico,
.hdr-icon-btn.nx-bell-ring svg {
  animation: nxBellSwing .72s cubic-bezier(.36, .07, .19, .97);
  transform-origin: 50% 15%;
}

@keyframes nxBellSwing {
  0%   { transform: rotate(0deg); }
  12%  { transform: rotate(11deg); }
  28%  { transform: rotate(-9deg); }
  44%  { transform: rotate(6deg); }
  60%  { transform: rotate(-4deg); }
  76%  { transform: rotate(2deg); }
  100% { transform: rotate(0deg); }
}

/* ── Header badge ── */
.nx-notif-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border-radius: 999px;
  background: linear-gradient(160deg, #FB7185 0%, #E11D48 100%);
  color: #fff;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: -.1px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: center;
  pointer-events: none;
  border: 2px solid #ffffff;
  z-index: 3;
  box-shadow: 0 2px 6px rgba(225, 29, 72, .35);
  animation: nxBadgePop .35s cubic-bezier(.2, .9, .3, 1.4);
}

/* Unread with no count to show (dot mode) — the plugin hides this once the
   real badge is live, but it must look right in the split second before. */
.hdr-notification-dot {
  background: linear-gradient(160deg, #FB7185 0%, #E11D48 100%) !important;
  box-shadow: 0 1px 3px rgba(225, 29, 72, .4);
}

@media (prefers-reduced-motion: reduce) {
  .nx-bell-btn.nx-bell-ring .nx-bell-ico,
  .hdr-icon-btn.nx-bell-ring svg { animation: none; }
  .nx-notif-badge { animation: none; }
}

/* ── Dropdown panel ── */
.nx-notif-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 400px;
  max-width: calc(100vw - 24px);
  max-height: min(560px, calc(100vh - var(--app-header-band) - 42px));
  background: #fff;
  border: 1px solid rgba(15,27,46,.1);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(15,27,46,.22), 0 4px 16px rgba(15,27,46,.08);
  z-index: 600;
  overflow: hidden;
  display: none;
  flex-direction: column;
  animation: nxDropIn .16s cubic-bezier(.2,.9,.3,1.1);
  font-family: 'DM Sans', system-ui, sans-serif;
}
.nx-notif-dropdown.nx-open { display: flex; }

html body.ap-vertical-shell:not(.nx-on-home) .nx-notif-dropdown { display: none !important; }

/* header */
.nx-notif-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid rgba(15,27,46,.07);
  flex-shrink: 0;
}
.nx-notif-hdr-l { display: flex; align-items: center; gap: 8px; min-width: 0; }
.nx-notif-title { font-size: 14px; font-weight: 800; color: #0F1B2E; white-space: nowrap; }
.nx-notif-new {
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(36,180,126,.12);
  color: #10b981;
  white-space: nowrap;
}
.nx-notif-markall {
  border: none;
  background: none;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  color: #24B47E;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  transition: background .12s, color .12s;
  white-space: nowrap;
}
.nx-notif-markall:hover { background: rgba(36,180,126,.08); color: #18995f; }
.nx-notif-close {
  display: none;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(15,27,46,.1);
  border-radius: 8px;
  background: #fff;
  color: #4D6E91;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all .12s;
}
.nx-notif-close:hover { border-color: #ef4444; color: #ef4444; }

/* filter chips */
.nx-notif-chips {
  display: flex;
  gap: 6px;
  padding: 10px 16px;
  overflow-x: auto;
  border-bottom: 1px solid rgba(15,27,46,.07);
  flex-shrink: 0;
  scrollbar-width: none;
}
.nx-notif-chips::-webkit-scrollbar { display: none; }
.nx-notif-chip {
  border: 1px solid rgba(15,27,46,.12);
  background: transparent;
  color: #4D6E91;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: all .14s;
  flex-shrink: 0;
}
.nx-notif-chip:hover { border-color: #24B47E; color: #24B47E; }
.nx-notif-chip.nx-on { background: #0F1B2E; border-color: #0F1B2E; color: #fff; }

/* list */
.nx-notif-body { overflow-y: auto; flex: 1; min-height: 0; }
.nx-notif-body::-webkit-scrollbar { width: 5px; }
.nx-notif-body::-webkit-scrollbar-track { background: transparent; }
.nx-notif-body::-webkit-scrollbar-thumb { background: rgba(15,27,46,.16); border-radius: 999px; }

/* skeleton */
.nx-notif-sk { display: flex; gap: 12px; padding: 13px 16px; }
.nx-notif-sk-i,
.nx-notif-sk-l div {
  background: linear-gradient(90deg, rgba(15,27,46,.05), rgba(15,27,46,.11), rgba(15,27,46,.05));
  background-size: 200% 100%;
  animation: nxShimmer 1.2s linear infinite;
}
.nx-notif-sk-i { width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; }
.nx-notif-sk-l { flex: 1; padding-top: 2px; }
.nx-notif-sk-l div { height: 10px; border-radius: 6px; margin-bottom: 8px; }
.nx-notif-sk-l div:last-child { width: 55%; margin-bottom: 0; }

/* item */
.nx-notif-item {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 1px solid rgba(15,27,46,.05);
  transition: background .12s;
  position: relative;
  animation: nxItemIn .28s ease both;
}
.nx-notif-item:hover { background: rgba(15,27,46,.03); }
.nx-notif-item.nx-unread { background: rgba(36,180,126,.05); }
.nx-notif-item.nx-unread::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: #24B47E;
}
.nx-notif-item.nx-item-out { opacity: 0; transform: translateX(16px); transition: all .18s ease; }

.nx-notif-ic {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.nx-notif-ic svg { width: 18px; height: 18px; }

.nx-notif-b { flex: 1; min-width: 0; }
.nx-notif-t { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.nx-notif-t span:first-child {
  font-size: 12.5px;
  font-weight: 700;
  color: #0F1B2E;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nx-notif-time { font-size: 10.5px; color: #4D6E91; white-space: nowrap; flex-shrink: 0; opacity: .85; }
.nx-notif-m {
  font-size: 11.5px;
  color: #2A2F36;
  line-height: 1.45;
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nx-notif-meta { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.nx-notif-ty {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: #4D6E91;
  background: rgba(15,27,46,.06);
  padding: 2px 7px;
  border-radius: 999px;
}
.nx-notif-pri {
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .4px;
  padding: 2px 7px;
  border-radius: 999px;
}
.nx-notif-pri-high  { background: rgba(184,105,62,.14); color: #B8693E; }
.nx-notif-pri-urgent{ background: rgba(239,68,68,.12); color: #ef4444; }

/* actions */
.nx-notif-act { display: flex; gap: 4px; flex-shrink: 0; opacity: 0; transition: opacity .12s; }
.nx-notif-item:hover .nx-notif-act,
.nx-notif-item:focus-within .nx-notif-act { opacity: 1; }
.nx-notif-act button {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: 1px solid rgba(15,27,46,.1);
  background: #fff;
  color: #4D6E91;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
  transition: all .1s;
}
.nx-notif-act button:hover { border-color: #24B47E; color: #24B47E; }
.nx-notif-act button.nx-del:hover { border-color: #ef4444; color: #ef4444; }
.nx-notif-act svg { width: 13px; height: 13px; }

/* empty */
.nx-notif-empty { padding: 46px 20px 40px; text-align: center; }
.nx-empty-ic {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 16px;
  background: rgba(15,27,46,.05);
  display: grid;
  place-items: center;
  color: #9AA1AA;
}
.nx-empty-ic svg { width: 26px; height: 26px; }
.nx-notif-empty b { display: block; font-size: 13.5px; color: #0F1B2E; margin-bottom: 4px; }
.nx-notif-empty p { font-size: 11.5px; color: #4D6E91; margin: 0; }

/* footer */
.nx-notif-ftr {
  padding: 10px 16px;
  border-top: 1px solid rgba(15,27,46,.07);
  text-align: center;
  flex-shrink: 0;
}
.nx-notif-ftr a {
  font-size: 12px;
  font-weight: 700;
  color: #24B47E;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color .12s;
}
.nx-notif-ftr a:hover { color: #18995f; }
.nx-notif-ftr svg { width: 13px; height: 13px; }

/* ── Rich toasts (top-right) ── */
.nx-toasts {
  position: fixed;
  top: calc(var(--app-header-band) + 12px);
  right: 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 360px;
  max-width: calc(100vw - 32px);
  pointer-events: none;
}
.nx-toast {
  pointer-events: auto;
  position: relative;
  overflow: hidden;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 12px 13px;
  background: rgba(255,255,255,.97);
  border: 1px solid rgba(15,27,46,.1);
  border-radius: 14px;
  box-shadow: 0 16px 44px rgba(15,27,46,.2);
  cursor: pointer;
  opacity: 0;
  transform: translateX(24px) scale(.97);
  transition: opacity .22s ease, transform .22s ease;
  font-family: 'DM Sans', system-ui, sans-serif;
}
.nx-toast.nx-toast-in { opacity: 1; transform: none; }
.nx-toast.nx-toast-out { opacity: 0; transform: translateX(24px) scale(.97); }
.nx-toast::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, #24B47E, #10b981);
  transform-origin: left;
  animation: nxToastBar 6s linear forwards;
}
.nx-toast:hover::after { animation-play-state: paused; }
.nx-toast-unread { border-color: rgba(36,180,126,.4); }

.nx-toast-ic {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.nx-toast-ic svg { width: 19px; height: 19px; }

.nx-toast-body { flex: 1; min-width: 0; }
.nx-toast-title { font-size: 12.5px; font-weight: 800; color: #0F1B2E; line-height: 1.3; }
.nx-toast-msg {
  font-size: 11.5px;
  color: #2A2F36;
  line-height: 1.45;
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nx-toast-time { font-size: 10px; color: #4D6E91; opacity: .85; margin-top: 4px; }
.nx-toast-close {
  width: 22px;
  height: 22px;
  border: none;
  background: rgba(15,27,46,.06);
  border-radius: 6px;
  color: #4D6E91;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: all .1s;
}
.nx-toast-close:hover { background: rgba(239,68,68,.12); color: #ef4444; }
.nx-toast-close svg { width: 12px; height: 12px; }

/* ── Mobile: full-screen sheet ── */
@media (max-width: 640px) {
  .nx-notif-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(2,6,16,.5);
    backdrop-filter: blur(2px);
    z-index: 590;
    animation: nxFadeIn .18s ease;
  }
  .nx-notif-dropdown {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    max-width: none;
    max-height: none;
    height: 100dvh;
    border-radius: 0;
    border: none;
    animation: nxSheetUp .24s cubic-bezier(.2,.9,.3,1);
  }
  .nx-notif-dropdown.nx-closing { animation: nxSheetDown .2s ease forwards; }
  .nx-notif-close { display: grid; }
  .nx-notif-body { flex: 1; }
  .nx-notif-hdr { padding-top: 18px; }
  .nx-toasts { top: calc(var(--app-header-band) + 8px); right: 10px; width: calc(100vw - 20px); }
}

/* styles/personal-offers.css */
/* Personal offers float above the workspace without blocking it. */
.nx-offer-card{box-sizing:border-box;position:fixed;right:max(24px,env(safe-area-inset-right));bottom:max(24px,env(safe-area-inset-bottom));z-index:2147482500;width:min(380px,calc(100vw - 32px));max-height:calc(100dvh - 48px);overflow:auto;border:1px solid rgba(137,214,182,.35);border-radius:22px;padding:24px;color:#f0f8fa;background:linear-gradient(145deg,#112b42 0%,#153d46 100%);box-shadow:0 24px 70px rgba(7,27,41,.3),0 2px 12px rgba(7,27,41,.15);font-family:inherit;text-align:left;animation:nx-offer-enter .28s ease-out}
.nx-offer-card *{box-sizing:border-box}.nx-offer-top{display:flex;align-items:center;gap:10px;margin-bottom:18px}.nx-offer-gift{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;color:#73e1b5;background:rgba(102,221,172,.12)}.nx-offer-eyebrow{font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#a6d8c5;padding-right:22px}.nx-offer-close{position:absolute;right:15px;top:14px;border:0;background:rgba(255,255,255,.08);color:#d3e9e0;font-size:22px;line-height:1;width:32px;height:32px;border-radius:50%;cursor:pointer}.nx-offer-card h2{font-size:20px;font-weight:750;line-height:1.3;letter-spacing:-.02em;color:#fff;margin:0 0 10px}.nx-offer-value{color:#75e4b8;font-size:68px;font-weight:850;line-height:1.05;letter-spacing:-.055em;margin:10px 0 14px;font-variant-numeric:tabular-nums}.nx-offer-value span{font-size:26px;font-weight:700;letter-spacing:-.02em;margin-left:5px}.nx-offer-card p{font-size:13px;line-height:1.7;color:#d1e3e8;margin:0 0 16px;overflow-wrap:anywhere}.nx-offer-ticket{border:1px dashed rgba(149,210,180,.45);border-radius:12px;padding:13px 14px;background:rgba(120,205,166,.04)}.nx-offer-ticket span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:#a0c8b6}.nx-offer-ticket strong{display:block;font-size:12px;color:#eff9f5;margin:5px 0;line-height:1.5}.nx-offer-ticket small{color:#b4d2c5;font-size:11px}.nx-offer-expiry{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 0;font-size:11px;color:#bad6c9}.nx-offer-expiry strong{font-variant-numeric:tabular-nums;font-size:15px;color:#e1f4ec;letter-spacing:.02em}.nx-offer-cta{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:46px;border:0;border-radius:11px;background:#72e0b2;color:#102f31;font-size:14px;font-weight:800;padding:13px 16px;cursor:pointer;transition:background .15s,transform .15s}.nx-offer-cta:hover{background:#9bedc9;transform:translateY(-1px)}.nx-offer-cta:disabled{opacity:.6;cursor:default;transform:none}.nx-offer-later{display:block;width:100%;padding:12px 8px 0;border:0;background:transparent;color:#b9d3c8;font-size:11px;cursor:pointer}.nx-offer-card button:focus-visible{outline:3px solid #c4f6df;outline-offset:3px}.nx-offer-error{font-size:12px;line-height:1.5;color:#ffd6d3;border:1px solid #ba6861;border-radius:8px;padding:9px;margin:10px 0}.nx-offer-card [hidden]{display:none!important}
@keyframes nx-offer-enter{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:520px){.nx-offer-card{right:16px;bottom:max(16px,env(safe-area-inset-bottom));padding:20px;border-radius:18px;max-height:calc(100dvh - 32px)}.nx-offer-value{font-size:58px}}
@media(prefers-reduced-motion:reduce){.nx-offer-card{animation:none}.nx-offer-cta{transition:none}.nx-offer-cta:hover{transform:none}}

/* Admin-only preview controls; the customer card above is shared unchanged. */
.nx-offer-preview-panel{position:fixed;left:24px;top:82px;z-index:2147482490;width:min(500px,calc(100vw - 48px));max-height:calc(100dvh - 106px);overflow:auto;background:#fff;border:1px solid #d9e6df;border-radius:16px;padding:20px;box-shadow:0 16px 48px rgba(15,37,51,.2);font-family:inherit;font-size:13px;line-height:1.6;color:#18384a;text-align:left}
.nx-offer-preview-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.nx-offer-preview-head button{border:0;border-radius:50%;width:30px;height:30px;background:#eef4f0;font-size:20px;cursor:pointer}.nx-offer-preview-panel p{margin:10px 0;color:#547064;font-size:12px}.nx-offer-preview-tabs{display:flex;gap:8px;margin:12px 0}.nx-offer-preview-tabs button,.nx-offer-preview-test{padding:9px 13px;border:1px solid #c9ddd2;background:#f1f8f4;color:#14553c;border-radius:8px;font:inherit;font-weight:700;cursor:pointer}.nx-offer-preview-test{display:block;margin:12px 0}.nx-offer-preview-test:disabled{opacity:.55;cursor:default}.nx-offer-preview-pass{color:#187746;display:block;margin:12px 0 5px}.nx-offer-preview-panel code{font-size:14px;letter-spacing:.05em}.nx-offer-preview-panel ul{padding-left:18px;margin:8px 0;font-size:11px;color:#446054}.nx-offer-preview-panel button:focus-visible{outline:3px solid #24b47e;outline-offset:2px}.nx-offer-preview-panel .notif-item{cursor:default}.nx-offer-preview-panel [hidden]{display:none!important}
@media(max-width:760px){.nx-offer-preview-panel{left:16px;top:84px;width:calc(100vw - 32px);max-height:42dvh}.nx-offer-preview-panel~.nx-offer-card{max-height:48dvh}}

/* styles/core/00-92-header-polish.css */
/* ══════════════════════════════════════════════════════════════════════
   GLOBAL HEADER — interaction polish
   ----------------------------------------------------------------------
   Header-only refinement layer. Nothing here touches the Gantt, the tab
   toolbars' internals, page content, navigation structure or any runtime
   behaviour — it restyles the existing .hdr children and adds one scroll
   state class. Loads last so it wins over the older header layers
   (999-ai-planner-landing-theme, nexora-theme05, 016-v12-gantt-white-theme,
   nexora-premium-redesign) without editing them.

   It introduces no new design vocabulary: sizes come from the shell tokens
   in 00-00-tokens-reset.css (--app-header-*, --app-hdr-control,
   --app-logo-*), neutrals from --nx-* and the brand gold from the values
   the Export control already uses (rgba(177,127,44,*) / #D4A53A).

   ── Why `translate:` and not `transform:` ─────────────────────────────
   .hdr, .logo and .logo-ico each carry `transform: none !important` from
   legacy layers, and in the cascade an !important author declaration beats
   a keyframe animation — so animating `transform` on them is a silent
   no-op. The independent `translate` / `scale` properties compose with
   `transform` and are not blocked, so motion on those elements uses them.
   ══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════
   1 — ENTRANCE
   Plays once, on first appearance, and needs no JavaScript: the app boots
   with <html class="docai-preinit"> holding the body at opacity 0, and
   003-runtime-visible-leak-cleaner drops that class on DOMContentLoaded.
   The selector below starts matching at that moment, which is exactly when
   the shell becomes visible — and the class is never re-added, so the
   animation cannot replay on a tab change or a re-render.

   The bar carries the rise; the search is held back one beat so the brand
   settles first.
   ══════════════════════════════════════════════════════════════════════ */
@keyframes nxHdrRise {
  from { opacity: 0; translate: 0 4px; }
  to   { opacity: 1; translate: 0 0; }
}

@keyframes nxHdrFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* `backwards`, not `both`: a finished animation with forwards fill keeps
   applying its `to` frame, and a filled animation value outranks a normal
   declaration — which silently pinned translate:0 / opacity:1 on .hdr and
   blocked the scroll-away state in section 7. `backwards` still covers the
   frame before the animation starts (what the search's 70ms delay needs)
   and then lets normal styles take back over. */
html:not(.docai-preinit) .hdr {
  animation: nxHdrRise 300ms cubic-bezier(.22, 1, .36, 1) backwards;
}

html:not(.docai-preinit) .hdr .hdr-search {
  animation: nxHdrFade 300ms cubic-bezier(.22, 1, .36, 1) 70ms backwards;
}

/* ══════════════════════════════════════════════════════════════════════
   2 — LOGO MICRO-INTERACTION
   The mark itself is untouched at rest and never moves, rotates or loops.
   On hover a gold hairline — the logo's own accent colour — wipes in
   beneath it. Pointer-guarded so touch devices never get a stuck state.

   (The wordmark is a flat raster, so the gold orbit inside it cannot be
   animated independently; this is the restrained stand-in.)
   ══════════════════════════════════════════════════════════════════════ */
@media (hover: hover) and (pointer: fine) {
  /* The logo is pointer-dead: a legacy "hide the brand while the sidebar is
     expanded" rule sets pointer-events:none, and the later layers override
     its opacity/width/transform but not that — so the mark is visible yet
     never hit-tested, and :hover can never match. pointer-events inherits,
     which is why the inner mark is dead too. Restored here (nothing under
     the logo wants the clicks) so the hover below can actually fire.
     Specificity is one `html` above the rules that switched it off. */
  html body.ap-vertical-shell .hdr .logo,
  html body.ap-vertical-shell .hdr:not(.ap-nav-collapsed) .logo,
  html body.ap-vertical-shell .hdr.ap-nav-peek .logo,
  html body.ap-vertical-shell .hdr.ap-nav-collapsed:not(.ap-nav-peek) .logo,
  html body.ap-vertical-shell .hdr.ap-nav-collapsed:not(.ap-nav-peek) .logo-ico {
    pointer-events: auto !important;
  }

  html body .hdr .logo-ico {
    position: relative;
  }

  html body .hdr .logo-ico::after {
    content: "";
    position: absolute;
    left: 1px;
    right: 1px;
    bottom: 0;
    height: 1.5px;
    border-radius: 1px;
    background: linear-gradient(90deg,
        rgba(212, 165, 58, .85) 0%,
        rgba(177, 127, 44, .55) 62%,
        rgba(177, 127, 44, 0) 100%);
    transform: scaleX(0);
    transform-origin: left center;
    opacity: 0;
    pointer-events: none;
    transition: transform 200ms cubic-bezier(.22, 1, .36, 1), opacity 140ms ease-out;
  }

  html body .hdr .logo:hover .logo-ico::after {
    transform: scaleX(1);
    opacity: 1;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   3 — SCROLL STATE ("workspace mode")
   body.nx-hdr-scrolled is set by core/header-polish.js past ~10px. The
   header keeps its height; only its seam against the workspace firms up.
   ══════════════════════════════════════════════════════════════════════ */
html body.ap-vertical-shell::before {
  transition:
    border-bottom-color 200ms ease-out,
    box-shadow 200ms ease-out,
    background-color 200ms ease-out;
}

html body.ap-vertical-shell.nx-hdr-scrolled::before {
  background: #FFFFFF !important;
  border-bottom-color: rgba(20, 60, 48, .11) !important;
  box-shadow:
    0 1px 2px rgba(26, 29, 33, .04),
    0 5px 14px rgba(26, 29, 33, .028) !important;
}

/* A couple of percent off the mark — anchored left so nothing drifts. */
html body .hdr .logo-ico {
  transform-origin: left center;
  transition: scale 200ms cubic-bezier(.22, 1, .36, 1);
}

html body.nx-hdr-scrolled .hdr .logo-ico {
  scale: .97;
}

/* ══════════════════════════════════════════════════════════════════════
   4 — EXPORT CONTROL
   Same refinement, not a redesign. Two things were off:

   • It stood at 38px against the 42px search and bell, so the right side
     never sat on one line. It now shares --app-hdr-control.
   • Its shell still carried the old marketing treatment — a 20px gold drop
     shadow, a 3px glow ring on hover, an 18px backdrop-blur on the panel —
     while the control's live identity was the app green (#188D68 label,
     rgba(36,180,126,.14) chip); the gold shell was dead weight from a
     superseded layer. The shell now borrows the neutral the search and bell
     already rest on (--nx-border over rgba(255,255,255,.70), 12px radius).

   And the mark: it was the letters "EX" in a 21px tinted chip — the biggest
   thing on the right of the bar and the only coloured one, sitting beside a
   row of thin grey icons. It is a drawn export arrow now, in the same ink,
   size and 1.9 line weight as the Close Project icon, and the green that
   rode on the chip and the hover ring goes with it, so the four controls on
   the right are one set.

   Behaviour and the export actions are untouched.
   ══════════════════════════════════════════════════════════════════════ */
html body.ap-vertical-shell .hdr .aipe-header-export-trigger {
  height: var(--app-hdr-control) !important;
  min-height: var(--app-hdr-control) !important;
  gap: 9px !important;
  padding: 0 13px 0 10px !important;
  border-radius: 12px !important;
  border: 1px solid var(--nx-border) !important;
  background: rgba(255, 255, 255, .70) !important;
  box-shadow: none !important;
  transition:
    background-color 160ms ease-out,
    border-color 160ms ease-out,
    box-shadow 160ms ease-out,
    transform 160ms cubic-bezier(.22, 1, .36, 1) !important;
}

html body.ap-vertical-shell .hdr .aipe-header-export:hover .aipe-header-export-trigger,
html body.ap-vertical-shell .hdr .aipe-header-export.open .aipe-header-export-trigger {
  transform: translateY(-1px) !important;
  background: #FFFFFF !important;
  border-color: rgba(26, 29, 33, .16) !important;
  box-shadow: 0 2px 6px rgba(26, 29, 33, .05) !important;
}

/* Pressed — the control gives way, briefly and without bounce. */
html body.ap-vertical-shell .hdr .aipe-header-export .aipe-header-export-trigger:active {
  transform: translateY(0) !important;
  background: #F3F5F6 !important;
  border-color: rgba(26, 29, 33, .16) !important;
  box-shadow: inset 0 1px 2px rgba(26, 29, 33, .07) !important;
  transition-duration: 70ms !important;
}

html body.ap-vertical-shell .hdr .aipe-header-export-trigger:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(36, 180, 126, .22) !important;
}

/* The label reads as text, not as a brand: the ink of the bar. */
html body.ap-vertical-shell .hdr .aipe-header-export-trigger,
html body.ap-vertical-shell .hdr .aipe-header-export-text {
  color: var(--nx-text, #1A1D21) !important;
  font-weight: 600 !important;
}

/* The mark is the drawing itself — no chip, no tint, no box. */
html body.ap-vertical-shell .hdr .aipe-header-export-mark {
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  background: none !important;
  color: #6B7280 !important;
  font-size: 0 !important;
}

html body.ap-vertical-shell .hdr .aipe-header-export-mark svg {
  display: block;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html body.ap-vertical-shell .hdr .aipe-header-export:hover .aipe-header-export-mark,
html body.ap-vertical-shell .hdr .aipe-header-export.open .aipe-header-export-mark {
  color: var(--nx-text, #1A1D21) !important;
}

html body.ap-vertical-shell .hdr .aipe-header-export-caret {
  color: #9AA3AE !important;
  font-size: 9px !important;
}

/* Opacity + translateY only: the scale-in and the blur are what made it
   read as a website menu rather than an application one. */
html body.ap-vertical-shell .hdr .aipe-header-export-panel {
  top: calc(100% + 8px) !important;
  border-radius: 14px !important;
  border-color: var(--nx-border) !important;
  background: #FFFFFF !important;
  box-shadow: 0 12px 28px rgba(26, 29, 33, .12) !important;
  backdrop-filter: none !important;
  transform: translateY(6px) !important;
  transition:
    opacity 165ms ease-out,
    transform 165ms cubic-bezier(.22, 1, .36, 1),
    visibility 165ms ease-out !important;
}

html body.ap-vertical-shell .hdr .aipe-header-export.open .aipe-header-export-panel,
html body.ap-vertical-shell .hdr .aipe-header-export:focus-within .aipe-header-export-panel {
  transform: translateY(0) !important;
}

html body.ap-vertical-shell .hdr .aipe-header-export .v12-export-item:hover {
  background: rgba(36, 180, 126, .07) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ══════════════════════════════════════════════════════════════════════
   5 — SEARCH
   The compact-pill-that-opens behaviour is the existing implementation and
   is kept; this only lightens the resting state, smooths the opening onto
   one curve, and stops the opening from shoving anything sideways.
   ══════════════════════════════════════════════════════════════════════ */
html body.ap-vertical-shell .hdr .hdr-search {
  box-shadow: none !important;
  transition:
    flex-basis 200ms cubic-bezier(.22, 1, .36, 1),
    width 200ms cubic-bezier(.22, 1, .36, 1),
    min-width 200ms cubic-bezier(.22, 1, .36, 1),
    max-width 200ms cubic-bezier(.22, 1, .36, 1),
    padding 180ms ease-out,
    background-color 160ms ease-out,
    border-color 160ms ease-out,
    box-shadow 180ms ease-out !important;
}

html body.ap-vertical-shell .hdr .hdr-search:hover {
  background: #FFFFFF !important;
  border-color: rgba(26, 29, 33, .16) !important;
  box-shadow: 0 2px 6px rgba(26, 29, 33, .05) !important;
}

html body.ap-vertical-shell .hdr .hdr-search:focus-within {
  box-shadow: 0 0 0 3px rgba(36, 180, 126, .16) !important;
}

/* "Expands slightly": 264px still holds a comfortable query while keeping
   the opening gesture — and anything it displaces — modest. */
html body.ap-vertical-shell .hdr .hdr-search:hover,
html body.ap-vertical-shell .hdr .hdr-search:focus-within {
  flex-basis: 264px !important;
  width: 264px !important;
  min-width: 264px !important;
  max-width: 264px !important;
  padding: 0 15px !important;
}

/* Keyboard reaches the field before it is wide enough to show a caret;
   the focus-within expansion above already handles that, this just keeps
   the ring on the pill rather than the bare input. */
html body.ap-vertical-shell .hdr .hdr-search input:focus,
html body.ap-vertical-shell .hdr .hdr-search input:focus-visible {
  outline: none !important;
}

/* No layout jump on open.
   Without tools the pill already absorbs the auto gap to its left, so
   opening moves nothing. With a tab toolbar present the row was packed
   left, which left the bell floating mid-header AND let the opening pill
   shove it further right. Pinning the actions to the right edge fixes the
   resting alignment and the jump in one go. */
html body.ap-vertical-shell .hdr.nx-has-tools .hdr-actions {
  margin-left: auto !important;
}

/* Icon buttons share the Export easing so the whole right side agrees. */
html body.ap-vertical-shell .hdr .hdr-icon-btn {
  transition:
    background-color 160ms ease-out,
    color 160ms ease-out,
    border-color 160ms ease-out,
    box-shadow 160ms ease-out !important;
}

html body.ap-vertical-shell .hdr .hdr-icon-btn:active {
  background: #F3F5F6 !important;
  box-shadow: inset 0 1px 2px rgba(26, 29, 33, .07) !important;
  transition-duration: 70ms !important;
}

/* ══════════════════════════════════════════════════════════════════════
   6 — REDUCED MOTION
   Everything above degrades to its end state instantly. Nothing that
   conveys state is removed — only the movement is.
   ══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  /* Only cancel the entrance. Do NOT pin opacity/translate here: with
     !important they outrank the scroll-away state in section 7 and the
     header could never leave, while the content still moved up under it. */
  html:not(.docai-preinit) .hdr,
  html:not(.docai-preinit) .hdr .hdr-search {
    animation: none !important;
  }

  html body .hdr .logo-ico,
  html body.ap-vertical-shell::before,
  html body.ap-vertical-shell .hdr .hdr-search,
  html body.ap-vertical-shell .hdr .hdr-icon-btn,
  html body.ap-vertical-shell .hdr .aipe-header-export-trigger,
  html body.ap-vertical-shell .hdr .aipe-header-export-panel {
    transition: none !important;
  }

  html body .hdr .logo-ico::after {
    transition: none !important;
  }

  html body.nx-hdr-scrolled .hdr .logo-ico {
    scale: none;
  }

  html body.ap-vertical-shell .hdr .aipe-header-export:hover .aipe-header-export-trigger,
  html body.ap-vertical-shell .hdr .aipe-header-export.open .aipe-header-export-trigger {
    transform: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   7 — AUTO-HIDE ON SCROLL DOWN ("more room for the work")
   ----------------------------------------------------------------------
   Scroll down and the header leaves; scroll up and it comes straight back.
   Not a mode — nothing to toggle, nothing to remember.

   The header is position:fixed, so sliding it away alone would only uncover
   what is behind it; the workspace would not actually grow. What makes the
   space real is the single line below: --app-content-top drops, and because
   every offset in the app already derives from that token — .body padding,
   the sticky toolbars, and every `calc(100vh - var(--app-content-top) - N)`
   workspace height in the tables, calendar, levelling and narrative — the
   whole layout follows from one variable. The Gantt is the one that sizes
   itself in JS; core/header-polish.js pokes it with a resize so it re-fits.

   Cost: changing .body's padding reflows its subtree, which on a large
   schedule is a lot of nodes. That is why the JS below uses generous
   hysteresis — the class flips once per real direction change, not per
   scroll event.
   ══════════════════════════════════════════════════════════════════════ */
html body.ap-vertical-shell.nx-hdr-hidden {
  --app-content-top: 20px;
}

/* ARRIVING — decelerate in, and take the longer of the two durations.
   Opacity finishes early so the bar is legible while it is still settling. */
html body.ap-vertical-shell .hdr,
html body.ap-vertical-shell .hdr:not(.ap-nav-collapsed),
html body.ap-vertical-shell .hdr.ap-nav-peek,
html body.ap-vertical-shell .hdr.ap-nav-collapsed:not(.ap-nav-peek) {
  transition:
    left .4s cubic-bezier(.19, 1, .22, 1),
    translate 300ms cubic-bezier(.16, 1, .3, 1),
    opacity 160ms ease-out !important;
}

/* LEAVING — accelerate out, and get out of the way quickly. The content
   below reflows on the same frame the bar starts moving, so a slow exit
   would read as the two coming apart. */
html body.ap-vertical-shell.nx-hdr-hidden .hdr,
html body.ap-vertical-shell.nx-hdr-hidden .hdr:not(.ap-nav-collapsed),
html body.ap-vertical-shell.nx-hdr-hidden .hdr.ap-nav-peek,
html body.ap-vertical-shell.nx-hdr-hidden .hdr.ap-nav-collapsed:not(.ap-nav-peek) {
  transition:
    left .4s cubic-bezier(.19, 1, .22, 1),
    translate 190ms cubic-bezier(.4, 0, 1, 1),
    opacity 150ms cubic-bezier(.4, 0, 1, 1) !important;
}

html body.ap-vertical-shell.nx-hdr-hidden .hdr {
  translate: 0 calc(-1 * (var(--app-header-top) + var(--app-header-height) + 12px)) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html body.ap-vertical-shell.nx-hdr-hidden::before {
  translate: 0 calc(-1 * (var(--app-header-band) + 4px)) !important;
  opacity: 0 !important;
}

html body.ap-vertical-shell::before {
  transition:
    border-bottom-color 200ms ease-out,
    box-shadow 200ms ease-out,
    background-color 200ms ease-out,
    translate 300ms cubic-bezier(.16, 1, .3, 1),
    opacity 160ms ease-out;
}

html body.ap-vertical-shell.nx-hdr-hidden::before {
  transition:
    translate 190ms cubic-bezier(.4, 0, 1, 1),
    opacity 150ms cubic-bezier(.4, 0, 1, 1);
}

/* ── The corner mark ───────────────────────────────────────────────────
   While the header is away the brand keeps a foothold: the square N mark
   (assets/nexora-ai-icon.png — the wordmark's own symbol) fades into the
   top-left corner, which is genuinely empty once the rail is collapsed or
   asleep. It is only shown in that state: with the rail expanded, the
   sidebar prints the full Nexora lockup a few pixels below and a second
   mark would just be a duplicate.
   ────────────────────────────────────────────────────────────────────── */
.nx-corner-mark {
  position: fixed;
  /* Shares the content's top edge, so the mark and the workspace card begin
     on one line instead of at two arbitrary heights. */
  top: var(--app-content-top);
  left: 30px;
  width: 50px;
  height: 50px;
  z-index: 108;
  display: grid;
  place-items: center;
  padding: 0;
  /* This was the one element on screen with no surface — painted straight
     onto the background while every neighbour is a floating white card, so
     it read as a sticker. It now borrows the rail's treatment exactly: same
     tint, same hairline, same soft shadow, same blur. Not a circle: nothing
     else in this UI is round, and the radius keeps the squircle family the
     rail (32/24px) and the controls (12px) already share. */
  border-radius: 17px;
  border: 1px solid rgba(232, 236, 239, .68);
  background-color: rgba(255, 255, 255, .72);
  background-image: url("../nexora-ai-n-mark.png");
  background-size: 32px auto;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 18px 46px rgba(26, 29, 33, .07);
  backdrop-filter: blur(12px);
  cursor: pointer;
  opacity: 0;
  scale: .82;
  translate: 0 -4px;
  pointer-events: none;
  transition:
    opacity 160ms ease-out,
    scale 240ms cubic-bezier(.16, 1, .3, 1),
    translate 240ms cubic-bezier(.16, 1, .3, 1),
    left 400ms cubic-bezier(.19, 1, .22, 1),
    background-color 160ms ease-out,
    border-color 160ms ease-out,
    box-shadow 200ms ease-out;
}

/* Only while the rail is ASLEEP. That was the whole premise and this rule
   had it too loose: it showed for any collapsed rail, but a collapsed rail
   that is still awake runs full height from y=52 — so the mark's 20..70
   band drove 18px straight through the top of it. The corner is only dead
   once the rail dozes into its centred capsule (top 265), and 30px puts
   the mark on that capsule's axis (centre 55). */
html body.ap-vertical-shell.nx-hdr-hidden:has(#app-tabs.ap-nav-collapsed.ap-nav-sleep:not(.ap-nav-peek)) .nx-corner-mark {
  opacity: 1;
  scale: 1;
  translate: 0 0;
  pointer-events: auto;
  /* arrives a beat after the bar has committed to leaving, so the two
     never read as one blurry cross-fade */
  transition-delay: 70ms, 70ms, 70ms;
}

html body.ap-vertical-shell.nx-hdr-hidden .nx-corner-mark:hover {
  background-color: #FFFFFF;
  border-color: rgba(26, 29, 33, .14);
  box-shadow: 0 20px 50px rgba(26, 29, 33, .12);
  translate: 0 -1px;
}

html body.ap-vertical-shell.nx-hdr-hidden .nx-corner-mark:active {
  translate: 0 0;
  box-shadow: 0 8px 20px rgba(26, 29, 33, .10);
  transition-duration: 70ms;
}

html body .nx-corner-mark:focus-visible {
  outline: 3px solid rgba(36, 180, 126, .26);
  outline-offset: 3px;
}

/* Below the drawer breakpoint the hamburger already owns the top-left and
   there is no dead space to fill — two anchors there would collide. */
@media (max-width: 1024px) {
  .nx-corner-mark { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   8 — WHERE YOU ARE
   The bar ran [brand] … 1300px of nothing … [search]. That gap was the
   loudest unfinished thing in the layout, and it is a content gap rather
   than a styling one: the header said nothing about the project or the
   view being worked in. The restrained enterprise answer — project muted,
   a light chevron, the current view in full colour, one hairline rule
   holding it off the brand. Text only: it states, it never acts.
   ══════════════════════════════════════════════════════════════════════ */
html body.ap-vertical-shell .hdr .nx-hdr-context {
  order: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  flex: 0 1 auto;
  margin-left: 2px;
  font-size: 13px;
  line-height: 1;
  opacity: 0;
  translate: 0 2px;
  transition: opacity 220ms ease-out, translate 220ms cubic-bezier(.16, 1, .3, 1);
}

html body.ap-vertical-shell .hdr .nx-hdr-context.is-on {
  opacity: 1;
  translate: 0 0;
}

/* Standing down for a tab that prints its own title has to mean leaving the
   flow, not just going transparent: at opacity 0 it still held 264px of the
   bar and squeezed that tab's own toolbar. */
html body.ap-vertical-shell .hdr .nx-hdr-context.is-away {
  display: none !important;
}

html body.ap-vertical-shell .hdr .nx-hdr-rule {
  width: 1px;
  height: 20px;
  flex: 0 0 1px;
  background: var(--nx-border);
}

html body.ap-vertical-shell .hdr .nx-hdr-project,
html body.ap-vertical-shell .hdr .nx-hdr-view {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The identity anchor. A 22px initial in the app's own green — the family
   the Export chip already uses — so the crumb starts on something solid
   instead of on loose grey text. Not a control: it states, it never acts. */
html body.ap-vertical-shell .hdr .nx-hdr-badge {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: rgba(36, 180, 126, .12);
  color: #188D68;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .01em;
  margin-right: -2px;
}

html body.ap-vertical-shell .hdr .nx-hdr-project {
  color: #5A6067;
  font-size: 13.5px;
  font-weight: 600;
  max-width: 30ch;
}

html body.ap-vertical-shell .hdr .nx-hdr-sep {
  color: rgba(26, 29, 33, .24);
  font-size: 15px;
  font-weight: 400;
  flex: 0 0 auto;
  margin: 0 -1px;
}

/* The view is the answer to "where am I", so it carries the most weight of
   the three — a full step above the project rather than half a shade. */
html body.ap-vertical-shell .hdr .nx-hdr-view {
  color: var(--nx-text);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -.012em;
  max-width: 32ch;
}

/* The bar centres its brand below the drawer breakpoint; context would
   fight it for the little width left. */
@media (max-width: 1024px) {
  html body.ap-vertical-shell .hdr .nx-hdr-context { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  /* Same selector shape as the transition rule above, or this cancel is the
     weaker of the two and the header keeps gliding. */
  html body.ap-vertical-shell .hdr,
  html body.ap-vertical-shell .hdr:not(.ap-nav-collapsed),
  html body.ap-vertical-shell .hdr.ap-nav-peek,
  html body.ap-vertical-shell .hdr.ap-nav-collapsed:not(.ap-nav-peek),
  html body.ap-vertical-shell.nx-hdr-hidden .hdr,
  html body.ap-vertical-shell.nx-hdr-hidden .hdr:not(.ap-nav-collapsed),
  html body.ap-vertical-shell.nx-hdr-hidden .hdr.ap-nav-peek,
  html body.ap-vertical-shell.nx-hdr-hidden .hdr.ap-nav-collapsed:not(.ap-nav-peek),
  html body.ap-vertical-shell::before,
  html body.ap-vertical-shell.nx-hdr-hidden::before,
  html body.ap-vertical-shell .hdr .nx-hdr-context,
  .nx-corner-mark {
    transition: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   9 — CLOSE PROJECT
   The last control in the bar, on every tab, and an icon the size of the
   ones beside it. It began as a 132px labelled pill pinned over the bar
   with position:absolute while the bar reserved padding for it — the
   loudest control in the header, crowding the search and the bell it sat
   next to, and pinned over anything else a tab pinned to the same edge.
   It is an ordinary flex item now, ordered after the notification bell
   (order 20), so the row itself decides where each tab's toolbar ends —
   whatever that tab puts in the bar — with nothing reserved and nothing
   to keep clear. The label lives on the tooltip and on aria-label. The JS
   (tabs/projects-log.tab.js) only says whether it is shown.
   ══════════════════════════════════════════════════════════════════════ */
html body.ap-vertical-shell .hdr {
  /* The button's footprint at the right end of the row: what the one thing
     still pinned to that edge (below) has to step past. */
  --nx-close-project-w: var(--app-hdr-control, 38px);
}

html body.ap-vertical-shell .hdr .nx-hdr-close-project {
  order: 30;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--nx-close-project-w);
  height: var(--app-hdr-control, 38px);
  margin: 0;
  padding: 0;
  border: 1px solid var(--nx-border, rgba(26, 29, 33, .10));
  border-radius: 12px;
  background: rgba(255, 255, 255, .70);
  color: #6B7280;
  font: inherit;
  line-height: 1;
  cursor: pointer;
  transition:
    background-color 160ms ease-out,
    border-color 160ms ease-out,
    color 160ms ease-out,
    box-shadow 160ms ease-out;
}

html body.ap-vertical-shell .hdr .nx-hdr-close-project[hidden] {
  display: none !important;
}

html body.ap-vertical-shell .hdr .nx-hdr-close-project svg {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html body.ap-vertical-shell .hdr .nx-hdr-close-project:hover {
  background: #FFFFFF;
  border-color: rgba(26, 29, 33, .16);
  color: var(--nx-text, #1A1D21);
  box-shadow: 0 2px 6px rgba(26, 29, 33, .05);
}

html body.ap-vertical-shell .hdr .nx-hdr-close-project:active {
  background: #F3F5F6;
  box-shadow: inset 0 1px 2px rgba(26, 29, 33, .07);
  transition-duration: 70ms;
}

html body.ap-vertical-shell .hdr .nx-hdr-close-project:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(36, 180, 126, .22);
}

@media (prefers-reduced-motion: reduce) {
  html body.ap-vertical-shell .hdr .nx-hdr-close-project {
    transition: none;
  }
}

/* The Histogram tab pins its own Export button to the bar's right edge with
   inline styles (tabs/038-manpower-histogram-js.js) rather than letting the
   row place it, so it lands on top of whatever the row put there — Close
   Project. Export steps past the button's footprint instead; !important is
   what outranks the inline `right`. */
html body.ap-vertical-shell .hdr.nx-has-close-project .hist-header-export {
  right: calc(var(--nx-close-project-w) + 12px) !important;
}

/* That module only re-checks whether its tab is active on a click, so a
   programmatic switch (opening or restoring a project goes to the Gantt)
   left Histogram's Export on every tab afterwards. It belongs to one tab. */
html body:not([data-active-tab="histogram"]) .hdr .hist-header-export {
  display: none !important;
}

/* styles/core/00-93-sidebar-motion.css */
/* ════════════════════════════════════════════════════════════════════════
   SIDEBAR MOTION & OPEN-STATE POLISH
   Loads after 00-92-header-polish.css — it is the last word on how the rail
   moves and how it reads when it is open.

   WHY THIS FILE EXISTS
   --------------------
   The open/close was measurably slow. Rendering the real stylesheet stack in
   Chromium over a Gantt-sized pane (~90k nodes) and sampling requestAnimation-
   Frame across one toggle put numbers on it:

                          BEFORE                     AFTER
       idle               avg 16.7ms  worst  17ms    unchanged (a clean 60fps)
       collapse           avg 50.8ms  worst 267ms    avg 18.3ms  worst  50-100ms
       hover peek open    avg 35.7ms  worst 200ms    avg 27.3ms  worst 100-150ms
       hover peek close   avg 50.0ms  worst 233ms    avg 26.1ms  worst 100ms

   The worst-frame column is the one that is felt: a 267ms frame is a visible
   stall. Headless Chromium has no GPU, so these are a pessimistic floor
   rather than what a real machine does, but every comparison here was
   measured the same way, so the ratios hold. A collapse now averages a clean
   60fps (18.3ms) where it used to run at twenty.

   WHAT THE SIDEBAR STILL DOES
   ---------------------------
   It pushes the page aside; it does not cover it. It still idles into the
   sleep capsule when it is closed and left alone. Both are deliberate, both
   are kept. An earlier revision of this file dropped them in the name of
   speed and was wrong to: covering the work to save a reflow is not a
   trade worth making, and the capsule is a feature, not a glitch.

   THREE CAUSES, ALL FIXED WITHOUT CHANGING THE BEHAVIOUR
   ------------------------------------------------------
   1. THE CONTENT WAS RE-LAID OUT ON EVERY FRAME. `padding-left` on .body was
      transitioned 316px → 130px, so the open tab was re-laid out ~15 times
      per toggle. It now jumps to its new value in one layout pass and the
      panels inside are slid home with a transform, which is compositor work
      — full frame rate regardless of what is in them. The FLIP that does it
      lives in core/999-ai-planner-vertical-shell.js.
   2. `backdrop-filter: blur(22px)` ON A RESIZING PANEL. Every frame of the
      width animation re-blurred everything behind a full-height panel. The
      surface is opaque now — cheaper, and cleaner to look at.
   3. FOUR DIFFERENT DURATIONS AND CURVES. The rail ran .46s, the content .4s,
      the labels .28s; nothing arrived together, which reads as jank even when
      the frames are cheap. One curve and one duration now, declared once as
      tokens. The sleep capsule keeps its own springier curve on purpose —
      that overshoot is what makes it read as settling rather than closing.

   Everything below is presentation and motion only. No layout constant moves:
   the rail is still 260px open / 72px closed, the header still sits at 316px /
   130px. Only the way it gets there changed.
   ════════════════════════════════════════════════════════════════════════ */

:root {
  /* One curve for every part of the open/close, and one duration for
     everything that is cheap to move. The curve is a fast departure into a
     long settle — it reads as "confident", where the old .34,1.56 overshoot
     read as "bouncy". */
  --nx-nav-dur: 240ms;
  --nx-nav-ease: cubic-bezier(.32, .72, 0, 1);
  /* Text and icons cross-fade slightly faster than the box resizes, so the
     labels are gone before the rail is narrow enough to clip them. */
  --nx-nav-fade: 170ms;
}

/* ════════════════════════════════════════════════════════════════════════
   1 — DESKTOP MOTION
   Scoped to >1024px on purpose: below that the sidebar is an off-canvas
   drawer driven by `transform` in 00-90-responsive.css, and none of these
   width/left/padding rules apply to it.
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {

  /* No blur on a panel that is about to change width — in ANY state, the
     sleep capsule included. Re-blurring everything behind a full-height
     panel on every frame is the single most expensive thing here. */
  html body.ap-vertical-shell #app-tabs.tabs,
  html body.ap-vertical-shell #app-tabs.tabs.ap-nav-collapsed,
  html body.ap-vertical-shell #app-tabs.tabs.ap-nav-peek,
  html body.ap-vertical-shell #app-tabs.tabs.ap-nav-sleep {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    contain: layout style;
  }

  /* ── The rail: open, peeking, or closed ────────────────────────────────
     One transition list for the three states a pointer drives. The sleep
     capsule is deliberately excluded from all of it — it keeps its own
     surface, its own springy curve and its own geometry, which are what
     make it read as "resting" rather than "collapsed". */
  html body.ap-vertical-shell #app-tabs.tabs:not(.ap-nav-sleep),
  html body.ap-vertical-shell #app-tabs.tabs:not(.ap-nav-collapsed):not(.ap-nav-sleep),
  html body.ap-vertical-shell #app-tabs.tabs.ap-nav-peek:not(.ap-nav-sleep),
  html body.ap-vertical-shell #app-tabs.tabs.ap-nav-collapsed:not(.ap-nav-peek):not(.ap-nav-sleep) {
    background: var(--nx-surface) !important;
    border: 1px solid var(--nx-border) !important;
    border-radius: 24px !important;
    box-shadow: 0 18px 44px rgba(26, 29, 33, .08) !important;
    transition:
      width var(--nx-nav-dur) var(--nx-nav-ease),
      padding var(--nx-nav-dur) var(--nx-nav-ease),
      box-shadow var(--nx-nav-dur) var(--nx-nav-ease) !important;
  }

  /* ── Header and content ─────────────────────────────────────────────────
     The header is twenty-odd nodes, so animating its `left` is cheap and it
     rides the rail's curve directly.

     The content pane does NOT animate its padding. That is the whole point
     of the FLIP in the shell script: the padding jumps to its new value in
     one layout pass, and the panels inside are then slid home on the
     compositor. Leaving a transition here would animate the layout as well
     and put the per-frame reflow straight back. */
  html body.ap-vertical-shell .hdr,
  html body.ap-vertical-shell .hdr:not(.ap-nav-collapsed),
  html body.ap-vertical-shell .hdr.ap-nav-peek,
  html body.ap-vertical-shell .hdr.ap-nav-collapsed:not(.ap-nav-peek) {
    transition:
      left var(--nx-nav-dur) var(--nx-nav-ease),
      box-shadow .2s ease,
      background .2s ease !important;
  }

  html body.ap-vertical-shell .body,
  html body.ap-vertical-shell .body:not(.ap-body-closed),
  html body.ap-vertical-shell .body.ap-body-closed {
    transition: none !important;
  }

  /* While the panels are sliding they are briefly wider than the viewport.
     Clipped at the root, which costs nothing and creates no containing
     block — unlike `overflow` on .body, which would make it a scroller. */
  html.nx-nav-shift {
    overflow-x: hidden !important;
  }

  /* ── While a toggle is in flight ──────────────────────────────────────
     `will-change` is set only for the ~240ms the width is actually moving
     (the shell script adds and removes `.nx-nav-animating`); left permanently
     it would pin a compositing layer for the life of the page. The nav is
     clipped meanwhile so its scrollbar cannot flash in and out as the
     content re-wraps. */
  html body.ap-vertical-shell #app-tabs.tabs.nx-nav-animating {
    will-change: width;
  }

  html body.ap-vertical-shell #app-tabs.tabs.nx-nav-animating .ap-sidebar-nav {
    overflow: hidden !important;
  }

  /* ── First paint is not an animation ─────────────────────────────────
     A rail restored to "closed" from localStorage used to slide shut while
     the page was still loading. The shell script sets `.nx-nav-instant` for
     the first frame. */
  html body.nx-nav-instant .tabs,
  html body.nx-nav-instant .hdr,
  html body.nx-nav-instant .body,
  html body.nx-nav-instant .tabs * {
    transition: none !important;
  }

  /* ── Labels cross-fade instead of popping ────────────────────────────
     `display: none` cannot be animated, so the text used to vanish a frame
     before the box moved. Out of flow and faded instead: the rail still
     centres its icons, and the words leave with the width. (The `position:
     relative` these need lives in section 3b, because the active-row marker
     needs it at every width.) */
  html body.ap-vertical-shell .tabs .ap-tab-label,
  html body.ap-vertical-shell .tabs .ap-section-text {
    transition:
      opacity var(--nx-nav-fade) var(--nx-nav-ease),
      transform var(--nx-nav-dur) var(--nx-nav-ease) !important;
  }

  html body.ap-vertical-shell .tabs.ap-nav-collapsed:not(.ap-nav-peek):not(.ap-nav-sleep) .ap-tab-label {
    display: block !important;
    position: absolute !important;
    left: 48px !important;
    top: 50% !important;
    margin: 0 !important;
    opacity: 0 !important;
    transform: translateY(-50%) translateX(-8px) !important;
    white-space: nowrap !important;
    pointer-events: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   2 — THE SLEEP CAPSULE IS LEFT ALONE
   The idle capsule (`.ap-nav-sleep`, set by the shell script three seconds
   after the pointer leaves the closed rail) keeps the look and the springy
   curve it already had in nexora-premium-redesign.css. Nothing in this file
   should reach into it, so every rule that could is written to exclude it —
   the surface rules above via `:not(.ap-nav-sleep)`, and the row sizing in
   section 3b, which would otherwise override the capsule's 36px icons.

   The one thing it does get from here is the FLIP: the small content shift
   it causes now runs on the compositor like every other one.
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {

  html body.ap-vertical-shell #app-tabs.tabs.ap-nav-sleep .ap-sidebar-nav .tab,
  html body.ap-vertical-shell #app-tabs.tabs.ap-nav-sleep .ap-settings-shortcut {
    transition:
      width .5s cubic-bezier(.34, 1.56, .44, 1),
      height .5s cubic-bezier(.34, 1.56, .44, 1) !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   3 — THE OPEN RAIL
   What the open state looked like before: two Nexora lockups on screen at
   once (one in the sidebar, one in the header), group headings drawn as
   LINE — TEXT — LINE rules that cost ~34px each for a group of one or two
   items, an account chip at the bottom that was an empty pill because its
   name and plan were `display: none`, and 50px of dead air between sections.

   The fixes are all rhythm: one type scale for the headings, one row height,
   one gap, and the text put back into the account chip.
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {

  /* ── Brand row: the workspace mark, then the two controls, on one line ──
     These four rules carry `#app-tabs` deliberately. The brand row, the gear
     and the collapse button are sized and placed by four earlier theme layers
     between them, several with `html body …` chains of their own, and the
     controls are absolutely positioned against `.tabs` rather than laid out in
     the row — so the only way the mark and the two buttons share a baseline is
     to state the whole geometry at a specificity nothing earlier can reach,
     and to derive the numbers from each other:

         rail inner padding 12 + border 1 + row margin-top 2 = row top   15
         row height                                                      44
         a 32px control centred in that row                → top    15 + 6

     Change the row height and the control `top` moves with it. */
  html body.ap-vertical-shell #app-tabs.tabs:not(.ap-nav-collapsed) .ap-sidebar-brand,
  html body.ap-vertical-shell #app-tabs.tabs.ap-nav-peek .ap-sidebar-brand {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    margin: 2px 0 10px !important;
    padding: 0 !important;
    border-bottom: 1px solid var(--nx-border) !important;
  }

  /* 12px in, so the monogram's left edge sits on the same line as every tab
     icon below it (the rows carry `padding: 0 12px`). */
  html body.ap-vertical-shell #app-tabs.tabs:not(.ap-nav-collapsed) .ap-sidebar-mark,
  html body.ap-vertical-shell #app-tabs.tabs.ap-nav-peek .ap-sidebar-mark {
    margin: 0 0 0 12px !important;
  }

  html body.ap-vertical-shell #app-tabs.tabs:not(.ap-nav-collapsed) .ap-sidebar-toggle,
  html body.ap-vertical-shell #app-tabs.tabs.ap-nav-peek .ap-sidebar-toggle,
  html body.ap-vertical-shell #app-tabs.tabs:not(.ap-nav-collapsed) .ap-settings-shortcut,
  html body.ap-vertical-shell #app-tabs.tabs.ap-nav-peek .ap-settings-shortcut {
    top: 21px !important;
    bottom: auto !important;
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body.ap-vertical-shell #app-tabs.tabs:not(.ap-nav-collapsed) .ap-sidebar-toggle,
  html body.ap-vertical-shell #app-tabs.tabs.ap-nav-peek .ap-sidebar-toggle {
    right: 12px !important;
  }

  html body.ap-vertical-shell #app-tabs.tabs:not(.ap-nav-collapsed) .ap-settings-shortcut,
  html body.ap-vertical-shell #app-tabs.tabs.ap-nav-peek .ap-settings-shortcut {
    right: 50px !important;
  }

  /* The header already carries the full Nexora AI lockup, two centimetres to
     the right and four times the size. The rail was showing the same lockup
     again — `assets/logo.png` IS the wordmark, so the image and the text
     block beside it were both duplicates of what the header says. The rail
     keeps a workspace mark instead: the "NX" monogram the brand block already
     carries as its image fallback, in a 30px tile. */
  html body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .ap-sidebar-copy,
  html body.ap-vertical-shell .tabs.ap-nav-peek .ap-sidebar-copy,
  html body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .ap-sidebar-logo,
  html body.ap-vertical-shell .tabs.ap-nav-peek .ap-sidebar-logo {
    display: none !important;
  }

  /* Six earlier layers each resized this mark, and the last of them took it out
     of flow — `position: absolute; top: 7px; left: 14px; right: 106px` — to fit
     the wide lockup that used to live here. Putting it back in flow means
     clearing those offsets too: they still apply to a relatively positioned box
     and would shift it 14px right and 7px down out of the row. */
  html body.ap-vertical-shell #app-tabs.tabs:not(.ap-nav-collapsed) .ap-sidebar-mark,
  html body.ap-vertical-shell #app-tabs.tabs.ap-nav-peek .ap-sidebar-mark {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    flex: 0 0 30px !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: var(--nx-sidebar-active) !important;
    box-shadow: none !important;
  }

  html body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .ap-sidebar-mark-fallback,
  html body.ap-vertical-shell .tabs.ap-nav-peek .ap-sidebar-mark-fallback {
    display: grid !important;
    place-items: center !important;
    color: #0F6B4F !important;
    font: 800 11.5px/1 Inter, system-ui, sans-serif !important;
    letter-spacing: .02em !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
 3b — THE CONTENTS OF THE OPEN RAIL, AT EVERY WIDTH
 Everything above this point depends on desktop geometry. Everything below
 is what the list itself looks like — headings, rows, icons, the account
 chip — and the phone drawer is the same list with the same problems, so it
 is deliberately NOT inside a media query. The drawer keeps its own width,
 position and slide from 00-90-responsive.css; only its contents change.
 ════════════════════════════════════════════════════════════════════════ */

/* Every row is the positioning context for its own active marker and, on the
   desktop rail, for its fading label. Without this the marker would resolve
   against the sidebar and draw one bar down the whole panel. */
html body.ap-vertical-shell .tabs .tab {
  position: relative !important;
}

/* ── Group headings: a quiet label, not a ruled divider ──────────────── */
html body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .ap-sidebar-section,
html body.ap-vertical-shell .tabs.ap-nav-peek .ap-sidebar-section {
  display: flex !important;
  align-items: center !important;
  height: 26px !important;
  min-height: 26px !important;
  margin: 12px 0 2px !important;
  padding: 0 12px !important;
  pointer-events: none !important;
}

/* First heading in the list should not push the whole nav down. */
html body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .ap-sidebar-nav > .ap-sidebar-section:first-child,
html body.ap-vertical-shell .tabs.ap-nav-peek .ap-sidebar-nav > .ap-sidebar-section:first-child {
  margin-top: 0 !important;
}

html body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .ap-section-line,
html body.ap-vertical-shell .tabs.ap-nav-peek .ap-section-line {
  display: none !important;
}

html body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .ap-section-text,
html body.ap-vertical-shell .tabs.ap-nav-peek .ap-section-text {
  display: block !important;
  color: var(--nx-muted) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .11em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* On the rail the heading becomes a short centred hairline — a separator,
   with no room for a word. */
html body.ap-vertical-shell .tabs.ap-nav-collapsed:not(.ap-nav-peek):not(.ap-nav-sleep) .ap-sidebar-section {
  display: block !important;
  height: 1px !important;
  min-height: 1px !important;
  width: 24px !important;
  margin: 8px auto !important;
  padding: 0 !important;
  background: var(--nx-border) !important;
  overflow: hidden !important;
}

/* ── Rows: one height, one gap, one radius ─────────────────────────── */
html body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .ap-sidebar-nav,
html body.ap-vertical-shell .tabs.ap-nav-peek .ap-sidebar-nav {
  gap: 2px !important;
  padding: 0 0 6px !important;
}

html body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .tab,
html body.ap-vertical-shell .tabs.ap-nav-peek .tab {
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 12px !important;
  gap: 11px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  font-weight: 550 !important;
  letter-spacing: -.005em !important;
  transition:
    background-color 140ms ease,
    color 140ms ease !important;
}

/* The icon tile was a bordered, tinted box on every row — eighteen boxes
   stacked reads as a form, not a menu. Only the active row keeps a tile. */
html body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .tab .ap-tab-icon,
html body.ap-vertical-shell .tabs.ap-nav-peek .tab .ap-tab-icon {
  flex: 0 0 22px !important;
  width: 22px !important;
  height: 22px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .tab .ap-tab-icon svg,
html body.ap-vertical-shell .tabs.ap-nav-peek .tab .ap-tab-icon svg {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 1.7 !important;
}

/* The active row already reads as active twice over — a tinted pill and a
   marker down its left edge. An earlier layer put a third highlight behind
   its icon, a pale tile inside the pill; flattened so the row has one
   treatment, not three. */
html body.ap-vertical-shell #app-tabs.tabs:not(.ap-nav-collapsed) .tab.active .ap-tab-icon,
html body.ap-vertical-shell #app-tabs.tabs.ap-nav-peek .tab.active .ap-tab-icon {
  flex: 0 0 22px !important;
  width: 22px !important;
  height: 22px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .tab:hover,
html body.ap-vertical-shell .tabs.ap-nav-peek .tab:hover {
  background: var(--nx-surface-2) !important;
  color: var(--nx-text) !important;
  transform: none !important;
}

html body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .tab.active,
html body.ap-vertical-shell .tabs.ap-nav-peek .tab.active {
  background: var(--nx-sidebar-active) !important;
  color: #0F6B4F !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

/* A 3px marker on the active row, grown from the centre. `transform` on a
   pseudo-element, so switching tabs costs no layout. */
html body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .tab::before,
html body.ap-vertical-shell .tabs.ap-nav-peek .tab::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 10px !important;
  bottom: 10px !important;
  width: 3px !important;
  border-radius: 0 3px 3px 0 !important;
  background: var(--nx-accent) !important;
  transform: scaleY(0) !important;
  transform-origin: 50% 50% !important;
  transition: transform 200ms var(--nx-nav-ease) !important;
  display: block !important;
}

html body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .tab.active::before,
html body.ap-vertical-shell .tabs.ap-nav-peek .tab.active::before {
  transform: scaleY(1) !important;
}

/* ── The rail: even spacing, square touch targets ──────────────────── */
html body.ap-vertical-shell .tabs.ap-nav-collapsed:not(.ap-nav-peek):not(.ap-nav-sleep) .ap-sidebar-nav {
  gap: 4px !important;
}

html body.ap-vertical-shell .tabs.ap-nav-collapsed:not(.ap-nav-peek):not(.ap-nav-sleep) .tab {
  width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  border-radius: 12px !important;
}

html body.ap-vertical-shell .tabs.ap-nav-collapsed:not(.ap-nav-peek):not(.ap-nav-sleep) .tab .ap-tab-icon {
  flex: 0 0 22px !important;
  width: 22px !important;
  height: 22px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.ap-vertical-shell .tabs.ap-nav-collapsed:not(.ap-nav-peek):not(.ap-nav-sleep) .tab .ap-tab-icon svg {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 1.7 !important;
}

html body.ap-vertical-shell .tabs.ap-nav-collapsed:not(.ap-nav-peek):not(.ap-nav-sleep) .tab.active {
  background: var(--nx-sidebar-active) !important;
  color: #0F6B4F !important;
}

/* ── The two controls in the brand row ─────────────────────────────── */
html body.ap-vertical-shell .tabs .ap-sidebar-toggle,
html body.ap-vertical-shell .tabs .ap-settings-shortcut {
  width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  flex: 0 0 32px !important;
  border-radius: 10px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--nx-muted) !important;
  box-shadow: none !important;
  transition: background-color 140ms ease, color 140ms ease !important;
}

html body.ap-vertical-shell .tabs .ap-sidebar-toggle:hover,
html body.ap-vertical-shell .tabs .ap-settings-shortcut:hover {
  background: var(--nx-surface-2) !important;
  color: var(--nx-text) !important;
  transform: none !important;
}

html body.ap-vertical-shell .tabs .ap-sidebar-toggle .ap-toggle-line {
  background: currentColor !important;
}

/* Pull the toggle to the end of the brand row and keep the gear beside it,
   so the top of the rail is one tidy line instead of three stacked blocks. */
html body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .ap-sidebar-toggle,
html body.ap-vertical-shell .tabs.ap-nav-peek .ap-sidebar-toggle {
  order: -1 !important;
  margin-left: auto !important;
}

/* ── Account chip: it had no words in it ───────────────────────────── */
html body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .ap-account-copy,
html body.ap-vertical-shell .tabs.ap-nav-peek .ap-account-copy {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  gap: 1px !important;
  overflow: hidden !important;
}

html body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .ap-account-name,
html body.ap-vertical-shell .tabs.ap-nav-peek .ap-account-name {
  color: var(--nx-text) !important;
  font-size: 12.5px !important;
  font-weight: 650 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .ap-account-plan,
html body.ap-vertical-shell .tabs.ap-nav-peek .ap-account-plan {
  color: var(--nx-muted) !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .ap-sidebar-foot,
html body.ap-vertical-shell .tabs.ap-nav-peek .ap-sidebar-foot {
  min-height: 48px !important;
  margin-top: 8px !important;
  padding: 6px 10px !important;
  gap: 9px !important;
  border: 1px solid var(--nx-border) !important;
  border-radius: 12px !important;
  background: var(--nx-surface-2) !important;
  transition: background-color 140ms ease !important;
}

/* 05-auth-billing.js appends its own `.ap-auth-btn` to this chip, carrying
   the signed-in name a second time — which was invisible while the chip's
   own name was `display: none` and became a duplicate the moment it came
   back. The button keeps the click handler that opens the account menu, so
   it stays: stretched over the whole chip, with its text hidden, so the
   whole row is the target and the name is said once. */
html body.ap-vertical-shell .tabs .ap-sidebar-foot {
  position: relative !important;
}

html body.ap-vertical-shell .tabs .ap-sidebar-foot .ap-auth-btn {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: inherit !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  cursor: pointer !important;
}

html body.ap-vertical-shell .tabs:not(.ap-nav-collapsed) .ap-sidebar-foot:hover,
html body.ap-vertical-shell .tabs.ap-nav-peek .ap-sidebar-foot:hover {
  background: var(--nx-sidebar-active) !important;
}

/* ── A scrollbar only when it is being used ────────────────────────── */
html body.ap-vertical-shell .ap-sidebar-nav {
  scrollbar-width: thin !important;
  scrollbar-color: transparent transparent !important;
  transition: scrollbar-color 200ms ease !important;
}

html body.ap-vertical-shell .tabs:hover .ap-sidebar-nav {
  scrollbar-color: var(--nx-border) transparent !important;
}

html body.ap-vertical-shell .ap-sidebar-nav::-webkit-scrollbar {
  display: block !important;
  width: 6px !important;
}

html body.ap-vertical-shell .ap-sidebar-nav::-webkit-scrollbar-thumb {
  border-radius: 999px !important;
  background: transparent !important;
}

html body.ap-vertical-shell .tabs:hover .ap-sidebar-nav::-webkit-scrollbar-thumb {
  background: var(--nx-border) !important;
}

/* ════════════════════════════════════════════════════════════════════════
   4 — THE MOBILE DRAWER
   It already slides on `transform`, which is the cheap way to do it. The one
   thing working against it was the same 22px backdrop blur: re-blurring the
   page behind a moving panel is the most expensive thing a phone GPU can be
   asked to do mid-gesture. Opaque, and on the same curve as the desktop rail.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  body.ap-vertical-shell #app-tabs.tabs {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--nx-surface) !important;
    will-change: transform;
    transition: transform 280ms var(--nx-nav-ease) !important;
  }

  .ap-mobile-backdrop {
    transition: opacity 280ms var(--nx-nav-ease) !important;
  }

  /* A drawer keeps the same geometry while selecting or scrolling. The ID
     deliberately outranks the desktop collapsed/sleep theme selectors. */
  html body.ap-vertical-shell #app-tabs.tabs {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    box-sizing: border-box !important;
    width: 290px !important;
    min-width: 0 !important;
    max-width: 86vw !important;
    height: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding: 12px !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    transform: translateX(-110%) !important;
  }
  html body.ap-vertical-shell.ap-mobile-nav-open #app-tabs.tabs {
    transform: translateX(0) !important;
  }
  html body.ap-vertical-shell #app-tabs.tabs .ap-sidebar-nav {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }
  html body.ap-vertical-shell #app-tabs.tabs .ap-sidebar-nav .tab {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 44px !important;
    flex-shrink: 0 !important;
    transform: none !important;
    animation: none !important;
    touch-action: pan-y;
  }
  html body.ap-vertical-shell #app-tabs.tabs .ap-tab-label {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    transform: none !important;
  }
  html body.ap-vertical-shell #app-tabs.tabs .ap-sidebar-brand {
    position: relative !important;
    flex-shrink: 0 !important;
    min-height: 56px !important;
    padding-right: 56px !important;
    overflow: hidden !important;
  }
  /* Keep the gear inside the brand row. No inherited offsets or pseudo
     elements may turn its hit area into an overlay on the navigation list. */
  html body.ap-vertical-shell #app-tabs.tabs .ap-settings-shortcut {
    position: absolute !important;
    inset: 6px 0 auto auto !important;
    box-sizing: border-box !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    overflow: hidden !important;
  }
  html body.ap-vertical-shell #app-tabs.tabs .ap-settings-shortcut::before,
  html body.ap-vertical-shell #app-tabs.tabs .ap-settings-shortcut::after {
    content: none !important;
    pointer-events: none !important;
  }
  html body.ap-vertical-shell #app-tabs.tabs .ap-settings-shortcut > svg,
  html body.ap-vertical-shell #app-tabs.tabs .tab > span {
    pointer-events: none !important;
  }
  html body.ap-vertical-shell #app-tabs.tabs .ap-sidebar-toggle {
    display: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   5 — REDUCED MOTION
   ════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {

  :root {
    --nx-nav-dur: 1ms;
    --nx-nav-fade: 1ms;
  }

  html body.ap-vertical-shell #app-tabs.tabs,
  html body.ap-vertical-shell .hdr,
  html body.ap-vertical-shell .body,
  html body.ap-vertical-shell .tabs .tab,
  html body.ap-vertical-shell .tabs .tab::before,
  html body.ap-vertical-shell .tabs .ap-tab-label {
    transition-duration: 1ms !important;
  }
}

/* styles/core/generation-view-shell.css */
/* ══════════════════════════════════════════════════════════════════════
   GENERATION VIEWS — the two rules every view shares

   Kept in one file rather than repeated in each view's stylesheet, so the
   rule that hides the Forge has exactly one definition and cannot drift
   between views.
   ══════════════════════════════════════════════════════════════════════ */

/* The Forge stays fully intact and fully reachable. When another view is
   the selected presentation it is only HIDDEN — still opened, still fed
   every stage and every streamed row, so its depth counting and the
   globals other plugins read behave exactly as they always have.
   display:none also collapses its canvas to 0x0, so its draw loop paints
   nothing while it is off screen. */
body.nx-genview-advanced #forgeOv { display: none !important; }

/* A view is a full-screen presentation; the page behind it does not
   scroll while one is open. */
body.nxgen-lock { overflow: hidden; }

/* styles/core/generation-view-console.css */
/* ══════════════════════════════════════════════════════════════════════
   CONSOLE VIEW — one deep slab against light paper

   The revision of this direction. What changed, and why:

     · The beige ground is gone. The paper is a true neutral, so the slab
       and the accent are the only colour on screen.
     · No gradients on the paper, no glass, no glow. Depth now comes from
       one honest shadow under one element, and everything else is set
       with hairlines. The slab keeps a gradient because a machined dark
       surface is the one place it reads as material rather than effect.
     · Type follows the schematic view: JetBrains Mono carries every
       label, code, duration and figure, and the single line of prose is
       the only sans. That is what gives the family one voice.
     · Green means one thing — happening now — so it appears on one dial
       segment, one register row and one rail band at a time. Finished
       work is ink.

   Palette is Nexora's own (styles/core/nexora-theme05.css): ink from
   midnight #0F1B2E, accent from #188D68 with #24B47E as its highlight.

   Presentation only — nothing here can change what the engine does.
   ══════════════════════════════════════════════════════════════════════ */

.nxcon {
  --nxc-ink: #0B1019;
  --nxc-ink-2: #070B12;
  --nxc-ink-3: #141C2A;
  --nxc-i85: rgba(11, 16, 25, .85);
  --nxc-i55: rgba(11, 16, 25, .55);
  --nxc-i38: rgba(11, 16, 25, .38);
  --nxc-i22: rgba(11, 16, 25, .22);
  --nxc-rule: rgba(11, 16, 25, .15);
  --nxc-soft: rgba(11, 16, 25, .07);
  --nxc-paper: #FFFFFF;
  --nxc-ground: #E6E7E5;
  --nxc-ac: #188D68;
  --nxc-ac2: #24B47E;
  --nxc-danger: #A63D28;
  --nxc-ease: cubic-bezier(.22, 1, .36, 1);
  --nxc-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --nxc-sans: 'Inter', 'DM Sans', 'IBM Plex Sans Arabic', system-ui, sans-serif;

  position: fixed;
  inset: 0;
  z-index: 10060;
  display: flex;
  padding: clamp(0px, 2vw, 30px);
  font-family: var(--nxc-mono);
  color: var(--nxc-ink);
  background: var(--nxc-ground);
  background-image: radial-gradient(rgba(11, 16, 25, .085) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .3s var(--nxc-ease), visibility 0s linear .3s;
}

.nxcon, .nxcon *, .nxcon *::before, .nxcon *::after { box-sizing: border-box; }
.nxcon[hidden] { display: none; }
.nxcon [hidden] { display: none !important; }
.nxcon:focus { outline: none; }

.nxcon.nxcon-open { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.nxcon.nxcon-closing { opacity: 0; visibility: visible; pointer-events: none; transition-delay: 0s; }

/* ── Sheet ─────────────────────────────────────────────────────────── */
.nxcon-sheet {
  position: relative;
  width: 100%;
  max-width: 1400px;
  margin: auto;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--nxc-paper);
  border: 1px solid var(--nxc-rule);
  box-shadow: 0 1px 2px rgba(11, 16, 25, .06), 0 22px 60px -24px rgba(11, 16, 25, .40);
  overflow: hidden;
  transform: translateY(10px);
  opacity: 0;
  transition: transform .42s var(--nxc-ease), opacity .32s ease;
}
.nxcon-open .nxcon-sheet { transform: none; opacity: 1; }
.nxcon-closing .nxcon-sheet { transform: translateY(6px); opacity: 0; }

/* ── Head ──────────────────────────────────────────────────────────── */
.nxcon-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px clamp(16px, 2vw, 26px);
  border-bottom: 1px solid var(--nxc-rule);
}
.nxcon-brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.nxcon-mark {
  display: grid; place-items: center;
  width: 30px; height: 30px; flex: 0 0 30px;
  border: 1px solid var(--nxc-rule);
  overflow: hidden;
}
.nxcon-mark img { width: 20px; height: 20px; object-fit: contain; }
.nxcon-brand-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nxcon-wm { font-size: 11.5px; font-weight: 700; letter-spacing: .3em; line-height: 1; }
.nxcon-wm-s {
  font-family: var(--nxc-sans);
  font-size: 11px; font-style: italic; line-height: 1; color: var(--nxc-i38);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.nxcon-hr { display: flex; align-items: center; gap: clamp(14px, 2vw, 26px); flex-wrap: wrap; justify-content: flex-end; }

.nxcon-status {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--nxc-ac); white-space: nowrap;
}
.nxcon-dot { width: 6px; height: 6px; background: var(--nxc-ac); animation: nxcon-blink 1.6s steps(1, end) infinite; }
@keyframes nxcon-blink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .2; } }

.nxcon[data-state="failed"] .nxcon-status { color: var(--nxc-danger); }
.nxcon[data-state="failed"] .nxcon-dot { background: var(--nxc-danger); animation: none; }
.nxcon[data-state="completed"] .nxcon-dot { animation: none; }

.nxcon-el { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.nxcon-el-l { font-size: 9.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--nxc-i38); }
.nxcon-el-v { font-size: 14px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* ── Body ──────────────────────────────────────────────────────────── */
.nxcon-body {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 336px;
  overflow: hidden;
}
.nxcon-main {
  min-width: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(16px, 2.2vw, 26px);
}

/* ══ THE SLAB ════════════════════════════════════════════════════════
   The one deep element. Everything else on the sheet stays quiet so this
   is where the eye lands. ════════════════════════════════════════════ */
.nxcon-slab {
  position: relative;
  overflow: hidden;
  padding: clamp(18px, 2.2vw, 28px) clamp(20px, 2.4vw, 30px);
  background: linear-gradient(152deg, var(--nxc-ink-3) 0%, var(--nxc-ink) 52%, var(--nxc-ink-2) 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 16px 40px -18px rgba(11, 16, 25, .6);
  color: #fff;
}

/* The accent edge carries the run's state. */
.nxcon-slab-edge {
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--nxc-ac);
}
.nxcon[data-state="failed"] .nxcon-slab-edge { background: var(--nxc-danger); }
.nxcon[data-state="completed"] .nxcon-slab-edge { background: var(--nxc-ac2); }

.nxcon-slab-in {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(18px, 3vw, 42px);
}
.nxcon-copy { min-width: 0; flex: 1 1 auto; }

.nxcon-eyebrow {
  display: inline-block;
  font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--nxc-ac2);
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}
.nxcon[data-state="failed"] .nxcon-eyebrow { color: #E8836A; }

.nxcon-title {
  font-family: var(--nxc-mono);
  font-size: clamp(18px, 2vw, 27px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.03em;
  margin: 0 0 10px;
  color: #fff;
  text-wrap: balance;
}
.nxcon-sub {
  font-family: var(--nxc-sans);
  margin: 0;
  font-size: 13.5px; line-height: 1.6;
  color: rgba(255, 255, 255, .62);
  max-width: 52ch;
}

.nxcon-swap { animation: nxcon-swap .42s var(--nxc-ease) both; }
@keyframes nxcon-swap {
  from { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(6px); }
  to   { opacity: 1; clip-path: inset(0 0 -20% 0); transform: none; }
}

/* ── The dial ──────────────────────────────────────────────────────── */
.nxcon-dial {
  position: relative;
  flex: 0 0 auto;
  width: clamp(112px, 11.5vw, 136px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.nxcon-dial svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.nxcon-seg {
  fill: none;
  stroke: rgba(255, 255, 255, .11);
  stroke-width: 5;
  stroke-linecap: butt;
  transition: stroke .4s ease, stroke-width .3s var(--nxc-ease);
}
.nxcon-seg[data-status="completed"] { stroke: var(--nxc-ac); stroke-width: 5; }
/* The live segment has to win against the ink behind it and the faint
   track ahead of it, so it goes white and thicker. */
.nxcon-seg[data-status="running"] {
  stroke: #fff; stroke-width: 9;
  animation: nxcon-live 1.8s ease-in-out infinite;
}
.nxcon-seg[data-status="failed"] { stroke: #E8836A; stroke-width: 9; animation: none; }
@keyframes nxcon-live { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

.nxcon-seg.nxcon-lock { animation: nxcon-lock .45s var(--nxc-ease); }
@keyframes nxcon-lock { 0% { stroke-width: 10; } 60% { stroke-width: 4; } 100% { stroke-width: 5; } }

.nxcon-dial-c { position: relative; text-align: center; line-height: 1; }
.nxcon-pct {
  display: block;
  font-size: clamp(26px, 3vw, 34px); font-weight: 700; letter-spacing: -.045em;
  font-variant-numeric: tabular-nums; color: #fff;
}
.nxcon-pct i { font-style: normal; font-size: .46em; margin-left: 1px; opacity: .5; }
.nxcon-pct-l {
  display: block; margin-top: 7px;
  font-size: 8.5px; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255, 255, 255, .42);
}

/* ── Metrics: one readout strip, ruled by its own gaps ─────────────── */
.nxcon-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  margin-top: clamp(16px, 2vw, 22px);
  border: 1px solid var(--nxc-soft);
  background: var(--nxc-soft);
}
.nxcon-m {
  flex: 1 1 106px;
  min-width: 0;
  padding: 14px 15px 13px;
  background: var(--nxc-paper);
}
.nxcon-m-w { flex: 1 1 150px; }
.nxcon-m-in { animation: nxcon-fade .4s var(--nxc-ease) both; }
@keyframes nxcon-fade { from { opacity: 0; } to { opacity: 1; } }

.nxcon-m-v {
  display: block;
  font-size: 23px; font-weight: 700; letter-spacing: -.035em; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--nxc-ink);
}
.nxcon-m-date { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.nxcon-m-l {
  display: block; margin-top: 7px;
  font-size: 9px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase;
  color: var(--nxc-i38);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Failure ───────────────────────────────────────────────────────── */
.nxcon-fail {
  margin-top: clamp(16px, 2vw, 22px);
  padding: 16px 18px;
  border: 1px solid var(--nxc-danger);
  background: rgba(166, 61, 40, .06);
}
.nxcon-fail-t { font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--nxc-danger); }
.nxcon-fail-m {
  font-family: var(--nxc-sans);
  margin: 9px 0 14px;
  font-size: 13.5px; line-height: 1.6; color: var(--nxc-i85); max-width: 72ch;
}
.nxcon-fail-a { display: flex; gap: 9px; flex-wrap: wrap; }

/* ── Register ──────────────────────────────────────────────────────── */
.nxcon-side {
  min-width: 0;
  border-left: 1px solid var(--nxc-rule);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.nxcon-side-h {
  flex: 0 0 auto;
  padding: 16px clamp(14px, 1.6vw, 20px) 11px;
  font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--nxc-i38);
  border-bottom: 1px solid var(--nxc-rule);
}
.nxcon-reg {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  list-style: none; margin: 0; padding: 0;
}
.nxcon-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 11px clamp(14px, 1.6vw, 20px);
  border-bottom: 1px solid var(--nxc-soft);
  transition: background-color .3s ease;
}
.nxcon-row-n { font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--nxc-i22); transition: color .3s ease; }
.nxcon-row-nm {
  font-size: 12px; font-weight: 500; letter-spacing: -.01em; color: var(--nxc-i38);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color .3s ease;
}
.nxcon-row-d { font-size: 10px; font-variant-numeric: tabular-nums; color: var(--nxc-i22); transition: color .3s ease; }

.nxcon-row[data-status="completed"] .nxcon-row-n,
.nxcon-row[data-status="completed"] .nxcon-row-d { color: var(--nxc-i55); }
.nxcon-row[data-status="completed"] .nxcon-row-nm { color: var(--nxc-ink); }

.nxcon-row[data-status="running"] { background: rgba(24, 141, 104, .08); box-shadow: inset 2px 0 0 var(--nxc-ac); }
.nxcon-row[data-status="running"] .nxcon-row-n,
.nxcon-row[data-status="running"] .nxcon-row-d { color: var(--nxc-ac); font-weight: 600; }
.nxcon-row[data-status="running"] .nxcon-row-nm { color: var(--nxc-ink); font-weight: 700; }

.nxcon-row[data-status="failed"] { background: rgba(166, 61, 40, .07); box-shadow: inset 2px 0 0 var(--nxc-danger); }
.nxcon-row[data-status="failed"] .nxcon-row-n,
.nxcon-row[data-status="failed"] .nxcon-row-d { color: var(--nxc-danger); }
.nxcon-row[data-status="failed"] .nxcon-row-nm { color: var(--nxc-danger); font-weight: 700; }

.nxcon-row.nxcon-lock { animation: nxcon-rowset .45s var(--nxc-ease); }
@keyframes nxcon-rowset { 0% { background: rgba(24, 141, 104, .18); } 100% { background: transparent; } }

/* ── Foot ──────────────────────────────────────────────────────────── */
.nxcon-foot { flex: 0 0 auto; border-top: 1px solid var(--nxc-rule); }
.nxcon-rail { position: relative; height: 3px; background: var(--nxc-soft); }
.nxcon-rail-fill {
  position: absolute; left: 0; top: 0; height: 3px; width: 0;
  background: var(--nxc-ink);
  transition: width .6s var(--nxc-ease);
}
.nxcon-rail-live {
  position: absolute; top: 0; height: 3px; overflow: hidden;
  background: rgba(24, 141, 104, .16);
  transition: left .6s var(--nxc-ease);
}
.nxcon-rail-live span {
  position: absolute; inset: 0; background: var(--nxc-ac);
  transform: translateX(-100%);
  animation: nxcon-sweep 1.9s var(--nxc-ease) infinite;
}
@keyframes nxcon-sweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.nxcon[data-state="completed"] .nxcon-rail-fill { background: var(--nxc-ac); }

.nxcon-foot-r {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 12px clamp(16px, 2vw, 26px);
}
.nxcon-note { font-family: var(--nxc-sans); font-size: 12.5px; color: var(--nxc-i55); min-width: 0; }

/* ── Buttons ───────────────────────────────────────────────────────── */
.nxcon-btn {
  appearance: none;
  border: 1px solid var(--nxc-i22);
  background: transparent;
  color: var(--nxc-ink);
  font-family: var(--nxc-mono);
  font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  padding: 9px 16px;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.nxcon-btn:hover { background: var(--nxc-ink); border-color: var(--nxc-ink); color: #fff; }
.nxcon-btn:focus-visible { outline: 2px solid var(--nxc-ac); outline-offset: 2px; }
.nxcon-btn-primary { background: var(--nxc-ink); border-color: var(--nxc-ink); color: #fff; }
.nxcon-btn-primary:hover { background: #000; border-color: #000; }
.nxcon-btn-ghost { border-color: var(--nxc-rule); color: var(--nxc-i55); }

.nxcon-live {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* ══ Responsive ══════════════════════════════════════════════════════ */
@media (max-width: 1080px) {
  .nxcon { padding: 0; }
  .nxcon-sheet { max-width: none; height: 100%; border: 0; }
  .nxcon-body { display: block; overflow-y: auto; }
  .nxcon-main { overflow: visible; }
  .nxcon-side { display: block; border-left: 0; border-top: 1px solid var(--nxc-rule); overflow: visible; }
  .nxcon-reg { display: block; overflow: visible; }
}

@media (max-width: 720px) {
  .nxcon-slab-in { gap: 16px; }
  .nxcon-dial { width: 100px; }
  .nxcon-pct-l { display: none; }
}

@media (max-width: 520px) {
  .nxcon-wm-s { display: none; }
  .nxcon-head { flex-wrap: wrap; row-gap: 10px; }
  .nxcon-hr { width: 100%; justify-content: space-between; }
  .nxcon-slab { padding: 16px 15px; }
  .nxcon-slab-in { align-items: flex-start; gap: 13px; }
  .nxcon-dial { width: 84px; }
  .nxcon-pct { font-size: 22px; }
  .nxcon-title { font-size: 19px; }
  .nxcon-m { flex: 1 1 calc(50% - 1px); }
  .nxcon-m-w { flex: 1 1 100%; }
  .nxcon-foot-r { flex-direction: column; align-items: stretch; gap: 11px; }
  .nxcon-fail-a .nxcon-btn { flex: 1 1 auto; }
}

/* ══ Reduced motion ══════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .nxcon, .nxcon * { animation: none !important; transition-duration: .01ms !important; }
}