:root {
  --navy: #191b1f;
  --teal: #e60012;
  --mint: #fde8ea;
  --ink: #202226;
  --muted: #73777f;
  --line: #e2e3e6;
  --bg: #f4f4f5;
  --shadow: 0 14px 34px rgba(30, 30, 32, .1);
  --custom-product-card-height: 340px;
  --custom-product-image-height: 118px;
  --custom-library-image-width: 156px;
  --custom-library-image-height: 82px;
  --custom-product-footer-height: 47px;
  --custom-type-card-height: 140px;
  --custom-feature-font-size: 10px;
  --recommended-product-card-height: 400px;
  --recommended-product-image-height: 145px;
}

.sidebar { background: linear-gradient(180deg, #1c1d20, #111214); overflow: hidden; }
.brand { display: grid; justify-items: center; padding: 0 8px 30px; }
.brand-logo { background: #fff; border-radius: 12px; padding: 9px; width: 112px; height: 112px; box-sizing: border-box; display: grid; place-items: center; overflow: hidden; }
.brand-logo img { width: auto !important; height: auto !important; max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.brand > span { color: #aeb0b5; display: block; font-size: 11px; letter-spacing: 1px; margin-top: 10px; text-align: center; }
.sidebar nav { flex: 1 1 auto; min-height: 0; align-content: start; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding-right: 5px; }
.sidebar nav::-webkit-scrollbar { width: 5px; }
.sidebar nav::-webkit-scrollbar-track { background: transparent; }
.sidebar nav::-webkit-scrollbar-thumb { background: #46494e; border-radius: 999px; }
.sidebar nav::-webkit-scrollbar-thumb:hover { background: #5b5e64; }
.sidebar nav { scrollbar-color: #46494e transparent; scrollbar-width: thin; }
.nav-item.active, .nav-item:hover { background: #34363a; box-shadow: inset 3px 0 0 var(--teal); }
.nav-library-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; }
.nav-library-toggle i { font-style: normal; font-size: 17px; transition: transform .2s ease; }
.nav-library.expanded .nav-library-toggle i { transform: rotate(180deg); }
.nav-library-menu { display: grid; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .25s ease, opacity .2s ease; }
.nav-library.expanded .nav-library-menu { max-height: 500px; opacity: 1; padding: 6px 0 2px; }
.nav-library-menu button { border: 0; border-left: 1px solid #4a4d51; background: transparent; color: #9ea2a7; margin-left: 24px; padding: 8px 14px; text-align: left; cursor: pointer; }
.nav-library-menu button:hover, .nav-library-menu button.active { border-left-color: var(--teal); color: #fff; background: rgba(255,255,255,.05); }
.source-state { border-color: #393b3f; }
.source-state > span { background: var(--teal); box-shadow: 0 0 0 5px rgba(230, 0, 18, .14); }
.source-state small, .version { color: #858990; }

.header-controls { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.language-select { position: relative; display: flex; align-items: center; height: 40px; padding: 0 9px 0 11px; background: #fff; border: 1px solid var(--line); border-radius: 9px; box-shadow: 0 3px 10px rgba(0,0,0,.05); }
.language-select select { min-width: 92px; height: 100%; border: 0; outline: 0; background: transparent; color: #34363a; cursor: pointer; font: 600 13px/1 "Segoe UI", Arial, sans-serif; }
.market-switch { background: #e6e6e8; border-radius: 9px; padding: 4px; }
.market-switch button { border: 0; background: transparent; padding: 8px 14px; border-radius: 7px; color: var(--muted); cursor: pointer; }
.market-switch button.active { background: #fff; color: #17181b; box-shadow: 0 3px 10px rgba(0,0,0,.08); font-weight: 700; }

.scenario-grid { gap: 20px; }
.scenario-card { padding: 0; min-height: 300px; overflow: hidden; border-radius: 16px; background: #fff; display: flex; flex-direction: column; }
.project-scene-card { height: 330px; min-height: 330px; }
.project-scene-card .scenario-media { height: 168px; flex: 0 0 168px; }
.scenario-card.disabled { opacity: .74; }
.scenario-card.disabled .scenario-media img { filter: saturate(.6); }
.scenario-media { height: 190px; overflow: hidden; position: relative; background: #ddd; }
.scenario-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.36)); }
.scenario-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.scenario-card:not(.disabled):hover .scenario-media img { transform: scale(1.035); }
.scenario-copy { padding: 19px 20px 20px; position: relative; flex: 1; }
.scenario-copy h3 { margin: 0 0 7px; font-size: 17px; }
.scenario-copy p { margin: 0; padding-right: 28px; }
.scenario-arrow { position: absolute; right: 20px; bottom: 20px; color: var(--teal); font-weight: 800; }
.scenario-card.disabled .scenario-arrow { display: none; }
.project-scene-card .scenario-copy { display: flex; flex-direction: column; }
.project-scene-card .scenario-copy > p { max-height: 42px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.scenario-solution-summary { margin-top: auto; padding-top: 14px; padding-right: 27px; }
.scenario-solution-summary > small { display: block; margin-bottom: 7px; color: #89969d; font-size: 8px; font-weight: 850; letter-spacing: .08em; }
.scenario-solution-summary > div { display: flex; flex-wrap: wrap; gap: 5px; }
.scenario-solution-summary span { border: 1px solid #dce8e8; border-radius: 999px; padding: 3px 7px; background: #f2f8f7; color: #28746f; font-size: 8px; font-weight: 800; line-height: 1.25; white-space: nowrap; }
.badge { z-index: 2; background: rgba(255,255,255,.92); color: #555; box-shadow: 0 3px 12px rgba(0,0,0,.12); }
.scenario-card:not(.disabled) .badge { background: var(--teal); color: #fff; }

.hero { min-height: 270px; background-size: cover; background-position: center; align-items: center; }
.hero p { color: #e1e2e4; max-width: 720px; }
.metric { backdrop-filter: blur(8px); background: rgba(255,255,255,.10); }
.metric strong { color: #ff4a57; }
.metric span { color: #e0e1e3; }
.product-role, .mode time, .back, .eyebrow { color: var(--teal); }
.add, .primary { background: var(--teal); }
.filters button.active { background: var(--teal); border-color: var(--teal); }
.toolbar { align-items: flex-start; }
.filters { display: grid; flex: 1; gap: 10px; }
.filter-level { display: flex; align-items: flex-start; justify-content: flex-end; gap: 12px; }
.filter-level > span { flex: 0 0 64px; padding-top: 9px; color: var(--muted); font-size: 11px; font-weight: 700; text-align: right; }
.filter-level > div { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
#productsView > .product-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
#productsView .product-image { height: var(--custom-product-image-height); min-height: var(--custom-product-image-height); flex: 0 0 var(--custom-product-image-height); padding: 0; overflow: hidden; }
#productsView .product-image img { width: var(--custom-library-image-width); height: var(--custom-library-image-height); max-width: calc(100% - 24px); max-height: calc(100% - 24px); padding: 0; box-sizing: border-box; object-fit: contain; object-position: center; }
@media (max-width: 1400px) { #productsView > .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1150px) { #productsView > .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { #productsView > .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

html[lang="en"] body { font-family: "Segoe UI", Arial, sans-serif; }
html[lang="en"] .nav-item { font-size: 14px; }
html[lang="en"] .mode { grid-template-columns: 55px 105px 1fr; }
html[lang="fr"] .mode,
html[lang="ru"] .mode,
html[lang="de"] .mode { grid-template-columns: 90px 130px minmax(0, 1fr); align-items: start; }
html[lang="fr"] .mode time,
html[lang="fr"] .mode strong,
html[lang="ru"] .mode time,
html[lang="ru"] .mode strong,
html[lang="de"] .mode time,
html[lang="de"] .mode strong { min-width: 0; overflow-wrap: anywhere; }

.solution-toolbar { margin: 28px 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.solution-mode-switch { margin: 0; display: inline-flex; padding: 5px; border: 1px solid var(--line); background: #e9e9eb; border-radius: 12px; }
.solution-mode-switch button { border: 0; background: transparent; color: #6e7279; padding: 11px 22px; border-radius: 9px; cursor: pointer; font-weight: 700; }
.solution-mode-switch button.active { background: #fff; color: var(--teal); box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.protocol-tabs { display: flex; align-items: stretch; gap: 7px; }
.protocol-tabs.hidden { display: none; }
.protocol-tabs button { min-width: 88px; border: 1px solid var(--line); border-radius: 10px; padding: 7px 12px; background: #fff; color: #555a61; cursor: pointer; }
.protocol-tabs strong, .protocol-tabs small { display: block; }
.protocol-tabs strong { font-size: 12px; }
.protocol-tabs small { margin-top: 2px; color: #999da3; font-size: 9px; }
.protocol-tabs button.active { border-color: var(--teal); background: #fff5f6; color: var(--teal); box-shadow: 0 4px 12px rgba(230,0,18,.07); }
.protocol-empty { display: grid; gap: 7px; }
.protocol-empty strong { color: var(--teal); font-size: 18px; }
.protocol-empty span { font-size: 12px; }
.recommended .product-grid { align-items: stretch; grid-auto-rows: var(--recommended-product-card-height); }
.recommended .product-card { height: var(--recommended-product-card-height); min-height: var(--recommended-product-card-height); max-height: var(--recommended-product-card-height); }
.recommended .product-image { height: var(--recommended-product-image-height); min-height: var(--recommended-product-image-height); flex: 0 0 var(--recommended-product-image-height); padding: 16px; }
.recommended .product-image img { max-width: 150px; max-height: 115px; }
.recommended .product-body { min-height: 0; overflow: hidden; }
.recommended .product-role,
.recommended .model { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.recommended .model { min-height: 15px; flex: 0 0 15px; }
.recommended .product-body h3 { min-height: 34px; max-height: 34px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.recommended .home-recommended-params { min-height: 16px; max-height: 32px; margin: 5px 0 2px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.recommended .features { min-height: 0; max-height: 58px; margin: 7px 0 9px; padding-left: 0; overflow: hidden; list-style: none; }
.recommended .features li { position: relative; display: block; padding-left: 13px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.recommended .features li::before { content: "\2022"; position: absolute; left: 1px; top: 0; color: currentColor; font-size: 11px; font-weight: 800; line-height: inherit; }
.recommended .product-actions { flex: 0 0 29px; min-height: 29px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; flex-wrap: nowrap; }
.recommended .product-actions button { min-width: 0; padding: 8px 5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.recommended .product-actions .add { margin-left: 0; }
.recommended-topology { margin-top: 26px; background: #17191d; color: #fff; border-radius: 17px; padding: 25px 28px 18px; overflow: hidden; }
.recommended-topology-svg { width: 100%; height: auto; margin-top: 8px; }
.recommended-topology-node rect { fill: #25282e; stroke: #4a4e56; stroke-width: 1.5; }
.recommended-topology-node.level-platform rect { fill: #292142; stroke: #9b7cff; stroke-width: 2; }
.recommended-topology-node.level-management rect { fill: #173b39; stroke: #2dd4bf; stroke-width: 2; }
.recommended-topology-node.level-network rect { fill: #182f48; stroke: #4da3ff; stroke-width: 2; }
.recommended-topology-node.level-gateway rect { fill: #402d1c; stroke: #ff9f43; stroke-width: 2; }
.recommended-topology-node.level-field rect { fill: #22362a; stroke: #7bd88f; stroke-width: 1.5; }
.rt-title { fill: #fff; font-size: 13px; font-weight: 700; }
.rt-subtitle { fill: #aeb2b9; font-size: 10px; }
.rt-line { fill: none; stroke: #777b83; stroke-width: 2; }
.rt-line.integration { stroke: #9b7cff; stroke-width: 2.5; stroke-dasharray: 7 5; }
.rt-line.wireless-control-link { stroke: #c084fc; stroke-width: 2.5; stroke-dasharray: 8 5; }
.rt-line.silvair-app-link { stroke: #4da3ff; stroke-width: 3; }
.silvair-topology-svg .rt-line.field-link { stroke: #7bd88f; stroke-width: 2.5; }
.wireless-control-node rect { stroke: #c084fc; fill: #2b2038; }
.wireless-control-node .rt-title { font-size: 12px; }
.wireless-control-node .rt-subtitle { font-size: 9px; }
.rt-line.ethernet { stroke: #4da3ff; stroke-width: 3; }
.rt-line.dali, .rt-line.bus { stroke: #ff9f43; stroke-width: 3; }
.rt-line.field-link, .recommended-topology-svg .rt-line:not(.integration):not(.ethernet):not(.dali):not(.bus) { stroke: #7bd88f; }
.silvair-topology-svg .rt-line.silvair-app-link { stroke: #4da3ff; stroke-width: 3; stroke-dasharray: 8 5; }
.rt-label, .rt-bus-label { font-size: 11px; font-weight: 700; }
.integration-label { fill: #bba8ff; }
.ethernet-label { fill: #73b8ff; }
.rt-bus-label { fill: #ffb968; }
.recommended-topology-svg marker path { fill: #d9dce1; }
.solar-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.energy-storage-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.solar-topology-stack { display: grid; gap: 26px; margin-top: 26px; }
.solar-topology-stack .solar-product-topology { margin-top: 0; }
.solar-topology-note, .metro-topology-note, .energy-storage-topology-note { margin: 4px 0 0; padding: 13px 15px; border: 1px solid #363b43; border-radius: 10px; background: #202329; color: #aeb7bf; font-size: 11px; line-height: 1.75; }
.energy-storage-variant rect { fill: #202d33; stroke: #5a6870; stroke-width: 1.5; }
.energy-storage-variant .rt-title { fill: #fff; }
.energy-storage-variant .rt-subtitle { fill: #9be5aa; }
@media (max-width: 1100px) { .energy-storage-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .solar-product-grid, .energy-storage-product-grid { grid-template-columns: 1fr; } }
.topology-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.topology-legend span { padding: 5px 8px; border: 1px solid currentColor; border-radius: 10px; font-size: 9px; font-weight: 700; }
.topology-legend .platform { color: #bba8ff; }
.topology-legend .management { color: #59dfd1; }
.topology-legend .network { color: #73b8ff; }
.topology-legend .gateway { color: #ffb968; }
.topology-legend .field { color: #9be5aa; }
.topology-tools { display: grid; justify-items: end; gap: 10px; }
.export-topology { border: 1px solid #ff6974; border-radius: 9px; padding: 8px 13px; background: #3a1d21; color: #fff; font-size: 11px; font-weight: 700; cursor: pointer; }
.export-topology:hover { background: var(--teal); }
.export-topology:disabled { opacity: .55; cursor: wait; }
.custom-builder { display: grid; gap: 18px; margin-top: 38px; }
.custom-builder.hidden { display: none; }
.builder-heading { display: flex; align-items: center; justify-content: space-between; }
.add-custom-selection { display: inline-flex; align-items: center; gap: 9px; border: 0; border-radius: 10px; padding: 11px 15px; background: var(--teal); color: #fff; font-size: 12px; font-weight: 700; cursor: pointer; }
.add-custom-selection span { min-width: 20px; padding: 2px 6px; border-radius: 10px; background: rgba(255,255,255,.2); text-align: center; }
.add-custom-selection:disabled { opacity: .45; cursor: not-allowed; }
.builder-heading h2, .topology-head h2 { margin-bottom: 0; }
.protocol-box { min-width: 230px; border: 1px solid #f1b8bd; background: #fff5f6; border-radius: 13px; padding: 13px 16px; display: grid; grid-template-columns: 1fr auto; gap: 3px 16px; }
.protocol-box span, .protocol-box small { color: var(--muted); font-size: 11px; }
.protocol-box strong { grid-row: 1 / 3; grid-column: 2; align-self: center; color: var(--teal); font-size: 22px; }
.builder-group { background: #fff; border: 1px solid var(--line); border-radius: 15px; padding: 22px; }
.builder-group-head { display: flex; gap: 14px; align-items: center; margin-bottom: 15px; }
.builder-group-head h3 { margin: 0 auto 0 0; font-size: 16px; }
.builder-group-head label { color: var(--muted); font-size: 12px; }
.builder-group-head input { width: 66px; margin-left: 7px; border: 1px solid var(--line); border-radius: 7px; padding: 7px; }
.driver-switch { display: flex; background: #f0f0f1; border-radius: 8px; padding: 3px; }
.driver-switch button { border: 0; background: transparent; padding: 7px 12px; border-radius: 6px; color: var(--muted); cursor: pointer; }
.driver-switch button.active { background: var(--teal); color: #fff; }
.custom-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.custom-option { position: relative; min-height: 174px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #fafafb; color: var(--ink); text-align: left; cursor: pointer; transition: .18s; }
.custom-option:hover { border-color: #e89198; transform: translateY(-1px); }
.custom-option.selected { border: 2px solid var(--teal); background: #fff7f8; padding: 15px; box-shadow: 0 8px 20px rgba(230,0,18,.07); }
.option-check { position: absolute; right: 12px; top: 12px; width: 20px; height: 20px; border: 1px solid #c8c9cc; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 11px; }
.custom-option.selected .option-check { border-color: var(--teal); background: var(--teal); }
.custom-option strong, .custom-option code, .custom-option b { display: block; padding-right: 25px; }
.custom-option strong { font-size: 13px; margin-bottom: 5px; }
.custom-option code { color: var(--teal); font-size: 11px; margin-bottom: 8px; }
.custom-option b { font-size: 11px; color: #35383d; margin-bottom: 8px; }
.custom-option ul { margin: 0; padding-left: 16px; color: var(--muted); font-size: 10px; line-height: 1.55; }
.topology-panel { background: #17191d; color: #fff; border-radius: 17px; padding: 25px 28px 18px; overflow: hidden; }
.topology-head { display: flex; justify-content: space-between; align-items: center; }
.topology-head span { color: #999da5; font-size: 11px; }
.topology-svg { width: 100%; height: auto; margin-top: 8px; }
.topology-line { fill: none; stroke: #777b83; stroke-width: 2; }
.topology-line.primary, .topology-line.bus { stroke: #e60012; stroke-width: 3; }
.topology-svg marker path { fill: #a8abb1; }
.bus-label { fill: #ff6570; font-size: 14px; font-weight: 700; }
.topology-node rect { fill: #25282e; stroke: #4a4e56; stroke-width: 1.5; }
.topology-node.accent rect { fill: #3a1d21; stroke: #e60012; }
.node-title { fill: #aeb2b9; font-size: 13px; }
.node-model { fill: #fff; font-size: 15px; font-weight: 700; }
.node-qty { fill: #ff5c68; font-size: 15px; font-weight: 800; }

.dmx-empty-types { min-height: 160px; display: grid; place-content: center; gap: 6px; border: 1px dashed var(--line); border-radius: 13px; background: #fafafb; text-align: center; }
.dmx-empty-types strong { font-size: 15px; }
.dmx-empty-types span { color: var(--muted); font-size: 11px; }
.dmx-custom-topology-svg .topology-placeholder rect { stroke-dasharray: 7 5; opacity: .78; }
.dmx-custom-topology-svg .infrastructure-link { stroke: #ff9f43; }
.dmx-topology-note { margin: 8px 2px 2px; padding-top: 13px; border-top: 1px solid #34373d; color: #aeb2b9; font-size: 10px; line-height: 1.6; }

.builder-stage { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px; }
.dali-system-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: var(--custom-type-card-height); gap: 12px; align-items: stretch; }
.dali-system-card { position: relative; width: 100%; height: var(--custom-type-card-height); min-height: var(--custom-type-card-height); max-height: var(--custom-type-card-height); padding: 13px; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: #fafafb; color: var(--ink); text-align: left; cursor: pointer; }
.dali-system-card:hover { border-color: #e89198; }
.dali-system-card.selected { border: 2px solid var(--teal); padding: 12px; background: #fff7f8; box-shadow: 0 7px 18px rgba(230,0,18,.07); }
.dali-system-card > div { padding-right: 24px; }
.dali-system-card strong, .dali-system-card em { display: block; }
.dali-system-card strong { font-size: 14px; }
.dali-system-card em { margin-top: 4px; color: var(--teal); font-size: 10px; font-style: normal; font-weight: 700; }
.dali-system-card p { height: 32px; min-height: 32px; margin: 7px 0 6px; overflow: hidden; color: var(--muted); font-size: 10px; line-height: 16px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.dali-system-card small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #45494f; font-size: 9px; font-weight: 700; }
.system-check { position: absolute; right: 12px; top: 12px; width: 21px; height: 21px; display: grid; place-items: center; border-radius: 50%; color: #fff; }
.dali-system-card.selected .system-check { background: var(--teal); }
.third-party-note { margin-top: 14px; border: 1px dashed #dfb4b8; border-radius: 9px; padding: 10px 12px; background: #fff7f8; color: #8c5d61; font-size: 10px; }
.stage-title { display: flex; gap: 13px; align-items: flex-start; margin-bottom: 18px; }
.stage-title > span { flex: 0 0 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; background: var(--teal); color: #fff; font-weight: 800; }
.stage-title > span + div { flex: 1; min-width: 0; }
.stage-title h3, .stage-title p { margin: 0; }
.stage-title h3 { font-size: 17px; }
.stage-title p { color: var(--muted); font-size: 12px; margin-top: 4px; }
.clear-custom-configuration { flex: 0 0 auto; align-self: center; display: inline-flex; align-items: center; gap: 7px; margin-left: auto; border: 1px solid #e5a8ad; border-radius: 9px; padding: 8px 12px; background: #fff7f8; color: #b4232d; font-size: 11px; font-weight: 750; cursor: pointer; white-space: nowrap; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.clear-custom-configuration span { display: grid; width: 17px; height: 17px; place-items: center; border-radius: 50%; background: #f4d6d9; font-size: 14px; line-height: 1; }
.clear-custom-configuration:hover { border-color: var(--teal); background: #fff0f2; transform: translateY(-1px); }
.clear-custom-configuration:focus-visible { outline: 2px solid rgba(230, 0, 18, .24); outline-offset: 2px; }
.device-type-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: var(--custom-type-card-height); gap: 11px; align-items: stretch; }
.device-type-card { position: relative; width: 100%; height: var(--custom-type-card-height); min-height: var(--custom-type-card-height); max-height: var(--custom-type-card-height); overflow: hidden; border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: #fafafb; color: var(--ink); text-align: left; cursor: pointer; }
.device-type-card:hover { border-color: #e89198; }
.device-type-card.selected { border: 2px solid var(--teal); padding: 13px; background: #fff7f8; }
.device-type-card.disabled { opacity: .45; cursor: not-allowed; background: #f1f1f2; border-color: var(--line); }
.device-type-card.disabled:hover { border-color: var(--line); }
.device-type-card.required { cursor: not-allowed; border-color: var(--teal); background: #fff7f8; opacity: .8; }
.device-type-card strong, .device-type-card small, .device-type-card em { display: block; padding-right: 26px; }
.device-type-card strong { height: 36px; overflow: hidden; font-size: 13px; line-height: 18px; margin-bottom: 5px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.device-type-card small { height: 35px; min-height: 35px; overflow: hidden; color: var(--muted); line-height: 1.45; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.device-type-card em { margin-top: 8px; color: var(--teal); font-size: 10px; font-style: normal; font-weight: 700; }
.type-check { position: absolute; right: 11px; top: 11px; width: 21px; height: 21px; display: grid; place-items: center; border: 1px solid #c8c9cc; border-radius: 50%; color: #8d9096; }
.device-type-card.selected .type-check { background: var(--teal); border-color: var(--teal); color: #fff; }
.configuration-workspace { display: grid; grid-template-columns: 230px minmax(0, 1fr); border: 1px solid var(--line); border-radius: 13px; overflow: hidden; min-height: 430px; }
.selected-type-nav { padding: 10px; background: #f3f3f4; border-right: 1px solid var(--line); }
.type-nav-button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 8px; border: 0; border-radius: 9px; padding: 12px; margin-bottom: 5px; color: #555a61; background: transparent; cursor: pointer; text-align: left; }
.type-nav-button b { min-width: 22px; height: 22px; display: grid; place-items: center; background: #dddfe2; border-radius: 11px; font-size: 10px; }
.type-nav-button.active { background: #fff; color: var(--teal); box-shadow: 0 4px 13px rgba(0,0,0,.07); font-weight: 700; }
.type-nav-button.active b { background: var(--teal); color: #fff; }
.model-browser { padding: 20px; min-width: 0; }
.model-browser-head { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; margin-bottom: 15px; }
.model-browser-head h3, .model-browser-head p { margin: 0; }
.model-browser-head p { color: var(--muted); font-size: 12px; margin-top: 4px; }
.model-browser-head > span { color: var(--teal); background: #fff0f1; border-radius: 10px; padding: 6px 11px; font-size: 11px; font-weight: 700; }
.gateway-group-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 0 0 15px; }
.gateway-group-tabs button { position: relative; height: var(--custom-type-card-height); min-height: var(--custom-type-card-height); max-height: var(--custom-type-card-height); overflow: hidden; border: 1px solid var(--line); border-radius: 11px; padding: 12px; background: #f8f8f9; color: var(--ink); text-align: left; cursor: pointer; }
.gateway-group-tabs button:hover { border-color: #e89198; }
.gateway-group-tabs button.active { border: 2px solid var(--teal); padding: 11px; background: #fff7f8; box-shadow: 0 5px 14px rgba(230,0,18,.06); }
.gateway-group-tabs strong, .gateway-group-tabs small, .gateway-group-tabs em { display: block; }
.gateway-group-tabs strong { padding-right: 54px; font-size: 11px; line-height: 1.35; }
.gateway-group-tabs small { height: 52px; margin-top: 6px; overflow: hidden; color: var(--muted); font-size: 9px; line-height: 13px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.gateway-group-tabs em { position: absolute; right: 9px; top: 9px; border-radius: 9px; padding: 4px 6px; background: #e8e9eb; color: #6c7076; font-size: 8px; font-style: normal; }
.gateway-group-tabs button.active em { background: var(--teal); color: #fff; }
.model-filter { display: flex; align-items: center; gap: 10px; margin: 0 0 15px; }
.model-filter input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 9px; padding: 10px 13px; outline: none; font: inherit; }
.model-filter input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(230,0,18,.08); }
.model-filter span { min-width: 62px; color: var(--muted); font-size: 11px; text-align: right; }
.model-filter-empty { grid-column: 1 / -1; padding: 42px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); text-align: center; }
.model-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: var(--custom-product-card-height); gap: 11px; align-items: stretch; }
.model-card { position: relative; width: 100%; height: var(--custom-product-card-height); min-width: 0; border: 1px solid var(--line); border-radius: 13px; background: #fff; overflow: hidden; display: flex; flex-direction: column; padding-bottom: var(--custom-product-footer-height); }
.model-card.selected { border: 2px solid var(--teal); box-shadow: 0 7px 18px rgba(230,0,18,.08); }
.model-select { width: 100%; height: calc(var(--custom-product-card-height) - var(--custom-product-footer-height)); min-height: calc(var(--custom-product-card-height) - var(--custom-product-footer-height)); flex: 0 0 calc(var(--custom-product-card-height) - var(--custom-product-footer-height)); border: 0; padding: 0; background: #fff; color: var(--ink); text-align: left; cursor: pointer; overflow: hidden; }
.model-check { position: absolute; z-index: 2; right: 10px; top: 10px; width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; border: 1px solid #c9cbd0; background: rgba(255,255,255,.94); color: transparent; }
.model-card.selected .model-check { color: #fff; background: var(--teal); border-color: var(--teal); }
.model-image { width: 100%; height: var(--custom-product-image-height); min-height: var(--custom-product-image-height); background: #f6f6f7; display: grid; place-items: center; overflow: hidden; }
.model-image img { width: 100%; height: 100%; max-width: 225px; max-height: 180px; object-fit: contain; padding: 6px; box-sizing: border-box; }
.model-image.specialty-image-crop-corridor-sensor img { max-width: none; max-height: none; object-fit: none; object-position: 35% 62%; padding: 0; }
.model-image.specialty-image-crop-sensor-remote { position: relative; }
.model-image.specialty-image-crop-sensor-remote img { position: absolute; left: 50%; top: 50%; width: 512px; height: 288px; max-width: none; max-height: none; object-fit: fill; padding: 0; transform: translate(-75px, -161px); }
.model-copy { height: calc(var(--custom-product-card-height) - var(--custom-product-footer-height) - var(--custom-product-image-height)); padding: 9px 12px; overflow: hidden; }
.model-copy strong, .model-copy code, .model-copy b { display: block; }
.model-copy strong { height: 32px; font-size: 12px; line-height: 16px; padding-right: 22px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.model-copy code { height: 19px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--teal); font-size: 13px; line-height: 19px; margin: 4px 0 5px; }
.gateway-capability-tags { display: flex; flex-wrap: wrap; gap: 3px; margin: -1px 0 7px; }
.gateway-capability-tags span { border: 1px solid #f0c8cb; border-radius: 8px; padding: 2px 5px; background: #fff5f6; color: #a11923; font-size: 8px; font-weight: 700; line-height: 1.25; }
.stage-protocol-tabs { display: flex; align-self: flex-start; gap: 7px; margin-left: auto; }
.stage-protocol-tabs button { border: 1px solid #e2c4c7; border-radius: 999px; padding: 7px 12px; background: #fff; color: var(--muted); font-size: 11px; font-weight: 700; cursor: pointer; }
.stage-protocol-tabs button.active { border-color: var(--teal); background: #fff2f3; color: var(--teal); }
.device-protocol-badge { position: absolute; top: 10px; right: 42px; border-radius: 8px; padding: 3px 6px; background: #e8f5f3; color: #126f69; font-size: 8px; font-weight: 800; }
.device-protocol-badge.dali { background: #fff4dc; color: #8b6418; }
.type-nav-group-label { margin: 9px 8px 5px; border-top: 1px solid var(--line); padding: 10px 5px 0; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.type-nav-group-label:first-child { margin-top: 0; border-top: 0; padding-top: 2px; }
.type-nav-group-label.zigbee { color: #126f69; }
.type-nav-group-label.dali { color: #8b6418; }
.hospital-topology-note { margin: 12px 4px 0; color: var(--muted); font-size: 10px; line-height: 1.65; }
.model-copy b { height: 30px; overflow: hidden; font-size: 11px; line-height: 15px; margin-bottom: 3px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.model-copy ul { height: 43px; margin: 0; padding-left: 0; overflow: hidden; color: var(--muted); font-size: var(--custom-feature-font-size); line-height: 1.4; list-style: none; }
.model-copy li { position: relative; display: block; padding-left: 13px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.model-copy li::before { content: "\2022"; position: absolute; left: 1px; top: 0; color: currentColor; font-size: 11px; font-weight: 800; line-height: inherit; }
.model-copy li:nth-child(n+4), .model-card.standardized-type .model-copy li:nth-child(n+4) { display: none; }
.model-resource-actions { position: absolute; z-index: 4; left: 8px; top: 8px; display: flex; gap: 5px; }
.model-resource-actions button { border: 1px solid rgba(0,0,0,.1); border-radius: 6px; padding: 5px 7px; background: rgba(255,255,255,.94); color: #555a61; font-size: 9px; cursor: pointer; box-shadow: 0 2px 7px rgba(0,0,0,.08); }
.model-resource-actions button:hover { color: var(--teal); border-color: var(--teal); }
.model-resource-actions button:disabled { opacity: .38; cursor: not-allowed; }
.product-actions { gap: 6px; flex-wrap: wrap; }
.product-actions .add { margin-left: auto; }
.model-quantity { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: var(--custom-product-footer-height); display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 8px 13px; border-top: 1px solid #f0d6d8; background: #fff7f8; color: var(--muted); font-size: 11px; }
.model-card:not(:has(.model-quantity))::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--custom-product-footer-height); border-top: 1px solid #edf1f2; background: #fafbfb; }
.model-quantity input { width: 64px; border: 1px solid #e4c3c6; border-radius: 7px; padding: 6px; }

@media (max-width: 1200px) {
  .scenario-card { min-height: 285px; }
  .project-scene-card { height: 330px; min-height: 330px; }
  .scenario-media { height: 175px; }
  .custom-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .device-type-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dali-system-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .configuration-workspace { grid-template-columns: 200px minmax(0, 1fr); }
  .model-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .protocol-tabs button { min-width: 76px; padding-inline: 9px; }
}
.home-recommended-params{display:block;margin:9px 0 4px;color:#435862;font-size:11px;line-height:1.5}
.zigbee-home-topology-svg .zigbee-network-pill{fill:#126f69;stroke:#56d8c7;stroke-width:1.5}.zigbee-home-topology-svg .network-pill-title{fill:#fff}.zigbee-home-topology-svg .network-pill-subtitle{fill:#d9fffa}.zigbee-home-topology-svg .lan-cloud-label{fill:#fff;paint-order:stroke;stroke:#17191f;stroke-width:2px}.zigbee-home-topology-svg .rt-line.wireless-control-link{stroke:#20a895;stroke-dasharray:7 5}.zigbee-home-topology-svg .level-gateway rect{stroke-width:2.5;filter:drop-shadow(0 8px 12px rgba(0,168,153,.12))}
.custom-gateway-topology-svg .gateway-capability-summary{fill:#ffe1bb;font-size:11px}.custom-gateway-topology-svg .gateway-network-node.matter rect{fill:#203e4b;stroke:#63cbe8}.custom-gateway-topology-svg .gateway-network-node.dali rect{fill:#3b3221;stroke:#e2b85d}
.rf-mesh-home-topology-svg .topology-unavailable-node rect { fill: #25272b; stroke: #686c73; stroke-dasharray: 7 5; }
.rf-mesh-home-topology-svg .topology-unavailable-node .rt-title { fill: #b3b6bc; }
.rf-mesh-home-topology-svg .topology-unavailable-node .rt-subtitle { fill: #ffb968; }
.rf-mesh-home-topology-svg .local-control-link { stroke: #2dd4bf; stroke-width: 2.5; stroke-dasharray: 8 5; }
.rf-mesh-home-topology-svg .local-control-label { fill: #59dfd1; }
.rf-mesh-home-topology-svg .app-config-link { stroke: #f59e0b; stroke-width: 2.5; stroke-dasharray: 5 4; fill: none; }
.rf-mesh-home-topology-svg .app-config-label { fill: #fbbf24; paint-order: stroke; stroke: #17191f; stroke-width: 3px; }
.rf-mesh-home-topology-svg .app-configured-device rect { stroke: #f59e0b; stroke-width: 2; }
.rf-mesh-home-topology-svg .app-config-badge { fill: #fbbf24; font-size: 9px; font-weight: 700; }
.rf-mesh-home-topology-svg .configured-remote-control-link { stroke: #f59e0b; stroke-width: 2.5; stroke-dasharray: 7 4; fill: none; }
.rf-mesh-home-topology-svg .direct-remote-control-link { stroke: #34d399; stroke-width: 2.5; fill: none; }
.rf-mesh-home-topology-svg .direct-control-device rect { stroke: #34d399; stroke-width: 2; }
.rf-mesh-home-topology-svg .direct-control-badge { fill: #6ee7b7; font-size: 9px; font-weight: 700; }
.rf-mesh-home-topology-svg .input-group-title { fill: #7dd3fc; }
.rf-mesh-home-topology-svg .receiver-group-title { fill: #d8b4fe; }
.rf-mesh-home-topology-svg .custom-device-group-subtitle { fill: #aeb3bc; font-size: 10px; }
.rf-mesh-home-topology-svg .custom-group-empty { fill: #858b95; }
.rf-mesh-home-topology-svg .custom-input-link { stroke: #38bdf8; stroke-width: 2.5; stroke-dasharray: 7 5; fill: none; }
.rf-mesh-home-topology-svg .custom-receiver-link { stroke: #c084fc; }
.rf-mesh-home-topology-svg .rf-mesh-network-node rect { fill: #173b39; stroke: #2dd4bf; stroke-width: 2; }
.rf-mesh-home-topology-svg .rf-mesh-dali-network rect { fill: #3b3221; stroke: #e2b85d; stroke-width: 2; }
.rf-mesh-home-topology-svg .rf-mesh-gateway-node .gateway-capability-summary { fill: #ffe1bb; font-size: 10px; }
.rf-mesh-home-topology-svg .dali-capability-node rect { fill: #2f3024; stroke: #d2ad54; }
.rf-mesh-recommended-topology-svg .rf-mesh-integrated-node rect { fill: #173b39; stroke: #2dd4bf; stroke-width: 2.5; filter: drop-shadow(0 10px 16px rgba(45, 212, 191, .14)); }
.rf-mesh-recommended-topology-svg .integrated-network-caption { fill: #8cf4e8; font-size: 10px; font-weight: 700; letter-spacing: 1.6px; }
.rf-mesh-recommended-topology-svg .rf-mesh-recommended-control-node rect { fill: #302719; stroke: #f59e0b; stroke-width: 2.2; }
.rf-mesh-recommended-topology-svg .rf-mesh-recommended-sensor-node rect { fill: #202d3a; stroke: #60a5fa; stroke-width: 2.2; }
.rf-mesh-recommended-topology-svg .rf-mesh-recommended-receiver-node rect { fill: #1f3130; stroke: #34d399; stroke-width: 1.8; }
.rf-mesh-recommended-topology-svg .recommended-node-role { fill: #fff; font-size: 10px; font-weight: 700; letter-spacing: .8px; }
.rf-mesh-recommended-topology-svg .rf-mesh-recommended-control-node .recommended-node-role,
.rf-mesh-recommended-topology-svg .rf-mesh-recommended-control-node .recommended-source-detail { fill: #fbbf24; }
.rf-mesh-recommended-topology-svg .rf-mesh-recommended-sensor-node .recommended-node-role,
.rf-mesh-recommended-topology-svg .rf-mesh-recommended-sensor-node .recommended-source-detail { fill: #93c5fd; }
.rf-mesh-recommended-topology-svg .recommended-source-detail { font-size: 9px; font-weight: 700; }
.rf-mesh-recommended-topology-svg .sensor-config-link { stroke: #60a5fa; stroke-width: 2.5; stroke-dasharray: 5 4; fill: none; }
.rf-mesh-recommended-topology-svg .sensor-trigger-link { stroke: #60a5fa; stroke-width: 2.5; fill: none; }
.rf-mesh-recommended-topology-svg .app-receiver-link { stroke: #2dd4bf; stroke-dasharray: 7 5; }
.rf-mesh-recommended-topology-svg .receiver-control-bus { stroke: #34d399; stroke-width: 2.5; }
.rf-mesh-recommended-topology-svg .receiver-bus-label { fill: #a7f3d0; paint-order: stroke; stroke: #17191f; stroke-width: 4px; }
.rf-mesh-recommended-topology-svg .receiver-branch-link { stroke: #34d399; stroke-dasharray: none; }

@media (max-width: 980px) {
  .gateway-group-tabs { grid-template-columns: 1fr; }
  .gateway-group-tabs button { height: var(--custom-type-card-height); min-height: var(--custom-type-card-height); max-height: var(--custom-type-card-height); }
}

/* Specialty application solutions translated from the 9-page source deck */
.specialty-scene-card { min-height: 330px; border-top: 3px solid var(--specialty-accent); }
.specialty-scene-card .scenario-media { height: 168px; background: #172027; }
.specialty-scene-card .scenario-media::after { display: none; }
.specialty-cover-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.specialty-scene-card:hover .specialty-cover-media img { transform: scale(1.035); }
.specialty-cover-shade { position: absolute; inset: auto 0 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 30px 14px 12px; background: linear-gradient(transparent, rgba(12,19,24,.8)); color: #fff; z-index: 2; }
.specialty-cover-shade span { font-size: 10px; font-weight: 850; letter-spacing: .04em; }
.specialty-cover-shade strong { color: rgba(255,255,255,.78); font-size: 8px; font-weight: 700; }
.specialty-cover-media .badge { z-index: 3; }
.specialty-scene-card .scenario-copy { padding-top: 14px; }
.specialty-scene-card .scenario-copy h3 { min-height: 43px; max-height: 43px; margin-top: 8px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.35; }
.specialty-scene-card .scenario-copy > p { min-height: 57px; max-height: 57px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.specialty-card-protocols { display: flex; gap: 5px; min-height: 18px; overflow: hidden; }
.specialty-card-protocols span { border: 1px solid color-mix(in srgb, var(--specialty-accent) 25%, #e9edf0); border-radius: 999px; padding: 3px 7px; background: color-mix(in srgb, var(--specialty-accent) 7%, #fff); color: color-mix(in srgb, var(--specialty-accent) 80%, #1d2a31); font-size: 8px; font-weight: 800; white-space: nowrap; }

.specialty-native-visual { width: 100%; border: 1px solid color-mix(in srgb, var(--specialty-accent) 22%, #dfe5e8); border-radius: 16px; padding: 18px; background: rgba(255,255,255,.86); }
.specialty-native-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.specialty-native-head span { color: var(--specialty-accent); font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.specialty-native-head strong { color: #718089; font-size: 9px; font-weight: 700; }
.specialty-native-flow { display: grid; grid-template-columns: minmax(0,1fr) 18px minmax(0,1fr) 18px minmax(0,1fr); align-items: stretch; gap: 7px; }
.specialty-native-flow > b { align-self: center; color: var(--specialty-accent); font-size: 16px; text-align: center; }
.specialty-flow-node { display: flex; flex-direction: column; justify-content: center; min-height: 86px; border: 1px solid #e5eaed; border-radius: 11px; padding: 12px; background: #fff; box-shadow: 0 8px 20px rgba(23,34,40,.04); }
.specialty-flow-node i { display: grid; place-items: center; width: 21px; height: 21px; margin-bottom: 8px; border-radius: 50%; background: var(--specialty-accent); color: #fff; font-size: 9px; font-style: normal; font-weight: 800; }
.specialty-flow-node span { color: #2d3d45; font-size: 11px; font-weight: 750; line-height: 1.45; }
.specialty-native-visual.compact { border: 0; border-radius: 0; padding: 13px 15px; background: transparent; }
.specialty-native-visual.compact .specialty-native-head { margin-bottom: 10px; }
.specialty-native-visual.compact .specialty-native-head span { font-size: 9px; }
.specialty-native-visual.compact .specialty-native-head strong { font-size: 8px; }
.specialty-native-visual.compact .specialty-native-flow { grid-template-columns: minmax(0,1fr) 12px minmax(0,1fr) 12px minmax(0,1fr); gap: 3px; }
.specialty-native-visual.compact .specialty-native-flow > b { font-size: 12px; }
.specialty-native-visual.compact .specialty-flow-node { min-height: 70px; border-color: rgba(255,255,255,.85); padding: 8px; background: rgba(255,255,255,.82); }
.specialty-native-visual.compact .specialty-flow-node i { width: 16px; height: 16px; margin-bottom: 5px; font-size: 7px; }
.specialty-native-visual.compact .specialty-flow-node span { font-size: 8px; line-height: 1.35; }

.corridor-topology-flow { display: grid; grid-template-columns: minmax(118px,.9fr) 64px minmax(160px,1.15fr) 54px minmax(112px,.8fr); grid-template-rows: repeat(2, minmax(92px,auto)); gap: 10px 8px; align-items: stretch; }
.corridor-topology-node { display: flex; min-width: 0; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; border: 1px solid #e1e7ea; border-radius: 12px; padding: 9px; background: #fff; box-shadow: 0 8px 20px rgba(23,34,40,.05); text-align: center; }
.corridor-topology-node.remote { grid-column: 1; grid-row: 1; }
.corridor-topology-node.sensor { grid-column: 1; grid-row: 2; }
.corridor-topology-node.driver { grid-column: 3; grid-row: 1 / span 2; }
.corridor-topology-node.load { grid-column: 5; grid-row: 1 / span 2; }
.corridor-topology-node > img { display: block; width: 100%; height: 72px; margin-bottom: 7px; object-fit: contain; }
.corridor-topology-node.driver > img { height: 88px; }
.corridor-topology-node strong { max-width: 100%; color: #23343c; font-size: 9px; line-height: 1.35; overflow-wrap: anywhere; }
.corridor-topology-node span { margin-top: 3px; color: #718089; font-size: 8px; line-height: 1.35; }
.corridor-topology-link { position: relative; align-self: center; height: 38px; }
.corridor-topology-link.remote-link { grid-column: 2; grid-row: 1; }
.corridor-topology-link.sensor-link { grid-column: 2; grid-row: 2; }
.corridor-topology-link.output-link { grid-column: 4; grid-row: 1 / span 2; }
.corridor-topology-link::before { content: ''; position: absolute; left: 0; right: 0; top: 21px; border-top: 2px solid #bf6b63; }
.corridor-topology-link.remote-link::before { border-top-style: dashed; border-color: #4079c8; }
.corridor-topology-link.output-link::after { content: '›'; position: absolute; right: -1px; top: 8px; color: #bf6b63; font-size: 22px; line-height: 1; }
.corridor-topology-link span { position: absolute; left: 50%; top: 0; width: 86px; transform: translateX(-50%); color: #64757d; font-size: 7px; font-weight: 800; line-height: 1.2; text-align: center; }
.corridor-ppt-crop { width: 100%; height: 70px; margin-bottom: 7px; overflow: hidden; border-radius: 7px; background: #fff; }
.corridor-ppt-crop img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: none; padding: 0; }
.corridor-ppt-sensor img { object-position: 35% 62%; }
.corridor-ppt-load { height: 92px; }
.corridor-ppt-load img { object-position: 92% 74%; }
.corridor-topology-note { margin: 12px 0 0; color: #60717a; font-size: 9px; font-weight: 700; text-align: center; }

.dali-nfc-topology-flow { display: grid; grid-template-columns: minmax(112px,.9fr) 42px minmax(210px,1.65fr) 38px minmax(82px,.7fr); gap: 8px; align-items: stretch; }
.dali-nfc-topology-node { display: flex; min-width: 0; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; border: 1px solid #e1e7ea; border-radius: 12px; padding: 9px; background: #fff; box-shadow: 0 8px 20px rgba(23,34,40,.05); text-align: center; }
.dali-nfc-topology-node strong { max-width: 100%; color: #26363e; font-size: 9px; line-height: 1.35; overflow-wrap: anywhere; }
.dali-nfc-topology-node > span { margin-top: 4px; color: #718089; font-size: 7px; line-height: 1.35; }
.dali-nfc-sensor-crop { width: 100px; height: 76px; margin-bottom: 7px; overflow: hidden; border-radius: 8px; background: #fff; }
.dali-nfc-sensor-crop img { display: block; width: 550px; max-width: none; height: auto; transform: translate(-42px,-128px); }
.dali-nfc-topology-node.driver { border-color: #a7c4ed; background: linear-gradient(180deg, #f3f7ff, #fff 52%); }
.dali-nfc-topology-node.driver > img { display: block; width: 100%; height: 69px; margin: 7px 0 5px; object-fit: contain; }
.dali-nfc-corridor-badge { border: 1px solid #7ea8e7; border-radius: 999px; padding: 5px 8px; background: #e7f0ff; color: #245ea9; font-size: 7px; font-weight: 900; line-height: 1.2; }
.dali-nfc-setting-list { display: grid; width: 100%; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 3px; margin-top: 7px; }
.dali-nfc-setting-list span { border-radius: 5px; padding: 4px 2px; background: #edf3fb; color: #486884; font-size: 6px; font-weight: 850; line-height: 1.2; }
.dali-nfc-topology-node.load i { display: block; width: 55px; height: 55px; margin-bottom: 12px; border: 8px solid #e9edf0; border-radius: 50%; background: radial-gradient(circle, #fff 15%, #fff1af 54%, #f1c451 100%); box-shadow: 0 0 28px rgba(244,197,80,.52); }
.dali-nfc-topology-link { position: relative; align-self: center; height: 54px; }
.dali-nfc-topology-link::before { content: ''; position: absolute; left: 0; right: 0; top: 29px; border-top: 2px solid #cd796f; }
.dali-nfc-topology-link::after { content: '›'; position: absolute; right: -1px; top: 16px; color: #cd796f; font-size: 22px; line-height: 1; }
.dali-nfc-topology-link.output-link::before { border-color: #c8a23b; }
.dali-nfc-topology-link.output-link::after { color: #c8a23b; }
.dali-nfc-topology-link span { position: absolute; left: 50%; top: 0; width: 84px; transform: translateX(-50%); color: #64757d; font-size: 7px; font-weight: 850; line-height: 1.2; text-align: center; }
.dali-nfc-topology-note { margin: 12px 0 0; color: #526b7b; font-size: 8px; font-weight: 750; line-height: 1.45; text-align: center; }

.dali-ir-topology-flow { display: grid; grid-template-columns: minmax(82px,.72fr) 38px minmax(116px,.95fr) 32px minmax(190px,1.55fr); gap: 8px; align-items: stretch; }
.dali-ir-topology-node, .dali-ir-group-stack { min-width: 0; border: 1px solid #e1e7ea; border-radius: 12px; background: #fff; box-shadow: 0 8px 20px rgba(23,34,40,.05); }
.dali-ir-topology-node { display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; padding: 9px; text-align: center; }
.dali-ir-topology-node strong, .dali-ir-group-node strong { max-width: 100%; color: #26363e; font-size: 8px; line-height: 1.35; overflow-wrap: anywhere; }
.dali-ir-topology-node > span { margin-top: 4px; color: #718089; font-size: 7px; line-height: 1.35; }
.dali-ir-remote-crop { width: 82px; height: 96px; margin-bottom: 6px; overflow: hidden; border-radius: 8px; background: #fff; }
.dali-ir-remote-crop img { display: block; width: 500px; max-width: none; height: auto; transform: translate(-26px,-105px); }
.dali-ir-topology-node.sensor { border-color: #efbd91; background: linear-gradient(180deg, #fff7ed, #fff 55%); }
.dali-ir-topology-node.sensor > b { border: 1px solid #edaf76; border-radius: 999px; padding: 5px 8px; background: #fff0df; color: #b85a1e; font-size: 7px; font-weight: 900; line-height: 1.2; }
.dali-ir-topology-node.sensor > img { display: block; width: 100%; height: 78px; margin: 6px 0 4px; object-fit: contain; }
.dali-ir-group-stack { display: grid; grid-template-rows: repeat(2,minmax(0,1fr)); gap: 6px; padding: 8px; background: #f8fafb; }
.dali-ir-group-node { display: grid; min-width: 0; grid-template-columns: 64px minmax(0,1fr) 18px; grid-template-rows: auto 1fr; gap: 3px 7px; align-items: center; border: 1px solid #e1e8ec; border-radius: 9px; padding: 6px; background: #fff; }
.dali-ir-group-node > span { grid-column: 1 / -1; color: #2d72a8; font-size: 7px; font-weight: 900; }
.dali-ir-group-node > img { display: block; width: 64px; height: 38px; object-fit: contain; }
.dali-ir-group-node > div { min-width: 0; }
.dali-ir-group-node small { display: block; margin-top: 2px; color: #718089; font-size: 6px; line-height: 1.3; }
.dali-ir-group-node > i { display: block; width: 16px; height: 16px; border: 3px solid #e9edf0; border-radius: 50%; background: #ffe88e; box-shadow: 0 0 10px rgba(244,197,80,.58); }
.dali-ir-topology-link { position: relative; align-self: center; height: 54px; }
.dali-ir-topology-link::before { content: ''; position: absolute; left: 0; right: 0; top: 29px; border-top: 2px solid #d7933f; }
.dali-ir-topology-link::after { content: '›'; position: absolute; right: -1px; top: 16px; color: #d7933f; font-size: 22px; line-height: 1; }
.dali-ir-topology-link.ir-link::before { border-top-style: dashed; border-color: #c45a4e; }
.dali-ir-topology-link.ir-link::after { content: '↔'; right: 5px; top: 17px; color: #c45a4e; font-size: 16px; font-weight: 900; }
.dali-ir-topology-link span { position: absolute; left: 50%; top: 0; width: 78px; transform: translateX(-50%); color: #64757d; font-size: 7px; font-weight: 850; line-height: 1.2; text-align: center; }
.dali-ir-topology-note { margin: 12px 0 0; color: #526b7b; font-size: 8px; font-weight: 750; line-height: 1.45; text-align: center; }

.wireless-dali-topology { --wireless-accent: #7257b1; --wireless-soft: #f0ecfa; --wireless-sensor-bg: #faf9fd; --wireless-sensor-border: #ece8f5; }
.silvair-dali-topology { --wireless-accent: #2e74a8; --wireless-soft: #eaf4fb; --wireless-sensor-bg: #f5fafd; --wireless-sensor-border: #dcecf5; }
.floor-lamp-dual-topology { --wireless-accent: #7257b1; --wireless-soft: #f0ecfa; }

.zigbee-dali-bridge-topology { --bridge-zigbee: #e98925; --bridge-zigbee-soft: #fff6e9; --bridge-dali: #2984aa; --bridge-dali-soft: #eef8fc; }
.bridge-platform-layer { border: 1px solid #ddd9ef; border-radius: 11px; padding: 9px 10px; background: linear-gradient(135deg,#faf8ff,#f3f8ff); text-align: center; }
.bridge-platform-layer small { display: block; margin-bottom: 7px; color: #596975; font-size: 8px; font-weight: 800; }
.bridge-platform-layer > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.bridge-platform-layer > div span { border: 1px solid #d7d2ea; border-radius: 999px; padding: 3px 7px; background: #fff; color: #344653; font-size: 7px; font-weight: 850; white-space: nowrap; }
.bridge-platform-layer b { display: block; margin-top: 7px; color: #64519a; font-size: 7px; }
.bridge-gateway-flow { display: grid; grid-template-columns: minmax(0,1fr) 24px minmax(0,1fr); align-items: center; gap: 6px; margin: 9px 0; }
.bridge-gateway-flow > i { color: #826cae; font-size: 18px; font-style: normal; font-weight: 900; text-align: center; }
.bridge-gateway-node { min-width: 0; min-height: 54px; border: 1px solid #dfdce8; border-radius: 10px; padding: 6px 8px; background: #fff; display: flex; align-items: center; gap: 8px; }
.bridge-gateway-node img { width: 40px; height: 40px; object-fit: contain; flex: 0 0 40px; }
.bridge-gateway-node div { min-width: 0; }
.bridge-gateway-node strong,.bridge-gateway-node span { display: block; }
.bridge-gateway-node strong { color: #263945; font-size: 8px; line-height: 1.25; overflow-wrap: anywhere; }
.bridge-gateway-node span { margin-top: 3px; color: #6e7d85; font-size: 7px; line-height: 1.3; }
.bridge-device-layers { display: grid; grid-template-columns: minmax(0,1fr) 44px minmax(0,1fr); align-items: stretch; gap: 7px; }
.bridge-device-branch { border: 1px solid; border-radius: 11px; padding: 7px; display: grid; gap: 5px; }
.bridge-device-branch.zigbee { border-color: #f1d2ad; background: var(--bridge-zigbee-soft); }
.bridge-device-branch.dali { border-color: #bfdae6; background: var(--bridge-dali-soft); }
.bridge-device-branch header { padding: 0 2px 3px; }
.bridge-device-branch header strong,.bridge-device-branch header span { display: block; }
.bridge-device-branch header strong { font-size: 8px; }
.bridge-device-branch.zigbee header strong { color: #ae5a08; }
.bridge-device-branch.dali header strong { color: #176a8d; }
.bridge-device-branch header span { margin-top: 2px; color: #6d7a82; font-size: 6px; }
.bridge-product-node { min-width: 0; min-height: 39px; border: 1px solid rgba(50,70,80,.12); border-radius: 8px; padding: 4px 5px; background: rgba(255,255,255,.94); display: flex; align-items: center; gap: 6px; }
.bridge-product-node img { width: 30px; height: 30px; flex: 0 0 30px; object-fit: contain; }
.bridge-product-node div { min-width: 0; }
.bridge-product-node strong,.bridge-product-node span { display: block; }
.bridge-product-node strong { color: #2b3d47; font-size: 6.5px; line-height: 1.2; overflow-wrap: anywhere; }
.bridge-product-node span { margin-top: 2px; color: #718088; font-size: 6px; line-height: 1.25; }
.bridge-bidirectional-link { display: grid; place-content: center; gap: 5px; text-align: center; }
.bridge-bidirectional-link strong { color: #6d5a9c; font-size: 21px; line-height: 1; }
.bridge-bidirectional-link span { color: #63737c; font-size: 6px; font-weight: 800; line-height: 1.3; }
.bridge-topology-note { margin: 9px 0 0; color: #586b76; font-size: 7px; font-weight: 700; line-height: 1.45; text-align: center; }
.matter-platform-layer { margin-bottom: 8px; }
.matter-dali-control-flow { display: grid; grid-template-columns: minmax(0,1.35fr) 24px minmax(0,1fr); align-items: stretch; gap: 6px; }
.matter-dali-control-flow > i { display: grid; place-items: center; color: #6f59a1; font-size: 18px; font-style: normal; font-weight: 900; }
.matter-dali-control-node { display: flex; min-width: 0; min-height: 58px; align-items: center; gap: 8px; border: 1px solid #dddde9; border-radius: 10px; padding: 6px 8px; background: #fff; }
.matter-dali-control-node img { width: 48px; height: 44px; flex: 0 0 48px; object-fit: contain; }
.matter-dali-control-node div { min-width: 0; }
.matter-dali-control-node strong,.matter-dali-control-node span { display: block; }
.matter-dali-control-node strong { color: #293c47; font-size: 7px; line-height: 1.25; overflow-wrap: anywhere; }
.matter-dali-control-node span { margin-top: 3px; color: #697a83; font-size: 6px; line-height: 1.3; }
.matter-dali-bus { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 8px 0; border-radius: 999px; padding: 5px 9px; background: #eaf5fa; color: #246d89; text-align: center; }
.matter-dali-bus span { font-size: 7px; font-weight: 900; letter-spacing: .05em; }
.matter-dali-bus b { font-size: 6px; }
.matter-dali-nfc-config { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; border: 1px solid #c9e4d9; border-radius: 10px; padding: 7px 9px; background: linear-gradient(90deg,#f0faf6,#f7fbff); }
.matter-dali-nfc-config div { min-width: 0; }
.matter-dali-nfc-config div b,.matter-dali-nfc-config div span { display: block; }
.matter-dali-nfc-config div b { color: #17755e; font-size: 8px; }
.matter-dali-nfc-config div span { margin-top: 2px; color: #667880; font-size: 6px; }
.matter-dali-nfc-config > strong { flex: 0 0 auto; border-radius: 999px; padding: 5px 8px; background: #167a62; color: #fff; font-size: 6px; letter-spacing: .03em; }
.matter-dali-nfc-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
.matter-dali-nfc-device { position: relative; display: grid; min-width: 0; min-height: 53px; grid-template-columns: 54px 1fr; align-items: center; gap: 7px; overflow: hidden; border: 1px solid #cfe0e5; border-radius: 9px; padding: 5px 7px; background: #fff; }
.matter-dali-nfc-device > b { position: absolute; right: 5px; top: 5px; border-radius: 999px; padding: 2px 5px; background: #dff5ed; color: #13745c; font-size: 5px; letter-spacing: .05em; }
.matter-dali-nfc-device img { width: 54px; height: 43px; object-fit: contain; }
.matter-dali-nfc-device div { min-width: 0; padding-right: 25px; }
.matter-dali-nfc-device strong,.matter-dali-nfc-device span { display: block; }
.matter-dali-nfc-device strong { color: #263a45; font-size: 6.5px; line-height: 1.25; overflow-wrap: anywhere; }
.matter-dali-nfc-device span { margin-top: 3px; color: #6b7b84; font-size: 6px; line-height: 1.25; }
.floor-lamp-dual-topology .floor-sensor-stack { grid-template-rows: auto 1fr; }
.floor-lamp-output-node { display: grid; min-width: 0; grid-template-columns: 46px 1fr; gap: 8px; align-items: center; border: 1px solid var(--wireless-sensor-border); border-radius: 9px; padding: 6px; background: var(--wireless-sensor-bg); }
.floor-lamp-output-node i { display: block; width: 36px; height: 36px; border: 6px solid #e9edf0; border-radius: 50%; background: radial-gradient(circle, #fff 12%, #fff1af 52%, #f1c451 100%); box-shadow: 0 0 18px rgba(244,197,80,.42); }
.floor-lamp-output-node.uplight i { box-shadow: 0 -8px 22px rgba(244,197,80,.58); }
.floor-lamp-output-node.downlight i { box-shadow: 0 8px 22px rgba(244,197,80,.58); }
.floor-lamp-output-node strong { display: block; color: #26363e; font-size: 8px; line-height: 1.35; }
.floor-lamp-output-node span { display: block; margin-top: 3px; color: #718089; font-size: 7px; }
.wireless-dali-flow { display: grid; grid-template-columns: minmax(82px,.8fr) 30px minmax(116px,1.25fr) 28px minmax(128px,1.4fr) 26px minmax(66px,.65fr); gap: 7px; align-items: stretch; }
.wireless-topology-node, .wireless-sensor-stack { min-width: 0; border: 1px solid #e2e7eb; border-radius: 12px; background: #fff; box-shadow: 0 8px 20px rgba(23,34,40,.05); }
.wireless-topology-node { display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; padding: 9px; text-align: center; }
.wireless-topology-node.controls > img { display: block; width: 58px; height: 62px; margin: 5px auto; object-fit: contain; }
.wireless-app-chip { border-radius: 999px; padding: 4px 8px; background: var(--wireless-soft); color: var(--wireless-accent) !important; font-size: 7px !important; font-weight: 900; letter-spacing: .04em; }
.wireless-topology-node strong, .wireless-sensor-node strong { max-width: 100%; color: #26363e; font-size: 8px; line-height: 1.35; overflow-wrap: anywhere; }
.wireless-topology-node > span:not(.wireless-app-chip), .wireless-sensor-node span { margin-top: 3px; color: #718089; font-size: 7px; line-height: 1.35; }
.wireless-sensor-stack { display: grid; grid-template-rows: auto 1fr 1fr; gap: 6px; padding: 8px; }
.wireless-sensor-stack > small { color: var(--wireless-accent); font-size: 7px; font-weight: 900; text-align: center; }
.wireless-sensor-node { display: grid; min-width: 0; grid-template-columns: 48px 1fr; gap: 7px; align-items: center; border: 1px solid var(--wireless-sensor-border); border-radius: 9px; padding: 6px; background: var(--wireless-sensor-bg); }
.wireless-sensor-node img { display: block; width: 48px; height: 47px; object-fit: contain; }
.wireless-sensor-node div { min-width: 0; }
.wireless-sensor-node span { display: block; }
.wireless-topology-node.driver > img { display: block; width: 100%; height: 66px; margin-bottom: 10px; object-fit: contain; }
.wireless-topology-node.luminaire i { display: block; width: 55px; height: 55px; margin-bottom: 12px; border: 8px solid #e9edf0; border-radius: 50%; background: radial-gradient(circle, #fff 15%, #fff1af 54%, #f1c451 100%); box-shadow: 0 0 28px rgba(244,197,80,.52); }
.wireless-topology-link { position: relative; align-self: center; height: 54px; }
.wireless-topology-link::before { content: ''; position: absolute; left: 0; right: 0; top: 29px; border-top: 2px solid #d7933f; }
.wireless-topology-link::after { content: '›'; position: absolute; right: -1px; top: 16px; color: #d7933f; font-size: 22px; line-height: 1; }
.wireless-topology-link.mesh-link::before { border-top-style: dashed; border-color: var(--wireless-accent); }
.wireless-topology-link.mesh-link::after { color: var(--wireless-accent); }
.wireless-topology-link.output-link::before { border-color: #c8a23b; }
.wireless-topology-link.output-link::after { color: #c8a23b; }
.wireless-topology-link span { position: absolute; left: 50%; top: 0; width: 76px; transform: translateX(-50%); color: #64757d; font-size: 7px; font-weight: 850; line-height: 1.2; text-align: center; }
.wireless-topology-note { margin: 12px 0 0; color: #60717a; font-size: 8px; font-weight: 700; line-height: 1.45; text-align: center; }

.specialty-solution-hero { display: grid; grid-template-columns: minmax(0,1fr); gap: 32px; align-items: center; overflow: hidden; margin-top: 2px; border-radius: 18px; padding: 36px; background: linear-gradient(135deg, #172027, #222f36 65%, color-mix(in srgb, var(--specialty-accent) 38%, #172027)); color: #fff; box-shadow: 0 18px 44px rgba(16,25,31,.18); }
.specialty-hero-copy h2 { max-width: 720px; margin: 8px 0 13px; font-size: 31px; line-height: 1.22; }
.specialty-hero-copy > p:not(.eyebrow) { max-width: 720px; margin: 0; color: #d8e0e3; font-size: 13px; line-height: 1.8; }
.specialty-hero-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 21px; }
.specialty-hero-meta span { border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: 7px 10px; background: rgba(255,255,255,.06); color: #eaf0f2; font-size: 9px; font-weight: 750; }
.specialty-solution-hero .specialty-native-visual { --specialty-accent: inherit; border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.95); }

.specialty-story { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; margin-top: 18px; }
.specialty-story-card { display: grid; grid-template-columns: 45px 1fr; gap: 16px; align-items: start; }
.specialty-story-card > span { color: var(--red); font-size: 27px; font-weight: 300; line-height: 1; }
.specialty-story-card h3, .specialty-benefits h3, .specialty-page-text h3 { margin: 4px 0 10px; }
.specialty-story-card div > p:last-child { margin: 0; color: #53666f; font-size: 13px; line-height: 1.8; }

.specialty-products-stage { margin-top: 18px; }
.specialty-products-stage .builder-heading { align-items: flex-start; gap: 24px; margin-bottom: 18px; }
.specialty-products-stage .builder-heading p:last-child { max-width: 720px; margin: 7px 0 0; color: var(--muted); font-size: 11px; line-height: 1.65; }
.specialty-products-stage .model-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.specialty-benefits .pain-list { margin-bottom: 0; }
.specialty-page-text p:last-child { margin: 0; color: #566a73; font-size: 12px; line-height: 1.85; overflow-wrap: anywhere; }

.specialty-topology-stage { margin-top: 22px; border: 1px solid color-mix(in srgb, var(--specialty-accent) 22%, #dfe5e8); border-radius: 18px; padding: 28px; background: linear-gradient(180deg, color-mix(in srgb, var(--specialty-accent) 4%, #fff), #f7f9fa); box-shadow: 0 12px 34px rgba(24,39,47,.08); }
.specialty-topology-stage-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; margin-bottom: 20px; }
.specialty-topology-stage-head h2 { margin: 4px 0 7px; font-size: 24px; }
.specialty-topology-stage-head p:last-child { margin: 0; color: #60717a; font-size: 12px; line-height: 1.65; }
.specialty-topology-stage .specialty-native-visual { border-color: color-mix(in srgb, var(--specialty-accent) 25%, #dce4e8); padding: 26px; background: #fff; }
.specialty-topology-stage .specialty-native-head { margin-bottom: 24px; }
.specialty-topology-stage .specialty-native-head span { font-size: 12px; }
.specialty-topology-stage .specialty-native-head strong { font-size: 11px; }
.specialty-topology-stage .specialty-flow-node { min-height: 112px; padding: 18px; }
.specialty-topology-stage .specialty-flow-node i { width: 27px; height: 27px; font-size: 11px; }
.specialty-topology-stage .specialty-flow-node span { font-size: 13px; }
.specialty-topology-stage .specialty-native-visual :is(.corridor-topology-node, .dali-nfc-topology-node, .dali-ir-topology-node, .dali-ir-group-node, .wireless-topology-node, .wireless-sensor-node, .bridge-gateway-node, .bridge-product-node, .matter-dali-control-node, .matter-dali-nfc-device, .floor-lamp-output-node) strong { font-size: 10px; }
.specialty-topology-stage .specialty-native-visual :is(.corridor-topology-node, .dali-nfc-topology-node, .dali-ir-topology-node, .dali-ir-group-node, .wireless-topology-node, .wireless-sensor-node, .bridge-gateway-node, .bridge-product-node, .matter-dali-control-node, .matter-dali-nfc-device, .floor-lamp-output-node) span,
.specialty-topology-stage .specialty-native-visual :is(.wireless-sensor-stack, .bridge-platform-layer, .bridge-device-branch) small { font-size: 9px; }
.specialty-topology-stage .specialty-native-visual :is(.corridor-topology-link, .dali-nfc-topology-link, .dali-ir-topology-link, .wireless-topology-link) span { font-size: 9px; }
.specialty-topology-stage .specialty-native-visual :is(.corridor-topology-note, .dali-nfc-topology-note, .dali-ir-topology-note, .wireless-topology-note, .bridge-topology-note) { font-size: 10px; line-height: 1.65; }
.specialty-topology-stage .bridge-platform-layer > div span { padding: 5px 9px; font-size: 9px; }
.specialty-topology-stage .bridge-platform-layer b,
.specialty-topology-stage .matter-dali-nfc-config > strong { font-size: 9px; }
.specialty-topology-stage .matter-dali-bus span { font-size: 10px; }
.specialty-topology-stage .matter-dali-bus b,
.specialty-topology-stage .matter-dali-nfc-config div span { font-size: 9px; }
.specialty-topology-stage .matter-dali-nfc-config div b { font-size: 10px; }
.specialty-topology-stage .matter-dali-nfc-device > b { font-size: 8px; }
.specialty-topology-stage .bridge-device-branch header strong { font-size: 11px; }
.specialty-topology-stage .bridge-device-branch header span,
.specialty-topology-stage .bridge-bidirectional-link span { font-size: 9px; }

@media (max-width: 1280px) {
  .specialty-solution-hero { grid-template-columns: 1fr; }
  .specialty-products-stage .model-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .specialty-solution-hero { padding: 24px; }
  .specialty-story { grid-template-columns: 1fr; }
  .specialty-products-stage .builder-heading { flex-direction: column; }
  .specialty-products-stage .model-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .specialty-native-flow { grid-template-columns: 1fr; }
  .specialty-native-flow > b { transform: rotate(90deg); }
  .specialty-topology-stage { padding: 20px; }
  .specialty-topology-stage .specialty-native-visual { padding: 20px; }
}

@media (max-width: 620px) {
  .corridor-topology-flow { grid-template-columns: 1fr; grid-template-rows: none; }
  .corridor-topology-node.remote, .corridor-topology-node.sensor, .corridor-topology-node.driver, .corridor-topology-node.load,
  .corridor-topology-link.remote-link, .corridor-topology-link.sensor-link, .corridor-topology-link.output-link { grid-column: 1; grid-row: auto; }
  .corridor-topology-link { justify-self: center; width: 2px; height: 32px; }
  .corridor-topology-link::before { left: 0; right: auto; top: 0; bottom: 0; border-top: 0; border-left: 2px solid #bf6b63; }
  .corridor-topology-link.remote-link::before { border-left-style: dashed; border-left-color: #4079c8; }
  .corridor-topology-link.output-link::after { right: -6px; top: 14px; transform: rotate(90deg); }
  .corridor-topology-link span { left: 12px; top: 8px; width: 110px; transform: none; text-align: left; }
  .dali-nfc-topology-flow { grid-template-columns: 1fr; }
  .dali-nfc-topology-link { justify-self: center; width: 2px; height: 34px; }
  .dali-nfc-topology-link::before { left: 0; right: auto; top: 0; bottom: 0; border-top: 0; border-left: 2px solid #cd796f; }
  .dali-nfc-topology-link.output-link::before { border-left-color: #c8a23b; }
  .dali-nfc-topology-link::after { right: -6px; top: 15px; transform: rotate(90deg); }
  .dali-nfc-topology-link span { left: 12px; top: 9px; width: 130px; transform: none; text-align: left; }
  .matter-dali-control-flow { grid-template-columns: 1fr; }
  .matter-dali-control-flow > i { transform: rotate(90deg); }
  .matter-dali-nfc-grid { grid-template-columns: 1fr; }
  .matter-dali-nfc-config { align-items: flex-start; flex-direction: column; }
  .dali-ir-topology-flow { grid-template-columns: 1fr; }
  .dali-ir-topology-link { justify-self: center; width: 2px; height: 34px; }
  .dali-ir-topology-link::before { left: 0; right: auto; top: 0; bottom: 0; border-top: 0; border-left: 2px solid #d7933f; }
  .dali-ir-topology-link.ir-link::before { border-left-style: dashed; border-left-color: #c45a4e; }
  .dali-ir-topology-link::after, .dali-ir-topology-link.ir-link::after { right: -7px; top: 14px; transform: rotate(90deg); }
  .dali-ir-topology-link span { left: 12px; top: 9px; width: 130px; transform: none; text-align: left; }
  .wireless-dali-flow { grid-template-columns: 1fr; }
  .wireless-topology-link { justify-self: center; width: 2px; height: 34px; }
  .wireless-topology-link::before { left: 0; right: auto; top: 0; bottom: 0; border-top: 0; border-left: 2px solid #d7933f; }
  .wireless-topology-link.mesh-link::before { border-left-style: dashed; border-left-color: var(--wireless-accent); }
  .wireless-topology-link.output-link::before { border-left-color: #c8a23b; }
  .wireless-topology-link::after { right: -6px; top: 15px; transform: rotate(90deg); }
  .wireless-topology-link span { left: 12px; top: 9px; width: 130px; transform: none; text-align: left; }
}

/* Mobile layout: desktop rules remain unchanged above this breakpoint. */
/* Official YouTube video library */
.video-channel-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  overflow: hidden;
  position: relative;
  min-height: 184px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
  padding: 32px 36px;
  background: linear-gradient(125deg, #12181d 0%, #1e2b31 58%, #471c1b 100%);
  box-shadow: 0 18px 42px rgba(16,45,59,.14);
  color: #fff;
}
.video-channel-hero::after {
  position: absolute;
  right: -70px;
  bottom: -110px;
  width: 260px;
  height: 260px;
  border: 44px solid rgba(228,48,42,.12);
  border-radius: 50%;
  content: '';
  pointer-events: none;
}
.youtube-mark {
  width: 72px;
  height: 52px;
  border-radius: 15px;
  background: #e4302a;
  box-shadow: 0 13px 28px rgba(228,48,42,.28);
  display: grid;
  place-items: center;
}
.youtube-mark::after {
  width: 0;
  height: 0;
  margin-left: 4px;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 15px solid #fff;
  content: '';
}
.video-channel-hero .eyebrow { color: #ff7772; }
.video-channel-hero h2 { margin-bottom: 8px; font-size: 28px; }
.video-channel-hero p:last-child { max-width: 620px; margin: 0; color: #c8d2d7; font-size: 13px; line-height: 1.7; }
.youtube-channel-link {
  z-index: 1;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: 11px;
  padding: 11px 17px;
  background: #e4302a;
  box-shadow: 0 9px 22px rgba(228,48,42,.26);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  transition: transform .2s, background .2s;
}
.youtube-channel-link:hover { background: #f0443e; transform: translateY(-2px); }
.video-section-heading { display: flex; align-items: flex-end; justify-content: space-between; margin: 34px 2px 17px; }
.video-section-heading h2 { margin: 0; font-size: 22px; }
.video-section-heading > span { color: var(--muted); font-size: 12px; }
.video-toolbar { display: flex; align-items: center; gap: 16px; justify-content: space-between; margin-bottom: 14px; }
.video-search { display: flex; align-items: center; gap: 10px; width: min(540px, 100%); min-height: 46px; border: 1px solid var(--line); border-radius: 12px; padding: 0 14px; background: #fff; color: var(--muted); }
.video-search:focus-within { border-color: #d78b87; box-shadow: 0 0 0 3px rgba(228,48,42,.09); }
.video-search input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; }
.video-results { color: var(--muted); font-size: 12px; white-space: nowrap; }
.video-results strong { color: var(--ink); }
.video-filters { display: flex; gap: 7px; overflow-x: auto; margin-bottom: 20px; padding-bottom: 4px; scrollbar-width: thin; }
.video-filters button { display: inline-flex; gap: 6px; align-items: center; flex: 0 0 auto; min-height: 34px; border: 1px solid var(--line); border-radius: 999px; padding: 7px 11px; background: #fff; color: var(--muted); cursor: pointer; font-size: 11px; }
.video-filters button:hover, .video-filters button.active { border-color: #d98985; background: #fbeceb; color: #a73531; }
.video-filters em { border-radius: 999px; padding: 1px 5px; background: rgba(16,45,59,.07); font-size: 9px; font-style: normal; }
.video-grid { display: grid; grid-template-columns: repeat(3, minmax(230px, 1fr)); gap: 18px; }
.video-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(18,45,58,.05);
  color: var(--ink);
  text-decoration: none;
  content-visibility: auto;
  contain-intrinsic-size: 410px;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.video-card:hover { border-color: #d8aaa8; box-shadow: 0 18px 38px rgba(18,45,58,.13); transform: translateY(-4px); }
.video-card:focus-visible { outline: 3px solid rgba(228,48,42,.25); outline-offset: 3px; }
.video-thumbnail { aspect-ratio: 16 / 9; overflow: hidden; position: relative; background: #17242a; }
.video-thumbnail::after { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 46%, rgba(0,0,0,.24)); content: ''; }
.video-thumbnail-image { position: absolute; inset: 0; display: block; background-color: #17242a; background-image: var(--video-sheet); background-position: var(--video-x) var(--video-y); background-repeat: no-repeat; background-size: 500% 500%; transition: transform .35s; }
.video-card:hover .video-thumbnail-image { transform: scale(1.025); }
.video-play {
  z-index: 1;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 58px;
  height: 40px;
  border-radius: 12px;
  background: rgba(228,48,42,.94);
  box-shadow: 0 8px 20px rgba(0,0,0,.24);
  transform: translate(-50%, -50%);
}
.video-play::after {
  position: absolute;
  left: 24px;
  top: 12px;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 13px solid #fff;
  content: '';
}
.video-duration { z-index: 2; position: absolute; right: 9px; bottom: 8px; border-radius: 5px; padding: 3px 6px; background: rgba(0,0,0,.78); color: #fff; font-size: 10px; font-weight: 800; }
.video-card-copy { padding: 19px 20px 21px; }
.video-meta { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 10px; color: var(--muted); font-size: 10px; }
.video-meta span { border-radius: 999px; padding: 4px 8px; background: #fbeceb; color: #a73531; font-weight: 800; }
.video-card h2 { display: -webkit-box; min-height: 46px; margin-bottom: 15px; overflow: hidden; font-size: 16px; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.video-card strong { color: #c72e29; font-size: 12px; }
.video-card-footer { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.video-card-footer small { color: var(--muted); font-size: 10px; }
.video-load-more { display: flex; gap: 9px; align-items: center; justify-content: center; min-width: 210px; min-height: 45px; margin: 26px auto 0; border: 1px solid #d98985; border-radius: 12px; background: #fff; color: #a73531; cursor: pointer; font-weight: 800; }
.video-load-more:hover { background: #fbeceb; }
.video-load-more span { border-radius: 999px; padding: 2px 7px; background: #f2d7d5; font-size: 10px; }
.video-empty { grid-column: 1 / -1; border: 1px dashed var(--line); border-radius: 14px; padding: 56px 20px; color: var(--muted); text-align: center; }

/* Global regional contacts */
.contact-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  overflow: hidden;
  position: relative;
  min-height: 170px;
  border-radius: 20px;
  padding: 32px 38px;
  background: linear-gradient(125deg, #102d3b 0%, #174c58 58%, #0d766e 100%);
  box-shadow: 0 18px 42px rgba(16,45,59,.14);
  color: #fff;
}
.contact-hero::after {
  position: absolute;
  right: 90px;
  top: -145px;
  width: 320px;
  height: 320px;
  border: 52px solid rgba(94,228,206,.08);
  border-radius: 50%;
  content: '';
}
.contact-hero > div { z-index: 1; }
.contact-hero .eyebrow { color: #5ee4ce; }
.contact-hero h2 { margin-bottom: 10px; font-size: 30px; }
.contact-hero p:last-child { max-width: 680px; margin: 0; color: #c3dce3; font-size: 13px; line-height: 1.8; }
.contact-hero-stat {
  display: grid;
  min-width: 122px;
  min-height: 98px;
  place-items: center;
  align-content: center;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 17px;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
}
.contact-hero-stat strong { color: #5ee4ce; font-size: 36px; line-height: 1; }
.contact-hero-stat span { margin-top: 8px; color: #d7e7ea; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.contact-map-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(420px, .85fr); gap: 18px; margin-top: 18px; }
.contact-world-panel, .contact-region-panel, .contact-directory {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(18,45,58,.055);
}
.contact-world-panel, .contact-region-panel { overflow: hidden; }
.contact-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 21px 23px 16px; }
.contact-panel-heading h3 { margin: 0 0 6px; font-size: 17px; }
.contact-panel-heading p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.contact-live-dot, .contact-region-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 29px;
  min-height: 25px;
  border-radius: 999px;
  background: #eaf7f4;
  color: #087a70;
  font-size: 10px;
  font-weight: 900;
}
.contact-live-dot::before { width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #12ae9d; content: ''; box-shadow: 0 0 0 4px rgba(18,174,157,.12); }
.contact-region-badge { padding-inline: 9px; letter-spacing: .09em; }
.contact-world-map {
  overflow: hidden;
  position: relative;
  min-height: 360px;
  margin: 0 18px 18px;
  border-radius: 14px;
  background: radial-gradient(circle at 54% 24%, rgba(18,174,157,.14), transparent 22%), #eef4f5;
}
.contact-world-map img { display: block; width: 100%; height: 100%; min-height: 360px; object-fit: contain; opacity: .7; filter: sepia(.05) saturate(.55) hue-rotate(125deg); }
.contact-world-focus {
  position: absolute;
  left: 54.5%;
  top: 24%;
  width: 14px;
  height: 14px;
  border: 4px solid #fff;
  border-radius: 50%;
  background: #e4302a;
  box-shadow: 0 0 0 7px rgba(228,48,42,.18), 0 0 0 15px rgba(228,48,42,.08);
  transform: translate(-50%, -50%);
}
.contact-region-map {
  overflow: hidden;
  position: relative;
  min-height: 360px;
  margin: 0 18px 18px;
  border-radius: 14px;
  background-color: #eaf1f2;
  background-image: linear-gradient(rgba(255,255,255,.38), rgba(255,255,255,.38)), url('assets/contact/world-map.svg?v=20260902.1');
  background-position: 54.5% 24%;
  background-repeat: no-repeat;
  background-size: 1440% 1000%;
  box-shadow: inset 0 0 0 1px rgba(16,45,59,.06);
}
.contact-region-map::after { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(16,45,59,.05), transparent 42%, rgba(18,174,157,.08)); content: ''; pointer-events: none; }
.contact-map-marker {
  z-index: 1;
  position: absolute;
  left: var(--contact-x);
  top: var(--contact-y);
  display: inline-flex;
  gap: 5px;
  align-items: center;
  min-height: 30px;
  border: 2px solid #fff;
  border-radius: 999px;
  padding: 4px 8px 4px 5px;
  background: #123747;
  box-shadow: 0 6px 16px rgba(18,45,58,.22);
  color: #fff;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: background .18s, box-shadow .18s, transform .18s;
  white-space: nowrap;
}
.contact-map-marker span { font-size: 15px; line-height: 1; }
.contact-map-marker strong { font-size: 9px; }
.contact-map-marker:hover, .contact-map-marker:focus-visible { z-index: 3; outline: none; background: #0b8e83; box-shadow: 0 8px 22px rgba(11,142,131,.3); transform: translate(-50%, -50%) scale(1.08); }
.contact-directory { margin-top: 18px; padding: 24px; }
.contact-section-heading { margin-bottom: 16px; }
.contact-section-heading .eyebrow { margin-bottom: 6px; }
.contact-section-heading h3 { margin: 0; font-size: 21px; }
.contact-country-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.contact-country-card {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 74px;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 12px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.contact-country-card:hover, .contact-country-card:focus-visible { outline: none; border-color: #77c8bd; box-shadow: 0 9px 22px rgba(18,45,58,.09); transform: translateY(-2px); }
.contact-country-flag { font-size: 25px; }
.contact-country-card strong, .contact-country-card small { display: block; }
.contact-country-card strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.contact-country-card small { overflow: hidden; margin-top: 5px; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.contact-country-card i { color: var(--teal); font-size: 16px; font-style: normal; }
.contact-dialog {
  width: min(440px, calc(100vw - 34px));
  border: 0;
  border-radius: 20px;
  padding: 31px;
  box-shadow: 0 30px 80px rgba(5,20,29,.35);
  color: var(--ink);
}
.contact-dialog::backdrop { background: rgba(8,25,34,.58); backdrop-filter: blur(5px); }
.contact-dialog-close { position: absolute; right: 14px; top: 12px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: #edf3f4; color: #52666f; cursor: pointer; font-size: 22px; }
.contact-dialog-flag { margin-bottom: 17px; font-size: 43px; line-height: 1; }
.contact-dialog .eyebrow { color: var(--teal); }
.contact-dialog h2 { margin-bottom: 22px; font-size: 27px; }
.contact-dialog dl { display: grid; gap: 0; margin: 0 0 23px; border: 1px solid var(--line); border-radius: 13px; }
.contact-dialog dl div { display: grid; grid-template-columns: 112px 1fr; gap: 15px; padding: 13px 15px; border-bottom: 1px solid var(--line); }
.contact-dialog dl div:last-child { border-bottom: 0; }
.contact-dialog dt { color: var(--muted); font-size: 11px; }
.contact-dialog dd { margin: 0; font-size: 12px; font-weight: 800; }
.contact-dialog dd a { color: var(--teal); text-decoration: none; }
.contact-email-action { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 45px; border-radius: 11px; background: var(--teal); color: #fff; font-size: 12px; font-weight: 800; text-decoration: none; }

@media (max-width: 1180px) {
  .contact-map-layout { grid-template-columns: 1fr; }
  .contact-country-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
  body { display: block; min-height: 100dvh; }

  .sidebar {
    position: sticky;
    inset: 0 0 auto;
    z-index: 50;
    width: 100%;
    height: auto;
    padding: 9px 12px 8px;
    overflow: visible;
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
  }
  .brand { display: flex; justify-content: flex-start; gap: 10px; padding: 0 2px 8px; }
  .brand-logo { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 9px; padding: 4px; }
  .brand > span { margin: 0; color: #e1e2e4; font-size: 11px; line-height: 1.3; letter-spacing: .04em; text-align: left; }
  .sidebar nav {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    overflow: visible;
    padding: 0;
    scrollbar-gutter: auto;
  }
  .sidebar nav > .nav-item, .sidebar nav > .nav-library { min-width: 0; }
  .nav-item, html[lang="en"] .nav-item {
    width: 100%;
    min-height: 40px;
    padding: 8px 4px;
    overflow: hidden;
    border-radius: 8px;
    font-size: 10px;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
  }
  .nav-item > span { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .nav-item.active, .nav-item:hover { box-shadow: inset 0 -3px 0 var(--teal); }
  .nav-library-toggle { justify-content: center; gap: 5px; }
  .nav-library-toggle i { flex: 0 0 auto; font-size: 13px; }
  .nav-item em { float: none; display: inline-grid; min-width: 17px; margin-left: 3px; padding: 1px 4px; place-items: center; }
  .nav-library { position: static; }
  .nav-library-menu {
    position: fixed;
    z-index: 60;
    left: 12px;
    right: 12px;
    top: 113px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px;
    max-height: 0;
    border: 0 solid #42454b;
    border-radius: 11px;
    background: #202226;
    box-shadow: 0 16px 35px rgba(0,0,0,.3);
  }
  .nav-library.expanded .nav-library-menu {
    max-height: min(58dvh, 430px);
    padding: 9px;
    overflow-y: auto;
    border-width: 1px;
  }
  .nav-library-menu button { min-height: 38px; margin: 0; border: 0; border-radius: 7px; padding: 8px 10px; font-size: 10px; }
  .source-state, .version { display: none; }

  main { width: 100%; margin-left: 0; padding: 18px 14px 42px; }
  header { align-items: flex-start; gap: 12px; margin-bottom: 18px; }
  header > div:first-child { min-width: 0; }
  h1 { font-size: clamp(23px, 7vw, 30px); line-height: 1.15; overflow-wrap: anywhere; }
  .eyebrow { font-size: 9px; line-height: 1.4; letter-spacing: 1.35px; }
  .header-controls { flex: 0 0 auto; }
  .language-select { height: 36px; padding-inline: 7px; }
  .language-select select { min-width: 76px; max-width: 96px; font-size: 12px; }

  .scenario-grid, .system-overview-grid, #productsView > .product-grid,
  .product-grid, .recommended .product-grid, .solar-product-grid,
  .energy-storage-product-grid, .custom-options, .dali-system-grid,
  .device-type-grid, .model-grid, .specialty-products-stage .model-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .scenario-grid { gap: 14px; }
  .scenario-card, .project-scene-card, .specialty-scene-card { width: 100%; }

  .hero { min-height: 0; grid-template-columns: 1fr; gap: 18px; border-radius: 14px; padding: 22px 18px; }
  .hero h2 { font-size: 24px; line-height: 1.2; }
  .hero p { font-size: 12px; line-height: 1.7; }
  .metric-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric { min-width: 0; padding: 11px; }
  .metric strong { font-size: 17px; }
  .detail-grid, .system-explain-grid, .system-detail-hero, .system-slide,
  .system-deck, .specialty-story, .project-case-card { grid-template-columns: minmax(0, 1fr); }
  .panel, .system-section, .builder-group, .builder-stage { padding: 17px 15px; }
  .mode, html[lang="en"] .mode, html[lang="fr"] .mode,
  html[lang="ru"] .mode, html[lang="de"] .mode {
    grid-template-columns: 55px minmax(85px, .8fr) minmax(0, 1.4fr);
    gap: 7px;
  }

  .solution-toolbar, .recommended-head, .selection-head, .toolbar,
  .builder-heading, .topology-head, .model-browser-head,
  .project-case-heading, .system-deck-head {
    align-items: stretch;
    flex-direction: column;
  }
  .solution-toolbar { margin: 20px 0 16px; }
  .solution-mode-switch { width: 100%; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
  .solution-mode-switch button { min-width: 0; padding: 10px 8px; }
  .protocol-tabs, .system-page-nav, .stage-protocol-tabs {
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .protocol-tabs::-webkit-scrollbar, .system-page-nav::-webkit-scrollbar,
  .stage-protocol-tabs::-webkit-scrollbar { display: none; }
  .protocol-tabs button { flex: 0 0 auto; min-width: 88px; }
  .recommended-head { gap: 6px; }
  .recommended-head p { margin: 0; }
  .recommended .product-grid { grid-auto-rows: var(--recommended-product-card-height); }

  .toolbar { gap: 12px; }
  .toolbar input { width: 100%; }
  .filters { width: 100%; }
  .filter-level { align-items: stretch; flex-direction: column; gap: 7px; }
  .filter-level > span { flex: 0 0 auto; padding: 0; text-align: left; }
  .filter-level > div { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 3px; }
  .filters button { flex: 0 0 auto; min-height: 38px; }

  .custom-builder { gap: 14px; margin-top: 24px; }
  .builder-heading, .builder-group-head, .stage-title { gap: 10px; }
  .builder-heading .add-custom-selection, .protocol-box { width: 100%; min-width: 0; }
  .builder-group-head { align-items: flex-start; flex-wrap: wrap; }
  .builder-group-head h3 { width: 100%; }
  .stage-title { flex-wrap: wrap; }
  .stage-title > span + div { flex-basis: calc(100% - 42px); }
  .stage-title .clear-custom-configuration, .stage-protocol-tabs { margin-left: 42px; }
  .configuration-workspace { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .selected-type-nav {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    scrollbar-width: none;
  }
  .selected-type-nav::-webkit-scrollbar { display: none; }
  .type-nav-button { flex: 0 0 auto; width: auto; min-width: 135px; margin: 0; }
  .type-nav-group-label { flex: 0 0 auto; align-self: center; margin: 0 2px; border: 0; padding: 0 5px; }
  .model-browser { padding: 15px 12px; }
  .gateway-group-tabs { grid-template-columns: minmax(0, 1fr); }
  .model-filter { align-items: stretch; flex-direction: column; gap: 6px; }
  .model-filter span { min-width: 0; text-align: left; }

  .topology-panel, .recommended-topology, .specialty-topology-stage { padding: 17px 14px; overflow-x: auto; }
  .topology-head { gap: 10px; }
  .topology-tools { justify-items: start; }
  .topology-legend { justify-content: flex-start; }
  .topology-svg, .recommended-topology-svg { min-width: 680px; }
  .specialty-native-visual { min-width: 0; }

  .system-intro-lead { font-size: 13px; }
  .system-detail-copy, .system-slide-main { padding: 22px 18px; }
  .system-detail-copy h2, .system-slide-main h2, .system-deck-head h2 { font-size: 24px; }
  .system-detail-image { min-height: 210px; }
  .system-flow { grid-template-columns: 1fr; gap: 10px; }
  .system-flow-step:not(:last-child)::after { right: 50%; top: auto; bottom: -13px; transform: rotate(90deg); }
  .system-page-nav { display: flex; position: static; }
  .system-page-tab { flex: 0 0 155px; }
  .system-slide { min-height: 0; }
  .system-slide-side { min-height: 0; padding: 26px 18px 20px; }
  .system-slide-visual { height: 170px; margin: -26px -18px 22px; }
  .system-slide-controls { grid-column: 1; gap: 10px; }

  .selection-head { gap: 13px; }
  .selection-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  #selectionList { width: 100%; overflow-x: auto; }
  .selection-table { min-width: 720px; }
  .empty { padding: 34px 18px; }

  .video-channel-hero { grid-template-columns: auto minmax(0, 1fr); gap: 16px; min-height: 0; padding: 23px 18px; }
  .youtube-mark { width: 54px; height: 40px; border-radius: 12px; }
  .youtube-mark::after { border-top-width: 7px; border-bottom-width: 7px; border-left-width: 12px; }
  .video-channel-hero h2 { font-size: 23px; }
  .youtube-channel-link { grid-column: 1 / -1; justify-self: stretch; }
  .video-section-heading { margin-top: 26px; }
  .video-toolbar { align-items: stretch; flex-direction: column; gap: 8px; }
  .video-results { white-space: normal; }
  .video-grid { grid-template-columns: minmax(0, 1fr); gap: 15px; }
  .video-card h2, .video-card p { min-height: 0; }

  .contact-hero { align-items: flex-start; padding: 24px 19px; }
  .contact-hero h2 { font-size: 24px; }
  .contact-hero-stat { min-width: 82px; min-height: 78px; }
  .contact-hero-stat strong { font-size: 29px; }
  .contact-world-map, .contact-world-map img { min-height: 260px; }
  .contact-region-map { min-height: 390px; }
  .contact-country-grid { grid-template-columns: 1fr; }
  .contact-directory { padding: 19px 15px; }
  .contact-dialog { padding: 27px 20px 22px; }

  .project-case-heading { gap: 12px; }
  .project-case-heading-actions { align-items: flex-start; }
  .project-case-gallery { grid-template-rows: 210px 88px; }
  .project-case-gallery.image-count-1 { grid-template-rows: 300px; }
  .project-case-copy { padding: 20px 17px; }
  .project-case-copy h3 { font-size: 19px; }
  .project-case-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .specialty-solution-hero { gap: 20px; padding: 22px 18px; }
  .specialty-hero-copy h2 { font-size: 25px; }
  .specialty-story-card { grid-template-columns: 36px 1fr; gap: 11px; }
  .specialty-topology-stage .specialty-native-visual { padding: 14px; }

  .toast { left: 14px; right: 14px; bottom: 14px; text-align: center; }
  button, select, input { touch-action: manipulation; }
}

@media (max-width: 430px) {
  main { padding-inline: 12px; }
  .sidebar { padding-inline: 10px; }
  .nav-library-menu { left: 10px; right: 10px; }
  .metric-row, .project-case-metrics { grid-template-columns: 1fr; }
  .selection-actions { grid-template-columns: 1fr; }
  .language-select select { min-width: 70px; max-width: 82px; }
  .contact-hero { display: grid; gap: 18px; }
  .contact-hero-stat { justify-self: stretch; grid-template-columns: auto auto; gap: 10px; min-height: 62px; }
  .contact-hero-stat span { margin: 0; }
  .contact-panel-heading { padding-inline: 16px; }
  .contact-world-map, .contact-region-map { margin-inline: 10px; }
  .contact-map-marker strong { max-width: 86px; overflow: hidden; text-overflow: ellipsis; }
  .contact-dialog dl div { grid-template-columns: 90px 1fr; }
}