body { background: #f5f7f9; }
.offline-banner { position: sticky; top: 0; z-index: 1100; padding: .65rem 1rem; background: #fff3cd; color: #664d03; text-align: center; font-weight: 600; }
.mobile-bottom-nav { display: none; }
.app-version-footer { padding: .75rem 1rem 1rem; color: #6c757d; font-size: .78rem; text-align: center; }

.offline-page { max-width: 560px; margin: 10vh auto; }
.install-app { min-height: 36px; align-self: center; }
.stat-card { min-height: 110px; }
.stat-card .card-body { display: flex; flex-direction: column; justify-content: center; }
.stat-card strong { font-size: 2rem; }
.btn, .form-control, .form-select { min-height: 44px; }
.progress-tall { height: 1.25rem; }
.progress-with-problems { display: flex; }
.progress-with-problems .progress-bar-problem { margin-left: auto; background: #dc3545; }
.progress-with-problems .progress-bar-complete { background: #198754; }
.status-border-success { border-left: .4rem solid #198754; }
.status-border-warning { border-left: .4rem solid #ffc107; }
.status-border-danger { border-left: .4rem solid #dc3545; }
.status-border-recount { border-left: .4rem solid #fd7e14; }
.department-progress, .checklist-department { border-left-color: var(--department-color); }
.status-badge { display: inline-block; padding: .3rem .5rem; border-radius: 999px; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.status-not_started { background: #e9ecef; color: #343a40; }
.status-in_progress { background: #fff3cd; color: #664d03; }
.status-complete { background: #d1e7dd; color: #0f5132; }
.status-problem { background: #f8d7da; color: #842029; }
.status-recount_required { background: #ffe5d0; color: #984c0c; }
.status-not_included { background: #cfe2ff; color: #084298; }
.sticky-filters { position: sticky; top: .5rem; z-index: 20; box-shadow: 0 .2rem .6rem rgb(0 0 0 / 8%); }
.checklist-summary { display: flex; justify-content: space-between; gap: 1rem; cursor: pointer; min-height: 50px; align-items: center; }
.bay-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.bay-check-card { border: 1px solid #dee2e6; border-left: .35rem solid #adb5bd; border-radius: .5rem; padding: 1rem; background: #fff; }
.status-card-complete { border-left-color: #198754; }
.status-card-in_progress { border-left-color: #ffc107; }
.status-card-problem { border-left-color: #dc3545; }
.status-card-recount_required { border-left-color: #fd7e14; }
.status-card-not_included { border-left-color: #0d6efd; }
.status-actions { grid-template-columns: 1fr 1fr; gap: .5rem; }
.bay-name { font-size: 1.05rem; }
.audit-rollup-list { max-height: 26rem; overflow: auto; }

.legend-item { display: inline-flex; align-items: center; gap: .45rem; }
.legend-item i { width: 1rem; height: 1rem; border-radius: .2rem; }
.store-map-viewport {
  overflow: auto;
  max-height: 72vh;
  border: 1px solid #adb5bd;
  border-radius: .5rem;
  background: #fff;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.store-map {
  position: relative;
  width: calc(var(--grid-width) * var(--cell-width));
  height: calc(var(--grid-height) * var(--cell-height));
  background-color: #fff;
  background-image:
    linear-gradient(to right, #e9ecef 1px, transparent 1px),
    linear-gradient(to bottom, #e9ecef 1px, transparent 1px);
  background-size: var(--cell-width) var(--cell-height);
}
.map-aisle {
  position: absolute;
  left: calc(var(--x) * var(--cell-width));
  top: calc(var(--y) * var(--cell-height));
  width: calc(var(--width) * var(--cell-width));
  height: calc(var(--height) * var(--cell-height));
  border: 3px solid var(--department-color);
  background: color-mix(in srgb, var(--department-color) 12%, white);
  pointer-events: none;
  z-index: 1;
}
.aisle-label {
  position: absolute;
  z-index: 5;
  padding: .08rem .32rem;
  border-radius: .25rem;
  background: #212529;
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  white-space: nowrap;
}
.map-aisle--vertical .aisle-label { left: 50%; top: 0; transform: translate(-50%, -115%); }
.map-aisle--horizontal .aisle-label { left: -.35rem; top: 50%; transform: translate(-100%, -50%); }
.map-bay {
  position: absolute;
  z-index: 2;
  left: calc(var(--x) * var(--cell-width) + 3px);
  top: calc(var(--y) * var(--cell-height) + 3px);
  width: calc(var(--location-width, 1) * var(--cell-width) - 6px);
  height: calc(var(--location-height, 1) * var(--cell-height) - 6px);
  display: grid;
  place-items: center;
  border: 2px solid var(--department-color);
  border-radius: .2rem;
  background: var(--status-color, #dee2e6);
  color: #212529;
  font-size: .68rem;
  font-weight: 700;
  line-height: 1;
  overflow: hidden;
  text-align: center;
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-touch-callout: none;
}
.map-bay.fractional-bay { left: calc(var(--x) * var(--cell-width)); top: calc(var(--y) * var(--cell-height)); width: calc(var(--location-width, 1) * var(--cell-width)); height: calc(var(--location-height, 1) * var(--cell-height)); transform: scale(.9); transform-origin: center; }
.location-type-marker { position: absolute; top: 2px; right: 3px; padding: 1px 3px; border-radius: 3px; background: rgb(255 255 255 / 82%); color: #212529; font-size: .55rem; font-weight: 800; line-height: 1.2; }
.map-bay.location-type-cantilever, .fixture-symbol.location-type-cantilever { border-style: double; border-width: 4px; }
.map-bay.location-type-endcap, .fixture-symbol.location-type-endcap { border-style: dashed; border-width: 3px; border-radius: 45%; }
.map-bay.location-type-wall, .fixture-symbol.location-type-wall { border-style: dotted; border-width: 4px; border-radius: 0; }
.map-bay.location-type-bulk, .fixture-symbol.location-type-bulk { border-width: 5px; box-shadow: inset 0 0 0 2px rgb(255 255 255 / 65%); }
.map-bay.location-type-outside_pad, .fixture-symbol.location-type-outside_pad { outline: 2px dashed #212529; outline-offset: 2px; }
.map-bay.location-type-receiving, .fixture-symbol.location-type-receiving { border-style: double; border-width: 5px; border-radius: 0; }
.map-bay.location-type-top_stock, .fixture-symbol.location-type-top_stock { border-top-width: 7px; }
.map-bay.location-type-other, .fixture-symbol.location-type-other { clip-path: polygon(8% 0, 92% 0, 100% 20%, 100% 80%, 92% 100%, 8% 100%, 0 80%, 0 20%); }
.fixture-symbol { width: 1.25rem !important; height: 1.05rem !important; border: 2px solid #212529; border-radius: .15rem; background: #e9ecef; }
.fixture-type-badge { display: inline-block; margin-top: .3rem; padding: .18rem .42rem; border: 2px solid #6c757d; border-radius: .25rem; font-size: .72rem; font-weight: 700; background: #f8f9fa; }
.map-bay:hover, .map-bay:focus-visible { z-index: 4; outline: 3px solid #212529; outline-offset: 1px; }
.map-bay[hidden], .map-aisle[hidden] { display: none; }
.store-map.labels-compact .location-type-marker { display: none; }
.store-map-viewport { cursor: grab; touch-action: none; overscroll-behavior: contain; }
.audit-mode-card { border-color: #0d6efd33; }
.audit-mode-viewport { min-height: 70vh; }
.audit-fullscreen-controls { position: fixed; z-index: 2000; inset: 0; pointer-events: none; }
.audit-fullscreen-controls .btn, .audit-fullscreen-controls .btn-group { pointer-events: auto; }
.audit-fullscreen-exit-button { position: absolute; left: 50%; bottom: calc(.85rem + env(safe-area-inset-bottom)); transform: translateX(-50%); border-radius: 999px; padding-inline: 1.25rem; }
.audit-fullscreen-zoom-controls { position: absolute; right: max(1rem, env(safe-area-inset-right)); bottom: calc(4.5rem + env(safe-area-inset-bottom)); }
body.audit-map-fullscreen { overflow: hidden; padding-bottom: 0; background: #fff; }
body.audit-map-fullscreen > .navbar,
body.audit-map-fullscreen > .offline-banner,
body.audit-map-fullscreen > .mobile-bottom-nav,
body.audit-map-fullscreen main > :not(.store-map-viewport):not(.audit-fullscreen-controls):not(.modal) { display: none !important; }
body.audit-map-fullscreen main.container { width: 100%; max-width: none; height: 100dvh; padding: 0 !important; margin: 0; }
body.audit-map-fullscreen .audit-fullscreen-viewport,
.store-map-viewport:fullscreen { position: fixed; inset: 0; z-index: 1900; width: 100vw; height: 100dvh; max-height: none; min-height: 100dvh; border: 0; border-radius: 0; }
.store-map-viewport.is-panning { cursor: grabbing; user-select: none; }
.store-map-viewport.is-pinching { cursor: zoom-out; user-select: none; }
.status-fill-not_started { --status-color: #adb5bd; background: #adb5bd; }
.status-fill-in_progress { --status-color: #ffc107; background: #ffc107; }
.status-fill-complete { --status-color: #198754; background: #198754; color: #fff; }
.status-fill-problem { --status-color: #dc3545; background: #dc3545; color: #fff; }
.status-fill-recount_required { --status-color: #fd7e14; background: #fd7e14; }
.status-fill-not_included {
  --status-color: #0d6efd;
  background: repeating-linear-gradient(135deg, #0d6efd 0 6px, #9ec5fe 6px 12px);
  color: #fff;
}
.legend-status { border: 1px solid rgb(0 0 0 / 20%); }
.map-zoom-controls .btn { min-width: 48px; font-size: 1.2rem; }
.map-zoom-controls .zoom-value { min-width: 76px; font-size: 1rem; }
.map-filter-card { position: sticky; top: .5rem; z-index: 15; }
.map-bay span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; padding: 2px; }

@media (max-width: 576px) {
  .store-map-viewport { max-height: 65vh; }
  .audit-mode-viewport { min-height: 68vh; max-height: 72vh; }
  body.audit-map-fullscreen .audit-fullscreen-viewport { height: 100dvh; min-height: 100dvh; padding-bottom: 4.5rem; }
  .audit-fullscreen-exit-button { bottom: calc(.65rem + env(safe-area-inset-bottom)); }
  .audit-fullscreen-zoom-controls { right: max(.75rem, env(safe-area-inset-right)); bottom: calc(4.25rem + env(safe-area-inset-bottom)); }
  .aisle-label { z-index: 8; font-size: .64rem; padding: .05rem .24rem; box-shadow: 0 1px 3px rgb(0 0 0 / 30%); }
  .map-aisle--vertical .aisle-label { top: 0; transform: translate(-50%, -130%); }
  .map-bay { font-size: .62rem; overflow: visible; }
  .map-bay span { position: relative; z-index: 2; max-width: calc(100% - 4px); padding: 1px 2px; border-radius: 3px; background: rgb(255 255 255 / 76%); color: #212529; line-height: 1.05; }
  .location-type-marker { display: none; }
  body { padding-bottom: 70px; }
  main.container { padding-left: .75rem; padding-right: .75rem; }
  .navbar-brand { font-size: 1rem; }
  .desktop-nav { display: none; }
  .mobile-bottom-nav { position: fixed; z-index: 1050; display: grid; grid-template-columns: repeat(5, 1fr); bottom: 0; left: 0; right: 0; min-height: 64px; padding-bottom: env(safe-area-inset-bottom); background: #212529; box-shadow: 0 -.2rem .8rem rgb(0 0 0 / 20%); }
  .mobile-bottom-nav a { min-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; color: #f8f9fa; text-decoration: none; font-size: .72rem; }
  .mobile-bottom-nav a:active, .mobile-bottom-nav a:focus { background: #343a40; }
  .mobile-bottom-nav span { font-size: 1.35rem; line-height: 1; }
  .sticky-filters, .map-filter-card { top: 0; }
  .bay-card-grid { grid-template-columns: 1fr; }
}
.layout-editor-grid { display: grid; grid-template-columns: minmax(250px, 1fr) minmax(0, 3fr); gap: 1.5rem; align-items: start; }
.layout-editor-sidebar { min-width: 0; }
.layout-editor-main { min-width: 0; }
.layout-sidebar { position: sticky; top: .5rem; max-height: 80vh; overflow: auto; }
.aisle-group-list .accordion-button { font-size: .92rem; gap: .15rem; }
.aisle-group-list .accordion-button::after { width: .85rem; height: .85rem; background-size: .85rem; }
.aisle-group-list .list-group-item { padding-left: 1.35rem; }
.layout-preview { min-height: 110px; border: 2px dashed #6c757d; border-left: 42px solid #3f7cac; border-radius: .5rem; padding: 1rem; display: flex; flex-direction: column; justify-content: center; gap: .25rem; background: #f8f9fa; }
.layout-preview.preview-horizontal { border-left: 2px dashed #6c757d; border-top: 42px solid #3f7cac; }
.bay-editor-list { display: grid; gap: .75rem; }
.bay-editor-row { display: grid; grid-template-columns: repeat(5, minmax(110px, 1fr)); gap: .5rem; align-items: end; padding: .75rem; border: 1px solid #dee2e6; border-radius: .5rem; }
.bay-editor-row label { font-size: .78rem; color: #6c757d; }
.bay-editor-row .bay-active { min-height: 44px; display: flex; align-items: center; gap: .35rem; color: #212529; }
.import-paste { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .82rem; }
.import-columns { display: flex; flex-wrap: wrap; gap: .4rem; }
.import-columns code { padding: .25rem .4rem; background: #e9ecef; border-radius: .25rem; }
.import-preview { max-height: 60vh; border: 1px solid #dee2e6; border-radius: .5rem; }
.import-preview thead { position: sticky; top: 0; z-index: 1; }
.export-map-option { max-width: 210px; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.export-map-option + .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.export-check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1rem; }
.department-list { display: grid; gap: 1rem; }
.department-edit-card { border-left: .6rem solid var(--department-color); }
.department-form { display: grid; grid-template-columns: minmax(180px, 2fr) minmax(120px, 1fr) 100px 100px 90px auto; gap: .75rem; align-items: end; }
.department-form label { font-size: .82rem; color: #6c757d; }
.department-form .department-color { width: 100%; min-width: 70px; }
.department-form .department-active { min-height: 44px; display: flex; align-items: center; gap: .4rem; color: #212529; }
.department-usage { display: flex; flex-wrap: wrap; gap: 1rem; color: #6c757d; }
@media (max-width: 992px) {
  .layout-editor-grid { grid-template-columns: minmax(160px, 36vw) minmax(520px, 1fr); gap: .75rem; overflow-x: auto; padding-bottom: .5rem; align-items: start; }
  .layout-editor-sidebar { position: sticky; left: 0; z-index: 5; align-self: start; }
  .layout-sidebar { position: sticky; top: .5rem; max-height: calc(100vh - 150px); }
  .layout-map-settings .card-body { padding: .65rem; }
  .layout-map-settings p { display: none; }
  .layout-map-settings .row { display: grid; grid-template-columns: 1fr; }
  .layout-map-settings .col-6 { width: 100%; }
  .layout-map-settings .form-label { font-size: .75rem; }
  .layout-map-settings .btn { padding-left: .35rem; padding-right: .35rem; }
  .aisle-group-list .accordion-button { padding-left: .55rem; padding-right: .55rem; }
  .aisle-group-list .list-group-item { padding: .45rem .55rem .45rem .85rem; font-size: .9rem; }
  .bay-editor-row { grid-template-columns: repeat(2, 1fr); }
  .department-form { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px) {
  .layout-editor-grid { margin-left: -.75rem; margin-right: -.75rem; padding-left: .75rem; padding-right: .75rem; grid-template-columns: 148px minmax(500px, 1fr); }
  .layout-sidebar .card-body { padding: .55rem; }
  .layout-sidebar .btn { font-size: .85rem; }
  .layout-editor-main .card-header { align-items: flex-start; gap: .4rem; }
  .bay-editor-row { grid-template-columns: repeat(2, minmax(140px, 1fr)); }
}
.layout-tabs .nav-link { white-space: nowrap; }
.department-dot { display: inline-block; width: .85rem; height: .85rem; margin-right: .45rem; border-radius: 50%; background: var(--department-color); }
.visual-editor-viewport { position: relative; height: 70vh; min-height: 520px; overflow: hidden; border: 1px solid #adb5bd; border-radius: .5rem; background: #fff; touch-action: none; cursor: default; }
.visual-editor-viewport[data-tool="pan"], .visual-editor-viewport.temporary-pan { cursor: grab; }
.visual-editor-viewport.is-panning { cursor: grabbing; }
.visual-editor-canvas { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; background-image: linear-gradient(to right, #e9ecef 1px, transparent 1px), linear-gradient(to bottom, #e9ecef 1px, transparent 1px); background-size: 18px 18px; }
.visual-layer { position: absolute; inset: 0; pointer-events: none; }
.visual-department-layer, .visual-object-layer, .visual-drag-preview-layer { pointer-events: none; }
.visual-department-layer > *, .visual-object-layer > * { pointer-events: auto; }
.visual-drag-preview-layer { z-index: 20; }
.visual-selection-marquee { position: absolute; left: calc(var(--x) * 18px); top: calc(var(--y) * 18px); width: calc(var(--w) * 18px); height: calc(var(--h) * 18px); border: 2px dashed #0d6efd; background: rgb(13 110 253 / 14%); pointer-events: none; }
.visual-drag-preview { z-index: 21 !important; opacity: .9; pointer-events: none !important; filter: drop-shadow(0 4px 5px rgb(0 0 0 / 35%)); }
.visual-drag-preview.invalid { outline: 5px solid #dc3545 !important; }
.visual-drag-preview.overlap-preview { box-shadow: 0 0 0 6px #dc3545 !important; }
.visual-drag-origin { opacity: .3 !important; }
.visual-reference-background { position: absolute; z-index: 0; width: 100%; height: 100%; transform-origin: 0 0; object-fit: contain; pointer-events: none; user-select: none; }
.visual-reference-background.editable { outline: 4px dashed #0d6efd; outline-offset: -4px; pointer-events: auto; cursor: move; }
.visual-editor-canvas.hide-background .visual-background-layer { display: none; }
.visual-editor-canvas.hide-departments .visual-department-layer { display: none; }
.visual-editor-canvas.hide-aisles .visual-aisle { display: none; }
.visual-editor-canvas.hide-bays .visual-bay { display: none; }
.visual-editor-canvas.hide-labels .visual-bay span, .visual-editor-canvas.hide-labels .location-type-marker { visibility: hidden; }
.visual-editor-canvas.hide-grid { background-image: none; }
.visual-editor-canvas.hide-overlaps .overlapping, .visual-editor-canvas.hide-overlaps .overlap-preview { box-shadow: none !important; }
.visual-editor-canvas.hide-selection .selected { outline: none !important; }
.visual-editor-canvas .visual-department { opacity: var(--visual-department-opacity, .35); }
.visual-editor-canvas.labels-never .visual-bay span, .visual-editor-canvas.labels-never .location-type-marker { visibility: hidden; }
.visual-editor-canvas.labels-always .visual-bay span, .visual-editor-canvas.labels-always .location-type-marker { visibility: visible; }
.visual-background-settings, .visual-layer-toggles { display: grid; gap: .45rem; }
.visual-department, .visual-aisle { position: absolute; left: calc(var(--x) * 18px); top: calc(var(--y) * 18px); width: calc(var(--w) * 18px); height: calc(var(--h) * 18px); touch-action: none; }
.visual-department { z-index: 1; border: 0; background: transparent; color: #212529; text-align: left; vertical-align: top; padding: 0; }
.visual-department svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.visual-department .department-footprint-fill { fill: color-mix(in srgb, var(--color) 12%, transparent); stroke: none; }
.visual-department .department-footprint-outline { fill: none; stroke: color-mix(in srgb, var(--color) 70%, transparent); stroke-width: .08; }
.visual-department span { position: absolute; left: .25rem; top: .25rem; background: #fff; padding: .1rem .25rem; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.visual-aisle { z-index: 2; border: 3px solid var(--color); background: color-mix(in srgb, var(--color) 35%, white); padding: 0; font-size: .7rem; font-weight: 700; overflow: visible; }
.visual-aisle span { position: absolute; left: 50%; top: -1.55rem; display: block; min-width: max-content; transform: translateX(-50%); border-radius: .2rem; background: #212529; color: #fff; padding: .1rem .32rem; box-shadow: 0 1px 3px rgb(0 0 0 / 25%); pointer-events: none; }
.visual-aisle.selected { outline: 4px solid #0d6efd; outline-offset: 2px; z-index: 4; }
.visual-aisle.overlapping { box-shadow: 0 0 0 5px #dc3545; }
.visual-editor-canvas .map-aisle { pointer-events: auto; cursor: move; }
.visual-editor-canvas .map-bay { pointer-events: none; cursor: default; touch-action: none; overflow: visible; font-size: .62rem; }
.visual-editor-canvas .map-bay { left: calc(var(--x) * 18px + 3px); top: calc(var(--y) * 18px + 3px); width: calc(var(--location-width, 1) * 18px - 6px); height: calc(var(--location-height, 1) * 18px - 6px); }
.visual-editor-canvas .map-bay.fractional-bay { left: calc(var(--x) * 18px); top: calc(var(--y) * 18px); width: calc(var(--location-width, 1) * 18px); height: calc(var(--location-height, 1) * 18px); transform: scale(.9); transform-origin: center; }
.visual-editor-canvas .map-bay .location-type-marker { display: none; }
.visual-editor-canvas .map-bay span { position: relative; z-index: 2; min-width: max-content; max-width: none; padding: 1px 3px; border-radius: 999px; background: rgb(255 255 255 / 88%); color: #212529; line-height: 1; box-shadow: 0 0 0 1px rgb(0 0 0 / 12%); }
.visual-editor-canvas .visual-bay.selected { z-index: 6; outline: 4px solid #0d6efd; outline-offset: 2px; }
.visual-editor-canvas.bay-workspace .visual-department-layer, .visual-editor-canvas.bay-workspace .visual-background-layer { display: none; }
.visual-editor-canvas.bay-workspace .visual-aisle { z-index: 1; pointer-events: none; cursor: default; background: color-mix(in srgb, var(--color) 18%, white); }
.visual-editor-canvas.bay-workspace .visual-aisle span { top: -1.8rem; font-size: .85rem; }
.visual-editor-canvas.bay-workspace .visual-bay { z-index: 4; pointer-events: auto; cursor: move; }
.visual-toolbar label { min-width: 120px; font-size: .8rem; color: #6c757d; }
@media (max-width: 768px) { .visual-toolbar .card-body { display: grid !important; grid-template-columns: 1fr 1fr; } .visual-toolbar button { width: 100%; } }
.visual-editor-shell { display: grid; grid-template-columns: 142px minmax(0, 1fr) 270px; gap: .75rem; height: calc(100vh - 205px); min-height: 620px; }
.visual-side-toolbar, .visual-properties-panel { overflow-y: auto; border: 1px solid #ced4da; border-radius: .5rem; background: #fff; padding: .65rem; }
.visual-side-toolbar { display: flex; flex-direction: column; gap: .75rem; }
.visual-tool-group { display: grid; gap: .3rem; padding-bottom: .65rem; border-bottom: 1px solid #dee2e6; }
.visual-tool-group small { color: #6c757d; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.visual-tool-group .btn { min-height: 38px; display: flex; align-items: center; gap: .4rem; text-align: left; }
.visual-workspace { min-width: 0; display: flex; flex-direction: column; }
.visual-workspace .visual-editor-viewport { flex: 1; height: auto; min-height: 480px; }
.visual-view-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: .5rem; padding: .4rem .65rem; border: 1px solid #dee2e6; border-radius: .4rem; background: #fff; font-size: .78rem; color: #6c757d; }
.visual-view-controls label { display: flex; align-items: center; gap: .35rem; }
.visual-view-controls .form-select { min-height: 34px; padding-top: .2rem; padding-bottom: .2rem; }
.visual-properties-panel { display: flex; flex-direction: column; gap: .55rem; }
.visual-properties-panel label { font-size: .78rem; color: #6c757d; }
.visual-properties-panel .form-check { color: #212529; }
.visual-panel-tabs { gap: .35rem; }
.visual-panel-tabs .nav-link { min-height: 36px; padding: .35rem .65rem; }
.visual-panel-section { display: flex; flex-direction: column; gap: .55rem; }
.visual-bay-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; }
.visual-bay-editor-list { display: grid; gap: .55rem; }
.visual-bay-editor-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem; padding: .55rem; border: 1px solid #dee2e6; border-radius: .4rem; background: #f8f9fa; }
.visual-bay-editor-row h3 { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin: 0; font-size: .9rem; }
.visual-bay-editor-row .visual-bay-row-wide { grid-column: 1 / -1; }
.visual-bay-editor-row .btn { min-height: 34px; }
.visual-desktop-notice { display: none; }
@media (max-width: 900px) { .visual-desktop-notice { display: block; } .visual-editor-shell { grid-template-columns: 110px minmax(650px, 1fr) 250px; overflow-x: auto; } }

.login-page { min-height: 100vh; background: linear-gradient(135deg, #f5f7f9, #dfe7ef); }
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.login-card { width: min(100%, 420px); border: 0; border-radius: 1rem; }