/* Leaflet 1.9.4 map styles (BSD-2-Clause) */
.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
	position: absolute;
	left: 0;
	top: 0;
	}
.leaflet-container {
	overflow: hidden;
	}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
	  -webkit-user-drag: none;
	}
.leaflet-tile::selection {
	background: transparent;
}
.leaflet-safari .leaflet-tile {
	image-rendering: -webkit-optimize-contrast;
	}
.leaflet-safari .leaflet-tile-container {
	width: 1600px;
	height: 1600px;
	-webkit-transform-origin: 0 0;
	}
.leaflet-marker-icon,
.leaflet-marker-shadow {
	display: block;
	}
.leaflet-container .leaflet-overlay-pane svg {
	max-width: none !important;
	max-height: none !important;
	}
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer,
.leaflet-container .leaflet-tile {
	max-width: none !important;
	max-height: none !important;
	width: auto;
	padding: 0;
	}
.leaflet-container img.leaflet-tile {
	mix-blend-mode: plus-lighter;
}
.leaflet-container.leaflet-touch-zoom {
	-ms-touch-action: pan-x pan-y;
	touch-action: pan-x pan-y;
	}
.leaflet-container.leaflet-touch-drag {
	-ms-touch-action: pinch-zoom;
	touch-action: none;
	touch-action: pinch-zoom;
}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
	-ms-touch-action: none;
	touch-action: none;
}
.leaflet-container {
	-webkit-tap-highlight-color: transparent;
}
.leaflet-container a {
	-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
}
.leaflet-tile {
	filter: inherit;
	visibility: hidden;
	}
.leaflet-tile-loaded {
	visibility: inherit;
	}
.leaflet-zoom-box {
	width: 0;
	height: 0;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	z-index: 800;
	}
.leaflet-overlay-pane svg {
	-moz-user-select: none;
	}
.leaflet-pane         { z-index: 400; }
.leaflet-tile-pane    { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane  { z-index: 500; }
.leaflet-marker-pane  { z-index: 600; }
.leaflet-tooltip-pane   { z-index: 650; }
.leaflet-popup-pane   { z-index: 700; }
.leaflet-map-pane canvas { z-index: 100; }
.leaflet-map-pane svg    { z-index: 200; }
.leaflet-vml-shape {
	width: 1px;
	height: 1px;
	}
.lvml {
	behavior: url(#default#VML);
	display: inline-block;
	position: absolute;
	}
.leaflet-control {
	position: relative;
	z-index: 800;
	pointer-events: visiblePainted; 
	pointer-events: auto;
	}
.leaflet-top,
.leaflet-bottom {
	position: absolute;
	z-index: 1000;
	pointer-events: none;
	}
.leaflet-top {
	top: 0;
	}
.leaflet-right {
	right: 0;
	}
.leaflet-bottom {
	bottom: 0;
	}
.leaflet-left {
	left: 0;
	}
.leaflet-control {
	float: left;
	clear: both;
	}
.leaflet-right .leaflet-control {
	float: right;
	}
.leaflet-top .leaflet-control {
	margin-top: 10px;
	}
.leaflet-bottom .leaflet-control {
	margin-bottom: 10px;
	}
.leaflet-left .leaflet-control {
	margin-left: 10px;
	}
.leaflet-right .leaflet-control {
	margin-right: 10px;
	}
.leaflet-fade-anim .leaflet-popup {
	opacity: 0;
	-webkit-transition: opacity 0.2s linear;
	   -moz-transition: opacity 0.2s linear;
	        transition: opacity 0.2s linear;
	}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
	opacity: 1;
	}
.leaflet-zoom-animated {
	-webkit-transform-origin: 0 0;
	    -ms-transform-origin: 0 0;
	        transform-origin: 0 0;
	}
svg.leaflet-zoom-animated {
	will-change: transform;
}
.leaflet-zoom-anim .leaflet-zoom-animated {
	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
	   -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
	        transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
	}
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
	-webkit-transition: none;
	   -moz-transition: none;
	        transition: none;
	}
.leaflet-zoom-anim .leaflet-zoom-hide {
	visibility: hidden;
	}
.leaflet-interactive {
	cursor: pointer;
	}
.leaflet-grab {
	cursor: -webkit-grab;
	cursor:    -moz-grab;
	cursor:         grab;
	}
.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
	cursor: crosshair;
	}
.leaflet-popup-pane,
.leaflet-control {
	cursor: auto;
	}
.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
	cursor: move;
	cursor: -webkit-grabbing;
	cursor:    -moz-grabbing;
	cursor:         grabbing;
	}
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
	pointer-events: none;
	}
.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive,
svg.leaflet-image-layer.leaflet-interactive path {
	pointer-events: visiblePainted; 
	pointer-events: auto;
	}
.leaflet-container {
	background: #ddd;
	outline-offset: 1px;
	}
.leaflet-container a {
	color: #0078A8;
	}
.leaflet-zoom-box {
	border: 2px dotted #38f;
	background: rgba(255,255,255,0.5);
	}
.leaflet-container {
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-size: 0.75rem;
	line-height: 1.5;
	}
.leaflet-bar {
	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
	border-radius: 4px;
	}
.leaflet-bar a {
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	width: 26px;
	height: 26px;
	line-height: 26px;
	display: block;
	text-align: center;
	text-decoration: none;
	color: black;
	}
.leaflet-bar a,
.leaflet-control-layers-toggle {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: block;
	}
.leaflet-bar a:hover,
.leaflet-bar a:focus {
	background-color: #f4f4f4;
	}
.leaflet-bar a:first-child {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	}
.leaflet-bar a:last-child {
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom: none;
	}
.leaflet-bar a.leaflet-disabled {
	cursor: default;
	background-color: #f4f4f4;
	color: #bbb;
	}
.leaflet-touch .leaflet-bar a {
	width: 30px;
	height: 30px;
	line-height: 30px;
	}
.leaflet-touch .leaflet-bar a:first-child {
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	}
.leaflet-touch .leaflet-bar a:last-child {
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	}
.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
	font: bold 18px 'Lucida Console', Monaco, monospace;
	text-indent: 1px;
	}
.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
	font-size: 22px;
	}
.leaflet-control-layers {
	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
	background: #fff;
	border-radius: 5px;
	}
.leaflet-touch .leaflet-control-layers-toggle {
	width: 44px;
	height: 44px;
	}
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
	display: none;
	}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
	display: block;
	position: relative;
	}
.leaflet-control-layers-expanded {
	padding: 6px 10px 6px 6px;
	color: #333;
	background: #fff;
	}
.leaflet-control-layers-scrollbar {
	overflow-y: scroll;
	overflow-x: hidden;
	padding-right: 5px;
	}
.leaflet-control-layers-selector {
	margin-top: 2px;
	position: relative;
	top: 1px;
	}
.leaflet-control-layers label {
	display: block;
	font-size: 13px;
	font-size: 1.08333em;
	}
.leaflet-control-layers-separator {
	height: 0;
	border-top: 1px solid #ddd;
	margin: 5px -10px 5px -6px;
	}
.leaflet-container .leaflet-control-attribution {
	background: #fff;
	background: rgba(255, 255, 255, 0.8);
	margin: 0;
	}
.leaflet-control-attribution,
.leaflet-control-scale-line {
	padding: 0 5px;
	color: #333;
	line-height: 1.4;
	}
.leaflet-control-attribution a {
	text-decoration: none;
	}
.leaflet-control-attribution a:hover,
.leaflet-control-attribution a:focus {
	text-decoration: underline;
	}
.leaflet-attribution-flag {
	display: inline !important;
	vertical-align: baseline !important;
	width: 1em;
	height: 0.6669em;
	}
.leaflet-left .leaflet-control-scale {
	margin-left: 5px;
	}
.leaflet-bottom .leaflet-control-scale {
	margin-bottom: 5px;
	}
.leaflet-control-scale-line {
	border: 2px solid #777;
	border-top: none;
	line-height: 1.1;
	padding: 2px 5px 1px;
	white-space: nowrap;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	background: rgba(255, 255, 255, 0.8);
	text-shadow: 1px 1px #fff;
	}
.leaflet-control-scale-line:not(:first-child) {
	border-top: 2px solid #777;
	border-bottom: none;
	margin-top: -2px;
	}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
	border-bottom: 2px solid #777;
	}
.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	box-shadow: none;
	}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	border: 2px solid rgba(0,0,0,0.2);
	background-clip: padding-box;
	}
.leaflet-popup {
	position: absolute;
	text-align: center;
	margin-bottom: 20px;
	}
.leaflet-popup-content-wrapper {
	padding: 1px;
	text-align: left;
	border-radius: 12px;
	}
.leaflet-popup-content {
	margin: 13px 24px 13px 20px;
	line-height: 1.3;
	font-size: 13px;
	font-size: 1.08333em;
	min-height: 1px;
	}
.leaflet-popup-content p {
	margin: 17px 0;
	margin: 1.3em 0;
	}
.leaflet-popup-tip-container {
	width: 40px;
	height: 20px;
	position: absolute;
	left: 50%;
	margin-top: -1px;
	margin-left: -20px;
	overflow: hidden;
	pointer-events: none;
	}
.leaflet-popup-tip {
	width: 17px;
	height: 17px;
	padding: 1px;
	margin: -10px auto 0;
	pointer-events: auto;
	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	        transform: rotate(45deg);
	}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
	background: white;
	color: #333;
	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
	}
.leaflet-container a.leaflet-popup-close-button {
	position: absolute;
	top: 0;
	right: 0;
	border: none;
	text-align: center;
	width: 24px;
	height: 24px;
	font: 16px/24px Tahoma, Verdana, sans-serif;
	color: #757575;
	text-decoration: none;
	background: transparent;
	}
.leaflet-container a.leaflet-popup-close-button:hover,
.leaflet-container a.leaflet-popup-close-button:focus {
	color: #585858;
	}
.leaflet-popup-scrolled {
	overflow: auto;
	}
.leaflet-oldie .leaflet-popup-content-wrapper {
	-ms-zoom: 1;
	}
.leaflet-oldie .leaflet-popup-tip {
	width: 24px;
	margin: 0 auto;
	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
	}
.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
	border: 1px solid #999;
	}
.leaflet-div-icon {
	background: #fff;
	border: 1px solid #666;
	}
.leaflet-tooltip {
	position: absolute;
	padding: 6px;
	background-color: #fff;
	border: 1px solid #fff;
	border-radius: 3px;
	color: #222;
	white-space: nowrap;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
	}
.leaflet-tooltip.leaflet-interactive {
	cursor: pointer;
	pointer-events: auto;
	}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	position: absolute;
	pointer-events: none;
	border: 6px solid transparent;
	background: transparent;
	content: "";
	}
.leaflet-tooltip-bottom {
	margin-top: 6px;
}
.leaflet-tooltip-top {
	margin-top: -6px;
}
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
	left: 50%;
	margin-left: -6px;
	}
.leaflet-tooltip-top:before {
	bottom: 0;
	margin-bottom: -12px;
	border-top-color: #fff;
	}
.leaflet-tooltip-bottom:before {
	top: 0;
	margin-top: -12px;
	margin-left: -6px;
	border-bottom-color: #fff;
	}
.leaflet-tooltip-left {
	margin-left: -6px;
}
.leaflet-tooltip-right {
	margin-left: 6px;
}
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	top: 50%;
	margin-top: -6px;
	}
.leaflet-tooltip-left:before {
	right: 0;
	margin-right: -12px;
	border-left-color: #fff;
	}
.leaflet-tooltip-right:before {
	left: 0;
	margin-left: -12px;
	border-right-color: #fff;
	}
@media print {
	.leaflet-control {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
		}
	}
/* Layout: 3D stage fills the left, an RTL control panel docks right; on phones the stage sticks on top and the panel scrolls under it. */
:root {
  --bg: #e9edf1; --panel: #ffffff; --ink: #13202c; --muted: #5a6977; --line: #d5dce3;
  --chip: #f2f5f8; --accent: #0a7aa2; --accent-ink: #ffffff; --accent-soft: rgba(10,122,162,0.12);
  --warn: #9a5b00; --warn-soft: rgba(196,128,20,0.12); --ok: #1a7a47;
  --stage-top: #e3eaf1; --stage-bot: #bfcad6; --stage-ink: #13202c; --glass: rgba(255,255,255,0.78); --glass-line: rgba(19,32,44,0.12);
  --font: 'Estedad', Tahoma, 'Segoe UI', sans-serif;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #060b11; --panel: #0c141e; --ink: #e5edf4; --muted: #8b9cad; --line: #1c2938;
  --chip: #111c28; --accent: #4cc5e8; --accent-ink: #04131b; --accent-soft: rgba(76,197,232,0.14);
  --warn: #f2b552; --warn-soft: rgba(242,181,82,0.12); --ok: #52cf8e;
  --stage-top: #0e1b2c; --stage-bot: #03070c; --stage-ink: #e5edf4; --glass: rgba(9,17,27,0.74); --glass-line: rgba(160,200,230,0.16);
  color-scheme: dark } }
:root[data-theme="dark"] {
  --bg: #060b11; --panel: #0c141e; --ink: #e5edf4; --muted: #8b9cad; --line: #1c2938;
  --chip: #111c28; --accent: #4cc5e8; --accent-ink: #04131b; --accent-soft: rgba(76,197,232,0.14);
  --warn: #f2b552; --warn-soft: rgba(242,181,82,0.12); --ok: #52cf8e;
  --stage-top: #0e1b2c; --stage-bot: #03070c; --stage-ink: #e5edf4; --glass: rgba(9,17,27,0.74); --glass-line: rgba(160,200,230,0.16);
  color-scheme: dark }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 14px; box-sizing: border-box;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: 16px; }
*, *::before, *::after { box-sizing: border-box; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.app { height: 100%; display: grid; grid-template-columns: minmax(340px, 410px) minmax(0, 1fr); gap: 16px; direction: rtl; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.stage { position: relative; border-radius: 18px; overflow: hidden; min-height: 0; background: radial-gradient(120% 70% at 50% 0%, var(--stage-top), var(--stage-bot)); color: var(--stage-ink); touch-action: none; }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* panel */
.phead { padding: 18px 18px 12px; border-bottom: 1px solid var(--line); display: grid; gap: 10px; }
.brandrow { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.phead h1 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.01em; text-wrap: balance; }
.phead .sub { color: var(--muted); font-size: 12.5px; }
.presets { display: flex; gap: 6px; flex-wrap: wrap; }
.presets button { border: 1px dashed var(--line); background: transparent; border-radius: 999px; padding: 4px 11px; font-size: 12.5px; color: var(--muted); }
.presets button:hover { color: var(--ink); border-color: var(--accent); }
.tabs { display: flex; gap: 4px; padding: 10px 14px 0; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs button { border: 0; background: transparent; padding: 9px 10px 11px; font-weight: 500; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; font-size: 13.5px; }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.pscroll { flex: 1; overflow-y: auto; padding: 6px 18px 18px; min-height: 0; }
.tabpane { display: grid; gap: 18px; padding-top: 12px; }
.group { display: grid; gap: 9px; }
.group > .gh { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.group h3 { margin: 0; font-size: 13.5px; font-weight: 700; }
.group .hint { color: var(--muted); font-size: 12px; }
.opts { display: flex; flex-wrap: wrap; gap: 7px; }
.opt { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--chip); border-radius: 11px; padding: 6px 10px 6px 8px; font-size: 12.5px; min-height: 36px; }
.opt:hover { border-color: var(--accent); }
.opt[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); }
.sw { width: 22px; height: 22px; border-radius: 6px; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.18); }
.rng { display: grid; gap: 4px; }
.rng .top { display: flex; justify-content: space-between; align-items: baseline; }
.rng label { font-weight: 500; font-size: 13px; }
.rng output { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 13.5px; }
.rng output small { color: var(--muted); font-weight: 500; margin-inline-start: 3px; }
.rng input[type=range] { width: 100%; accent-color: var(--accent); direction: ltr; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.cap { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
.cap div { background: var(--chip); border: 1px solid var(--line); border-radius: 12px; padding: 9px 10px; display: grid; gap: 2px; }
.cap b { font-size: 17px; font-variant-numeric: tabular-nums; }
.cap span { color: var(--muted); font-size: 11.5px; }
.note { font-size: 12px; color: var(--muted); line-height: 1.7; }
.warns { display: grid; gap: 6px; }
.warn { background: var(--warn-soft); color: var(--warn); border-radius: 10px; padding: 8px 10px; font-size: 12.5px; line-height: 1.6; }
.spec { width: 100%; border-collapse: collapse; font-size: 12.8px; }
.spec th { text-align: right; font-weight: 500; color: var(--muted); padding: 7px 0; border-bottom: 1px solid var(--line); width: 46%; vertical-align: top; }
.spec td { padding: 7px 0; border-bottom: 1px solid var(--line); font-weight: 500; font-variant-numeric: tabular-nums; }
.spec td .m { display: inline-flex; align-items: center; gap: 7px; }
.spec td .m .sw { width: 16px; height: 16px; border-radius: 4px; }
.sect { font-size: 12px; font-weight: 700; color: var(--accent); letter-spacing: 0.02em; margin: 6px 0 -4px; }
.pfoot { padding: 12px 18px 16px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.btn { border: 1px solid var(--line); background: var(--chip); border-radius: 12px; padding: 10px 14px; font-weight: 500; }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; }
.btn:hover { filter: brightness(1.06); }
.copyfallback { width: 100%; height: 120px; font-size: 11px; direction: rtl; border: 1px solid var(--line); border-radius: 10px; background: var(--chip); padding: 8px; }

/* stage overlays */
.ov { position: absolute; z-index: 2; }
.glass { background: var(--glass); border: 1px solid var(--glass-line); border-radius: 12px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.livecap { top: 12px; right: 12px; padding: 8px 12px; display: grid; gap: 1px; direction: rtl; }
.livecap b { font-size: 15px; font-variant-numeric: tabular-nums; }
.livecap span { font-size: 11.5px; color: var(--muted); }
.views { bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 2px; padding: 4px; direction: rtl; max-width: calc(100% - 24px); overflow-x: auto; scrollbar-width: none; }
.views button { border: 0; background: transparent; padding: 7px 11px; border-radius: 9px; font-size: 12.5px; white-space: nowrap; color: var(--stage-ink); }
.views button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.tools { top: 12px; left: 12px; padding: 8px 10px; display: grid; gap: 8px; direction: rtl; min-width: 180px; }
.tools .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.tools input[type=range] { width: 92px; accent-color: var(--accent); direction: ltr; }
.tools input[type=checkbox] { accent-color: var(--accent); width: 16px; height: 16px; }
.floors { left: 12px; top: 50%; transform: translateY(-50%); padding: 6px; display: flex; flex-direction: column; gap: 4px; max-height: 60%; overflow-y: auto; scrollbar-width: none; }
.floors button { min-width: 48px; padding: 0 6px; height: 32px; border-radius: 8px; border: 1px solid var(--glass-line); background: transparent; color: var(--stage-ink); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.floors button.cur { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.floors button.call { border-color: var(--accent); }
.floors .dbtn { font-size: 11px; height: 30px; }
.floorpick { display: none; top: 12px; right: 12px; padding: 6px 12px; font: inherit; font-size: 12.5px; color: var(--stage-ink); cursor: pointer; }
.floorpick b { font-variant-numeric: tabular-nums; margin-inline-start: 4px; }
.stage.inside .tools, .stage.inside .livecap { display: none; }
.stage.inside .floorpick { display: block; }
.stage.inside .floors { display: none; left: auto; right: 12px; top: 52px; transform: none; max-height: calc(100% - 120px); }
.stage.inside .floors.open { display: flex; }
#anno { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.dim { position: absolute; transform: translate(-50%, -50%); background: var(--glass); border: 1px solid var(--accent); color: var(--stage-ink); border-radius: 7px; padding: 2px 7px; font-size: 11.5px; white-space: nowrap; font-variant-numeric: tabular-nums; direction: rtl; }
.dim small { color: var(--muted); }
.tip { position: absolute; transform: translate(-50%, -130%); padding: 4px 9px; font-size: 12px; white-space: nowrap; pointer-events: none; direction: rtl; }
.pick { right: 12px; bottom: 64px; width: min(300px, calc(100% - 24px)); padding: 12px 14px; display: grid; gap: 6px; direction: rtl; }
.pick h4 { margin: 0; font-size: 15px; }
.pick .en { font-size: 11px; color: var(--muted); letter-spacing: 0.06em; direction: ltr; text-align: right; text-transform: uppercase; }
.pick .row { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; }
.pick .row span:first-child { color: var(--muted); }
.pick .acts { display: flex; gap: 6px; margin-top: 4px; }
.pick .acts button { font-size: 12px; padding: 6px 10px; border-radius: 9px; }
.toast { left: 50%; top: 14px; transform: translateX(-50%); padding: 8px 14px; font-size: 13px; font-weight: 500; direction: rtl; }
.loading { inset: 0; display: grid; place-items: center; font-size: 13px; color: var(--muted); }

/* shell: mode switch on top, then the 3D configurator or the calculators */
[hidden] { display: none !important; }
.shell { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); gap: 12px; direction: rtl; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.seg { display: inline-flex; background: var(--panel); border: 1px solid var(--line); border-radius: 13px; padding: 3px; gap: 2px; }
.seg button { border: 0; background: transparent; border-radius: 10px; padding: 7px 14px; font-weight: 500; font-size: 13.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 7px; }
.seg button svg { width: 18px; height: 18px; }
.seg button[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.topbar .tsub { color: var(--muted); font-size: 12.5px; }
.app { height: auto; min-height: 0; }
.ico { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* calculators */
.calc { min-height: 0; overflow-y: auto; display: grid; align-content: start; gap: 16px; padding-bottom: 6px; scrollbar-width: thin; }
.chead { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.chead h2 { margin: 0; font-size: 20px; font-weight: 800; }
.chead p { margin: 4px 0 0; color: var(--muted); font-size: 12.5px; }
.ccards { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 14px; }
.ccard { text-align: right; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 18px 18px 14px; display: flex; flex-direction: column; gap: 10px; min-height: 248px; transition: border-color .15s, box-shadow .15s; }
.ccard:hover { border-color: var(--accent); }
.ccard[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 0 5px var(--accent-soft); }
.ccard .ic { align-self: flex-start; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-soft); margin-bottom: 8px; }
.ccard .ic svg { width: 24px; height: 24px; }
.ccard .pill { align-self: flex-start; font-size: 11px; color: var(--muted); border: 1px solid var(--line); background: var(--chip); border-radius: 999px; padding: 3px 10px; }
.ccard h3 { margin: 2px 0 0; font-size: 15px; font-weight: 800; line-height: 1.65; }
.ccard p { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.9; flex: 1; }
.ccard .go { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 4px; display: flex; justify-content: space-between; align-items: center; color: var(--accent); font-weight: 700; font-size: 12.5px; }
.ccard .go svg { width: 16px; height: 16px; }
.cdetail { display: grid; grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); gap: 16px; align-items: start; }
.cbox { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 18px; display: grid; gap: 16px; min-width: 0; }
.cbox > h3 { margin: 0; font-size: 15px; font-weight: 800; display: flex; align-items: center; gap: 10px; }
.cbox > h3 svg { width: 22px; height: 22px; color: var(--accent); }
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.fgrid .full { grid-column: 1 / -1; }
.fsec { grid-column: 1 / -1; font-size: 12px; font-weight: 700; color: var(--accent); margin: 4px 0 -4px; }
.fld { display: grid; gap: 5px; align-content: start; }
.fld > label, .fld > .lb { font-size: 12.5px; font-weight: 500; }
.fld .in { display: flex; align-items: center; border: 1px solid var(--line); background: var(--chip); border-radius: 10px; padding: 0 10px; height: 40px; gap: 6px; }
.fld .in:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.fld input[type=text] { border: 0; background: transparent; outline: none; width: 100%; min-width: 0; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 14px; text-align: right; padding: 0; }
.fld select { border: 1px solid var(--line); background: var(--chip); border-radius: 10px; height: 40px; padding: 0 10px; font-size: 13px; width: 100%; }
.fld .u { color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.fld small { color: var(--muted); font-size: 11px; line-height: 1.6; }
.fld.bad .in { border-color: var(--warn); }
.chk { display: flex; align-items: center; gap: 8px; font-size: 12.8px; min-height: 40px; }
.chk input { accent-color: var(--accent); width: 17px; height: 17px; }
details.adv { grid-column: 1 / -1; border: 1px dashed var(--line); border-radius: 12px; padding: 10px 12px; }
details.adv summary { cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--muted); }
details.adv[open] summary { margin-bottom: 12px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; }
.kpi { background: var(--chip); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: grid; gap: 3px; align-content: start; }
.kpi b { font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.4; }
.kpi span { color: var(--muted); font-size: 11.5px; }
.kpi.main { background: var(--accent-soft); border-color: var(--accent); }
.kpi.main b { color: var(--accent); }
.cfig { background: var(--chip); border: 1px solid var(--line); border-radius: 14px; padding: 12px; display: grid; gap: 10px; justify-items: center; }
.cfig svg { width: 100%; max-width: 440px; height: auto; display: block; }
.legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; font-size: 11.5px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { display: inline-block; width: 14px; height: 8px; border-radius: 2px; }
.cres { display: grid; gap: 14px; }
.cres .two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.ctable { width: 100%; border-collapse: collapse; font-size: 12.8px; }
.ctable th { text-align: right; font-weight: 500; color: var(--muted); padding: 7px 0 7px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.ctable td { padding: 7px 0; border-bottom: 1px solid var(--line); font-weight: 600; font-variant-numeric: tabular-nums; }
.ctable.grid th, .ctable.grid td { padding: 8px 6px; text-align: right; }
.ctable.grid thead th { color: var(--muted); font-size: 11.5px; font-weight: 500; }
.ctable tr.tot td { font-weight: 800; color: var(--accent); border-bottom: 0; }
details.how { border-top: 1px solid var(--line); padding-top: 12px; }
details.how summary { cursor: pointer; font-weight: 700; font-size: 13px; }
details.how div { font-size: 12.5px; color: var(--muted); line-height: 2; margin-top: 8px; }
details.how code { font-family: inherit; background: var(--chip); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; color: var(--ink); white-space: nowrap; }
.cacts { display: flex; gap: 8px; flex-wrap: wrap; }
.headline { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.headline .hv { font-weight: 800; font-size: 15px; color: var(--accent); font-variant-numeric: tabular-nums; }
.cchips { display: flex; gap: 6px; flex-wrap: wrap; }
.cchips button { border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 6px 13px; font-size: 13px; font-weight: 500; color: var(--muted); display: inline-flex; align-items: center; gap: 7px; }
.cchips button span { font-size: 11px; background: var(--chip); border-radius: 999px; padding: 1px 7px; color: var(--muted); }
.cchips button[aria-selected="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); font-weight: 700; }
.cchips button[aria-selected="true"] span { background: var(--accent); color: var(--accent-ink); }
.vd { display: inline-block; border-radius: 999px; padding: 1px 9px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.vd.ok { background: rgba(26,122,71,0.13); color: var(--ok); }
.vd.no { background: rgba(200,50,50,0.13); color: #c23b3b; }
.vd.wr { background: var(--warn-soft); color: var(--warn); }
.kpi.bad { border-color: var(--warn); background: var(--warn-soft); }
.kpi.bad b { color: var(--warn); }
.ctable tr.cur td { color: var(--accent); }
.chk-t td:first-child { font-weight: 500; }
.cbook { display: grid; gap: 16px; }
.bk-doc { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 28px 30px; display: grid; gap: 26px; }
.bk-cover { display: grid; gap: 14px; border-bottom: 2px solid var(--accent); padding-bottom: 22px; }
.bk-kicker { color: var(--accent); font-weight: 700; font-size: 13px; }
.bk-cover h1 { margin: 0; font-size: 26px; font-weight: 800; }
.bk-toc ol { margin: 6px 0 0; padding-inline-start: 26px; list-style-type: persian; columns: 2; font-size: 13px; line-height: 2; }
.bk-sec { display: grid; gap: 12px; }
.bk-sec h2 { margin: 0; font-size: 18px; font-weight: 800; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.bk-sec h2 span { background: var(--accent); color: var(--accent-ink); border-radius: 8px; min-width: 28px; height: 28px; display: inline-grid; place-items: center; font-size: 14px; }
.bk-sec h4 { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--accent); }
.bk-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; font-size: 12.5px; }
.bk-kv div { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line); padding: 5px 0; }
.bk-kv span { color: var(--muted); }
.bk-kv b { font-weight: 600; font-variant-numeric: tabular-nums; text-align: left; }
.bk-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.bk-grid .cfig svg { max-height: 300px; }
.bk-how { font-size: 12.5px; color: var(--muted); line-height: 2; }
.bk-how code { font-family: inherit; background: var(--chip); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; color: var(--ink); }
/* ---- panel v4: bell, catalog images, inquiries, threads, reports, pricing, SMS */
.erp-brand { grid-template-columns: minmax(0, 1fr) auto; align-items: center; position: relative; }
.erp-brand > div { display: grid; gap: 2px; }
.erp-bell { position: relative; width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--line); background: var(--chip); display: grid; place-items: center; color: var(--ink); }
.erp-bell svg { width: 20px; height: 20px; }
.erp-bell em { position: absolute; top: -5px; left: -5px; min-width: 19px; height: 19px; border-radius: 999px; background: #c23b3b; color: #fff; font-style: normal; font-size: 10.5px; font-weight: 800; display: grid; place-items: center; padding: 0 5px; }
.erp-bell em:empty { display: none; }
.erp-bellpop { position: absolute; top: 48px; right: 0; width: min(360px, 88vw); max-height: 70vh; overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 16px 40px rgba(10,20,30,.22); z-index: 40; }
.bp-h { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--panel); }
.bp-list { display: grid; }
.bp-it { display: flex; gap: 10px; align-items: flex-start; text-align: right; border: 0; border-bottom: 1px solid var(--line); background: transparent; padding: 10px 12px; color: var(--ink); }
.bp-it:hover { background: var(--chip); }
.bp-it.un { background: var(--accent-soft); }
.bp-ic { flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--chip); display: grid; place-items: center; color: var(--accent); }
.bp-ic svg { width: 17px; height: 17px; }
.bp-tx { display: grid; gap: 2px; min-width: 0; }
.bp-tx b { font-size: 12.8px; font-weight: 700; line-height: 1.6; }
.bp-tx small { font-size: 11.5px; color: var(--muted); line-height: 1.6; }
.bp-tx em { font-style: normal; font-size: 11px; color: var(--muted); }
.thumb { width: 52px; height: 39px; object-fit: cover; border-radius: 7px; border: 1px solid var(--line); display: block; background: var(--chip); }
.thumb.none { display: inline-block; }
.erp-card .ec-img { width: 100%; height: 92px; object-fit: cover; border-radius: 8px; margin-bottom: 4px; background: var(--chip); }
.erp-card.unread { border-color: var(--accent); }
.imgs-ed { display: flex; flex-wrap: wrap; gap: 10px; }
.imgs-ed figure { margin: 0; position: relative; width: 118px; display: grid; gap: 4px; }
.imgs-ed figure img { width: 118px; height: 88px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); background: var(--chip); }
.imgs-ed figure [data-imrm] { position: absolute; top: 4px; left: 4px; padding: 0 7px; height: 24px; }
.imgs-ed figure span, .imgs-ed .ima { font-size: 11px; color: var(--muted); text-align: center; }
.imgs-add { width: 118px; height: 88px; border: 1.5px dashed var(--line); border-radius: 10px; display: grid; place-content: center; justify-items: center; gap: 4px; color: var(--accent); font-size: 12px; font-weight: 700; cursor: pointer; background: var(--chip); }
.imgs-add svg { width: 24px; height: 24px; }
.imgs-url { display: flex; gap: 8px; margin-top: 8px; }
.imgs-url .in { flex: 1; }
.gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.gal-it { border: 1px solid var(--line); border-radius: 12px; padding: 0; overflow: hidden; background: var(--chip); }
.gal-it img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.lbx { direction: rtl; position: fixed; inset: 0; z-index: 90; background: rgba(6,11,17,.82); display: grid; place-items: center; padding: 16px; }
.lbx-in { width: min(860px, 100%); max-height: 100%; overflow: auto; background: var(--panel); color: var(--ink); border-radius: 18px; padding: 14px; display: grid; gap: 10px; }
.lbx-h { display: flex; align-items: center; gap: 10px; }
.lbx-h b { font-size: 15px; } .lbx-h span { color: var(--muted); font-size: 12px; margin-inline-start: auto; }
.lbx-img { position: relative; background: var(--chip); border-radius: 12px; overflow: hidden; }
.lbx-img img { width: 100%; max-height: 62vh; object-fit: contain; display: block; }
.lbx-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(0,0,0,.45); color: #fff; font-size: 26px; line-height: 1; }
.lbx-nav.prev { right: 10px; } .lbx-nav.next { left: 10px; }
.lbx-th { display: flex; gap: 8px; overflow-x: auto; }
.lbx-th button { border: 2px solid transparent; border-radius: 9px; padding: 0; background: none; flex: none; }
.lbx-th button[aria-current="true"] { border-color: var(--accent); }
.lbx-th img { width: 76px; height: 57px; object-fit: cover; border-radius: 7px; display: block; }
.lbx-in p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.9; }
.inq-top { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 16px; align-items: start; }
.inq-snap { width: 100%; border-radius: 12px; border: 1px solid var(--line); display: block; }
.inq-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.inq-picks > div { border: 1px solid var(--line); background: var(--chip); border-radius: 12px; padding: 6px; display: grid; gap: 2px; }
.inq-picks img, .inq-picks i { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; display: block; background: var(--panel); }
.inq-picks span { font-size: 11px; color: var(--muted); }
.inq-picks b { font-size: 12.5px; font-weight: 700; line-height: 1.6; }
.inq-picks small { font-size: 11px; color: var(--accent); font-weight: 700; }
.inq-picks.sm { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.thread { display: grid; gap: 10px; }
.msg { max-width: 82%; border-radius: 14px; padding: 9px 12px; display: grid; gap: 3px; background: var(--chip); border: 1px solid var(--line); justify-self: start; }
.msg.st { justify-self: end; background: var(--accent-soft); border-color: transparent; }
.msg b { font-size: 12px; } .msg p { margin: 0; font-size: 13px; line-height: 1.9; white-space: pre-wrap; } .msg small { font-size: 11px; color: var(--muted); }
.rep-tools { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; }
.rep-tools select { border: 1px solid var(--line); background: var(--panel); border-radius: 10px; height: 38px; padding: 0 10px; font-size: 13px; }
.rep-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.rep-grid .wide { grid-column: 1 / -1; }
#rep-body { display: grid; gap: 16px; }
.hbars { display: grid; gap: 8px; }
.hb { display: grid; grid-template-columns: minmax(90px, 34%) minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; font-size: 12.5px; }
.hb.clk { cursor: pointer; border-radius: 8px; } .hb.clk:hover { background: var(--chip); }
.hb-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-t { height: 12px; background: var(--chip); border-radius: 6px; overflow: hidden; display: block; }
.hb-t i { display: block; height: 100%; background: var(--accent); border-radius: 6px; opacity: .85; }
.hb b { font-variant-numeric: tabular-nums; font-size: 12.5px; white-space: nowrap; }
.hb small { grid-column: 2 / -1; color: var(--muted); font-size: 11px; margin-top: -3px; }
.pr-sel { max-height: 220px; overflow: auto; display: grid; gap: 2px; border: 1px solid var(--line); border-radius: 10px; padding: 6px; }
.pr-sel .opt, .opts .opt { font-size: 12.5px; }
.pr-prev { max-height: 460px; overflow: auto; }
.pr-prev tr.chg td { background: var(--accent-soft); }
.pr-prev b.up { color: var(--accent); }
.pr-prev .in { height: 32px; min-width: 120px; }
.pr-note { min-width: 240px; }
a.btn { text-decoration: none; color: var(--ink); display: inline-flex; align-items: center; gap: 6px; }
a.btn.primary { color: var(--accent-ink); }
a.btn svg { width: 17px; height: 17px; }
.cacts .in { display: flex; align-items: center; border: 1px solid var(--line); background: var(--chip); border-radius: 10px; padding: 0 10px; height: 38px; }
.cacts .in input { border: 0; background: transparent; outline: none; width: 100%; min-width: 0; font: inherit; font-size: 13px; color: var(--ink); }
.cp-due { display: grid; gap: 8px; }
.cp-due > div { display: flex; justify-content: space-between; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); padding-bottom: 8px; font-size: 13px; }
.cp-due span { color: var(--muted); } .cp-due b { font-weight: 700; } .cp-due b.ok { color: var(--ok); }
.inq-spec { margin: 0; line-height: 2; background: var(--chip); border-radius: 10px; padding: 8px 12px; font-size: 13px; }
.pdf-terms .li { display: flex; gap: 6px; } .pdf-terms .li b { font-weight: 600; min-width: 14px; }
.sms-tpl { display: grid; gap: 10px; }
.st-row { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 12px; align-items: start; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.st-row .tog { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; }
.st-row .tog small { grid-column: 2; color: var(--muted); font-size: 11px; }
.st-row textarea, .fld textarea, .cbox > textarea { width: 100%; border: 1px solid var(--line); background: var(--chip); border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 13px; line-height: 1.8; color: var(--ink); resize: vertical; }
.sm-txt { max-width: 420px; font-weight: 500 !important; line-height: 1.8; }
.dev { display: inline-grid; vertical-align: middle; margin-inline-end: 6px; color: var(--muted); }
.dev svg { width: 16px; height: 16px; }
.co-img { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 40px; }
.co-img img { max-height: 54px; max-width: 140px; object-fit: contain; border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 3px; }
.co-prev { border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: #fff; color: #13202c; overflow-x: auto; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ---- customer portal */
#cust { overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px; align-content: stretch; }
.cp-as { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--warn-soft); border: 1px solid var(--line); border-radius: 13px; padding: 8px 12px; font-size: 12.5px; }
.cp-as select { border: 1px solid var(--line); background: var(--panel); border-radius: 9px; height: 34px; padding: 0 8px; font-size: 13px; min-width: 220px; }
.cp-as small { color: var(--muted); }
.cp-wrap { height: 100%; min-height: 0; display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 16px; }
.cp-side { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 14px 10px; display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow-y: auto; }
.cp-who { display: flex; gap: 10px; align-items: center; padding: 2px 6px 12px; border-bottom: 1px solid var(--line); }
.cp-who > div { display: grid; gap: 2px; min-width: 0; }
.cp-who b { font-size: 14.5px; font-weight: 800; line-height: 1.5; }
.cp-who span:not(.cp-av) { color: var(--muted); font-size: 11.5px; }
.cp-av { flex: none; width: 42px; height: 42px; border-radius: 13px; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-weight: 800; font-size: 17px; }
.cp-av svg { width: 22px; height: 22px; }
.cp-nav { display: grid; gap: 2px; }
.cp-nav button { display: flex; align-items: center; gap: 10px; border: 0; background: transparent; border-radius: 10px; padding: 9px 10px; font-size: 13.5px; text-align: right; color: var(--ink); }
.cp-nav button svg { width: 19px; height: 19px; color: var(--muted); flex: none; }
.cp-nav button:hover { background: var(--chip); }
.cp-nav button[aria-current="true"] { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.cp-nav button[aria-current="true"] svg { color: var(--accent); }
.cp-nav em { margin-inline-start: auto; font-style: normal; font-size: 11px; font-weight: 800; background: #c23b3b; color: #fff; border-radius: 999px; padding: 0 7px; min-width: 20px; text-align: center; }
.cp-sidefoot { margin-top: auto; padding: 10px 4px 0; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.cp-sidefoot .btn { justify-content: center; }
.cp-sidefoot .btn svg { width: 17px; height: 17px; }
.cp-call { display: flex; justify-content: space-between; font-size: 12.5px; } .cp-call span { color: var(--muted); }
.cp-main { min-height: 0; overflow-y: auto; display: grid; align-content: start; gap: 16px; padding-bottom: 6px; scrollbar-width: thin; }
.cp-kick { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.cp-hero { background: var(--panel); border: 1px solid var(--line); border-radius: 22px; padding: 26px; display: grid; gap: 22px; }
.cp-hero h2 { margin: 6px 0; font-size: 24px; font-weight: 800; line-height: 1.6; }
.cp-hero p { margin: 0 0 14px; color: var(--muted); line-height: 2; max-width: 640px; }
.cp-hero .btn svg { width: 18px; height: 18px; }
.cp-feat { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.cp-feat li { background: var(--chip); border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: grid; gap: 4px; }
.cp-feat svg { width: 24px; height: 24px; color: var(--accent); }
.cp-feat span { color: var(--muted); font-size: 12px; }
.cp-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0; }
.cp-steps li { display: grid; justify-items: center; gap: 6px; text-align: center; position: relative; font-size: 11.5px; color: var(--muted); }
.cp-steps li::before { content: ''; position: absolute; top: 14px; right: -50%; width: 100%; height: 3px; background: var(--line); z-index: 0; }
.cp-steps li:first-child::before { display: none; }
.cp-steps li.done::before, .cp-steps li.cur::before { background: var(--accent); }
.cp-steps i { position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 12px; background: var(--panel); border: 2px solid var(--line); color: var(--muted); }
.cp-steps i svg { width: 16px; height: 16px; }
.cp-steps li.done i { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.cp-steps li.cur i { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.cp-steps li.cur span { color: var(--ink); font-weight: 700; }
.cp-steps.sm i { width: 22px; height: 22px; font-size: 10.5px; } .cp-steps.sm li::before { top: 10px; } .cp-steps.sm span { font-size: 10.5px; } .cp-steps.sm i svg { width: 12px; height: 12px; }
.cp-orders { display: grid; gap: 12px; }
.cp-ord { text-align: right; color: var(--ink); gap: 12px; }
.cp-ord:hover { border-color: var(--accent); }
.cp-ord b { font-size: 15px; font-weight: 800; display: block; }
.cp-nlist { display: grid; gap: 6px; }
.cp-n { display: grid; gap: 2px; text-align: right; border: 1px solid var(--line); background: var(--chip); border-radius: 12px; padding: 9px 12px; color: var(--ink); }
.cp-n.un { border-color: var(--accent); background: var(--accent-soft); }
.cp-n b { font-size: 13px; font-weight: 700; line-height: 1.6; } .cp-n span { font-size: 12px; color: var(--muted); line-height: 1.7; } .cp-n em { font-style: normal; font-size: 11px; color: var(--muted); }
.cp-wiz { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.cp-wiz button { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 6px 14px 6px 8px; font-size: 13px; color: var(--muted); }
.cp-wiz i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 12px; background: var(--chip); }
.cp-wiz i svg { width: 14px; height: 14px; }
.cp-wiz .cur button { border-color: var(--accent); color: var(--accent); font-weight: 700; } .cp-wiz .cur i { background: var(--accent); color: var(--accent-ink); }
.cp-wiz .done i { background: var(--ok); color: #fff; }
.cp-design { display: grid; grid-template-columns: minmax(330px, 440px) minmax(0, 1fr); gap: 16px; align-items: start; }
.cp-dside { align-content: start; }
.cp-stage { position: sticky; top: 0; display: grid; gap: 8px; }
.cp-stage-host { height: min(68vh, 620px); min-height: 380px; position: relative; }
.cp-stage-host .stage { position: absolute; inset: 0; height: 100%; }
.cp-stage-host .tools, .cp-stage-host #pick, .cp-stage-host #anno { display: none !important; }
.cp-stage-cap { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; font-size: 12.5px; }
.cp-stage-cap b { color: var(--accent); font-size: 14px; } .cp-stage-cap span { color: var(--muted); }
.cp-dgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.cp-dgrid .full, .cp-rng { grid-column: 1 / -1; }
.cp-rng label { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; font-weight: 500; }
.cp-rng output { font-weight: 800; color: var(--accent); font-size: 14px; font-variant-numeric: tabular-nums; } .cp-rng output small { color: var(--muted); font-weight: 500; font-size: 11px; }
.cp-rng input { width: 100%; accent-color: var(--accent); }
.cp-res { display: grid; gap: 8px; background: var(--chip); border-radius: 12px; padding: 4px 12px 10px; }
.cp-next { justify-content: space-between; border-top: 1px solid var(--line); padding-top: 12px; }
.cp-grps { display: flex; gap: 6px; flex-wrap: wrap; }
.cp-grps button { border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 5px 11px; font-size: 12.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
.cp-grps button i { width: 16px; height: 16px; border-radius: 50%; background: var(--ok); color: #fff; display: grid; place-items: center; } .cp-grps button i svg { width: 11px; height: 11px; }
.cp-grps button[aria-selected="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); font-weight: 700; }
.cp-prods { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.cp-prod { border: 1.5px solid var(--line); border-radius: 14px; overflow: hidden; display: grid; background: var(--panel); }
.cp-prod.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.cp-pimg { border: 0; padding: 0; position: relative; background: var(--chip); display: block; }
.cp-pimg img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.cp-pimg span { position: absolute; bottom: 6px; left: 6px; background: rgba(0,0,0,.6); color: #fff; font-size: 10.5px; border-radius: 999px; padding: 1px 8px; }
.cp-pb { padding: 8px 10px 10px; display: grid; gap: 4px; }
.cp-pb b { font-size: 13px; font-weight: 700; line-height: 1.6; } .cp-pb small { font-size: 11.5px; color: var(--muted); line-height: 1.7; }
.cp-pb .btn { justify-content: center; } .cp-pb .btn svg { width: 15px; height: 15px; }
.cp-form .fld .in { background: var(--panel); }
.cp-done { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.cp-done > .cbox:first-child { justify-items: center; text-align: center; }
.cp-done h2 { margin: 0; font-size: 21px; font-weight: 800; }
.cp-ok { width: 66px; height: 66px; border-radius: 50%; background: rgba(26,122,71,.13); color: var(--ok); display: grid; place-items: center; } .cp-ok svg { width: 34px; height: 34px; }
.cp-trk { background: var(--chip); border-radius: 12px; padding: 8px 14px; font-size: 13px; }
.cp-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; } .cp-chips span { font-size: 11.5px; background: var(--chip); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; }
.cp-snap { width: 100%; max-width: 420px; border-radius: 12px; border: 1px solid var(--line); }
.cp-next3, .cp-vt { list-style: none; margin: 0; padding: 0; display: grid; }
.cp-next3 li, .cp-vt li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 0 12px; position: relative; padding-bottom: 14px; }
.cp-next3 li:not(:last-child)::after, .cp-vt li:not(:last-child)::after { content: ''; position: absolute; right: 14px; top: 30px; bottom: 0; width: 2px; background: var(--line); }
.cp-vt li.done:not(:last-child)::after { background: var(--accent); }
.cp-next3 i, .cp-vt i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 12px; background: var(--chip); border: 1px solid var(--line); color: var(--muted); z-index: 1; }
.cp-vt i svg { width: 15px; height: 15px; }
.cp-next3 li.cur i, .cp-vt li.done i { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.cp-vt li.cur i { border: 2px solid var(--accent); color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.cp-next3 div, .cp-vt div { display: grid; gap: 2px; padding-top: 4px; } .cp-next3 b, .cp-vt b { font-size: 13.5px; } .cp-next3 span, .cp-vt span { font-size: 12px; color: var(--muted); }
.cp-docs { display: grid; gap: 8px; }
.cp-docs > div { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; }
.cp-docs svg { width: 22px; height: 22px; color: var(--accent); } .cp-docs b { display: grid; font-size: 13px; flex: 1; } .cp-docs small { color: var(--muted); font-size: 11.5px; font-weight: 500; }
.cp-draws { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.cp-draws .headline .btn svg, .cp-main .chead .btn svg, .cp-main .cacts .btn svg { width: 16px; height: 16px; }
.cp-invs { display: grid; gap: 8px; }
.cp-inv { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px 14px; align-items: center; border: 1px solid var(--line); border-radius: 13px; padding: 10px 12px; }
.cp-inv > div:first-child { display: grid; } .cp-inv b { font-size: 14px; } .cp-inv-a { display: grid; justify-items: end; font-weight: 800; } .cp-inv-a small { font-size: 11px; color: var(--warn); font-weight: 600; }
.cp-inv .cacts { grid-column: 1 / -1; }
.cp-ref { align-content: start; } .cp-gift { width: 48px; height: 48px; border-radius: 14px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; } .cp-gift svg { width: 26px; height: 26px; }
.cp-elevs { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.cp-elevs h3 svg { width: 20px; height: 20px; color: var(--accent); }
.cp-tks { display: grid; gap: 6px; }
.cp-tks button { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; text-align: right; border: 1px solid var(--line); background: var(--chip); border-radius: 11px; padding: 8px 11px; color: var(--ink); }
.cp-tks b { font-size: 13px; } .cp-tks span:not(.vd) { font-size: 11.5px; color: var(--muted); grid-column: 1; } .cp-tks .vd { grid-row: 1 / 3; grid-column: 2; align-self: center; }
.msg.me { background: var(--accent-soft); border-color: transparent; }
/* share sheet */
.shs { direction: rtl; position: fixed; inset: 0; z-index: 95; background: rgba(6,11,17,.55); display: grid; align-items: end; justify-items: center; padding: 16px; }
.shs-in { width: min(520px, 100%); background: var(--panel); color: var(--ink); border-radius: 22px; padding: 16px; display: grid; gap: 14px; box-shadow: 0 -10px 40px rgba(0,0,0,.25); }
.shs-h { display: flex; align-items: center; gap: 10px; } .shs-h span { color: var(--muted); font-size: 12.5px; flex: 1; }
.shs-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; }
.shs-g button { border: 1px solid var(--line); background: var(--chip); border-radius: 14px; padding: 12px 6px; display: grid; justify-items: center; gap: 6px; font-size: 12px; color: var(--ink); }
.shs-g button svg { width: 22px; height: 22px; color: var(--accent); }
.shs-g button:disabled { opacity: .45; }
.shs-link { display: grid; gap: 4px; } .shs-link input { border: 1px solid var(--line); background: var(--chip); border-radius: 10px; height: 38px; padding: 0 10px; font: inherit; font-size: 12px; color: var(--ink); } .shs-link small { color: var(--muted); font-size: 11.5px; }
/* PDF pages (rendered off-screen, always light) */
#pdfStage, #pdfMeasure { position: fixed; top: 0; left: -12000px; width: 794px; z-index: -1; pointer-events: none; }
#pdfMeasure { visibility: hidden; }
.pdf-page { width: 794px; height: 1123px; position: relative; overflow: hidden; background: #fff; color: #13202c; font-family: 'Estedad', Tahoma, sans-serif; direction: rtl; padding: 34px 44px 132px; box-sizing: border-box; letter-spacing: normal; font-size: 12.5px; display: flex; flex-direction: column; gap: 14px; }
.pdf-band { position: absolute !important; top: 0; left: 0; right: 0; height: 9px; }
.pdf-mark { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 0; }
.pdf-mark img { position: absolute; width: 300px; height: 300px; object-fit: contain; opacity: .035; }
.pdf-mark span { position: absolute; transform: rotate(-32deg); font-size: 96px; font-weight: 800; color: #0a2a3a; opacity: .04; white-space: nowrap; }
.pdf-page > *:not(.pdf-mark):not(.pdf-band):not(.pdf-foot) { position: relative; z-index: 1; }
.pdf-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; border-bottom: 1.5px solid #dfe5ea; padding: 6px 0 14px; }
.pdf-head.sm { padding: 0 0 8px; }
.pdf-head.sm .pdf-logo img { width: 34px; height: 34px; }
.pdf-logo img { width: 66px; height: 66px; object-fit: contain; display: block; }
.pdf-co { display: grid; gap: 2px; } .pdf-co b { font-size: 20px; font-weight: 800; color: #13202c; } .pdf-co span { color: var(--pc, #0a7aa2); font-size: 12px; font-weight: 700; } .pdf-co small { color: #5a6977; font-size: 10.5px; }
.pdf-title { display: grid; gap: 2px; background: #f4f7fa; border-radius: 12px; padding: 9px 16px 9px; border-top: 4px solid var(--pc, #0a7aa2); min-width: 170px; }
.pdf-title b { font-size: 18px; font-weight: 800; color: var(--pc, #0a7aa2); } .pdf-title span { font-size: 11.5px; color: #33424f; }
.pdf-foot { position: absolute !important; left: 0; right: 0; bottom: 0; z-index: 2; background: #fff; }
.pf-line { height: 3px; }
.pf-row { display: grid; grid-template-columns: 196px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 12px 44px 10px; }
.pf-brand { display: flex; align-items: center; gap: 9px; } .pf-brand img { width: 38px; height: 38px; object-fit: contain; }
.pf-brand div { display: grid; gap: 1px; } .pf-brand b { font-size: 12.5px; font-weight: 800; color: #13202c; } .pf-brand span { font-size: 9.5px; color: #5a6977; }
.pf-contacts { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 14px; font-size: 10.3px; color: #33424f; border-right: 1px solid #e3e8ed; padding-right: 14px; }
.pf-contacts span { display: flex; align-items: center; gap: 6px; min-width: 0; } .pf-contacts .wide { grid-column: 1 / -1; }
.pf-contacts i { flex: none; width: 21px; height: 21px; border-radius: 7px; background: #eef4f8; display: grid; place-items: center; }
.pf-contacts i svg { display: block; }
.pf-qr { display: grid; justify-items: center; gap: 2px; } .pf-qr img { width: 58px; height: 58px; image-rendering: pixelated; } .pf-qr span { font-size: 8.5px; color: #5a6977; }
.pf-strip { height: 26px; display: flex; justify-content: space-between; align-items: center; padding: 0 44px; color: #fff; font-size: 10px; font-weight: 600; }
.pdf-mini { position: relative; padding-top: 12px; border: 1px solid #e3e8ed; border-radius: 10px; overflow: hidden; background: #fff; color: #13202c; font-family: 'Estedad', Tahoma, sans-serif; direction: rtl; min-width: 640px; }
.pdf-mini .pdf-head { margin: 0 24px; } .pdf-mini .pdf-foot { position: static !important; margin-top: 18px; } .pdf-mini .pf-row, .pdf-mini .pf-strip { padding-right: 24px; padding-left: 24px; }
.pdf-mini .pdf-band { height: 7px; }
.pa-brand { position: relative; padding-top: 12px; margin-bottom: 14px; }
.cp-co { display: flex; align-items: center; gap: 9px; padding: 0 6px 10px; border-bottom: 1px solid var(--line); }
.cp-co img { width: 30px; height: 30px; object-fit: contain; border-radius: 8px; } .cp-co b { font-size: 13px; font-weight: 800; line-height: 1.5; } .cp-co span { display: block; font-size: 10.5px; color: var(--muted); font-weight: 500; }
.bk-brand { position: relative; padding-top: 12px; }
.pdf-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pdf-parties > div { border: 1px solid #d5dce3; border-radius: 12px; padding: 10px 12px; display: grid; gap: 2px; }
.pdf-parties h4 { margin: 0 0 2px; font-size: 11px; color: #5a6977; font-weight: 600; } .pdf-parties b { font-size: 14px; } .pdf-parties span { font-size: 11.5px; color: #33424f; line-height: 1.8; }
.pdf-spec { margin: 0; font-size: 12px; line-height: 1.9; background: #f7f9fb; border-radius: 10px; padding: 6px 12px; }
.pdf-t { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.pdf-t th { background: #13202c; color: #fff; font-weight: 600; padding: 6px 6px; text-align: center; }
.pdf-t td { border-bottom: 1px solid #e3e8ed; padding: 5px 6px; text-align: center; font-variant-numeric: tabular-nums; }
.pdf-t .d { text-align: right; } .pdf-t tr:nth-child(even) td { background: #f7f9fb; }
.pdf-tail { display: grid; gap: 12px; }
.pdf-sum { width: 52%; margin-inline-start: auto; border-collapse: collapse; font-size: 12.5px; }
.pdf-sum td { padding: 5px 10px; border-bottom: 1px solid #e3e8ed; } .pdf-sum td:last-child { text-align: left; font-variant-numeric: tabular-nums; font-weight: 700; }
.pdf-sum tr.tot td { background: var(--pc, #0a7aa2); color: #fff; font-weight: 800; font-size: 14px; } .pdf-sum tr.rem td { color: #b3261e; font-weight: 800; }
.pdf-terms { font-size: 11.5px; line-height: 1.9; color: #33424f; } .pdf-terms h4 { margin: 0; font-size: 12px; color: #13202c; } .pdf-terms ol { margin: 2px 0; padding-inline-start: 18px; } .pdf-terms p { margin: 2px 0; }
.pdf-sign { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 6px; }
.pdf-sign > div { border: 1px dashed #c3ccd5; border-radius: 12px; height: 104px; padding: 8px 12px; position: relative; font-size: 11.5px; color: #5a6977; }
.pdf-sign img { position: absolute; bottom: 6px; left: 12px; max-height: 84px; max-width: 160px; object-fit: contain; }
.pdf-h3 { margin: 0; font-size: 15px; font-weight: 800; }
.pdf-fig { flex: none; height: 494px; display: grid; place-items: center; border: 1px solid #d5dce3; border-radius: 12px; padding: 10px; overflow: hidden; background: #fff; } .pdf-fig img { display: block; max-width: none; }
.pdf-cap { text-align: center; font-size: 12px; font-weight: 700; color: #33424f; margin-top: -4px; }
.pdf-legend { display: flex; gap: 14px; justify-content: center; font-size: 11px; color: #5a6977; } .pdf-legend span { display: inline-flex; gap: 6px; align-items: center; } .pdf-legend i { width: 14px; height: 8px; border-radius: 2px; display: inline-block; }
.pdf-tb { width: 100%; border-collapse: collapse; font-size: 11px; } .pdf-tb td { border: 1px solid #c3ccd5; padding: 4px 8px; } .pdf-tb td:nth-child(odd) { background: #f2f5f8; color: #5a6977; width: 16%; }
.pdf-note { margin: 0; font-size: 10.5px; color: #5a6977; }
/* imported letterhead: the company's header and footer images, or a full-page A4 design behind the content */
.pdf-page .pdf-hdr, .pdf-page .pdf-ftr, .pdf-page .pdf-lh, .pdf-page .pdf-pno { position: absolute !important; }
.pdf-hdr { top: 0; left: 0; width: 794px; display: block; object-fit: fill; z-index: 0; }
.pdf-ftr { bottom: 0; left: 0; width: 794px; display: block; object-fit: fill; z-index: 0; }
.pdf-lh { top: 0; left: 0; width: 794px; height: 1123px; display: block; object-fit: fill; z-index: 0 !important; }
.pdf-pno { left: 44px; right: 44px; display: flex; justify-content: space-between; gap: 12px; font-size: 9.5px; color: #5a6977; border-top: 1px solid #dfe5ea; padding-top: 5px; z-index: 1; }
.pdf-pno span:last-child { color: var(--pc, #0a7aa2); font-weight: 700; white-space: nowrap; }
.pdf-meta { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; border-bottom: 2px solid var(--pc, #0a7aa2); padding: 0 0 7px; }
.pdf-meta > b { font-size: 19px; font-weight: 800; color: var(--pc, #0a7aa2); line-height: 1.4; }
.pdf-meta > div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 16px; font-size: 11.5px; color: #33424f; }
.pdf-meta.sm > b { font-size: 14px; }
/* building location map */
.lmap { height: 270px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; direction: ltr; position: relative; z-index: 0; isolation: isolate; background: #e6ecf0; }
.lmap.ro { height: 220px; }
.lmap .leaflet-control-attribution { font-size: 10px; }
.leaflet-container { font-family: var(--font); }
.lpin { background: none; border: 0; }
.cp-map-w { display: grid; gap: 8px; }
.cp-map-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cp-map-bar .in { flex: 1 1 240px; height: 36px; }
.cp-map-bar .btn svg { width: 15px; height: 15px; }
.cp-map-bar .note { flex: 1 1 100%; }
.cp-loc-h { border-top: 1px dashed var(--line); padding-top: 10px; margin-top: 4px; }
.map-links { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.map-links bdi { margin-inline-end: auto; }
.inq-addr { margin: 0 0 8px; line-height: 1.9; }
/* settings: letterhead mode and a scaled live preview of page one */
.hf-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.hf-modes button { text-align: right; display: grid; gap: 4px; border: 1.5px solid var(--line); background: var(--panel); border-radius: 14px; padding: 12px; cursor: pointer; color: inherit; font: inherit; }
.hf-modes button b { font-size: 13.5px; } .hf-modes button span { font-size: 11.5px; color: var(--muted); line-height: 1.7; }
.hf-modes button[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.hf-modes svg { width: 100%; height: 54px; }
.hf-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: start; }
.hf-slot { display: grid; gap: 6px; border: 1px dashed var(--line); border-radius: 12px; padding: 10px; }
.hf-slot img { width: 100%; max-height: 120px; object-fit: contain; background: #fff; border-radius: 6px; border: 1px solid var(--line); }
.hf-slot.lh img { max-height: 220px; }
.hf-slot .cacts { margin: 0; }
.co-pvp { width: 397px; height: 562px; overflow: hidden; direction: rtl; border-radius: 6px; box-shadow: 0 6px 24px rgba(0,0,0,.16); background: #fff; flex: none; }
.co-pvp .pdf-page { transform: scale(.5); transform-origin: top right; }
@media (max-width: 1100px) { .hf-grid { grid-template-columns: 1fr; } .co-pvp { justify-self: center; } }
@media (max-width: 640px) { .hf-modes { grid-template-columns: 1fr; } .co-pvp { width: 298px; height: 421px; } .co-pvp .pdf-page { transform: scale(.375); } }
.co-prev .pdf-head { min-width: 560px; }
/* secure link viewer */
body.docview .shell { display: none; }
#docview { direction: rtl; display: grid; gap: 14px; justify-items: center; }
.dv-bar { position: sticky; top: 0; z-index: 3; width: min(820px, 100%); display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; }
.dv-bar span { color: var(--muted); flex: 1; } .dv-bar .btn svg { width: 16px; height: 16px; }
.dv-pages { display: grid; gap: 14px; width: min(820px, 100%); }
.dv-pg { overflow: auto; border-radius: 6px; box-shadow: 0 6px 24px rgba(0,0,0,.15); background: #fff; }
.dv-pg .pdf-page { margin: 0 auto; }
@media print {
  @page { size: A4; margin: 13mm 12mm; }
  :root, :root[data-theme] { --bg: #fff !important; --panel: #fff !important; --ink: #111 !important; --muted: #444 !important; --line: #c9cfd5 !important; --chip: #f3f5f7 !important; --accent: #0a6f93 !important; --accent-ink: #fff !important; --accent-soft: #e6f2f7 !important; --warn: #9a5b00 !important; --warn-soft: #fbefdc !important; --ok: #1a7a47 !important; color-scheme: light !important; }
  html, body { height: auto !important; background: #fff !important; padding: 0 !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .topbar, #app, #inv, #cust, #pdfStage, .chead, .cchips, .ccards, .cdetail, .bk-tools, .ctoast { display: none !important; }
  .shell, .calc { display: block !important; height: auto !important; overflow: visible !important; }
  .cbook { display: block !important; }
  .bk-doc { border: 0; padding: 0; border-radius: 0; display: block; }
  .bk-cover { break-after: page; }
  .bk-sec { break-before: page; display: block; }
  .bk-sec > * + * { margin-top: 10px; }
  .ctable tr, .cfig { break-inside: avoid; }
  .bk-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) !important; }
  .bk-kv { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .bk-toc ol { columns: 2 !important; }
  .bk-grid .cfig svg { max-height: 250px; }
}
.inv-body { display: grid; gap: 16px; }
.inv-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.inv-tools .sbox { flex: 1 1 220px; height: 38px; display: flex; align-items: center; border: 1px solid var(--line); background: var(--chip); border-radius: 10px; padding: 0 10px; }
.inv-tools .sbox:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.inv-tools .sbox input { border: 0; background: transparent; outline: none; width: 100%; font-size: 13px; }
.inv-tools select, .inv-lines select { border: 1px solid var(--line); background: var(--chip); border-radius: 10px; height: 38px; padding: 0 10px; font-size: 13px; }
.inv-lines select { width: 100%; min-width: 210px; }
.inv-lines .in { height: 38px; min-width: 110px; }
.inv-lines input[type=text] { border: 0; background: transparent; outline: none; width: 100%; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.fld textarea { border: 1px solid var(--line); background: var(--chip); border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 13px; resize: vertical; color: inherit; }
.tscroll { overflow-x: auto; }
.inv-t td, .inv-t th { white-space: nowrap; }
.ctable tr.clk { cursor: pointer; }
.ctable tr.clk:hover td { background: var(--accent-soft); }
.ctable td.neg { color: #c23b3b; }
.ctable td.pos { color: var(--ok); }
.vd.acc { background: var(--accent-soft); color: var(--accent); }
.vd:not(.ok):not(.no):not(.wr):not(.acc) { background: var(--chip); color: var(--muted); }
.btn.sm { padding: 6px 10px; font-size: 12px; border-radius: 9px; }
.btn.danger { border-color: #c23b3b; color: #c23b3b; background: transparent; }
.inv-two { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.inv-sup { display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 10px; }
.cchips.sm button { padding: 4px 11px; font-size: 12px; }
.ferr { color: #c23b3b; font-size: 12.5px; margin: 0; }
.inv-empty { max-width: 680px; }
.inv-form { border-color: var(--accent); }
.ctoast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); background: var(--ink); color: var(--panel); padding: 9px 16px; border-radius: 12px; font-size: 13px; font-weight: 500; z-index: 20; }

/* management panel: sidebar + main column, each scrolls on its own on wide screens */
#inv { overflow: hidden; }
.erp-wrap { height: 100%; min-height: 0; display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 16px; }
.erp-side { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 14px 10px; display: flex; flex-direction: column; gap: 6px; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.erp-brand { padding: 2px 10px 12px; border-bottom: 1px solid var(--line); display: grid; gap: 2px; }
.erp-brand b { font-size: 16px; font-weight: 800; }
.erp-brand span { color: var(--muted); font-size: 11.5px; }
.erp-nav { display: grid; gap: 2px; }
.erp-g { font-size: 11px; font-weight: 700; color: var(--muted); padding: 10px 10px 3px; }
.erp-nav button { display: flex; align-items: center; gap: 10px; border: 0; background: transparent; border-radius: 10px; padding: 7px 10px; font-size: 13px; text-align: right; color: var(--ink); }
.nw { white-space: nowrap; }
.erp-nav button svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
.erp-nav button:hover { background: var(--chip); }
.erp-nav button[aria-current="true"] { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.erp-nav button[aria-current="true"] svg { color: var(--accent); }
.erp-nav em { margin-inline-start: auto; font-style: normal; font-size: 11px; font-weight: 700; background: var(--chip); color: var(--muted); border-radius: 999px; padding: 0 7px; min-width: 20px; text-align: center; font-variant-numeric: tabular-nums; }
.erp-nav em:empty { display: none; }
.erp-nav em.bad { background: rgba(200,50,50,0.13); color: #c23b3b; }
.erp-sidefoot { margin-top: auto; padding: 10px 6px 0; border-top: 1px solid var(--line); display: flex; gap: 6px; flex-wrap: wrap; }
.erp-main { min-height: 0; overflow-y: auto; display: grid; align-content: start; gap: 16px; padding-bottom: 6px; scrollbar-width: thin; }
.erp-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 20px; font-size: 12.8px; }
.erp-kv > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 1px solid var(--line); padding: 7px 0; }
.erp-kv span { color: var(--muted); }
.erp-kv b { font-weight: 600; text-align: left; font-variant-numeric: tabular-nums; }
.erp-kv b.neg { color: #c23b3b; }
.erp-kv a, .erp-detail a { color: var(--accent); text-decoration: none; font-weight: 700; }
.erp-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 4px; align-items: start; }
.erp-col { background: var(--chip); border: 1px solid var(--line); border-radius: 14px; padding: 10px; display: grid; gap: 8px; align-content: start; }
.erp-colh { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--muted); font-weight: 700; padding: 0 2px 2px; }
.erp-card { text-align: right; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: grid; gap: 3px; }
.erp-card:hover { border-color: var(--accent); }
.erp-card b { font-size: 13px; font-weight: 700; line-height: 1.6; }
.erp-card span { font-size: 11.5px; color: var(--muted); }
.erp-card small { font-size: 11.5px; color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; }
.erp-card.urgent { border-color: #c23b3b; box-shadow: inset -3px 0 0 #c23b3b; }
.erp-timeline { display: grid; gap: 12px; }
.erp-timeline > div { border-inline-start: 2px solid var(--accent-soft); padding-inline-start: 12px; display: grid; gap: 3px; justify-items: start; }
.erp-timeline b { font-size: 12px; color: var(--muted); font-weight: 600; }
.erp-timeline p { margin: 0; font-size: 13px; line-height: 1.8; }
.erp-timeline small { font-size: 11.5px; color: var(--muted); }
.erp-act-new { background: var(--chip); border: 1px dashed var(--line); border-radius: 12px; padding: 10px; }
.erp-act-new .fld .in, .erp-act-new select, .erp-act-new textarea { background: var(--panel); }
.erp-stages { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.tog { display: inline-flex; align-items: center; gap: 8px; font-size: 12.8px; cursor: pointer; }
.erp-stages .tog { border: 1px solid var(--line); background: var(--chip); border-radius: 11px; padding: 8px 10px; }
.erp-stages .tog.on { border-color: var(--ok); background: rgba(26,122,71,0.08); }
.erp-stages .tog small { margin-inline-start: auto; color: var(--muted); font-size: 11px; }
.tog input { accent-color: var(--accent); width: 16px; height: 16px; }
.erp-prog { display: flex; align-items: center; gap: 16px; }
.erp-prog > div:first-child { display: grid; }
.erp-prog b { font-size: 26px; font-weight: 800; color: var(--accent); line-height: 1.2; font-variant-numeric: tabular-nums; }
.erp-prog span { font-size: 11.5px; color: var(--muted); }
.erp-prog .bar, .minibar { flex: 1; height: 10px; background: var(--chip); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; display: block; }
.erp-prog .bar i, .minibar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.minibar { display: inline-block; width: 70px; height: 7px; vertical-align: middle; }
.erp-funnel { display: grid; gap: 6px; }
.erp-funnel button { display: grid; grid-template-columns: 150px minmax(0, 1fr) 34px; align-items: center; gap: 10px; border: 0; background: transparent; text-align: right; padding: 5px 2px; border-radius: 8px; }
.erp-funnel button:hover { background: var(--chip); }
.erp-funnel span { font-size: 12.5px; }
.erp-funnel i { display: block; height: 14px; background: var(--accent); border-radius: 6px; min-width: 3px; opacity: .8; }
.erp-funnel b { font-variant-numeric: tabular-nums; font-size: 13px; }
.erp-chart { width: 100%; height: auto; max-height: 230px; display: block; }
.erp-chart text { font-family: var(--font); }
.gantt { --gname: 190px; position: relative; display: grid; gap: 6px; padding-top: 2px; }
.g-axis { position: relative; height: 20px; margin-right: var(--gname); border-bottom: 1px solid var(--line); }
.g-axis span { position: absolute; top: 0; font-size: 11px; color: var(--muted); border-right: 1px solid var(--line); padding-right: 4px; white-space: nowrap; }
.g-row { display: grid; grid-template-columns: var(--gname) minmax(0, 1fr); align-items: center; cursor: pointer; border-radius: 8px; }
.g-row:hover .g-name { color: var(--accent); }
.g-name { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 10px; }
.g-track { position: relative; height: 28px; background: var(--chip); border-radius: 8px; }
.g-bar { position: absolute; top: 4px; bottom: 4px; background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 6px; overflow: hidden; display: flex; align-items: center; }
.g-bar i { position: absolute; inset-block: 0; right: 0; background: var(--accent); opacity: .35; }
.g-bar span { position: relative; font-size: 11px; font-weight: 700; color: var(--accent); padding: 0 6px; font-variant-numeric: tabular-nums; }
.g-today { position: absolute; top: 0; bottom: 0; width: 2px; background: #c23b3b; opacity: .7; pointer-events: none; }
.erp-as { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; background: var(--warn-soft); color: var(--warn); border: 1px solid var(--warn); border-radius: 12px; padding: 8px 12px; font-size: 12.8px; font-weight: 600; }
.acc-edit { display: grid; gap: 14px; border: 1px solid var(--accent); border-radius: 14px; padding: 14px; background: var(--panel); }
.acc-msg { display: grid; gap: 6px; justify-items: start; background: rgba(26,122,71,0.08); border: 1px solid var(--ok); border-radius: 12px; padding: 12px; font-size: 13px; line-height: 1.9; }
.acc-msg > b { color: var(--ok); }
.perm-t th, .perm-t td { text-align: center !important; }
.perm-t th:first-child, .perm-t td:first-child { text-align: right !important; }
.perm-t input { accent-color: var(--accent); width: 17px; height: 17px; cursor: pointer; }
.perm-t tr.pm-g td { background: var(--chip); color: var(--accent); font-size: 11.5px; font-weight: 700; padding: 5px 8px; }
.perm-t .pm-y { color: var(--ok); font-weight: 800; }
.perm-t .pm-n { color: var(--muted); }
#printArea { display: none; }
.pa-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid var(--accent); padding-bottom: 10px; margin-bottom: 14px; font-size: 18px; }
.pa-head span { font-size: 13px; color: var(--muted); }
#printArea p { font-size: 13px; line-height: 1.9; }
@media print {
  body.printing .shell, body.printing .ctoast { display: none !important; }
  body.printing #printArea { display: block !important; direction: rtl; font-family: var(--font); color: #111; }
  body.printing #printArea .btn, body.printing #printArea button, body.printing #printArea select { display: none !important; }
  body.printing #printArea .cbox { break-inside: avoid; border-color: #d5dce3; }
  body.printing #printArea .pc-hdr { position: fixed; top: 0; left: 0; width: 210mm; height: auto; display: block; }
  body.printing #printArea .pc-ftr { position: fixed; bottom: 0; left: 0; width: 210mm; height: auto; display: block; }
  body.printing #printArea .pc-lh { position: fixed; top: 0; left: 2.47mm; width: 205.06mm; height: 290mm; display: block; }
  body.printing #printArea .pc-wrap { width: 100%; border-collapse: collapse; position: relative; }
  body.printing #printArea .pc-wrap > thead > tr > td, body.printing #printArea .pc-wrap > tfoot > tr > td { padding: 0; border: 0; }
  body.printing #printArea .pc-body { padding: 0 14mm; border: 0; vertical-align: top; }
  body.printing #printArea.hf .pa-brand, body.printing #printArea.hf .bk-brand { display: none !important; }
  body.printing #printArea .pdf-meta { margin-bottom: 5mm; }
  body.printing #printArea .bk-doc { background: transparent; }
}

.escm { min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px; direction: rtl; }
.esc-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.esc-app { min-height: 0; height: auto; }
.esc-calc { min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.esc-calc > .calc { overflow: visible; }
#calc.scoped .cchips, #calc.scoped #c-fromcfg { display: none; }
/* dashboard: tiles and headings open their section */
button.kpi.go { position: relative; font: inherit; color: inherit; text-align: right; cursor: pointer; width: 100%; transition: border-color .15s, box-shadow .15s, transform .15s; }
button.kpi.go:hover { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
button.kpi.go:focus-visible, button.dgo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button.kpi.go .go-ic { position: absolute; top: 12px; left: 10px; width: 16px; height: 16px; color: var(--muted); opacity: .55; }
button.kpi.go:hover .go-ic { color: var(--accent); opacity: 1; }
button.dgo { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; text-align: right; }
button.dgo .go-ic { width: 15px; height: 15px; color: var(--muted); opacity: .6; flex: none; }
button.dgo:hover { color: var(--accent); } button.dgo:hover .go-ic { color: var(--accent); opacity: 1; }
.flt-x { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
/* v4.4: order timeline with installation stages */
.shell > #cust, #cust > *, .cp-wrap > *, .cp-main > *, .cp-main .inv-two > * { min-width: 0; }
.cp-tl { padding: 32px 2px 2px; overflow-x: auto; scrollbar-width: thin; }
.cp-tl:not(.open) { padding-top: 2px; }
.cp-tl ol { list-style: none; margin: 0; padding: 0; display: flex; align-items: flex-start; }
.cp-tl li.n { flex: 1 1 0; min-width: 58px; display: grid; justify-items: center; align-content: start; gap: 4px; text-align: center; position: relative; padding: 0 2px; color: var(--muted); }
.cp-tl li.n::before, .cp-tl li.n::after { content: ''; position: absolute; top: 14px; height: 3px; width: 50%; background: var(--line); z-index: 0; }
.cp-tl li.n::before { right: 0; } .cp-tl li.n::after { left: 0; }
.cp-tl li.first::before, .cp-tl li.last::after { display: none; }
.cp-tl li.on::before, .cp-tl li.nx::after { background: var(--accent); }
.cp-tl li.n > * { position: relative; z-index: 1; }
.cp-tl i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 12px; background: var(--panel); border: 2px solid var(--line); color: var(--muted); }
.cp-tl i svg { width: 16px; height: 16px; }
.cp-tl li.n.done > i { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.cp-tl li.n.cur > i { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.cp-tl b { font-size: 11.5px; font-weight: 500; line-height: 1.6; overflow-wrap: anywhere; }
.cp-tl li.n.cur > b { color: var(--ink); font-weight: 700; } .cp-tl li.n.done > b { color: var(--ink); }
.cp-tl small { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.cp-tl li.n.done > small { color: var(--accent); font-weight: 700; } .cp-tl small.now { color: var(--accent); }
.cp-tl li.cmp { flex: 0 0 66px; min-width: 58px; } .cp-tl li.cmp b { white-space: nowrap; }
.cp-tl li.cmp i { width: 24px; height: 24px; margin-top: 3px; font-size: 10.5px; } .cp-tl li.cmp i svg { width: 13px; height: 13px; }
.cp-tl li.cmp b { font-size: 10.5px; } .cp-tl li.cmp small { font-size: 9.5px; }
.cp-tl li.sb i { width: 24px; height: 24px; margin-top: 3px; font-size: 10.5px; border-width: 2px; } .cp-tl li.sb i svg { width: 13px; height: 13px; }
.cp-tl li.sb b { font-size: 10.8px; }
.cp-tl li.grp { flex: 1 1 0; min-width: 0; position: relative; display: block; }
.cp-tl li.grp::before { content: ''; position: absolute; inset: -8px 0 -6px; border-radius: 14px; background: var(--accent-soft); opacity: .55; }
.cp-tl li.grp.done::before { opacity: .3; }
.cp-tl li.grp > ol { position: relative; }
.cp-tl .gh { position: absolute; top: -30px; right: 6px; left: 6px; height: 20px; display: flex; justify-content: center; }
.cp-tl .gh::before { content: ''; position: absolute; bottom: 0; right: 0; left: 0; height: 9px; border: 2px solid var(--accent); border-bottom: 0; border-radius: 8px 8px 0 0; opacity: .45; }
.cp-tl .gh span { position: relative; z-index: 1; background: var(--panel); padding: 0 8px; font-size: 11.5px; font-weight: 800; color: var(--accent); line-height: 16px; white-space: nowrap; }
.cp-tl.sm { padding-top: 28px; } .cp-tl.sm:not(.open) { padding-top: 0; }
.cp-tl.sm i { width: 22px; height: 22px; font-size: 10.5px; } .cp-tl.sm i svg { width: 12px; height: 12px; }
.cp-tl.sm li.n::before, .cp-tl.sm li.n::after { top: 10px; }
.cp-tl.sm li.cmp i, .cp-tl.sm li.sb i { width: 18px; height: 18px; margin-top: 2px; font-size: 9.5px; }
.cp-tl.sm b { font-size: 10.5px; } .cp-tl.sm li.sb b { font-size: 10px; } .cp-tl.sm small { font-size: 9.5px; }
.cp-tl.sm li.sb:not(.cur) > b { display: none; }
.cp-tl.sm .gh { top: -26px; } .cp-tl.sm .gh span { font-size: 10.5px; }
.cp-ord .cp-tl { pointer-events: none; }
/* v4.4: SMS text (default or custom), stage editor, project profit, cheque tools, catalog API */
.st-tpl { display: grid; gap: 8px; }
.st-tpl textarea { width: 100%; border: 1px solid var(--line); background: var(--chip); border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 13px; line-height: 1.8; color: var(--ink); resize: vertical; }
.st-tpl textarea[readonly] { color: var(--muted); background: transparent; border-style: dashed; }
.st-tpl .note { font-size: 11px; }
.st-row .st-tpl { grid-column: 1 / -1; } .st-h { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; } .st-h .cchips { margin-inline-start: auto; } .st-who { color: var(--muted); font-size: 11px; }
.sms-tpl .st-row { grid-template-columns: minmax(0, 1fr); }
.stg-main .in, .stg-row .in, .pf-row .in { display: flex; align-items: center; border: 1px solid var(--line); background: var(--panel); border-radius: 10px; padding: 0 10px; height: 38px; gap: 6px; min-width: 0; }
.stg-main .in:focus-within, .stg-row .in:focus-within, .pf-row .in:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.stg-main .in input, .stg-row .in input, .pf-row .in input { border: 0; background: transparent; outline: none; width: 100%; min-width: 0; font: inherit; font-size: 13px; font-weight: 700; color: var(--ink); text-align: right; padding: 0; }
.pf-row .in .u { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.stg-main .in { min-width: 160px; }
.stg-main .tog input, .stg-row input[type=checkbox] { accent-color: var(--accent); }
.stg-list { display: grid; gap: 8px; }
.stg-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) 150px auto auto auto; gap: 8px; align-items: center; border: 1px solid var(--line); background: var(--chip); border-radius: 12px; padding: 6px 8px; }
.stg-row.done { border-color: var(--ok); }
.stg-row select { border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 9px; padding: 6px 8px; font: inherit; font-size: 12.5px; }
.stg-row .in { background: var(--panel); }
.stg-n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--panel); border: 1px solid var(--line); font-size: 11.5px; font-weight: 800; color: var(--muted); }
.stg-row.done .stg-n { background: var(--ok); color: #fff; border-color: var(--ok); } .stg-n svg { width: 13px; height: 13px; }
.stg-sms { white-space: nowrap; font-size: 12px; } .stg-mv { display: flex; gap: 4px; } .stg-mv .btn { min-width: 30px; justify-content: center; padding: 4px 6px; }
.stg-d:empty { display: none; }
.stg-pv { border: 1px dashed var(--line); border-radius: 14px; padding: 14px 12px 10px; background: var(--panel); }
.erp-stg-h { margin-top: 6px; } .erp-stg-g { display: grid; gap: 6px; } .erp-stg-g > .note { font-size: 11.5px; font-weight: 700; }
.stg-ic { display: inline-grid; color: var(--accent); opacity: .75; } .stg-ic .ico { width: 14px; height: 14px; }
.pf-box .kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.pf-box .kpi b { font-size: 16px; }
.pf-bar { display: flex; height: 12px; border-radius: 99px; overflow: hidden; background: var(--chip); border: 1px solid var(--line); }
.pf-bar i { display: block; height: 100%; } .pf-bar .a, .pf-a { background: #7c8b99; } .pf-bar .b, .pf-b { background: var(--warn); } .pf-bar .c, .pf-c { background: var(--ok); }
.pf-costs { display: grid; gap: 8px; }
.pf-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.pf-q button { font-size: 11.5px; }
.ctable tr.tot td, .ctable tfoot td { font-weight: 800; background: var(--chip); }
.ctable s { color: var(--muted); } b.free { color: var(--ok); }
.chq-rem summary, .cat-api summary { cursor: pointer; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; list-style: none; }
.chq-rem summary::-webkit-details-marker, .cat-api summary::-webkit-details-marker { display: none; }
.chq-rem summary::before, .cat-api summary::before { content: '›'; display: inline-block; transform: rotate(90deg); color: var(--muted); font-weight: 800; transition: transform .15s; }
.chq-rem[open] summary::before, .cat-api[open] summary::before { transform: rotate(-90deg); }
.chq-rem-b, .cat-api-b { display: grid; gap: 12px; margin-top: 12px; }
.chq-flt { display: grid; gap: 10px; }
.chq-flt2 { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.chq-flt2 select { border: 1px solid var(--line); background: var(--chip); color: var(--ink); border-radius: 10px; padding: 6px 10px; font: inherit; font-size: 12.5px; }
.chq-sum .kpi b { font-size: 16px; }
.cat-paste summary { cursor: pointer; font-size: 12.5px; color: var(--muted); }
.cat-paste textarea { width: 100%; margin-top: 8px; border: 1px solid var(--line); background: var(--chip); border-radius: 10px; padding: 8px 10px; font: 12px/1.6 ui-monospace, monospace; color: var(--ink); }
.cp-pprice { font-size: 12.5px; font-weight: 800; color: var(--accent); } .cp-pprice small { font-weight: 500; color: var(--muted); }
.cp-psum { margin: 0; font-size: 13px; } .cp-free { color: var(--ok); }
@media (max-width: 640px) {
  .cp-tl, .cp-tl.sm { padding: 0; overflow: visible; }
  .cp-tl ol { flex-direction: column; align-items: stretch; }
  .cp-tl li.n, .cp-tl li.cmp { flex: none; min-width: 0; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; justify-items: start; align-items: center; text-align: right; gap: 0 10px; padding: 0 0 12px; }
  .cp-tl li.n::before { top: 0; right: 13.5px; width: 3px; height: 15px; }
  .cp-tl li.n::after { top: 15px; bottom: 0; right: 13.5px; left: auto; width: 3px; height: auto; }
  .cp-tl li.cmp { padding-bottom: 6px; } .cp-tl li.cmp i, .cp-tl li.sb i { margin: 0 3px; }
  .cp-tl.sm li.n { padding-bottom: 6px; } .cp-tl.sm li.n::before { height: 11px; right: 9.5px; } .cp-tl.sm li.n::after { top: 11px; right: 9.5px; }
  .cp-tl.sm i { margin: 0 4px; } .cp-tl.sm li.n { grid-template-columns: 30px minmax(0, 1fr) auto; }
  .cp-tl small { justify-self: end; }
  .cp-tl li.grp { flex: none !important; padding: 26px 0 4px; margin: 2px 0 10px; }
  .cp-tl li.grp::before { inset: 0 -6px; }
  .cp-tl .gh { top: 4px; right: 40px; left: auto; height: auto; justify-content: flex-start; } .cp-tl .gh::before { display: none; } .cp-tl .gh span { background: transparent; padding: 0; }
  .cp-tl.sm li.sb:not(.cur) > b { display: block; } .cp-tl li.cmp b { white-space: normal; }
  .stg-row { grid-template-columns: 30px minmax(0, 1fr) auto; } .stg-row select { grid-column: 2; } .stg-row .stg-sms { grid-column: 3; grid-row: 2; } .stg-row .stg-mv { grid-column: 2 / -1; justify-content: flex-end; } .stg-row .stg-d { grid-column: 2 / -1; }
  .pf-row { grid-template-columns: minmax(0, 1fr) auto; } .pf-row .in:first-child { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  html, body { height: auto; }
  .app { display: flex; flex-direction: column; height: auto; }
  .stage { order: -1; position: sticky; top: env(safe-area-inset-top, 0px); height: 52vh; min-height: 320px; z-index: 5; border-radius: 16px; flex: none; }
  .livecap { display: none; }
  .panel { margin-top: 12px; overflow: visible; }
  .pscroll { overflow: visible; }
  .tools { min-width: 0; padding: 6px 8px; }
  .tools .lbl-long { display: none; }
  .tools input[type=range] { width: 70px; }
  .floors { left: auto; right: 12px; top: 12px; transform: none; max-height: calc(100% - 76px); }
  .floors button { min-width: 42px; height: 28px; font-size: 11.5px; }
  .views button { padding: 6px 9px; font-size: 12px; }
  .pick { bottom: 58px; }
  .livecap { padding: 6px 10px; }
  .shell { height: auto; grid-template-rows: auto auto; }
  .calc { overflow: visible; }
  .escm { grid-template-rows: auto auto; }
  .esc-calc { overflow: visible; }
  .ccards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 8px; scrollbar-width: none; }
  .ccard { flex: 0 0 232px; min-height: 0; scroll-snap-align: start; }
  .ccard p { font-size: 12px; }
  .cdetail { grid-template-columns: minmax(0, 1fr); }
  .cres .two { grid-template-columns: minmax(0, 1fr); }
  .cdetail .cbox:last-child .headline { position: sticky; top: 0; z-index: 3; background: var(--panel); padding: 8px 0; margin: -8px 0 0; }
  .seg button { padding: 7px 11px; font-size: 13px; }
  .cchips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .cchips button { flex: none; }
  .bk-doc { padding: 18px 16px; }
  .bk-grid { grid-template-columns: minmax(0, 1fr); }
  .bk-kv { grid-template-columns: minmax(0, 1fr); }
  .bk-toc ol { columns: 1; }
  .inv-two { grid-template-columns: minmax(0, 1fr); }
  .inv-tools select { flex: 1 1 140px; }
  #inv { overflow: visible; }
  .erp-wrap { height: auto; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .erp-side { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 6; padding: 6px; border-radius: 14px; overflow: visible; }
  .erp-brand, .erp-g, .erp-sidefoot { display: none; }
  .erp-nav { display: flex; overflow-x: auto; scrollbar-width: none; gap: 2px; }
  .erp-nav button { flex: none; padding: 7px 10px; font-size: 12.5px; }
  .erp-main { overflow: visible; }
  #cust { overflow: visible; }
  .cp-wrap { height: auto; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .cp-side { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 6; padding: 6px; border-radius: 14px; overflow: visible; }
  .cp-who, .cp-sidefoot { display: none; }
  .cp-nav { display: flex; overflow-x: auto; scrollbar-width: none; gap: 2px; }
  .cp-nav button { flex: none; padding: 7px 10px; font-size: 12.5px; }
  .cp-main { overflow: visible; }
  .cp-design { grid-template-columns: minmax(0, 1fr); }
  .cp-stage { order: -1; position: relative; }
  .cp-stage-host { height: 44vh; min-height: 280px; }
  .cp-done { grid-template-columns: minmax(0, 1fr); }
  .cp-steps { overflow-x: auto; grid-template-columns: repeat(8, minmax(68px, 1fr)); padding-bottom: 4px; }
  .rep-grid { grid-template-columns: minmax(0, 1fr); }
  .inq-top { grid-template-columns: minmax(0, 1fr); }
  .st-row { grid-template-columns: minmax(0, 1fr); }
  .erp-brand { display: block !important; position: absolute; left: 6px; top: 6px; padding: 0; border: 0; z-index: 2; }
  .erp-brand > div:first-child { display: none; }
  .erp-bell { width: 34px; height: 34px; }
  .erp-nav { margin-left: 42px; }
  .erp-bellpop { right: auto; left: 0; top: 42px; }
  .cp-inv { grid-template-columns: minmax(0, 1fr) auto; }
  .cp-inv .vd { grid-column: 1 / -1; justify-self: start; }
  .msg { max-width: 94%; }
  .erp-funnel button { grid-template-columns: 112px minmax(0, 1fr) 28px; }
  .gantt { --gname: 110px; }
}
@media (max-width: 480px) {
  .topbar .seg { display: flex; width: 100%; }
  .topbar .seg button { flex: 1 1 auto; justify-content: center; white-space: nowrap; padding: 7px 6px; font-size: 12.5px; gap: 5px; }
}
@media (max-width: 400px) { .topbar .seg button svg { display: none; } }
/* site shell: top menu, side rail, footer, bottom bar (phone), pages, popup, install banner */
:root { --hov: #e2e9ef; --hov-card: #f3f7fa; --hov-row: #edf2f6; --hov-line: rgba(10,122,162,0.42); --nav-h: 64px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --hov: #182636; --hov-card: #0f1b28; --hov-row: #122030; --hov-line: rgba(76,197,232,0.45); } }
:root[data-theme="dark"] { --hov: #182636; --hov-card: #0f1b28; --hov-row: #122030; --hov-line: rgba(76,197,232,0.45); }
.shell { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; column-gap: 14px; row-gap: 10px; }
.shell > * { grid-column: 2; grid-row: 2; }
.shell > .topbar { grid-row: 1; }
.shell > .sitefoot { grid-row: 3; }
.shell > .nrail { grid-column: 1; grid-row: 1 / 4; }
.topbar { display: flex; align-items: center; justify-content: flex-start; gap: 8px; min-height: 48px; flex-wrap: nowrap; }
.nv-brand { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; padding: 4px 6px 4px 12px; border-radius: 12px; margin-inline-end: 6px; transition: background-color .15s; }
.nv-mark { width: 30px; height: 30px; flex: none; display: block; }
.nv-name { font-size: 15px; font-weight: 800; white-space: nowrap; }
.nv-top { display: flex; align-items: center; gap: 3px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 4px; }
.nv-modes { display: flex; gap: 3px; }
.nv-i { display: inline-flex; align-items: center; gap: 7px; border: 0; background: transparent; color: var(--muted); text-decoration: none; padding: 8px 13px; border-radius: 10px; font-size: 13.5px; font-weight: 500; white-space: nowrap; transition: background-color .15s, color .15s, border-color .15s; }
.nv-i svg { width: 18px; height: 18px; flex: none; }
.nv-i[aria-current="page"] { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.nv-login { margin-inline-start: auto; background: var(--panel); border: 1px solid var(--line); }
.nv-login[aria-current="page"] { border-color: var(--accent); }
.nv-svcw { position: relative; }
.nv-svc { width: 236px; }
.nv-roll { position: relative; display: block; flex: 1; min-width: 0; height: 1.7em; overflow: hidden; }
.nv-rt { position: absolute; inset: 0; display: flex; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: transform .38s cubic-bezier(.2,.7,.2,1), opacity .38s; }
.nv-rt.long { font-size: 12px; }
.nv-rt.in { transform: translateY(75%); opacity: 0; }
.nv-rt.out { transform: translateY(-75%); opacity: 0; }
.nv-chev { width: 15px !important; height: 15px !important; transition: transform .15s; }
.nv-svc[aria-expanded="true"] .nv-chev { transform: rotate(180deg); }
.nv-menu { position: absolute; top: calc(100% + 9px); right: -4px; z-index: 40; width: 340px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 6px; box-shadow: 0 18px 44px rgba(6,11,17,.18); display: grid; gap: 2px; direction: rtl; }
.nv-menu::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.nv-menu a { display: flex; gap: 11px; align-items: flex-start; padding: 9px 10px; border-radius: 11px; color: var(--ink); text-decoration: none; transition: background-color .15s, color .15s; }
.nv-menu a svg { width: 20px; height: 20px; color: var(--accent); flex: none; margin-top: 3px; }
.nv-menu b { display: block; font-size: 13.5px; font-weight: 700; }
.nv-menu small { display: block; color: var(--muted); font-size: 11.5px; line-height: 1.7; }
.nv-menu a[aria-current="page"] { background: var(--accent-soft); }
.nv-menu a[aria-current="page"] b { color: var(--accent); }
.nrail { display: flex; flex-direction: column; gap: 2px; width: 58px; padding: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; min-height: 0; transition: width .18s; direction: rtl; }
.nrail.open { width: 236px; }
.nr-i { position: relative; display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 12px; border: 0; background: transparent; border-radius: 11px; color: var(--muted); text-decoration: none; white-space: nowrap; font-size: 13px; transition: background-color .15s, color .15s; }
.nr-i svg { width: 20px; height: 20px; flex: none; }
.nr-i > span { display: none; }
.nrail.open .nr-i > span { display: block; overflow: hidden; text-overflow: ellipsis; }
.nr-i[aria-current="page"] { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.nr-tog svg { transition: transform .18s; }
.nrail.open .nr-tog svg { transform: scaleX(-1); }
.nr-g { height: 1px; background: var(--line); margin: 5px 8px; font-size: 0; flex: none; }
.nrail.open .nr-g { height: auto; background: none; font-size: 11px; color: var(--muted); padding: 8px 12px 2px; margin: 0; }
.nr-sp { flex: 1; min-height: 6px; }
.nrail:not(.open) .nr-i[data-tip]:hover::after, .nrail:not(.open) .nr-i[data-tip]:focus-visible::after { content: attr(data-tip); position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%); background: var(--ink); color: var(--panel); font-size: 12px; font-weight: 500; padding: 5px 10px; border-radius: 8px; white-space: nowrap; pointer-events: none; z-index: 50; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
@media (max-height: 640px) { .nr-i { min-height: 34px; } }
.sitefoot { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--muted); padding: 0 4px; min-height: 24px; direction: rtl; }
.sf-l { display: flex; gap: 2px; flex-wrap: wrap; }
.sf-l a { color: var(--muted); text-decoration: none; padding: 3px 9px; border-radius: 8px; transition: background-color .15s, color .15s; }
.sf-l a[aria-current="page"] { color: var(--accent); font-weight: 700; }
.bnav, .nsheet { display: none; }
.kindseg { display: flex; width: 100%; }
.kindseg button { flex: 1 1 0; justify-content: center; }
.kindseg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.kindseg button svg { width: 17px; height: 17px; }
/* hover: a soft background and stronger text, never the active colour; same on keyboard focus */
.btn, .opt, .ccard, .cchips button, .presets button, .tabs button, .seg button, .views button, .floors button, .erp-nav button, .cp-nav button, .erp-card, .cp-ord, .sx-li, .ns-grid a, .shs-g button, .shs-g a, .ctable td { transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s, transform .1s; }
@media (hover: hover) {
  .nv-i:not([aria-current="page"]):hover, .nr-i:not([aria-current="page"]):hover, .nv-menu a:not([aria-current="page"]):hover, .sf-l a:not([aria-current="page"]):hover, .nv-brand:hover { background: var(--hov); color: var(--ink); }
  .nv-login:not([aria-current="page"]):hover { border-color: var(--hov-line); }
  .btn:not(.primary):not(.danger):not(:disabled):hover { background: var(--hov); border-color: var(--hov-line); filter: none; }
  .btn.danger:not(:disabled):hover { background: rgba(194,59,59,.08); }
  .cchips button:not([aria-selected="true"]):hover, .presets button:hover, .seg button:not([aria-selected="true"]):not([aria-pressed="true"]):hover, .tabs button:not([aria-selected="true"]):hover { background: var(--hov); color: var(--ink); }
  .views button:not([aria-pressed="true"]):hover, .floors button:not(.cur):hover { background: var(--hov); color: var(--ink); }
  .erp-nav button:not([aria-current="true"]):hover, .cp-nav button:not([aria-current="true"]):hover { background: var(--hov); }
  .opt:not([aria-pressed="true"]):hover, .ccard:not([aria-pressed="true"]):hover, .erp-card:hover, .cp-ord:hover, .sx-li:hover, .ns-grid a:not([aria-current="page"]):hover, .shs-g button:not(:disabled):hover, .shs-g a:hover { border-color: var(--hov-line); background: var(--hov-card); }
  .ctable tbody tr:hover > td, .ctable tr.clk:hover td { background: var(--hov-row); }
  .sx-cb h3 a:hover, .sx-crumb a:hover, .sx-crow a:hover { text-decoration: underline; }
}
.nv-i:not([aria-current="page"]):focus-visible, .nr-i:not([aria-current="page"]):focus-visible, .nv-menu a:not([aria-current="page"]):focus-visible, .sf-l a:not([aria-current="page"]):focus-visible { background: var(--hov); color: var(--ink); }
@media (hover: none) {
  .btn:not(:disabled):active, .opt:active, .ccard:active, .cchips button:active, .seg button:active, .tabs button:active, .views button:active, .sx-li:active, .ns-grid a:active, .shs-g button:active, .shs-g a:active { transform: scale(.97); background-color: var(--hov); }
}
/* pages */
.pg, .equip { align-content: start; grid-template-columns: minmax(0, 1fr); }
.sx-head > div { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; }
.sx-head .sx-hic { grid-row: 1 / 3; }
.sx-head h2 { grid-column: 2; }
.sx-head p { grid-column: 2; max-width: 720px; line-height: 1.9; }
.sx-hic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex: none; }
.sx-hic svg { width: 24px; height: 24px; }
.sx-about, .sx-acc, .sx-contact, .sx-svc { display: grid; gap: 14px; max-width: 1040px; }
.sx-intro p { margin: 0; font-size: 14.5px; line-height: 2.1; }
.sx-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sx-vm { gap: 10px; align-content: start; }
.sx-vm h3 { margin: 0; font-size: 16px; font-weight: 800; }
.sx-vm p { margin: 0; line-height: 2.05; font-size: 13.5px; }
.sx-vic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: var(--accent); background: var(--accent-soft); }
.sx-vic svg { width: 21px; height: 21px; }
.sx-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; max-width: 1040px; }
.sx-li { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid var(--line); background: var(--panel); border-radius: 16px; color: var(--ink); text-decoration: none; }
.sx-li > svg:first-child { width: 22px; height: 22px; color: var(--accent); flex: none; }
.sx-li > span { flex: 1; min-width: 0; }
.sx-li b { display: block; font-size: 13.5px; }
.sx-li small { display: block; color: var(--muted); font-size: 11.5px; line-height: 1.7; }
.sx-go { width: 16px; height: 16px; color: var(--muted); flex: none; }
.sx-acc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sx-acard { align-content: start; gap: 10px; }
.sx-acard h3 { margin: 0; font-size: 16px; font-weight: 800; }
.sx-acard p { margin: 0; color: var(--muted); line-height: 1.9; font-size: 13px; }
.sx-contact { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); align-items: start; }
.sx-contact > .sx-form:only-child { grid-column: 1 / -1; max-width: 680px; }
.sx-cinfo { gap: 0; padding: 10px 18px; }
.sx-crow { display: grid; grid-template-columns: 20px auto minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.sx-crow:last-child { border-bottom: 0; }
.sx-crow svg { width: 19px; height: 19px; color: var(--accent); }
.sx-crow span { color: var(--muted); font-size: 12.5px; }
.sx-crow b, .sx-crow a { justify-self: end; font-weight: 700; color: var(--ink); text-decoration: none; text-align: left; }
.sx-svc { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; }
.sx-sinfo { gap: 12px; }
.sx-lead { margin: 0; font-size: 14px; line-height: 2.05; }
.sx-pts { margin: 0; padding: 0 20px 0 0; display: grid; gap: 6px; font-size: 13px; line-height: 1.9; }
.sx-pts li::marker { color: var(--accent); }
.sx-soon { margin: 0; }
.sx-form { gap: 14px; }
.sx-form h3 { font-size: 15.5px; }
.sx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sx-grid .fld.full { grid-column: 1 / -1; }
.sx-form .fld > label i { color: #c23b3b; font-style: normal; }
.sx-form .fld input { border: 1px solid var(--line); background: var(--chip); border-radius: 10px; height: 40px; padding: 0 10px; font-size: 13.5px; font-weight: 500; width: 100%; min-width: 0; text-align: right; }
.sx-form .fld input[dir="ltr"] { text-align: left; }
.sx-form .fld input:focus, .sx-form .fld textarea:focus, .sx-form .fld select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.sx-form [aria-invalid="true"] { border-color: #c23b3b !important; }
.sx-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.sx-done { justify-items: center; text-align: center; padding: 30px 20px; gap: 8px; }
.sx-done h3 { margin: 0; font-size: 17px; }
.sx-done p { margin: 0; color: var(--muted); line-height: 1.9; }
.sx-ok { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.sx-ok svg { width: 28px; height: 28px; }
.sx-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.sx-cat { padding: 0; overflow: hidden; gap: 0; align-content: start; }
.sx-covw { display: block; aspect-ratio: 4 / 3; background: var(--chip); overflow: hidden; }
.sx-cov { width: 100%; height: 100%; object-fit: cover; display: block; }
.sx-tcov { display: grid; align-content: space-between; padding: 18px; color: #fff; background: linear-gradient(150deg, #0a7aa2, #063f56); position: relative; }
.sx-tcov.c-supplier { background: linear-gradient(150deg, #5559c4, #2b2c70); }
.sx-tcov.c-product { background: linear-gradient(150deg, #1a7a47, #0b3f24); }
.sx-tcov.c-esc { background: linear-gradient(150deg, #b0661a, #643608); }
.sx-tcov small { font-size: 11px; opacity: .85; }
.sx-tcov b { font-size: 19px; font-weight: 800; line-height: 1.6; text-wrap: balance; }
.sx-tcov span { font-size: 11px; opacity: .8; }
.sx-tcov i { position: absolute; left: 14px; top: 14px; font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .08em; border: 1px solid rgba(255,255,255,.6); border-radius: 6px; padding: 1px 6px; }
.sx-cb { padding: 14px 16px 16px; display: grid; gap: 8px; align-content: start; }
.sx-cb .pill { justify-self: start; font-size: 11px; color: var(--muted); border: 1px solid var(--line); background: var(--chip); border-radius: 999px; padding: 2px 10px; }
.sx-cb h3 { margin: 0; font-size: 15px; line-height: 1.7; }
.sx-cb h2 { margin: 0; font-size: 20px; }
.sx-cb h3 a { color: inherit; text-decoration: none; }
.sx-cb p { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.9; }
.sx-meta { display: flex; gap: 12px; color: var(--muted); font-size: 11.5px; }
.sx-meta:empty { display: none; }
.sx-cb .btn svg { width: 16px; height: 16px; vertical-align: -3px; margin-inline-end: 6px; }
.sx-cat1 { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); padding: 0; overflow: hidden; max-width: 900px; gap: 0; }
.sx-cat1 .sx-covw { aspect-ratio: 3 / 4; }
.sx-cat1 .sx-cb { padding: 22px; gap: 12px; }
.sx-crumb { display: flex; gap: 8px; font-size: 12.5px; color: var(--muted); }
.sx-crumb a { color: var(--accent); text-decoration: none; }
.sx-need { display: grid; gap: 6px; font-size: 12.5px; }
.sx-needr { display: flex; gap: 8px; }
.sx-needr input { flex: 1; min-width: 0; height: 40px; border: 1px solid var(--line); border-radius: 10px; background: var(--chip); padding: 0 10px; }
.shs-g a { border: 1px solid var(--line); background: var(--chip); border-radius: 14px; padding: 12px 6px; display: grid; justify-items: center; gap: 6px; font-size: 12px; color: var(--ink); text-decoration: none; }
.shs-g a svg { width: 22px; height: 22px; color: var(--accent); }
/* popup */
.sitepop { position: fixed; left: 28px; bottom: 56px; z-index: 45; direction: rtl; width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.sp-in { pointer-events: auto; position: relative; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px 18px; box-shadow: 0 20px 50px rgba(6,11,17,.22); display: grid; gap: 8px; overflow: hidden; transform: translateY(14px); opacity: 0; transition: transform .22s, opacity .22s; }
.sitepop.in .sp-in { transform: none; opacity: 1; }
.sp-in > b { font-size: 16px; font-weight: 800; padding-inline-end: 30px; color: var(--accent); }
.sp-in ul { margin: 0; padding: 0 18px 0 0; display: grid; gap: 3px; font-size: 13px; line-height: 1.85; }
.sp-in .btn { justify-self: start; text-decoration: none; }
.sp-x { position: absolute; top: 10px; left: 10px; width: 30px; height: 30px; border-radius: 9px; border: 0; background: transparent; color: var(--muted); display: grid; place-items: center; transition: background-color .15s, color .15s; }
.sp-x svg { width: 16px; height: 16px; }
.sp-x:hover, .sp-x:focus-visible { background: var(--hov); color: var(--ink); }
.sp-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--chip); }
.sp-bar i { display: block; height: 100%; background: var(--accent); transform-origin: right; transition: transform .1s linear; }
/* install banner and update notice */
.pwabar { position: fixed; left: 12px; right: 12px; bottom: calc(var(--nav-h) + 18px + env(safe-area-inset-bottom, 0px)); z-index: 44; direction: rtl; }
.pb-in { background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; align-items: center; box-shadow: 0 14px 40px rgba(6,11,17,.2); }
.pb-in > p:first-child { grid-column: 1 / -1; }
.pb-ic .nv-mark { width: 40px; height: 40px; }
.pb-in p { margin: 0; font-size: 13px; line-height: 1.8; }
.pb-a { grid-column: 1 / -1; display: flex; gap: 8px; justify-content: flex-end; }
.pb-ios { grid-column: 1 / -1; color: var(--muted); font-size: 11.5px; line-height: 1.8; }
@media (min-width: 901px) { .pwabar { left: auto; right: 96px; bottom: 56px; width: 380px; } }
@media (max-width: 1180px) and (min-width: 901px) { .nv-name { display: none; } .nv-svc { width: 210px; } .nv-i { padding: 8px 10px; } }
@media (max-width: 900px) {
  body { padding-bottom: calc(var(--nav-h) + 14px + env(safe-area-inset-bottom, 0px)); }
  .topbar, .nrail, .sitefoot { display: none !important; }
  .shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .shell > * { grid-column: 1; grid-row: auto; }
  .bnav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; direction: rtl; background: var(--panel); border-top: 1px solid var(--line); padding: 5px 6px calc(5px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -6px 20px rgba(6,11,17,.06); }
  .bnav > * { display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 54px; min-width: 0; border: 0; background: transparent; color: var(--muted); text-decoration: none; font-size: 11px; font-weight: 500; border-radius: 12px; padding: 4px 2px; transition: color .15s, transform .1s; -webkit-tap-highlight-color: transparent; }
  .bnav svg { width: 22px; height: 22px; padding: 3px 16px; box-sizing: content-box; border-radius: 999px; transition: background-color .15s; }
  .bnav [aria-current="page"] { color: var(--accent); font-weight: 700; }
  .bnav [aria-current="page"] svg { background: var(--accent-soft); }
  .bnav > *:active { transform: scale(.94); }
  .bnav .nv-roll { width: 100%; height: 1.55em; flex: none; }
  .bnav .nv-rt { justify-content: center; }
  .nsheet { display: block; position: fixed; inset: 0; z-index: 60; direction: rtl; }
  .ns-back { position: absolute; inset: 0; background: rgba(6,11,17,.45); opacity: 0; transition: opacity .2s; }
  .ns-in { position: absolute; left: 0; right: 0; bottom: 0; background: var(--panel); color: var(--ink); border-radius: 22px 22px 0 0; padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateY(100%); transition: transform .24s cubic-bezier(.2,.7,.2,1); max-height: 86vh; overflow-y: auto; }
  .nsheet.in .ns-back { opacity: 1; }
  .nsheet.in .ns-in { transform: none; }
  .ns-grab { width: 40px; height: 4px; border-radius: 4px; background: var(--line); margin: 2px auto 10px; }
  .ns-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
  .ns-head b { font-size: 16px; font-weight: 800; }
  .ns-head .btn { display: grid; place-items: center; padding: 6px; }
  .ns-head .btn svg { width: 16px; height: 16px; }
  .ns-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ns-grid a { display: grid; gap: 3px; align-content: start; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--chip); color: var(--ink); text-decoration: none; }
  .ns-grid svg { width: 24px; height: 24px; color: var(--accent); margin-bottom: 4px; }
  .ns-grid b { font-size: 13px; font-weight: 700; line-height: 1.6; }
  .ns-grid small { color: var(--muted); font-size: 11px; line-height: 1.7; }
  .ns-grid a[aria-current="page"] { border-color: var(--accent); background: var(--accent-soft); }
  body.sheet-on { overflow: hidden; }
  .ctoast { bottom: calc(var(--nav-h) + 18px + env(safe-area-inset-bottom, 0px)); z-index: 35; }
  .sitepop { left: 12px; right: 12px; width: auto; bottom: calc(var(--nav-h) + 18px + env(safe-area-inset-bottom, 0px)); }
  .sx-two, .sx-acc, .sx-contact, .sx-svc, .sx-cat1 { grid-template-columns: minmax(0, 1fr); }
  .sx-cat1 .sx-covw { aspect-ratio: 4 / 3; }
  .sx-grid { grid-template-columns: minmax(0, 1fr); }
  .sx-cats { grid-template-columns: minmax(0, 1fr); }
  .pg { overflow: visible; }
}
/* equipment page */
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.equip { gap: 14px; }
.eq-head { display: grid; gap: 12px; }
.eq-head .chead p a { color: var(--accent); }
.eq-pre { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.eq-pre button { text-align: right; display: grid; gap: 2px; align-content: start; border: 1px solid var(--line); background: var(--panel); border-radius: 14px; padding: 10px 12px; color: var(--ink); transition: background-color .15s, border-color .15s, box-shadow .15s; }
.eq-pre b { font-size: 14px; font-weight: 800; }
.eq-pre small { color: var(--muted); font-size: 11px; line-height: 1.6; }
.eq-pre span { font-weight: 800; color: var(--accent); font-size: 13px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.eq-pre button[aria-checked="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 0 5px var(--accent-soft); }
.eq-main { display: grid; grid-template-columns: minmax(330px, 410px) minmax(0, 1fr); gap: 14px; align-items: start; }
.eq-side { position: sticky; top: 0; display: grid; gap: 12px; z-index: 2; }
.eq-stagew { position: relative; height: 380px; border-radius: 18px; overflow: hidden; background: radial-gradient(120% 70% at 50% 0%, var(--stage-top), var(--stage-bot)); }
.eq-stagew > .stage { position: absolute !important; inset: 0 !important; top: 0 !important; height: 100% !important; min-height: 0 !important; border-radius: 18px; }
.stage.eqv .tools, .stage.eqv .floors, .stage.eqv .floorpick, .stage.eqv .views, .stage.eqv .livecap, .stage.eqv .pick, .stage.eqv #anno, .stage.eqv .toast { display: none !important; }
.eq-sbar { position: absolute; z-index: 3; bottom: 10px; left: 10px; display: flex; gap: 6px; }
.eq-sbar .btn { background: var(--glass); border-color: var(--glass-line); color: var(--stage-ink); backdrop-filter: blur(8px); }
.eq-escpic { position: absolute; inset: 0; display: grid; place-items: center; background: var(--panel); padding: 12px; }
.eq-escpic svg { width: 100%; height: auto; max-height: 100%; }
.eq-price, .eq-team, .eq-chg, .eq-act { gap: 10px; padding: 14px 16px; }
.eq-tot { display: grid; gap: 2px; }
.eq-tot span { color: var(--muted); font-size: 12px; }
.eq-tot b { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.eq-tot small { color: var(--muted); font-size: 11.5px; }
.eq-sl input { width: 100%; accent-color: var(--accent); margin: 0; }
.eq-slx { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: -4px; }
.eq-range { margin: 0; font-size: 13px; line-height: 2; }
.eq-range b { font-weight: 800; }
.eq-team h3, .eq-chg h3 { margin: 0; font-size: 14px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.eq-teams { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.eq-teams button { display: grid; gap: 2px; align-content: start; text-align: right; border: 1px solid var(--line); background: var(--chip); border-radius: 12px; padding: 8px 10px; color: var(--ink); transition: background-color .15s, border-color .15s; }
.eq-teams b { font-size: 13px; }
.eq-teams small { font-size: 10.5px; color: var(--muted); line-height: 1.6; }
.eq-teams span { font-size: 12px; font-weight: 800; color: var(--accent); margin-top: 2px; }
.eq-teams button[aria-checked="true"] { border-color: var(--accent); background: var(--accent-soft); }
.eq-n { background: #e0a030; color: #2b1a00; border-radius: 999px; padding: 0 8px; font-size: 11px; }
.eq-chl { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 260px; overflow: auto; }
.eq-chl li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; font-size: 12px; padding: 6px 8px; border-radius: 10px; background: var(--warn-soft); }
.eq-chl small { display: block; color: var(--muted); font-size: 11px; line-height: 1.6; }
.eq-chl em { font-style: normal; font-weight: 800; white-space: nowrap; }
.eq-chl em.dn { color: var(--ok); }
.eq-chl em.up { color: var(--warn); }
.eq-chg .note, .eq-act .note { margin: 0; }
.eq-list { display: grid; gap: 10px; min-width: 0; }
.eq-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.eq-q { flex: 1 1 220px; display: flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--panel); border-radius: 12px; padding: 0 10px; height: 40px; }
.eq-q:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.eq-q svg { width: 16px; height: 16px; color: var(--muted); flex: none; }
.eq-q input { border: 0; background: transparent; outline: none; width: 100%; min-width: 0; font: inherit; font-size: 13px; color: var(--ink); }
.eq-tools select { height: 40px; border: 1px solid var(--line); background: var(--panel); border-radius: 12px; padding: 0 10px; font-size: 13px; }
.eq-tools .chk { min-height: 40px; }
.eq-cats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.eq-cats button { flex: none; }
.eq-cat { display: grid; gap: 6px; }
.eq-cat h3 { margin: 6px 0 0; font-size: 14px; font-weight: 800; display: flex; justify-content: space-between; gap: 10px; }
.eq-cat h3 span { color: var(--muted); font-weight: 700; font-size: 12.5px; }
.eq-t td small { display: block; color: var(--muted); font-size: 11.5px; line-height: 1.7; }
.eq-t td s { display: block; color: var(--muted); font-size: 11px; }
.eq-t td { vertical-align: top; }
.eq-t tr.chg > td { background: var(--warn-soft); }
.eq-t tr.chg > td:first-child { box-shadow: inset -3px 0 0 #e0a030; }
.eq-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
.eq-tags .vd { font-size: 10.5px; }
.eq-cl { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--accent); text-decoration: none; } .eq-cl svg { width: 13px; height: 13px; }
.eq-or { font-size: 10.5px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 0 7px; line-height: 1.8; }
.eq-ac { white-space: nowrap; }
.eq-ac select { max-width: 170px; height: 32px; border: 1px solid var(--line); background: var(--chip); border-radius: 9px; font-size: 12px; padding: 0 6px; vertical-align: middle; }
.eq-lk { padding: 5px; display: inline-grid; place-items: center; vertical-align: middle; margin-inline-end: 4px; }
.eq-lk svg { width: 15px; height: 15px; }
.eq-lk[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
@media (hover: hover) { .eq-pre button:not([aria-checked="true"]):hover, .eq-teams button:not([aria-checked="true"]):hover { border-color: var(--hov-line); background: var(--hov-card); } }
@media (max-width: 1180px) { .eq-pre { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .equip { overflow: visible; }
  .eq-main { grid-template-columns: minmax(0, 1fr); }
  .eq-side { position: static; }
  .eq-stagew { height: 44vh; min-height: 270px; }
  .eq-pre { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 44%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 2px; }
  .eq-pre button { scroll-snap-align: start; }
  .eq-teams { grid-template-columns: minmax(0, 1fr); }
  .eq-t th:nth-child(3), .eq-t td:nth-child(3) { display: none; }
  .eq-t thead { display: none; }
  .eq-t, .eq-t tbody { display: block; }
  .eq-t tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 10px 8px; border-bottom: 1px solid var(--line); }
  .eq-t td { display: block; border: 0 !important; padding: 0 !important; }
  .eq-t td:nth-child(1), .eq-t td:nth-child(5) { grid-column: 1 / -1; }
  .eq-t td:nth-child(2) { color: var(--muted); font-size: 12px; }
  .eq-t td:nth-child(4) { text-align: left; }
  .eq-t td:nth-child(3) { display: none; }
  .eq-ac { display: flex !important; gap: 6px; }
  .eq-ac select { max-width: none; flex: 1; min-width: 0; }
  .eq-t tr.chg > td { background: transparent; }
  .eq-t tr.chg { background: var(--warn-soft); box-shadow: inset -3px 0 0 #e0a030; }
  .eq-t tr.chg > td:first-child { box-shadow: none; }
}
.in.sm { display: flex; align-items: center; border: 1px solid var(--line); background: var(--chip); border-radius: 9px; padding: 0 8px; height: 34px; gap: 6px; min-width: 110px; }
.in.sm:focus-within { border-color: var(--accent); }
.in.sm input { border: 0; background: transparent; outline: none; width: 100%; min-width: 0; font: inherit; font-size: 12.5px; color: var(--ink); }
.in.sm .u { font-size: 11px; color: var(--muted); }
.eqp-t td small, .ctable td > small { display: block; color: var(--muted); font-size: 11px; line-height: 1.6; }
@media print { .nrail, .bnav, .nsheet, .sitefoot, .sitepop, .pwabar { display: none !important; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }
@media (prefers-reduced-motion: reduce) { .nv-rt, .ns-in, .sp-in, .nrail { transition: none !important; } }