.blx-app { --blx-brand: #d6455d; --blx-ink: #1f2328; --blx-mute: #667085; --blx-line: #e3e6ea; --blx-bg: #f6f7f9;
	font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--blx-ink); max-width: 1280px; margin: 0 auto; }
.blx-app *, .blx-app *::before, .blx-app *::after { box-sizing: border-box; }
.blx-app h2 { font-size: 26px; margin: 8px 0 6px; font-weight: 600; letter-spacing: -.01em; }
.blx-app h3 { font-size: 15px; margin: 22px 0 6px; font-weight: 600; }
.blx-lead { color: var(--blx-mute); max-width: 62ch; margin: 0 0 18px; }
.blx-small { font-size: 13px; color: var(--blx-mute); margin: 4px 0 8px; }

.blx-steps { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0 0 18px; flex-wrap: wrap; counter-reset: s; }
.blx-steps li { counter-increment: s; font-size: 13px; padding: 5px 12px; border-radius: 999px; background: var(--blx-bg); color: var(--blx-mute); }
.blx-steps li::before { content: counter(s) ". "; }
.blx-steps li.on { background: var(--blx-brand); color: #fff; }
.blx-steps li.done { color: var(--blx-ink); }

.blx-drop { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 54px 20px; border: 2px dashed #c9ced6; border-radius: 14px; background: var(--blx-bg); cursor: pointer; text-align: center; transition: border-color .15s, background .15s; }
.blx-drop:hover, .blx-drop.over, .blx-drop:focus-within { border-color: var(--blx-brand); background: #fff; }
.blx-drop span { color: var(--blx-mute); font-size: 13px; }
.blx-file { position: absolute; width: 1px; height: 1px; opacity: 0; }

.blx-note { padding: 9px 12px; border-radius: 8px; background: var(--blx-bg); font-size: 13px; margin: 8px 0; }
.blx-note.err { background: #fdecee; color: #8a1c2b; }
.blx-note.warn { background: #fff5e3; color: #7a4a00; }

.blx-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 22px; align-items: start; }
@media (max-width: 960px) { .blx-split { grid-template-columns: 1fr; } }
.blx-planwrap { position: sticky; top: 12px; border: 1px solid var(--blx-line); border-radius: 12px; background: #2f3237; overflow: hidden; }
@media (max-width: 960px) { .blx-planwrap { position: static; } }
.blx-plan { display: block; width: 100%; height: auto; max-height: 78vh; }
.blx-plan .ul { stroke: #8b929c; stroke-width: 1; fill: none; opacity: .55; }
.blx-plan .room { fill: rgba(255,255,255,.04); stroke: #aab; stroke-width: 1; stroke-dasharray: 4 3; cursor: pointer; }
.blx-plan .room:hover { fill: rgba(214,69,93,.25); }
.blx-plan .room.on { fill: rgba(255,255,255,.14); stroke: #fff; stroke-width: 1.6; stroke-dasharray: none; }
.blx-plan .sym { fill: #9aa0a8; opacity: .8; }
.blx-plan .sym.mapped { fill: var(--blx-brand); opacity: 1; stroke: #fff; stroke-width: .4; }
.blx-plan .heat { pointer-events: none; }

.blx-side { min-width: 0; }
.blx-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.blx-tbl th { text-align: left; font-weight: 600; color: var(--blx-mute); padding: 6px 8px; border-bottom: 1px solid var(--blx-line); white-space: nowrap; }
.blx-tbl td { padding: 6px 8px; border-bottom: 1px solid var(--blx-line); vertical-align: middle; }
.blx-tbl tr.hint td:first-child { box-shadow: inset 3px 0 var(--blx-brand); }
.blx-tbl input[type=text], .blx-tbl select { width: 100%; min-width: 110px; }
.blx-tbl .sug { white-space: nowrap; }
.blx-tbl .sug select { max-width: 130px; }
.scroll { overflow-x: auto; max-height: 340px; overflow-y: auto; border: 1px solid var(--blx-line); border-radius: 10px; }
.blx-app input, .blx-app select { font: inherit; padding: 5px 8px; border: 1px solid #cfd4db; border-radius: 6px; background: #fff; color: var(--blx-ink); }
.blx-app input.num { width: 74px; }
.blx-app label.inline { display: inline-flex; gap: 8px; align-items: center; }
.blx-adv { margin: 14px 0; }
.blx-adv summary { cursor: pointer; font-weight: 600; }
.blx-adv .grid, .blx-proj { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.blx-adv label, .blx-proj label { display: flex; flex-direction: column; font-size: 13px; color: var(--blx-mute); gap: 3px; }
.blx-proj { margin-bottom: 14px; }

.blx-btn { background: var(--blx-brand); color: #fff; border: 0; border-radius: 8px; padding: 10px 18px; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-block; }
.blx-btn:hover { filter: brightness(.94); }
.blx-btn:disabled { opacity: .55; cursor: wait; }
.blx-btn.small { padding: 4px 10px; font-size: 12px; }
.blx-btn.ghost { background: transparent; color: var(--blx-ink); border: 1px solid #cfd4db; }
.blx-btn:focus-visible, .blx-app input:focus-visible, .blx-app select:focus-visible { outline: 2px solid var(--blx-brand); outline-offset: 2px; }
.blx-actions { display: flex; gap: 10px; margin: 14px 0 6px; flex-wrap: wrap; }

.blx-results { margin-top: 26px; padding-top: 6px; border-top: 2px solid var(--blx-brand); }
.badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; letter-spacing: .02em; }
.badge.ok { background: #e3f6e8; color: #17692f; }
.badge.bad { background: #fdecee; color: #8a1c2b; }
.badge.warn { background: #fff0d6; color: #7a4a00; }

.blx-tabs { display: flex; gap: 6px; margin: 0 0 16px; flex-wrap: wrap; }
.blx-tab { border: 1px solid #cfd4db; background: #fff; border-radius: 8px; padding: 8px 16px; font: inherit; font-weight: 600; cursor: pointer; color: var(--blx-ink); }
.blx-tab.on { background: var(--blx-ink); color: #fff; border-color: var(--blx-ink); }
.blx-tab:focus-visible { outline: 2px solid var(--blx-brand); outline-offset: 2px; }
.blx-side .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 4px 0; }
.blx-side .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0; }
.blx-side .grid label { display: flex; flex-direction: column; font-size: 13px; color: var(--blx-mute); gap: 3px; }
.blx-side label.chk { flex-direction: row; align-items: center; gap: 6px; }
.blx-sug { border: 1px solid var(--blx-line); border-radius: 10px; padding: 10px 12px; margin: 8px 0; }
.blx-sug .blx-btn { margin-top: 6px; }
.blx-plan .lum { fill: #fff; stroke: var(--blx-brand); stroke-width: .6; }

/* 3D room view */
.blx-left { align-self: start; position: sticky; top: 12px; display: flex; flex-direction: column; gap: 12px; }
.blx-left .blx-planwrap { position: static; }
.blx-left .blx-plan { max-height: 44vh; }
/* Road / Sports: keep the larger plan */
.blx-left.outdoor .blx-plan { max-height: 70vh; }
@media (max-width: 960px) { .blx-left { position: static; } .blx-left .blx-plan { max-height: none; } }
.blx-3d { border: 1px solid var(--blx-line); border-radius: 12px; padding: 10px 12px 6px; background: #fff; }
.blx-3dbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 8px; }
.blx-3dbar select { max-width: 100%; font-size: 13px; padding: 4px 6px; }
.blx-3dbar label.chk { display: inline-flex; gap: 4px; align-items: center; font-size: 13px; color: var(--blx-ink); }
.blx-3dwrap { border-radius: 10px; overflow: hidden; background: #3a3d42; }
.blx-3dc { display: block; width: 100%; height: 280px; cursor: grab; touch-action: none; outline-offset: -2px; }
.blx-3dc.drag { cursor: grabbing; }
.blx-3dc:focus-visible { outline: 2px solid var(--blx-brand); }

/* manual editing */
.blx-placebar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.blx-placebar select { font-size: 13px; padding: 4px 6px; max-width: 100%; }
.blx-plan.placing { cursor: crosshair; }
.blx-plan .room.manual { stroke-dasharray: 6 4; }
.blx-plan .sym.extra.manual { fill: #d6455d; stroke: #fff; }
.blx-editpanel { background: #f7f8fa; border: 1px solid var(--blx-line); border-radius: 10px; padding: 10px 12px; margin: 10px 0; }
.blx-editpanel h4 { margin: 0 0 4px; font-size: 14px; }
.blx-roomedit .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 12px; margin: 6px 0 10px; }
.blx-roomedit label { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--blx-muted, #5a6270); }
.blx-roomedit input.num { width: 100%; box-sizing: border-box; }
.blx-roomedit .acts { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.blx-roomedit label.chk { flex-direction: row; align-items: center; gap: 6px; color: inherit; font-size: 13px; }
.blx-addroom { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 8px 0 4px; }
.blx-addroom input[type=text] { min-width: 130px; flex: 1; }
.blx-addroom input.num { width: 64px; }

/* DWG conversion */
.blx-conv { margin-top: 14px; }
.blx-conv .blx-file { display: none; }
.blx-conv label.blx-btn { display: inline-block; cursor: pointer; }
.blx-dxfdl { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 10px; }

.blx-plan.placing { touch-action: none; }
.blx-plan.placing .sym.extra { cursor: grab; }
.blx-dslist { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow: auto; margin: 8px 0; }
.blx-dslist label { font-size: 13px; }

/* data sheet template form */
.blx-dsform { display: grid; gap: 12px; margin: 14px 0; }
.blx-dsf { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.blx-dsf input[type=text], .blx-ta { width: 100%; box-sizing: border-box; font: 12px/1.4 ui-monospace, Menlo, Consolas, monospace; padding: 6px 8px; }
.blx-dsbtn { margin: 10px 0 4px; }