:root {
  font-family: "Inter", "Microsoft YaHei", "PingFang SC", sans-serif;
  color: #193437;
  background: #f2f5f3;
  font-synthesis: none;
  --ink: #193437;
  --muted: #6d7f7d;
  --line: #d8e2df;
  --nav: #163d3d;
  --nav-active: #245352;
  --accent: #d5834e;
  --teal: #16857d;
  --soft: #edf5f2;
  --paper: #ffffff;
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body { min-height: 100vh; margin: 0; background: #f2f5f3; color: var(--ink); }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }

/* The formal index page reuses the matrix concept inside its auth gate.
   Make that gate the same flex column as the standalone reference page so
   the lower slogan and platform dock stay at the same vertical positions. */
.auth-gate { position: relative; display: flex; flex-direction: column; height: 100vh; min-height: 100vh; overflow: auto; background: #f5f7f6; }

.reference-shell { min-height: 100vh; display: flex; flex-direction: column; }
.reference-topbar { position: relative; z-index: 5; height: 70px; flex: 0 0 70px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 34px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.96); }
.reference-brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.reference-brand-mark { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 7px; background: var(--accent); color: #fff; font-size: 18px; font-weight: 800; }
.reference-brand-copy { display: grid; gap: 1px; min-width: 0; }
.reference-brand-copy strong { overflow: hidden; color: var(--ink); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.reference-brand-copy small { color: var(--muted); font-size: 10px; }
.concept-switch { display: flex; align-items: center; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: 6px; background: #f7f9f8; }
.concept-switch a { display: grid; place-items: center; min-width: 78px; height: 30px; padding: 0 10px; border-radius: 4px; color: var(--muted); font-size: 11px; }
.concept-switch a:hover, .concept-switch a[aria-current="page"] { background: var(--nav); color: #fff; }
.language-select { height: 34px; border: 1px solid var(--line); border-radius: 5px; padding: 0 9px; background: #fff; color: var(--ink); font-size: 11px; }
.reference-actions { display: flex; align-items: center; gap: 10px; }
.contact-link { color: var(--teal); font-size: 12px; font-weight: 650; text-decoration: none; }
.contact-link:hover, .contact-link:focus-visible { color: var(--teal-dark); text-decoration: underline; outline: none; }
.orientation-button { display: none; align-items: center; justify-content: center; min-height: 32px; padding: 0 9px; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: var(--teal); font-size: 11px; font-weight: 650; cursor: pointer; }
.orientation-button:hover, .orientation-button:focus-visible { border-color: #9dbbb5; background: var(--soft); outline: none; }

/* Keep orientation control available from the first portrait paint on phones
   and tablets; the same control remains available after rotating back. */
@media (max-width: 920px), (hover: none) and (pointer: coarse) {
  .orientation-button { display: inline-flex; }
}

.login-card { width: min(410px, 100%); border: 1px solid var(--line); border-radius: 8px; padding: 30px; background: var(--paper); box-shadow: 0 20px 52px rgba(24, 52, 55, .14); }
.login-card-plain { box-shadow: none; }
.login-kicker { margin: 0 0 8px; color: var(--teal); font-size: 10px; font-weight: 700; }
.login-card h2 { margin: 0; color: var(--ink); font-size: 24px; line-height: 1.3; letter-spacing: 0; }
.login-copy { margin: 9px 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.reference-login-form { display: grid; gap: 14px; margin-top: 24px; }
.reference-login-form label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; }
.reference-login-form input[type="text"], .reference-login-form input[type="password"] { width: 100%; height: 42px; border: 1px solid #c8d6d2; border-radius: 5px; padding: 0 12px; background: #fff; color: var(--ink); outline: none; }
.reference-login-form input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(22, 133, 125, .12); }
.reference-login-form label:has(.reference-login-history) { position: relative; }
.reference-login-history { position: absolute; z-index: 20; top: calc(100% + 4px); right: 0; left: 0; display: grid; overflow: hidden; border: 1px solid var(--line); border-radius: 5px; background: #fff; box-shadow: 0 8px 22px rgba(24, 52, 55, .14); }
.reference-login-history[hidden] { display: none; }
.reference-login-history button { min-width: 0; padding: 9px 11px; overflow: hidden; border: 0; border-bottom: 1px solid #edf1ef; background: #fff; color: var(--ink); text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; font: inherit; font-size: 11px; }
.reference-login-history button:last-child { border-bottom: 0; }
.reference-login-history button:hover, .reference-login-history button:focus-visible { background: var(--soft); color: var(--teal); outline: none; }
.password-shell { position: relative; }
.password-shell input { padding-right: 44px !important; }
.password-toggle { position: absolute; top: 50%; right: 5px; display: grid; place-items: center; width: 32px; height: 32px; transform: translateY(-50%); border: 0; border-radius: 4px; background: transparent; color: var(--muted); cursor: pointer; }
.password-toggle:hover, .password-toggle:focus-visible { background: var(--soft); color: var(--ink); outline: none; }
.form-options { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.remember-option { display: inline-flex !important; grid-template-columns: 15px auto; align-items: center; gap: 7px !important; color: var(--muted); cursor: pointer; }
.remember-option input { accent-color: var(--teal); }
.text-link { border: 0; background: transparent; color: var(--teal); font-size: 11px; cursor: pointer; }
.text-link:hover { text-decoration: underline; }
.login-command { display: grid; place-items: center; min-height: 43px; border: 0; border-radius: 5px; background: var(--teal); color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; }
.login-command:hover, .login-command:focus-visible { background: #0f6b66; outline: none; }
.login-command:disabled { cursor: wait; opacity: .68; }
.form-status { min-height: 17px; margin: -3px 0 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.form-status.error { color: #a34e4b; }
.account-entry { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; padding-top: 3px; }
.account-entry a { display: grid; place-items: center; min-height: 35px; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: var(--ink); font-size: 11px; }
.account-entry a:hover { border-color: #9dbbb5; background: var(--soft); }
.matrix-login-zone .account-entry button { display: grid; place-items: center; min-height: 35px; padding: 0 6px; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: var(--ink); font-size: 11px; cursor: pointer; }
.matrix-login-zone .account-entry button:hover, .matrix-login-zone .account-entry button.active { border-color: #9dbbb5; background: var(--soft); color: var(--teal); }
.security-note { display: flex; align-items: center; gap: 7px; margin: 18px 0 0; padding-top: 15px; border-top: 1px solid #ebf0ee; color: var(--muted); font-size: 10px; }
.security-shield { display: grid; place-items: center; flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; background: #e5f2ee; color: var(--teal); font-size: 11px; font-weight: 800; }

.platform-logo { display: block; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 7px; object-fit: contain; }
.platform-logo-lg { width: 42px; height: 42px; border-radius: 8px; }
.platform-name { min-width: 0; overflow: hidden; color: var(--ink); font-size: 11px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.platforms-label { color: var(--muted); font-size: 10px; font-weight: 650; }

/* Concept 1: global fulfillment network */
.concept-network { background: #fff; }
.concept-network .reference-topbar { border-bottom-color: rgba(255,255,255,.12); background: var(--nav); }
.concept-network .reference-brand-copy strong { color: #fff; }
.concept-network .reference-brand-copy small { color: #9ab8b3; }
.concept-network .concept-switch { border-color: rgba(255,255,255,.15); background: rgba(255,255,255,.06); }
.concept-network .concept-switch a { color: #b9cfca; }
.concept-network .concept-switch a:hover, .concept-network .concept-switch a[aria-current="page"] { background: #fff; color: var(--nav); }
.concept-network .language-select { border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: #fff; }
.concept-network .network-stage { flex: 1; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(430px, .75fr); min-height: 0; }
.network-visual { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 60px 64px 48px; background: var(--nav); color: #fff; }
.network-visual::after { position: absolute; right: -130px; bottom: -170px; width: 420px; height: 420px; border: 1px solid rgba(255,255,255,.11); border-radius: 50%; content: ""; }
.network-copy { position: relative; z-index: 1; max-width: 660px; }
.network-eyebrow { margin: 0 0 18px; color: #f0b984; font-size: 11px; font-weight: 700; }
.network-copy h1 { margin: 0; max-width: 650px; color: #fff; font-size: 38px; line-height: 1.28; letter-spacing: 0; }
.network-copy > p { max-width: 600px; margin: 18px 0 0; color: #b8cfca; font-size: 14px; line-height: 1.85; }
.network-capabilities { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 690px; margin-top: 34px; border-top: 1px solid rgba(255,255,255,.14); border-bottom: 1px solid rgba(255,255,255,.14); }
.network-capabilities div { min-width: 0; padding: 16px 15px 16px 0; }
.network-capabilities div + div { padding-left: 15px; border-left: 1px solid rgba(255,255,255,.14); }
.network-capabilities strong { display: block; color: #fff; font-size: 12px; }
.network-capabilities span { display: block; margin-top: 5px; color: #85aaa4; font-size: 9px; line-height: 1.5; }
.route-board { position: relative; z-index: 1; max-width: 730px; margin-top: 42px; }
.route-label { display: flex; align-items: center; justify-content: space-between; color: #8fb2ac; font-size: 10px; }
.route-label b { color: #dbe8e4; font-weight: 600; }
.route-track { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); align-items: center; gap: 16px; margin-top: 17px; }
.route-track::before { position: absolute; top: 21px; right: 6%; left: 6%; height: 1px; background: rgba(255,255,255,.22); content: ""; }
.route-node { position: relative; display: grid; justify-items: center; gap: 8px; min-width: 0; }
.route-node::after { position: absolute; top: 18px; left: calc(50% - 3px); width: 7px; height: 7px; border: 2px solid var(--nav); border-radius: 50%; background: #f0b984; content: ""; }
.route-node img { position: relative; z-index: 1; width: 42px; height: 42px; border: 4px solid rgba(255,255,255,.13); border-radius: 8px; background: #fff; }
.route-node span { overflow: hidden; max-width: 100%; color: #b9cfca; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.network-platform-strip { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; margin-top: 28px; }
.network-platform-strip > span { color: #7fa49e; font-size: 9px; white-space: nowrap; }
.network-platform-strip .mini-logos { display: flex; gap: 7px; }
.network-platform-strip img { width: 29px; height: 29px; border-radius: 6px; }
.network-login-zone { display: grid; place-items: center; padding: 46px; background: #f4f7f5; }

/* Concept 2: marketplace matrix */
.concept-matrix { background: #f5f7f6; }
.concept-matrix .matrix-stage { flex: 1; display: grid; grid-template-columns: minmax(690px, 1.28fr) minmax(380px, .72fr); align-items: stretch; min-height: 0; }
.matrix-login-zone { display: grid; place-items: center; padding: 28px; border-left: 1px solid var(--line); background: #f7f9f8; }
.matrix-login-zone .login-card { width: min(370px, 100%); padding: 24px; }
.matrix-login-zone .login-card h2 { font-size: 22px; }
.matrix-login-zone .login-copy { margin-top: 6px; }
.matrix-login-zone .reference-login-form { gap: 11px; margin-top: 18px; }
.matrix-login-zone .reference-login-form input[type="text"], .matrix-login-zone .reference-login-form input[type="password"] { height: 39px; }
.matrix-login-zone .login-command { min-height: 40px; }
.matrix-login-zone .security-note { margin-top: 13px; padding-top: 12px; }
.matrix-login-status { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: -2px 0 18px; padding-bottom: 12px; border-bottom: 1px solid #e9efed; color: var(--muted); font-size: 9px; }
.matrix-login-status span { display: flex; align-items: center; gap: 7px; }
.matrix-login-status i { width: 7px; height: 7px; border-radius: 50%; background: #48a47e; box-shadow: 0 0 0 4px #e6f4ee; }
.matrix-login-status b { color: #498273; font-weight: 650; }
.matrix-visual { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-width: 0; padding: 28px 48px 26px; overflow: hidden; background: #eef3f1; }
.world-map { position: absolute; z-index: 0; inset: 0; overflow: hidden; opacity: .74; pointer-events: none; }
.world-map::before, .world-map::after { position: absolute; content: ""; pointer-events: none; }
.world-map::before { top: 48%; right: -12%; left: -12%; height: 1px; background: rgba(42,103,98,.13); box-shadow: 0 -72px rgba(42,103,98,.09), 0 72px rgba(42,103,98,.09); transform: rotate(-3deg); }
.world-map::after { top: -18%; bottom: -18%; left: 50%; width: 1px; background: rgba(42,103,98,.1); box-shadow: -160px 0 rgba(42,103,98,.08), 160px 0 rgba(42,103,98,.08); transform: rotate(14deg); }
.map-land { position: absolute; display: block; background: #d4e3df; opacity: .8; filter: drop-shadow(0 1px 0 rgba(255,255,255,.48)); }
.map-north-america { top: 17%; left: 4%; width: 20%; height: 18%; clip-path: polygon(2% 22%, 22% 6%, 48% 12%, 62% 0, 83% 18%, 98% 35%, 86% 49%, 72% 52%, 63% 71%, 49% 65%, 35% 80%, 27% 62%, 12% 67%, 7% 49%); }
.map-south-america { top: 43%; left: 22%; width: 10%; height: 28%; clip-path: polygon(42% 0, 68% 13%, 78% 30%, 63% 46%, 70% 64%, 49% 77%, 37% 100%, 21% 82%, 25% 60%, 7% 42%, 18% 22%); }
.map-europe { top: 23%; left: 45%; width: 10%; height: 11%; clip-path: polygon(2% 46%, 15% 19%, 32% 31%, 44% 1%, 61% 24%, 84% 18%, 99% 49%, 81% 64%, 64% 56%, 56% 86%, 34% 68%, 17% 81%); }
.map-africa { top: 34%; left: 45%; width: 14%; height: 28%; clip-path: polygon(38% 0, 67% 13%, 80% 32%, 65% 45%, 74% 61%, 54% 83%, 42% 100%, 24% 77%, 27% 59%, 7% 43%, 18% 19%); }
.map-asia { top: 17%; right: 7%; width: 34%; height: 29%; clip-path: polygon(2% 34%, 16% 10%, 33% 15%, 45% 1%, 60% 14%, 76% 8%, 96% 29%, 88% 45%, 77% 47%, 83% 62%, 64% 67%, 55% 53%, 41% 60%, 31% 48%, 17% 65%, 8% 51%); }
.map-oceania { right: 5%; bottom: 21%; width: 16%; height: 12%; clip-path: polygon(0 47%, 20% 24%, 45% 29%, 58% 4%, 76% 20%, 100% 16%, 88% 56%, 65% 65%, 45% 100%, 22% 78%); }
.map-route { position: absolute; z-index: 1; height: 1px; border-top: 1px dashed rgba(22,133,125,.42); transform-origin: left center; }
.map-route::after { position: absolute; top: -4px; right: -1px; width: 6px; height: 6px; border-top: 1px solid rgba(22,133,125,.58); border-right: 1px solid rgba(22,133,125,.58); transform: rotate(45deg); content: ""; }
.map-route-a { top: 35%; left: 24%; width: 47%; transform: rotate(-8deg); }
.map-route-b { top: 46%; left: 47%; width: 29%; transform: rotate(17deg); }
.map-route-c { top: 46%; left: 47%; width: 25%; transform: rotate(54deg); }
.map-route-d { top: 45%; left: 47%; width: 39%; transform: rotate(155deg); }
.map-route-e { top: 45%; left: 47%; width: 31%; transform: rotate(211deg); }
.map-route-f { top: 45%; left: 47%; width: 37%; transform: rotate(326deg); }
.map-node { position: absolute; z-index: 2; width: 7px; height: 7px; border: 2px solid rgba(22,133,125,.35); border-radius: 50%; background: #16857d; box-shadow: 0 0 0 4px rgba(22,133,125,.1); }
.map-node-a { top: 32%; left: 24%; }
.map-node-b { top: 42%; left: 47%; }
.map-node-c { top: 34%; right: 25%; }
.map-node-d { right: 23%; bottom: 24%; }
.map-node-e { bottom: 24%; left: 25%; }
.map-node-f { top: 16%; left: 48%; }
.matrix-visual > :not(.world-map) { position: relative; z-index: 2; }
.matrix-copy { width: 100%; max-width: 850px; }
.matrix-copy .login-kicker { color: var(--accent); }
.matrix-copy h1 { margin: 0; max-width: 680px; color: var(--ink); font-size: 34px; line-height: 1.32; letter-spacing: 0; }
.matrix-copy > p { max-width: 700px; margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.75; }
.matrix-visual > .matrix-slogan { position: absolute; z-index: 3; right: 23%; bottom: calc(24% - 14px); left: 25%; width: auto; max-width: none; margin: 0; color: var(--teal); font-size: 22px; font-weight: 700; letter-spacing: .18em; line-height: 1.6; text-align: center; white-space: nowrap; }
.trade-command-board { width: 100%; max-width: 850px; margin-top: 24px; padding: 18px; border: 1px solid #d4dfdc; border-radius: 7px; background: rgba(255,255,255,.76); }
.trade-board-heading, .platform-dock-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; color: var(--ink); font-size: 10px; font-weight: 700; }
.trade-board-heading b { display: flex; align-items: center; gap: 7px; color: #498273; font-size: 9px; font-weight: 600; }
.trade-board-heading i { width: 6px; height: 6px; border-radius: 50%; background: #48a47e; }
.trade-lane { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 16px; border: 1px solid #dce5e2; border-radius: 6px; background: #fff; }
.trade-lane article { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 9px; min-width: 0; min-height: 72px; padding: 11px; }
.trade-lane article + article { border-left: 1px solid #e5ecea; }
.trade-lane article:not(:last-child)::after { position: absolute; z-index: 1; top: calc(50% - 5px); right: -5px; width: 9px; height: 9px; border-top: 1px solid #95aaa5; border-right: 1px solid #95aaa5; background: #fff; transform: rotate(45deg); content: ""; }
.trade-stage-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 6px; background: var(--nav); color: #fff; font-size: 12px; font-weight: 700; }
.trade-lane strong, .trade-lane small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trade-lane strong { color: var(--ink); font-size: 10px; }
.trade-lane small { margin-top: 5px; color: var(--muted); font-size: 8px; }
.trade-data-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin-top: 8px; }
.trade-data-grid div { min-width: 0; padding: 12px; border: 1px solid #dce5e2; border-radius: 6px; background: #f8faf9; }
.trade-data-grid span, .trade-data-grid strong, .trade-data-grid small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trade-data-grid span { color: var(--muted); font-size: 8px; }
.trade-data-grid strong { margin-top: 5px; color: var(--ink); font-size: 11px; }
.trade-data-grid small { margin-top: 5px; color: #82918f; font-size: 8px; }
.trade-visual-board { width: 100%; max-width: 850px; margin-top: 24px; padding: 16px; border: 1px solid rgba(198,216,211,.9); border-radius: 7px; background: rgba(255,255,255,.84); box-shadow: 0 10px 26px rgba(46,88,83,.06); }
.visual-board-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; color: var(--ink); font-size: 10px; font-weight: 700; }
.visual-board-heading b { display: flex; align-items: center; gap: 7px; color: #498273; font-size: 9px; font-weight: 600; }
.visual-board-heading i { width: 6px; height: 6px; border-radius: 50%; background: #48a47e; }
.visual-scene-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px 11px; margin-top: 13px; }
.visual-scene { position: relative; min-width: 0; height: 122px; overflow: hidden; isolation: isolate; background: #dfe9e6; box-shadow: 0 5px 13px rgba(31,65,62,.11); pointer-events: none; }
.visual-scene::after { position: absolute; z-index: 1; right: 0; bottom: 0; left: 0; height: 52%; background: linear-gradient(0deg, rgba(12,35,36,.78), rgba(12,35,36,0)); content: ""; }
.visual-scene > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.84) contrast(.98); transition: none; }
.scene-sourcing { clip-path: polygon(0 0, 91% 0, 100% 50%, 91% 100%, 0 100%); }
.scene-warehouse { border-radius: 53px; }
.scene-port { clip-path: polygon(7% 0, 100% 0, 93% 100%, 0 100%); }
.scene-customs { clip-path: polygon(8% 0, 92% 0, 100% 50%, 92% 100%, 8% 100%, 0 50%); }
.scene-delivery { clip-path: polygon(0 0, 94% 0, 100% 50%, 94% 100%, 0 100%, 6% 50%); }
.scene-platform { border-radius: 6px 42px 6px 42px; }
.scene-sourcing > img { object-position: center 52%; }
.scene-warehouse > img { object-position: center 46%; }
.scene-port > img { object-position: center 52%; }
.scene-customs > img { object-position: center 56%; }
.scene-delivery > img { object-position: center 54%; }
.scene-platform > img { object-position: center 47%; }
.scene-label { position: absolute; z-index: 2; right: 9px; bottom: 8px; left: 9px; min-width: 0; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.24); }
.scene-label strong, .scene-label small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scene-label strong { font-size: 11px; }
.scene-label small { margin-top: 4px; color: #d8e7e2; font-size: 9px; }
.signal-rail { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 11px; border-top: 1px solid #e0e9e6; }
.signal-rail div { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) 16px; align-items: center; gap: 7px; min-width: 0; padding: 10px 8px 0 0; }
.signal-rail div + div { padding-left: 12px; border-left: 1px solid #e0e9e6; }
.signal-rail b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 4px; background: #e6f1ee; color: var(--teal); font-size: 8px; }
.signal-rail span { color: var(--ink); font-size: 10px; }
.signal-rail i { color: #7e9a95; font-size: 13px; font-style: normal; }
.operations-toolbar { width: 100%; max-width: 850px; margin-top: 14px; }
.operations-toolbar-heading { display: flex; align-items: center; gap: 9px; color: var(--ink); font-size: 10px; font-weight: 700; }
.operations-toolbar-heading small { color: var(--muted); font-size: 8px; font-weight: 500; }
.operations-tool-list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; margin-top: 9px; }
.operation-tool { display: grid; grid-template-columns: 23px minmax(0, 1fr); align-items: center; gap: 7px; min-width: 0; padding: 8px 9px; border: 1px solid #d6e1de; border-radius: 6px; background: rgba(255,255,255,.72); }
.operation-tool b { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 5px; background: #e3f0ec; color: var(--teal); font-size: 13px; font-weight: 700; }
.operation-tool:nth-child(2) b { background: #f8eadc; color: #b76d3c; }
.operation-tool:nth-child(3) b { background: #e6edf5; color: #527c9a; }
.operation-tool:nth-child(4) b { background: #f1e6ed; color: #9b5d7a; }
.operation-tool:nth-child(5) b { background: #e9e8f4; color: #686299; }
.operation-tool:nth-child(6) b { background: #f8ebd5; color: #b57d2f; }
.operation-tool span { min-width: 0; overflow: hidden; color: var(--ink); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.platform-dock { width: 100%; max-width: 850px; margin-top: auto; padding-top: 22px; }
.platform-dock-heading { padding-top: 14px; border-top: 1px solid #d3dedb; }
.platform-dock-heading b { color: #617573; font-size: 9px; font-weight: 600; }
.platform-dock-logos { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); align-items: center; gap: 8px 14px; margin-top: 13px; }
.platform-dock-logos .platform-logo { justify-self: start; width: 30px; height: 30px; border-radius: 6px; }

/* Concept 3: operating console */
.concept-console { background: #edf2f0; }
.concept-console .reference-topbar { box-shadow: 0 1px 0 rgba(24,52,55,.04); }
.concept-console .console-stage { flex: 1; display: grid; grid-template-columns: 210px minmax(0, 1fr); min-height: 0; height: calc(100vh - 70px); padding: 18px; gap: 18px; overflow: hidden; }
.console-rail { display: flex; flex-direction: column; min-height: 0; padding: 24px 18px; border-radius: 8px; background: var(--nav); color: #fff; }
.console-rail-title { margin: 0 0 18px; color: #8fb0ab; font-size: 10px; }
.console-rail ol { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.console-rail li { display: grid; grid-template-columns: 26px 1fr; align-items: center; gap: 9px; min-height: 42px; padding: 5px 7px; border-radius: 5px; color: #afc7c2; font-size: 11px; }
.console-rail li.active { background: var(--nav-active); color: #fff; }
.console-step { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid rgba(255,255,255,.17); border-radius: 5px; color: #f0b984; font-size: 10px; }
.console-rail-foot { margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.11); color: #86aaa4; font-size: 9px; line-height: 1.7; }
.console-workspace { min-width: 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(390px, 430px); gap: 18px; }
.console-overview { min-width: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; padding: 32px 34px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.console-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.console-heading h1 { margin: 0; max-width: 650px; font-size: 30px; line-height: 1.35; letter-spacing: 0; }
.console-heading p { max-width: 620px; margin: 11px 0 0; color: var(--muted); font-size: 12px; line-height: 1.75; }
.live-state { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; color: #498273; font-size: 10px; white-space: nowrap; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #48a47e; box-shadow: 0 0 0 4px #e6f4ee; }
.console-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 30px; }
.console-metric { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 7px; background: #f8faf9; }
.console-metric span { display: block; color: var(--muted); font-size: 9px; }
.console-metric strong { display: block; margin-top: 7px; color: var(--ink); font-size: 18px; }
.console-process { margin-top: 30px; }
.console-section-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 13px; }
.console-section-title strong { font-size: 12px; }
.console-section-title span { color: var(--muted); font-size: 9px; }
.console-process-track { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.console-process-track div { position: relative; min-width: 0; padding: 17px 12px; }
.console-process-track div + div { border-left: 1px solid var(--line); }
.console-process-track b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--soft); color: var(--teal); font-size: 9px; }
.console-process-track span { display: block; margin-top: 9px; color: var(--ink); font-size: 10px; }
.console-platform-row { display: flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 28px; }
.console-platform-row .platforms-label { margin-right: 5px; }
.console-platform-row [data-platform-row] { display: flex; align-items: center; gap: 7px; min-width: 0; }
.console-platform-row img { width: 32px; height: 32px; }
.console-login-zone { display: grid; place-items: center; padding: 28px; border: 1px solid var(--line); border-radius: 8px; background: #f7f9f8; }
.concept-console .login-card { width: 100%; box-shadow: 0 16px 38px rgba(24,52,55,.09); }

@media (max-width: 1120px) {
  .concept-network .network-stage { grid-template-columns: minmax(0, 1fr) 420px; }
  .network-visual { padding-right: 40px; padding-left: 40px; }
  .network-copy h1 { font-size: 32px; }
  .concept-matrix .matrix-stage { grid-template-columns: minmax(590px, 1fr) 410px; }
  .matrix-visual { padding: 38px 32px 30px; }
  .matrix-bento { grid-template-columns: minmax(0, 1fr) 160px; }
  .bento-platform-board .platform-matrix { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .console-stage { grid-template-columns: 180px minmax(0, 1fr) !important; }
  .console-workspace { grid-template-columns: minmax(0, 1fr) 390px; }
  .console-overview { padding: 28px 24px; }
  .console-heading h1 { font-size: 26px; }
}

@media (min-width: 921px) and (max-height: 820px) {
  .matrix-visual { padding-top: 18px; padding-bottom: 12px; }
  .matrix-copy h1 { font-size: 30px; }
  .matrix-copy > p { margin-top: 6px; line-height: 1.55; }
  .trade-visual-board { margin-top: 16px; padding: 13px 16px; }
  .visual-scene-grid { margin-top: 10px; }
  .visual-scene { height: 96px; }
  .signal-rail { margin-top: 8px; }
  .signal-rail div { padding-top: 7px; }
  .operations-toolbar { margin-top: 9px; }
  .operations-tool-list { margin-top: 6px; }
  .operation-tool { padding-top: 6px; padding-bottom: 6px; }
  .platform-dock { padding-top: 9px; }
  .platform-dock-heading { padding-top: 9px; }
  .platform-dock-logos { gap: 6px 14px; margin-top: 7px; }
}

@media (max-width: 920px) {
  .reference-topbar { height: auto; min-height: 70px; flex-wrap: wrap; padding: 14px 20px; }
  .reference-actions { margin-left: auto; }
  .concept-switch { order: 3; width: 100%; }
  .concept-switch a { flex: 1; min-width: 0; }
  .concept-network .network-stage, .concept-matrix .matrix-stage { grid-template-columns: 1fr; }
  .network-visual { min-height: 560px; }
  .network-login-zone, .matrix-login-zone { padding: 40px 24px; }
  .matrix-login-zone { order: 2; border-top: 1px solid var(--line); border-left: 0; }
  .matrix-visual { order: 1; }
  .concept-console .console-stage { grid-template-columns: 1fr !important; }
  .concept-console .console-stage { height: auto; overflow: visible; }
  .console-rail { display: none; }
  .console-workspace { grid-template-columns: 1fr; }
  .console-login-zone { order: -1; }
}

@media (max-width: 1120px) and (orientation: landscape) {
  .auth-gate { height: 100dvh; min-height: 0; min-width: 0; overflow: hidden; }
  .reference-topbar { height: 52px; min-height: 52px; flex-basis: 52px; padding: 0 14px; }
  .reference-brand-mark { width: 28px; height: 28px; flex-basis: 28px; font-size: 15px; }
  .reference-brand { gap: 8px; }
  .reference-brand-copy strong { font-size: 12px; }
  .orientation-button { display: inline-flex; }
  .concept-matrix .matrix-stage { height: calc(100dvh - 52px); min-height: 0; grid-template-columns: minmax(0, 1.3fr) minmax(290px, .7fr); overflow: hidden; }
  .matrix-visual { min-height: 0; padding: 14px 18px 16px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .matrix-copy h1 { font-size: 23px; }
  .matrix-copy > p { margin-top: 5px; font-size: 10px; line-height: 1.45; }
  .trade-visual-board { margin-top: 10px; padding: 10px; }
  .visual-board-heading { font-size: 9px; }
  .visual-scene-grid { gap: 6px 8px; margin-top: 8px; }
  .visual-scene { height: 72px; }
  .scene-label { right: 6px; bottom: 5px; left: 6px; }
  .scene-label strong { font-size: 9px; }
  .scene-label small { margin-top: 2px; font-size: 7px; }
  .signal-rail { margin-top: 7px; }
  .signal-rail div { grid-template-columns: 18px minmax(0, 1fr) 10px; gap: 4px; padding: 6px 4px 0 0; }
  .signal-rail div + div { padding-left: 6px; }
  .signal-rail b { width: 18px; height: 18px; font-size: 7px; }
  .signal-rail span { font-size: 8px; }
  .signal-rail i { font-size: 10px; }
  .operations-toolbar { margin-top: 8px; }
  .operations-toolbar-heading { font-size: 9px; }
  .operations-toolbar-heading small { font-size: 7px; }
  .operations-tool-list { gap: 5px; margin-top: 5px; }
  .operation-tool { grid-template-columns: 18px minmax(0, 1fr); gap: 4px; padding: 5px 5px; }
  .operation-tool b { width: 18px; height: 18px; font-size: 10px; }
  .operation-tool span { font-size: 8px; }
  .matrix-visual > .matrix-slogan { position: static; width: 100%; margin: 8px 0 0; font-size: 14px; letter-spacing: .08em; white-space: nowrap; }
  .platform-dock { margin-top: 8px; padding-top: 8px; }
  .platform-dock-heading { padding-top: 8px; font-size: 8px; }
  .platform-dock-heading b { font-size: 7px; }
  .platform-dock-logos { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px 8px; margin-top: 6px; }
  .platform-dock-logos .platform-logo { width: 24px; height: 24px; }
  .matrix-login-zone { min-height: 0; place-items: start center; padding: 14px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .matrix-login-zone .login-card { max-height: none; overflow: visible; padding: 18px; }
  .matrix-login-zone .login-card h2 { font-size: 19px; }
  .matrix-login-zone .login-copy { font-size: 10px; line-height: 1.5; }
}

@media (max-width: 620px) {
  .reference-topbar { gap: 12px; padding: 12px 14px; }
  .reference-brand-copy small { display: none; }
  .language-select { display: none; }
  .concept-switch a { height: 34px; padding: 0 5px; }
  .network-visual, .matrix-visual { min-height: 0; padding: 36px 20px; }
  .network-copy h1, .matrix-copy h1 { font-size: 27px; }
  .network-capabilities { grid-template-columns: repeat(2, 1fr); }
  .network-capabilities div:nth-child(3) { border-left: 0; }
  .route-track { gap: 8px; }
  .route-node img { width: 36px; height: 36px; }
  .route-node:nth-child(n+5) { display: none; }
  .route-track { grid-template-columns: repeat(4, 1fr); }
  .network-platform-strip { align-items: flex-start; flex-direction: column; }
  .network-platform-strip .mini-logos img:nth-child(n+7) { display: none; }
  .matrix-bento { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; }
  .bento-platform-board { grid-column: 1 / -1; grid-row: auto; }
  .bento-flow-board { grid-column: 1 / -1; }
  .bento-platform-board .platform-matrix { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .matrix-coverage { flex-wrap: wrap; }
  .matrix-coverage span { width: 100%; }
  .platform-dock-logos { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px 12px; }
  .operations-tool-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .login-card { padding: 24px 20px; }
  .console-stage { padding: 10px !important; }
  .console-overview { padding: 24px 18px; }
  .console-heading { display: block; }
  .live-state { margin-top: 14px; }
  .console-metrics { grid-template-columns: 1fr 1fr; }
  .console-metric:last-child { grid-column: 1 / -1; }
  .console-process-track { grid-template-columns: repeat(2, 1fr); }
  .console-process-track div + div { border-left: 0; }
  .console-process-track div:nth-child(2n) { border-left: 1px solid var(--line); }
  .console-process-track div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .console-platform-row { flex-wrap: wrap; }
  .console-platform-row .platforms-label { width: 100%; }
  .console-platform-row [data-platform-row] { flex-wrap: wrap; }
  .account-entry { grid-template-columns: 1fr; }
  .matrix-slogan { position: static; width: 100%; margin: 12px 0 0; font-size: 16px; letter-spacing: .08em; white-space: normal; }
}