/* ================================================================
   URL Page Counter — Frontend CSS  v2.0
   Brand palette: #003366 · #FFFFFF · #F9FAFB
   Light mode · Mobile-first · WCAG 2.1 AA
   ================================================================ */

/* ── Design tokens ───────────────────────────────────────────── */
.upc-tool {
	/* Brand */
	--upc-primary:        #003366;
	--upc-primary-hover:  #004080;
	--upc-primary-light:  #eaf0f9;   /* tint of #003366 for icon bg, accents */
	--upc-primary-rgb:    0, 51, 102;

	/* Surfaces */
	--upc-white:          #ffffff;
	--upc-surface:        #F9FAFB;
	--upc-border:         #E5E7EB;
	--upc-divider:        #F3F4F6;

	/* Typography */
	--upc-text:           #111827;
	--upc-text-muted:     #4B5563;
	--upc-text-faint:     #9CA3AF;

	/* Input */
	--upc-input-bg:       #ffffff;
	--upc-input-border:   #D1D5DB;
	--upc-input-focus:    rgba(0, 51, 102, .18);

	/* Feedback */
	--upc-success:        #047857;
	--upc-success-bg:     #ECFDF5;
	--upc-error:          #DC2626;
	--upc-error-bg:       #FEF2F2;
	--upc-error-border:   #FCA5A5;

	/* Progress */
	--upc-progress-track: #E5E7EB;
	--upc-progress-fill:  linear-gradient(90deg, #003366 0%, #0055a5 100%);

	/* Shadows */
	--upc-shadow-sm:      0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
	--upc-shadow:         0 2px 8px rgba(0,0,0,.06), 0 8px 24px rgba(0,51,102,.07);
	--upc-shadow-lg:      0 4px 16px rgba(0,0,0,.07), 0 16px 40px rgba(0,51,102,.09);

	/* Shape */
	--upc-radius-xs:      4px;
	--upc-radius-sm:      8px;
	--upc-radius:         12px;
	--upc-radius-lg:      16px;

	--upc-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

	/* Layout */
	box-sizing: border-box;
	font-family: var(--upc-font);
	color: var(--upc-text);
	max-width: 860px;
	margin: 0 auto;
	padding: 0;
}

.upc-tool, .upc-tool *, .upc-tool *::before, .upc-tool *::after { box-sizing: inherit; }

/* ================================================================
   HERO
   ================================================================ */
.upc-hero {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	margin-bottom: 1.5rem;
	display: none;
}

.upc-hero__icon {
	flex-shrink: 0;
	width: 52px;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--upc-primary-light);
	color: var(--upc-primary);
	border-radius: var(--upc-radius);
}

.upc-hero__title {
	margin: 0 0 .3rem;
	font-size: clamp(1.2rem, 2.5vw, 1.6rem);
	font-weight: 700;
	line-height: 1.2;
	color: var(--upc-primary);
}

.upc-hero__subtitle {
	margin: 0;
	font-size: .9375rem;
	color: var(--upc-text-muted);
	line-height: 1.6;
}

/* ================================================================
   ERROR ALERT
   ================================================================ */
.upc-alert {
	display: flex;
	align-items: flex-start;
	gap: .625rem;
	margin-bottom: 1rem;
	padding: .875rem 1rem;
	border-radius: var(--upc-radius-sm);
	font-size: .9375rem;
	line-height: 1.5;
	border: 1px solid;
}
.upc-alert::before { content: "⚠"; flex-shrink: 0; }
.upc-alert--error  {
	background: var(--upc-error-bg);
	border-color: var(--upc-error-border);
	color: var(--upc-error);
}

/* ================================================================
   SEARCH CARD
   ================================================================ */
.upc-card {
	background: var(--upc-white);
	border: 1px solid var(--upc-border);
	border-radius: var(--upc-radius-lg);
	box-shadow: var(--upc-shadow-sm);
	padding: 1.75rem;
	margin-bottom: 1.75rem;
}

/* ── Input + button row ──────────────────────────────────────── */
.upc-search-row {
	display: flex;
	gap: .625rem;
	align-items: stretch;
}

.upc-search-input-wrap {
	flex: 1;
	position: relative;
	display: flex;
	align-items: center;
}

.upc-search-prefix {
	position: absolute;
	left: .875rem;
	color: var(--upc-text-faint);
	pointer-events: none;
	display: flex;
	align-items: center;
}

.upc-search-input {
	width: 100%;
	height: 52px;
	padding: 0 1rem 0 2.625rem;
	font-size: 1rem;
	font-family: var(--upc-font);
	color: var(--upc-text);
	background: var(--upc-surface);
	border: 1.5px solid var(--upc-input-border);
	border-radius: var(--upc-radius);
	outline: none;
	transition: border-color .15s, box-shadow .15s, background .15s;
}

.upc-search-input::placeholder { color: var(--upc-text-faint); }

.upc-search-input:hover { border-color: #9CA3AF; }

.upc-search-input:focus {
	background: var(--upc-white);
	border-color: var(--upc-primary);
	box-shadow: 0 0 0 3px var(--upc-input-focus);
}

.upc-search-input[aria-invalid="true"] {
	border-color: var(--upc-error);
	box-shadow: 0 0 0 3px rgba(220,38,38,.18);
}

/* ── Scan button — !important guards against theme overrides ──── */
.upc-tool .upc-search-btn {
	display: inline-flex !important;
	align-items: center;
	gap: .5rem;
	height: 52px;
	padding: 0 1.5rem !important;
	font-size: .9375rem !important;
	font-family: var(--upc-font) !important;
	font-weight: 600 !important;
	color: #ffffff !important;
	background-color: #003366 !important;
	background-image: none !important;
	border: 2px solid #003366 !important;
	border-radius: var(--upc-radius) !important;
	cursor: pointer;
	white-space: nowrap;
	flex-shrink: 0;
	box-shadow: none;
	text-shadow: none !important;
	text-decoration: none !important;
	transition: background-color .15s, border-color .15s, box-shadow .15s, transform .1s;
	letter-spacing: .01em;
	line-height: 1;
}

.upc-tool .upc-search-btn:hover:not(:disabled) {
	background-color: #004080 !important;
	border-color: #004080 !important;
	color: #ffffff !important;
	box-shadow: 0 4px 16px rgba(0,51,102,.35);
}

.upc-tool .upc-search-btn:active:not(:disabled) { transform: translateY(1px); }
.upc-tool .upc-search-btn:focus-visible { outline: 3px solid #003366 !important; outline-offset: 2px; }
.upc-tool .upc-search-btn:disabled { opacity: .5; cursor: not-allowed; }

@media (max-width: 380px) { .upc-tool .upc-search-btn .upc-search-btn__label { display: none; } }

/* ── Meta row ────────────────────────────────────────────────── */
.upc-search-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: .5rem;
	margin-top: .625rem;
}

.upc-hint { font-size: .8125rem; color: var(--upc-text-faint); }

.upc-rate-badge {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: .3rem .75rem;
	background: var(--upc-primary-light);
	color: var(--upc-primary);
	border: 1px solid rgba(0,51,102,.15);
	border-radius: 999px;
	font-size: .8125rem;
	font-weight: 600;
	transition: background .2s, color .2s, border-color .2s;
}

.upc-rate-badge--empty {
	background: var(--upc-error-bg);
	color: var(--upc-error);
	border-color: var(--upc-error-border);
}

.upc-rate-limit-msg {
	margin: .625rem 0 0;
	padding: .625rem .875rem;
	background: var(--upc-error-bg);
	border: 1px solid var(--upc-error-border);
	border-radius: var(--upc-radius-sm);
	color: var(--upc-error);
	font-size: .875rem;
	font-weight: 500;
}

.upc-field-error {
	margin: .5rem 0 0;
	font-size: .875rem;
	color: var(--upc-error);
	font-weight: 500;
}

/* ================================================================
   PROGRESS (inside card)
   ================================================================ */
.upc-progress-section {
	margin-top: 1.375rem;
	padding-top: 1.375rem;
	border-top: 1px solid var(--upc-border);
}

.upc-progress-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: .75rem;
}

.upc-progress-label {
	font-size: .9375rem;
	font-weight: 600;
	color: var(--upc-primary);
}

.upc-tool .upc-btn-cancel {
	display: inline-flex !important;
	align-items: center;
	gap: .25rem;
	padding: .3rem .875rem !important;
	font-size: .8125rem !important;
	font-family: var(--upc-font) !important;
	font-weight: 500 !important;
	color: #4B5563 !important;
	background-color: #F9FAFB !important;
	background-image: none !important;
	border: 1px solid #E5E7EB !important;
	border-radius: var(--upc-radius-sm) !important;
	cursor: pointer;
	transition: color .15s, border-color .15s, background-color .15s;
}
.upc-tool .upc-btn-cancel:hover {
	color: #DC2626 !important;
	border-color: #DC2626 !important;
	background-color: #FEF2F2 !important;
}
.upc-tool .upc-btn-cancel:focus-visible { outline: 2px solid #003366 !important; outline-offset: 2px; }

.upc-progress-track {
	width: 100%;
	height: 8px;
	background: var(--upc-progress-track);
	border-radius: 999px;
	overflow: hidden;
}

.upc-progress-fill {
	height: 100%;
	background: var(--upc-progress-fill);
	border-radius: 999px;
	transition: width .4s ease;
}

/* ── Live stats row (Crawled / Found / Queued) ───────────────── */
.upc-live-stats {
	display: flex;
	margin: 1rem 0 0;
	border: 1px solid var(--upc-border);
	border-radius: var(--upc-radius-sm);
	overflow: hidden;
}

.upc-live-stat {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: .625rem .5rem;
	border-right: 1px solid var(--upc-border);
}
.upc-live-stat:last-child { border-right: none; }

.upc-live-stat--highlight { background: var(--upc-primary-light); }

.upc-live-stat__num {
	font-size: 1.375rem;
	font-weight: 800;
	color: var(--upc-primary);
	line-height: 1;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
}

.upc-live-stat__label {
	margin-top: .2rem;
	font-size: .65rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--upc-text-faint);
}

/* ── Current page ticker ─────────────────────────────────────── */
.upc-current-page {
	margin: .5rem 0 0;
	font-size: .8rem;
	color: var(--upc-text-faint);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
}

/* ================================================================
   RESULTS
   ================================================================ */
.upc-results { display: flex; flex-direction: column; gap: 1.25rem; }

/* ── Stat cards ──────────────────────────────────────────────── */
.upc-stats-row { display: flex; gap: 1rem; flex-wrap: wrap; }

.upc-stat {
	flex: 1;
	min-width: 130px;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 1.375rem 1rem;
	background: var(--upc-white);
	border: 1px solid var(--upc-border);
	border-top: 3px solid var(--upc-primary);
	border-radius: var(--upc-radius);
	box-shadow: var(--upc-shadow-sm);
	text-align: center;
}

.upc-stat__number {
	font-size: 2.5rem;
	font-weight: 800;
	line-height: 1;
	color: var(--upc-primary);
	letter-spacing: -.02em;
}

.upc-stat__number--sm {
	font-size: .9375rem;
	font-weight: 600;
	word-break: break-all;
	line-height: 1.3;
}

.upc-stat__label {
	margin-top: .375rem;
	font-size: .75rem;
	font-weight: 600;
	color: var(--upc-text-muted);
	text-transform: uppercase;
	letter-spacing: .06em;
}

.upc-stat--muted { border-top-color: var(--upc-border); }
.upc-stat--muted .upc-stat__number { color: var(--upc-text-muted); }

/* ── Download buttons ────────────────────────────────────────── */
.upc-download-row { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ── Download buttons — !important guards against theme overrides */
.upc-tool .upc-download-btn {
	display: inline-flex !important;
	align-items: center;
	gap: .5rem;
	padding: .75rem 1.375rem !important;
	font-size: .9375rem !important;
	font-family: var(--upc-font) !important;
	font-weight: 600 !important;
	border-radius: var(--upc-radius) !important;
	border: 2px solid !important;
	cursor: pointer;
	text-decoration: none !important;
	text-shadow: none !important;
	transition: background-color .15s, color .15s, box-shadow .15s, transform .1s;
	letter-spacing: .01em;
	line-height: 1;
}
.upc-tool .upc-download-btn:active { transform: translateY(1px); }
.upc-tool .upc-download-btn:focus-visible { outline: 3px solid #003366 !important; outline-offset: 2px; }

/* XML — filled primary */
.upc-tool .upc-download-btn--xml {
	background-color: #003366 !important;
	background-image: none !important;
	border-color: #003366 !important;
	color: #ffffff !important;
}
.upc-tool .upc-download-btn--xml:hover:not(:disabled) {
	background-color: #004080 !important;
	border-color: #004080 !important;
	color: #ffffff !important;
	box-shadow: 0 4px 16px rgba(0,51,102,.3);
}

/* CSV — outlined */
.upc-tool .upc-download-btn--csv {
	background-color: #ffffff !important;
	background-image: none !important;
	border-color: #003366 !important;
	color: #003366 !important;
}
.upc-tool .upc-download-btn--csv:hover:not(:disabled) {
	background-color: #eaf0f9 !important;
	color: #003366 !important;
	box-shadow: 0 4px 16px rgba(0,51,102,.12);
}

/* ── URL list panel ──────────────────────────────────────────── */
.upc-url-panel {
	background: var(--upc-white);
	border: 1px solid var(--upc-border);
	border-radius: var(--upc-radius);
	box-shadow: var(--upc-shadow-sm);
	overflow: hidden;
}

.upc-url-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: .875rem 1.25rem;
	background: var(--upc-surface);
	border-bottom: 1px solid var(--upc-border);
}

.upc-url-panel__title {
	margin: 0;
	font-size: .9375rem;
	font-weight: 700;
	color: var(--upc-primary);
}

.upc-url-list {
	margin: 0;
	padding: 0;
	list-style: none;
	max-height: 380px;
	overflow-y: auto;
	counter-reset: upc-url-counter;
	scrollbar-width: thin;
	scrollbar-color: var(--upc-border) transparent;
	padding-left: 0 !important;
}
.upc-url-list::-webkit-scrollbar { width: 5px; }
.upc-url-list::-webkit-scrollbar-thumb { background: var(--upc-border); border-radius: 3px; }

.upc-url-list li {
	display: flex;
	align-items: center;
	padding: .625rem 1.25rem;
	font-size: .875rem;
	border-bottom: 1px solid var(--upc-divider);
	word-break: break-all;
	counter-increment: upc-url-counter;
	transition: background .1s;
}
.upc-url-list li:last-child { border-bottom: none; }
.upc-url-list li:hover { background: var(--upc-primary-light); }

.upc-url-list li::before {
	content: counter(upc-url-counter);
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.875rem;
	height: 1.875rem;
	margin-right: .875rem;
	background: var(--upc-primary-light);
	color: var(--upc-primary);
	border-radius: var(--upc-radius-xs);
	font-size: .75rem;
	font-weight: 700;
}

.upc-url-list li:nth-child(even) { background: var(--upc-surface); }
.upc-url-list li:nth-child(even):hover { background: var(--upc-primary-light); }

.upc-url-list a { color: var(--upc-primary); text-decoration: none; }
.upc-url-list a:hover { text-decoration: underline; }
.upc-url-list a:focus-visible { outline: 2px solid var(--upc-primary); outline-offset: 2px; border-radius: 2px; }

/* ── Pagination ──────────────────────────────────────────────── */
.upc-url-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	padding: .75rem 1.25rem;
	background: var(--upc-surface);
	border-top: 1px solid var(--upc-border);
}

.upc-tool .upc-page-btn {
	padding: .375rem 1rem !important;
	font-size: .875rem !important;
	font-family: var(--upc-font) !important;
	font-weight: 600 !important;
	color: #003366 !important;
	background-color: #ffffff !important;
	background-image: none !important;
	border: 1.5px solid #003366 !important;
	border-radius: var(--upc-radius-sm) !important;
	cursor: pointer;
	text-decoration: none !important;
	text-shadow: none !important;
	transition: background-color .15s, color .15s;
}
.upc-tool .upc-page-btn:hover:not(:disabled) {
	background-color: #003366 !important;
	color: #ffffff !important;
}
.upc-tool .upc-page-btn:disabled { opacity: .35; cursor: not-allowed; }
.upc-tool .upc-page-btn:focus-visible { outline: 2px solid #003366 !important; outline-offset: 2px; }

.upc-page-info { font-size: .875rem; color: var(--upc-text-muted); }

/* ================================================================
   ACCESSIBILITY & UTILITY
   ================================================================ */
.screen-reader-text {
	clip: rect(1px,1px,1px,1px);
	clip-path: inset(50%);
	height: 1px; overflow: hidden;
	position: absolute; white-space: nowrap; width: 1px;
}

[hidden] { display: none !important; }

/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.upc-progress-fill,
	.upc-search-btn,
	.upc-search-input,
	.upc-download-btn,
	.upc-url-list li { transition: none; }
}

/* ── High-contrast ───────────────────────────────────────────── */
@media (forced-colors: active) {
	.upc-search-btn,
	.upc-download-btn--xml { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
	.upc-progress-fill { background: Highlight; }
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 600px) {
	.upc-card { padding: 1.25rem; }
	.upc-search-row { flex-direction: column; }
	.upc-search-btn { width: 100%; justify-content: center; height: 48px; }
	.upc-search-input { height: 48px; padding-left: 2.5rem; }
	.upc-stats-row { flex-direction: column; }
	.upc-download-row { flex-direction: column; }
	.upc-download-btn { justify-content: center; }
	.upc-hero { flex-direction: column; gap: .75rem; }
}

@media (min-width: 601px) {
	.upc-stats-row .upc-stat { min-height: 110px; justify-content: center; }
}

/* ================================================================
   URL TEMPLATES
   ================================================================ */

/* ── "View URL Templates" trigger button (inside panel header) ── */
.upc-tool .upc-template-trigger {
	display: inline-flex !important;
	align-items: center;
	gap: .4rem;
	padding: .35rem .875rem !important;
	font-size: .8125rem !important;
	font-family: var(--upc-font) !important;
	font-weight: 600 !important;
	color: #003366 !important;
	background-color: #eaf0f9 !important;
	background-image: none !important;
	border: 1.5px solid rgba(0,51,102,.25) !important;
	border-radius: 999px !important;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color .15s, color .15s, border-color .15s;
	text-decoration: none !important;
	text-shadow: none !important;
}
.upc-tool .upc-template-trigger:hover:not(:disabled) {
	background-color: #003366 !important;
	color: #ffffff !important;
	border-color: #003366 !important;
}
.upc-tool .upc-template-trigger:disabled { opacity: .55; cursor: not-allowed; }
.upc-tool .upc-template-trigger:focus-visible { outline: 2px solid #003366 !important; outline-offset: 2px; }

/* ── Listing: nav row (Back + Download All) ─────────────────── */
.upc-template-listing__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: .75rem;
	margin-bottom: 1.25rem;
}

/* "Download All Template URLs" global button */
.upc-tool .upc-template-dl-all-btn {
	display: inline-flex !important;
	align-items: center;
	gap: .4rem;
	padding: .5rem 1.125rem !important;
	font-size: .875rem !important;
	font-family: var(--upc-font) !important;
	font-weight: 600 !important;
	color: #003366 !important;
	background-color: #ffffff !important;
	background-image: none !important;
	border: 1.5px solid #003366 !important;
	border-radius: var(--upc-radius-sm) !important;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color .15s, color .15s;
	text-decoration: none !important;
	text-shadow: none !important;
}
.upc-tool .upc-template-dl-all-btn:hover {
	background-color: #003366 !important;
	color: #ffffff !important;
}
.upc-tool .upc-template-dl-all-btn:focus-visible { outline: 2px solid #003366 !important; outline-offset: 2px; }

/* ── Back buttons ────────────────────────────────────────────── */
.upc-tool .upc-template-back-btn {
	display: inline-flex !important;
	align-items: center;
	gap: .3rem;
	padding: 0 !important;
	font-size: .9rem !important;
	font-family: var(--upc-font) !important;
	font-weight: 600 !important;
	color: #003366 !important;
	background: none !important;
	background-image: none !important;
	border: none !important;
	cursor: pointer;
	text-decoration: underline !important;
	text-underline-offset: 2px;
	transition: color .15s;
}
.upc-tool .upc-template-back-btn:hover { color: #004080 !important; }
.upc-tool .upc-template-back-btn--light { color: #ffffff !important; }
.upc-tool .upc-template-back-btn--light:hover { color: #e0e8f0 !important; }

/* ── Hero strip (matches blog landing page) ──────────────────── */
.upc-template-hero {
	background: linear-gradient(135deg, #003366 0%, #0055a5 100%);
	background-image: linear-gradient(135deg, #003366 0%, #0055a5 100%);
	color: #ffffff;
	text-align: center;
	padding: 2.5rem 1.5rem;
	border-radius: var(--upc-radius-lg);
	margin-bottom: 1.75rem;
}

.upc-template-hero__title {
	margin: 0 0 .5rem;
	font-size: clamp(1.4rem, 3vw, 2rem);
	font-weight: 700;
	color: #ffffff;
	line-height: 1.2;
}

.upc-template-hero__subtitle {
	margin: 0;
	font-size: .9375rem;
	color: rgba(255,255,255,.8);
}

.upc-template-hero__count {
	display: inline-block;
	margin: 0 0 .75rem;
	padding: .25rem .75rem;
	font-size: .8125rem;
	font-weight: 600;
	color: #ffffff;
	background: rgba(255,255,255,.15);
	border-radius: 999px;
}
.upc-template-hero__count:empty { display: none; }

/* ── Card grid (2 columns, like blog grid) ───────────────────── */
.upc-template-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
	margin-bottom: 1.5rem;
}

@media (min-width: 600px) {
	.upc-template-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Template card (mirrors .blog-card.globalBox) ────────────── */
.upc-template-card {
	background: #ffffff;
	border: 1px solid var(--upc-border);
	border-radius: var(--upc-radius);
	box-shadow: var(--upc-shadow);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding: 1.375rem;
	gap: .75rem;
	transition: box-shadow .2s, transform .15s;
}
.upc-template-card:hover {
	box-shadow: var(--upc-shadow-lg);
	transform: translateY(-2px);
}

/* Category-style badge (like .bg-blue-700 pill) */
.upc-template-badge {
	display: inline-flex;
	align-items: center;
	padding: .25rem .75rem;
	background: #1d4ed8;
	color: #ffffff;
	font-size: .75rem;
	font-weight: 700;
	border-radius: 999px;
	line-height: 1;
	width: fit-content;
}

/* Card heading (like .text-d2iHeader4 .text-darkBlue) */
.upc-template-card__name {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 700;
	color: #090F4E;
	line-height: 1.3;
}

/* Root URL (muted subtitle) */
.upc-template-card__root {
	margin: 0;
	font-size: .8125rem;
	color: var(--upc-text-muted);
	word-break: break-all;
}
.upc-template-card__root a { color: var(--upc-primary); text-decoration: none; }
.upc-template-card__root a:hover { text-decoration: underline; }

/* Pattern label (shown when no real root URL exists, e.g. /tag, /category) */
.upc-template-pattern {
	display: inline-block;
	font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
	font-size: .8rem;
	color: #374151;
	background: #F3F4F6;
	border: 1px solid #E5E7EB;
	border-radius: 4px;
	padding: .15rem .45rem;
	letter-spacing: 0;
}

/* Sample URLs list */
.upc-template-card__samples {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: .25rem;
	padding-left: 0 !important;
}
.upc-template-card__samples li {
	font-size: .8rem;
	color: var(--upc-text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.upc-template-card__samples li::before {
	content: "↳ ";
	color: var(--upc-text-muted);
}
.upc-template-card__samples a {
	color: var(--upc-text-muted);
	text-decoration: none;
}
.upc-template-card__samples a:hover { text-decoration: underline; color: var(--upc-primary); }

/* "View All URLs" button (like "Read More →") */
.upc-tool .upc-template-view-btn {
	display: inline-flex !important;
	align-items: center;
	gap: .3rem;
	padding: 0 !important;
	margin-top: auto;
	font-size: .9375rem !important;
	font-family: var(--upc-font) !important;
	font-weight: 700 !important;
	color: #1d4ed8 !important;
	background: none !important;
	background-image: none !important;
	border: none !important;
	cursor: pointer;
	text-decoration: none !important;
	transition: color .15s;
}
.upc-tool .upc-template-view-btn:hover { color: #003366 !important; }
.upc-tool .upc-template-view-btn:focus-visible { outline: 2px solid #003366 !important; outline-offset: 2px; }

/* ── Empty state ─────────────────────────────────────────────── */
.upc-template-empty {
	text-align: center;
	padding: 2.5rem;
	color: var(--upc-text-muted);
	background: var(--upc-surface);
	border: 1px solid var(--upc-border);
	border-radius: var(--upc-radius);
}

/* ── Detail hero (matches single blog post breadcrumb) ───────── */
.upc-template-detail-hero {
	background: linear-gradient(135deg, #003366 0%, #0055a5 100%);
	color: #ffffff;
	text-align: center;
	padding: 2.5rem 1.5rem 2rem;
	border-radius: var(--upc-radius-lg);
	margin-bottom: 1.75rem;
}

.upc-template-detail-hero__title {
	margin: 0 0 .75rem;
	font-size: clamp(1.4rem, 3vw, 2rem);
	font-weight: 700;
	color: #ffffff;
	line-height: 1.2;
}

.upc-template-detail-hero__meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.25rem;
}

.upc-template-detail-hero__count {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: .3rem .875rem;
	background: rgba(255,255,255,.2);
	color: #ffffff;
	font-size: .875rem;
	font-weight: 600;
	border-radius: 999px;
}

.upc-template-detail-hero__pattern {
	font-size: .875rem;
	color: rgba(255,255,255,.75);
	font-family: monospace;
}

/* ── Listing wrapper ─────────────────────────────────────────── */
.upc-template-listing,
.upc-template-detail {
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.upc-template-card { transition: none; }
}