@charset "UTF-8";
/* TrilùTable 6.0 · Studio della sala (prefix fe-), «Scuro premium». Plan graphics and tokens: floor-live.css (fp-). */

.fe-root { display: flex; flex-direction: column; gap: 14px; min-width: 0; color: var(--fp-text-1); font-size: 14px; line-height: 20px; }
.fe-root h1, .fe-root h2, .fe-root h3, .fe-root p { margin: 0; }
.fe-root button { font: inherit; }
.fe-root .num { font-variant-numeric: tabular-nums; }
.fe-danger { color: var(--fp-red) !important; }
.fe-danger:hover:not(:disabled) { background: var(--red-soft, rgba(240, 145, 138, .1)) !important; }
.fe-muted { font-size: 13px; color: var(--fp-text-3); }
.fe-ok { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--fp-green); }

/* ---------- Header ---------- */
.fe-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
.fe-head-copy { min-width: 0; }
.fe-title { font-size: 24px; line-height: 30px; font-weight: 600; letter-spacing: -.02em; }
.fe-subtitle { margin-top: 4px !important; font-size: 14px; color: var(--fp-text-2); }
.fe-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fe-save-state { display: inline-flex; align-items: center; gap: 7px; margin-right: 6px; font-size: 13px; color: var(--fp-text-3); white-space: nowrap; }
.fe-save-state i { width: 6px; height: 6px; border-radius: 50%; background: var(--fp-green); box-shadow: 0 0 0 3px rgba(108, 212, 158, .15); }
.fe-save-state.is-dirty { color: var(--fp-amber); }
.fe-save-state.is-dirty i { background: var(--fp-amber); box-shadow: 0 0 0 3px rgba(232, 182, 90, .15); }
.fe-save-state .spinner { --spinner-size: 14px; }
.fe-banners { display: flex; flex-direction: column; gap: 8px; }
.fe-banners[hidden] { display: none; }

/* ---------- Rooms ---------- */
.fe-roombar { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; min-width: 0; }
.fe-room-tabs { max-width: 100%; }
.fe-room-tabs .count { height: 18px; min-width: 18px; padding: 0 5px; line-height: 18px; font-size: 11.5px; }
.fe-new-tag { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 5px; font-size: 11.5px; font-weight: 500; color: var(--fp-accent); background: var(--fp-accent-soft); }
.fe-room-actions { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }

/* ---------- Body: tools · canvas · inspector ---------- */
.fe-body { display: grid; grid-template-columns: 76px minmax(0, 1fr) clamp(276px, 23vw, 320px); gap: 12px; align-items: start; }
.fe-tools { position: sticky; top: calc(var(--sticky-top, 64px) + 12px); z-index: 4; display: flex; flex-direction: column; gap: 2px; padding: 6px; border-radius: 12px; background: var(--fp-bg-2); box-shadow: inset 0 0 0 1px var(--fp-line), var(--highlight, inset 0 1px 0 rgba(255, 255, 255, .035)), 0 1px 2px rgba(0, 0, 0, .25); }
.fe-tool { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 64px; min-height: 54px; padding: 6px 2px; border: 0; border-radius: 8px; background: transparent; color: var(--fp-text-2); cursor: pointer; transition: background-color var(--fp-fast) var(--fp-ease), color var(--fp-fast) var(--fp-ease); }
.fe-tool:hover:not(:disabled) { color: var(--fp-text-1); background: rgba(255, 255, 255, .045); }
.fe-tool.is-active { color: var(--fp-text-1); background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.fe-tool.is-active::before { content: ""; position: absolute; left: -6px; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--fp-accent); }
.fe-tool-label { font-size: 11.5px; line-height: 14px; font-weight: 500; white-space: nowrap; }
.fe-tool-sep { height: 1px; margin: 4px 6px; background: var(--fp-line); }
.fe-tool-options { position: absolute; left: calc(100% + 8px); top: 6px; z-index: 6; display: flex; flex-direction: column; gap: 2px; width: 196px; padding: 6px; border-radius: 10px; background: var(--fp-bg-2); box-shadow: var(--shadow-pop, 0 18px 60px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .11)); }
.fe-tool-options.is-wide { width: 264px; gap: 10px; padding: 12px; }
.fe-tool-options small { font-size: 12.5px; line-height: 17px; color: var(--fp-text-3); }
.fe-tool-option { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: var(--fp-text-2); font-size: 13.5px; text-align: left; cursor: pointer; }
.fe-tool-option:hover { color: var(--fp-text-1); background: rgba(255, 255, 255, .05); }
.fe-tool-option.is-active { color: var(--fp-text-1); background: var(--fp-accent-soft); box-shadow: inset 0 0 0 1px var(--fp-accent-line); }
.fe-option-row { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--fp-text-2); }
.fe-tool-options .segmented { width: 100%; }
.fe-tool-options .segmented > * { flex: 1; justify-content: center; }

.fe-stage { position: relative; min-width: 0; display: flex; flex-direction: column; border-radius: 12px; background: var(--fp-bg-2); box-shadow: inset 0 0 0 1px var(--fp-line), var(--highlight, inset 0 1px 0 rgba(255, 255, 255, .035)), 0 1px 2px rgba(0, 0, 0, .25); overflow: hidden; }
.fe-canvas-bar { display: flex; align-items: center; gap: 2px 4px; min-height: 46px; padding: 5px 8px; border-bottom: 1px solid var(--fp-line-soft); flex-wrap: wrap; }
.fe-bar-group { display: flex; align-items: center; gap: 2px; }
.fe-bar-sep { width: 1px; height: 20px; margin: 0 4px; background: var(--fp-line); }
.fe-bar-spacer { flex: 1; }
.fe-canvas-bar .icon-btn { width: 32px; height: 32px; }
.fe-zoom-value { min-width: 52px; height: 32px; padding: 0 6px; border: 0; border-radius: 7px; background: transparent; color: var(--fp-text-2); font-size: 13px; font-weight: 500; cursor: pointer; }
.fe-zoom-value:hover { color: var(--fp-text-1); background: rgba(255, 255, 255, .05); }
.fe-ref-group .btn.is-on { color: var(--fp-text-1); }
.fe-ref-opacity { display: inline-flex; align-items: center; gap: 8px; margin-left: 6px; font-size: 12.5px; color: var(--fp-text-2); }
.fe-ref-opacity input { width: 110px; accent-color: var(--fp-accent); }
.fe-ref-opacity output { min-width: 34px; }
.fe-touch-only { display: none !important; }
@media (pointer: coarse) { .fe-touch-only { display: inline-grid !important; } }

.fe-canvas-wrap { position: relative; height: clamp(460px, calc(100dvh - 300px), 980px); background-color: var(--fp-stage); background-image: radial-gradient(rgba(255, 255, 255, .04) 1px, transparent 1.2px); background-size: 16px 16px; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.fe-canvas-wrap.is-file-over { box-shadow: inset 0 0 0 2px var(--fp-accent); }
.fe-svg { display: block; width: 100%; height: 100%; outline: none; cursor: default; }
.fe-svg:focus-visible { box-shadow: inset 0 0 0 2px var(--fp-accent-line); }
.fe-canvas-wrap[data-tool="wall"] .fe-svg, .fe-canvas-wrap[data-tool="area"] .fe-svg, .fe-canvas-wrap[data-tool="door"] .fe-svg, .fe-canvas-wrap[data-tool="window"] .fe-svg, .fe-canvas-wrap[data-tool="table"] .fe-svg, .fe-canvas-wrap[data-tool="text"] .fe-svg { cursor: crosshair; }
.fe-canvas-wrap[data-tool="pan"] .fe-svg, .fe-canvas-wrap.is-panning .fe-svg { cursor: grab; }
.fe-canvas-wrap[data-tool="number"] .fe-table { cursor: pointer; }
.fe-canvas-hint { position: absolute; left: 50%; top: 12px; z-index: 3; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; max-width: calc(100% - 24px); padding: 4px 4px 4px 12px; border-radius: 9px; background: rgba(22, 25, 29, .94); box-shadow: 0 0 0 1px var(--fp-line-strong), 0 8px 24px rgba(0, 0, 0, .4); font-size: 13px; color: var(--fp-text-1); pointer-events: auto; }
.fe-canvas-hint > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 4px 0; }
.fe-canvas-hint[hidden] { display: none; }
.fe-canvas-hint .icon-btn { width: 28px; height: 28px; }
.fe-statusbar { display: flex; align-items: center; gap: 4px 8px; min-height: 34px; padding: 0 12px; border-top: 1px solid var(--fp-line-soft); font-size: 12.5px; color: var(--fp-text-3); white-space: nowrap; overflow: hidden; }
.fe-statusbar .sep { color: var(--fp-text-4); }
.fe-status-hint { margin-left: auto; overflow: hidden; text-overflow: ellipsis; color: var(--fp-text-3); }

/* Empty canvas */
.fe-empty { position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%); width: min(460px, calc(100% - 32px)); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 28px 24px; border-radius: 14px; background: rgba(22, 25, 29, .96); box-shadow: 0 0 0 1px var(--fp-line-strong), 0 24px 60px rgba(0, 0, 0, .45); }
.fe-empty[hidden] { display: none; }
.fe-empty-icon { width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: 6px; border-radius: 11px; color: var(--fp-accent); background: var(--fp-accent-soft); box-shadow: inset 0 0 0 1px var(--fp-accent-line); }
.fe-empty h2 { font-size: 17px; line-height: 24px; font-weight: 600; }
.fe-empty p { font-size: 13.5px; color: var(--fp-text-2); }
.fe-empty-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.fe-empty small { font-size: 12.5px; color: var(--fp-text-3); }
.fe-empty-page { margin-top: 8px; }

/* ---------- Plan items in the editor ---------- */
.fe-item { cursor: move; }
.fe-canvas-wrap[data-tool]:not([data-tool="select"]) .fe-item { cursor: inherit; }
.fe-item.is-background { cursor: pointer; }
.fe-hit { fill: transparent; stroke: transparent; pointer-events: all; }
line.fe-hit { pointer-events: stroke; stroke-linecap: square; }
.fe-item:hover .fp-table-top { stroke: rgba(255, 255, 255, .42); }
.fe-item:hover .fp-wall-line { stroke: #C6CBD2; }
.fe-item.is-background:hover .fp-shape { stroke: rgba(255, 255, 255, .3); }
.fe-table.is-selected .fp-table-top { stroke: var(--fp-accent); stroke-width: 2px; fill: #2A2622; }
.fe-table.is-selected .fp-chair { stroke: rgba(255, 131, 63, .45); }
.fe-item.is-selected .fp-wall-line { stroke: #E4C3A9; }
.fe-item.is-selected .fp-shape { stroke: var(--fp-accent); stroke-dasharray: none; }
.fe-table.is-check .fp-table-top { stroke: var(--fp-amber); stroke-dasharray: 4 3; }
/* Elements recognised with little confidence: amber outline until confirmed (Studio and final summary). */
.fp-el.fe-item.is-check .fp-shape:not(.fp-shape-pattern) { stroke: var(--fp-amber); stroke-dasharray: 6 4; }
.fp-el.fe-item.is-check .fp-wall-line { stroke: rgba(232, 182, 90, .78); }
.fp-el.fe-item.is-check .fp-door-leaf, .fp-el.fe-item.is-check .fp-door-arc, .fp-el.fe-item.is-check .fp-window-glass { stroke: var(--fp-amber); }
.fe-table.is-unavailable .fp-table-top { fill: url(#fe-unavailable); stroke-dasharray: 2 3; }
.fe-table.is-unavailable .fp-table-label { fill: var(--fp-text-3); }
.fe-ref image { image-rendering: auto; }
.fe-grid-minor { fill: none; stroke: rgba(255, 255, 255, .04); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.fe-grid-major { fill: none; stroke: rgba(255, 255, 255, .075); stroke-width: 1px; vector-effect: non-scaling-stroke; }

/* Overlay */
.fe-overlay { pointer-events: none; }
.fe-overlay .fe-handle { pointer-events: all; }
.fe-sel-box, .fe-sel-line { fill: none; stroke: var(--fp-accent); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.fe-sel-line { stroke-dasharray: 5 4; }
.fe-sel-item { fill: rgba(255, 131, 63, .05); stroke: rgba(255, 131, 63, .7); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.fe-sel-group { fill: none; stroke: var(--fp-accent); stroke-width: 1px; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.fe-handle { fill: #F4F5F7; stroke: var(--fp-accent); stroke-width: 1.5px; vector-effect: non-scaling-stroke; cursor: nwse-resize; }
.fe-handle[data-handle="n"], .fe-handle[data-handle="s"] { cursor: ns-resize; }
.fe-handle[data-handle="e"], .fe-handle[data-handle="w"] { cursor: ew-resize; }
.fe-handle[data-handle="ne"], .fe-handle[data-handle="sw"] { cursor: nesw-resize; }
.fe-handle[data-handle="p1"], .fe-handle[data-handle="p2"], .fe-handle[data-handle="vertex"] { cursor: move; }
.fe-rotate { fill: var(--fp-accent); stroke: #F4F5F7; cursor: grab; }
.fe-rotate-line { stroke: var(--fp-accent); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.fe-guide { stroke: #FF5FA2; stroke-width: 1px; vector-effect: non-scaling-stroke; stroke-dasharray: 4 3; }
.fe-marquee { fill: rgba(255, 131, 63, .07); stroke: var(--fp-accent); stroke-width: 1px; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.fe-draft-wall { stroke: rgba(196, 201, 209, .92); stroke-linecap: square; fill: none; }
.fe-draft-wall.is-preview { stroke: rgba(255, 131, 63, .55); }
.fe-draft-shape { fill: rgba(255, 131, 63, .08); stroke: var(--fp-accent); stroke-width: 1.5px; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
polyline.fe-draft-shape { fill: rgba(255, 131, 63, .06); }
.fe-draft-point { fill: #F4F5F7; stroke: var(--fp-accent); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.fe-magnet { fill: none; stroke: var(--fp-green); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.fe-measure { fill: var(--fp-text-1); font-weight: 600; paint-order: stroke; stroke: rgba(11, 12, 14, .9); stroke-width: 3px; stroke-linejoin: round; font-variant-numeric: tabular-nums; }
.fe-uncertain rect:first-child { stroke: none; }
.fe-check-line { stroke: rgba(232, 182, 90, .28); stroke-width: 2; }
.fe-uncertain-edge, .fe-check-edge { fill: none; stroke: var(--fp-amber); stroke-width: 1.5px; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }
.fe-check-edge { stroke-dasharray: 3 3; }
.fe-mark-dot { fill: var(--fp-amber); stroke: var(--fp-bg-2); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.fe-mark-text { fill: #1A1206; font-weight: 700; }
.fe-uncertain.is-flash .fe-uncertain-edge, .fe-check-mark.is-flash .fe-check-edge { animation: fe-flash 520ms var(--fp-ease) 3; }
@keyframes fe-flash { 50% { stroke: #FFE2A8; stroke-width: 3px; } }

/* Inline label editor */
.fe-inline-editor { position: absolute; z-index: 5; width: 164px; padding: 8px; border-radius: 10px; background: #1C1F24; box-shadow: var(--shadow-pop, 0 18px 60px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .11)); }
.fe-inline-editor .input { width: 100%; font-weight: 600; text-align: center; }
.fe-inline-editor small { display: block; margin-top: 6px; font-size: 11.5px; line-height: 15px; color: var(--fp-text-3); text-align: center; }
.fe-inline-error { margin: 6px 0 0 !important; font-size: 12px; line-height: 16px; color: var(--fp-amber); text-align: center; }

/* ---------- Inspector ---------- */
.fe-inspector { position: sticky; top: calc(var(--sticky-top, 64px) + 12px); max-height: calc(100dvh - var(--sticky-top, 64px) - 24px); overflow-y: auto; overscroll-behavior: contain; padding: 14px 16px 16px; border-radius: 12px; background: var(--fp-bg-2); box-shadow: inset 0 0 0 1px var(--fp-line), var(--highlight, inset 0 1px 0 rgba(255, 255, 255, .035)), 0 1px 2px rgba(0, 0, 0, .25); scrollbar-width: thin; }
.fe-inspector-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; margin-bottom: 12px; }
.fe-kind { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.fe-kind .icon { color: var(--fp-text-3); }
.fe-fields .field { margin-bottom: 14px; }
.fe-fields .field-row { gap: 0 10px; }
.fe-tight { margin-bottom: 4px !important; }
.fe-inline { display: flex; gap: 6px; }
.fe-inline .input { flex: 1; font-weight: 600; }
.fe-inline .btn-icon { --btn-h: 36px; }
.fe-unit { position: relative; }
.fe-unit .input { padding-right: 26px; }
.fe-unit span { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--fp-text-3); pointer-events: none; }
.fe-shape-picker { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.fe-shape-picker button { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 58px; padding: 7px 2px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px var(--fp-line); color: var(--fp-text-2); cursor: pointer; transition: background-color var(--fp-fast) var(--fp-ease), color var(--fp-fast) var(--fp-ease), box-shadow var(--fp-fast) var(--fp-ease); }
.fe-shape-picker button span { font-size: 11px; line-height: 13px; max-width: 100%; text-align: center; }
.fe-shape-picker button:hover { color: var(--fp-text-1); background: rgba(255, 255, 255, .055); }
.fe-shape-picker button.is-active { color: var(--fp-text-1); background: var(--fp-accent-soft); box-shadow: inset 0 0 0 1px var(--fp-accent-line); }
.fe-range { width: 100%; accent-color: var(--fp-accent); }
.fe-fields label output, .fe-section label output { float: right; color: var(--fp-text-1); font-weight: 500; }
.fe-section { padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--fp-line); }
.fe-section-title { display: flex; align-items: center; gap: 8px; margin-bottom: 10px !important; font-size: 13.5px; font-weight: 600; color: var(--fp-text-1); }
.fe-section-title .icon { color: var(--fp-text-3); }
.fe-section .count { margin-left: 2px; }
.fe-full { display: flex; width: 100%; }
.fe-full > * { flex: 1; justify-content: center; }
.fe-sides { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 10px 0 6px; }
.fe-sides label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--fp-text-3); }
.fe-sides .input { text-align: center; padding: 0 4px; }
.fe-sides-sum { margin-bottom: 10px !important; font-size: 12.5px; color: var(--fp-text-3); }
.fe-sides-sum.is-error { color: var(--fp-red); }
.fe-section .field { margin-bottom: 12px; }
.fe-section .segmented + .field { margin-top: 12px; }
.fe-actions { display: flex; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--fp-line); }
.fe-actions > .btn { flex: 1; }
.fe-actions.is-left { justify-content: flex-start; margin-top: 4px; padding-top: 0; border-top: 0; }
.fe-actions.is-left > .btn { flex: 0 0 auto; }
.fe-actions.is-wrap { flex-wrap: wrap; }
.fe-actions.is-stack { flex-direction: column; }
.fe-check-banner { margin-bottom: 12px; flex-wrap: wrap; }
.fe-check-banner .banner-actions { margin-left: 0; }
.fe-note-warn { display: flex; align-items: flex-start; gap: 6px; margin: 6px 0 0 !important; font-size: 12.5px; line-height: 17px; color: var(--fp-amber); }
.fe-note-warn svg { flex: none; margin-top: 1px; }
.fe-swap { margin-left: 4px; color: var(--fp-text-1); text-decoration: underline; text-underline-offset: 3px; }
.fe-flip { margin-bottom: 14px; }
.fe-room-card { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 10px; background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px var(--fp-line); }
.fe-room-card strong { font-size: 15px; font-weight: 600; }
.fe-room-card span { font-size: 13px; color: var(--fp-text-2); }
.fe-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 10px 0 0; }
.fe-facts div { padding: 8px 10px; border-radius: 8px; background: rgba(255, 255, 255, .02); box-shadow: inset 0 0 0 1px var(--fp-line-soft); }
.fe-facts dt { font-size: 12px; line-height: 16px; color: var(--fp-text-3); }
.fe-facts dd { margin: 2px 0 0; font-size: 17px; font-weight: 600; }
.fe-keys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; margin: 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--fp-text-2); }
.fe-keys li { display: flex; align-items: center; gap: 4px; }
.fe-keys .kbd { margin-right: 2px; }
.fe-align-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-bottom: 6px; }
.fe-align-grid.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fe-align-grid .btn { --btn-h: 32px; padding: 0 6px; gap: 5px; font-size: 12px; }
.fe-align-grid .btn span { overflow: hidden; text-overflow: ellipsis; }

/* Narrow inspectors (laptops with the sidebar, tablets): the shape picker wraps instead of clipping its labels. */
.fe-inspector { container-type: inline-size; container-name: fe-inspector; }
@container fe-inspector (max-width: 270px) {
  .fe-shape-picker { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fe-align-grid .btn { padding: 0 4px; gap: 4px; }
  .fe-facts dd { font-size: 16px; }
}

/* Narrow canvases (tablets with the sidebar): the canvas bar stays on one line. */
.fe-stage { container-type: inline-size; container-name: fe-stage; }
@container fe-stage (max-width: 600px) {
  .fe-ref-group .btn > span { display: none; }
  .fe-zoom-group .icon-btn[data-fe="zoom-fit"] { display: none; }
  .fe-canvas-bar .fe-bar-sep { margin: 0 2px; }
  .fe-ref-opacity input { width: 72px; }
}

/* Review */
.fe-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; }
.fe-kpis > div { padding: 8px 10px; border-radius: 8px; background: rgba(255, 255, 255, .025); box-shadow: inset 0 0 0 1px var(--fp-line-soft); }
.fe-kpis span { display: block; font-size: 11.5px; line-height: 15px; color: var(--fp-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fe-kpis b { display: block; margin-top: 2px; font-size: 19px; line-height: 24px; font-weight: 600; }
.fe-kpis .is-warn b { color: var(--fp-amber); }
.fe-kpis.is-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fe-kpis.is-summary b { font-size: 24px; line-height: 30px; }
.fe-warnings { display: grid; gap: 6px; margin: 0 0 4px; padding: 0; list-style: none; }
.fe-warnings li { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 18px; color: var(--fp-text-2); }
.fe-warnings svg { margin-top: 2px; flex: none; color: var(--fp-amber); }
.fe-check-list { display: grid; gap: 4px; margin: 0 0 10px; padding: 0; list-style: none; }
.fe-check-list li { display: flex; align-items: center; gap: 4px; border-radius: 8px; background: rgba(255, 255, 255, .02); box-shadow: inset 0 0 0 1px var(--fp-line-soft); }
.fe-check-row { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 10px; padding: 8px 6px 8px 10px; border: 0; border-radius: 8px; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.fe-check-row:hover { background: rgba(255, 255, 255, .035); }
.fe-check-icon { flex: none; margin-top: 1px; color: var(--fp-amber); }
.fe-check-text { display: flex; flex-direction: column; min-width: 0; }
.fe-check-text b { font-size: 13.5px; font-weight: 500; line-height: 18px; }
.fe-check-text small { font-size: 12.5px; line-height: 17px; color: var(--fp-text-3); }
.fe-check-list .icon-btn { margin-right: 4px; flex: none; }
.fe-room-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.fe-room-row { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .02); box-shadow: inset 0 0 0 1px var(--fp-line-soft); color: inherit; text-align: left; cursor: pointer; }
.fe-room-row.is-current { box-shadow: inset 0 0 0 1px var(--fp-accent-line); }
.fe-room-row span:first-child { display: flex; flex-direction: column; min-width: 0; }
.fe-room-row b { font-weight: 500; }
.fe-room-row small { font-size: 12.5px; color: var(--fp-text-3); }

/* Numbering */
.fe-number-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.fe-number-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr) 40px 30px; align-items: center; gap: 6px; padding: 3px 4px 3px 8px; border-radius: 8px; }
.fe-number-list li.is-selected { background: var(--fp-accent-soft); }
.fe-number-list li.is-error .input { border-color: var(--red-line, rgba(240, 145, 138, .26)); color: var(--fp-red); }
.fe-number-list .input { font-weight: 600; }
.fe-number-shape { color: var(--fp-text-3); display: grid; place-items: center; }
.fe-number-seats { font-size: 12.5px; color: var(--fp-text-3); text-align: right; }
.fe-number-list .icon-btn { width: 30px; height: 30px; }

/* ---------- Dialogs: import wizard and summary (attached to <body>) ---------- */
.fe-import { width: min(980px, calc(100% - 32px)); }
.fe-import-steps { padding: 12px 24px 0; }
.fe-import-steps .step { padding: 6px 8px; }
.fe-import-body { min-height: 300px; }
.fe-drop { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 36px 20px; border-radius: 12px; border: 1.5px dashed rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .02); text-align: center; cursor: pointer; transition: border-color var(--fp-fast) var(--fp-ease), background-color var(--fp-fast) var(--fp-ease); }
.fe-drop:hover, .fe-drop.is-over, .fe-drop:focus-visible { border-color: var(--fp-accent-line); background: var(--fp-accent-soft); outline: none; }
.fe-drop-icon { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 4px; border-radius: 12px; color: var(--fp-accent); background: var(--fp-accent-soft); box-shadow: inset 0 0 0 1px var(--fp-accent-line); }
.fe-drop strong { font-size: 15.5px; font-weight: 600; }
.fe-drop > span:not(.fe-drop-icon) { font-size: 13.5px; color: var(--fp-text-2); }
.fe-drop-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.fe-camera-btn { display: none; }
@media (pointer: coarse) { .fe-camera-btn { display: inline-flex; } }
.fe-import-tips { display: grid; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.fe-import-tips li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--fp-text-2); }
.fe-import-tips svg { flex: none; margin-top: 2px; color: var(--fp-text-3); }
.fe-import .banner { margin: 14px 0 0; }
.fe-import .form-error { margin-top: 14px; }
.fe-pdf-pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-top: 12px; }
.fe-pdf-page { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .025); box-shadow: inset 0 0 0 1px var(--fp-line); color: var(--fp-text-2); font-size: 13px; cursor: pointer; }
.fe-pdf-page canvas { max-width: 100%; height: auto; border-radius: 4px; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .4); }
.fe-pdf-page.is-active { color: var(--fp-text-1); background: var(--fp-accent-soft); box-shadow: inset 0 0 0 1.5px var(--fp-accent); }
.fe-prepare { display: flex; flex-direction: column; gap: 14px; }
.fe-prepare-stage { display: grid; place-items: center; min-height: 240px; padding: 12px; border-radius: 10px; background: #0D0F12; box-shadow: inset 0 0 0 1px var(--fp-line); }
.fe-prepare-stage canvas { display: block; max-width: 100%; touch-action: none; cursor: crosshair; border-radius: 2px; }
.fe-prepare-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.fe-prepare-row { display: flex; align-items: center; gap: 8px; }
.fe-straighten { font-size: 13px; color: var(--fp-text-2); }
.fe-straighten input { width: 180px; accent-color: var(--fp-accent); }
.fe-straighten output { min-width: 44px; color: var(--fp-text-1); font-variant-numeric: tabular-nums; }
.fe-prepare .fe-muted { display: flex; align-items: center; gap: 8px; }
.fe-work { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 48px 16px 36px; }
.fe-work-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; color: var(--fp-accent); background: var(--fp-accent-soft); box-shadow: inset 0 0 0 1px var(--fp-accent-line); }
.fe-work h3 { font-size: 17px; line-height: 24px; font-weight: 600; }
.fe-work p { font-size: 14px; color: var(--fp-text-2); min-height: 20px; }
.fe-work .progress { width: min(420px, 100%); margin-top: 6px; }
.progress.is-indeterminate > span { width: 35%; animation: fe-indeterminate 1.4s var(--fp-ease) infinite; }
@keyframes fe-indeterminate { 0% { transform: translateX(-110%); } 100% { transform: translateX(310%); } }
.fe-result { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 32px 16px 12px; }
.fe-result-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; color: var(--fp-blue); background: var(--blue-soft, rgba(127, 176, 242, .1)); box-shadow: inset 0 0 0 1px var(--blue-line, rgba(127, 176, 242, .24)); }
.fe-result.is-warn .fe-result-icon { color: var(--fp-amber); background: var(--amber-soft, rgba(232, 182, 90, .1)); box-shadow: inset 0 0 0 1px var(--amber-line, rgba(232, 182, 90, .26)); }
.fe-result.is-error .fe-result-icon { color: var(--fp-red); background: var(--red-soft, rgba(240, 145, 138, .1)); box-shadow: inset 0 0 0 1px var(--red-line, rgba(240, 145, 138, .26)); }
.fe-result h3 { font-size: 17px; line-height: 24px; font-weight: 600; }
.fe-result p { max-width: 520px; font-size: 14px; color: var(--fp-text-2); }
.fe-result .fe-import-tips { max-width: 520px; text-align: left; }

.fe-summary { width: min(1240px, calc(100% - 32px)); }
.fe-summary-body { padding-bottom: 20px; }
.fe-summary-tabs { margin-bottom: 14px; }
.fe-summary-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.fe-summary-plan { margin: 0; padding: 14px; border-radius: 12px; background-color: var(--fp-stage); background-image: radial-gradient(rgba(255, 255, 255, .04) 1px, transparent 1.2px); background-size: 14px 14px; box-shadow: inset 0 0 0 1px var(--fp-line); }
.fe-summary-plan figcaption { margin-top: 10px; font-size: 13px; color: var(--fp-text-2); text-align: center; }
.fe-summary-svg { max-height: min(62vh, 720px); }
.fe-summary-side { display: flex; flex-direction: column; gap: 12px; }
.fe-summary-block { padding: 12px 14px; border-radius: 10px; background: rgba(255, 255, 255, .025); box-shadow: inset 0 0 0 1px var(--fp-line); }
.fe-summary-block h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 14px; font-weight: 600; }
.fe-summary-block.is-warn h3 { color: var(--fp-amber); }
.fe-summary-block.is-ok h3 { color: var(--fp-green); }
.fe-summary-block.is-error { box-shadow: inset 0 0 0 1px var(--red-line, rgba(240, 145, 138, .26)); background: var(--red-soft, rgba(240, 145, 138, .1)); }
.fe-summary-block.is-error h3 { color: var(--fp-red); }
.fe-summary-block ul { display: grid; gap: 6px; margin: 0 0 8px; padding: 0; list-style: none; }
.fe-summary-block li { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--fp-text-1); }
.fe-summary-block li > span { display: flex; flex-direction: column; min-width: 0; }
.fe-summary-block li b { font-weight: 500; }
.fe-summary-block li small { font-size: 12.5px; color: var(--fp-text-3); }
.fe-summary-block .fe-muted { margin: 0; }
.fe-summary-note { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--fp-text-2); }
.fe-summary-note svg { flex: none; margin-top: 2px; color: var(--fp-text-3); }

/* ---------- Responsive ---------- */
/* The inspector stays beside the canvas while there is room for both (tablets in landscape included). */
@media (max-width: 960px) {
  .fe-body { grid-template-columns: 76px minmax(0, 1fr); }
  .fe-inspector { grid-column: 1 / -1; position: static; max-height: none; }
}
@media (max-width: 900px) {
  .fe-summary-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .fe-head { align-items: stretch; }
  .fe-head-actions { width: 100%; }
  .fe-head-actions .btn { flex: 1 1 auto; }
  .fe-save-state { width: 100%; }
  .fe-body { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .fe-tools { position: relative; top: 0; flex-direction: row; overflow-x: auto; scrollbar-width: none; padding: 4px; }
  .fe-tools::-webkit-scrollbar { display: none; }
  .fe-tool { width: 60px; min-width: 60px; min-height: 52px; }
  .fe-tool.is-active::before { left: 14px; right: 14px; top: auto; bottom: -4px; width: auto; height: 3px; border-radius: 3px 3px 0 0; }
  .fe-tool-sep { width: 1px; height: auto; margin: 6px 2px; }
  .fe-tool-options { position: fixed; left: 12px; right: 12px; top: auto; bottom: 12px; width: auto; z-index: 40; }
  .fe-tool-options.is-wide { width: auto; }
  .fe-canvas-wrap { height: clamp(340px, 60dvh, 640px); }
  .fe-statusbar .fe-status-hint { display: none; }
  .fe-ref-opacity input { width: 84px; }
  .fe-roombar { align-items: stretch; flex-direction: column; }
  .fe-room-tabs { align-self: stretch; }
  .fe-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fe-prepare-tools { flex-direction: column; align-items: stretch; }
  .fe-straighten input { flex: 1; width: auto; }
  .fe-import .modal-actions .btn { flex: 1 1 auto; }
  .fe-summary .modal-actions .btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .fe-uncertain.is-flash .fe-uncertain-edge, .fe-check-mark.is-flash .fe-check-edge, .progress.is-indeterminate > span { animation: none; }
}
.fe-removed-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.fe-removed-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; padding: 2px 4px 2px 10px; border-radius: 8px; background: rgba(255, 255, 255, .02); box-shadow: inset 0 0 0 1px var(--fp-line-soft); font-size: 13px; color: var(--fp-text-2); }
.fe-removed-list b { color: var(--fp-text-1); font-weight: 500; text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, .35); }
.fe-canvas-bar .icon-btn[aria-pressed="true"] { color: var(--fp-text-1); background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px var(--fp-line-strong); }
@media (pointer: coarse) { [data-fe-shortcuts] { display: none; } }
.fe-import-note { margin-bottom: 14px; }