/* Tile Visualizer — full-screen page (resources/views/tile-visualizer/index.blade.php). */
:root {
    --tv-bg: #f3f4f6;
    --tv-panel: #ffffff;
    --tv-line: #e5e7eb;
    --tv-text: #1f2937;
    --tv-muted: #6b7280;
    --tv-dark: #111827;
    --tv-accent: #2563eb;
    --tv-radius: 8px;
}
* { box-sizing: border-box; }
html, body.kx-tvb { height: 100%; margin: 0; }
body.kx-tvb { background: var(--tv-bg); color: var(--tv-text); font: 14px/1.4 'Inter', 'KX Bangla', system-ui, -apple-system, 'Segoe UI', sans-serif; overflow: hidden; }
.w-100 { width: 100%; }
[hidden] { display: none !important; }

.kx-tv { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }

/* ── Top bar ── */
.kx-tv-top { display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 12px; background: var(--tv-panel); border-bottom: 1px solid var(--tv-line); flex: 0 0 auto; }
.kx-tv-brand { font-weight: 700; font-size: 15px; margin-left: 4px; white-space: nowrap; }
.kx-tv-spacer { flex: 1; }
.kx-tv-btn { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border: 1px solid var(--tv-line); border-radius: var(--tv-radius); background: #fff; color: var(--tv-text); font: inherit; font-size: 13px; font-weight: 500; text-decoration: none; cursor: pointer; white-space: nowrap; }
.kx-tv-btn:hover { background: #f9fafb; border-color: #d1d5db; color: var(--tv-text); text-decoration: none; }
.kx-tv-btn:focus-visible, .kx-tv-act:focus-visible, .kx-tv-fab:focus-visible, .kx-tv-item:focus-visible, .kx-tv-seg button:focus-visible { outline: 2px solid var(--tv-accent); outline-offset: 2px; }
.kx-tv-btn.is-dark, .kx-tv-act.is-dark { background: var(--tv-dark); border-color: var(--tv-dark); color: #fff; }
.kx-tv-btn.is-dark:hover, .kx-tv-act.is-dark:hover { background: #374151; }
.kx-tv-btn:disabled { opacity: .5; cursor: default; }
.kx-tv-hd-group { display: inline-flex; gap: 4px; }
.kx-tv-select { height: 34px; padding: 0 8px; border: 1px solid var(--tv-line); border-radius: var(--tv-radius); background: #fff; color: var(--tv-text); font: inherit; font-size: 13px; min-width: 0; }
.kx-tv-only-narrow { display: none; }
.kx-tv-link { background: none; border: 0; padding: 0; color: var(--tv-accent); cursor: pointer; font: inherit; }
.kx-tv-muted { color: var(--tv-muted); font-weight: 400; }

/* ── Body ── */
.kx-tv-body { display: grid; grid-template-columns: 312px minmax(0, 1fr); flex: 1; min-height: 0; }

/* ── Catalog ── */
.kx-tv-side { display: flex; flex-direction: column; min-height: 0; background: var(--tv-panel); border-right: 1px solid var(--tv-line); }
.kx-tv-side-head { padding: 12px; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid var(--tv-line); }
.kx-tv-seg { display: flex; flex-wrap: wrap; gap: 4px; padding: 3px; background: #f3f4f6; border-radius: var(--tv-radius); }
.kx-tv-seg button { flex: 1 1 auto; border: 0; background: transparent; border-radius: 6px; padding: 6px 8px; font: inherit; font-size: 12px; font-weight: 600; color: var(--tv-muted); cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.kx-tv-seg button.active { background: #fff; color: var(--tv-text); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.kx-tv-seg button .dot { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; }
.kx-tv-seg.is-small button { padding: 4px 6px; }
#kx-tv-surfaces { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); max-height: 168px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.kx-tv-choosing { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 10px; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: var(--tv-radius); font-size: 12px; }
.kx-tv-search { position: relative; display: block; margin: 0; }
.kx-tv-search i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #9ca3af; font-size: 12px; }
.kx-tv-search input { width: 100%; height: 34px; padding: 0 10px 0 30px; border: 1px solid var(--tv-line); border-radius: var(--tv-radius); font: inherit; font-size: 13px; }
.kx-tv-search input:focus, .kx-tv-select:focus, .kx-tv-dims input:focus { outline: none; border-color: var(--tv-accent); box-shadow: 0 0 0 2px rgba(37, 99, 235, .15); }
.kx-tv-filters { display: flex; gap: 6px; }
.kx-tv-filters .kx-tv-select { flex: 1 1 0; }
.kx-tv-viewtoggle { display: inline-flex; border: 1px solid var(--tv-line); border-radius: var(--tv-radius); overflow: hidden; flex: 0 0 auto; }
.kx-tv-viewtoggle button { width: 32px; border: 0; background: #fff; color: var(--tv-muted); cursor: pointer; }
.kx-tv-viewtoggle button.active { background: var(--tv-dark); color: #fff; }

.kx-tv-items { flex: 1; min-height: 0; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.kx-tv-item { display: flex; gap: 10px; padding: 8px; border: 1px solid var(--tv-line); border-radius: var(--tv-radius); background: #fff; cursor: pointer; position: relative; }
.kx-tv-item:hover { border-color: #c7d2fe; box-shadow: 0 1px 4px rgba(0, 0, 0, .06); }
.kx-tv-item.is-on { border-color: var(--tv-dark); box-shadow: inset 0 0 0 1px var(--tv-dark); }
.kx-tv-item.is-bare .kx-tv-thumb { opacity: .7; }
.kx-tv-thumb { width: 84px; height: 84px; flex: 0 0 84px; border-radius: 6px; overflow: hidden; background: #eef0f2; display: flex; align-items: center; justify-content: center; color: #9ca3af; }
.kx-tv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kx-tv-info { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.kx-tv-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kx-tv-meta { font-size: 12px; color: var(--tv-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kx-tv-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.kx-tv-badge { font-size: 10.5px; font-weight: 600; padding: 1px 6px; border-radius: 999px; background: #f3f4f6; color: #374151; }
.kx-tv-badge.ok { background: #dcfce7; color: #166534; }
.kx-tv-badge.no { background: #fee2e2; color: #991b1b; }
.kx-tv-badge.warn { background: #fef3c7; color: #92400e; }
.kx-tv-item-actions { display: flex; gap: 6px; margin-top: auto; }
.kx-tv-mini { height: 26px; padding: 0 10px; border: 1px solid var(--tv-line); border-radius: 6px; background: #fff; font: inherit; font-size: 12px; font-weight: 600; color: var(--tv-text); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.kx-tv-mini.is-dark { background: var(--tv-dark); border-color: var(--tv-dark); color: #fff; }
.kx-tv-mini:hover { filter: brightness(.96); }
.kx-tv-empty { padding: 24px 12px; text-align: center; color: var(--tv-muted); font-size: 13px; }
.kx-tv-skel { height: 102px; border-radius: var(--tv-radius); background: linear-gradient(90deg, #f3f4f6, #e9ebee, #f3f4f6); background-size: 200% 100%; animation: kx-tv-shimmer 1.2s infinite; }
@keyframes kx-tv-shimmer { to { background-position: -200% 0; } }

/* Grid view */
.kx-tv-items.is-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; }
.kx-tv-items.is-grid .kx-tv-item { flex-direction: column; gap: 6px; }
.kx-tv-items.is-grid .kx-tv-thumb { width: 100%; height: auto; aspect-ratio: 1; flex: none; }
.kx-tv-items.is-grid .kx-tv-meta + .kx-tv-meta { display: none; }

/* ── Stage ── */
.kx-tv-main { min-width: 0; min-height: 0; padding: 12px; display: flex; }
.kx-tv-stage { position: relative; flex: 1; min-width: 0; min-height: 0; border-radius: var(--tv-radius); overflow: hidden; background: #e5e7eb; border: 1px solid var(--tv-line); }
.kx-tv-canvas { position: absolute; inset: 0 0 56px 0; }
.kx-tv-canvas canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.kx-tv-canvas canvas:active { cursor: grabbing; }
/* Over a surface the mouse is a circle (the ring on the surface shows where it lands). */
.kx-tv-canvas canvas.is-pick { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ccircle cx='14' cy='14' r='11' fill='none' stroke='%23111827' stroke-opacity='.45' stroke-width='4'/%3E%3Ccircle cx='14' cy='14' r='11' fill='none' stroke='%23fff' stroke-width='2'/%3E%3Ccircle cx='14' cy='14' r='1.6' fill='%23fff'/%3E%3C/svg%3E") 14 14, crosshair; }
.kx-tv-canvas canvas.is-pick:active { cursor: grabbing; }
.kx-tv-hovertip { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; padding: 3px 8px; border-radius: 6px; background: rgba(17, 24, 39, .82); color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; }
.kx-tv-status { position: absolute; left: 12px; top: 12px; max-width: calc(100% - 80px); padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .92); font-size: 12px; color: var(--tv-muted); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); pointer-events: none; }
.kx-tv-status:empty { display: none; }
.kx-tv-status.is-error { color: #b91c1c; }
.kx-tv-status.is-ok { color: #15803d; }
.kx-tv-float { position: absolute; right: 12px; top: 12px; display: flex; flex-direction: column; gap: 6px; }
.kx-tv-fab { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--tv-line); background: rgba(255, 255, 255, .95); color: var(--tv-text); cursor: pointer; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.kx-tv-fab[aria-expanded="true"] { background: var(--tv-dark); color: #fff; }
.kx-tv-progress { position: absolute; left: 0; right: 0; bottom: 56px; height: 3px; }
.kx-tv-progress div { height: 100%; width: 0; background: #22c55e; transition: width .2s; }

/* Bottom bar */
.kx-tv-bottom { position: absolute; left: 0; right: 0; bottom: 0; height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 10px; background: var(--tv-panel); border-top: 1px solid var(--tv-line); }
.kx-tv-sel { display: flex; align-items: center; gap: 10px; min-width: 0; }
.kx-tv-sel-thumbs { display: flex; flex: 0 0 auto; }
.kx-tv-sel-thumbs > * { width: 38px; height: 38px; border-radius: 6px; border: 2px solid #fff; background: #eef0f2 center / cover no-repeat; box-shadow: 0 0 0 1px var(--tv-line); }
.kx-tv-sel-thumbs > * + * { margin-left: -12px; }
.kx-tv-sel-text { min-width: 0; }
.kx-tv-sel-surface { font-size: 11px; color: var(--tv-muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.kx-tv-sel-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kx-tv-actions { display: flex; gap: 4px; flex: 0 0 auto; }
.kx-tv-act { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border: 1px solid transparent; border-radius: var(--tv-radius); background: transparent; font: inherit; font-size: 12.5px; font-weight: 500; color: var(--tv-text); cursor: pointer; white-space: nowrap; }
.kx-tv-act:hover { background: #f3f4f6; }
.kx-tv-act[aria-expanded="true"]:not(.is-dark) { background: #f3f4f6; border-color: var(--tv-line); }
.kx-tv-act:disabled { opacity: .4; cursor: default; background: transparent; }

/* Floating panels */
.kx-tv-panel { position: absolute; right: 12px; width: 300px; max-width: calc(100% - 24px); max-height: calc(100% - 90px); overflow-y: auto; background: var(--tv-panel); border: 1px solid var(--tv-line); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .14); padding: 12px; z-index: 5; }
.kx-tv-panel.at-top { top: 56px; }
.kx-tv-panel.at-bottom { bottom: 64px; }
.kx-tv-panel.is-wide { width: 440px; }
.kx-tv-panel h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--tv-muted); font-weight: 700; margin: 0 0 8px; }
.kx-tv-panel h3:not(:first-child) { margin-top: 14px; }
.kx-tv-label { display: block; font-size: 12px; color: #4b5563; margin: 10px 0 4px; font-weight: 600; }
.kx-tv-check { display: flex; align-items: center; gap: 8px; font-size: 13px; margin: 10px 0 4px; cursor: pointer; }
.kx-tv-note { font-size: 12px; color: var(--tv-muted); margin: 8px 0 0; }
.kx-tv-panel input[type="range"] { width: 100%; accent-color: var(--tv-dark); }
.kx-tv-rooms { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.kx-tv-rooms button { padding: 10px 8px; border: 1px solid var(--tv-line); border-radius: var(--tv-radius); background: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.kx-tv-rooms button.active { border-color: var(--tv-dark); box-shadow: inset 0 0 0 1px var(--tv-dark); }
.kx-tv-rooms-head { grid-column: 1 / -1; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--tv-muted); margin-top: 4px; }
.kx-tv-dims select.kx-tv-select { width: 100%; }

/* Paint: the shade card. Every card is its own colour. */
.kx-tv-modes button { font-size: 13px; padding: 7px 8px; }
.kx-tv-paint-filters { flex-wrap: wrap; }
.kx-tv-paint-filters .kx-tv-note { flex-basis: 100%; margin: 0; }
.kx-tv-shades { flex: 1; min-height: 0; overflow-y: auto; padding: 8px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 84px; gap: 6px; align-content: start; }
.kx-tv-shade { position: relative; height: 84px; min-width: 0; border: 1px solid rgba(0, 0, 0, .1); border-radius: 6px; padding: 6px; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; text-align: left; cursor: pointer; font: inherit; color: #1f2937; overflow: hidden; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.kx-tv-shade.is-dark { color: #fff; }
.kx-tv-shade:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0, 0, 0, .15); }
.kx-tv-shade:focus-visible { outline: 2px solid var(--tv-accent); outline-offset: 2px; }
.kx-tv-shade.is-on { box-shadow: 0 0 0 3px var(--tv-dark), 0 0 0 5px #fff inset; }
.kx-tv-shade-name { font-size: 11.5px; font-weight: 700; line-height: 1.15; max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.kx-tv-shade-code { font-size: 10.5px; opacity: .8; }
.kx-tv-shade-type { font-size: 9.5px; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.kx-tv-seg button .dot.is-paint { width: 9px; height: 9px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); }
.kx-tv-chip { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .2); }
.kx-tv-dims { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 6px; }
.kx-tv-dims label { font-size: 11px; color: var(--tv-muted); margin: 0; display: flex; flex-direction: column; gap: 3px; }
.kx-tv-dims input, .kx-tv-dims output { height: 32px; width: 100%; padding: 0 8px; border: 1px solid var(--tv-line); border-radius: 6px; font: inherit; font-size: 13px; color: var(--tv-text); display: flex; align-items: center; }
.kx-tv-dims output { background: #f9fafb; }
.kx-tv-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.kx-tv-swatch { width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .25); padding: 0; cursor: pointer; }
.kx-tv-swatch.active { outline: 2px solid var(--tv-dark); outline-offset: 2px; }
.kx-tv-slots { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.kx-tv-slot { display: flex; align-items: center; gap: 8px; padding: 6px; border: 1px solid var(--tv-line); border-radius: var(--tv-radius); }
.kx-tv-slot.is-choosing { border-color: var(--tv-accent); background: #eff6ff; }
.kx-tv-slot-img { width: 36px; height: 36px; border-radius: 5px; background: #eef0f2 center / cover no-repeat; flex: 0 0 36px; }
.kx-tv-slot-text { flex: 1; min-width: 0; }
.kx-tv-slot-role { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--tv-muted); }
.kx-tv-slot-name { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kx-tv-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.kx-tv-table th { text-align: left; font-weight: 600; color: var(--tv-muted); font-size: 11px; padding: 4px 6px; border-bottom: 1px solid var(--tv-line); }
.kx-tv-table td { padding: 5px 6px; border-bottom: 1px solid #f3f4f6; vertical-align: top; }
.kx-tv-table .num { text-align: right; white-space: nowrap; }
.kx-tv-table .role { display: block; font-size: 11px; color: var(--tv-muted); }
.kx-tv-waste { width: 70px; height: 30px; margin-left: 6px; padding: 0 6px; border: 1px solid var(--tv-line); border-radius: 6px; font: inherit; }

/* Dialog (tile photos) */
.kx-tv-dialog { width: min(480px, calc(100vw - 32px)); border: 0; border-radius: 12px; padding: 16px; box-shadow: 0 20px 50px rgba(0, 0, 0, .25); }
.kx-tv-dialog::backdrop { background: rgba(17, 24, 39, .45); }
.kx-tv-dialog-head { display: flex; justify-content: space-between; align-items: center; margin: 0 0 6px; }
.kx-tv-dialog-head h2 { font-size: 16px; margin: 0; }
.kx-tv-dialog-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.kx-tv-look-faces { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.kx-tv-look-face { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; }
.kx-tv-look-face img { width: 84px; height: 84px; object-fit: cover; border-radius: 6px; border: 1px solid var(--tv-line); }
.kx-tv-error { color: #b91c1c; font-size: 12px; margin-top: 8px; min-height: 1em; }

.kx-tv-scrim { position: fixed; inset: 0; background: rgba(17, 24, 39, .35); z-index: 19; }

/* ── Tablet: labels go before the room shrinks ── */
@media (max-width: 1279px) {
    .kx-tv-body { grid-template-columns: 276px minmax(0, 1fr); }
    .kx-tv-actions .kx-tv-act span { display: none; }
    .kx-tv-thumb { width: 70px; height: 70px; flex-basis: 70px; }
}
@media (max-width: 1023px) {
    .kx-tv-top .kx-tv-btn span, .kx-tv-brand { display: none; }
    .kx-tv-top .kx-tv-only-narrow span { display: inline; }
}

/* ── Phone: the room is the page, the catalog slides over ── */
@media (max-width: 767px) {
    .kx-tv-body { grid-template-columns: minmax(0, 1fr); }
    .kx-tv-only-narrow { display: inline-flex; }
    .kx-tv-side { position: fixed; top: 0; bottom: 0; left: 0; width: min(340px, 88vw); z-index: 20; transform: translateX(-102%); transition: transform .2s ease; box-shadow: 4px 0 20px rgba(0, 0, 0, .15); }
    .kx-tv.is-cat-open .kx-tv-side { transform: none; }
    .kx-tv-main { padding: 0; }
    .kx-tv-stage { border-radius: 0; border: 0; }
    .kx-tv-sel-surface { display: none; }
    .kx-tv-sel-thumbs > * { width: 32px; height: 32px; }
    .kx-tv-act { padding: 0 8px; }
    .kx-tv-panel, .kx-tv-panel.is-wide { left: 8px; right: 8px; width: auto; max-width: none; }
    .kx-tv-hd-group .kx-tv-select { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .kx-tv-side { transition: none; }
    .kx-tv-skel { animation: none; }
}

/* Outside: extra parts + colour ideas */
.kx-tv-xopts .kx-tv-check { margin: 6px 0 2px; }
.kx-tv-xopts h3 { margin-top: 12px; }
.kx-tv-schemes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 6px; }
.kx-tv-scheme { display: flex; flex-direction: column; gap: 4px; padding: 6px; border: 1px solid var(--tv-line); border-radius: var(--tv-radius); background: #fff; color: var(--tv-text); font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
.kx-tv-scheme:hover, .kx-tv-scheme:focus-visible { border-color: var(--tv-accent); outline: none; }
.kx-tv-scheme-strip { display: flex; height: 18px; border-radius: 4px; overflow: hidden; border: 1px solid rgba(0, 0, 0, .08); }
.kx-tv-scheme-strip span { flex: 1 1 0; background: #eee; }
.kx-tv-scheme-strip span:first-child { flex: 2 1 0; }
.kx-tv-scheme-name { line-height: 1.2; }

/* Several surfaces at once */
.kx-tv-selbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 12px; }
.kx-tv-selbar .kx-tv-link.active { color: var(--tv-accent); font-weight: 700; }
.kx-tv-sel-count { color: var(--tv-accent); font-weight: 600; }
.kx-tv-seg button.is-picked { background: #eff6ff; color: var(--tv-accent); box-shadow: inset 0 0 0 1.5px var(--tv-accent); }
.kx-tv-xopts .kx-tv-check.kx-tv-sub { margin-left: 22px; }

/* ══ Refinement: one quiet, consistent look (softer depth, tighter type, custom controls) ══ */
:root {
    --tv-bg: #f4f5f7;
    --tv-line: #e6e8ec;
    --tv-line-strong: #d4d8de;
    --tv-text: #161b26;
    --tv-muted: #677084;
    --tv-dark: #14181f;
    --tv-accent: #2f6bff;
    --tv-ring: 0 0 0 3px rgba(47, 107, 255, .18);
    --tv-shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
    --tv-shadow-md: 0 4px 14px -2px rgba(16, 24, 40, .10), 0 2px 4px -2px rgba(16, 24, 40, .06);
    --tv-shadow-lg: 0 18px 40px -8px rgba(16, 24, 40, .22), 0 6px 12px -6px rgba(16, 24, 40, .10);
    --tv-radius: 9px;
}
body.kx-tvb { -webkit-font-smoothing: antialiased; font-feature-settings: 'cv11', 'ss01'; letter-spacing: -.005em; }

/* Top bar */
.kx-tv-top { height: 56px; padding: 0 14px; gap: 8px; background: rgba(255, 255, 255, .9); backdrop-filter: saturate(1.4) blur(8px); }
.kx-tv-brand { font-size: 15px; font-weight: 700; letter-spacing: -.01em; display: inline-flex; align-items: center; gap: 8px; }
.kx-tv-brand-shop { padding: 3px 9px; border-radius: 999px; background: var(--tv-dark); color: #fff; font-size: 12px; font-weight: 600; }

/* Buttons */
.kx-tv-btn, .kx-tv-act, .kx-tv-mini, .kx-tv-fab, .kx-tv-seg button, .kx-tv-rooms button, .kx-tv-item, .kx-tv-scheme, .kx-tv-swatch, .kx-tv-viewtoggle button {
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.kx-tv-btn { height: 36px; padding: 0 14px; border-color: var(--tv-line); box-shadow: var(--tv-shadow-sm); font-weight: 600; letter-spacing: -.005em; }
.kx-tv-btn i { font-size: 12.5px; opacity: .85; }
.kx-tv-btn:hover { background: #fafbfc; border-color: var(--tv-line-strong); }
.kx-tv-btn:active:not(:disabled), .kx-tv-act:active:not(:disabled), .kx-tv-mini:active:not(:disabled), .kx-tv-fab:active { transform: translateY(1px); }
.kx-tv-btn.is-dark, .kx-tv-act.is-dark, .kx-tv-mini.is-dark { background: linear-gradient(180deg, #262c37, var(--tv-dark)); border-color: var(--tv-dark); box-shadow: 0 1px 2px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .08); }
.kx-tv-btn.is-dark:hover, .kx-tv-act.is-dark:hover { background: linear-gradient(180deg, #313845, #1b2029); }
.kx-tv-btn.is-dark i { opacity: 1; }
.kx-tv-btn:focus-visible, .kx-tv-act:focus-visible, .kx-tv-fab:focus-visible, .kx-tv-item:focus-visible, .kx-tv-seg button:focus-visible, .kx-tv-mini:focus-visible, .kx-tv-rooms button:focus-visible { outline: none; box-shadow: var(--tv-ring); }
.kx-tv-mini { height: 28px; padding: 0 11px; border-radius: 7px; border-color: var(--tv-line); box-shadow: var(--tv-shadow-sm); text-decoration: none; }
.kx-tv-mini:hover { filter: none; background: #f7f8fa; border-color: var(--tv-line-strong); }
.kx-tv-mini.is-danger { color: #c02626; }
.kx-tv-mini.is-danger:hover { background: #fef2f2; border-color: #fecaca; }
.kx-tv-mini:disabled { opacity: .5; cursor: default; }
.kx-tv-link { font-weight: 600; text-underline-offset: 2px; }
.kx-tv-link:hover { text-decoration: underline; }
.kx-tv-iconbtn { width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--tv-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.kx-tv-iconbtn:hover { background: #f1f3f5; color: var(--tv-text); }

/* Inputs, selects */
.kx-tv-input, .kx-tv-select, .kx-tv-search input, .kx-tv-dims input, .kx-tv-waste {
    height: 36px; border: 1px solid var(--tv-line); border-radius: var(--tv-radius); background-color: #fff; color: var(--tv-text);
    font: inherit; font-size: 13px; box-shadow: var(--tv-shadow-sm); transition: border-color .15s, box-shadow .15s;
}
.kx-tv-input { padding: 0 11px; min-width: 0; }
.kx-tv-select { appearance: none; -webkit-appearance: none; padding: 0 30px 0 11px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23677084' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 11px center; }
.kx-tv-select:hover, .kx-tv-input:hover, .kx-tv-search input:hover { border-color: var(--tv-line-strong); }
.kx-tv-input:focus, .kx-tv-select:focus, .kx-tv-search input:focus, .kx-tv-dims input:focus, .kx-tv-waste:focus { outline: none; border-color: var(--tv-accent); box-shadow: var(--tv-ring); }
.kx-tv-dims input, .kx-tv-dims output { height: 34px; }
.kx-tv-waste { height: 30px; }

/* Checkboxes: a small neat box instead of the browser's own */
.kx-tvb input[type="checkbox"] {
    appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 16px; height: 16px; margin: 0;
    border: 1.5px solid #c2c8d2; border-radius: 4.5px; background: #fff center / 10px 10px no-repeat;
    cursor: pointer; transition: background-color .12s, border-color .12s, box-shadow .12s; vertical-align: -3px;
}
.kx-tvb input[type="checkbox"]:hover { border-color: #9aa3b2; }
.kx-tvb input[type="checkbox"]:checked {
    background-color: var(--tv-dark); border-color: var(--tv-dark);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.kx-tvb input[type="checkbox"]:focus-visible { outline: none; box-shadow: var(--tv-ring); }
.kx-tvb input[type="checkbox"]:disabled { opacity: .45; cursor: default; }
.kx-tv-check { gap: 9px; font-size: 13px; font-weight: 500; margin: 10px 0 4px; line-height: 1.3; }
.kx-tv-check:hover input[type="checkbox"]:not(:checked) { border-color: #9aa3b2; }

/* Range sliders */
.kx-tv-panel input[type="range"] { -webkit-appearance: none; appearance: none; height: 20px; background: transparent; cursor: pointer; }
.kx-tv-panel input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: #e3e6eb; }
.kx-tv-panel input[type="range"]::-moz-range-track { height: 4px; border-radius: 4px; background: #e3e6eb; }
.kx-tv-panel input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%; background: #fff; border: 1.5px solid var(--tv-dark); box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.kx-tv-panel input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 1.5px solid var(--tv-dark); box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.kx-tv-panel input[type="range"]:focus-visible { outline: none; }
.kx-tv-panel input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: var(--tv-ring); }

/* Segmented controls */
.kx-tv-seg { background: #eef0f3; padding: 3px; border-radius: 10px; }
.kx-tv-seg button { border-radius: 7px; padding: 7px 8px; }
.kx-tv-seg button:hover:not(.active) { color: var(--tv-text); background: rgba(255, 255, 255, .55); }
.kx-tv-seg button.active { box-shadow: 0 1px 2px rgba(16, 24, 40, .1), 0 0 0 .5px rgba(16, 24, 40, .06); }
.kx-tv-viewtoggle { box-shadow: var(--tv-shadow-sm); }
.kx-tv-viewtoggle button:hover:not(.active) { background: #f7f8fa; color: var(--tv-text); }

/* Catalogue cards */
.kx-tv-side { box-shadow: 1px 0 0 var(--tv-line); }
.kx-tv-side-head { padding: 14px; gap: 10px; }
.kx-tv-items { padding: 10px; gap: 8px; }
.kx-tv-item { border-radius: 11px; padding: 9px; box-shadow: var(--tv-shadow-sm); }
.kx-tv-item:hover { border-color: var(--tv-line-strong); box-shadow: var(--tv-shadow-md); }
.kx-tv-item.is-on { border-color: var(--tv-dark); box-shadow: 0 0 0 1px var(--tv-dark), var(--tv-shadow-md); }
.kx-tv-thumb { border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05); }
.kx-tv-name { letter-spacing: -.01em; }
.kx-tv-badge { padding: 2px 7px; letter-spacing: .01em; }
.kx-tv-shade { border-radius: 9px; }
.kx-tv-rooms button { border-radius: 10px; box-shadow: var(--tv-shadow-sm); }
.kx-tv-rooms button:hover { border-color: var(--tv-line-strong); box-shadow: var(--tv-shadow-md); }
.kx-tv-scheme { border-radius: 10px; box-shadow: var(--tv-shadow-sm); }

/* Stage, floating bits */
.kx-tv-main { padding: 14px; }
.kx-tv-stage { border-radius: 14px; border-color: var(--tv-line); box-shadow: var(--tv-shadow-md); }
.kx-tv-fab { width: 38px; height: 38px; background: rgba(255, 255, 255, .85); backdrop-filter: blur(8px); border-color: rgba(255, 255, 255, .7); box-shadow: var(--tv-shadow-md); }
.kx-tv-fab:hover { background: #fff; }
.kx-tv-status { padding: 6px 12px; background: rgba(255, 255, 255, .88); backdrop-filter: blur(8px); box-shadow: var(--tv-shadow-md); font-weight: 500; }
.kx-tv-hovertip { padding: 4px 9px; border-radius: 7px; background: rgba(20, 24, 31, .86); backdrop-filter: blur(4px); box-shadow: 0 4px 12px rgba(0, 0, 0, .2); letter-spacing: .01em; }
.kx-tv-progress div { background: linear-gradient(90deg, #22c55e, #16a34a); }
.kx-tv-bottom { height: 58px; padding: 0 12px; background: rgba(255, 255, 255, .94); backdrop-filter: blur(8px); }
.kx-tv-canvas { bottom: 58px; }
.kx-tv-progress { bottom: 58px; }
.kx-tv-act { border-radius: 8px; font-weight: 600; }
.kx-tv-act:hover:not(:disabled):not(.is-dark) { background: #f1f3f5; }
.kx-tv-panel { border-radius: 14px; border-color: rgba(16, 24, 40, .08); box-shadow: var(--tv-shadow-lg); padding: 14px; background: rgba(255, 255, 255, .97); backdrop-filter: blur(10px); }
.kx-tv-panel.at-top { top: 60px; }
.kx-tv-panel.at-bottom { bottom: 68px; }
.kx-tv-panel h3 { font-size: 10.5px; letter-spacing: .07em; }
.kx-tv-label { color: #3f4757; }
.kx-tv-note { line-height: 1.45; }

/* Dialogs */
.kx-tv-dialog { border-radius: 16px; padding: 18px 20px 20px; box-shadow: var(--tv-shadow-lg); }
.kx-tv-dialog::backdrop { background: rgba(14, 18, 26, .5); backdrop-filter: blur(3px); }
.kx-tv-dialog-head h2 { font-size: 16.5px; font-weight: 700; letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; }
.kx-tv-dialog-head h2 i { font-size: 14px; color: var(--tv-muted); }

/* Share dialog */
.kx-tv-share { width: min(560px, calc(100vw - 32px)); }
.kx-tv-share-new { display: flex; gap: 8px; margin-top: 14px; }
.kx-tv-share-new .kx-tv-input { flex: 1 1 auto; }
.kx-tv-share-new .kx-tv-select { flex: 0 0 auto; }
.kx-tv-share-list { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow-y: auto; }
.kx-tv-share-row { padding: 11px 12px; border: 1px solid var(--tv-line); border-radius: 11px; background: #fff; box-shadow: var(--tv-shadow-sm); }
.kx-tv-share-row.is-dead { background: #fafbfc; box-shadow: none; }
.kx-tv-share-row.is-dead strong { color: var(--tv-muted); }
.kx-tv-share-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.kx-tv-share-top strong { font-size: 13.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kx-tv-share-meta { font-size: 11.5px; color: var(--tv-muted); margin-top: 2px; }
.kx-tv-share-actions { display: flex; gap: 6px; margin-top: 9px; align-items: center; }
.kx-tv-share-url { flex: 1 1 auto; height: 30px; font-size: 12px; background: #f8f9fb; color: #3f4757; }
.kx-tv-pill { flex: 0 0 auto; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.kx-tv-pill.is-on { background: #e8f7ee; color: #15803d; }
.kx-tv-pill.is-off { background: #f1f3f5; color: var(--tv-muted); }
@media (max-width: 560px) {
    .kx-tv-share-new { flex-wrap: wrap; }
    .kx-tv-share-new .kx-tv-input { flex-basis: 100%; }
    .kx-tv-share-actions { flex-wrap: wrap; }
    .kx-tv-share-url { flex-basis: 100%; }
}

/* Thin scrollbars in the side lists */
.kx-tv-items, .kx-tv-shades, .kx-tv-panel, .kx-tv-share-list { scrollbar-width: thin; scrollbar-color: #cfd4dc transparent; }
.kx-tv-items::-webkit-scrollbar, .kx-tv-shades::-webkit-scrollbar, .kx-tv-panel::-webkit-scrollbar { width: 8px; }
.kx-tv-items::-webkit-scrollbar-thumb, .kx-tv-shades::-webkit-scrollbar-thumb, .kx-tv-panel::-webkit-scrollbar-thumb { background: #d3d8df; border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }

@media (max-width: 1023px) {
    .kx-tv-brand { display: none; }
}
@media (max-width: 767px) {
    .kx-tv-main { padding: 0; }
    .kx-tv-stage { border-radius: 0; box-shadow: none; }
    .kx-tv-top { padding: 0 10px; gap: 6px; }
    .kx-tv-top .kx-tv-btn { padding: 0 10px; }
}
@media (prefers-reduced-motion: reduce) {
    .kx-tv-btn, .kx-tv-act, .kx-tv-mini, .kx-tv-fab, .kx-tv-item, .kx-tv-shade { transition: none; }
}

/* Walk mode (inside rooms): the Walk button stays lit while on. */
.kx-tv-act.is-on, .kx-tv-act.is-on:hover:not(:disabled) { background: #e8efff; border-color: #bcd0fb; color: #1d4ed8; }
/* Hover ring / walk spots layer over the 3D picture (never takes the mouse). */
.kx-tv-canvas canvas.kx-tv-overlay { position: absolute; inset: 0; pointer-events: none; cursor: default; }

/* Day / night toggle + camera views (eye level / cutaway / top-down) */
.kx-tv-fab[aria-pressed="true"] { background: #1e2a44; color: #ffd27a; border-color: #1e2a44; }
.kx-tv-camviews { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .85); backdrop-filter: blur(8px); box-shadow: var(--tv-shadow-md); }
.kx-tv-camviews button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--tv-text); font: inherit; font-size: 12.5px; padding: 6px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.kx-tv-camviews button[aria-pressed="true"] { background: var(--tv-dark); color: #fff; }
.kx-tv-camviews button:focus-visible { outline: none; box-shadow: var(--tv-ring); }
@media (min-width: 768px) {
    .kx-tv-stage:has(.kx-tv-camviews:not([hidden])) .kx-tv-status { top: 56px; }
}
@media (max-width: 767px) {
    .kx-tv-camviews { top: auto; bottom: 64px; }
    .kx-tv-camviews span { display: none; }
    .kx-tv-camviews button { padding: 8px 12px; }
}