/* ==========================================================================
   DAC Marketing Hub — Front-end Styles  v1.30.1
   Accessible single-grid hub for older / low-vision brokers: large text,
   high-contrast colors (WCAG AA/AAA), big touch targets, light page canvas.
   Covers:
     [dac_document_hub] — search + group tabs, card grid, full-page editor
     [dac_documents]    — document library list
   ========================================================================== */

/* ── Design tokens ──────────────────────────────────────────────────────── */

.dac-doc-hub {
	--hub-canvas:        #F4F7FB;   /* browse area background */
	--hub-surface:       #FFFFFF;   /* cards, nav, panels     */
	--hub-surface-2:     #EEF1F7;   /* subtle raised / inputs */
	--hub-border:        #D3DBE8;   /* 2px borders (3:1 non-text contrast) */
	--hub-border-h:      #9FB6E0;   /* hover border           */
	--hub-accent:        #0048B8;   /* DAC blue 8.6:1 on white — structure / active / links */
	--hub-accent-h:      #003FA3;
	--hub-accent-light:  #EAF1FC;   /* blue tint fill         */
	--hub-green:         #0B7A3D;   /* accessible green — white text passes AA (brand #27BD68 fails) */
	--hub-green-h:       #0A6A35;
	--hub-navy:          #0A083B;   /* headings — max contrast */
	--hub-blue:          #0048B8;
	--hub-text:          #1A2233;   /* body text 13:1         */
	--hub-muted:         #4A5568;   /* secondary text 7:1 (AAA) */
	--hub-mat:           #E9EFF9;   /* preview mat            */
	--hub-radius:        20px;      /* cards / panels         */
	--hub-radius-sm:     14px;      /* buttons / inputs       */
	--hub-radius-pill:   999px;     /* tabs / chips           */
	--hub-shadow:        0 1px 2px rgba(10,8,59,0.05), 0 6px 18px rgba(10,8,59,0.06);
	--hub-shadow-h:      0 6px 14px rgba(10,8,59,0.10), 0 22px 48px rgba(10,8,59,0.16);
	--hub-editor-left:   420px;

	font-family: inherit;
	font-size: 1rem;               /* respect the browser's default/zoom font size, not a hard 16px */
	color: var(--hub-text);
	background: transparent;        /* page canvas is light; topnav + browse carry their own surfaces */
	min-height: 60vh;
	display: flex;
	flex-direction: column;
	position: relative;
	box-sizing: border-box;
	max-width: none;                        /* fill the full page width (Bricks section is already full-bleed) */
	width: 100%;
	margin: 0 auto;
	padding: 28px clamp(14px, 3.5vw, 60px); /* wider side gutters as the screen grows, tighter on phones */
}

/* Strong, consistent keyboard focus for every control in the hub (a11y) */
.dac-doc-hub button:focus-visible,
.dac-doc-hub a:focus-visible,
.dac-doc-hub input:focus-visible,
.dac-doc-hub [tabindex]:focus-visible {
	outline: 3px solid var(--hub-accent);
	outline-offset: 2px;
}

/* ==========================================================================
   Top nav bar — search + group tabs (light)
   ========================================================================== */

.dac-hub-topnav {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 18px 28px;
	border: 1px solid var(--hub-border);
	border-bottom: none;
	border-radius: var(--hub-radius) var(--hub-radius) 0 0;
	background: var(--hub-surface);
	flex-shrink: 0;
	flex-wrap: wrap;
	position: relative;
}

/* ── Search — right-aligned, wider ─────────────────────────────────────── */

.dac-hub-search-wrap {
	position: relative;
	flex-shrink: 0;
	width: 280px;
	order: 2;
	margin-left: auto;
}

.dac-hub-search-wrap svg {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--hub-muted);
	pointer-events: none;
}

.dac-hub-search {
	width: 100%;
	padding: 11px 14px 11px 42px;
	border: 1px solid var(--hub-border);
	border-radius: var(--hub-radius-pill);
	background: var(--hub-surface-2);
	color: var(--hub-text);
	font-size: 0.9rem;
	outline: none;
	transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
	box-sizing: border-box;
}

.dac-hub-search::placeholder { color: var(--hub-muted); }

.dac-hub-search:focus {
	border-color: var(--hub-accent);
	background: #fff;
	box-shadow: 0 0 0 3px rgba(0,72,184,0.10);
}

/* ── Group nav tabs — quiet text pills, blue-tint active ────────────────── */

.dac-hub-group-nav {
	display: flex;
	align-items: center;
	flex-wrap: wrap;   /* desktop: every group tab stays visible, no cut-off tabs */
	gap: 6px;
	flex: 1;
	order: 1;
	overflow-x: auto;
	scrollbar-width: none;
}

.dac-hub-group-nav::-webkit-scrollbar { display: none; }

.dac-group-nav-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 13px;
	border: 1px solid var(--hub-border);
	border-radius: var(--hub-radius-pill);
	background: var(--hub-surface);
	color: var(--hub-text);
	font-size: 0.82rem;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
	line-height: 1;
}

.dac-group-nav-btn:hover {
	background: var(--hub-accent-light);
	border-color: var(--hub-border-h);
	color: var(--hub-accent);
}

.dac-group-nav-btn:focus-visible {
	outline: 2px solid var(--hub-accent);
	outline-offset: 2px;
}

.dac-group-nav-btn.active {
	background: var(--hub-accent);
	border-color: transparent;
	color: #fff;
	box-shadow: 0 2px 8px rgba(0,72,184,0.28);
}

.dac-nav-count {
	font-size: 0.66rem;
	font-weight: 700;
	background: var(--hub-surface-2);
	color: var(--hub-muted);
	border-radius: 10px;
	padding: 1px 6px;
	transition: background 0.15s, color 0.15s;
}

.dac-group-nav-btn:hover .dac-nav-count {
	background: rgba(0,72,184,0.18);
	color: var(--hub-accent);
}

.dac-group-nav-btn.active .dac-nav-count {
	background: rgba(255,255,255,0.24);
	color: #fff;
}

/* ==========================================================================
   Browse area — white background with light-mode cards
   ========================================================================== */

.dac-hub-browse {
	flex: 1;
	padding: 34px 30px 60px;
	display: flex;
	flex-direction: column;
	gap: 0;
	min-height: 0;
	background:
		radial-gradient( 120% 82% at 100% 0%, rgba(0,72,184,0.055) 0%, transparent 56% ),
		radial-gradient( 90% 60% at 0% 4%, rgba(39,189,104,0.035) 0%, transparent 50% ),
		var(--hub-canvas);
	border: 1px solid var(--hub-border);
	border-top: none;
	border-radius: 0 0 var(--hub-radius) var(--hub-radius);
}

.dac-hub-browse-header {
	margin-bottom: 26px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--hub-border);
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.dac-hub-active-title {
	font-size: 1.55rem;
	font-weight: 800;
	color: var(--hub-navy);
	letter-spacing: -0.03em;
	margin: 0;
	line-height: 1.2;
}

/* ── Category chips — light mode ────────────────────────────────────────── */

.dac-hub-cat-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px;
}

.dac-hub-cat-chips:empty { display: none; }

.dac-cat-label {
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--hub-muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-right: 2px;
	white-space: nowrap;
}

.dac-cat-btn {
	padding: 6px 14px;
	border: 1px solid var(--hub-border);
	border-radius: var(--hub-radius-pill);
	background: var(--hub-surface);
	color: var(--hub-text);
	font-size: 0.8rem;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
	white-space: nowrap;
}

.dac-cat-btn:hover {
	color: var(--hub-accent);
	border-color: var(--hub-border-h);
	background: var(--hub-accent-light);
}

.dac-cat-btn:focus-visible {
	outline: 2px solid var(--hub-accent);
	outline-offset: 2px;
}

.dac-cat-btn.active {
	background: var(--hub-accent);
	border-color: var(--hub-accent);
	color: #fff;
	font-weight: 600;
}

/* ==========================================================================
   Card grid
   ========================================================================== */

.dac-hub-grid {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: 22px;
	align-content: start;
}

.dac-hub-card[hidden] { display: none !important; }

/* ── Loading / empty / error states ────────────────────────────────────── */

.dac-hub-loading,
.dac-hub-empty,
.dac-hub-error {
	grid-column: 1 / -1;
	padding: 60px 24px;
	text-align: center;
	color: #94a3b8;
	font-size: 0.9rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.dac-hub-empty {
	flex-direction: column;
	gap: 12px;
}

@keyframes dac-spin { to { transform: rotate(360deg); } }

.dac-hub-loading-icon {
	animation: dac-spin 0.9s linear infinite;
	opacity: 0.5;
}

.dac-hub-error { color: #ef4444; }

/* ── Skeleton loading cards (match card shape; replaced by real cards on load) ── */

.dac-hub-sr-loading {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.dac-hub-skel {
	background: var(--hub-surface);
	border: 1px solid var(--hub-border);
	border-radius: var(--hub-radius);
	box-shadow: var(--hub-shadow);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.dac-hub-skel-preview {
	height: 210px;
	border-bottom: 1px solid var(--hub-border);
}

.dac-hub-skel-body {
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.dac-hub-skel-line {
	border-radius: 6px;
	height: 12px;
}

.dac-hub-skel-line--tag   { width: 38%; height: 14px; border-radius: 6px; }
.dac-hub-skel-line--title { width: 82%; height: 15px; }
.dac-hub-skel-line--desc  { width: 60%; }
.dac-hub-skel-line--btn   { width: 100%; height: 40px; border-radius: var(--hub-radius-sm); margin-top: 6px; }

/* Shared shimmer sweep */
.dac-hub-skel-preview,
.dac-hub-skel-line {
	background: linear-gradient( 100deg, #EDF1F7 30%, #F6F8FC 50%, #EDF1F7 70% );
	background-size: 220% 100%;
	animation: dac-hub-shimmer 1.4s ease-in-out infinite;
}

@keyframes dac-hub-shimmer {
	from { background-position: 180% 0; }
	to   { background-position: -60% 0; }
}

@media ( prefers-reduced-motion: reduce ) {
	.dac-hub-skel-preview,
	.dac-hub-skel-line { animation: none; }
}

/* Result count below section title */
.dac-hub-result-count {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--hub-muted);
	display: block;
	margin-top: -6px;
	letter-spacing: 0.01em;
}

/* Clear filters button inside empty state */
.dac-hub-clear-filters-btn {
	padding: 7px 18px;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	background: #fff;
	color: #475569;
	font-size: 0.83rem;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
	margin-top: 4px;
}

.dac-hub-clear-filters-btn:hover {
	background: #f1f5f9;
	border-color: #cbd5e1;
	color: #1e293b;
}

.dac-hub-clear-filters-btn:focus-visible {
	outline: 2px solid #0048B8;
	outline-offset: 2px;
}

/* ── Card — light background ────────────────────────────────────────────── */

.dac-hub-card {
	background: var(--hub-surface);
	border: 1px solid var(--hub-border);
	border-radius: var(--hub-radius);
	box-shadow: var(--hub-shadow);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	cursor: pointer;
	transition: transform 0.22s cubic-bezier(0.16,1,0.3,1), box-shadow 0.22s, border-color 0.22s;
}

.dac-hub-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--hub-shadow-h);
	border-color: var(--hub-border-h);
}

/* Staggered entrance on first load (does not replay on filter — cards are only hidden) */
@keyframes dac-hub-card-in {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}

@media ( prefers-reduced-motion: no-preference ) {
	.dac-hub-grid > .dac-hub-card {
		animation: dac-hub-card-in 0.52s cubic-bezier(0.16,1,0.3,1) both;
	}
	.dac-hub-grid > .dac-hub-card:nth-child(1)  { animation-delay: 0.00s; }
	.dac-hub-grid > .dac-hub-card:nth-child(2)  { animation-delay: 0.04s; }
	.dac-hub-grid > .dac-hub-card:nth-child(3)  { animation-delay: 0.08s; }
	.dac-hub-grid > .dac-hub-card:nth-child(4)  { animation-delay: 0.12s; }
	.dac-hub-grid > .dac-hub-card:nth-child(5)  { animation-delay: 0.16s; }
	.dac-hub-grid > .dac-hub-card:nth-child(6)  { animation-delay: 0.20s; }
	.dac-hub-grid > .dac-hub-card:nth-child(7)  { animation-delay: 0.24s; }
	.dac-hub-grid > .dac-hub-card:nth-child(8)  { animation-delay: 0.28s; }
	.dac-hub-grid > .dac-hub-card:nth-child(n+9) { animation-delay: 0.30s; }
}

/* ── Card thumbnail ─────────────────────────────────────────────────────── */

.dac-hub-card-preview {
	position: relative;
	width: 100%;
	height: 210px;
	padding: 18px;
	box-sizing: border-box;
	background:
		radial-gradient( 118% 96% at 50% 26%, #EEF3FC 0%, #DEE8F7 60%, #D2DEF0 100% );
	overflow: hidden;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: 1px solid var(--hub-border);
}

/* Thumbnails render as a white "sheet" floating on the tinted mat, so white
   documents read as a distinct page instead of blending into the card. */
.dac-hub-card-preview canvas,
.dac-hub-card-thumb {
	display: block;
	width: 100%;
	height: 100%;
	object-position: top center;
	background: #fff;
	border-radius: 7px;
	box-shadow: 0 2px 6px rgba(10,8,59,0.10), 0 12px 24px rgba(10,8,59,0.12);
	transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
}

/* Documents (PDF canvas) show the whole page on the sheet; photos/graphics fill it. */
.dac-hub-card-preview canvas { object-fit: contain; }
.dac-hub-card-thumb        { object-fit: cover; }

.dac-hub-card:hover .dac-hub-card-preview canvas,
.dac-hub-card:hover .dac-hub-card-thumb { transform: translateY(-2px) scale(1.02); }

.dac-hub-card-no-preview {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	color: var(--hub-muted);
	font-size: 0.82rem;
	background: #fff;
	border-radius: 7px;
	box-shadow: 0 2px 6px rgba(10,8,59,0.08), 0 12px 24px rgba(10,8,59,0.10);
}

/* ── Variant badge (overlay on card preview) ─────────────────────────── */

.dac-hub-card-variant-badge {
	position: absolute;
	top: 8px;
	right: 8px;
	padding: 3px 8px;
	border-radius: 999px;
	font-size: 0.69rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	background: rgba(0, 72, 184, 0.88);
	color: #fff;
	backdrop-filter: blur(4px);
	pointer-events: none;
	white-space: nowrap;
}

/* ── Card info ──────────────────────────────────────────────────────────── */

.dac-hub-card-info {
	padding: 16px 18px 18px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}

.dac-hub-card-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	align-items: center;
}

/* Card badges. Group = the one colored tag; category = a quiet label beside it. */
.dac-hub-card-badges {
	gap: 8px;
}

.dac-hub-card-cat {
	display: inline-flex;
	align-items: center;
	font-size: 0.66rem;
	font-weight: 700;
	color: var(--hub-muted);
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 2px 0;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Dot separator only when a colored group tag precedes the category label */
.dac-hub-card-group + .dac-hub-card-cat::before {
	content: "";
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--hub-border-h);
	margin-right: 8px;
}

/* Hide group badge when a group filter is active — it's already shown in the nav */
.dac-doc-hub.dac-group-active .dac-hub-card-group { display: none; }
/* Hide category badge when a category filter is active — it's shown in the chip bar */
.dac-doc-hub.dac-cat-active .dac-hub-card-cat { display: none; }

/* Group badge — the card's one colored tag (eyebrow style) */
.dac-hub-card-group {
	display: inline-block;
	font-size: 0.64rem;
	font-weight: 700;
	color: var(--hub-accent);
	background: var(--hub-accent-light);
	border: 1px solid transparent;
	border-radius: 6px;
	padding: 3px 9px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.dac-hub-card-title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--hub-navy);
	line-height: 1.32;
	letter-spacing: -0.01em;
	margin: 0;
	/* Clamp to 2 lines so all cards have the same title height */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc( 1rem * 1.32 * 2 );
}

.dac-hub-card-desc {
	font-size: 0.8rem;
	color: var(--hub-muted);
	line-height: 1.5;
	margin: 0;
	flex: 1;
	/* Clamp to 2 lines to keep button row flush across all cards */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc( 0.8rem * 1.5 * 2 );
}

/* ── Card action buttons — always coloured, never neutral ─────────────── */

.dac-hub-card-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 11px 16px;
	margin-top: 8px;
	border-radius: var(--hub-radius-sm);
	font-size: 0.84rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: background 0.16s, border-color 0.16s, color 0.16s, box-shadow 0.16s, transform 0.1s;
	text-align: center;
	text-decoration: none;
	box-sizing: border-box;
	border: 1px solid transparent;
	white-space: nowrap;
}

/* Customize & Download — green (primary CTA per DAC brand system) */
.dac-hub-customize-btn {
	background: #27BD68;
	border-color: #27BD68;
	color: #fff;
}

.dac-hub-customize-btn:hover {
	background: #22A85D;
	border-color: #22A85D;
	box-shadow: 0 4px 14px rgba(39,189,104,0.40), 0 1px 3px rgba(39,189,104,0.20);
	color: #fff;
}

/* Download only + View Variants — outlined blue (secondary action) */
.dac-hub-download-only-btn,
.dac-hub-view-variants-btn {
	background: transparent;
	border-color: var(--hub-accent);
	color: var(--hub-accent);
}

.dac-hub-download-only-btn:hover,
.dac-hub-view-variants-btn:hover {
	background: var(--hub-accent);
	border-color: var(--hub-accent);
	box-shadow: 0 4px 14px rgba(0,72,184,0.22), 0 1px 3px rgba(0,72,184,0.15);
	color: #fff;
	text-decoration: none;
}

/* Tactile press + keyboard focus on every card action button */
.dac-hub-card-btn:active { transform: scale(0.98); }

.dac-hub-card-btn:focus-visible {
	outline: 2px solid var(--hub-accent);
	outline-offset: 2px;
}

/* Slides cards: Preview + Download PDF stacked full-width (never wrap the label
   on the narrower cards of a 4-across grid) */
.dac-hub-card-btn-row {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 8px;
}

.dac-hub-card-btn-row .dac-hub-card-btn {
	width: 100%;
	margin-top: 0;
}

/* Preview — filled blue (primary action for a Slides card) */
.dac-hub-slides-preview-btn {
	background: var(--hub-accent);
	border-color: var(--hub-accent);
	color: #fff;
}

.dac-hub-slides-preview-btn:hover {
	background: var(--hub-accent-h);
	border-color: var(--hub-accent-h);
	box-shadow: 0 4px 14px rgba(0,72,184,0.35), 0 1px 3px rgba(0,72,184,0.2);
	color: #fff;
}

/* ==========================================================================
   Full-page editor
   ========================================================================== */

.dac-hub-editor {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
	background: var(--hub-canvas);
	border: 1px solid var(--hub-border);
	border-radius: var(--hub-radius);
	overflow: hidden;
}

.dac-hub-topnav[hidden]  { display: none !important; }
.dac-hub-browse[hidden]  { display: none !important; }
.dac-hub-editor[hidden]  { display: none !important; }
#dac-hub-empty[hidden]   { display: none !important; }

/* ── Editor topbar ──────────────────────────────────────────────────────── */

.dac-hub-editor-topbar {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 28px;
	border-bottom: 1px solid var(--hub-border);
	background: var(--hub-surface);
	flex-shrink: 0;
}

.dac-hub-back-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 16px;
	border: 1px solid var(--hub-border);
	border-radius: var(--hub-radius-sm);
	background: var(--hub-surface-2);
	color: var(--hub-text);
	font-size: 0.855rem;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
	flex-shrink: 0;
	white-space: nowrap;
}

.dac-hub-back-btn:hover {
	background: var(--hub-accent-light);
	color: var(--hub-accent);
	border-color: var(--hub-border-h);
}

.dac-hub-back-btn:focus-visible {
	outline: 2px solid var(--hub-accent);
	outline-offset: 2px;
}

.dac-hub-editor-title {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--hub-navy);
	letter-spacing: -0.01em;
	line-height: 1.3;
	flex: 1;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ── Editor body: fields left + preview right ───────────────────────────── */

.dac-hub-editor-body {
	flex: 1;
	display: flex;
	min-height: 0;
	overflow: hidden;
}

.dac-hub-editor-left {
	width: var(--hub-editor-left);
	flex-shrink: 0;
	border-right: 1px solid #e2e8f0;
	padding: 28px 24px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	background: #ffffff;
	scrollbar-width: thin;
	scrollbar-color: #cbd5e1 transparent;
}

.dac-hub-editor-left::-webkit-scrollbar { width: 5px; }
.dac-hub-editor-left::-webkit-scrollbar-track { background: transparent; }
.dac-hub-editor-left::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }

.dac-hub-editor-right {
	flex: 1;
	min-width: 0;
	padding: 28px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #f1f5f9;
}

/* ── Section label ──────────────────────────────────────────────────────── */

.dac-hub-fields-label {
	font-size: 0.72rem;
	font-weight: 700;
	color: #475569;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	margin: 0 0 16px;
	padding-bottom: 10px;
	border-bottom: 1px solid #e2e8f0;
}

/* ── Fields ─────────────────────────────────────────────────────────────── */

.dac-hub-editor-fields { display: flex; flex-direction: column; }

.dac-field-group { margin-bottom: 14px; }

.dac-field-group label {
	display: block;
	font-size: 0.78rem;
	font-weight: 600;
	color: #374151;
	margin-bottom: 5px;
	letter-spacing: 0.01em;
}

.dac-field-group input[type="text"],
.dac-field-group input[type="url"] {
	width: 100%;
	padding: 9px 12px;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	background: #fff;
	color: #0f172a;
	font-size: 0.9rem;
	outline: none;
	transition: border-color 0.2s, box-shadow 0.2s;
	box-sizing: border-box;
}

.dac-field-group input:focus {
	border-color: var(--hub-accent);
	box-shadow: 0 0 0 3px rgba(27,114,192,0.08);
}

.dac-field-group input[readonly] {
	background: #f8fafc;
	opacity: 0.65;
	cursor: not-allowed;
}

.dac-locked-badge {
	font-size: 0.68rem;
	background: #f1f5f9;
	color: #94a3b8;
	border: 1px solid #e2e8f0;
	border-radius: 3px;
	padding: 1px 6px;
	margin-left: 4px;
	vertical-align: middle;
}

.dac-qr-field-group {
	border-top: 1px solid #e2e8f0;
	padding-top: 14px;
	margin-top: 6px;
}

.dac-field-hint {
	font-size: 0.75rem;
	color: #94a3b8;
	margin: 4px 0 0;
}

.dac-qr-testnote {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 10px 0 0;
	padding: 10px 12px;
	background: #FBF3E6;
	border: 1px solid #F0DFC0;
	border-radius: 8px;
	font-size: 0.8rem;
	line-height: 1.5;
	color: #7A4B08;
}
.dac-qr-testnote svg {
	flex: 0 0 auto;
	margin-top: 1px;
	color: #D97706;
}
.dac-qr-testnote b { color: #6A3F05; font-weight: 700; }

/* ── Action buttons ─────────────────────────────────────────────────────── */

.dac-hub-editor-actions {
	display: flex;
	gap: 10px;
	margin-top: 20px;
}

.dac-hub-action-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 11px 20px;
	border-radius: var(--hub-radius-sm);
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
	border: none;
	transition: background 0.18s, transform 0.1s, box-shadow 0.18s;
	flex: 1;
}

.dac-hub-action-btn--primary {
	background: #fff;
	color: var(--hub-accent, #1b72c0);
	border: 1.5px solid #cbd5e1;
	box-shadow: none;
}

.dac-hub-action-btn--primary:hover {
	border-color: var(--hub-accent, #1b72c0);
	background: #f0f5ff;
	box-shadow: none;
}

.dac-hub-action-btn--success {
	background: #27BD68;
	color: #fff;
	flex: 2;
	box-shadow: 0 2px 8px rgba(39,189,104,0.25);
}

.dac-hub-action-btn--success:hover {
	background: #22a85d;
	box-shadow: 0 4px 16px rgba(39,189,104,0.38), 0 1px 4px rgba(39,189,104,0.18);
}

.dac-hub-action-btn:active { transform: scale(0.97); }
.dac-hub-action-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ── Status message ─────────────────────────────────────────────────────── */

.dac-hub-status {
	margin: 10px 0 0;
	font-size: 0.76rem;
	min-height: 16px;
	color: #94a3b8;
	line-height: 1.5;
}

.dac-hub-status--loading { color: #3b82f6; }
.dac-hub-status--error   { color: #ef4444; }
.dac-hub-status--success { color: #059669; }

/* ── Preview pane ───────────────────────────────────────────────────────── */

.dac-hub-preview-container {
	flex: 1;
	background: #e8ecf0;
	border: 1px solid #e2e8f0;
	border-radius: var(--hub-radius-sm);
	box-shadow: 0 1px 4px rgba(0,0,0,0.06);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow-y: auto;
	overflow-x: hidden;
	min-height: 0;
}

.dac-hub-preview-container iframe {
	width: 100%;
	height: 100%;
	min-height: 520px;
	border: none;
	border-radius: var(--hub-radius-sm);
}

.dac-hub-preview-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	color: #94a3b8;
	font-size: 0.88rem;
	text-align: center;
	padding: 48px 40px;
}

.dac-hub-preview-placeholder svg { opacity: 0.25; }

/* ==========================================================================
   [dac_documents] — Document Library List
   ========================================================================== */

.dac-document-library {
	--lib-border:    #e5e7eb;
	--lib-row-bg:    #fff;
	--lib-row-hover: #f8faff;
	--lib-text:      #111827;
	--lib-muted:     #6b7280;
	--lib-blue:      #0048B8;
	--lib-blue-h:    #003FA3;
	--lib-blue-bg:   #eff6ff;
	--lib-radius:    8px;
	--lib-icon-bg:   #dbeafe;
	--lib-icon-fg:   #003FA3;

	width: 100%;
}

.dac-doc-group { margin-bottom: 32px; }
.dac-doc-group:last-child { margin-bottom: 0; }

.dac-doc-group-title {
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--lib-muted);
	margin: 0 0 12px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--lib-border);
}

.dac-doc-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--lib-border);
	border-radius: var(--lib-radius);
	overflow: hidden;
	background: var(--lib-row-bg);
	box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.dac-doc-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 24px;
	border-bottom: 1px solid var(--lib-border);
	background: var(--lib-row-bg);
	transition: background 0.15s;
}

.dac-doc-row:last-child { border-bottom: none; }
.dac-doc-row:hover { background: var(--lib-row-hover); }

.dac-doc-meta {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: 1;
	min-width: 0;
}

.dac-doc-icon {
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	background: var(--lib-icon-bg);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--lib-icon-fg);
	font-size: 20px;
	line-height: 38px;
	text-align: center;
}

.dac-doc-icon.dashicons {
	font-family: dashicons;
	width: 38px;
	height: 38px;
	font-size: 20px;
	line-height: 38px;
	text-align: center;
}

.dac-doc-name {
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--lib-text);
	line-height: 1.4;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dac-doc-btn {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 20px;
	border: 1px solid var(--lib-blue);
	border-radius: 6px;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--lib-blue);
	background: transparent;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.dac-doc-btn:hover {
	background: var(--lib-blue);
	color: #fff;
	text-decoration: none;
	box-shadow: 0 2px 8px rgba(27,114,192,0.25);
}

.dac-doc-btn--hub {
	background: var(--lib-blue-bg);
	border-color: var(--lib-blue);
	color: var(--lib-blue);
}

.dac-doc-btn--hub:hover {
	background: var(--lib-blue);
	color: #fff;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media ( max-width: 1024px ) {
	.dac-doc-hub { --hub-editor-left: 320px; }
}

@media ( max-width: 1100px ) {
	.dac-hub-grid { grid-template-columns: repeat( 3, 1fr ); }
}

@media ( max-width: 768px ) {
	.dac-hub-topnav {
		padding: 12px 16px;
		gap: 8px;
		flex-wrap: wrap;
	}

	/* Groups row: full width, scrolls horizontally */
	/* Right-edge fade signals there are more tabs to scroll through */
	/* .dac-hub-topnav ancestor added so these out-specify the scale overrides */
	.dac-doc-hub .dac-hub-topnav .dac-hub-group-nav {
		order: 1;
		width: 100%;
		flex-wrap: nowrap;   /* mobile keeps the one-row horizontal scroll */
		-webkit-mask-image: linear-gradient(to right, black 70%, transparent 100%);
		mask-image: linear-gradient(to right, black 70%, transparent 100%);
	}

	/* Search row: full width, below the tabs */
	.dac-doc-hub .dac-hub-topnav .dac-hub-search-wrap {
		order: 2;
		width: 100%;
		margin-left: 0;
	}

	.dac-hub-browse { padding: 20px 16px 40px; }

	.dac-hub-grid {
		grid-template-columns: repeat( auto-fill, minmax( 200px, 1fr ) );
		gap: 14px;
	}

	/* ── Editor: preview floated to top 40 %, fields scroll below ──────── */

	.dac-hub-editor-body {
		flex-direction: column;
		overflow: hidden;
	}

	/* Preview pane — pinned to top, 35% of viewport height, scrollable canvas */
	.dac-hub-editor-right {
		order: 1;
		height: 35vh;
		min-height: 180px;
		max-height: 35vh;
		flex-shrink: 0;
		padding: 10px 12px;
		overflow: hidden;
		background: #f1f5f9;
	}

	.dac-hub-preview-container {
		height: 100%;
		overflow-y: auto;
	}

	.dac-hub-preview-container iframe {
		min-height: 0;
		height: 100%;
	}

	/* Fields pane — scrollable below preview */
	.dac-hub-editor-left {
		order: 2;
		width: 100%;
		max-height: none;
		flex: 1;
		min-height: 0;
		border-right: none;
		border-top: 1px solid #e2e8f0;
		padding: 20px 16px 32px;
		overflow-y: auto;
	}

	/* Tighten field group spacing on mobile */
	.dac-field-group { margin-bottom: 12px; }

	/* Action buttons full-width stacked on mobile — Download first */
	.dac-hub-editor-actions {
		flex-direction: column;
		gap: 8px;
	}

	.dac-hub-action-btn--success { order: -1; }

	/* Variant strip: align padding to mobile left column, bigger tap targets */
	.dac-hub-variant-strip {
		padding: 10px 16px;
		margin-bottom: 16px;
	}

	.dac-variant-strip-chip {
		padding: 10px 16px;
		min-height: 44px;
		font-size: 0.85rem;
	}
}

/* Center form content on tablet-sized screens where the left col fills full width */
@media ( min-width: 540px ) and ( max-width: 768px ) {
	.dac-hub-editor-left {
		padding-left: max( 20px, calc( ( 100% - 480px ) / 2 ) );
		padding-right: max( 20px, calc( ( 100% - 480px ) / 2 ) );
	}
}

@media ( max-width: 480px ) {

	.dac-hub-grid {
		grid-template-columns: 1fr 1fr;
		gap: 12px;
	}

	.dac-hub-editor-topbar { padding: 10px 14px; }
	.dac-hub-editor-title { font-size: 0.88rem; }

	/* Slightly smaller preview on very small screens */
	.dac-hub-editor-right {
		height: 35vh;
		max-height: 35vh;
		min-height: 180px;
		padding: 10px 12px;
	}

	/* Compact field labels and inputs */
	.dac-field-group label { font-size: 0.8rem; }

	.dac-field-group input[type="text"],
	.dac-field-group input[type="url"] {
		padding: 8px 10px;
		font-size: 0.875rem;
	}

	.dac-hub-editor-left { padding: 16px 12px 28px; }

	.dac-doc-row {
		padding: 14px 16px;
		flex-wrap: wrap;
	}

	.dac-doc-meta { width: 100%; }

	.dac-doc-btn {
		width: 100%;
		justify-content: center;
		padding: 10px;
	}

	/* Card grid: single column on very narrow screens */
	.dac-hub-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Variant picker
   ========================================================================== */

.dac-hub-variant-picker {
	padding: 24px 32px;
	background: #fff;
	border-bottom: 1px solid var(--hub-border);
}

.dac-hub-variant-picker[hidden] { display: none !important; }

.dac-hub-variant-picker-label {
	font-size: 0.95rem;
	font-weight: 600;
	color: #0b1b35;
	margin: 0 0 16px;
}

.dac-hub-variant-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.dac-variant-thumb-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 200px;
	background: #f8fafc;
	border: 1.5px solid var(--hub-border);
	border-radius: 10px;
	overflow: hidden;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.dac-variant-thumb-card:hover {
	border-color: #0048B8;
	box-shadow: 0 4px 16px rgba(27,114,192,0.12);
}

.dac-variant-thumb-preview {
	position: relative;
	width: 100%;
	height: 180px;
	overflow: hidden;
	background: #e2e8f0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.dac-variant-thumb-preview img,
.dac-variant-thumb-preview canvas {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	display: block;
}

.dac-variant-fullscreen-btn {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 28px;
	height: 28px;
	border: none;
	border-radius: 6px;
	background: rgba(0,0,0,0.45);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.15s;
}

.dac-variant-thumb-card:hover .dac-variant-fullscreen-btn { opacity: 1; }

.dac-variant-thumb-label {
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--hub-navy);
	text-align: center;
	padding: 8px 12px 4px;
	margin: 0;
}

.dac-variant-select-btn {
	margin: 4px 12px 12px;
	width: calc(100% - 24px);
	justify-content: center;
	font-size: 0.8rem;
	padding: 7px 10px;
}

/* Selected variant label in editor left panel */
.dac-hub-variant-selected-label {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--hub-blue);
	background: #eff6ff;
	border: 1px solid #bfdbfe;
	border-radius: 6px;
	padding: 5px 10px;
	margin-bottom: 12px;
}

/* ==========================================================================
   Inline variant switcher strip (in-editor topbar selector)
   ========================================================================== */

.dac-hub-variant-strip {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px 20px;
	border-bottom: 1px solid #c7d7f5;
	background: #f0f5ff;
	margin-bottom: 20px;
}

.dac-variant-strip-label {
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--hub-blue, #0048B8);
	margin: 0;
}

.dac-variant-strip-chips {
	display: flex;
	gap: 5px;
	align-items: center;
	flex-wrap: wrap;
}

.dac-variant-strip-chip {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 500;
	border: 1.5px solid #cbd5e1;
	background: #fff;
	color: #475569;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s, color 0.15s;
	white-space: nowrap;
	line-height: 1.5;
}

.dac-variant-strip-chip:hover:not(:disabled) {
	border-color: var(--hub-blue, #0048B8);
	color: var(--hub-blue, #0048B8);
	background: #eff6ff;
}

.dac-variant-strip-chip.is-active,
.dac-variant-strip-chip:disabled {
	border-color: var(--hub-blue, #0048B8);
	background: var(--hub-blue, #0048B8);
	color: #fff;
	cursor: default;
	font-weight: 600;
}

/* ==========================================================================
   Variant fullscreen overlay
   ========================================================================== */

.dac-hub-variant-fullscreen {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.75);
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.dac-hub-variant-fullscreen[hidden] { display: none !important; }

.dac-hub-variant-fullscreen-inner {
	position: relative;
	max-width: 90vw;
	max-height: 90vh;
	overflow: auto;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.dac-hub-variant-fullscreen-canvas {
	display: block;
	max-width: 100%;
}

.dac-hub-variant-fullscreen-close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 36px;
	height: 36px;
	border: none;
	border-radius: 8px;
	background: rgba(0,0,0,0.55);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 1;
	transition: background 0.15s;
}

.dac-hub-variant-fullscreen-close:hover { background: rgba(0,0,0,0.8); }

/* ==========================================================================
   Google Slides preview overlay
   ========================================================================== */

.dac-hub-slides-preview {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.75);
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	box-sizing: border-box;
}

.dac-hub-slides-preview[hidden] { display: none !important; }

.dac-hub-slides-preview-inner {
	position: relative;
	width: 100%;
	max-width: 1100px;
	background: #fff;
	border-radius: var(--hub-radius, 10px);
	box-shadow: 0 20px 60px rgba(0,0,0,0.5);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.dac-hub-slides-preview-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 16px;
	background: #0b1b35;
	flex-shrink: 0;
}

.dac-hub-slides-preview-title {
	color: #fff;
	font-size: 0.9rem;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dac-hub-slides-preview-close {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border: none;
	border-radius: 8px;
	background: rgba(255,255,255,0.12);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.15s;
}

.dac-hub-slides-preview-close:hover { background: rgba(255,255,255,0.22); }

.dac-hub-slides-preview-frame {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	max-height: calc(90vh - 56px);
	border: none;
}

@media (max-width: 768px) {
	.dac-hub-slides-preview { padding: 0; }
	.dac-hub-slides-preview-inner { max-width: 100%; height: 100%; border-radius: 0; }
	.dac-hub-slides-preview-frame { aspect-ratio: auto; flex: 1; max-height: none; }
	.dac-hub-slides-preview-inner { display: flex; flex-direction: column; }
}

/* ── Logo Variant Clicker overlay (in-gallery image variants) ────────────── */
.dac-hub-lv-overlay {
	position: fixed;
	inset: 0;
	background: rgba(10, 8, 59, 0.55);
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	box-sizing: border-box;
}
.dac-hub-lv-overlay[hidden] { display: none !important; }

.dac-hub-lv-inner {
	position: relative;
	width: 100%;
	max-width: 500px;
	display: flex;
	justify-content: center;
}

.dac-hub-lv-close {
	position: absolute;
	top: -14px;
	right: -14px;
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 0;
	background: #fff;
	color: #1E2A3A;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(10,8,59,0.30);
	z-index: 2;
	transition: transform .12s ease, background .16s ease;
}
.dac-hub-lv-close:hover { background: #f2f4f9; transform: scale(1.06); }
.dac-hub-lv-close:active { transform: scale(0.96); }

.dac-hub-lv-mount { width: 100%; display: flex; justify-content: center; }
/* The clicker card carries its own max-width; let it fill the modal on mobile. */
.dac-hub-lv-mount .dac-lv { width: 100%; max-width: 460px; }

@media (max-width: 480px) {
	.dac-hub-lv-overlay { padding: 16px; }
	.dac-hub-lv-close { top: -10px; right: -6px; width: 44px; height: 44px; }
}

/* ══ Social Gallery layout ([dac_document_hub layout="gallery"]) ═══════════ */
.dac-hub-grid.dac-hub-grid--gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 16px;
}
@media (max-width: 600px) {
	.dac-hub-grid.dac-hub-grid--gallery { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* Tile resets the standard card chrome down to a bare square image button.
   Square via height:0 + padding-bottom, not aspect-ratio — Firefox ignores
   aspect-ratio on <button> (same trap as .dac-hub-pg-tile below). */
.dac-hub-tile {
	position: relative;
	display: block;
	width: 100%;
	height: 0;
	padding: 0 0 100%;
	margin: 0;
	border: 1px solid var(--hub-border, #E2E7F0);
	border-radius: var(--hub-radius, 14px);
	overflow: hidden;
	cursor: pointer;
	background: var(--hub-surface-2, #F5F7FB);
	box-shadow: 0 1px 2px rgba(10,8,59,.05), 0 6px 18px rgba(10,8,59,.06);
	transition: transform .18s cubic-bezier(.16,1,.3,1), box-shadow .18s;
	font: inherit;
}
.dac-hub-tile:hover { transform: translateY(-3px); box-shadow: 0 4px 10px rgba(10,8,59,.10), 0 16px 34px rgba(10,8,59,.14); }
.dac-hub-tile:focus-visible { outline: 3px solid var(--dac-blue-border, #BFDBFE); outline-offset: 2px; }

.dac-hub-tile-img,
.dac-hub-tile-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Title kept in the DOM for search + screen readers, hidden visually. */
.dac-hub-tile-title {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.dac-hub-tile-over {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	padding: 12px;
	background: linear-gradient(to top, rgba(10,8,59,.5), rgba(10,8,59,0) 55%);
	opacity: 0;
	transition: opacity .18s;
	pointer-events: none;
}
.dac-hub-tile:hover .dac-hub-tile-over,
.dac-hub-tile:focus-visible .dac-hub-tile-over { opacity: 1; }
.dac-hub-tile-dl {
	width: 38px; height: 38px;
	border-radius: 10px;
	background: rgba(255,255,255,.94);
	color: var(--dac-blue, #0048B8);
	display: grid; place-items: center;
	box-shadow: 0 4px 12px rgba(10,8,59,.25);
}

/* ── Gallery lightbox ────────────────────────────────────────────────────── */
.dac-hub-gl-overlay {
	position: fixed; inset: 0;
	background: rgba(10,8,59,.72);
	z-index: 99999;
	display: flex; align-items: center; justify-content: center;
	padding: 24px; box-sizing: border-box;
}
.dac-hub-gl-overlay[hidden] { display: none !important; }

.dac-hub-gl-inner {
	position: relative;
	width: 100%;
	max-width: 880px;
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
@media (max-width: 720px) {
	.dac-hub-gl-inner { grid-template-columns: 1fr; max-width: 440px; }
}

.dac-hub-gl-stage {
	aspect-ratio: 1 / 1;
	background: #F3F4F8;
	display: grid; place-items: center;
}
.dac-hub-gl-img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }

.dac-hub-gl-side { padding: 24px; display: flex; flex-direction: column; gap: 6px; }
.dac-hub-gl-cat { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--dac-blue, #0048B8); }
.dac-hub-gl-title { font-size: 19px; font-weight: 800; letter-spacing: -.01em; margin: 2px 0; line-height: 1.15; color: #1E2A3A; }
.dac-hub-gl-count { font-size: 13px; color: #64708A; font-variant-numeric: tabular-nums; }

.dac-hub-gl-nav { display: flex; gap: 8px; margin-top: 14px; }
.dac-hub-gl-nav button {
	flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
	background: #F5F7FB; border: 1px solid #E2E7F0; color: #1E2A3A;
	font: inherit; font-size: 13px; font-weight: 600; padding: 10px; border-radius: 9px; cursor: pointer;
	transition: background .16s, border-color .16s;
}
.dac-hub-gl-nav button:hover { background: var(--dac-blue-light, #EEF3FC); border-color: var(--dac-blue-border, #BFDBFE); }

.dac-hub-gl-dl {
	margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
	background: var(--dac-blue, #0048B8); color: #fff; text-decoration: none; font-weight: 700; font-size: 14.5px;
	padding: 13px 18px; border-radius: 11px;
	box-shadow: 0 1px 2px rgba(0,72,184,.28), 0 6px 16px rgba(0,72,184,.24);
	transition: background .18s, transform .1s;
}
.dac-hub-gl-dl:hover { background: var(--dac-blue-hover, #003FA3); color: #fff; }
.dac-hub-gl-dl:active { transform: translateY(1px); }

.dac-hub-gl-close {
	position: absolute; top: 12px; right: 12px; z-index: 2;
	width: 36px; height: 36px; border-radius: 50%; border: 0;
	background: rgba(255,255,255,.92); color: #0A083B;
	display: grid; place-items: center; cursor: pointer;
	box-shadow: 0 4px 12px rgba(0,0,0,.25);
	transition: background .16s, transform .12s;
}
.dac-hub-gl-close:hover { background: #fff; transform: scale(1.06); }

@media (max-width: 480px) {
	.dac-hub-gl-overlay { padding: 14px; }
	.dac-hub-gl-close { width: 44px; height: 44px; }
}

/* ==========================================================================
   Auth gate (logged-out state for [dac_document_hub] / [dac_documents])
   ========================================================================== */

.dac-auth-gate {
	max-width: 460px;
	margin: 0 auto;
	padding: 48px 40px;
	text-align: center;
	background: #FFFFFF;
	border: 1px solid #E6EAF2;
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(10,8,59,0.05), 0 8px 24px rgba(10,8,59,0.06);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.dac-auth-gate__icon {
	width: 60px;
	height: 60px;
	display: grid;
	place-items: center;
	border-radius: 16px;
	background: #EEF3FC;
	color: #0048B8;
	margin-bottom: 8px;
}

.dac-auth-gate__title {
	font-size: 1.2rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: #0A083B;
	margin: 0;
}

.dac-auth-gate__desc {
	font-size: 0.9rem;
	line-height: 1.6;
	color: #64708A;
	margin: 0 0 8px;
	max-width: 42ch;
}

.dac-auth-gate__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	border-radius: 10px;
	background: #27BD68;
	color: #fff;
	font-size: 0.92rem;
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 2px 8px rgba(39,189,104,0.25);
	transition: background 0.16s, transform 0.1s, box-shadow 0.16s;
}

.dac-auth-gate__btn:hover {
	background: #22A85D;
	color: #fff;
	box-shadow: 0 4px 16px rgba(39,189,104,0.38), 0 1px 4px rgba(39,189,104,0.18);
}

.dac-auth-gate__btn:active { transform: translateY(1px); }

.dac-auth-gate__btn:focus-visible {
	outline: 2px solid #0048B8;
	outline-offset: 2px;
}

/* ==========================================================================
   Maintenance mode — broker "coming soon" panel + admin reminder banner
   ========================================================================== */

.dac-mh-soon {
	max-width: 500px;
	margin: 0 auto;
	padding: 52px 44px;
	text-align: center;
	background: #FFFFFF;
	border: 1px solid #E6EAF2;
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(10,8,59,0.05), 0 8px 24px rgba(10,8,59,0.06);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}
.dac-mh-soon__icon {
	width: 64px;
	height: 64px;
	display: grid;
	place-items: center;
	border-radius: 16px;
	background: #EEF3FC;
	color: #0048B8;
	margin-bottom: 10px;
}
.dac-mh-soon__title {
	font-size: 1.32rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: #0A083B;
	margin: 0;
	line-height: 1.25;
	max-width: 20ch;
}
.dac-mh-soon__desc {
	font-size: 0.94rem;
	line-height: 1.65;
	color: #64708A;
	margin: 4px 0 12px;
	max-width: 44ch;
}
.dac-mh-soon__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 26px;
	border-radius: 10px;
	background: #0048B8;
	color: #fff;
	font-size: 0.92rem;
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 2px 8px rgba(0,72,184,0.22);
	transition: background 0.16s, transform 0.1s, box-shadow 0.16s;
}
.dac-mh-soon__btn:hover {
	background: #003a96;
	color: #fff;
	box-shadow: 0 4px 16px rgba(0,72,184,0.32), 0 1px 4px rgba(0,72,184,0.18);
}
.dac-mh-soon__btn:active { transform: translateY(1px); }
.dac-mh-soon__btn:focus-visible { outline: 2px solid #0048B8; outline-offset: 2px; }

.dac-hub-maint-banner {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
	padding: 10px 14px;
	background: #FBF3E6;
	border: 1px solid #F0DFC0;
	border-radius: 10px;
	font-size: 0.86rem;
	line-height: 1.45;
	color: #7A4B08;
}
.dac-hub-maint-banner b { color: #6A3F05; font-weight: 700; }
.dac-hub-maint-dot {
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #D97706;
	box-shadow: 0 0 0 3px rgba(217,119,6,0.18);
}
.dac-hub-maint-banner a {
	margin-left: auto;
	flex: 0 0 auto;
	color: #0048B8;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}
.dac-hub-maint-banner a:hover { text-decoration: underline; }

/* ==========================================================================
   Reduced motion — collapse hover lifts / scale to static
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.dac-doc-hub *,
	.dac-auth-gate * {
		transition-duration: 0.001ms !important;
		animation-duration: 0.001ms !important;
	}
	.dac-hub-card:hover,
	.dac-hub-tile:hover { transform: none; }
	.dac-hub-card:hover .dac-hub-card-preview canvas,
	.dac-hub-card:hover .dac-hub-card-thumb { transform: none; }
}

/* ==========================================================================
   READABLE SCALE OVERRIDES (v1.27.0)
   Accessible without feeling zoomed-in at 100%: comfortable text and 40px+
   targets, but dialed back from the oversized v1.24.0 pass. Scoped under
   .dac-doc-hub so they win over the base component rules. Sizes in px track
   the browser's zoom; the hub's own root is 1rem so browser font settings
   scale it too.
   ========================================================================== */

/* Search */
.dac-doc-hub .dac-hub-topnav       { padding: 13px 18px; gap: 10px 14px; }
.dac-doc-hub .dac-hub-search-wrap  { width: 240px; }
.dac-doc-hub .dac-hub-search-wrap svg { left: 13px; width: 16px; height: 16px; }
.dac-doc-hub .dac-hub-search       { font-size: 13.5px; padding: 9px 13px 9px 36px; border-width: 1px; border-radius: 10px; }

/* Group tabs — bigger, and standing out as clear blue-tint pills (Tyler: make them
   bigger + stand out more). Inactive = light-blue fill + defined blue border + accent
   text; active stays solid blue. :not(.active) so it doesn't clobber the active state. */
.dac-doc-hub .dac-group-nav-btn    { min-height: 40px; padding: 0 17px; font-size: 14px; font-weight: 700; border-width: 1.5px; }
.dac-doc-hub .dac-group-nav-btn:not(.active)        { background: var(--hub-accent-light); color: var(--hub-accent); border-color: #C3D5EF; }
.dac-doc-hub .dac-group-nav-btn:not(.active):hover  { background: #DBE7FA; border-color: var(--hub-accent); color: var(--hub-accent); }
.dac-doc-hub .dac-nav-count        { font-size: 12px; padding: 2px 8px; }
.dac-doc-hub .dac-group-nav-btn:not(.active) .dac-nav-count { background: #fff; color: var(--hub-accent); }

/* Browse header + chips (category tags kept at their comfortable size) */
.dac-doc-hub .dac-hub-browse       { padding: 22px 22px 40px; }
.dac-doc-hub .dac-hub-active-title { font-size: 18px; }
.dac-doc-hub .dac-hub-result-count { font-size: 13px; }
.dac-doc-hub .dac-cat-label        { font-size: 12px; }
.dac-doc-hub .dac-cat-btn          { min-height: 38px; padding: 0 14px; font-size: 13.5px; border-width: 1px; }

/* Grid — fluid 4-across on desktop (was locked to 3), collapses on its own */
.dac-doc-hub .dac-hub-grid         { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }

/* Cards — smaller preview + tighter type so nothing reads oversized at 100% */
.dac-doc-hub .dac-hub-card         { border-width: 1px; }
.dac-doc-hub .dac-hub-card-preview { height: 150px; }
.dac-doc-hub .dac-hub-card-info    { padding: 13px 15px 15px; gap: 7px; }
.dac-doc-hub .dac-hub-card-title   { font-size: 15px; line-height: 1.3; min-height: 0; }
.dac-doc-hub .dac-hub-card-desc    { font-size: 13px; -webkit-line-clamp: 2; min-height: 0; }
.dac-doc-hub .dac-hub-card-cat,
.dac-doc-hub .dac-hub-card-group   { font-size: 11.5px; }
.dac-doc-hub .dac-hub-card-btn     { min-height: 42px; font-size: 13.5px; border-width: 1px; }
/* Pin the action(s) to the bottom of the card so every button in a row lines up,
   regardless of how many description lines sit above it. */
.dac-doc-hub .dac-hub-card-info > .dac-hub-card-btn,
.dac-doc-hub .dac-hub-card-info > .dac-hub-card-btn-row { margin-top: auto; }

/* Buttons — accessible green + blue outline */
.dac-doc-hub .dac-hub-customize-btn        { background: var(--hub-green); border-color: var(--hub-green); color: #fff; }
.dac-doc-hub .dac-hub-customize-btn:hover  { background: var(--hub-green-h); border-color: var(--hub-green-h); color: #fff; box-shadow: 0 4px 14px rgba(11,122,61,0.30); }
.dac-doc-hub .dac-hub-download-only-btn,
.dac-doc-hub .dac-hub-view-variants-btn    { border-color: var(--hub-accent); color: var(--hub-accent); }
/* Keep hover text white — the scoped rule above shares specificity with the global
   :hover (line ~669) and, coming later, would otherwise win and leave blue text on a
   blue hover fill (invisible label). This scoped :hover restores the white label. */
.dac-doc-hub .dac-hub-download-only-btn:hover,
.dac-doc-hub .dac-hub-view-variants-btn:hover { color: #fff; }
.dac-doc-hub .dac-hub-slides-preview-btn   { background: var(--hub-accent); border-color: var(--hub-accent); color: #fff; }

/* Full-page editor */
.dac-doc-hub .dac-hub-editor-title { font-size: 18px; }
.dac-doc-hub .dac-hub-back-btn     { min-height: 40px; font-size: 14px; border-width: 1px; }
.dac-doc-hub .dac-hub-fields-label { font-size: 13px; }
.dac-doc-hub .dac-field-group label { font-size: 14px; font-weight: 700; color: var(--hub-text); }
.dac-doc-hub .dac-field-group input[type="text"],
.dac-doc-hub .dac-field-group input[type="url"] { min-height: 44px; font-size: 14px; border-width: 1px; border-radius: 10px; }
.dac-doc-hub .dac-field-hint       { font-size: 13px; color: var(--hub-muted); }
.dac-doc-hub .dac-hub-action-btn   { min-height: 46px; font-size: 14.5px; }
.dac-doc-hub .dac-hub-action-btn--success       { background: var(--hub-green); color: #fff; }
.dac-doc-hub .dac-hub-action-btn--success:hover { background: var(--hub-green-h); box-shadow: 0 4px 16px rgba(11,122,61,0.34); }

/* Phones: two cards across (Tyler). Tighten gutters + card internals so both fit. */
@media (max-width: 520px) {
	.dac-doc-hub .dac-hub-grid         { grid-template-columns: 1fr 1fr; gap: 12px; }
	.dac-doc-hub .dac-hub-browse       { padding: 18px 12px 36px; }
	.dac-doc-hub .dac-hub-card-preview { height: 116px; }
	.dac-doc-hub .dac-hub-card-info    { padding: 11px 12px 13px; gap: 6px; }
	.dac-doc-hub .dac-hub-card-title   { font-size: 13.5px; }
	.dac-doc-hub .dac-hub-card-desc    { font-size: 12px; }
	.dac-doc-hub .dac-hub-card-cat,
	.dac-doc-hub .dac-hub-card-group   { font-size: 11px; }
	.dac-doc-hub .dac-hub-card-btn     { min-height: 40px; font-size: 12.5px; }
}

/* ==========================================================================
   Admin-only entry point — single "Admin Panel" button at the top of the hub.
   Server-gated (current_user_can edit_posts); brokers never see it. Opens the
   Control Center dashboard where all materials are managed.
   ========================================================================== */
.dac-hub-adminrow {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 14px;
}
.dac-hub-admin-panel-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	font-weight: 700;
	color: var(--hub-accent);
	text-decoration: none;
	padding: 8px 14px;
	border: 1px solid var(--hub-border-h);
	border-radius: var(--hub-radius-sm);
	background: var(--hub-surface);
	box-shadow: var(--hub-shadow);
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.dac-hub-admin-panel-btn:hover {
	background: var(--hub-accent-light);
	border-color: var(--hub-accent);
	color: var(--hub-accent-h);
}
.dac-hub-admin-panel-btn svg { flex: none; }

/* ══ Surface sections (surface="all": Marketing Materials / Resources) ═════ */
.dac-hub-surface-head {
	grid-column: 1 / -1;
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 4px 0 -4px;
}
.dac-hub-surface-head:not(:first-child) {
	margin-top: 22px;
	padding-top: 26px;
	border-top: 1px solid var(--hub-border, #E2E7F0);
}
.dac-hub-surface-head-title {
	margin: 0;
	font-size: 16px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: #1E2A3A;
}
.dac-hub-surface-head-count {
	font-size: 13px;
	font-weight: 600;
	color: #64708A;
	font-variant-numeric: tabular-nums;
}
.dac-hub-surface-head[hidden] { display: none !important; }

/* ══ Photo Gallery: card count pill ════════════════════════════════════════ */
.dac-hub-card-photocount {
	position: absolute;
	right: 12px;
	bottom: 12px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 10px;
	border-radius: 999px;
	background: rgba(255,255,255,0.94);
	color: var(--dac-blue, #0048B8);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.01em;
	box-shadow: 0 2px 8px rgba(10,8,59,0.18);
	pointer-events: none;
}
.dac-hub-tile .dac-hub-card-photocount { right: auto; bottom: auto; top: 10px; left: 10px; }

/* ══ Photo Gallery overlay ═════════════════════════════════════════════════ */
.dac-hub-pg-overlay {
	position: fixed; inset: 0;
	background: rgba(10,8,59,0.72);
	z-index: 99999;
	display: flex; align-items: center; justify-content: center;
	padding: 24px; box-sizing: border-box;
}
.dac-hub-pg-overlay[hidden] { display: none !important; }

.dac-hub-pg-inner {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 1060px;
	height: min(86dvh, 900px);
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}

/* Topbar */
.dac-hub-pg-topbar {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 18px;
	border-bottom: 1px solid var(--hub-border, #E2E7F0);
	flex-shrink: 0;
}
.dac-hub-pg-headings {
	display: flex;
	align-items: baseline;
	gap: 10px;
	min-width: 0;
	margin-right: auto;
}
.dac-hub-pg-title {
	margin: 0;
	font-size: 17px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: #1E2A3A;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.dac-hub-pg-count {
	font-size: 13px;
	color: #64708A;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.dac-hub-pg-gridbtn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 13px;
	border: 1px solid var(--hub-border, #E2E7F0);
	border-radius: 9px;
	background: #F5F7FB;
	color: #1E2A3A;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	flex-shrink: 0;
	transition: background 0.16s, border-color 0.16s;
}
.dac-hub-pg-gridbtn:hover { background: var(--dac-blue-light, #EEF3FC); border-color: var(--dac-blue-border, #BFDBFE); }
.dac-hub-pg-gridbtn:focus-visible { outline: 3px solid var(--dac-blue-border, #BFDBFE); outline-offset: 2px; }
.dac-hub-pg-gridbtn[hidden] { display: none !important; }
.dac-hub-pg-close {
	width: 36px; height: 36px;
	border-radius: 50%;
	border: 0;
	background: #F5F7FB;
	color: #1E2A3A;
	display: grid; place-items: center;
	cursor: pointer;
	flex-shrink: 0;
	transition: background 0.16s, transform 0.12s;
}
.dac-hub-pg-close:hover { background: #E9EDF5; transform: scale(1.06); }
.dac-hub-pg-close:active { transform: scale(0.96); }
.dac-hub-pg-close:focus-visible { outline: 3px solid var(--dac-blue-border, #BFDBFE); outline-offset: 2px; }

/* Grid view */
.dac-hub-pg-grid {
	flex: 1;
	overflow-y: auto;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 12px;
	padding: 18px;
	align-content: start;
	background: var(--hub-surface-2, #F5F7FB);
}
.dac-hub-pg-grid[hidden] { display: none !important; }
/* Square via height:0 + padding-bottom:100%, NOT aspect-ratio: Firefox's
   special <button> layout ignores aspect-ratio on the button AND refuses to
   grow the button around an aspect-ratio img — either way the tiles collapse
   and the photos pile on top of each other. Percentage padding works
   everywhere. */
.dac-hub-pg-tile {
	position: relative;
	display: block;
	width: 100%;
	height: 0;
	padding: 0 0 100%;
	border: 1px solid var(--hub-border, #E2E7F0);
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(10,8,59,0.05);
	transition: transform 0.18s cubic-bezier(0.16,1,0.3,1), box-shadow 0.18s;
}
.dac-hub-pg-tile img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.dac-hub-pg-tile:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(10,8,59,0.10), 0 12px 26px rgba(10,8,59,0.12); }
.dac-hub-pg-tile:focus-visible { outline: 3px solid var(--dac-blue-border, #BFDBFE); outline-offset: 2px; }

/* Slider view */
.dac-hub-pg-viewer {
	flex: 1;
	min-height: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 18px;
	background: var(--hub-surface-2, #F5F7FB);
}
.dac-hub-pg-viewer[hidden] { display: none !important; }
.dac-hub-pg-stage {
	flex: 1;
	align-self: stretch;
	min-width: 0;
	min-height: 0;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.dac-hub-pg-img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 2px 6px rgba(10,8,59,0.10), 0 16px 34px rgba(10,8,59,0.14);
}
.dac-hub-pg-arrow {
	width: 46px; height: 46px;
	border-radius: 50%;
	border: 1px solid var(--hub-border, #E2E7F0);
	background: #fff;
	color: #1E2A3A;
	display: grid; place-items: center;
	cursor: pointer;
	flex-shrink: 0;
	box-shadow: 0 2px 8px rgba(10,8,59,0.10);
	transition: background 0.16s, border-color 0.16s, transform 0.12s;
}
.dac-hub-pg-arrow:hover { background: var(--dac-blue-light, #EEF3FC); border-color: var(--dac-blue-border, #BFDBFE); }
.dac-hub-pg-arrow:active { transform: scale(0.94); }
.dac-hub-pg-arrow:focus-visible { outline: 3px solid var(--dac-blue-border, #BFDBFE); outline-offset: 2px; }

/* Footer: thumb strip + position + download */
.dac-hub-pg-footer {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 12px 18px;
	border-top: 1px solid var(--hub-border, #E2E7F0);
	flex-shrink: 0;
}
.dac-hub-pg-footer[hidden] { display: none !important; }
.dac-hub-pg-strip {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	flex: 1;
	min-width: 0;
	padding: 2px;
	scrollbar-width: thin;
}
.dac-hub-pg-thumb {
	width: 52px; height: 52px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 8px;
	overflow: hidden;
	background: var(--hub-surface-2, #F5F7FB);
	cursor: pointer;
	flex-shrink: 0;
	opacity: 0.6;
	transition: opacity 0.16s, border-color 0.16s;
}
.dac-hub-pg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dac-hub-pg-thumb:hover { opacity: 1; }
.dac-hub-pg-thumb.is-active { opacity: 1; border-color: var(--dac-blue, #0048B8); }
.dac-hub-pg-thumb:focus-visible { outline: 3px solid var(--dac-blue-border, #BFDBFE); outline-offset: 1px; }
.dac-hub-pg-actions {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-shrink: 0;
}
.dac-hub-pg-pos {
	font-size: 13px;
	color: #64708A;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.dac-hub-pg-dl {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--dac-blue, #0048B8);
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	font-size: 14px;
	padding: 11px 17px;
	border-radius: 11px;
	box-shadow: 0 1px 2px rgba(0,72,184,0.28), 0 6px 16px rgba(0,72,184,0.24);
	transition: background 0.18s, transform 0.1s;
}
.dac-hub-pg-dl:hover { background: var(--dac-blue-hover, #003FA3); color: #fff; }
.dac-hub-pg-dl:active { transform: translateY(1px); }
.dac-hub-pg-dl:focus-visible { outline: 3px solid var(--dac-blue-border, #BFDBFE); outline-offset: 2px; }

/* Mobile */
@media (max-width: 768px) {
	.dac-hub-pg-overlay { padding: 12px; }
	.dac-hub-pg-inner { height: 92dvh; }
	.dac-hub-pg-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 14px; }
	.dac-hub-pg-viewer { padding: 12px; gap: 6px; }
	.dac-hub-pg-arrow { width: 44px; height: 44px; }
}
@media (max-width: 480px) {
	.dac-hub-pg-topbar { padding: 12px 14px; gap: 10px; flex-wrap: wrap; }
	.dac-hub-pg-title { font-size: 15px; }
	.dac-hub-pg-grid { grid-template-columns: repeat(2, 1fr); }
	.dac-hub-pg-close { width: 44px; height: 44px; }
	.dac-hub-pg-footer { flex-direction: column; align-items: stretch; gap: 10px; padding: 10px 14px; }
	.dac-hub-pg-thumb { width: 46px; height: 46px; }
	.dac-hub-pg-actions { justify-content: space-between; }
	.dac-hub-pg-dl { min-height: 44px; flex: 1; margin-left: 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.dac-hub-pg-tile,
	.dac-hub-pg-arrow,
	.dac-hub-pg-thumb,
	.dac-hub-pg-gridbtn,
	.dac-hub-pg-close,
	.dac-hub-pg-dl { transition: none; }
	.dac-hub-pg-tile:hover { transform: none; }
}