.trainhu3d {
    --navy: #1b120c;
    --panel: #2a1c12;
    --line: rgba(226,183,108,.22);
    --cyan: #d6a24d;
    --text: #fff8eb;
    --muted: #c8b79d;
    display: grid;
    grid-template-columns: minmax(330px, 420px) minmax(0, 1fr);
    position: fixed;
    z-index: 99990;
    inset: 0;
    left: 0;
    width: 100vw;
    max-width: none !important;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
    border-radius: 0;
    color: var(--text);
    background: var(--navy);
    box-shadow: none;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.trainhu3d-page-active { overflow: hidden !important; }
body.admin-bar .trainhu3d { top: 32px; height: calc(100vh - 32px); height: calc(100dvh - 32px); }
.trainhu3d[data-header-offset] {
    top: var(--trainhu3d-top-offset, 0px) !important;
    height: calc(100vh - var(--trainhu3d-top-offset, 0px)) !important;
    height: calc(100dvh - var(--trainhu3d-top-offset, 0px)) !important;
}
.trainhu3d *, .trainhu3d *::before, .trainhu3d *::after { box-sizing: border-box; }
.trainhu3d.is-license-locked > .trainhu3d__panel,
.trainhu3d.is-license-locked > .trainhu3d__stage,
.trainhu3d.is-license-locked > .trainhu3d__modal { filter: grayscale(1) brightness(.42) blur(2px); pointer-events: none; user-select: none; }
.trainhu3d__license-lock { position: absolute; z-index: 100000; inset: 0; display: grid; place-items: center; padding: 22px; background: rgba(11,14,16,.56); backdrop-filter: grayscale(1) blur(3px); }
.trainhu3d__license-card { width: min(540px, 100%); padding: 34px 30px; border: 1px solid rgba(255,255,255,.24); border-radius: 22px; color: #f6f7f8; background: linear-gradient(145deg, rgba(35,40,44,.97), rgba(18,21,24,.98)); box-shadow: 0 28px 90px rgba(0,0,0,.58); text-align: center; }
.trainhu3d__license-icon { display: grid; width: 58px; height: 58px; margin: 0 auto 17px; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; background: rgba(255,255,255,.08); font-size: 28px; }
.trainhu3d__license-card h2 { margin: 0 0 13px; color: #fff; font-size: clamp(22px, 4vw, 30px); line-height: 1.2; }
.trainhu3d__license-card p { margin: 0; color: #d8dde0; font-size: 15px; line-height: 1.65; }
.trainhu3d__license-card a { color: #7edcf1; font-weight: 800; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.trainhu3d__license-card a:hover, .trainhu3d__license-card a:focus { color: #fff; }
.trainhu3d__panel { display: block; min-height: 0; padding: 26px 28px 32px; overflow-x: hidden; overflow-y: auto; background: linear-gradient(180deg, #342317 0%, var(--panel) 46%, #22160e 100%); scrollbar-color: rgba(214,162,77,.62) rgba(255,255,255,.05); scrollbar-width: thin; }
.trainhu3d__panel::-webkit-scrollbar { width: 8px; }
.trainhu3d__panel::-webkit-scrollbar-track { background: rgba(255,255,255,.04); }
.trainhu3d__panel::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(214,162,77,.58); }
.trainhu3d__brand { flex: 0 0 auto; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.trainhu3d__eyebrow { display: block; margin-bottom: 8px; color: #e4b866; font-size: clamp(22px, 2vw, 30px); font-weight: 850; line-height: 1.08; letter-spacing: .035em; overflow-wrap: anywhere; text-shadow: 0 4px 18px rgba(214,162,77,.24); }
.trainhu3d h2 { margin: 5px 0 3px; color: #fff; font-size: 23px; line-height: 1.15; }
.trainhu3d h3 { margin: 0 0 13px; color: var(--cyan); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.trainhu3d__section-title { display: flex; align-items: center; gap: 10px; letter-spacing: .075em !important; }
.trainhu3d__section-icon { display: grid; flex: 0 0 34px; width: 34px; height: 34px; place-items: center; border: 1px solid color-mix(in srgb, var(--cyan) 44%, transparent); border-radius: 10px; color: var(--cyan); background: color-mix(in srgb, var(--cyan) 10%, rgba(255,255,255,.025)); box-shadow: inset 0 1px rgba(255,255,255,.07), 0 5px 14px rgba(0,0,0,.12); }
.trainhu3d__section-icon svg { width: 23px; height: 23px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2.35; stroke-linecap: round; stroke-linejoin: round; }
.trainhu3d__section-title > span:last-child { min-width: 0; line-height: 1.25; }
.trainhu3d p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.trainhu3d__section { padding: 22px 0; border-bottom: 1px solid var(--line); }
.trainhu3d__config-section h3 { margin-bottom: 15px; }
.trainhu3d__section label { display: grid; grid-template-columns: 1fr auto; gap: 7px 12px; margin: 0 0 17px; color: #f0e4cf; font-size: 13px; font-weight: 650; }
.trainhu3d__section label:last-child { margin-bottom: 0; }
.trainhu3d output { color: var(--cyan); font-variant-numeric: tabular-nums; }
.trainhu3d input[type="range"] { grid-column: 1 / -1; width: 100%; accent-color: var(--cyan); }
.trainhu3d select { grid-column: 1 / -1; width: 100%; min-height: 42px; padding: 0 11px; color: #fff8eb; border: 1px solid var(--line); border-radius: 10px; background: #3a281a; }
.trainhu3d input[type="color"] { width: 100%; height: 42px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: #3a281a; }
.trainhu3d__grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.trainhu3d__grid2 label { display: block; margin: 0; }
.trainhu3d__grid2 select, .trainhu3d__grid2 input { display: block; margin-top: 8px; }
.trainhu3d__help { margin-bottom: 12px !important; }
.trainhu3d__included { margin: -5px 0 12px !important; color: #ddcdb4 !important; font-size: 11px !important; }
.trainhu3d__tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.trainhu3d button { min-height: 42px; padding: 9px 12px; color: #f0e4cf; border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(180deg, #443020 0%, #352317 100%); cursor: pointer; font: inherit; font-weight: 700; box-shadow: inset 0 1px rgba(255,255,255,.04); }
.trainhu3d button:hover, .trainhu3d button[aria-pressed="true"] { color: #24160b; border-color: #e5ba6d; background: linear-gradient(135deg, #edca86 0%, var(--cyan) 100%); }
.trainhu3d button:disabled { cursor: not-allowed; opacity: .42; }
.trainhu3d [data-action="undo"] { grid-column: 1 / -1; }
.trainhu3d .trainhu3d__opening-tool { display: grid; min-width: 0; min-height: 112px; padding: 10px 5px 8px; place-items: center; align-content: center; gap: 5px; }
.trainhu3d__opening-tool small { display: block; max-width: 100%; overflow: hidden; font-size: 10px; font-weight: 750; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.trainhu3d__opening-price { display: block; max-width: 100%; color: var(--cyan); font-size: 9px; font-weight: 800; line-height: 1.2; text-align: center; }
.trainhu3d__opening-tool:hover .trainhu3d__opening-price,
.trainhu3d__opening-tool[aria-pressed="true"] .trainhu3d__opening-price { color: #3a2410; }
.trainhu3d__opening-icon { position: relative; display: flex; align-items: stretch; justify-content: center; width: 46px; height: 40px; padding: 3px; border: 3px solid #090a0b; border-radius: 2px; background: #14171a; box-shadow: 0 4px 10px rgba(0,0,0,.28); }
.trainhu3d__opening-icon i { display: block; flex: 1 1 0; border: 1px solid rgba(235,248,255,.78); background: linear-gradient(145deg, #bfe7f1 0%, #669cab 55%, #31525d 100%); box-shadow: inset 2px 2px rgba(255,255,255,.16); }
.trainhu3d__opening-icon--door { width: 29px; height: 49px; padding: 3px; }
.trainhu3d__opening-icon--door i { border-color: rgba(245,245,241,.82); background: linear-gradient(145deg, #f4f2ea 0%, #c9c8c1 100%); }
.trainhu3d__opening-icon--door::after { position: absolute; right: 6px; top: 27px; width: 4px; height: 4px; border-radius: 50%; background: #202326; box-shadow: 0 0 0 1px rgba(255,255,255,.32); content: ""; }
.trainhu3d__opening-tool.is-stair-door .trainhu3d__opening-icon--door::before { position: absolute; left: -13px; bottom: -6px; width: 16px; height: 12px; border-left: 4px solid #8b979c; border-bottom: 4px solid #8b979c; box-shadow: 4px -4px 0 -1px #8b979c, 8px -8px 0 -1px #8b979c; content: ""; transform: skewY(-18deg); }
.trainhu3d__opening-icon--window { width: 43px; }
.trainhu3d__opening-icon--double { width: 57px; }
.trainhu3d__opening-icon--double i + i { border-left: 3px solid #090a0b; }
.trainhu3d__opening-icon--garage { display: grid; width: 62px; height: 45px; padding: 3px; grid-template-rows: repeat(4, 1fr); gap: 2px; }
.trainhu3d__opening-icon--garage i { border: 0; background: linear-gradient(180deg, #d9dde0 0%, #89939a 100%); box-shadow: inset 0 1px rgba(255,255,255,.48); }
.trainhu3d__opening-tool:hover .trainhu3d__opening-icon,
.trainhu3d__opening-tool[aria-pressed="true"] .trainhu3d__opening-icon { border-color: #17100a; box-shadow: 0 5px 14px rgba(55,31,8,.32); }
.trainhu3d__module-count { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; color: #f0e4cf; font-size: 13px; font-weight: 700; }
.trainhu3d__module-count output { color: var(--cyan); }
.trainhu3d__mixed-module { margin: 0 0 12px; padding: 11px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.035); }
.trainhu3d__mixed-module[hidden] { display: none; }
.trainhu3d__mixed-module label { margin-bottom: 7px; }
.trainhu3d__mixed-module p { font-size: 10px; line-height: 1.35; }
.trainhu3d__module-tools { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 10px; }
.trainhu3d__module-help { margin-top: 10px !important; font-size: 11px !important; }
.trainhu3d__roof-warning { margin-top: 12px; padding: 13px 14px; border: 1px solid rgba(226,175,85,.72); border-left: 4px solid var(--cyan); border-radius: 10px; background: rgba(226,175,85,.12); color: #f6ead4; font-size: 13px; line-height: 1.5; }
.trainhu3d__roof-warning[hidden] { display: none; }
.trainhu3d__panel-summary { margin-top: 10px; padding: 9px 11px; border-radius: 8px; background: rgba(255,255,255,.055); color: rgba(255,255,255,.76); font-size: 12px; line-height: 1.4; }
.trainhu3d__opening-list { display: grid; gap: 7px; max-height: 145px; margin-top: 12px; overflow-y: auto; color: var(--muted); font-size: 12px; scrollbar-width: thin; }
.trainhu3d__opening-feedback { margin-top: 9px; color: var(--muted); font-size: 10px; line-height: 1.35; }
.trainhu3d__opening-feedback.is-error { color: #ffb8b8; }
.trainhu3d__validation-summary { padding: 10px 11px; border: 1px solid var(--line); border-radius: 10px; font-size: 12px; font-weight: 800; }
.trainhu3d__validation-summary.is-ok { color: #baf2cb; border-color: rgba(98,211,139,.36); background: rgba(54,151,92,.13); }
.trainhu3d__validation-summary.has-errors { color: #ffd0c8; border-color: rgba(255,116,91,.42); background: rgba(174,54,38,.16); }
.trainhu3d__validation-list { display: grid; gap: 6px; margin-top: 8px; }
.trainhu3d .trainhu3d__validation-item { display: block; width: 100%; min-height: 0; padding: 8px 9px; color: var(--muted); border: 0; border-radius: 8px; background: rgba(255,255,255,.035); font-size: 10px; font-weight: 600; line-height: 1.4; text-align: left; }
.trainhu3d button.trainhu3d__validation-item.is-error { color: #ffd0c8; background: rgba(174,54,38,.12); }
.trainhu3d button.trainhu3d__validation-item.is-error:hover { color: #fff; background: rgba(190,64,45,.3); }
.trainhu3d__extra-toggle { display: grid !important; grid-template-columns: 20px 44px minmax(0,1fr); gap: 10px; align-items: center; padding: 11px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.035); cursor: pointer; transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.trainhu3d__extra-toggle:hover { border-color: color-mix(in srgb, var(--cyan) 55%, transparent); background: rgba(255,255,255,.06); transform: translateY(-1px); }
.trainhu3d__extra-toggle input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--cyan); }
.trainhu3d__extra-copy { display: grid; gap: 3px; min-width: 0; }
.trainhu3d__extra-icon { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid color-mix(in srgb, var(--cyan) 45%, transparent); border-radius: 11px; color: var(--cyan); background: color-mix(in srgb, var(--cyan) 12%, rgba(255,255,255,.025)); box-shadow: inset 0 1px rgba(255,255,255,.08); }
.trainhu3d__extra-icon svg { width: 31px; height: 31px; overflow: visible; }
.trainhu3d__extra-icon path, .trainhu3d__extra-icon circle { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.trainhu3d__extra-icon--foundation path:first-child { fill: color-mix(in srgb, var(--cyan) 18%, transparent); }
.trainhu3d__extra-toggle:has(input:checked) { border-color: var(--cyan); background: color-mix(in srgb, var(--cyan) 10%, rgba(255,255,255,.035)); }
.trainhu3d__extra-toggle:has(input:checked) .trainhu3d__extra-icon { color: #fff; background: var(--cyan); border-color: var(--cyan); box-shadow: 0 5px 16px color-mix(in srgb, var(--cyan) 25%, transparent); }
.trainhu3d__extra-toggle strong { color: #fff; font-size: 13px; }
.trainhu3d__extra-toggle small, .trainhu3d__extra-summary { color: var(--muted); font-size: 11px; line-height: 1.4; }
.trainhu3d__extra-summary { margin-top: 8px; color: var(--cyan); font-weight: 750; }
.trainhu3d input[type="range"]:disabled { cursor: not-allowed; opacity: .48; filter: grayscale(.35); }
.trainhu3d__fixed-height-note { display: block; margin-top: 5px; color: var(--cyan); font-size: 10px; font-weight: 800; }
.trainhu3d__save-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.trainhu3d .trainhu3d__save-actions button { min-height: 40px; }
.trainhu3d .trainhu3d__pdf-button { grid-column: 1 / -1; color: #fffaf0; border-color: #e4b75f; background: linear-gradient(135deg, #b57725, #8d5b20); text-shadow: 0 1px 2px rgba(0,0,0,.45); }
.trainhu3d .trainhu3d__pdf-button:hover { color: #ffffff; background: linear-gradient(135deg, #ce9138, #a96e27); }
.trainhu3d__pdf-status { margin-top: 8px; color: var(--cyan); font-size: 11px; line-height: 1.4; }
.trainhu3d__save-status { margin-top: 9px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.trainhu3d__save-status.is-saved { color: #8fdfa7; }
.trainhu3d__save-status.is-dirty { color: #ffd37d; }
.trainhu3d__save-status.is-error { color: #ff9e9e; }
.trainhu3d__opening-row { display: grid; grid-template-columns: minmax(0, 1fr) 76px 32px; gap: 5px; padding: 4px; border: 1px solid transparent; border-radius: 11px; background: rgba(255,255,255,.035); }
.trainhu3d__opening-row.is-selected { border-color: var(--cyan); background: rgba(214,162,77,.14); box-shadow: 0 0 0 1px rgba(214,162,77,.16); }
.trainhu3d .trainhu3d__opening-select { min-height: 34px; padding: 6px 8px; border: 0; text-align: left; background: transparent; font-size: 11px; }
.trainhu3d .trainhu3d__opening-select:hover, .trainhu3d .trainhu3d__opening-select[aria-pressed="true"] { color: #fff; border-color: transparent; background: transparent; }
.trainhu3d .trainhu3d__opening-remove { min-height: 34px; padding: 0; color: #ffb8b8; border: 0; background: rgba(255,90,90,.11); font-size: 22px; line-height: 1; }
.trainhu3d .trainhu3d__opening-remove:hover { color: #fff; border-color: #ff6969; background: #d93f3f; }
.trainhu3d__quote { border-bottom: 0; }
.trainhu3d .trainhu3d__quote-open { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 48px; margin-top: 14px; color: #24160b; border-color: #e8bd70; background: linear-gradient(135deg, #efd08d 0%, var(--cyan) 58%, #b97b28 100%); box-shadow: 0 9px 24px rgba(143,91,31,.32); }
.trainhu3d .trainhu3d__quote-open:hover { background: linear-gradient(135deg, #f7dfa8 0%, #e2af55 58%, #c78c35 100%); box-shadow: 0 11px 28px rgba(174,116,44,.38); transform: translateY(-1px); }
.trainhu3d__quote-icon { display: grid; flex: 0 0 32px; width: 32px; height: 32px; place-items: center; border: 1px solid rgba(255,244,217,.24); border-radius: 50%; background: #3b2615; box-shadow: inset 0 0 0 1px rgba(214,162,77,.2), 0 4px 10px rgba(22,12,5,.32); }
.trainhu3d__quote-icon svg { width: 23px; height: 23px; overflow: visible; fill: none; stroke: #ffe1a1; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.trainhu3d__quote-icon .trainhu3d__quote-spark { stroke: #fff; stroke-width: 1.6; }
.trainhu3d__quote-total { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; padding: 10px 12px; border: 1px solid rgba(214,162,77,.36); border-radius: 10px; background: rgba(214,162,77,.1); }
.trainhu3d__quote-total span { color: var(--muted); font-size: 10px; line-height: 1.2; }
.trainhu3d__quote-total strong { color: var(--cyan); font-size: 13px; line-height: 1.35; text-align: right; white-space: pre-line; }
.trainhu3d__price-details { margin-top: 8px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.025); }
.trainhu3d__price-details-title { padding: 11px 12px 9px; color: #f0e4cf; font-size: 12px; font-weight: 750; }
.trainhu3d__price-breakdown { display: grid; gap: 8px; padding: 0 12px 12px; }
.trainhu3d__price-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: start; color: var(--muted); font-size: 11px; line-height: 1.35; }
.trainhu3d__price-row strong { color: #f6ead5; font-size: 11px; text-align: right; white-space: nowrap; }
.trainhu3d__price-row.is-total { margin-top: 3px; padding-top: 9px; border-top: 1px solid var(--line); color: #f0e4cf; }
.trainhu3d__price-row.is-gross { color: var(--cyan); font-size: 12px; font-weight: 800; }
.trainhu3d__price-row.is-gross strong { color: var(--cyan); font-size: 12px; }
.trainhu3d__price-notice { display: grid; gap: 5px; margin-top: 9px; padding: 12px; border: 1px solid color-mix(in srgb, var(--cyan) 42%, transparent); border-radius: 10px; color: #f4ead9; background: color-mix(in srgb, var(--cyan) 10%, rgba(255,255,255,.025)); font-size: 11px; line-height: 1.48; }
.trainhu3d__price-notice strong { color: var(--cyan); font-size: 12px; }
.trainhu3d__price-notice a { color: #fff4dd; font-weight: 750; text-decoration: underline; text-underline-offset: 2px; }
.trainhu3d__price-notice--modal { margin: 0 0 14px; }
.trainhu3d .trainhu3d__restart { flex: 0 0 auto; width: 100%; min-height: 38px; margin-top: 8px; color: #f0e4cf; border-color: rgba(226,183,108,.22); background: rgba(255,244,217,.05); font-size: 12px; }
.trainhu3d .trainhu3d__restart:hover { color: #fff; border-color: rgba(255,255,255,.34); background: rgba(255,255,255,.09); }
.trainhu3d__creator-credit { margin-top: 10px; padding: 12px 10px; border: 1px solid color-mix(in srgb, var(--cyan) 30%, transparent); border-radius: 10px; color: #f0e4cf; background: color-mix(in srgb, var(--cyan) 7%, rgba(255,255,255,.025)); font-size: 12px; font-weight: 650; line-height: 1.4; text-align: center; }
.trainhu3d__creator-credit a { display: block; color: inherit; text-decoration: none; transition: color .18s ease, transform .18s ease; }
.trainhu3d__creator-credit strong { color: var(--cyan); font-size: 14px; font-weight: 900; letter-spacing: .045em; }
.trainhu3d__creator-credit a:hover, .trainhu3d__creator-credit a:focus-visible { color: #fff; transform: translateY(-1px); }
.trainhu3d__creator-credit a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; border-radius: 3px; }
.trainhu3d .trainhu3d__restart--after { display: none; margin-top: 0; }
.trainhu3d__quote form.is-sent .trainhu3d__restart--after { display: block; }
.trainhu3d__modal { position: fixed; z-index: 99999; inset: 0; display: grid; place-items: center; padding: 24px; }
.trainhu3d__modal[aria-hidden="true"] { display: none; }
.trainhu3d .trainhu3d__modal-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; background: rgba(20,12,7,.82); backdrop-filter: blur(6px); }
.trainhu3d .trainhu3d__modal-backdrop:hover { background: rgba(20,12,7,.82); }
.trainhu3d__modal-dialog { position: relative; z-index: 1; width: min(560px, 100%); max-height: calc(100vh - 48px); padding: 28px; overflow-y: auto; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); box-shadow: 0 30px 90px rgba(0,0,0,.5); }
.trainhu3d .trainhu3d__modal-close { position: absolute; z-index: 2; top: 14px; right: 14px; width: 38px; min-height: 38px; padding: 0; border-radius: 50%; font-size: 24px; line-height: 1; }
.trainhu3d__modal-dialog .trainhu3d__section { padding: 0; }
.trainhu3d__quote form { display: grid; gap: 12px; }
.trainhu3d__quote form.is-sent > :not(.trainhu3d__quote-status):not(.trainhu3d__restart--after) { display: none; }
.trainhu3d__quote form > label { display: grid; grid-template-columns: 1fr; gap: 6px; margin: 0; }
.trainhu3d__quote input[type="text"],
.trainhu3d__quote input[type="tel"],
.trainhu3d__quote input[type="email"],
.trainhu3d__quote textarea { width: 100%; padding: 10px 11px; color: #fff8eb; border: 1px solid var(--line); border-radius: 10px; outline: none; background: #3a281a; font: inherit; resize: vertical; }
.trainhu3d__quote input:focus, .trainhu3d__quote textarea:focus { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(214,162,77,.2); }
.trainhu3d__quote .trainhu3d__consent { display: grid; grid-template-columns: 18px 1fr; align-items: start; gap: 9px; color: var(--muted); font-size: 11px; font-weight: 500; line-height: 1.45; }
.trainhu3d__consent input { width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--cyan); }
.trainhu3d__honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.trainhu3d__quote-submit { width: 100%; color: #24160b !important; border-color: #e8bd70 !important; background: linear-gradient(135deg, #efd08d, var(--cyan)) !important; }
.trainhu3d__quote-status { min-height: 18px; font-size: 12px; line-height: 1.45; }
.trainhu3d__quote-status.is-pending { color: var(--muted); }
.trainhu3d__quote-status.is-success { margin-top: 8px; padding: 22px 18px; border: 1px solid rgba(115,228,174,.45); border-radius: 14px; color: #dffff0; background: rgba(39,145,95,.2); font-size: 19px; font-weight: 800; line-height: 1.35; text-align: center; }
.trainhu3d__quote-status.is-error { color: #ff9c9c; }
.trainhu3d__stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: radial-gradient(circle at 50% 35%, #5b4129 0, #302116 42%, #160f0a 100%); }
.trainhu3d__view-switch { position: absolute; z-index: 5; top: 104px; left: 22px; display: flex; gap: 5px; padding: 5px; border: 1px solid rgba(226,183,108,.25); border-radius: 12px; background: rgba(42,27,16,.86); box-shadow: 0 8px 24px rgba(20,10,4,.24); backdrop-filter: blur(10px); }
.trainhu3d .trainhu3d__view-switch button { min-height: 34px; padding: 6px 11px; border-radius: 8px; font-size: 11px; }
.trainhu3d__viewport { position: absolute; inset: 0; cursor: grab; touch-action: none; }
.trainhu3d__viewport:active { cursor: grabbing; }
.trainhu3d__viewport canvas.is-moving-opening { cursor: ew-resize; }
.trainhu3d__viewport canvas { display: block; width: 100%; height: 100%; }
.trainhu3d__floorplan { position: absolute; inset: 0; padding: 88px 34px 34px; background: linear-gradient(145deg, #f8f4ec, #e7dfd1); }
.trainhu3d__floorplan[hidden] { display: none; }
.trainhu3d__floorplan svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 12px 24px rgba(50,35,22,.15)); }
.trainhu3d__plan-bg { fill: #f8f4ec; }
.trainhu3d__plan-module { fill: #d9dfe1; stroke: #263238; stroke-width: .055; }
.trainhu3d__plan-module.is-upper { fill: #ead9b9; stroke-dasharray: .14 .09; }
.trainhu3d__plan-module-label, .trainhu3d__plan-module-size, .trainhu3d__plan-dimension-text { fill: #1b292f; font-family: system-ui, sans-serif; letter-spacing: 0; line-height: normal; text-anchor: middle; pointer-events: none; }
.trainhu3d__plan-module-label { font-size: .23px; font-weight: 850; }
.trainhu3d__plan-module-size { font-size: .16px; }
.trainhu3d__plan-opening { stroke: #2587a5; stroke-width: 7; stroke-linecap: round; cursor: pointer; }
.trainhu3d__plan-opening.is-door, .trainhu3d__plan-opening.is-garage-door { stroke: #bd792b; }
.trainhu3d__plan-opening.is-selected { stroke: #ed3f2f; stroke-width: 11; }
.trainhu3d__plan-dimension { stroke: #6f7c82; stroke-width: 2; stroke-dasharray: 8 5; vector-effect: non-scaling-stroke; }
.trainhu3d__plan-dimension-text { font-size: .19px; font-weight: 800; }
.trainhu3d__topbar { position: absolute; z-index: 2; top: 22px; right: 22px; left: 22px; display: flex; justify-content: space-between; gap: 12px; pointer-events: none; }
.trainhu3d__topbar > div { display: flex; flex-direction: column; padding: 12px 15px; border: 1px solid rgba(226,183,108,.22); border-radius: 13px; background: rgba(42,27,16,.84); box-shadow: 0 10px 30px rgba(20,10,4,.28); backdrop-filter: blur(10px); }
.trainhu3d__topbar strong { color: #fff; font-size: 17px; }
.trainhu3d__topbar span { color: var(--muted); font-size: 11px; }
.trainhu3d__price { text-align: right; }
.trainhu3d__price strong { color: var(--cyan); line-height: 1.35; white-space: pre-line; }
.trainhu3d__hint { position: absolute; z-index: 2; bottom: 22px; left: 50%; padding: 8px 13px; transform: translateX(-50%); border: 1px solid rgba(226,183,108,.16); border-radius: 999px; color: #f0e4cf; background: rgba(42,27,16,.78); font-size: 11px; pointer-events: none; white-space: nowrap; }
.trainhu3d__marker-toggle { position: absolute; z-index: 4; bottom: 22px; left: 22px; display: flex !important; align-items: center; gap: 9px; min-height: 38px; margin: 0 !important; padding: 7px 10px 7px 12px; border: 1px solid rgba(226,183,108,.25); border-radius: 999px; color: #fff4df; background: rgba(42,27,16,.86); box-shadow: 0 8px 24px rgba(20,10,4,.24); cursor: pointer; backdrop-filter: blur(10px); }
.trainhu3d__marker-toggle-text { font-size: 11px; font-weight: 800; line-height: 1; }
.trainhu3d__marker-toggle input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.trainhu3d__marker-toggle-track { position: relative; display: block; width: 38px; height: 22px; border: 1px solid color-mix(in srgb, var(--cyan) 72%, #fff); border-radius: 999px; background: var(--cyan); box-shadow: inset 0 1px 3px rgba(0,0,0,.2); transition: background .18s ease, border-color .18s ease; }
.trainhu3d__marker-toggle-track i { position: absolute; top: 3px; left: 18px; display: block; width: 14px; height: 14px; border-radius: 50%; background: #fffaf0; box-shadow: 0 2px 5px rgba(0,0,0,.35); transition: left .18s ease; }
.trainhu3d__marker-toggle input:focus-visible + .trainhu3d__marker-toggle-track { outline: 2px solid #fff; outline-offset: 2px; }
.trainhu3d__marker-toggle.is-off .trainhu3d__marker-toggle-track { border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.12); }
.trainhu3d__marker-toggle.is-off .trainhu3d__marker-toggle-track i { left: 4px; background: #c8c1b7; }
.trainhu3d__reset { position: absolute; z-index: 3; right: 22px; bottom: 22px; }

/* Választható teljes felületi témák. Az aranybarna az alapértelmezett. */
.trainhu3d[data-theme="blue"] {
    --navy: #071824; --panel: #0c2230; --line: rgba(255,255,255,.13);
    --cyan: #20c7e8; --text: #f4f8fa; --muted: #9fb0ba;
    --theme-panel-top: #102b3b; --theme-panel-bottom: #071824; --theme-control: #102b3b;
    --theme-button-top: #16384a; --theme-button-bottom: #102b3b; --theme-ink: #06131b;
    --theme-accent-light: #66e4f8; --theme-accent-end: #12afd1; --theme-icon: #082533;
    --theme-stage-1: #17465a; --theme-stage-2: #0a2635; --theme-stage-3: #06131c;
    --theme-glass: rgba(4,18,27,.78); --theme-overlay: rgba(2,10,15,.78);
}
.trainhu3d[data-theme="forest"] {
    --navy: #0b1912; --panel: #14271e; --line: rgba(199,171,107,.22);
    --cyan: #c6a45d; --text: #f7f3e8; --muted: #afbdaf;
    --theme-panel-top: #1c3529; --theme-panel-bottom: #0d1d16; --theme-control: #203a2d;
    --theme-button-top: #294536; --theme-button-bottom: #1b3327; --theme-ink: #10180f;
    --theme-accent-light: #e1ca87; --theme-accent-end: #8d7134; --theme-icon: #203526;
    --theme-stage-1: #355b45; --theme-stage-2: #1c382b; --theme-stage-3: #0b1b13;
    --theme-glass: rgba(18,39,29,.84); --theme-overlay: rgba(8,20,14,.82);
}
.trainhu3d[data-theme="blue"] .trainhu3d__panel,
.trainhu3d[data-theme="forest"] .trainhu3d__panel { background: linear-gradient(180deg, var(--theme-panel-top), var(--panel) 46%, var(--theme-panel-bottom)); scrollbar-color: color-mix(in srgb, var(--cyan) 60%, transparent) rgba(255,255,255,.05); }
.trainhu3d[data-theme="blue"] .trainhu3d__panel::-webkit-scrollbar-thumb,
.trainhu3d[data-theme="forest"] .trainhu3d__panel::-webkit-scrollbar-thumb { background: var(--cyan); }
.trainhu3d[data-theme="blue"] .trainhu3d__eyebrow,
.trainhu3d[data-theme="forest"] .trainhu3d__eyebrow { color: var(--theme-accent-light); text-shadow: 0 4px 18px color-mix(in srgb, var(--cyan) 24%, transparent); }
.trainhu3d[data-theme="blue"] select, .trainhu3d[data-theme="blue"] input[type="color"],
.trainhu3d[data-theme="forest"] select, .trainhu3d[data-theme="forest"] input[type="color"],
.trainhu3d[data-theme="blue"] .trainhu3d__quote input, .trainhu3d[data-theme="blue"] .trainhu3d__quote textarea,
.trainhu3d[data-theme="forest"] .trainhu3d__quote input, .trainhu3d[data-theme="forest"] .trainhu3d__quote textarea { background: var(--theme-control); }
.trainhu3d[data-theme="blue"] button, .trainhu3d[data-theme="forest"] button { background: linear-gradient(180deg, var(--theme-button-top), var(--theme-button-bottom)); }
.trainhu3d[data-theme="blue"] button:hover, .trainhu3d[data-theme="blue"] button[aria-pressed="true"],
.trainhu3d[data-theme="forest"] button:hover, .trainhu3d[data-theme="forest"] button[aria-pressed="true"] { color: var(--theme-ink); background: linear-gradient(135deg, var(--theme-accent-light), var(--cyan)); }
.trainhu3d[data-theme="blue"] .trainhu3d__opening-row.is-selected,
.trainhu3d[data-theme="forest"] .trainhu3d__opening-row.is-selected { background: color-mix(in srgb, var(--cyan) 14%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--cyan) 16%, transparent); }
.trainhu3d[data-theme="blue"] .trainhu3d__quote-open,
.trainhu3d[data-theme="forest"] .trainhu3d__quote-open { color: var(--theme-ink); background: linear-gradient(135deg, var(--theme-accent-light), var(--cyan) 58%, var(--theme-accent-end)); }
.trainhu3d[data-theme="blue"] .trainhu3d__quote-icon,
.trainhu3d[data-theme="forest"] .trainhu3d__quote-icon { background: var(--theme-icon); }
.trainhu3d[data-theme="blue"] .trainhu3d__quote-icon svg,
.trainhu3d[data-theme="forest"] .trainhu3d__quote-icon svg { stroke: var(--theme-accent-light); }
.trainhu3d[data-theme="blue"] .trainhu3d__stage,
.trainhu3d[data-theme="forest"] .trainhu3d__stage { background: radial-gradient(circle at 50% 35%, var(--theme-stage-1), var(--theme-stage-2) 42%, var(--theme-stage-3) 100%); }
.trainhu3d[data-theme="blue"] .trainhu3d__topbar > div, .trainhu3d[data-theme="blue"] .trainhu3d__hint, .trainhu3d[data-theme="blue"] .trainhu3d__marker-toggle,
.trainhu3d[data-theme="forest"] .trainhu3d__topbar > div, .trainhu3d[data-theme="forest"] .trainhu3d__hint, .trainhu3d[data-theme="forest"] .trainhu3d__marker-toggle { background: var(--theme-glass); }
.trainhu3d[data-theme="blue"] .trainhu3d__modal-backdrop,
.trainhu3d[data-theme="forest"] .trainhu3d__modal-backdrop { background: var(--theme-overlay); }
.trainhu3d[data-theme="blue"] .trainhu3d__quote-submit,
.trainhu3d[data-theme="forest"] .trainhu3d__quote-submit { color: var(--theme-ink) !important; border-color: var(--cyan) !important; background: linear-gradient(135deg, var(--theme-accent-light), var(--cyan)) !important; }

.trainhu3d__panel [hidden] { display: none !important; }
.trainhu3d__mobile-modes { display: none; }
.trainhu3d__opening-move { padding: 8px !important; font-size: 11px !important; min-width: 70px; }
@media (max-width: 900px) {
    .trainhu3d__mobile-modes { display: flex; position: absolute; top: 12px; right: 12px; gap: 5px; z-index: 8; }
    .trainhu3d__mobile-modes button { min-height: 40px; padding: 7px 9px; background: var(--theme-ink, #102b38); color: #fff; border: 1px solid var(--cyan); border-radius: 9px; font-size: 12px; }
    .trainhu3d__mobile-modes button[aria-pressed="true"] { background: var(--cyan); color: #09202a; }
    .trainhu3d.is-presentation { grid-template-rows: minmax(110px, 22%) minmax(320px, 78%); }
    .trainhu3d__topbar { top: 64px !important; }
    .trainhu3d { grid-template-columns: 1fr; grid-template-rows: minmax(300px, 48%) minmax(320px, 52%); left: 0; width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; }
    body.admin-bar .trainhu3d { height: calc(100vh - 32px); height: calc(100dvh - 32px); }
    .trainhu3d__panel { max-height: none; overflow-y: auto; }
    .trainhu3d__stage { min-height: 320px; }
}

@media (max-width: 782px) {
    body.admin-bar .trainhu3d { top: 46px; height: calc(100vh - 46px); height: calc(100dvh - 46px); }
    .trainhu3d__topbar > .trainhu3d__price, .trainhu3d__hint { display: none; }
}

@media (max-width: 520px) {
    .trainhu3d__panel { padding: 20px; }
    .trainhu3d__grid2 { grid-template-columns: 1fr; }
    .trainhu3d__topbar { top: 12px; right: 12px; left: 12px; }
    .trainhu3d__topbar strong { font-size: 14px; }
    .trainhu3d__hint { right: 12px; bottom: 66px; left: 12px; transform: none; text-align: center; white-space: normal; }
    .trainhu3d__reset { right: 12px; bottom: 12px; }
    .trainhu3d__marker-toggle { bottom: 12px; left: 12px; }
    .trainhu3d__view-switch { top: 74px; left: 12px; }
    .trainhu3d__floorplan { padding: 74px 12px 18px; }
    .trainhu3d__modal { padding: 10px; }
    .trainhu3d__modal-dialog { max-height: calc(100vh - 20px); padding: 22px 18px; border-radius: 15px; }
}