/* =================================================================
		   INSPECTION MANAGEMENT SUITE — STYLESHEET v3
		   Product-grade design system.
		   
		   Structure:
			 1. Design tokens
			 2. Reset & base
			 3. Layout
			 4. Top bar
			 5. Settings drawer
			 6. Navigation
			 7. Buttons
			 8. Form controls
			 9. Field groups
			10. Cards
			11. Panels
			12. Tables (batch)
			13. Report (A4)
			14. Batch tools
			15. Photo grid
			16. Signature pads
			17. Modals
			18. Toasts
			19. Photo viewer
			20. Footer
			21. Themes
			22. Print
			23. Responsive
		   ================================================================= */

		/* ── 1. DESIGN TOKENS ────────────────────────────────────────── */
		:root {
			color-scheme: dark;

			/* Spacing — 4px base. */
			--space-0:  0;
			--space-1:  2px;
			--space-2:  4px;
			--space-3:  6px;
			--space-4:  8px;
			--space-5:  12px;
			--space-6:  16px;
			--space-7:  20px;
			--space-8:  24px;
			--space-9:  32px;
			--space-10: 40px;

			/* Type scale. */
			--type-micro: max(10px, calc(var(--app-font-size) * .72));
			--type-body:  var(--app-font-size);
			--type-title: calc(var(--app-font-size) * 1.15);
			--type-display: calc(var(--app-font-size) * 1.45);

			--leading-tight:  1.2;
			--leading-normal: 1.5;

			--weight-regular:  400;
			--weight-medium:   500;
			--weight-semibold: 600;
			--weight-bold:     700;
			--weight-black:    900;

			/* Modern Design System Radii */
			--radius-1: 3px;
			--radius-2: 6px;
			--radius-3: 10px;
			--radius-4: 14px;
			--radius-sm: var(--radius-2); /* legacy alias — keep for inline uses */
			--radius-full: 9999px;

			/* Modern Ambient Elevation */
			--shadow-1: 0 1px 3px rgba(0,0,0,.18), 0 1px 2px rgba(0,0,0,.12);
			--shadow-2: 0 4px 8px -1px rgba(0,0,0,.22), 0 2px 4px -2px rgba(0,0,0,.14);
			--shadow-3: 0 10px 24px -3px rgba(0,0,0,.28), 0 4px 8px -3px rgba(0,0,0,.18);
			--shadow-4: 0 20px 36px -4px rgba(0,0,0,.36), 0 8px 16px -4px rgba(0,0,0,.24);

			/* Motion. */
			--motion-instant: 60ms;
			--motion-fast:    120ms;
			--motion-normal:  180ms;
			--motion-slow:    260ms;

			--ease-out:    cubic-bezier(.16, 1, .3, 1);
			--ease-in-out: cubic-bezier(.4, 0, .2, 1);

			/* Z-index. */
			--z-raised:  10;
			--z-sticky:  100;
			--z-drawer:  500;
			--z-modal:   1000;
			--z-toast:   2000;

			/* Strokes. */
			--stroke-hairline: 1px;
			--stroke-thick:    2px;
			--stroke-accent:   4px;

			/* Base palette — European Technical Slate (Precision Darkroom) */
			--bg:            #0b0f17;
			--surface:       #111827;
			--panel:         #1a2234;
			--cell:          #0f172a;
			--cell-hover:    #1e293b;
			--ink:           #f8fafc;
			--ink-muted:     #94a3b8;
			--ink-subtle:    #64748b;
			--hairline:      #1e293b;
			--hairline-soft: #162032;
			--hairline-strong: #334155;
			--accent:        #38bdf8;
			--accent-hover:  #0ea5e9;
			--accent-subtle: rgba(56, 189, 248, .12);
			--pass:          #10b981;
			--warn:          #f59e0b;
			--fail:          #f43f5e;
			--del-red:       #e11d48;
			--preview-bg:    #030712;

			

			/* App chrome — High-precision European Technical System Stack */
			--app-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, "Helvetica Neue", Arial, sans-serif;
			--font-ui:         var(--app-font-family);
			--font-data:       "Consolas", "SF Mono", "JetBrains Mono", "Liberation Mono", Menlo, monospace;
			--app-font-size:   clamp(12px, .35vw + 9px, 15px);

			--ui-font-xs: var(--type-micro);
			--ui-font-sm: calc(var(--app-font-size) * .88);
			--ui-font-md: var(--type-body);
			--ui-font-lg: var(--type-title);
			--ui-input-h: calc(var(--app-font-size) * 2.3);
			--ui-hdr-h2:  calc(var(--ui-font-sm) * 2.2);

			/* Statutory Report Typography — Swiss DIN Precision Standard */
			--report-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "Arial Nova", Arial, sans-serif;
			--report-font-size:   6.9pt;
			--report-line-height: 1.16;
			--report-cell-padding: 2.4px 4.2px;
			--report-accent: #0f2847;

			/* Preview zoom — JS sets this dynamically. */
			--preview-zoom: .65;
		}

		/* ── 2. RESET & BASE ────────────────────────────────────────── */
		*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
		html { -webkit-text-size-adjust: 100%; }

		body {
			font-family: var(--app-font-family);
			font-size: var(--type-body);
			line-height: var(--leading-normal);
			background: var(--bg);
			color: var(--ink);
			min-height: 100vh;
			display: flex;
			flex-direction: column;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
			accent-color: var(--accent);
		}

		button, input, select, textarea, optgroup {
			font-family: inherit;
		}

		::selection { background: var(--accent-subtle); color: var(--ink); }

		::-webkit-scrollbar { width: 10px; height: 10px; }
		::-webkit-scrollbar-track { background: transparent; }
		::-webkit-scrollbar-thumb {
			background: var(--hairline-strong);
			border: 2px solid var(--bg);
			border-radius: 6px;
		}
		::-webkit-scrollbar-thumb:hover { background: var(--ink-subtle); }

		button, .btn, .icon-btn, .micro-toggle, .photo-thumb, .photo-del,
		.thumb-del, select, .lock-btn, .sig-clear, .pv-close, .sig-upload-btn {
			touch-action: manipulation;
		}

		.sr-only {
			position: absolute; width: 1px; height: 1px;
			padding: 0; margin: -1px; overflow: hidden;
			clip: rect(0 0 0 0); white-space: nowrap; border: 0;
		}
		.skip-link {
			position: absolute; left: -9999px; top: 0;
			background: var(--accent); color: #fff;
			padding: var(--space-3) var(--space-5);
			font-size: var(--ui-font-sm); font-weight: var(--weight-bold);
			z-index: var(--z-toast); text-decoration: none;
		}
		.skip-link:focus { left: 0; }

		:focus-visible {
			outline: 2px solid var(--accent);
			outline-offset: 2px;
			border-radius: var(--radius-1);
		}

		@media (min-width: 700px) and (min-height: 501px) {
			body { height: 100vh; overflow: auto; }
		}
		@media (max-width: 699px), (max-height: 500px) {
			body { height: auto; min-height: 100vh; overflow-y: auto; overflow-x: auto; }
		}

		/* ── 3. LAYOUT ──────────────────────────────────────────────── */
		.workspace {
			display: flex;
			flex-direction: column;
			width: 100%;
			flex: 1 1 auto;
			min-height: 0;
			min-width: 0;
		}

		.left-pane {
			background: var(--bg);
			display: flex;
			flex-direction: column;
			overflow-y: auto;
			overflow-x: auto;
			min-height: 0;
			min-width: 0;
			overscroll-behavior: auto;
			touch-action: pan-x pan-y;
		}

		.form-scroll-body {
			display: flex;
			flex-direction: column;
			min-width: 100%;
			width: 100%;
			box-sizing: border-box;
			zoom: var(--form-zoom, 1);
		}

		.right-pane {
			background: var(--preview-bg);
			padding: 0;
			overflow-y: auto;
			overflow-x: auto;
			flex: 1 1 auto;
			min-width: 0;
			min-height: 360px;
			overscroll-behavior: auto;
			text-align: center;
		}

		@media (min-width: 700px) {
			.workspace { overflow: auto; }

			.workspace.layout-beside { flex-direction: row; }
			.workspace.layout-beside .left-pane {
				width: 45%;
				height: 100%;
				border-right: var(--stroke-hairline) solid var(--hairline);
				overflow-y: auto;
				overflow-x: auto;
				overscroll-behavior: auto;
			}
			.workspace.layout-beside .right-pane {
				width: 55%;
				height: 100%;
				overflow: auto;
			}

			.workspace.layout-below { overflow-y: auto; }
			.workspace.layout-below .left-pane {
				width: 100%;
				height: auto;
				overflow: visible;
				border-bottom: var(--stroke-thick) solid var(--hairline);
				flex: 0 0 auto;
			}
			.workspace.layout-below .right-pane {
				width: 100%;
				height: auto;
				min-height: 400px;
				overflow: auto;
				flex: 0 0 auto;
			}

			.workspace.layout-folded { flex-direction: row; }
			.workspace.layout-folded .left-pane { width: 100%; height: 100%; overflow-y: auto; }
			/* Folded no longer hides the preview outright -- that made it a one-way
			   door, since the only way back was to cycle layouts. It docks a
			   handle on the right edge instead (see .peek-handle); tapping that
			   handle adds .peek-open and slides the pane in over the form at full
			   width. Same button, same function, pulls it back again.
			   Scoped to screen: print keeps its own 100% A4 rules further down,
			   which force .right-pane visible regardless of this class. */
			.workspace.layout-folded:not(.peek-open) .right-pane { display: none !important; }
			.workspace.layout-folded.peek-open .right-pane {
				display: flex !important;
				flex-direction: column !important;
				align-items: center !important;
				position: fixed;
				/* The app bar (.master-switch-bar) is painted above the pane, so
				   the pane starts below it -- otherwise the gauge banner with the
				   zoom controls sits exactly underneath the bar and is invisible.
				   --peek-top is measured from the bar, see updatePeekOffset(). */
				top: var(--peek-top, 0px);
				right: 0;
				bottom: 0;
				left: 0;
				z-index: 60;
				width: 100vw;
				/* !important on purpose: the short-viewport block further down
				   sets .right-pane overflow:visible !important, and at 500px or
				   less of viewport height that block wins on specificity, which
				   left the peek with no scroll container at all -- the wheel then
				   chained to the document and scrolled the form behind. */
				overflow-y: auto !important;
				overflow-x: hidden !important;
				overscroll-behavior: contain;
				/* display cannot transition, so the slide is an entrance
				   animation rather than a transform transition. */
				animation: peekSlideIn .18s ease-out;
			}
			/* Keep the zoom controls reachable while scrolling a long report --
			   otherwise they scroll away with the first page. */
			.workspace.layout-folded.peek-open .a4-gauge-banner {
				position: sticky;
				top: 0;
				z-index: 10;
				width: 100%;
				max-width: 794px;
				margin: 0 auto;
				flex: 0 0 auto !important;
			}
		}

		/* While the peek is open the form behind must not move. overflow:hidden
		   (rather than a position:fixed body lock) because it does not reset
		   scrollTop, so the form stays exactly where the inspector left it. */
		html.peek-locked,
		html.peek-locked body { overflow: hidden !important; }

		@keyframes peekSlideIn {
			from { transform: translateX(3%); opacity: 0; }
			to   { transform: none;              opacity: 1; }
		}
		@media (prefers-reduced-motion: reduce) {
			.workspace.layout-folded.peek-open .right-pane { animation: none; }
		}

		/* Docked peek handle. Shown by JS only while the effective layout is
		   folded and the preview is retracted; visibility is not tied to a
		   .workspace class because a transformed ancestor would re-anchor the
		   fixed positioning. */
		.peek-handle {
			position: fixed;
			right: 0;
			top: 50%;
			transform: translateY(-50%);
			z-index: 70;
			display: none;
			align-items: center;
			gap: 6px;
			padding: 14px 6px;
			background: var(--surface);
			color: var(--ink);
			border: var(--stroke-hairline) solid var(--hairline);
			border-right: 0;
			border-radius: var(--radius-md) 0 0 var(--radius-md);
			box-shadow: -2px 0 10px rgba(0, 0, 0, .18);
			cursor: pointer;
			font-family: var(--font-ui);
			font-size: var(--ui-font-xs);
			letter-spacing: .06em;
			text-transform: uppercase;
		}
		.peek-handle:hover { background: var(--surface-2); }
		.peek-handle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
		.peek-handle .peek-handle-label { writing-mode: vertical-rl; }
		.peek-handle.on { display: inline-flex; }
		/* The peek pane is 100vw and would otherwise bury this handle, leaving
		   no visible way back out. It stays on top for the whole time and turns
		   into the close control. */
		.peek-handle.on { background: var(--accent); color: #fff; }

		@media (min-width: 992px) {
			.workspace.layout-beside .right-pane { overscroll-behavior: contain; }
			.workspace.layout-beside .left-pane  { overscroll-behavior: auto; }
		}

		/* ── 4. TOP BAR ─────────────────────────────────────────────── */
		.master-switch-bar {
			display: flex;
			align-items: center;
			gap: var(--space-4);
			padding: var(--space-3) var(--space-6);
			background: var(--surface);
			border-bottom: var(--stroke-hairline) solid var(--hairline);
			flex-shrink: 0;
			min-height: 48px;
			position: relative;
			z-index: var(--z-sticky);
		}

		.brand-group {
			display: flex;
			align-items: center;
			gap: var(--space-4);
			flex: 0 0 auto;
		}

		.status-dot {
			width: 8px;
			height: 8px;
			background: var(--pass);
			border-radius: var(--radius-full);
			box-shadow: 0 0 0 2px color-mix(in srgb, var(--pass) 25%, transparent);
		}

		.brand-title {
			font-size: var(--type-body);
			font-weight: var(--weight-semibold);
			color: var(--ink);
			letter-spacing: -0.01em;
			white-space: nowrap;
		}

		.engine-tabs {
			display: inline-flex;
			align-items: center;
			gap: var(--space-1);
			background: var(--panel);
			padding: 3px;
			border-radius: var(--radius-3);
			border: var(--stroke-hairline) solid var(--hairline);
			flex: 0 0 auto;
		}

		.engine-tab-btn {
			background: transparent;
			border: 0;
			color: var(--ink-muted);
			padding: var(--space-3) var(--space-5);
			font-size: var(--ui-font-sm);
			font-weight: var(--weight-semibold);
			cursor: pointer;
			border-radius: var(--radius-2);
			font-family: inherit;
			white-space: nowrap;
			min-height: calc(var(--ui-input-h) * .9);
			display: inline-flex;
			align-items: center;
			gap: var(--space-2);
			transition: background-color var(--motion-fast) var(--ease-in-out),
						color var(--motion-fast) var(--ease-in-out);
		}
		.engine-tab-btn:hover { color: var(--ink); }
		.engine-tab-btn.active {
			background: var(--accent);
			color: #fff;
		}

		/* Legacy .brand-group + .status-dot pairing kept for JS compatibility */
		#appHeaderTitle { display: none; }

		/* ── 5. SETTINGS DRAWER (formatting toolbar) ───────────────── */
		.formatting-toolbar {
			display: none;
			flex-wrap: wrap;
			gap: var(--space-3) var(--space-5);
			align-items: center;
			padding: var(--space-3) var(--space-5);
			background: var(--panel);
			border-bottom: var(--stroke-hairline) solid var(--hairline);
			font-size: var(--ui-font-sm);
			flex-shrink: 0;
		}
		body.header-drawer-open .formatting-toolbar { display: flex; }

		.toolbar-section {
			display: inline-flex;
			align-items: center;
			gap: var(--space-2);
			flex: 0 0 auto;
		}
		.toolbar-section-badge {
			font-size: 9px;
			font-weight: 800;
			letter-spacing: .06em;
			text-transform: uppercase;
			color: var(--accent);
			background: var(--surface);
			border: var(--stroke-hairline) solid var(--hairline);
			padding: 3px 6px;
			border-radius: var(--radius-sm);
			white-space: nowrap;
		}
		.toolbar-status-group {
			margin-left: auto;
			display: inline-flex;
			align-items: center;
			gap: var(--space-3);
		}
		.toolbar-actions-group {
			display: inline-flex;
			align-items: center;
			gap: var(--space-2);
			flex-wrap: wrap;
		}
		.toolbar-actions-group .btn {
			font-size: 11px;
			height: 28px;
			min-height: 28px;
			padding: 2px 10px;
		}

		.toolbar-group {
			display: inline-flex;
			align-items: center;
			gap: var(--space-2);
			background: var(--surface);
			padding: 3px var(--space-3);
			border-radius: var(--radius-2);
			border: var(--stroke-hairline) solid var(--hairline);
			flex: 0 0 auto;
			min-width: 0;
		}

		.formatting-toolbar label {
			font-weight: var(--weight-bold);
			color: var(--ink-muted);
			font-size: 10px;
			text-transform: uppercase;
			letter-spacing: .04em;
			white-space: nowrap;
		}

		.formatting-toolbar select {
			background: var(--bg);
			color: var(--ink);
			border: var(--stroke-hairline) solid var(--hairline);
			padding: 2px var(--space-2);
			border-radius: var(--radius-sm);
			font-size: 11px;
			font-family: inherit;
			cursor: pointer;
			height: 26px;
			min-height: 26px;
			flex: 0 0 auto;
			width: auto;
			max-width: 220px;
		}

		.save-indicator {
			font-family: var(--font-data);
			font-size: var(--ui-font-xs);
			color: var(--ink-muted);
			white-space: nowrap;
			padding: 0 var(--space-2);
			letter-spacing: .02em;
		}

		#offlineIndicator {
			font-size: var(--ui-font-xs);
			font-weight: var(--weight-semibold);
			padding: 0 var(--space-2);
			white-space: nowrap;
		}

		/* ── 6. NAVIGATION ──────────────────────────────────────────── */
		.nav-tabs {
			display: flex;
			gap: var(--space-1);
			flex: 1 1 auto;
			justify-content: center;
			min-width: 0;
			overflow-x: auto;
			scrollbar-width: none;
		}
		.nav-tabs::-webkit-scrollbar { display: none; }

		.nav-btn {
			background: transparent;
			border: 0;
			color: var(--ink-muted);
			padding: var(--space-3) var(--space-5);
			font-size: var(--ui-font-sm);
			font-weight: var(--weight-medium);
			cursor: pointer;
			border-radius: var(--radius-2);
			font-family: inherit;
			white-space: nowrap;
			flex: 0 0 auto;
			min-height: calc(var(--ui-input-h) * .9);
			display: inline-flex;
			align-items: center;
			transition: background-color var(--motion-fast) var(--ease-in-out),
						color var(--motion-fast) var(--ease-in-out);
		}
		.nav-btn:hover { background: var(--cell); color: var(--ink); }
		.nav-btn.active {
			background: var(--accent-subtle);
			color: var(--accent);
			font-weight: var(--weight-semibold);
		}

		/* Legacy header block — cleared. Everything moved to top bar. */
		header.app-bar { display: none !important; }

		/* ── 7. BUTTONS ─────────────────────────────────────────────── */
		.btn {
			background: var(--panel);
			color: var(--ink);
			border: var(--stroke-hairline) solid var(--hairline);
			padding: var(--space-3) var(--space-5);
			font-size: var(--ui-font-sm);
			font-weight: var(--weight-semibold);
			font-family: inherit;
			border-radius: var(--radius-2);
			cursor: pointer;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			gap: var(--space-2);
			min-height: var(--ui-input-h);
			white-space: nowrap;
			line-height: 1;
			transition: background-color var(--motion-fast) var(--ease-in-out),
						border-color     var(--motion-fast) var(--ease-in-out),
						color            var(--motion-fast) var(--ease-in-out);
		}
		.btn:hover:not(:disabled) {
			border-color: var(--hairline-strong);
			background: var(--cell-hover);
		}
		.btn:active:not(:disabled) {
			transform: translateY(1px);
			transition: transform var(--motion-instant) linear;
		}
		.btn:disabled { opacity: .4; cursor: not-allowed; }

		.btn-accent {
			background: var(--accent);
			border-color: var(--accent);
			color: #fff;
		}
		.btn-accent:hover:not(:disabled) {
			background: var(--accent-hover);
			border-color: var(--accent-hover);
			color: #fff;
		}

		.btn-success {
			background: var(--pass);
			border-color: var(--pass);
			color: #fff;
		}
		.btn-success:hover:not(:disabled) {
			background: color-mix(in srgb, var(--pass) 85%, #000);
			border-color: color-mix(in srgb, var(--pass) 85%, #000);
			color: #fff;
		}

		.btn-danger {
			background: var(--fail);
			border-color: var(--fail);
			color: #fff;
		}
		.btn-danger:hover:not(:disabled) {
			background: color-mix(in srgb, var(--fail) 85%, #000);
			border-color: color-mix(in srgb, var(--fail) 85%, #000);
			color: #fff;
		}

		/* Square icon button — top bar, toolbars. */
		.icon-btn,
		.btn-icon {
			background: transparent;
			border: var(--stroke-hairline) solid transparent;
			color: var(--ink-muted);
			padding: 0;
			width: 34px;
			height: 34px;
			min-width: 34px;
			min-height: 34px;
			border-radius: var(--radius-2);
			cursor: pointer;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			position: relative;
			font-family: inherit;
			transition: background-color var(--motion-fast) var(--ease-in-out),
						color            var(--motion-fast) var(--ease-in-out),
						border-color     var(--motion-fast) var(--ease-in-out);
		}
		.icon-btn:hover:not(:disabled),
		.btn-icon:hover:not(:disabled) {
			background: var(--cell);
			color: var(--ink);
			border-color: var(--hairline);
		}
		.icon-btn:active:not(:disabled),
		.btn-icon:active:not(:disabled) {
			transform: translateY(1px);
			transition: transform var(--motion-instant) linear;
		}
		.icon-btn.active,
		.btn-icon.active {
			background: var(--accent-subtle);
			color: var(--accent);
			border-color: transparent;
		}
		.icon-btn svg { width: 16px; height: 16px; display: block; }

		.theme-picker {
			position: relative;
		}
		.theme-picker select {
			display: none;
			pointer-events: none;
		}

		.master-quick-actions {
			display: flex;
			align-items: center;
			gap: var(--space-2);
			flex: 0 0 auto;
			margin-left: auto;
		}

		/* ── 8. FORM CONTROLS ───────────────────────────────────────── */
		input[type="text"],
		input[type="email"],
		input[type="number"],
		input[type="date"],
		input[type="search"],
		select,
		textarea {
			font-family: inherit;
			font-size: var(--type-body);
			color: var(--ink);
			background: var(--surface);
			border: var(--stroke-hairline) solid var(--hairline);
			border-radius: var(--radius-2);
			padding: var(--space-3) var(--space-4);
			width: 100%;
			min-height: var(--ui-input-h);
			transition: border-color var(--motion-fast) var(--ease-in-out),
						background-color var(--motion-fast) var(--ease-in-out);
			outline: none;
		}
		input:hover:not(:disabled):not([readonly]),
		select:hover:not(:disabled),
		textarea:hover:not(:disabled) {
			border-color: var(--hairline-strong);
		}
		input:focus,
		select:focus,
		textarea:focus {
			border-color: var(--accent);
			box-shadow: 0 0 0 3px var(--accent-subtle);
		}
		input:disabled, select:disabled, textarea:disabled {
			opacity: .4;
			background: var(--panel);
			cursor: not-allowed;
			border-style: dashed;
		}
		input[readonly] { background: var(--panel); color: var(--ink-muted); }
		textarea { min-height: calc(var(--ui-input-h) * 1.9); resize: vertical; }

		.mono,
		input.mono { font-family: var(--font-data); letter-spacing: 0; }

		/* ── 9. FIELD GROUPS ────────────────────────────────────────── */
		.fg {
			display: flex;
			flex-direction: column;
			gap: var(--space-2);
			min-width: 0;
			height: 100%;
			background: var(--cell);
			border: var(--stroke-hairline) solid var(--hairline);
			border-radius: var(--radius-2);
			padding: var(--space-3) var(--space-4) var(--space-4);
		}
		.fg-hdr {
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-wrap: nowrap;
			gap: var(--space-2);
			min-height: 20px;
			margin-bottom: 2px;
		}
		.fg-title {
			font-size: var(--ui-font-xs);
			font-weight: var(--weight-semibold);
			text-transform: uppercase;
			letter-spacing: .03em;
			color: var(--ink-muted);
			min-width: 0;
			flex: 1 1 auto;
			line-height: 1.15;
			white-space: normal;
			overflow-wrap: break-word;
			word-break: normal;
		}
		.fg-title.field-required-empty::after {
			content: ' *';
			color: var(--fail);
			font-weight: var(--weight-black);
		}
		.fg:has(.field-required-empty) { border-color: var(--fail); }

		.voice-input-wrapper { display: flex; gap: var(--space-1); align-items: stretch; width: 100%; }
		.voice-input-wrapper input { flex: 1; min-width: 0; }

		.btn-mic {
			background: var(--surface);
			color: var(--ink-muted);
			border: var(--stroke-hairline) solid var(--hairline);
			border-radius: var(--radius-2);
			padding: 0 var(--space-4);
			display: inline-flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			flex-shrink: 0;
			min-height: var(--ui-input-h);
			transition: background-color var(--motion-fast) var(--ease-in-out),
						color var(--motion-fast) var(--ease-in-out);
		}
		.btn-mic:hover { color: var(--ink); border-color: var(--hairline-strong); }
		.btn-mic:active, .btn-mic.recording { background: var(--fail) !important; color: #fff; border-color: var(--fail); }


		/* ── 10. CARDS ──────────────────────────────────────────────── */
		.card {
			background: var(--surface);
			border: var(--stroke-hairline) solid var(--hairline);
			border-radius: var(--radius-3);
			padding: var(--space-5) var(--space-6);
			margin-bottom: var(--space-5);
		}
		.card h3 {
			font-size: var(--ui-font-sm);
			font-weight: var(--weight-bold);
			text-transform: uppercase;
			letter-spacing: .05em;
			color: var(--ink);
			margin-bottom: var(--space-5);
			padding-bottom: var(--space-3);
			border-bottom: var(--stroke-hairline) solid var(--hairline);
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: var(--space-4);
			flex-wrap: wrap;
		}
		.card.section-off h3 {
			margin-bottom: 0;
			border-bottom: none;
			padding-bottom: 0;
		}
		.card.section-off .card-body {
			display: none !important;
		}
		.card-note {
			font-size: var(--ui-font-sm);
			color: var(--ink-muted);
			margin-bottom: var(--space-4);
			line-height: var(--leading-normal);
		}

		/* ── 11. PANELS ─────────────────────────────────────────────── */
		.row {
			display: grid;
			grid-template-columns: repeat(12, minmax(0, 1fr));
			gap: var(--space-4);
			margin-bottom: var(--space-4);
			align-items: stretch;
		}
		.row:last-child { margin-bottom: 0; }
		.row.qrow { align-items: stretch; grid-template-columns: 5fr 7fr; }
		.row.qrow > * { grid-column: auto !important; }
		.cols-2 > * { grid-column: span 6; }
		.cols-3 > * { grid-column: span 4; }
		.cols-4 > * { grid-column: span 3; }
		.span-6 { grid-column: span 6 !important; }
		.span-3 { grid-column: span 3 !important; }
		.span-8 { grid-column: span 8 !important; }
		.span-2 { grid-column: span 2 !important; }

		@media (max-width: 900px) {
			.row.cols-4 > * { grid-column: span 6; }
			.row.cols-3 > * { grid-column: span 6; }
			.span-6 { grid-column: span 12 !important; }
			.span-3 { grid-column: span 6 !important; }
		}
		@media (max-width: 580px) {
			.row { display: flex; flex-direction: column; gap: var(--space-3); }
			.row > * { grid-column: auto !important; width: 100%; }
		}

		.qpanel {
			background: var(--panel);
			padding: var(--space-4);
			border: var(--stroke-hairline) solid var(--hairline);
			border-radius: var(--radius-2);
			display: flex;
			flex-direction: column;
			gap: var(--space-3);
			height: 100%;
			flex: 1 1 0;
		}
		.qpanel .fg { flex: 1 1 auto; min-height: 0; }
		.qpanel-head {
			font-weight: var(--weight-bold);
			font-size: var(--ui-font-xs);
			color: var(--accent);
			text-transform: uppercase;
			letter-spacing: .05em;
		}

		.micro-toggle {
			display: inline-flex;
			align-items: center;
			gap: 3px;
			padding: 1px 5px;
			border-radius: var(--radius-full);
			font-size: 9px;
			font-weight: var(--weight-bold);
			cursor: pointer;
			border: var(--stroke-hairline) solid var(--hairline);
			user-select: none;
			flex-shrink: 0;
			height: 16px;
			min-height: 16px;
			background: var(--bg);
			color: var(--ink-muted);
			margin-left: auto;
			letter-spacing: .02em;
			line-height: 1;
			transition: background-color var(--motion-fast) var(--ease-in-out),
						color var(--motion-fast) var(--ease-in-out),
						border-color var(--motion-fast) var(--ease-in-out);
		}
		.micro-toggle.on {
			background: var(--accent);
			color: #fff;
			border-color: var(--accent);
		}
		.micro-toggle.off { background: var(--bg); color: var(--ink-muted); }
		.micro-toggle:hover { border-color: var(--hairline-strong); }
		.micro-toggle.on:hover { border-color: var(--accent); }
		.micro-toggle .toggle-dot {
			width: 6px;
			height: 6px;
			border-radius: var(--radius-full);
			background: currentColor;
		}

		.tab-view { padding: var(--space-6); display: none; }
		.tab-view.active { display: block; }

		/* ── 12. TABLES ─────────────────────────────────────────────── */
		.sheet-wrap {
			overflow: auto;
			max-height: 440px;
			border: var(--stroke-hairline) solid var(--hairline);
			background: var(--surface);
			border-radius: var(--radius-2);
			color: var(--ink);
		}
		table.sheet {
			width: 100%;
			border-collapse: collapse;
			font-size: var(--ui-font-sm);
			white-space: nowrap;
		}
		table.sheet th {
			background: var(--panel);
			color: var(--ink-muted);
			padding: var(--space-4) var(--space-4);
			font-weight: var(--weight-semibold);
			font-size: var(--ui-font-xs);
			text-transform: uppercase;
			letter-spacing: .04em;
			text-align: left;
			position: sticky;
			top: 0;
			z-index: var(--z-raised);
			border-right: var(--stroke-hairline) solid var(--hairline);
			border-bottom: var(--stroke-hairline) solid var(--hairline);
		}
		table.sheet th .lock-btn { cursor: pointer; margin-left: var(--space-1); user-select: none; }
		table.sheet td {
			padding: var(--space-3) var(--space-4);
			border-bottom: var(--stroke-hairline) solid var(--hairline-soft);
			border-right: var(--stroke-hairline) solid var(--hairline-soft);
			max-width: 220px;
			overflow: hidden;
			text-overflow: ellipsis;
			vertical-align: middle;
			color: var(--ink);
		}
		table.sheet td.mono { font-family: var(--font-data); }
		table.sheet tbody tr:hover td { background: var(--cell-hover); }
		table.sheet td[contenteditable="true"]:focus {
			background: var(--accent-subtle);
			outline: 1.5px solid var(--accent);
			outline-offset: -1.5px;
		}
		table.sheet tr.selected td {
			background: var(--accent-subtle);
			box-shadow: inset 2px 0 0 var(--accent);
		}


		/* ── 14. BATCH TOOLS ────────────────────────────────────────── */
		.batch-strip {
			position: sticky;
			top: 0;
			z-index: 50;
			background: var(--surface);
			color: var(--ink);
			padding: var(--space-3) var(--space-5);
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;
			border-bottom: var(--stroke-hairline) solid var(--hairline);
			box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
			font-size: var(--ui-font-sm);
			flex-shrink: 0;
			gap: var(--space-3) var(--space-4);
		}
		.batch-strip-info {
			display: inline-flex;
			align-items: center;
			gap: var(--space-2);
			flex: 1 1 auto;
			min-width: 0;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.batch-strip-info strong {
			color: var(--accent);
			font-family: var(--font-data);
			font-weight: var(--weight-bold);
			font-variant-numeric: tabular-nums;
		}
		.batch-strip-info .mono {
			margin-left: var(--space-2);
			color: var(--accent);
			font-weight: var(--weight-bold);
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.batch-strip-actions {
			display: inline-flex;
			align-items: center;
			gap: var(--space-2);
			flex: 0 0 auto;
			flex-wrap: nowrap;
		}
		.batch-strip-actions .btn {
			padding: 3px 8px;
			min-height: 26px;
			height: 26px;
			font-size: 11px;
			line-height: 1;
		}

		.workflow-alerts {
			display: flex;
			flex-direction: column;
			gap: var(--space-2);
			margin: var(--space-3) var(--space-5) 0;
		}
		.workflow-alert {
			border: var(--stroke-hairline) solid var(--warn);
			border-left: var(--stroke-accent) solid var(--warn);
			background: var(--panel);
			color: var(--ink);
			font-size: var(--ui-font-sm);
			padding: var(--space-3) var(--space-4);
			border-radius: var(--radius-2);
			font-family: var(--font-data);
		}
		.workflow-alert.crit { border-color: var(--fail); border-left-color: var(--fail); }

		.batch-patch-box {
			background: var(--panel);
			color: var(--ink);
			border: var(--stroke-hairline) solid var(--hairline);
			border-radius: var(--radius-2);
			padding: var(--space-4);
			margin-bottom: var(--space-4);
			display: flex;
			align-items: center;
			gap: var(--space-4);
			flex-wrap: wrap;
		}
		.bp-title {
			font-weight: var(--weight-bold);
			color: var(--accent);
			text-transform: uppercase;
			font-size: var(--ui-font-xs);
			letter-spacing: .04em;
		}
		.patch-group { display: inline-flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
		.patch-group label {
			font-size: var(--ui-font-xs);
			font-weight: var(--weight-bold);
			color: var(--ink-muted);
			text-transform: uppercase;
			letter-spacing: .04em;
		}
		.batch-patch-box input,
		.batch-patch-box select {
			min-width: 90px;
			padding: var(--space-2) var(--space-3);
			font-size: var(--ui-font-sm);
			min-height: calc(var(--ui-input-h) * .9);
		}

		.range-toolbar {
			display: flex;
			align-items: center;
			gap: var(--space-4);
			background: var(--panel);
			padding: var(--space-4);
			border-radius: var(--radius-2);
			margin-bottom: var(--space-5);
			flex-wrap: wrap;
			border: var(--stroke-hairline) solid var(--hairline);
		}
		.rt-title {
			font-weight: var(--weight-bold);
			text-transform: uppercase;
			font-size: var(--ui-font-xs);
			letter-spacing: .04em;
			color: var(--ink-muted);
		}
		.range-toolbar input[type=number] {
			width: 80px;
			padding: var(--space-2) var(--space-3);
			font-weight: var(--weight-bold);
			font-size: var(--ui-font-sm);
			min-height: calc(var(--ui-input-h) * .9);
		}

		.queue-actions {
			display: flex;
			gap: var(--space-4);
			flex-wrap: wrap;
			margin-bottom: var(--space-4);
			align-items: stretch;
		}
		.queue-action-group {
			display: inline-flex;
			align-items: center;
			background: var(--panel);
			border: var(--stroke-hairline) solid var(--hairline);
			border-radius: var(--radius-2);
			padding: 3px;
			gap: 4px;
			flex-wrap: wrap;
		}
		.queue-group-title {
			font-size: var(--ui-font-xs);
			font-weight: var(--weight-bold);
			color: var(--ink-muted);
			text-transform: uppercase;
			letter-spacing: .04em;
			padding: 0 6px;
			user-select: none;
		}

		.batch-search-bar {
			display: flex;
			gap: var(--space-4);
			align-items: center;
			background: var(--panel);
			border: var(--stroke-hairline) solid var(--hairline);
			border-radius: var(--radius-2);
			padding: var(--space-3) var(--space-5);
			margin-bottom: var(--space-4);
			flex-wrap: wrap;
		}
		.batch-search-input {
			flex: 2 1 200px;
			min-width: 0;
			font-size: var(--ui-font-sm);
			min-height: var(--ui-input-h);
		}
		.batch-search-select {
			flex: 1 1 130px;
			font-size: var(--ui-font-sm);
			min-height: var(--ui-input-h);
		}
		.batch-search-count {
			font-family: var(--font-data);
			font-size: var(--ui-font-xs);
			color: var(--accent);
			font-weight: var(--weight-bold);
			white-space: nowrap;
			min-width: 60px;
			text-align: right;
		}

		/* PUWER / indications builders */
		.puwer-row-edit {
			display: grid;
			grid-template-columns: 84px minmax(0, 1fr) 84px minmax(0, 1fr) 32px;
			gap: var(--space-2);
			margin-bottom: var(--space-2);
			align-items: center;
		}
		.puwer-row-edit input, .puwer-row-edit select {
			min-height: calc(var(--ui-input-h) * .9);
			padding: var(--space-2) var(--space-3);
			font-size: var(--ui-font-sm);
		}
		.pwe-del { padding: 0; width: 32px; min-width: 32px; min-height: 32px; font-size: 15px; line-height: 1; }

		.ind-edit {
			display: grid;
			grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr) 92px 32px;
			gap: var(--space-2);
			margin-bottom: var(--space-2);
			align-items: center;
		}
		.ind-edit input, .ind-edit select {
			min-height: calc(var(--ui-input-h) * .9);
			padding: var(--space-2) var(--space-3);
			font-size: var(--ui-font-sm);
		}
		.inde-del { padding: 0; width: 32px; min-width: 32px; min-height: 32px; font-size: 15px; line-height: 1; }

		#ndtExtraCellList:empty, #extraCellList:empty { display: none !important; margin: 0 !important; padding: 0 !important; }

		.tool-readout {
			background: var(--panel);
			color: var(--ink);
			padding: var(--space-4) var(--space-5);
			border-radius: var(--radius-2);
			border: var(--stroke-hairline) solid var(--hairline);
			font-family: var(--font-data);
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;
			gap: var(--space-4);
			font-size: var(--ui-font-sm);
		}
		.tool-readout strong { color: var(--accent); font-weight: var(--weight-bold); }

		/* ── 15. PHOTO GRID ─────────────────────────────────────────── */
		.photo-grid {
			display: grid;
			gap: var(--space-4);
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
		@media (min-width: 600px) { .photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
		@media (min-width: 992px) { .photo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
		.photo-grid .fg { height: auto; }

		.photo-wrap { position: relative; }
		.photo-thumb {
			width: 100%;
			aspect-ratio: 4/3;
			border: var(--stroke-hairline) dashed var(--hairline-strong);
			border-radius: var(--radius-2);
			background: var(--cell);
			cursor: pointer;
			overflow: hidden;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0;
			transition: border-color var(--motion-fast) var(--ease-in-out);
		}
		.photo-thumb:hover { border-color: var(--accent); }
		.photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
		.photo-empty { font-size: var(--ui-font-sm); font-weight: var(--weight-bold); color: var(--ink-muted); }
		.photo-tile.has-photo .photo-thumb { border-style: solid; border-color: var(--hairline); }
		.photo-state { font-family: var(--font-data); font-size: var(--ui-font-xs); color: var(--ink-subtle); }
		.photo-del {
			position: absolute;
			top: var(--space-2);
			right: var(--space-2);
			z-index: 2;
			width: 26px;
			height: 26px;
			border-radius: var(--radius-full);
			background: var(--del-red);
			color: #fff;
			border: var(--stroke-thick) solid var(--surface);
			font-size: 12px;
			font-weight: 800;
			display: none;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			line-height: 1;
			padding: 0;
		}
		.photo-tile.has-photo .photo-del { display: inline-flex; }

		/* ── 16. SIGNATURE PADS ─────────────────────────────────────── */
		.sig-box { border: 1px solid var(--hairline); background: #fff; position: relative; border-radius: var(--radius-sm); margin-top: 2px; overflow: hidden; }
		canvas.sig-pad { width: 100%; height: 90px; display: block; touch-action: none; cursor: crosshair; }
		.sig-clear {
			position: absolute;
			top: 2px;
			right: 4px;
			font-size: var(--ui-font-xs);
			font-weight: var(--weight-bold);
			color: #dc2626;
			background: rgba(255,255,255,.9);
			padding: 2px var(--space-3);
			border: var(--stroke-hairline) solid var(--hairline);
			border-radius: var(--radius-2);
			cursor: pointer;
			user-select: none;
		}
		.sig-upload { position: relative; margin-top: var(--space-2); }
		.sig-upload-btn {
			width: 100%;
			height: 76px;
			border: var(--stroke-hairline) dashed var(--hairline-strong);
			border-radius: var(--radius-2);
			background: #fff;
			cursor: pointer;
			overflow: hidden;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: var(--space-2);
			transition: border-color var(--motion-fast) var(--ease-in-out);
		}
		.sig-upload-btn:hover { border-color: var(--accent); }
		.sig-upload-btn img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
		.sig-upload.has-img .sig-upload-btn { border-style: solid; border-color: var(--hairline); }
		.sig-upload-btn .sig-empty { font-size: var(--ui-font-sm); font-weight: var(--weight-bold); color: #64748b; }
		.sig-upload .thumb-del { position: absolute; top: var(--space-2); right: var(--space-2); }
		.thumb-del {
			position: absolute;
			top: var(--space-2);
			right: var(--space-2);
			width: 26px;
			height: 26px;
			border-radius: var(--radius-full);
			background: var(--del-red);
			color: #fff;
			border: var(--stroke-thick) solid var(--surface);
			font-size: 12px;
			font-weight: 800;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			line-height: 1;
			padding: 0;
		}

		/* ── 17. MODALS ─────────────────────────────────────────────── */
		dialog {
			background: var(--surface);
			color: var(--ink);
			border: var(--stroke-hairline) solid var(--hairline);
			border-radius: var(--radius-3);
			padding: 0;
			max-width: min(92vw, 720px);
			width: 100%;
			font-family: inherit;
			color-scheme: inherit;
			box-shadow: var(--shadow-3);
			max-height: 88vh;
		}
		dialog::backdrop { background: rgba(0, 0, 0, .65); backdrop-filter: blur(2px); }

		/* ── 18. TOASTS ─────────────────────────────────────────────── */
		.toast-container {
			position: fixed;
			bottom: var(--space-7);
			right: var(--space-7);
			z-index: var(--z-toast);
			display: flex;
			flex-direction: column;
			gap: var(--space-3);
			pointer-events: none;
			max-width: 380px;
		}
		@media (max-width: 480px) {
			.toast-container { left: var(--space-5); right: var(--space-5); bottom: var(--space-5); max-width: none; }
		}
		.toast-item {
			background: var(--surface);
			color: var(--ink);
			border: var(--stroke-hairline) solid var(--hairline);
			padding: var(--space-4) var(--space-5);
			border-radius: var(--radius-2);
			font-size: var(--ui-font-sm);
			font-weight: var(--weight-medium);
			display: flex;
			align-items: center;
			gap: var(--space-3);
			pointer-events: auto;
			opacity: 0;
			transform: translateY(8px);
			transition: opacity var(--motion-normal) var(--ease-out),
						transform var(--motion-normal) var(--ease-out);
			box-shadow: var(--shadow-2);
		}
		.toast-item.show { opacity: 1; transform: translateY(0); }
		.toast-success { border-left: var(--stroke-accent) solid var(--pass); }
		.toast-error   { border-left: var(--stroke-accent) solid var(--fail); }
		.toast-info    { border-left: var(--stroke-accent) solid var(--accent); }
		.toast-warn    { border-left: var(--stroke-accent) solid var(--warn); }

		/* ── 19. PHOTO VIEWER ───────────────────────────────────────── */
		#photoViewer {
			position: fixed;
			inset: 0;
			background: rgba(0,0,0,.85);
			display: none;
			align-items: center;
			justify-content: center;
			z-index: var(--z-modal);
			padding: var(--space-7);
		}
		#photoViewer.open { display: flex; }
		.pv-frame {
			position: relative;
			background: var(--surface);
			border: var(--stroke-hairline) solid var(--hairline);
			border-radius: var(--radius-3);
			padding: var(--space-5);
			max-width: min(92vw, 900px);
			max-height: 90vh;
			overflow: auto;
			display: flex;
			flex-direction: column;
			gap: var(--space-4);
			box-shadow: var(--shadow-3);
		}
		.pv-frame img { max-width: 100%; max-height: 68vh; object-fit: contain; background: #000; border-radius: var(--radius-2); }
		.pv-close {
			position: absolute;
			top: calc(var(--space-3) * -1);
			right: calc(var(--space-3) * -1);
			width: 32px;
			height: 32px;
			border-radius: var(--radius-full);
			background: var(--del-red);
			color: #fff;
			border: var(--stroke-thick) solid var(--surface);
			font-size: 13px;
			font-weight: 800;
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
			line-height: 1;
			padding: 0;
		}
		.pv-cap { font-family: var(--font-data); font-size: var(--ui-font-sm); color: var(--ink-muted); }
		.pv-actions { display: flex; gap: var(--space-3); justify-content: flex-end; flex-wrap: wrap; }

		/* ── 20. FOOTER ─────────────────────────────────────────────── */
		.app-footer {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: var(--space-6);
			padding: var(--space-5) var(--space-6);
			background: var(--surface);
			border-top: var(--stroke-hairline) solid var(--hairline);
			color: var(--ink-muted);
			font-size: var(--ui-font-sm);
			flex-shrink: 0;
			flex-wrap: wrap;
		}
		.footer-brand-block { display: flex; align-items: center; gap: var(--space-4); }
		.footer-logo {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 32px;
			height: 32px;
			background: var(--accent);
			color: #fff;
			font-weight: var(--weight-black);
			letter-spacing: .05em;
			border-radius: var(--radius-2);
			font-size: var(--ui-font-xs);
			flex-shrink: 0;
		}
		.footer-meta { display: flex; flex-direction: column; line-height: var(--leading-tight); }
		.footer-name { font-weight: var(--weight-semibold); color: var(--ink); font-size: var(--ui-font-sm); }
		.footer-version { font-family: var(--font-data); font-size: var(--ui-font-xs); color: var(--ink-subtle); }
		.footer-links { display: flex; gap: var(--space-2); flex-wrap: wrap; }
		.footer-link {
			background: transparent;
			border: var(--stroke-hairline) solid transparent;
			color: var(--ink-muted);
			padding: var(--space-2) var(--space-4);
			font-family: inherit;
			font-size: var(--ui-font-sm);
			font-weight: var(--weight-medium);
			border-radius: var(--radius-2);
			cursor: pointer;
			display: inline-flex;
			align-items: center;
			gap: var(--space-2);
			white-space: nowrap;
			transition: background-color var(--motion-fast) var(--ease-in-out),
						color var(--motion-fast) var(--ease-in-out),
						border-color var(--motion-fast) var(--ease-in-out);
		}
		.footer-link:hover { color: var(--accent); border-color: var(--hairline); background: var(--panel); }
		.footer-copy { font-size: var(--ui-font-xs); color: var(--ink-subtle); }


		/* ── 23. RESPONSIVE ─────────────────────────────────────────── */

		/* Tablet: shrink some paddings. */
		@media (min-width: 700px) and (max-width: 991px) {
			.card { padding: var(--space-4) var(--space-5); }
			.tab-view { padding: var(--space-5); }
			.cols-4 > * { grid-column: span 6 !important; }
			.cols-3 > * { grid-column: span 6 !important; }
			.span-8 { grid-column: span 12 !important; }
			.span-2 { grid-column: span 6 !important; }
		}

		/* Mobile and short-landscape. */
		@media (max-width: 699px), (max-height: 500px) {

			body, html {
				height: auto !important;
				min-height: 100vh !important;
				max-height: none !important;
				overflow-x: hidden !important;
				overflow-y: auto !important;
				display: block !important;
			}

			.workspace,
			.workspace.layout-beside,
			.workspace.layout-below,
			.workspace.layout-folded {
				display: block !important;
				height: auto !important;
				min-height: 0 !important;
				max-height: none !important;
				overflow: visible !important;
				flex: none !important;
			}

			.left-pane {
				display: block !important;
				width: 100% !important;
				height: auto !important;
				min-height: 0 !important;
				max-height: none !important;
				overflow: visible !important;
				border-right: 0 !important;
				border-bottom: var(--stroke-thick) solid var(--hairline) !important;
			}

			.right-pane {
				display: flex !important;
				flex-direction: column !important;
				align-items: center !important;
				width: 100% !important;
				height: auto !important;
				max-height: none !important;
				min-height: 0 !important;
				overflow: visible !important;
				padding: var(--space-5) var(--space-4) !important;
			}
			/* Below 700px, folded mode hides the preview pane until toggled or peeked. */
			.workspace.layout-folded:not(.peek-open) .right-pane {
				display: none !important;
			}
			.right-pane.pane-pannable {
				height: min(85vh, 800px) !important;
				max-height: min(85vh, 800px) !important;
				overflow: auto !important;
				overscroll-behavior: auto;
			}

			.a4-gauge-banner {
				width: 100% !important;
				max-width: 100vw !important;
				position: sticky !important;
				top: 0 !important;
				z-index: var(--z-sticky) !important;
				box-sizing: border-box !important;
				padding: var(--space-2) var(--space-3) !important;
				flex-wrap: wrap !important;
				gap: var(--space-2) !important;
				overflow-x: hidden !important;
			}
			.a4-gauge-banner > div {
				max-width: 100% !important;
				flex-wrap: wrap !important;
			}
			.a4-gauge-banner select {
				max-width: calc(100vw - 120px) !important;
				text-overflow: ellipsis !important;
			}

			#enginePreviewContainer {
				width: max-content !important;
				min-width: 0 !important;
				max-width: none !important;
				display: block !important;
				overflow: visible !important;
				height: auto !important;
				margin: 0 auto !important;
			}

			.a4-page-frame {
				width: 210mm !important;
				min-width: 210mm !important;
				max-width: 210mm !important;
				height: auto !important;
				min-height: 297mm !important;
				margin: 0 auto !important;
				zoom: var(--preview-zoom, .44) !important;
				flex-shrink: 0 !important;
			}

			.master-switch-bar {
				flex-wrap: wrap;
				padding: var(--space-3) var(--space-4);
				gap: var(--space-3);
				max-width: 100vw;
				box-sizing: border-box;
				overflow-x: hidden;
			}
			.master-switch-bar .brand-title { font-size: var(--ui-font-sm); }
			.master-switch-bar .nav-tabs {
				order: 10;
				flex: 1 1 100%;
				justify-content: flex-start;
				flex-wrap: wrap;
				padding-top: var(--space-3);
				border-top: var(--stroke-hairline) solid var(--hairline);
			}
			.master-switch-bar .nav-btn { padding: var(--space-2) var(--space-3); font-size: var(--ui-font-xs); }
			.master-switch-bar .master-quick-actions { margin-left: auto; }

			.formatting-toolbar {
				flex-direction: column;
				align-items: stretch;
				gap: var(--space-3);
				padding: var(--space-3) var(--space-4);
				width: 100%;
				max-width: 100vw;
				box-sizing: border-box;
				overflow-x: hidden;
			}
			.formatting-toolbar .toolbar-section {
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: stretch;
				gap: var(--space-2);
			}
			.formatting-toolbar .toolbar-section-badge {
				align-self: flex-start;
			}
			.formatting-toolbar .toolbar-group {
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				gap: var(--space-2);
				padding: var(--space-2) var(--space-3);
				box-sizing: border-box;
			}
			.formatting-toolbar select {
				flex: 1 1 100%;
				min-width: 0;
				max-width: 100%;
				width: 100%;
				box-sizing: border-box;
				text-overflow: ellipsis;
				white-space: nowrap;
				font-size: 12px;
			}
			.formatting-toolbar label {
				flex: 0 0 100%;
				margin-top: 4px;
				margin-bottom: -2px;
			}
			.formatting-toolbar label:first-of-type {
				margin-top: 0;
			}
			.formatting-toolbar .toolbar-status-group {
				margin-left: 0;
				width: 100%;
				justify-content: space-between;
			}
			.formatting-toolbar .toolbar-actions-group {
				width: 100%;
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: var(--space-2);
			}
			.formatting-toolbar .toolbar-actions-group .btn {
				width: 100%;
				justify-content: center;
				padding: 4px 6px;
				font-size: 11px;
				text-align: center;
				box-sizing: border-box;
			}

			.card { padding: var(--space-5) var(--space-4); }
			.card h3 { font-size: var(--ui-font-xs); }
			.tab-view { padding: var(--space-4); }

			.row > * { grid-column: span 12 !important; }
			.qpanel .row.cols-2 > * { grid-column: span 12 !important; }

			.batch-strip {
				padding: var(--space-3) var(--space-4);
				gap: var(--space-2) var(--space-3);
				flex-wrap: wrap;
				justify-content: space-between;
			}
			.batch-strip-info {
				font-size: 11px;
				flex: 1 1 auto;
				min-width: 0;
			}
			.batch-strip-info .mono {
				max-width: 140px;
			}
			.batch-strip-actions {
				flex: 0 0 auto;
			}
			.batch-strip-actions .btn {
				padding: 3px 6px;
				font-size: 10px;
			}

			.app-footer {
				flex-direction: column;
				align-items: flex-start;
				gap: var(--space-5);
				padding: var(--space-5) var(--space-4);
			}
			.footer-links { width: 100%; }
			.footer-copy { width: 100%; }

			.right-pane:fullscreen,
			.right-pane:-webkit-full-screen {
				overflow: auto !important;
				height: 100vh !important;
				width: 100vw !important;
				max-height: 100vh !important;
				display: block !important;
				padding: var(--space-4) !important;
			}
			.right-pane:fullscreen .a4-gauge-banner,
			.right-pane:-webkit-full-screen .a4-gauge-banner {
				margin: 0 auto var(--space-4) auto !important;
			}
			.right-pane:fullscreen #enginePreviewContainer {
				width: max-content !important;
				margin: 0 auto !important;
			}
			.right-pane:fullscreen .a4-page-frame { zoom: var(--preview-zoom, .65) !important; }
		}
				/* Consistent icon sizing */
				.btn svg,
				.btn-icon svg,
				.footer-link svg,
				.engine-tab-btn svg,
				.nav-btn svg {
					width: 14px;
					height: 14px;
					flex-shrink: 0;
					display: block;
				}
				.btn-icon svg { width: 16px; height: 16px; }
				.btn svg + span,
				.btn-icon svg + span { margin-left: var(--space-2); }

		/* ── MOBILE & DESKTOP CUSTOM SELECT DIALOG ─────────────── */
		.mobile-select-sheet {
			border: 1px solid var(--hairline);
			border-radius: var(--radius-3);
			background: var(--surface);
			color: var(--ink);
			padding: 0;
			margin: auto;
			width: min(92vw, 460px);
			max-height: 80vh;
			box-sizing: border-box;
			box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4), var(--shadow-overlay);
			overflow: hidden;
			display: none;
			flex-direction: column;
		}
		@media (max-width: 699px) {
			.mobile-select-sheet {
				border-radius: var(--radius-3) var(--radius-3) 0 0;
				margin: auto auto 0 auto;
				width: 100%;
				max-width: 540px;
			}
		}
		.mobile-select-sheet[open] {
			display: flex;
		}
		.mobile-select-sheet::backdrop {
			background: rgba(0, 0, 0, 0.6);
			backdrop-filter: blur(2px);
		}
		.mobile-select-sheet-hdr {
			padding: var(--space-3) var(--space-5) var(--space-2);
			border-bottom: 1px solid var(--hairline);
			flex-shrink: 0;
		}
		.mobile-select-sheet-drag {
			width: 36px;
			height: 4px;
			background: var(--hairline-strong);
			border-radius: 2px;
			margin: 0 auto var(--space-3) auto;
		}
		.mobile-select-sheet-title-row {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.mobile-select-sheet-title-row h3 {
			margin: 0;
			font-size: var(--ui-font-base);
			font-weight: 700;
			color: var(--ink);
		}
		.mobile-select-sheet-body {
			overflow-y: auto;
			padding: var(--space-2) 0;
			overscroll-behavior: contain;
			-webkit-overflow-scrolling: touch;
		}
		.mobile-select-optgroup {
			font-size: 10px;
			font-weight: 800;
			text-transform: uppercase;
			letter-spacing: .06em;
			color: var(--ink-muted);
			padding: var(--space-3) var(--space-5) var(--space-1);
		}
		.mobile-select-option-item {
			width: 100%;
			text-align: left;
			background: transparent;
			border: none;
			padding: var(--space-3) var(--space-5);
			font-size: var(--ui-font-sm);
			color: var(--ink);
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-family: inherit;
			transition: background 0.15s ease;
		}
		.mobile-select-option-item:hover,
		.mobile-select-option-item:focus {
			background: var(--cell-hover);
			outline: none;
		}
		.mobile-select-option-item.selected {
			background: var(--accent-subtle);
			color: var(--accent);
			font-weight: 700;
		}
		.mobile-select-option-item .check-glyph {
			color: var(--accent);
			font-weight: 900;
		}