/*
 * Urdu Biography Pro — main theme stylesheet (RTL-first)
 * No frameworks. CSS custom properties. Mobile-first.
 */

:root {
	--ubp-primary: #0b6b50;
	--ubp-primary-dark: #084a37;
	--ubp-accent: #c8a64b;
	--ubp-accent-dark: #a98839;
	--ubp-ink: #161214;
	--ubp-ink-soft: #3a3438;
	--ubp-paper: #faf6ec;
	--ubp-paper-2: #f3ebd6;
	--ubp-cream: #fdfbf3;
	--ubp-royal: #1b3a8a;
	--ubp-maroon: #7a1f2b;
	--ubp-emerald-soft: #e7f1ec;
	--ubp-gold-soft: #fbf2d8;
	--ubp-gray: #6b6660;
	--ubp-gray-soft: #d9d3c5;
	--ubp-white: #ffffff;

	--ubp-font-ur: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", "Nafees Nastaleeq", serif;
	--ubp-font-ar: "Noto Naskh Arabic", "Noto Sans Arabic", "Segoe UI", system-ui, sans-serif;
	--ubp-font-en: "Inter", "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
	--ubp-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;

	--ubp-radius: 14px;
	--ubp-radius-sm: 10px;
	--ubp-radius-lg: 22px;
	--ubp-shadow-sm: 0 2px 6px rgba(11, 18, 14, .06);
	--ubp-shadow-md: 0 6px 22px rgba(11, 18, 14, .08);
	--ubp-shadow-lg: 0 16px 48px rgba(11, 18, 14, .12);

	--ubp-container: 1240px;
	--ubp-gap: clamp(16px, 2.4vw, 28px);
	--ubp-section-y: clamp(48px, 7vw, 96px);
}

/* ===================== Base ===================== */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* Hidden attribute must always win — used to gate all tool result containers. */
[hidden] { display: none !important; }
body {
	margin: 0;
	font-family: var(--ubp-font-ar);
	color: var(--ubp-ink);
	background:
		radial-gradient(1200px 600px at -10% -10%, var(--ubp-paper-2) 0, transparent 60%),
		radial-gradient(900px 600px at 110% -10%, var(--ubp-gold-soft) 0, transparent 60%),
		var(--ubp-paper);
	direction: rtl;
	line-height: 1.7;
	font-size: 16px;
	overflow-x: hidden;
}
body.ubp-urdu { font-family: var(--ubp-font-ur), var(--ubp-font-ar); line-height: 2; }
body.ubp-urdu input,
body.ubp-urdu select,
body.ubp-urdu textarea,
body.ubp-urdu button { font-family: inherit; }

h1, h2, h3, h4, h5 { color: var(--ubp-ink); margin: 0 0 .6em; line-height: 1.4; }
h1 { font-size: clamp(28px, 4.2vw, 52px); }
h2 { font-size: clamp(24px, 3vw, 36px); }
h3 { font-size: clamp(20px, 2.4vw, 26px); }
h4 { font-size: 18px; }
p  { margin: 0 0 1em; }

a { color: var(--ubp-primary); text-decoration: none; }
a:hover { color: var(--ubp-primary-dark); text-decoration: underline; }

img, svg { max-width: 100%; height: auto; display: block; }

[dir="ltr"], [lang="en"] { font-family: var(--ubp-font-en); }

.screen-reader-text {
	border: 0; clip: rect(1px,1px,1px,1px); -webkit-clip-path: inset(50%); clip-path: inset(50%);
	height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important;
}

.ubp-skip {
	position: absolute; top: -40px; right: 20px; background: var(--ubp-primary); color: #fff;
	padding: 10px 14px; border-radius: 8px; z-index: 1000; transition: top .2s ease;
}
.ubp-skip:focus { top: 8px; }

.ubp-container {
	max-width: var(--ubp-container);
	margin: 0 auto;
	padding: 0 clamp(16px, 3vw, 28px);
}

.ubp-section { padding: var(--ubp-section-y) 0; position: relative; }
.ubp-section + .ubp-section { padding-top: 0; }
.ubp-section__head { text-align: center; max-width: 760px; margin: 0 auto clamp(24px, 4vw, 48px); }
.ubp-section__title { font-weight: 700; }
.ubp-section__sub { color: var(--ubp-ink-soft); font-size: clamp(15px, 1.4vw, 17px); }

/* ===================== Header ===================== */

.ubp-header {
	position: sticky; top: 0; z-index: 60;
	background: rgba(250, 246, 236, .92);
	backdrop-filter: saturate(140%) blur(10px);
	-webkit-backdrop-filter: saturate(140%) blur(10px);
	border-bottom: 1px solid rgba(11,18,14,.08);
}
.ubp-header__inner {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 20px;
	padding: 14px 0;
}
.ubp-brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ubp-ink); }
.ubp-brand:hover { text-decoration: none; }
.ubp-brand__mark {
	display: inline-grid; place-items: center;
	width: 44px; height: 44px; border-radius: 12px;
	background: linear-gradient(135deg, var(--ubp-primary) 0%, var(--ubp-primary-dark) 100%);
	color: #fff; font-weight: 700; font-family: var(--ubp-font-ur); font-size: 22px;
	box-shadow: var(--ubp-shadow-sm);
}
.ubp-brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.ubp-brand__name { font-weight: 700; font-size: 18px; }
.ubp-brand__tagline { font-size: 12px; color: var(--ubp-gray); }
.ubp-header__nav { display: flex; }
.ubp-menu {
	list-style: none; margin: 0; padding: 0;
	display: flex; gap: 18px; align-items: center;
}
.ubp-menu li > a {
	color: var(--ubp-ink); padding: 8px 10px; border-radius: 8px;
	font-weight: 500; font-size: 15px;
}
.ubp-menu li > a:hover { background: var(--ubp-emerald-soft); color: var(--ubp-primary-dark); text-decoration: none; }
.ubp-menu .sub-menu {
	position: absolute; background: #fff; border: 1px solid rgba(0,0,0,.06);
	border-radius: 12px; box-shadow: var(--ubp-shadow-md);
	padding: 8px; margin: 4px 0 0;
	display: none; min-width: 220px; list-style: none;
}
.ubp-menu li:hover > .sub-menu { display: block; }
.ubp-search {
	display: inline-flex; align-items: stretch; gap: 0;
	border: 1px solid var(--ubp-gray-soft); background: #fff;
	border-radius: 999px; overflow: hidden;
}
.ubp-search input {
	border: 0; padding: 8px 14px; min-width: 180px;
	background: transparent; color: var(--ubp-ink); font-size: 14px;
}
.ubp-search input:focus { outline: 0; }
.ubp-search button {
	border: 0; background: var(--ubp-primary); color: #fff; padding: 0 14px; cursor: pointer;
}
.ubp-header__toggle {
	display: none; background: none; border: 0; cursor: pointer;
	width: 44px; height: 44px;
}
.ubp-toggle__bar {
	display: block; width: 22px; height: 2px; background: var(--ubp-ink);
	margin: 4px auto; transition: transform .2s;
}

@media (max-width: 960px) {
	.ubp-header__inner { grid-template-columns: auto 1fr auto; }
	.ubp-header__toggle { display: inline-block; }
	.ubp-header__nav {
		position: fixed; top: 64px; right: 0; left: 0;
		background: var(--ubp-cream);
		border-bottom: 1px solid rgba(0,0,0,.06);
		padding: 16px; transform: translateY(-200%); transition: transform .25s ease;
		flex-direction: column;
	}
	.ubp-header__nav.is-open { transform: translateY(0); }
	.ubp-menu { flex-direction: column; align-items: stretch; width: 100%; gap: 4px; }
	.ubp-menu li > a { display: block; padding: 12px 14px; }
	.ubp-header__actions { display: none; }
}

/* ===================== Hero ===================== */

.ubp-hero { padding-top: clamp(40px, 6vw, 80px); }
.ubp-hero__inner {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: clamp(32px, 5vw, 64px);
	align-items: start;
}
.ubp-hero__eyebrow {
	display: inline-flex; align-items: center; gap: 8px;
	background: var(--ubp-emerald-soft); color: var(--ubp-primary-dark);
	padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600;
	margin-bottom: 18px;
}
.ubp-hero__title { font-weight: 700; letter-spacing: 0; }
.ubp-hero__sub { color: var(--ubp-ink-soft); font-size: clamp(15px, 1.6vw, 19px); max-width: 60ch; }
.ubp-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.ubp-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.ubp-hero__pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

.ubp-chip {
	display: inline-flex; align-items: center; gap: 6px;
	background: #fff; color: var(--ubp-ink-soft);
	border: 1px solid var(--ubp-gray-soft); border-radius: 999px;
	padding: 6px 14px; font-size: 13px; font-weight: 500;
}
.ubp-chip--gold { background: var(--ubp-gold-soft); color: var(--ubp-accent-dark); border-color: var(--ubp-accent); }
.ubp-chip--verified { background: var(--ubp-emerald-soft); color: var(--ubp-primary-dark); border-color: var(--ubp-primary); }
.ubp-chip--approximate { background: #fff2dd; color: #8a5a17; border-color: #e9bf78; }
.ubp-chip--disputed { background: #ffe7e7; color: var(--ubp-maroon); border-color: #e7a7a7; }
.ubp-chip--needs-source { background: #fff5e6; color: #845b15; border-color: #d6b07b; }

.ubp-pill {
	display: inline-flex; align-items: center; gap: 6px;
	background: #fff; color: var(--ubp-ink-soft);
	border: 1px solid var(--ubp-gray-soft); border-radius: 8px;
	padding: 6px 10px; font-size: 12.5px;
}
.ubp-pill--gold { background: var(--ubp-gold-soft); color: var(--ubp-accent-dark); border-color: var(--ubp-accent); }
.ubp-pill__icon {
	display: inline-grid; place-items: center;
	width: 18px; height: 18px; border-radius: 999px;
	background: var(--ubp-primary); color: #fff; font-size: 11px; font-weight: 700;
}
.ubp-pill--gold .ubp-pill__icon { background: var(--ubp-accent-dark); }

.ubp-hero__stack { display: grid; gap: 16px; }
.ubp-hero__featured, .ubp-hero__timeline-mini, .ubp-hero__quote, .ubp-hero__book {
	background: #fff; border: 1px solid rgba(0,0,0,.06);
	border-radius: var(--ubp-radius); padding: 18px;
	box-shadow: var(--ubp-shadow-sm);
}
.ubp-hero__featured { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; }
.ubp-hero__featured-portrait {
	width: 80px; height: 80px; border-radius: 16px;
	background: linear-gradient(135deg, var(--ubp-primary), var(--ubp-accent));
	display: grid; place-items: center; color: #fff; font-size: 36px;
}
.ubp-hero__featured-label { font-size: 12px; color: var(--ubp-gray); }
.ubp-hero__featured-name { font-size: 20px; font-weight: 700; }
.ubp-hero__featured-name-en { font-size: 12px; color: var(--ubp-gray); font-family: var(--ubp-font-en); }
.ubp-hero__featured-role { font-size: 14px; color: var(--ubp-ink-soft); margin-bottom: 6px; }

.ubp-hero__timeline-mini .ubp-hero__timeline-label { font-size: 13px; color: var(--ubp-gray); margin-bottom: 8px; }
.ubp-hero__timeline-list { list-style: none; padding: 0; margin: 0; }
.ubp-hero__timeline-list li { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-size: 14px; }
.ubp-hero__t-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--ubp-primary); flex-shrink: 0; }

.ubp-hero__quote blockquote {
	margin: 0; font-family: var(--ubp-font-ur); font-size: 22px; line-height: 1.8; color: var(--ubp-ink);
}
.ubp-hero__quote figcaption { color: var(--ubp-gray); font-size: 13px; margin-top: 6px; }

.ubp-hero__book { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ubp-hero__book-label { font-weight: 600; }

@media (max-width: 880px) {
	.ubp-hero__inner { grid-template-columns: 1fr; }
}

/* ===================== Amazon CTA buttons ===================== */

.ubp-amz {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	border-radius: 12px; font-weight: 600; padding: 10px 18px;
	border: 1px solid transparent; cursor: pointer;
	transition: transform .12s ease, box-shadow .15s ease, background .15s, color .15s;
	font-size: 14px; line-height: 1.2; text-decoration: none;
}
.ubp-amz:hover { text-decoration: none; transform: translateY(-1px); }
.ubp-amz--sm { padding: 7px 12px; font-size: 13px; }
.ubp-amz--lg { padding: 13px 22px; font-size: 15.5px; border-radius: 14px; }
.ubp-amz--primary { background: var(--ubp-primary); color: #fff; box-shadow: 0 4px 14px rgba(11,107,80,.25); }
.ubp-amz--primary:hover { background: var(--ubp-primary-dark); color: #fff; }
.ubp-amz--gold { background: var(--ubp-accent); color: #2a1f00; box-shadow: 0 4px 14px rgba(200,166,75,.28); }
.ubp-amz--gold:hover { background: var(--ubp-accent-dark); color: #2a1f00; }
.ubp-amz--ghost { background: #fff; color: var(--ubp-ink); border-color: var(--ubp-gray-soft); }
.ubp-amz--ghost:hover { background: var(--ubp-cream); }
.ubp-amz__arrow { font-size: 16px; }

/* ===================== Disclosures ===================== */

.ubp-disclosure {
	display: flex; align-items: flex-start; gap: 10px;
	background: var(--ubp-gold-soft); color: var(--ubp-accent-dark);
	border: 1px solid var(--ubp-accent);
	padding: 10px 14px; border-radius: 12px;
	margin: 14px 0; font-size: 13.5px;
}
.ubp-disclosure--editorial { background: var(--ubp-emerald-soft); color: var(--ubp-primary-dark); border-color: var(--ubp-primary); }
.ubp-disclosure--living { background: #ffe7e7; color: var(--ubp-maroon); border-color: #e7a7a7; }
.ubp-disclosure__icon {
	display: inline-grid; place-items: center;
	width: 22px; height: 22px; border-radius: 999px;
	background: rgba(255,255,255,.6); font-weight: 700; flex-shrink: 0;
}

/* ===================== Disclosure strip ===================== */

.ubp-strip { padding: 24px 0 0; }
.ubp-strip__inner {
	display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr);
	background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: var(--ubp-radius);
	padding: 16px 20px; box-shadow: var(--ubp-shadow-sm);
}
.ubp-strip__item { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--ubp-ink-soft); }
.ubp-strip__icon {
	display: inline-grid; place-items: center;
	width: 24px; height: 24px; border-radius: 999px;
	background: var(--ubp-emerald-soft); color: var(--ubp-primary); font-weight: 700; flex-shrink: 0;
}
@media (max-width: 760px) {
	.ubp-strip__inner { grid-template-columns: 1fr; }
}

/* ===================== Quick start ===================== */

.ubp-quick__grid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px;
}
.ubp-quick__card {
	display: flex; align-items: center; gap: 10px;
	background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: var(--ubp-radius);
	padding: 16px; color: var(--ubp-ink); position: relative;
	transition: transform .15s, box-shadow .15s;
}
.ubp-quick__card:hover { transform: translateY(-2px); box-shadow: var(--ubp-shadow-md); text-decoration: none; }
.ubp-quick__icon {
	display: inline-grid; place-items: center;
	width: 38px; height: 38px; border-radius: 12px;
	background: var(--ubp-emerald-soft); color: var(--ubp-primary); font-size: 18px;
}
.ubp-quick__label { font-weight: 600; }
.ubp-quick__arrow { margin-inline-start: auto; color: var(--ubp-gray); }
.ubp-quick__card.is-selected { border-color: var(--ubp-primary); background: var(--ubp-emerald-soft); }

/* ===================== Generic forms / cards / grids ===================== */

.ubp-tool-card {
	background: #fff; border: 1px solid rgba(0,0,0,.06);
	border-radius: var(--ubp-radius-lg);
	padding: clamp(20px, 3vw, 36px);
	box-shadow: var(--ubp-shadow-md);
}
.ubp-form { display: grid; gap: 14px; }
.ubp-grid { display: grid; gap: 14px; }
.ubp-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ubp-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ubp-grid--cards { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.ubp-field { display: flex; flex-direction: column; gap: 6px; }
.ubp-field--inline { flex-direction: row; align-items: center; gap: 10px; }
.ubp-field--full { grid-column: 1 / -1; }
.ubp-field--checkbox { flex-direction: row; align-items: center; gap: 8px; }
.ubp-field__label { font-size: 13.5px; color: var(--ubp-gray); font-weight: 500; }
.ubp-field input[type="text"],
.ubp-field input[type="number"],
.ubp-field input[type="email"],
.ubp-field input[type="date"],
.ubp-field input[type="search"],
.ubp-field select,
.ubp-field textarea {
	width: 100%; padding: 10px 14px; font-size: 15px; color: var(--ubp-ink);
	background: var(--ubp-cream); border: 1px solid var(--ubp-gray-soft); border-radius: 10px;
	font-family: inherit;
}
.ubp-field textarea { resize: vertical; min-height: 80px; }
.ubp-field input:focus, .ubp-field select:focus, .ubp-field textarea:focus {
	outline: 0; border-color: var(--ubp-primary); background: #fff;
	box-shadow: 0 0 0 3px rgba(11,107,80,.15);
}
.ubp-form__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ubp-form__actions--wide { grid-column: 1 / -1; }

@media (max-width: 760px) {
	.ubp-grid--2, .ubp-grid--3 { grid-template-columns: 1fr; }
}

/* ===================== Result panels ===================== */

.ubp-result {
	margin-top: 22px; padding: 20px;
	background: var(--ubp-cream); border: 1px solid var(--ubp-gold-soft);
	border-radius: var(--ubp-radius);
}
.ubp-result__title { margin-top: 0; }
.ubp-result__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.ubp-result__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.ubp-result__note { color: var(--ubp-gray); font-size: 13px; margin: 12px 0 0; }
.ubp-stat {
	background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: 12px;
	padding: 14px; text-align: center;
}
.ubp-stat__num { font-size: 24px; font-weight: 700; color: var(--ubp-primary-dark); font-family: var(--ubp-font-mono); }
.ubp-stat__label { font-size: 13px; color: var(--ubp-gray); margin-top: 4px; }

/* ===================== Personality cards / DB grid ===================== */

.ubp-db__toolbar {
	display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 12px; margin-bottom: 18px;
}
.ubp-db__toolbar--wide {
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.ubp-db__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.ubp-db__empty { text-align: center; padding: 30px; color: var(--ubp-gray); }
.ubp-pcard {
	display: grid; grid-template-columns: 100px 1fr; gap: 14px;
	background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: var(--ubp-radius);
	padding: 14px; box-shadow: var(--ubp-shadow-sm);
}
.ubp-pcard__portrait img,
.ubp-pcard__placeholder {
	width: 100px; height: 130px; border-radius: 12px; overflow: hidden;
}
.ubp-pcard__placeholder {
	display: grid; place-items: center;
	background: linear-gradient(135deg, var(--ubp-primary), var(--ubp-accent));
	color: #fff; font-size: 40px; font-family: var(--ubp-font-ur);
}
.ubp-pcard__name { font-size: 18px; font-weight: 700; line-height: 1.3; }
.ubp-pcard__name-en { font-size: 12px; color: var(--ubp-gray); font-family: var(--ubp-font-en); }
.ubp-pcard__role { color: var(--ubp-ink-soft); margin: 6px 0; font-size: 14px; }
.ubp-pcard__intro { font-size: 13.5px; }
.ubp-pcard__meta { list-style: none; padding: 0; margin: 6px 0 8px; font-size: 13px; color: var(--ubp-ink-soft); }
.ubp-pcard__meta li span { color: var(--ubp-gray); }
.ubp-pcard__foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.ubp-link { color: var(--ubp-primary); font-weight: 500; font-size: 13.5px; cursor: pointer; background: none; border: 0; padding: 0; }
.ubp-link--ghost { color: var(--ubp-gray); }

@media (max-width: 760px) {
	.ubp-db__toolbar { grid-template-columns: 1fr 1fr; }
}

/* ===================== Books / product boxes ===================== */

.ubp-books__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.ubp-product {
	background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: var(--ubp-radius);
	padding: 18px; box-shadow: var(--ubp-shadow-sm);
	display: flex; flex-direction: column; gap: 12px;
}
.ubp-product--hero { padding: 26px; box-shadow: var(--ubp-shadow-md); border-color: var(--ubp-accent); background: linear-gradient(180deg, var(--ubp-gold-soft), #fff 60%); }
.ubp-product--compact { padding: 14px; }
.ubp-product__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ubp-product__name { font-weight: 700; font-size: 17px; }
.ubp-product__meta { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--ubp-ink-soft); }
.ubp-product__meta li span { color: var(--ubp-gray); }
.ubp-product__proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ubp-product__pros, .ubp-product__cons { background: var(--ubp-cream); padding: 10px 12px; border-radius: 10px; }
.ubp-product__pros h4 { color: var(--ubp-primary-dark); margin: 0 0 6px; font-size: 13.5px; }
.ubp-product__cons h4 { color: var(--ubp-maroon); margin: 0 0 6px; font-size: 13.5px; }
.ubp-product__proscons ul { margin: 0; padding-inline-start: 18px; font-size: 13px; }
.ubp-product__cta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ubp-product__disclosure { font-size: 11.5px; color: var(--ubp-gray); border-top: 1px dashed rgba(0,0,0,.08); padding-top: 8px; }

/* ===================== Comparison ===================== */

.ubp-cmp__scroll { overflow-x: auto; }
.ubp-cmp__table {
	width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--ubp-radius); overflow: hidden;
	box-shadow: var(--ubp-shadow-sm); min-width: 720px;
}
.ubp-cmp__table th, .ubp-cmp__table td {
	padding: 12px 14px; text-align: start; border-bottom: 1px solid rgba(0,0,0,.06);
}
.ubp-cmp__table thead th { background: var(--ubp-emerald-soft); color: var(--ubp-primary-dark); font-weight: 600; }
.ubp-cmp__table tbody tr:hover { background: var(--ubp-cream); }

/* ===================== Quiz ===================== */

.ubp-quiz__card { background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: var(--ubp-radius-lg); padding: clamp(20px, 3vw, 36px); box-shadow: var(--ubp-shadow-md); }
.ubp-quiz__progress { height: 8px; background: var(--ubp-gray-soft); border-radius: 999px; overflow: hidden; }
.ubp-quiz__bar { height: 100%; background: linear-gradient(90deg, var(--ubp-primary), var(--ubp-accent)); transition: width .3s ease; }
.ubp-quiz__progress-label { font-family: var(--ubp-font-mono); font-size: 13px; color: var(--ubp-gray); margin: 8px 0 18px; text-align: center; }
.ubp-quiz__q-title { font-size: 22px; font-weight: 600; margin-bottom: 18px; text-align: center; }
.ubp-quiz__options { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.ubp-quiz__option {
	padding: 14px 16px; background: var(--ubp-cream); border: 1px solid var(--ubp-gray-soft); border-radius: 12px;
	font-size: 15px; cursor: pointer; transition: all .15s; font-family: inherit; color: var(--ubp-ink); text-align: start;
}
.ubp-quiz__option:hover { border-color: var(--ubp-primary); background: var(--ubp-emerald-soft); }
.ubp-quiz__option.is-selected { background: var(--ubp-primary); color: #fff; border-color: var(--ubp-primary-dark); }
.ubp-quiz__nav { display: flex; justify-content: space-between; margin-top: 18px; }
.ubp-quiz__result { margin-top: 24px; padding: 22px; background: linear-gradient(180deg, var(--ubp-emerald-soft), #fff); border-radius: var(--ubp-radius); border: 1px solid var(--ubp-primary); }
.ubp-quiz__result-head { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; margin-bottom: 14px; }
.ubp-quiz__result-title { font-size: 22px; margin: 0; }
.ubp-quiz__result-body { display: grid; gap: 12px; }
.ubp-quiz__result-section { background: #fff; padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(0,0,0,.06); }
.ubp-quiz__result-label { font-size: 13px; color: var(--ubp-gray); margin-bottom: 4px; }

/* ===================== Timeline ===================== */

.ubp-tl__filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.ubp-tl__filter { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--ubp-gray-soft); background: #fff; cursor: pointer; font-family: inherit; }
.ubp-tl__filter.is-active { background: var(--ubp-primary); color: #fff; border-color: var(--ubp-primary-dark); }
.ubp-timeline { position: relative; padding-inline-start: 36px; }
.ubp-timeline__rail { position: absolute; top: 8px; bottom: 8px; inset-inline-start: 14px; width: 2px; background: linear-gradient(180deg, var(--ubp-primary), var(--ubp-accent)); }
.ubp-tevent { position: relative; padding: 14px 16px 14px 0; margin-bottom: 14px; background: #fff; border-radius: var(--ubp-radius); border: 1px solid rgba(0,0,0,.06); }
.ubp-tevent__dot { position: absolute; top: 22px; inset-inline-start: -28px; width: 14px; height: 14px; border-radius: 999px; background: var(--ubp-primary); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--ubp-primary); }
.ubp-tevent__date { font-family: var(--ubp-font-mono); color: var(--ubp-gray); font-size: 13px; margin-bottom: 4px; padding-inline-start: 16px; }
.ubp-tevent__body { padding-inline-start: 16px; }
.ubp-tevent__title { font-weight: 600; }
.ubp-tevent__loc { color: var(--ubp-gray); font-size: 13px; }
.ubp-tevent__note { font-size: 14px; color: var(--ubp-ink-soft); margin: 6px 0; }
.ubp-tevent__foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; font-size: 13px; color: var(--ubp-gray); }
.ubp-tevent__src { background: var(--ubp-cream); padding: 2px 8px; border-radius: 8px; }

/* ===================== Quote generator ===================== */

.ubp-qg__wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 880px) { .ubp-qg__wrap { grid-template-columns: 1fr; } }
.ubp-qg__form { align-self: start; }
.ubp-qg__preview {
	position: relative; padding: 28px; min-height: 280px;
	border-radius: var(--ubp-radius); color: #fff; background: var(--ubp-primary);
	display: flex; flex-direction: column; justify-content: space-between;
	box-shadow: var(--ubp-shadow-md);
}
.ubp-qg__preview[data-theme="paper"] { background: linear-gradient(180deg, #fff8e0, #f3e1a8); color: var(--ubp-ink); }
.ubp-qg__preview[data-theme="royal"] { background: linear-gradient(180deg, var(--ubp-royal), #0f2666); color: #fff; }
.ubp-qg__preview[data-theme="maroon"] { background: linear-gradient(180deg, var(--ubp-maroon), #4d121b); color: #fff; }
.ubp-qg__preview[data-theme="ink"] { background: linear-gradient(180deg, var(--ubp-ink), #000); color: #fff; }
.ubp-qg__open { font-family: var(--ubp-font-ur); font-size: 64px; line-height: 1; opacity: .35; }
.ubp-qg__text { font-family: var(--ubp-font-ur); font-size: 24px; line-height: 1.9; min-height: 80px; }
.ubp-qg__preview[data-lang="english"] .ubp-qg__text, .ubp-qg__preview[data-lang="roman"] .ubp-qg__text { font-family: var(--ubp-font-en); }
.ubp-qg__author { font-weight: 600; }
.ubp-qg__source { font-size: 12px; opacity: .8; }
.ubp-qg__brand { font-family: var(--ubp-font-mono); font-size: 11px; opacity: .6; text-align: end; }

/* ===================== Map ===================== */

.ubp-map__wrap { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: stretch; }
@media (max-width: 880px) { .ubp-map__wrap { grid-template-columns: 1fr; } }
.ubp-map__schematic {
	position: relative; min-height: 320px;
	background:
		radial-gradient(circle at 30% 40%, var(--ubp-gold-soft), transparent 40%),
		linear-gradient(135deg, var(--ubp-cream), #fff);
	border: 1px solid rgba(0,0,0,.06); border-radius: var(--ubp-radius);
	display: grid; grid-template-areas:
		"cn cn me me"
		"cn cn me me"
		"pk pk me eu"
		"sa sa eu eu";
	gap: 8px; padding: 14px;
}
.ubp-map__region { background: #fff; border: 1px solid var(--ubp-gray-soft); border-radius: 10px; padding: 10px; font-family: inherit; cursor: pointer; transition: all .15s; }
.ubp-map__region:hover { border-color: var(--ubp-primary); }
.ubp-map__region.is-active { background: var(--ubp-primary); color: #fff; border-color: var(--ubp-primary-dark); }
.ubp-map__region--pk { grid-area: pk; }
.ubp-map__region--sa { grid-area: sa; }
.ubp-map__region--me { grid-area: me; }
.ubp-map__region--cn { grid-area: cn; }
.ubp-map__region--eu { grid-area: eu; }
.ubp-map__panel { background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: var(--ubp-radius); padding: 18px; }

/* ===================== Reading tracker / Research notes ===================== */

.ubp-rtr__list, .ubp-rn__list { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }
.ubp-rtr__list li, .ubp-rn__list li {
	display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center;
	background: var(--ubp-cream); border: 1px solid rgba(0,0,0,.06); padding: 12px 14px; border-radius: 12px;
}
.ubp-rtr__empty, .ubp-rn__empty { text-align: center; color: var(--ubp-gray); padding: 14px; }
.ubp-rn__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }

/* ===================== Featured categories ===================== */

.ubp-fc__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.ubp-fc__tile {
	background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: var(--ubp-radius);
	padding: 18px; box-shadow: var(--ubp-shadow-sm);
	display: flex; flex-direction: column; gap: 10px;
}
.ubp-fc__link { color: var(--ubp-ink); text-decoration: none; }
.ubp-fc__title-ur { font-size: 18px; font-weight: 700; }
.ubp-fc__title-en { font-size: 12px; color: var(--ubp-gray); }
.ubp-fc__foot { margin-top: auto; }

/* ===================== FAQ ===================== */

.ubp-faq__list { display: grid; gap: 10px; }
.ubp-faq__item {
	background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: var(--ubp-radius); padding: 14px 18px;
}
.ubp-faq__q { cursor: pointer; font-weight: 600; font-size: 17px; list-style: none; }
.ubp-faq__q::marker { display: none; }
.ubp-faq__q::before { content: "▾"; display: inline-block; margin-inline-end: 8px; transition: transform .2s; }
.ubp-faq__item[open] .ubp-faq__q::before { transform: rotate(-180deg); }
.ubp-faq__a { padding-top: 8px; color: var(--ubp-ink-soft); }

/* ===================== Newsletter ===================== */

.ubp-newsletter { background: linear-gradient(135deg, var(--ubp-primary), var(--ubp-primary-dark)); color: #fff; border-radius: 0; }
.ubp-newsletter__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; padding: clamp(28px, 4vw, 56px) 0; }
.ubp-newsletter .ubp-section__title, .ubp-newsletter .ubp-section__sub { color: #fff; }
.ubp-newsletter__form { display: grid; gap: 10px; background: rgba(255,255,255,.08); padding: 18px; border-radius: var(--ubp-radius); border: 1px solid rgba(255,255,255,.18); }
.ubp-newsletter__form input { padding: 12px 14px; border-radius: 10px; border: 0; font-family: inherit; }
.ubp-newsletter__consent { font-size: 12px; opacity: .8; }
.ubp-newsletter__success { background: rgba(255,255,255,.95); color: var(--ubp-primary-dark); padding: 10px 12px; border-radius: 10px; font-weight: 600; }
@media (max-width: 760px) { .ubp-newsletter__inner { grid-template-columns: 1fr; } }

/* ===================== Trust ===================== */

.ubp-trust__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.ubp-trust__card { background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: var(--ubp-radius); padding: 18px; }
.ubp-trust__mark { font-size: 20px; color: var(--ubp-accent-dark); }
.ubp-trust__title { font-size: 18px; font-weight: 700; margin: 6px 0 8px; }
.ubp-trust__desc { color: var(--ubp-ink-soft); font-size: 14.5px; margin: 0; }
.ubp-trust__foot { text-align: center; margin-top: 22px; font-size: 13.5px; color: var(--ubp-gray); display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }

/* ===================== Footer ===================== */

.ubp-footer { background: var(--ubp-ink); color: #d9d4cc; padding-top: clamp(40px, 6vw, 72px); margin-top: clamp(40px, 6vw, 72px); }
.ubp-footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; padding-bottom: 28px; }
.ubp-footer__title { color: #fff; }
.ubp-footer__heading { color: #fff; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; }
.ubp-footer__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.ubp-footer__list a { color: #d9d4cc; }
.ubp-footer__list a:hover { color: var(--ubp-accent); text-decoration: none; }
.ubp-footer__about { color: #b8b3a8; font-size: 14px; }
.ubp-footer .ubp-disclosure { background: rgba(255,255,255,.06); color: #f0e9da; border-color: rgba(255,255,255,.18); }
.ubp-footer__bottom { border-top: 1px solid rgba(255,255,255,.08); padding: 18px 0; }
.ubp-footer__copy { color: #b8b3a8; font-size: 13px; text-align: center; }
@media (max-width: 880px) { .ubp-footer__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .ubp-footer__top { grid-template-columns: 1fr; } }

/* ===================== Floating FAB / Compare drawer ===================== */

.ubp-fab {
	position: fixed; inset-inline-end: 18px; bottom: 18px; z-index: 70;
	width: 56px; height: 56px; border-radius: 999px;
	background: var(--ubp-primary); color: #fff; border: 0; cursor: pointer;
	box-shadow: var(--ubp-shadow-lg); font-size: 22px;
}
.ubp-fab:hover { background: var(--ubp-primary-dark); }
.ubp-compare-drawer {
	position: fixed; inset-inline-end: 18px; bottom: 90px; z-index: 70;
	width: min(360px, calc(100vw - 36px));
	background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: var(--ubp-radius); box-shadow: var(--ubp-shadow-lg);
}
.ubp-compare-drawer__head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid rgba(0,0,0,.06); }
.ubp-compare-drawer__head button { background: none; border: 0; font-size: 22px; cursor: pointer; line-height: 1; }
.ubp-compare-drawer__items { padding: 10px 16px; max-height: 240px; overflow: auto; display: grid; gap: 8px; }
.ubp-compare-drawer__foot { padding: 12px 16px; border-top: 1px solid rgba(0,0,0,.06); }

/* ===================== Breadcrumbs ===================== */

.ubp-breadcrumbs { font-size: 13px; color: var(--ubp-gray); padding: 12px 0; }
.ubp-breadcrumbs a { color: var(--ubp-gray); }
.ubp-breadcrumbs__sep { padding: 0 6px; color: var(--ubp-gray-soft); }

/* ===================== Article ===================== */

.ubp-article-wrap { max-width: 1120px; }
.ubp-article__head { text-align: start; max-width: 920px; margin: 12px 0 20px; }
.ubp-article__title { font-weight: 700; }
.ubp-article__meta { display: flex; flex-wrap: wrap; gap: 8px; color: var(--ubp-gray); }
.ubp-meta-chip {
	background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: 999px;
	padding: 4px 12px; font-size: 12.5px;
}
.ubp-meta-chip--cat { background: var(--ubp-emerald-soft); color: var(--ubp-primary-dark); border-color: var(--ubp-primary); }
.ubp-article__hero { margin: 0 0 22px; border-radius: var(--ubp-radius-lg); overflow: hidden; }
.ubp-article__layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; }
.ubp-article__content { background: #fff; padding: 28px; border-radius: var(--ubp-radius); border: 1px solid rgba(0,0,0,.06); font-size: 17px; line-height: 2; }
.ubp-article__content h2, .ubp-article__content h3 { margin-top: 1.6em; }
.ubp-article__content blockquote { border-inline-start: 4px solid var(--ubp-accent); padding: 8px 16px; background: var(--ubp-gold-soft); border-radius: 8px; margin: 1em 0; }
.ubp-article__sidebar { display: flex; flex-direction: column; gap: 16px; }
.ubp-side-card { background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: var(--ubp-radius); padding: 18px; box-shadow: var(--ubp-shadow-sm); }
.ubp-side-card__title { margin: 0 0 10px; font-size: 16px; }
@media (max-width: 960px) { .ubp-article__layout { grid-template-columns: 1fr; } }

.ubp-card-post { background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: var(--ubp-radius); overflow: hidden; box-shadow: var(--ubp-shadow-sm); display: flex; flex-direction: column; }
.ubp-card-post__thumb { display: block; aspect-ratio: 16/10; overflow: hidden; }
.ubp-card-post__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ubp-card-post__body { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.ubp-card-post__title { font-size: 19px; font-weight: 700; margin: 0; }
.ubp-card-post__title a { color: var(--ubp-ink); }
.ubp-card-post__title a:hover { color: var(--ubp-primary); }
.ubp-card-post__meta { display: flex; gap: 6px; flex-wrap: wrap; }
.ubp-card-post__excerpt { color: var(--ubp-ink-soft); font-size: 14.5px; margin: 0; }

.ubp-archive__head { text-align: start; margin: 16px 0 22px; }
.ubp-archive__title { font-weight: 700; }
.ubp-archive__desc { color: var(--ubp-ink-soft); }
.ubp-pagination { margin: 28px 0; display: flex; justify-content: center; }
.ubp-pagination .page-numbers { display: inline-block; padding: 8px 12px; border: 1px solid var(--ubp-gray-soft); margin: 0 4px; border-radius: 8px; }
.ubp-pagination .page-numbers.current { background: var(--ubp-primary); color: #fff; border-color: var(--ubp-primary-dark); }

.ubp-empty { text-align: center; padding: 60px 20px; color: var(--ubp-gray); }
.ubp-latest__empty { background: #fff; border: 1px dashed var(--ubp-gray-soft); border-radius: var(--ubp-radius-lg); padding: 36px 24px; text-align: center; }
.ubp-latest__empty-icon { font-size: 36px; color: var(--ubp-accent-dark); }
.ubp-latest__empty-title { margin: 8px 0 6px; }
.ubp-latest__empty-desc { color: var(--ubp-ink-soft); max-width: 60ch; margin: 0 auto 16px; }
.ubp-latest__empty-cta { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* ===================== Notes / fact boxes ===================== */

.ubp-note { padding: 14px 16px; border-radius: var(--ubp-radius); margin: 14px 0; border-inline-start: 4px solid var(--ubp-primary); background: var(--ubp-emerald-soft); }
.ubp-note--source { border-color: var(--ubp-accent); background: var(--ubp-gold-soft); }
.ubp-note--fact.ubp-note--verified { border-color: var(--ubp-primary); background: var(--ubp-emerald-soft); }
.ubp-note--fact.ubp-note--disputed { border-color: var(--ubp-maroon); background: #ffe7e7; }
.ubp-note--fact.ubp-note--needs-source { border-color: #d6b07b; background: #fff5e6; }
.ubp-note__title { font-weight: 700; margin-bottom: 4px; }

.ubp-quick-answer { background: linear-gradient(180deg, var(--ubp-emerald-soft), #fff); border: 1px solid var(--ubp-primary); border-radius: var(--ubp-radius); padding: 14px 18px; margin: 14px 0; }
.ubp-quick-answer__label { font-size: 12px; font-weight: 700; color: var(--ubp-primary-dark); text-transform: uppercase; letter-spacing: .04em; }

.ubp-related-products { margin: 22px 0; }
.ubp-related-products__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.ubp-related-products__item { background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: 12px; padding: 14px; }
.ubp-related-products__title { font-weight: 600; margin-bottom: 8px; font-size: 14px; }

.ubp-proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0; }
.ubp-proscons__col { padding: 12px 14px; border-radius: 12px; background: var(--ubp-cream); }
.ubp-proscons__col--pros { border-inline-start: 4px solid var(--ubp-primary); }
.ubp-proscons__col--cons { border-inline-start: 4px solid var(--ubp-maroon); }

.ubp-compare { background: #fff; padding: 18px; border-radius: var(--ubp-radius); border: 1px solid rgba(0,0,0,.06); }

/* ===================== 404 ===================== */

.ubp-404 { padding-top: 40px; padding-bottom: 60px; }
.ubp-404__head { text-align: center; margin-bottom: 24px; }
.ubp-404__code { font-family: var(--ubp-font-mono); font-size: 72px; color: var(--ubp-accent-dark); }
.ubp-404__title { font-size: 28px; }
.ubp-404__product { margin: 0 auto; max-width: 720px; }
.ubp-404__tools { margin-top: 28px; }
.ubp-404__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.ubp-404__tile { display: flex; align-items: center; gap: 10px; padding: 14px; background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: var(--ubp-radius); color: var(--ubp-ink); }
.ubp-404__tile:hover { text-decoration: none; box-shadow: var(--ubp-shadow-sm); }
.ubp-404__tile-icon { font-size: 22px; }
.ubp-404__search { margin-top: 20px; max-width: 480px; }

/* ===================== Misc tool helpers ===================== */

.ubp-tool__note { color: var(--ubp-gray); font-size: 13px; margin-top: 12px; }
.ubp-bg__warn { background: var(--ubp-gold-soft); border: 1px solid var(--ubp-accent); padding: 12px 16px; border-radius: 12px; margin-bottom: 14px; font-size: 14px; }
.ubp-bg__warn--red { background: #ffe7e7; border-color: #e7a7a7; color: var(--ubp-maroon); margin-top: 14px; margin-bottom: 0; }
.ubp-bg__output { background: var(--ubp-cream); border: 1px solid var(--ubp-gray-soft); border-radius: 12px; padding: 18px; font-family: var(--ubp-font-ur); line-height: 1.9; }
.ubp-bg__output h3 { margin-top: 18px; }
.ubp-bg__output ul { padding-inline-start: 24px; }
.ubp-bg__banner { background: var(--ubp-gold-soft); border: 1px solid var(--ubp-accent); border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; font-size: 14px; }

/* ===================== Reduced motion ===================== */

@media (prefers-reduced-motion: reduce) {
	* { animation: none !important; transition: none !important; }
}

/* ===================== Print ===================== */

@media print {
	.ubp-header, .ubp-footer, .ubp-fab, .ubp-compare-drawer, .ubp-newsletter, .ubp-amz { display: none !important; }
	body { background: #fff; }
}