/* =========================================================================
   GyanPustak Tools Child v2 — new style layer (restyle.css)
   Loads last. Overrides design tokens and components for a clean,
   professional look: system-font headings (no serif), calm indigo palette,
   consistent radii, soft elevation, and full dark-mode support.
   Remove the 'gyanpustak-restyle' enqueue in inc/enqueue.php to revert.
   ========================================================================= */

/* ---------- 1. Design tokens ---------------------------------------- */
/* Default indigo palette. Only when no site design is chosen, so the
   one-click designs (html[data-gp-design]) can recolour the whole site. */
html:not([data-gp-design]) {
	--gp-primary: #4338ca;
	--gp-secondary: #6366f1;
	--gp-accent: #14b8a6;
}
:root:root {
	--gp-bg: #f5f7fb;
	--gp-card: #ffffff;
	--gp-text: #0f172a;
	--gp-muted: #64748b;
	--gp-border: #e2e8f0;
	--gp-success: #16a34a;
	--gp-warning: #d97706;
	--gp-danger: #dc2626;
	--gp-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--gp-font-heading: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--gp-radius-card: 16px;
	--gp-radius-btn: 10px;
	--gp-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 14px rgba(15, 23, 42, .06);
}

body {
	font-family: var(--gp-font-body);
	color: var(--gp-text);
	background: var(--gp-bg);
	-webkit-font-smoothing: antialiased;
}

/* ---------- 2. Typography: sans-serif headings everywhere ------------ */
.gp-tools-child h1,
.gp-tools-child h2,
.gp-tools-child h3,
.gp-tools-child h4,
.gp-tools-child .gp-tool-card__title,
.gp-tools-child .gp-post-card__title,
.gp-tools-child .gp-page-hero__title,
.gp-tools-child .gp-home-section__title,
.gp-tools-child .gp-directory__title,
.gp-tools-child .gp-content-title,
.gp-tools-child .gp-quicktabs__name {
	font-family: var(--gp-font-heading);
	letter-spacing: -0.015em;
	line-height: 1.25;
	color: var(--gp-text);
}
.gp-tools-child .gp-hero__title,
.gp-tools-child .gp-page-hero__title { font-weight: 800; }
.gp-tools-child .gp-home-section__title { font-size: 1.25rem; font-weight: 700; }

/* ---------- 3. Header ------------------------------------------------ */
.gp-tools-child .gp-header-gradient,
.gp-tools-child .gp-header-twotone {
	background: #ffffff;
	color: var(--gp-text);
	border-bottom: 1px solid var(--gp-border);
	box-shadow: 0 1px 0 rgba(15, 23, 42, .03);
}
.gp-tools-child .gp-header-btn,
.gp-tools-child .gp-header-links__item {
	border-radius: var(--gp-radius-btn);
	color: var(--gp-text);
}
.gp-tools-child .gp-header-btn:hover,
.gp-tools-child .gp-header-links__item:hover {
	background: color-mix(in srgb, var(--gp-primary) 10%, #ffffff);
	color: var(--gp-primary);
}

/* ---------- 4. Announcement bar ------------------------------------- */
.gp-announce {
	background: linear-gradient(90deg, color-mix(in srgb, var(--gp-primary) 75%, #000), var(--gp-primary));
	color: #ffffff;
	font-weight: 600;
	font-size: .9rem;
}

/* ---------- 5. Hero -------------------------------------------------- */
.gp-tools-child .gp-hero {
	background:
		radial-gradient(900px 380px at 85% -20%, color-mix(in srgb, var(--gp-secondary) 16%, transparent), transparent 70%),
		radial-gradient(700px 320px at 0% 0%, rgba(20, 184, 166, .10), transparent 70%),
		#ffffff;
	border-bottom: 1px solid var(--gp-border);
}
.gp-tools-child .gp-hero__search input,
.gp-tools-child .gp-suggest-field input,
.gp-tools-child .gp-hero__search {
	border-radius: 14px;
	border: 1px solid var(--gp-border);
	box-shadow: 0 6px 20px rgba(15, 23, 42, .06);
}
.gp-tools-child .gp-hero__search input:focus,
.gp-tools-child .gp-suggest-field input:focus {
	outline: 3px solid rgba(99, 102, 241, .25);
	outline-offset: 0;
	border-color: var(--gp-secondary);
}

/* ---------- 6. Buttons & chips -------------------------------------- */
.gp-tools-child .gp-btn,
.gp-tools-child .gp-tool-button,
.gp-tools-child .gp-hero__cta {
	border-radius: var(--gp-radius-btn);
	font-weight: 600;
	letter-spacing: .01em;
	background: var(--gp-primary);
	color: #ffffff;
	border: 1px solid transparent;
	box-shadow: 0 1px 2px color-mix(in srgb, var(--gp-primary) 25%, transparent);
	transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.gp-tools-child .gp-btn:hover,
.gp-tools-child .gp-tool-button:hover {
	background: color-mix(in srgb, var(--gp-primary) 85%, #000);
	color: #ffffff;
	transform: translateY(-1px);
	box-shadow: 0 8px 20px color-mix(in srgb, var(--gp-primary) 25%, transparent);
}
.gp-tools-child .gp-btn--ghost,
.gp-tools-child .gp-tool-button--secondary {
	background: #ffffff;
	color: var(--gp-primary);
	border: 1px solid color-mix(in srgb, var(--gp-primary) 30%, #ffffff);
	box-shadow: none;
}
.gp-tools-child .gp-btn--ghost:hover,
.gp-tools-child .gp-tool-button--secondary:hover {
	background: color-mix(in srgb, var(--gp-primary) 10%, #ffffff);
	color: color-mix(in srgb, var(--gp-primary) 85%, #000);
}
.gp-tools-child .gp-chip {
	border-radius: 999px;
	border: 1px solid var(--gp-border);
	background: #ffffff;
	color: var(--gp-text);
	font-weight: 500;
}
.gp-tools-child .gp-chip:hover {
	border-color: color-mix(in srgb, var(--gp-primary) 45%, #ffffff);
	color: var(--gp-primary);
}

/* ---------- 7. Tool cards ------------------------------------------- */
.gp-tools-child .gp-tool-card {
	background: var(--gp-card);
	border: 1px solid var(--gp-border);
	border-radius: var(--gp-radius-card);
	box-shadow: var(--gp-shadow);
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.gp-tools-child .gp-tool-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 34px rgba(15, 23, 42, .10);
	border-color: #c7d2fe;
}
.gp-tools-child .gp-tool-card__title { font-weight: 700; font-size: 1.02rem; }
.gp-tools-child .gp-tool-card__fav { border-radius: 999px; }

/* ---------- 8. Forms & tool UI -------------------------------------- */
.gp-tools-child .gp-tool-input,
.gp-tools-child .gp-tool-field input,
.gp-tools-child .gp-tool-field select {
	border-radius: 10px;
	border: 1px solid var(--gp-border);
	background: #ffffff;
	color: var(--gp-text);
}
.gp-tools-child .gp-tool-input:focus,
.gp-tools-child .gp-tool-field input:focus,
.gp-tools-child .gp-tool-field select:focus {
	outline: 3px solid rgba(99, 102, 241, .25);
	border-color: var(--gp-secondary);
}
.gp-tools-child .gp-tool-result {
	border-radius: var(--gp-radius-card);
	border: 1px solid var(--gp-border);
	background: #ffffff;
}
.gp-tools-child .gp-tool-result--primary {
	background: linear-gradient(135deg, color-mix(in srgb, var(--gp-primary) 10%, #ffffff), color-mix(in srgb, var(--gp-accent) 8%, #ffffff));
	border-color: color-mix(in srgb, var(--gp-primary) 30%, #ffffff);
}

/* ---------- 9. Breadcrumbs, FAQ, drawer, search ---------------------- */
.gp-tools-child .gp-breadcrumbs__link { color: var(--gp-muted); }
.gp-tools-child .gp-breadcrumbs__link:hover { color: var(--gp-primary); }
.gp-tools-child .gp-faq__item,
.gp-tools-child details {
	border: 1px solid var(--gp-border);
	border-radius: 12px;
	background: #ffffff;
}
.gp-tools-child .gp-drawer,
.gp-tools-child .gp-search-modal__panel,
.gp-tools-child .gp-keys-modal {
	border-radius: var(--gp-radius-card);
}

/* ---------- 10. Links ------------------------------------------------ */
.gp-tools-child a { color: var(--gp-primary); }
.gp-tools-child a:hover { color: color-mix(in srgb, var(--gp-primary) 85%, #000); }

/* ---------- 11. Dark mode (keeps contrast) -------------------------- */
html[data-gp-theme="dark"]:root {
	--gp-bg: #0b1020;
	--gp-card: #131a2e;
	--gp-text: #e5e9f4;
	--gp-muted: #98a2b8;
	--gp-border: #263049;
	--gp-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .35);
}
html[data-gp-theme="dark"] .gp-tools-child .gp-header-gradient,
html[data-gp-theme="dark"] .gp-tools-child .gp-header-twotone {
	background: #0f172a;
}

/* ---------- 12. Motion preference & responsive ---------------------- */
@media (prefers-reduced-motion: reduce) {
	.gp-tools-child * { transition: none !important; animation: none !important; }
}
@media (max-width: 640px) {
	.gp-tools-child .gp-tool-card:hover { transform: none; }
	.gp-tools-child .gp-hero__title,
	.gp-tools-child .gp-page-hero__title { font-size: clamp(1.6rem, 7vw, 2.1rem); }
}

/* ---------- 13. Full-width layout ------------------------------------
   Pages use the full browser width. Text blocks keep a readable measure
   (.gp-container--narrow and article paragraphs). Gutters scale with screen. */
:root:root {
	--gp-width-site: 100%;
	--gp-width-tool: 100%;
	--gp-width-dir: 100%;
	--gp-width-content: 1040px;
	--gp-gutter: clamp(16px, 3.2vw, 56px);
}
.gp-tools-child .grid-container,
.gp-tools-child .site-content .grid-container,
.gp-tools-child .gp-breadcrumbs-bar,
.gp-tools-child .gp-container,
.gp-tools-child .gp-site-main,
.gp-tools-child .gp-directory,
.gp-tools-child .gp-hero__inner,
.gp-tools-child .gp-page-hero__inner {
	max-width: none !important;
	width: 100%;
}
.gp-tools-child .gp-container,
.gp-tools-child .gp-breadcrumbs-bar,
.gp-tools-child .gp-tool-hero,
.gp-tools-child .gp-page-hero,
.gp-tools-child .gp-home-section,
.gp-tools-child .gp-tool-shell {
	padding-left: var(--gp-gutter);
	padding-right: var(--gp-gutter);
}
.gp-tools-child .gp-container--narrow {
	max-width: var(--gp-width-content) !important;
}
.gp-tools-child .separate-containers .inside-article,
.gp-tools-child .separate-containers .site-main > .inside-article {
	padding: clamp(20px, 3vw, 40px);
}
.gp-tools-child .site-content,
.gp-tools-child .content-area,
.gp-tools-child .site-main {
	max-width: none;
	width: 100%;
}
.gp-tools-child .entry-content > p,
.gp-tools-child .entry-content > ul,
.gp-tools-child .entry-content > ol {
	max-width: 80ch;
}
.gp-tools-child .entry-content > .wp-block-group,
.gp-tools-child .entry-content > .gp-tool-shell,
.gp-tools-child .entry-content > div[class*="gp-"] {
	max-width: 100%;
}
.gp-tools-child .gp-tool-layout-centered .entry-content,
.gp-tools-child .gp-tool-layout-centered .gp-tool-shell {
	max-width: 100%;
}
@media (min-width: 1700px) {
	:root:root { --gp-gutter: 72px; }
}

/* ---------- 14. Directory pages fill the width ----------------------
   Tool grids stretch to the full row (auto-fit), so 1 or 2 tools never
   leave an empty centred gap. Search/sort bar spans the page. Page
   headings align left to match the full-width grid. */
.gp-tools-child .gp-grid {
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.gp-tools-child .gp-directory__controls {
	width: 100%;
	justify-content: flex-start;
}
.gp-tools-child .gp-directory__controls .gp-searchfield {
	max-width: none;
	flex: 1 1 320px;
}
.gp-tools-child .gp-directory--center .gp-directory__head,
.gp-tools-child .gp-directory--center .gp-directory__desc,
.gp-tools-child .gp-directory--center .gp-cat-hero__inner {
	text-align: left;
	justify-content: flex-start;
	align-items: flex-start;
}
.gp-tools-child .gp-directory--center .gp-directory__desc { margin-left: 0; margin-right: 0; }
.gp-tools-child .gp-chips { justify-content: flex-start; }

/* Directory controls and category heading: full width, left aligned */
.gp-tools-child .gp-directory__controls {
	margin-left: 0 !important;
	margin-right: 0 !important;
	width: 100% !important;
}
.gp-tools-child .gp-cat-hero {
	text-align: left;
	align-items: flex-start;
}
.gp-tools-child .gp-cat-hero > * { margin-left: 0; margin-right: 0; }

/* ---------- 15. Calculator engine (gp_calculator) -------------------- */
.gp-calc { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; margin: 18px 0 8px; }
.gp-calc__form, .gp-calc__result { background: var(--gp-card); border: 1px solid var(--gp-border); border-radius: var(--gp-radius-card); padding: 22px; box-shadow: var(--gp-shadow); }
.gp-calc__form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; align-content: start; }
.gp-calc__field { display: flex; flex-direction: column; gap: 6px; }
.gp-calc__field label { font-size: .88rem; font-weight: 600; color: var(--gp-text); }
.gp-calc__field input, .gp-calc__field select { border: 1px solid var(--gp-border); border-radius: var(--gp-radius-btn); padding: 11px 12px; min-height: 44px; background: var(--gp-card); color: var(--gp-text); font: inherit; width: 100%; box-sizing: border-box; }
.gp-calc__field input:focus, .gp-calc__field select:focus { outline: 3px solid color-mix(in srgb, var(--gp-primary) 25%, transparent); border-color: var(--gp-primary); }
.gp-calc__actions { grid-column: 1 / -1; display: flex; gap: 10px; flex-wrap: wrap; }
.gp-calc__btn { border: 1px solid transparent; border-radius: var(--gp-radius-btn); background: var(--gp-primary); color: #fff; padding: 11px 20px; min-height: 44px; cursor: pointer; font: inherit; font-weight: 600; }
.gp-calc__btn--ghost { background: var(--gp-card); color: var(--gp-primary); border-color: color-mix(in srgb, var(--gp-primary) 35%, var(--gp-card)); }
.gp-calc__result { display: flex; flex-direction: column; gap: 10px; }
.gp-calc__main { background: color-mix(in srgb, var(--gp-primary) 9%, var(--gp-card)); border-radius: var(--gp-radius-btn); padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.gp-calc__main span { color: var(--gp-muted); font-size: .9rem; }
.gp-calc__main strong { font-size: 1.6rem; color: var(--gp-primary); overflow-wrap: anywhere; }
.gp-calc__row { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dashed var(--gp-border); padding: 8px 2px; font-size: .95rem; }
.gp-calc__row span { color: var(--gp-muted); }
.gp-calc__row strong { color: var(--gp-text); text-align: right; }
.gp-calc__note { color: var(--gp-muted); font-size: .85rem; margin: 6px 0 0; }
.gp-calc__error { color: var(--gp-danger); font-weight: 600; margin: 0; }
@media (max-width: 820px) { .gp-calc { grid-template-columns: 1fr; } }

/* ---------- 17. Mobile: scrollable category list ---------------------- */
@media (max-width: 768px) {
	.gp-tools-child .gp-chips,
	.gp-tools-child .gp-directory__controls .gp-chips {
		flex-wrap: nowrap;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 4px;
		margin-left: calc(-1 * var(--gp-gutter, 16px));
		margin-right: calc(-1 * var(--gp-gutter, 16px));
		padding-left: var(--gp-gutter, 16px);
		padding-right: var(--gp-gutter, 16px);
		scroll-padding: 0 var(--gp-gutter, 16px);
	}
	.gp-tools-child .gp-chips::-webkit-scrollbar { display: none; }
	.gp-tools-child .gp-chips > * { flex: 0 0 auto; white-space: nowrap; }
	.gp-tools-child .gp-directory__controls { flex-direction: column; align-items: stretch; }
	.gp-tools-child .gp-directory__controls .gp-searchfield { min-width: 0; }
}

/* ---------- 18. Category hero, charts (home, all tools, categories) --- */
.gp-cat-row {
	display: block;
	gap: 16px; align-items: stretch; margin: 0 0 18px; width: 100%;
}
.gp-cat-row > .gp-cat-hero { margin: 0; height: 100%; box-sizing: border-box; }
.gp-cat-row .gp-cat-hero {
	position: relative; overflow: hidden; padding: clamp(20px, 3vw, 32px);
	border-radius: 22px; align-items: flex-start;
	background:
		radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--gp-cat-accent, var(--gp-primary)) 22%, transparent) 0%, transparent 60%),
		linear-gradient(135deg, color-mix(in srgb, var(--gp-cat-accent, var(--gp-primary)) 10%, var(--gp-card)) 0%, var(--gp-card) 70%);
}
.gp-cat-row .gp-cat-hero::before {
	content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
	background: var(--gp-cat-accent, var(--gp-primary));
}
.gp-cat-row .gp-cat-hero .gp-directory__title {
	font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.12; letter-spacing: -0.02em; font-weight: 800;
}
.gp-cat-row .gp-cat-hero .gp-directory__desc { font-size: 1.02rem; line-height: 1.6; color: var(--gp-muted); max-width: 60ch; }
.gp-cat-row .gp-cat-hero__icon { width: 64px; height: 64px; border-radius: 18px; }
.gp-directory--center .gp-cat-row .gp-cat-hero { flex-direction: row; text-align: left; }
.gp-directory--center .gp-cat-row .gp-cat-hero__text { align-items: flex-start; }

.gp-chart {
	margin: 0; background: var(--gp-card); border: 1px solid var(--gp-border);
	border-radius: 22px; padding: clamp(16px, 2vw, 24px); box-shadow: var(--gp-shadow);
	box-sizing: border-box; color: var(--gp-text); width: 100%;
}
.gp-cat-chart, .gp-all-chart { min-width: 0; display: flex; }
.gp-cat-chart > .gp-chart, .gp-all-chart > .gp-chart { flex: 1 1 auto; }
.gp-chart__cap {
	font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
	color: var(--gp-muted); margin: 0 0 14px;
}
.gp-chart__bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.gp-chart__row { display: grid; grid-template-columns: minmax(96px, 34%) 1fr auto; gap: 10px; align-items: center; font-size: .9rem; }
.gp-chart__name a { color: var(--gp-text); text-decoration: none; font-weight: 600; }
.gp-chart__name a:hover, .gp-chart__name a:focus-visible { color: var(--gp-primary); text-decoration: underline; }
.gp-chart__track { height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--gp-border) 70%, transparent); overflow: hidden; }
.gp-chart__fill { display: block; height: 100%; border-radius: 999px; transition: width .6s ease; }
.gp-chart__num { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 2.5ch; text-align: right; color: var(--gp-text); }

.gp-chart--donut .gp-chart__donut { display: flex; justify-content: center; margin-bottom: 14px; }
.gp-chart--donut svg { width: 180px; height: 180px; max-width: 100%; height: auto; display: block; color: var(--gp-text); }
.gp-chart__legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.gp-chart__legend li { display: flex; align-items: center; gap: 10px; font-size: .9rem; }
.gp-chart__legend a { color: var(--gp-text); text-decoration: none; font-weight: 600; flex: 1 1 auto; }
.gp-chart__legend a:hover { color: var(--gp-primary); text-decoration: underline; }
.gp-chart__sw { width: 12px; height: 12px; border-radius: 4px; flex: 0 0 auto; }
.gp-chart__pct { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--gp-muted); }
.gp-chart--donut:not(:has(.gp-chart__legend)) .gp-chart__legend { display: none; }

/* Home hero chart card */
.gp-hero__chart { margin-top: 22px; }
.gp-hero__chartcard { max-width: 880px; margin: 0 auto; }
.gp-hero__chartcard .gp-chart--donut { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; }
.gp-hero__chartcard .gp-chart__donut { margin: 0; }
.gp-hero__chartcard .gp-chart__cap { display: none; }
.gp-hero__chartintro { font-size: 1.1rem; margin: 0 0 12px; color: var(--gp-text); text-align: left; }

/* Mobile */
@media (max-width: 860px) {
	.gp-cat-row { grid-template-columns: 1fr; }
	.gp-cat-row .gp-cat-hero { border-radius: 18px; }
	.gp-hero__chartcard .gp-chart--donut { grid-template-columns: 1fr; justify-items: center; }
	.gp-hero__chartcard .gp-chart__legend { width: 100%; }
	.gp-hero__chartintro { text-align: center; }
}
@media (max-width: 480px) {
	.gp-chart__row { grid-template-columns: 1fr auto; }
	.gp-chart__track { grid-column: 1 / -1; grid-row: 2; }
	.gp-cat-row .gp-cat-hero { flex-direction: column; }
	.gp-cat-row .gp-cat-hero__icon { width: 52px; height: 52px; }
}

/* ---------- 19. Hub: tools, converters, calculators ------------------- */
.gp-hub { width: 100%; box-sizing: border-box; color: var(--gp-text); }
.gp-hub__top { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.gp-hub__tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.gp-hub__tab {
	display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px;
	border-radius: 999px; border: 1px solid var(--gp-border); background: var(--gp-card); color: var(--gp-text);
	font: inherit; font-weight: 700; cursor: pointer;
}
.gp-hub__tab[aria-selected="true"] { background: var(--gp-primary); border-color: var(--gp-primary); color: #fff; }
.gp-hub__tabcount { font-size: .75rem; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, currentColor 14%, transparent); }
.gp-hub__search { flex: 1 1 280px; max-width: 420px; }
.gp-hub__search input {
	width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px 14px;
	border: 1px solid var(--gp-border); border-radius: 12px; background: var(--gp-card); color: var(--gp-text); font: inherit;
}
.gp-hub__search input:focus { outline: 3px solid color-mix(in srgb, var(--gp-primary) 25%, transparent); border-color: var(--gp-primary); }
.gp-hub__meta { color: var(--gp-muted); margin: 6px 0 14px; font-size: .92rem; }
.gp-hub__jump { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 6px; margin-bottom: 12px; }
.gp-hub__jump::-webkit-scrollbar { display: none; }
.gp-hub__jumplink {
	flex: 0 0 auto; padding: 6px 12px; border-radius: 999px; font-size: .85rem; font-weight: 600;
	background: color-mix(in srgb, var(--gp-primary) 9%, var(--gp-card)); color: var(--gp-primary); text-decoration: none;
	border: 1px solid color-mix(in srgb, var(--gp-primary) 20%, transparent);
}
.gp-hub__group {
	background: var(--gp-card); border: 1px solid var(--gp-border); border-radius: 18px;
	padding: clamp(16px, 2vw, 22px); margin: 0 0 16px; box-shadow: var(--gp-shadow); scroll-margin-top: 90px;
}
.gp-hub__grouphead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.gp-hub__grouphead h2 { font-size: 1.2rem; margin: 0; color: var(--gp-text); }
.gp-hub__count { font-size: .8rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--gp-primary) 12%, transparent); color: var(--gp-primary); }
.gp-hub__child { font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--gp-muted); margin: 14px 0 6px; }
.gp-hub__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 14px; }
.gp-hub__item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px dashed var(--gp-border); min-width: 0; }
.gp-hub__item a, .gp-hub__name { color: var(--gp-text); text-decoration: none; font-weight: 600; font-size: .92rem; overflow-wrap: anywhere; }
.gp-hub__item a:hover, .gp-hub__item a:focus-visible { color: var(--gp-primary); text-decoration: underline; }
.gp-hub__badge { flex: 0 0 auto; font-size: .7rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--gp-muted) 14%, transparent); color: var(--gp-muted); white-space: nowrap; }
.gp-hub__badge--live { background: color-mix(in srgb, #10b981 16%, transparent); color: #047857; }
.gp-hub__name { color: var(--gp-muted); }
.gp-hub__empty { color: var(--gp-muted); padding: 20px 0; text-align: center; }
[data-gp-hub] [hidden] { display: none !important; }
@media (max-width: 600px) {
	.gp-hub__search { max-width: none; flex-basis: 100%; }
	.gp-hub__list { grid-template-columns: 1fr; }
	.gp-hub__tab { flex: 1 1 auto; justify-content: center; }
}

/* ---------- 20. Tool pages (gp_tool): shared layout and tool UI -------- */
.gp-tool-page { width: 100%; box-sizing: border-box; color: var(--gp-text); }
.gp-tool-head .gp-calc__icon span { font-size: 1.3rem; font-weight: 800; }
.gp-tool-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.gp-tool-chip, .gp-tool-status {
	font-size: .75rem; font-weight: 700; padding: 4px 11px; border-radius: 999px;
	background: color-mix(in srgb, var(--gp-primary) 12%, transparent); color: var(--gp-primary);
}
.gp-tool-status--live { background: color-mix(in srgb, #10b981 16%, transparent); color: #047857; }
.gp-tool-status--api { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #b45309; }
.gp-tool-status--soon { background: color-mix(in srgb, var(--gp-muted) 14%, transparent); color: var(--gp-muted); }
.gp-tool {
	margin: 18px 0 8px; background: var(--gp-card); border: 1px solid var(--gp-border);
	border-radius: 22px; padding: clamp(14px, 2vw, 24px); box-shadow: var(--gp-shadow);
}
.gp-tool__grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.gp-tool__io { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.gp-tool__box { display: flex; flex-direction: column; gap: 6px; }
.gp-tool__cap { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--gp-muted); }
.gp-tool__input, .gp-tool__output {
	width: 100%; box-sizing: border-box; min-height: 180px; resize: vertical; padding: 14px;
	border: 1px solid var(--gp-border); border-radius: 14px; background: var(--gp-card); color: var(--gp-text);
	font: 14px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.gp-tool__output { background: color-mix(in srgb, var(--gp-primary) 4%, var(--gp-card)); }
.gp-tool__input:focus, .gp-tool__output:focus, .gp-tool__select:focus, .gp-tool__num:focus {
	outline: 3px solid color-mix(in srgb, var(--gp-primary) 25%, transparent); border-color: var(--gp-primary);
}
.gp-tool__error { margin: 0; color: #b91c1c; font-weight: 600; font-size: .92rem; }
.gp-tool__status { margin: 0; color: var(--gp-muted); font-size: .85rem; min-height: 1.2em; }
.gp-tool__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.gp-tool__btn {
	min-height: 42px; padding: 8px 16px; border-radius: 12px; border: 1px solid var(--gp-border);
	background: var(--gp-card); color: var(--gp-text); font: inherit; font-weight: 600; cursor: pointer;
}
.gp-tool__btn:hover { border-color: var(--gp-primary); color: var(--gp-primary); }
.gp-tool__btn--primary { background: var(--gp-primary); border-color: var(--gp-primary); color: #fff; }
.gp-tool__btn--primary:hover { color: #fff; filter: brightness(1.06); }
.gp-tool__settings {
	background: color-mix(in srgb, var(--gp-primary) 5%, var(--gp-card)); border: 1px solid var(--gp-border);
	border-radius: 16px; padding: 16px;
}
.gp-tool__settings-title { font-size: .95rem; margin: 0 0 12px; color: var(--gp-text); }
.gp-tool__sgrid { display: grid; gap: 12px; }
.gp-tool__field { display: flex; flex-direction: column; gap: 6px; font-size: .9rem; }
.gp-tool__field--check { flex-direction: row; align-items: center; gap: 10px; }
.gp-tool__flabel { font-weight: 600; color: var(--gp-text); }
.gp-tool__select, .gp-tool__num {
	min-height: 42px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--gp-border);
	background: var(--gp-card); color: var(--gp-text); font: inherit; width: 100%; box-sizing: border-box;
}
.gp-tool__field--check input { width: 18px; height: 18px; accent-color: var(--gp-primary); }
.gp-tool-state {
	margin: 18px 0 8px; background: var(--gp-card); border: 1px dashed var(--gp-border); border-radius: 22px;
	padding: clamp(18px, 3vw, 30px); text-align: left;
}
.gp-tool-state h2 { font-size: 1.2rem; margin: 0 0 8px; color: var(--gp-text); }
.gp-tool-state p { color: var(--gp-muted); margin: 0 0 16px; max-width: 70ch; line-height: 1.6; }
.gp-tool-article { margin-top: 18px; }
@media (max-width: 860px) {
	.gp-tool__grid { grid-template-columns: 1fr; }
	.gp-tool__settings { order: -1; }
	.gp-tool__input, .gp-tool__output { min-height: 140px; }
}
@media (max-width: 480px) {
	.gp-tool__btn { flex: 1 1 calc(50% - 8px); }
}
/* Hub status badges (api and soon) */
.gp-hub__badge--api { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #b45309; }
.gp-hub__badge--soon { background: color-mix(in srgb, var(--gp-muted) 14%, transparent); color: var(--gp-muted); }

/* Calculator hint (empty inputs) */
.gp-calc__hint { margin: 0; padding: 14px 16px; border: 1px dashed var(--gp-border); border-radius: 12px; color: var(--gp-muted); }

/* Category hero: full-width banner with unique colour per category and inline search/grid controls */
.gp-cat-row { width: 100%; }
.gp-cat-row .gp-cat-hero--full {
	background: linear-gradient(135deg, var(--gp-cat-accent) 0%, color-mix(in srgb, var(--gp-cat-accent) 55%, #0f172a) 100%);
	color: #fff; border: 0; border-radius: 22px; padding: 36px 40px; flex-direction: column; align-items: stretch;
	box-shadow: 0 18px 40px -20px color-mix(in srgb, var(--gp-cat-accent) 80%, transparent);
}
.gp-cat-row .gp-cat-hero--full::before { display: none; }
.gp-cat-row .gp-cat-hero--full .gp-cat-hero__icon { background: rgba(255,255,255,.18); color: #fff; }
.gp-cat-row .gp-cat-hero--full .gp-directory__title,
.gp-cat-row .gp-cat-hero--full .gp-directory__desc,
.gp-cat-row .gp-cat-hero--full .gp-cat-hero__count { color: #fff; }
.gp-cat-row .gp-cat-hero--full .gp-directory__desc { opacity: .92; max-width: 80ch; }
.gp-cat-row .gp-cat-hero--full .gp-cat-hero__count { background: rgba(255,255,255,.2); }
.gp-cat-row .gp-cat-hero--full .gp-directory__controls {
	background: #fff; color: #0f172a; border-radius: 16px; padding: 10px; margin: 18px 0 0; box-shadow: 0 10px 24px -14px rgba(0,0,0,.35);
}
.gp-cat-row .gp-cat-hero--full .gp-directory__controls .gp-searchfield { flex: 1 1 320px; }
@media (max-width: 720px) {
	.gp-cat-row .gp-cat-hero--full { padding: 24px 20px; border-radius: 16px; }
}
.gp-cat-row .gp-cat-hero--full .gp-directory__controls { width: 100%; box-sizing: border-box; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gp-cat-row .gp-cat-hero--full .gp-searchfield { flex: 1 1 320px; min-width: 0; }
.gp-directory .gp-cat-row .gp-cat-hero.gp-cat-hero--full { flex-direction: column; align-items: stretch; text-align: left; }
.gp-directory .gp-cat-row .gp-cat-hero.gp-cat-hero--full .gp-cat-hero__text { align-items: flex-start; width: 100%; }
.gp-directory .gp-cat-row .gp-cat-hero.gp-cat-hero--full .gp-cat-hero__icon { width: 56px; height: 56px; }
.gp-directory .gp-cat-row .gp-cat-hero.gp-cat-hero--full .gp-directory__controls { max-width: none; width: 100%; }

/* Pro category hero (v3): dark banner, curated accent, glow, stats, large search. */
.gp-directory .gp-cat-row .gp-cat-hero.gp-cat-hero--full {
	position: relative; overflow: hidden; isolation: isolate;
	background:
		radial-gradient(900px 340px at 92% -10%, color-mix(in srgb, var(--gp-cat-accent) 55%, transparent), transparent 70%),
		radial-gradient(600px 260px at -5% 120%, color-mix(in srgb, var(--gp-cat-accent) 35%, transparent), transparent 70%),
		linear-gradient(160deg, #0b1220 0%, #111a2e 100%);
	color: #f8fafc; border: 1px solid rgba(255,255,255,.08); border-radius: 24px;
	padding: 44px 48px 40px; gap: 0;
	box-shadow: 0 30px 60px -36px rgba(2, 6, 23, .7);
}
.gp-directory .gp-cat-row .gp-cat-hero--full::before {
	content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; display: block;
	background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
	background-size: 36px 36px; mask-image: linear-gradient(180deg, #000, transparent 85%);
}
.gp-directory .gp-cat-row .gp-cat-hero--full .gp-cat-hero__icon {
	width: 60px; height: 60px; border-radius: 18px; background: color-mix(in srgb, var(--gp-cat-accent) 70%, #fff 0%); color: #fff;
	box-shadow: 0 12px 28px -10px var(--gp-cat-accent); margin-bottom: 22px;
}
.gp-directory .gp-cat-row .gp-cat-hero--full .gp-cat-hero__text { width: 100%; }
.gp-directory .gp-cat-row .gp-cat-hero--full .gp-cat-hero__eyebrow {
	margin: 0 0 10px; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #94a3b8;
}
.gp-directory .gp-cat-row .gp-cat-hero--full .gp-directory__title {
	font-size: clamp(2rem, 4.2vw, 3.1rem); line-height: 1.08; font-weight: 800; letter-spacing: -.02em; color: #fff; margin: 0;
}
.gp-directory .gp-cat-row .gp-cat-hero--full .gp-cat-hero__count {
	font-size: .9rem; font-weight: 700; vertical-align: middle; padding: 5px 12px; border-radius: 999px;
	background: rgba(255,255,255,.12); color: #e2e8f0; border: 1px solid rgba(255,255,255,.14); margin-left: 6px;
}
.gp-directory .gp-cat-row .gp-cat-hero--full .gp-directory__desc {
	font-size: 1.05rem; line-height: 1.65; color: #cbd5e1; max-width: 70ch; margin: 14px 0 0; opacity: 1;
}
.gp-directory .gp-cat-row .gp-cat-hero--full .gp-cat-hero__stats {
	display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 22px; font-size: .92rem; color: #94a3b8;
}
.gp-directory .gp-cat-row .gp-cat-hero--full .gp-cat-hero__stats b { color: #fff; font-weight: 800; }
.gp-directory .gp-cat-row .gp-cat-hero--full .gp-directory__controls {
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap; width: 100%; max-width: none; box-sizing: border-box;
	margin: 28px 0 0; padding: 10px; border-radius: 18px; background: rgba(255,255,255,.07);
	border: 1px solid rgba(255,255,255,.12); box-shadow: none; backdrop-filter: blur(6px);
}
.gp-directory .gp-cat-row .gp-cat-hero--full .gp-searchfield {
	flex: 1 1 340px; min-width: 0; background: #fff; border-radius: 12px; border: 0; height: 48px;
}
.gp-directory .gp-cat-row .gp-cat-hero--full .gp-searchfield__input { font-size: 1rem; }
.gp-directory .gp-cat-row .gp-cat-hero--full .gp-selectwrap { background: #fff; border-radius: 12px; }
.gp-directory .gp-cat-row .gp-cat-hero--full .gp-selectwrap__select { height: 48px; color: #0f172a; }
.gp-directory .gp-cat-row .gp-cat-hero--full .gp-viewtoggle { background: rgba(255,255,255,.1); border-radius: 12px; }
.gp-directory .gp-cat-row .gp-cat-hero--full .gp-viewtoggle__btn { color: #e2e8f0; }
.gp-directory .gp-cat-row .gp-cat-hero--full .gp-viewtoggle__btn.is-active,
.gp-directory .gp-cat-row .gp-cat-hero--full .gp-viewtoggle__btn[aria-pressed="true"] { background: #fff; color: #0f172a; }
@media (min-width: 1200px) {
	.gp-directory .gp-cat-row .gp-cat-hero--full .gp-directory__controls { flex-wrap: nowrap; }
}
@media (max-width: 720px) {
	.gp-directory .gp-cat-row .gp-cat-hero--full { padding: 28px 22px 26px; border-radius: 18px; }
	.gp-directory .gp-cat-row .gp-cat-hero--full .gp-cat-hero__icon { width: 52px; height: 52px; margin-bottom: 16px; }
	.gp-directory .gp-cat-row .gp-cat-hero--full .gp-directory__controls { padding: 8px; margin-top: 22px; }
	.gp-directory .gp-cat-row .gp-cat-hero--full .gp-searchfield { flex-basis: 100%; }
}
/* Header: third quick link (All Converters). */
.gp-header-links__item--conv { white-space: nowrap; }
.gp-header-links__item--conv { color: #fff; }
.gp-header-links__item--conv svg { color: #fff; stroke: currentColor; }

/* File input for browser image converters (batch 5) */
.gp-tool__file { display: block; width: 100%; padding: 1.25rem; border: 2px dashed var(--gp-border, #cbd5e1); border-radius: 12px; background: transparent; color: inherit; cursor: pointer; font: inherit; }
.gp-tool__file::file-selector-button { margin-right: 1rem; padding: .55rem 1rem; border: 0; border-radius: 8px; background: #0891b2; color: #fff; font-weight: 600; cursor: pointer; }
.gp-tool__file:focus-visible { outline: 3px solid #22d3ee; outline-offset: 2px; }

/* Live step-by-step solution panel (calc-steps.js) */
.gp-calc-steps { margin: 1.5rem 0; padding: 1.5rem; border-radius: 16px; background: linear-gradient(180deg, rgba(8,145,178,.07), rgba(8,145,178,0)), var(--gp-surface, #fff); border: 1px solid rgba(8,145,178,.25); box-shadow: 0 10px 30px -18px rgba(14,116,144,.35); }
.gp-calc-steps__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.gp-calc-steps__title { margin: 0; font-size: 1.25rem; }
.gp-calc-steps__live { font-size: .8rem; font-weight: 600; color: #0e7490; background: rgba(34,211,238,.15); padding: .25rem .65rem; border-radius: 999px; }
.gp-calc-steps__intro, .gp-calc-steps__foot { margin: .5rem 0; font-size: .9rem; opacity: .85; }
.gp-calc-steps__list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .75rem; counter-reset: none; }
.gp-calc-steps__item { display: grid; grid-template-columns: 2.25rem 1fr; gap: .75rem; padding: .9rem 1rem; border-radius: 12px; background: rgba(148,163,184,.08); border: 1px solid rgba(148,163,184,.2); }
.gp-calc-steps__num { width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff; background: #0891b2; }
.gp-calc-steps__step { margin: 0 0 .25rem; font-size: .98rem; }
.gp-calc-steps__expr { display: block; white-space: pre-wrap; word-break: break-word; font-size: .9rem; padding: .4rem .6rem; border-radius: 8px; background: rgba(15,23,42,.06); }
.gp-calc-steps__res { margin: .35rem 0 0; font-weight: 700; color: #0e7490; }
.gp-calc-steps__item.is-final { border-color: #0891b2; background: rgba(8,145,178,.12); }
.gp-calc-steps__item.is-final .gp-calc-steps__num { background: #059669; }
@media (max-width: 600px) { .gp-calc-steps { padding: 1rem; } .gp-calc-steps__item { grid-template-columns: 1.9rem 1fr; } .gp-calc-steps__num { width: 1.9rem; height: 1.9rem; } }