/* 10X Value Chain — spacious intelligence workspace */
body.tenx-integrated {
  background:
    radial-gradient(circle at 88% 4%, rgba(197,166,101,.13), transparent 28rem),
    radial-gradient(circle at 6% 34%, rgba(35,109,82,.08), transparent 31rem),
    linear-gradient(180deg,#f8f7f2 0,#f1f3ef 48rem,#eef1ed 100%);
}

body.tenx-integrated > .wrap {
  width: 100%;
  max-width: 1520px;
  padding-inline: clamp(24px,3.4vw,52px);
}

body.tenx-integrated .panel { padding: 52px 0 108px; }
body.tenx-integrated .sec-title {
  margin: 0 0 9px;
  font-size: clamp(31px,3vw,43px) !important;
  font-weight: 650;
  letter-spacing: -.065em !important;
  line-height: 1.08;
}
body.tenx-integrated .sec-sub {
  max-width: 990px;
  margin-bottom: 34px;
  color: #66736d;
  font-size: 14px !important;
  line-height: 1.85 !important;
  word-break: keep-all;
}

/* Sector master-detail: broad canvas, calm hierarchy */
body.tenx-integrated .stab {
  grid-template-columns: 238px minmax(0,1fr);
  gap: 32px !important;
  align-items: start;
  padding-bottom: 0 !important;
}
body.tenx-integrated .rail {
  top: 130px;
  gap: 8px;
  max-height: calc(100vh - 154px);
  padding: 6px !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(25,72,57,.22) transparent;
}
body.tenx-integrated .rail .rlabel {
  margin: 0 0 10px 8px;
  color: #87928d;
  font-size: 9px;
  letter-spacing: 2.8px;
}
body.tenx-integrated .rtab {
  min-height: 53px;
  margin: 0 !important;
  padding: 12px 13px !important;
  border-color: rgba(28,71,57,.075) !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.62) !important;
  box-shadow: 0 10px 30px -29px rgba(13,52,40,.72) !important;
  backdrop-filter: blur(12px);
}
body.tenx-integrated .rtab:hover {
  transform: translateX(4px);
  border-color: rgba(164,132,61,.22) !important;
  box-shadow: 0 16px 34px -27px rgba(13,52,40,.65) !important;
}
body.tenx-integrated .rtab.on {
  background: linear-gradient(138deg,#0a2d22,#164638) !important;
  border-color: rgba(206,176,108,.3) !important;
  box-shadow: 0 20px 42px -25px rgba(7,38,29,.72) !important;
}
body.tenx-integrated .rtab.on .nm {
  color: #f3a8b9 !important;
  text-shadow: 0 0 16px rgba(243,168,185,.18);
}
body.tenx-integrated .rtab.on .mo {
  color: #a9e3c9 !important;
  background: rgba(91,178,139,.14) !important;
  border: 1px solid rgba(169,227,201,.18);
}
body.tenx-integrated .rtab.on .em { filter: saturate(1.12) brightness(1.12); }
body.tenx-integrated .rtab .em { font-size: 17px; }
body.tenx-integrated .rtab .nm { font-size: 12.5px; }

body.tenx-integrated .detail {
  min-width: 0;
  min-height: 720px;
  border: 1px solid rgba(24,62,50,.08) !important;
  border-radius: 32px !important;
  background: rgba(255,255,255,.91) !important;
  box-shadow: 0 40px 100px -64px rgba(10,48,36,.72) !important;
  backdrop-filter: blur(16px);
}
body.tenx-integrated .dhead {
  min-height: 216px;
  padding: 42px 46px 38px !important;
  background:
    linear-gradient(110deg,rgba(255,255,255,.035),transparent 42%),
    radial-gradient(circle at 92% 12%,rgba(224,195,124,.24),transparent 18rem),
    linear-gradient(137deg,#082a20 0%,#124536 62%,#0a3025 100%) !important;
}
body.tenx-integrated .dhead::before {
  content: "";
  position: absolute;
  inset: auto 4% -66% auto;
  width: 360px;
  height: 360px;
  border: 1px solid rgba(229,207,151,.12);
  border-radius: 50%;
  box-shadow: 0 0 0 42px rgba(229,207,151,.025),0 0 0 84px rgba(229,207,151,.018);
}
body.tenx-integrated .dhead h2 { font-size: clamp(29px,2.6vw,39px) !important; letter-spacing: -.055em !important; }
body.tenx-integrated .dhead .mo { padding: 5px 10px; border-radius: 999px; }
body.tenx-integrated .dhead .gy { padding: 5px 12px; }
body.tenx-integrated .dhead .grule { width: 72px; margin: 18px 0 14px; }
body.tenx-integrated .dhead .ol { max-width: 820px; font-size: 15px; line-height: 1.75; }
body.tenx-integrated .dhead .kw { gap: 8px; margin-top: 18px; }
body.tenx-integrated .dhead .kw span { padding: 6px 11px !important; background: rgba(226,202,141,.1); }
body.tenx-integrated .dbody { padding: 36px 42px 44px !important; }

body.tenx-integrated .mrow {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 9px;
  margin-bottom: 34px;
  overflow: visible;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}
body.tenx-integrated .mrow .m {
  min-height: 96px;
  padding: 20px !important;
  border: 1px solid rgba(25,69,55,.075) !important;
  border-radius: 17px;
  background: linear-gradient(145deg,#fff,#f7faf7) !important;
  box-shadow: 0 18px 36px -34px rgba(9,47,35,.72);
}
body.tenx-integrated .mrow .m span { font-size: 8.5px; letter-spacing: 1.25px; }
body.tenx-integrated .mrow .m b { margin-top: 9px; font-size: 20px !important; }
body.tenx-integrated .blockt { margin: 8px 0 18px; font-size: 12px; letter-spacing: .7px; }

body.tenx-integrated .chain {
  display: grid !important;
  grid-template-columns: minmax(154px,1fr) 22px minmax(154px,1fr) 22px minmax(154px,1fr) 22px minmax(154px,1fr) 22px minmax(154px,1fr);
  gap: 8px !important;
  align-items: stretch;
  overflow: visible;
  padding: 2px 2px 12px;
}
body.tenx-integrated .cstage {
  min-height: 180px;
  padding: 20px 18px !important;
  border: 1px solid rgba(51,76,64,.1) !important;
  border-radius: 20px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8),0 18px 38px -32px rgba(14,48,38,.5);
}
body.tenx-integrated .cstage:hover { transform: translateY(-5px); box-shadow: 0 24px 46px -30px rgba(14,48,38,.48); }
body.tenx-integrated .cstage .ci { font-size: 8px; letter-spacing: 1.7px; }
body.tenx-integrated .cstage .cn { margin: 8px 0 7px; font-size: 14px; line-height: 1.3; }
body.tenx-integrated .cstage .cd { min-height: 28px; margin-bottom: 13px; font-size: 10px; }
body.tenx-integrated .cstage .cc { gap: 6px; }
body.tenx-integrated .cstage .cc b { padding: 5px 8px; border-radius: 10px !important; font-size: 10.5px; }
body.tenx-integrated .carrow { color: #a9863a; opacity: .46; }

body.tenx-integrated .twocol { gap: 26px !important; margin-top: 30px; }
body.tenx-integrated .finbox,
body.tenx-integrated .futurebox { min-height: 300px; padding: 26px 28px !important; border-radius: 24px !important; }
body.tenx-integrated .gbars { height: 118px; gap: 12px; }
body.tenx-integrated .gbars .bg i { width: 15px; }
body.tenx-integrated .killbox { padding: 15px 17px; border-radius: 15px; }
body.tenx-integrated .research { margin-top: 26px; padding: 27px 30px !important; border-radius: 24px !important; }

/* Graph tab: a real workspace instead of a boxed widget */
body.tenx-integrated .gbar {
  gap: 12px;
  margin-bottom: 22px;
  padding: 12px;
  border: 1px solid rgba(26,66,53,.07);
  border-radius: 18px;
  background: rgba(255,255,255,.6);
  box-shadow: 0 20px 50px -44px rgba(12,50,38,.65);
  backdrop-filter: blur(14px);
}
body.tenx-integrated .gbar .sel { gap: 5px; padding: 5px; border: 0; border-radius: 13px; background: #e9eee8; }
body.tenx-integrated .gbar .sel button { padding: 8px 13px; border-radius: 9px; }
body.tenx-integrated .graph-reset {
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid rgba(27,68,55,.1);
  border-radius: 999px;
  color: #51615a;
  background: rgba(255,255,255,.62);
  cursor: pointer;
  font: 650 10px var(--disp);
  transition: color .2s ease,border-color .2s ease,transform .2s ease;
}
body.tenx-integrated .graph-reset:hover { color: #0d382b; border-color: rgba(156,122,57,.35); transform: translateY(-1px); }
body.tenx-integrated .graph-shell { grid-template-columns: minmax(0,1fr) 342px; gap: 26px !important; }
body.tenx-integrated .canvas-box {
  min-width: 0;
  border: 1px solid rgba(229,207,151,.14);
  border-radius: 30px !important;
  background:
    linear-gradient(rgba(223,205,157,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(223,205,157,.022) 1px,transparent 1px),
    radial-gradient(circle at 50% 45%,rgba(49,121,92,.25),transparent 33%),
    linear-gradient(145deg,#061f18,#0d3529 60%,#071f18);
  background-size: 46px 46px,46px 46px,auto,auto;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035),0 38px 90px -50px rgba(7,35,27,.72);
}
body.tenx-integrated #graph { height: 720px; }
.graph-orbit { fill: none; stroke: rgba(225,202,142,.1); stroke-width: 1; stroke-dasharray: 2 10; }
.graph-lane { stroke: rgba(225,202,142,.1); stroke-width: 1; stroke-dasharray: 3 12; }
.graph-tier-label { fill: rgba(229,216,181,.24); font: 650 10px var(--mono); letter-spacing: 2px; }
.graph-link { fill: none; stroke: rgba(225,199,131,.28); stroke-linecap: round; transition: opacity .24s ease,stroke .24s ease,stroke-width .24s ease; }
.graph-link.is-dimmed { opacity: .045; }
.graph-link.is-active { stroke: rgba(242,214,140,.72); }
.graph-particle { fill: #efd78f; filter: drop-shadow(0 0 5px rgba(239,215,143,.75)); pointer-events: none; }
.graph-node { transition: opacity .24s ease; outline: none; }
.graph-node.is-dimmed { opacity: .1 !important; }
.graph-node-shadow { fill: rgba(0,0,0,.32); filter: blur(7px); pointer-events: none; }
.graph-node-ring { fill: none; stroke: rgba(241,223,175,.22); stroke-width: 1; stroke-dasharray: 2 5; transition: stroke .2s ease,stroke-width .2s ease; }
.graph-node-core { stroke: rgba(255,255,255,.38); stroke-width: 1; }
.graph-node-gloss { fill: rgba(255,255,255,.28); }
.graph-node-label text { fill: #f0e9d8; font-family: var(--disp); letter-spacing: -.15px; }
.graph-node-label-bg { fill: rgba(3,25,19,.72); stroke: rgba(230,209,154,.13); stroke-width: .7; }
.graph-node:hover .graph-node-ring,
.graph-node:focus .graph-node-ring,
.graph-node.is-selected .graph-node-ring { stroke: #f0d58b; stroke-width: 1.8; }
.graph-tier-core .graph-node-ring { animation: graph-breathe 4.8s ease-in-out infinite; }
@keyframes graph-breathe { 50% { opacity:.5; } }
body.tenx-integrated .legend {
  left: 22px;
  bottom: 20px;
  padding: 13px 15px;
  border-color: rgba(225,201,139,.18);
  border-radius: 15px;
  background: rgba(4,28,21,.62);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter: blur(16px);
}
body.tenx-integrated .nodepanel {
  top: 130px;
  min-height: 390px;
  padding: 30px 28px;
  border: 1px solid rgba(26,66,53,.08);
  border-radius: 26px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 35px 80px -54px rgba(10,48,36,.7);
  backdrop-filter: blur(18px);
}
body.tenx-integrated .nodepanel .ph { padding: 92px 18px; font-size: 13px; }
body.tenx-integrated .nodepanel h4 { font-size: 25px; letter-spacing: -.7px; }
body.tenx-integrated .nodepanel .lab { margin-top: 23px; }
body.tenx-integrated .nodepanel .val { font-size: 13.5px; line-height: 1.75; }
body.tenx-integrated .npgo { margin-top: 24px; padding: 10px 17px; border-radius: 999px; }

body.tenx-integrated .heat { gap: 14px; }
body.tenx-integrated .heat .h,
body.tenx-integrated .exptop .t { padding: 18px 20px; border-radius: 18px; }
body.tenx-integrated .flowtbl,
body.tenx-integrated .expwrap { border-radius: 24px; box-shadow: 0 30px 70px -52px rgba(10,48,36,.66); }
body.tenx-integrated .expwrap { padding: 28px; }

@media (max-width: 1180px) {
  body.tenx-integrated .stab { grid-template-columns: 210px minmax(0,1fr); gap: 22px !important; }
  body.tenx-integrated .dbody { padding-inline: 28px !important; }
  body.tenx-integrated .chain { overflow-x: auto; grid-template-columns: 175px 22px 175px 22px 175px 22px 175px 22px 175px; padding-bottom: 16px; }
  body.tenx-integrated .graph-shell { grid-template-columns: minmax(0,1fr) 300px; }
}

@media (max-width: 900px) {
  body.tenx-integrated .panel { padding-top: 38px; }
  body.tenx-integrated .stab { grid-template-columns: 1fr; }
  body.tenx-integrated .rail { position: static; flex-direction: row; max-height: none; overflow-x: auto; padding: 4px 4px 14px !important; }
  body.tenx-integrated .rail .rlabel { flex: 0 0 100%; display: none; }
  body.tenx-integrated .rtab { flex: 0 0 172px; }
  body.tenx-integrated .rtab:hover { transform: translateY(-2px); }
  body.tenx-integrated .mrow { grid-template-columns: repeat(3,1fr); }
  body.tenx-integrated .graph-shell { grid-template-columns: 1fr; }
  body.tenx-integrated .nodepanel { position: static; min-height: 0; }
}

@media (max-width: 620px) {
  body.tenx-integrated > .wrap { padding-inline: 18px; }
  body.tenx-integrated .panel { padding: 30px 0 72px; }
  body.tenx-integrated .sec-title { font-size: 31px !important; }
  body.tenx-integrated .dhead { min-height: 0; padding: 30px 24px 28px !important; }
  body.tenx-integrated .dbody { padding: 24px 18px 30px !important; }
  body.tenx-integrated .mrow { grid-template-columns: repeat(2,1fr); gap: 8px; }
  body.tenx-integrated .mrow .m { min-height: 84px; padding: 15px !important; }
  body.tenx-integrated .mrow .m:last-child { grid-column: span 2; }
  body.tenx-integrated .twocol { grid-template-columns: 1fr; }
  body.tenx-integrated .finbox,
  body.tenx-integrated .futurebox { min-height: 0; padding: 22px 20px !important; }
  body.tenx-integrated #graph { height: 590px; }
  body.tenx-integrated .gbar .hint { width: 100%; margin: 2px 4px 0; }
}

@media (prefers-reduced-motion: reduce) {
  body.tenx-integrated * { scroll-behavior: auto !important; }
}