		/* ---- Unified app bar, desktop top --------------------------
		 * Same design language as the mobile bottom bar further down:
		 * icon-over-label items in muted ink, the accent color marking
		 * the active page, and a raised accent "+" circle for New
		 * Request. Hidden on phones (<=782px), where the fixed bottom
		 * bar takes over. */
		.paintops-appbar {
			display: flex;
			align-items: center;
			gap: 4px;
			background: var(--po-card-bg, #fff);
			border: 1px solid var(--po-card-border, #e3e6ea);
			border-radius: var(--po-radius, 12px);
			box-shadow: 0 2px 10px rgba(0,0,0,.06);
			padding: 6px 10px;
			margin-bottom: 26px;
		}
		.paintops-appbar .pab-item {
			display: flex; flex-direction: column; align-items: center; justify-content: center;
			gap: 4px; padding: 8px 18px; min-width: 76px; min-height: 58px;
			border: 0; background: transparent; border-radius: 10px; cursor: pointer;
			box-sizing: border-box;
			color: var(--po-text-muted, #6b7280) !important; text-decoration: none;
			font-size: 12px; font-weight: 600; line-height: 1; font-family: inherit;
		}
		.paintops-appbar .pab-item .dashicons { font-size: 24px; width: 24px; height: 24px; }
		.paintops-appbar .pab-item:hover { background: var(--po-tile-bg, #f5f7f9); color: var(--po-accent, #4682B4) !important; }
		.paintops-appbar .pab-item.is-active { color: var(--po-accent, #4682B4) !important; }
		/* Desktop "+" New Request (round 5, Mike: the raised circle read
		 * slightly oversized next to its siblings on large screens): a
		 * PLAIN icon+label item exactly like the others, muted ink at
		 * rest, accent when active via the shared .pab-item.is-active
		 * rule. The raised circle lives on ONLY in the phone bottom bar
		 * (.pbn-plus below), untouched per Mike. */
		.paintops-appbar .pab-new { color: var(--po-text-muted, #6b7280) !important; font-weight: 600; }
		.paintops-appbar .pab-plus {
			display: flex; align-items: center; justify-content: center;
			background: none; border: 0; box-shadow: none; width: auto; height: auto; color: inherit;
		}
		.paintops-appbar .pab-plus .dashicons { font-size: 24px; width: 24px; height: 24px; }
		/* More lives at the bar's right end, a <details> dropdown.
		 * Explicit display/width/margin (with !important) because WP core
		 * ("Details" block baseline CSS) and some themes style bare
		 * <details>/<summary> tags and would otherwise stretch this item
		 * to full width/block instead of sizing to its content. */
		.paintops-appbar .pab-more {
			position: relative !important;
			display: inline-flex !important;
			width: auto !important;
			max-width: none !important;
			margin: 0 0 0 auto !important;
			padding: 0 !important;
			border: none !important;
			background: none !important;
			flex: 0 0 auto !important;
		}
		.paintops-appbar .pab-more summary {
			list-style: none !important;
			margin: 0 !important;
			border: none !important;
			width: auto !important;
		}
		.paintops-appbar .pab-more summary::-webkit-details-marker,
		.paintops-appbar .pab-more summary::marker {
			display: none;
			content: '';
		}
		.pab-panel {
			position: absolute;
			top: calc(100% + 8px);
			right: 0;
			left: auto;
			background: var(--po-menu-bg, #fff);
			border: 1px solid var(--po-menu-border, #ddd);
			border-radius: var(--po-radius, 10px);
			box-shadow: 0 6px 20px rgba(0,0,0,.14);
			padding: 8px;
			min-width: 220px;
			z-index: 60;
		}
		.pab-group { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: #9aa4af; font-weight: 700; margin: 8px 6px 2px; }
		.pab-panel a {
			display: flex; align-items: center; gap: 10px;
			padding: 10px;
			border-radius: 8px;
			text-decoration: none;
			color: var(--po-menu-text, #333) !important;
			font-size: 14px; font-weight: 600;
			white-space: nowrap;
		}
		.pab-panel a .dashicons { font-size: 20px; width: 20px; height: 20px; color: var(--po-accent, #4682B4); }
		.pab-panel a:hover {
			background: var(--po-menu-hover, #f2f2f2);
		}
		.pab-panel a.is-active {
			color: var(--po-accent, #4682B4) !important;
		}
		@media screen and (max-width: 782px) {
			.paintops-appbar { display: none !important; }
		}
		.pro-badge {
			/* Tiny superscript marker (Mike's call 2026-07-22), replaces
			 * the old chip: quieter next to menu labels, reads like
			 * "Profits^PRO" rather than a button. */
			display: inline-block;
			color: #8a7f3f;
			font-size: 8px;
			font-weight: 700;
			text-transform: uppercase;
			letter-spacing: 0.4px;
			line-height: 1;
			margin-left: 2px;
			vertical-align: super;
		}
		.pab-panel a.paintops-nav-upgrade {
			color: #8a6d3b !important;
			border-top: 1px solid var(--po-line, #eee);
			margin-top: 6px;
			border-radius: 0 0 8px 8px;
		}
		.pab-panel a.paintops-nav-upgrade:hover {
			background: #fdf6e3;
		}
		.pab-panel a.paintops-nav-upgrade .dashicons { color: #d4a017; }

		/* ---- Sticky (Settings > Appearance) -------------------------
		 * Pins the desktop app bar to the top of the viewport as the
		 * page scrolls; the bar is an opaque card so content slides
		 * cleanly underneath. Sits below the WP admin bar when present
		 * (32px, desktop only; the bar is hidden at <=782px so the
		 * mobile admin-bar case never arises). */
		.paintops-appbar.paintops-appbar-sticky {
			/* Pinned FLUSH to the viewport top (2026-07-19, Mike's report):
			 * the old top:8px floating gap let page content scroll visibly
			 * through the sliver above the bar. */
			position: sticky;
			top: 0;
			z-index: 50;
			border-top-left-radius: 0;
			border-top-right-radius: 0;
		}
		.admin-bar .paintops-appbar.paintops-appbar-sticky { top: 32px; }

			.paintops-bottomnav { display: none; }
			.pbn-sheet[hidden], .pbn-sheet-backdrop[hidden] { display: none; }
			@media screen and (max-width: 782px) {
				.paintops-bottomnav {
					display: flex;
					position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
					justify-content: space-around; align-items: center;
					background: var(--po-card-bg, #fff);
					border-top: 1px solid var(--po-card-border, #ddd);
					box-shadow: 0 -2px 12px rgba(0,0,0,.10);
					padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
				}
				body.paintops-nav-bottom-active {
					/* --pbn-clear: total space content (and the Save button
					 * inside its bar) keeps above the viewport bottom, sized
					 * so the Save button never sits close enough to the
					 * raised New Request "+" to mis-tap.
					 * --pbn-bar: the nav bar's own rendered height (6px top
					 * pad + 52px item min-height + 6px bottom pad + safe
					 * area); job-style.php anchors the fixed Save bar's
					 * CONTAINER to this so it sits flush on the nav with no
					 * see-through gap, and turns the difference
					 * (--pbn-clear minus --pbn-bar) into opaque padding
					 * inside the container instead (Mike's ask, 2026-07-19:
					 * no page text scrolling between the two bars). Keep
					 * --pbn-bar in sync if the bar's padding/min-height
					 * ever changes. */
					--pbn-clear: calc(100px + env(safe-area-inset-bottom));
					--pbn-bar: calc(64px + env(safe-area-inset-bottom));
					padding-bottom: var(--pbn-clear) !important;
				}
			}
			.paintops-bottomnav .pbn-item {
				flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
				gap: 3px; padding: 6px 4px; min-height: 52px; border: 0; background: transparent; cursor: pointer;
				color: var(--po-text-muted, #6b7280) !important; text-decoration: none;
				font-size: 11px; font-weight: 600; line-height: 1;
			}
			.paintops-bottomnav .pbn-item .dashicons { font-size: 24px; width: 24px; height: 24px; }
			.paintops-bottomnav .pbn-item.is-active { color: var(--po-accent, #4682B4) !important; }
			.paintops-bottomnav .pbn-center {
				flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 3px;
				/* Muted label like its siblings (2026-07-19, was permanent
				 * accent = looked active on every page); the raised accent
				 * "+" circle is the emphasis, and is-active below restores
				 * the accent label only on the actual New Request page. */
				text-decoration: none; color: var(--po-text-muted, #6b7280) !important;
				font-size: 11px; font-weight: 700; transform: translateY(-12px);
			}
			.paintops-bottomnav .pbn-center.is-active { color: var(--po-accent, #4682B4) !important; }
			.paintops-bottomnav .pbn-plus {
				display: flex; align-items: center; justify-content: center; width: 54px; height: 54px;
				/* Solid muted fill at rest (round 4, see the desktop note);
				 * Fresh alone swaps to an outline in its theme extras. */
				border-radius: 50%; background: var(--po-text-muted, #6b7280); color: #fff;
				box-sizing: border-box;
				box-shadow: 0 4px 12px rgba(0,0,0,.24);
			}
			.paintops-bottomnav .pbn-center.is-active .pbn-plus { background: var(--po-accent, #4682B4) !important; border-color: transparent; color: #fff !important; }
			.paintops-bottomnav .pbn-plus .dashicons { font-size: 28px; width: 28px; height: 28px; }
			.pbn-sheet-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 1001; }
			.pbn-sheet {
				position: fixed; left: 0; right: 0; bottom: 0; z-index: 1002;
				background: var(--po-card-bg, #fff); border-radius: 16px 16px 0 0;
				padding: 6px 16px calc(18px + env(safe-area-inset-bottom));
				box-shadow: 0 -6px 24px rgba(0,0,0,.2); max-height: 72vh; overflow: auto;
			}
			.pbn-sheet-handle { width: 40px; height: 4px; border-radius: 2px; background: #ccc; margin: 8px auto 6px; }
			.pbn-sheet-group { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: #9aa4af; font-weight: 700; margin: 14px 4px 2px; }
			.pbn-sheet a {
				display: flex; align-items: center; gap: 12px; padding: 14px 8px;
				border-bottom: 1px solid var(--po-line, #eee);
				color: var(--po-text, #333) !important; text-decoration: none; font-size: 16px; font-weight: 600;
			}
			.pbn-sheet a:last-child { border-bottom: 0; }
			.pbn-sheet a .dashicons { font-size: 22px; width: 22px; height: 22px; color: var(--po-accent, #4682B4); }
			.pbn-sheet a.is-active { color: var(--po-accent, #4682B4) !important; }
			.pbn-sheet .pro-badge, .pbn-sheet .paintops-nav-upgrade { }
