/* =========================================================================
   GyanPustak Tools Child — main.css
   Namespaced (.gp-*) premium UI shell: header buttons, breadcrumbs, tool hero,
   cards, directory, drawer, search modal, toasts, chips, FAQ, dark mode.
   Generic element selectors are never used — calculator content stays safe.
   ========================================================================= */

/* The hidden attribute always wins: overlays (.gp-drawer etc.) declare their own
   display in base rules, which would otherwise nullify [hidden] and leave an
   invisible full-screen layer intercepting every tap (mobile search bug). */
[hidden] { display: none !important; }
.gp-drawer[hidden], .gp-search-modal[hidden] { display: none !important; }

.gp-tools-child {
	-webkit-text-size-adjust: 100%;
}

/* ------------------------------------------------------------------ base */
.gp-site-main { padding: 0 0 var(--gp-space, 32px); }
.gp-container {
	max-width: var(--gp-width-site);
	margin: 0 auto;
	padding: 0 20px;
	width: 100%;
}
.gp-container--narrow { max-width: calc(var(--gp-width-content) + 40px); }
.gp-screen-reader-text,
.gp-breadcrumbs__home-icon .screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important;
	width: 1px; word-wrap: normal !important;
}

.gp-icon { width: 1em; height: 1em; flex-shrink: 0; vertical-align: -0.125em; }

/* Accessible focus (opt-out via settings class is unnecessary — this only targets .gp-*) */
.gp-tools-child .gp-btn:focus-visible,
.gp-tools-child .gp-action-btn:focus-visible,
.gp-tools-child .gp-chip:focus-visible,
.gp-tools-child .gp-bottomnav__link:focus-visible,
.gp-tools-child .gp-drawer-menu__list a:focus-visible,
.gp-tools-child .gp-search-item:focus-visible,
.gp-tools-child .gp-faq__toggle:focus-visible,
.gp-tools-child .gp-rating__star:focus-visible,
.gp-tools-child .gp-breadcrumbs__link:focus-visible {
	outline: 2px solid var(--gp-primary);
	outline-offset: 2px;
	border-radius: 4px;
}

/* --------------------------------------------------------------- buttons */
.gp-btn {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 12px 26px; border-radius: var(--gp-radius-btn);
	background: linear-gradient(135deg, var(--gp-primary), color-mix(in srgb, var(--gp-secondary) 55%, var(--gp-primary)));
	color: #fff; border: 1px solid transparent;
	font-weight: 600; font-size: 0.95rem; letter-spacing: 0.2px; line-height: 1.2; cursor: pointer;
	text-decoration: none; transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
	min-height: 44px; box-shadow: 0 10px 30px 0 color-mix(in srgb, var(--gp-primary) 25%, transparent);
}
.gp-btn:hover { background: linear-gradient(135deg, color-mix(in srgb, var(--gp-primary) 88%, #000), var(--gp-secondary)); box-shadow: 0 10px 30px 0 color-mix(in srgb, var(--gp-primary) 40%, transparent); }
.gp-btn:hover { background: color-mix(in srgb, var(--gp-primary) 88%, #000); color: #fff; transform: translateY(-1px); }
.gp-btn--primary { background: var(--gp-primary); }
.gp-btn--inverse { background: #fff; color: var(--gp-primary); }
.gp-btn--inverse:hover { background: #f3f4f6; color: var(--gp-primary); }
.gp-btn--lg { padding: 14px 26px; font-size: 1.05rem; }
.gp-btn-danger { background: var(--gp-danger); border-color: var(--gp-danger); color: #fff; }
.gp-linkbtn {
	background: none; border: 0; color: var(--gp-primary); cursor: pointer;
	font-size: 0.9rem; padding: 6px 8px; border-radius: 6px; min-height: 44px;
	display: inline-flex; align-items: center;
}
.gp-linkbtn:hover { text-decoration: underline; }

/* -------------------------------------------------------- header actions */
.gp-header-actions {
	display: inline-flex; align-items: center; gap: 4px;
	margin-left: auto; padding-left: 6px; flex-shrink: 0;
}
/* Google app-bar: hamburger sits before the branding (hook prints it first);
   the remaining actions cluster hugs the right edge. */
.gp-header-btn--menu { margin-right: 12px; }
@media (min-width: 769px) {
	.gp-header-actions { margin-left: auto; }
}
/* Mobile: GP's menu-toggle wrapper carries its own margin-left:auto;
   neutralize it when our actions row is present so search + toggle
   sit together at the right edge instead of floating apart. */
@media (max-width: 768px) {
	.gp-header-actions ~ .mobile-menu-control-wrapper { margin-left: 0; }
}

/* ------------------------------------------- Google-style app bar (single menu) */
/* One slide-in drawer everywhere; GeneratePress's own menu toggle + desktop
   navbar are retired in favour of the single Google-style hamburger. */
.gp-tools-child .menu-toggle,
.gp-tools-child .mobile-menu-control-wrapper,
.gp-tools-child #site-navigation { display: none !important; }
.gp-tools-child .site-header { background: var(--gp-header-bg, var(--gp-card)); border-bottom: 1px solid var(--gp-border); box-shadow: 0 2px 12px rgba(35, 31, 64, 0.05); }
.gp-tools-child .inside-header { min-height: 64px; padding-top: 8px; padding-bottom: 8px; }
.gp-tools-child .site-branding .main-title { font-size: 1.1rem; font-weight: 500; letter-spacing: 0; }
.gp-tools-child .site-branding .main-title a { color: var(--gp-text); }
.gp-tools-child .site-description { font-size: 0.78rem; }
.gp-tools-child .gp-header-btn:hover { background: rgba(60, 64, 67, 0.08); }
.gp-tools-child .gp-header-btn .gp-icon { color: var(--gp-muted); }
/* Mobile: single app-bar row — [hamburger] [branding] [actions].
   Overrides GP's own stacked-header mobile rule. */
@media (max-width: 768px) {
	.gp-tools-child .inside-header,
	.gp-tools-child.has-inline-mobile-toggle .inside-header {
		flex-direction: row; flex-wrap: nowrap; text-align: left; align-items: center;
	}
	.gp-tools-child .site-branding { flex: 1 1 auto; min-width: 0; text-align: left; }
	.gp-tools-child .site-branding .main-title { font-size: 1rem; line-height: 1.25; }
	.gp-tools-child .site-branding .site-description {
		white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.72rem;
	}
	.gp-tools-child .gp-header-actions { margin-left: 0; padding-left: 0; flex-shrink: 0; }
}
.gp-header-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	background: transparent; border: 0; cursor: pointer; color: inherit;
	padding: 9px; border-radius: 8px; position: relative; min-width: 40px; min-height: 40px;
	transition: background 0.15s ease;
}
.gp-header-btn:hover { background: rgba(128, 128, 128, 0.12); }
.gp-header-btn .gp-icon { width: 20px; height: 20px; }
.gp-header-btn__count {
	position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px;
	background: var(--gp-accent); color: #fff; border-radius: 999px;
	font-size: 10px; line-height: 16px; text-align: center; padding: 0 4px; font-weight: 700;
}
.gp-header-btn[data-gp-theme-current="dark"] .gp-icon-moon { display: none; }
.gp-header-btn[data-gp-theme-current="light"] .gp-icon-sun { display: none; }
.gp-header-cta {
	display: inline-flex; align-items: center; margin-left: 8px;
	background: var(--gp-primary); color: #fff; text-decoration: none;
	padding: 8px 16px; border-radius: var(--gp-radius-btn); font-weight: 600; font-size: 0.9rem;
}
.gp-header-cta:hover { background: color-mix(in srgb, var(--gp-primary) 88%, #000); color: #fff; }
.gp-search-inline { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; }
.gp-search-inline input {
	border: 1px solid var(--gp-border); border-radius: var(--gp-radius-btn);
	padding: 7px 12px; background: var(--gp-card); color: var(--gp-text); min-width: 180px;
}

/* sticky header helper (GP-compatible, CSS-only) */
.gp-sticky-header .site-header,
.gp-sticky-header #masthead {
	position: sticky; top: 0; z-index: 990;
	box-shadow: 0 1px 0 var(--gp-border);
}

/* header style variants */
.gp-header-compact #masthead .inside-header { padding-top: 10px; padding-bottom: 10px; }
.gp-header-centered #masthead .site-branding,
.gp-header-centered #masthead .inside-header { text-align: center; }
.gp-header-portal #masthead { border-bottom: 1px solid var(--gp-border); background: var(--gp-header-bg, var(--gp-card)); }
.gp-transparent-header #masthead { background: transparent; box-shadow: none; }
.gp-transparent-header #masthead .main-title a,
.gp-transparent-header #masthead .site-description { color: #fff; }

/* desktop navigation (optional classic menu alongside the app feel) */
@media (min-width: 769px) {
	.gp-tools-child.gp-desktop-menu #site-navigation { display: block !important; }
	.gp-tools-child.gp-desktop-menu .gp-header-btn--menu { display: none !important; }
	.gp-tools-child.gp-desktop-menu #site-navigation { flex: 1 1 auto; margin-left: 16px; min-width: 0; }
	.gp-tools-child.gp-desktop-menu .gp-header-actions { margin-left: auto; }
	.gp-tools-child.gp-desktop-menu .main-navigation .main-nav ul li a {
		color: var(--gp-text); font-weight: 600; font-size: 0.93rem; padding: 9px 14px; border-radius: 8px;
	}
	.gp-tools-child.gp-desktop-menu .main-navigation .main-nav ul li:hover > a,
	.gp-tools-child.gp-desktop-menu .main-navigation .main-nav ul li[class*="current-menu-"] > a {
		color: var(--gp-primary); background: color-mix(in srgb, var(--gp-primary) 8%, transparent);
	}
}

/* optional: hide site title / tagline in the header bar */
.gp-tools-child.gp-hide-site-title .site-branding .main-title { display: none; }
.gp-tools-child.gp-hide-site-tagline .site-branding .site-description { display: none; }

/* back-to-top floating button (above bottom nav, never over calculators) */
.gp-backtotop {
	position: fixed; right: 16px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 1045;
	width: 46px; height: 46px; border: 0; border-radius: 999px; cursor: pointer;
	display: flex; align-items: center; justify-content: center; color: #fff;
	background: linear-gradient(135deg, var(--gp-primary), color-mix(in srgb, var(--gp-secondary) 55%, var(--gp-primary)));
	box-shadow: 0 10px 30px color-mix(in srgb, var(--gp-primary) 40%, transparent);
	opacity: 0; transform: translateY(14px); pointer-events: none;
	transition: opacity 0.25s ease, transform 0.25s ease;
}
.gp-backtotop .gp-icon { transform: rotate(-90deg); }
.gp-backtotop.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.gp-backtotop:hover { filter: brightness(1.06); }
@media (min-width: 769px) { .gp-backtotop { right: 24px; bottom: 24px; } }

/* announcement bar (dismissible; id = md5 of text) */
.gp-announce {
	background: linear-gradient(90deg, var(--gp-primary), color-mix(in srgb, var(--gp-secondary) 55%, var(--gp-primary)));
	color: #fff; font-size: 0.9rem;
}
.gp-announce__inner {
	max-width: var(--gp-width-site, 1280px); margin: 0 auto; padding: 8px 44px 8px 16px;
	display: flex; align-items: center; justify-content: center; gap: 10px; position: relative; text-align: center;
}
.gp-announce__link, .gp-announce__text { color: #fff; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.gp-announce__link:hover { text-decoration: underline; color: #fff; }
.gp-announce__link .gp-icon, .gp-announce__close .gp-icon { width: 14px; height: 14px; }
.gp-announce__close {
	position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
	background: rgba(255, 255, 255, 0.15); border: 0; color: #fff; cursor: pointer;
	width: 28px; height: 28px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
}
.gp-announce__close:hover { background: rgba(255, 255, 255, 0.3); }

/* reading progress bar (blog posts) */
.gp-reading-progress {
	position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 1250; pointer-events: none;
	background: linear-gradient(90deg, var(--gp-primary), var(--gp-secondary));
}

/* --------------------------------------------------------- design presets
   One-click site designs. html[data-gp-design] overrides the accent tokens;
   surfaces (bg/cards) stay under admin control. Set by the palette button
   (localStorage gpDesign) or the admin default (inline bootstrap). */
html[data-gp-design="edublink"] { --gp-primary: #21a7d0; --gp-secondary: #7c4dff; --gp-accent: #ffb60f; }
html[data-gp-design="google"] { --gp-primary: #4285f4; --gp-secondary: #34a853; --gp-accent: #fbbc05; }
html[data-gp-design="midnight"] { --gp-primary: #6366f1; --gp-secondary: #a855f7; --gp-accent: #22d3ee; }
html[data-gp-design="sunset"] { --gp-primary: #f97316; --gp-secondary: #ef4444; --gp-accent: #fbbf24; }
html[data-gp-design="forest"] { --gp-primary: #16a34a; --gp-secondary: #0d9488; --gp-accent: #84cc16; }
html[data-gp-design="royal"] { --gp-primary: #7c3aed; --gp-secondary: #d946ef; --gp-accent: #f59e0b; --gp-font-heading: Georgia, "Times New Roman", serif; }
html[data-gp-design="ocean"] { --gp-primary: #0284c7; --gp-secondary: #06b6d4; --gp-accent: #7dd3fc; }
html[data-gp-design="rose"] { --gp-primary: #e11d48; --gp-secondary: #ec4899; --gp-accent: #fb923c; }
html[data-gp-design="mono"] { --gp-primary: #1f2937; --gp-secondary: #4b5563; --gp-accent: #9ca3af; --gp-font-heading: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
html[data-gp-design="coffee"] { --gp-primary: #92400e; --gp-secondary: #b45309; --gp-accent: #d6a354; }
html[data-gp-design="candy"] { --gp-primary: #ec4899; --gp-secondary: #8b5cf6; --gp-accent: #f9a8d4; }

/* -------------------------------------------------- header quick links */
.gp-header-links { display: inline-flex; align-items: center; gap: 4px; margin-right: 6px; }
.gp-header-links__item {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 8px 12px; border-radius: 10px; font-size: 0.9rem; font-weight: 600;
	color: var(--gp-text); text-decoration: none; transition: background 0.15s ease, color 0.15s ease;
}
.gp-header-links__item .gp-icon { width: 16px; height: 16px; color: var(--gp-primary); }
.gp-header-links__item:hover { background: color-mix(in srgb, var(--gp-primary) 10%, transparent); color: var(--gp-primary); }
@media (max-width: 1024px) { .gp-header-links { display: none; } }

/* -------------------------------------------------- design switcher panel */
.gp-design-panel {
	position: fixed; z-index: 99999; top: 64px; right: 16px; width: 300px; max-width: calc(100vw - 24px);
	background: var(--gp-card); border: 1px solid var(--gp-border); border-radius: 14px;
	box-shadow: 0 12px 40px rgba(15, 23, 42, 0.25); padding: 14px;
	opacity: 0; transform: translateY(-6px); transition: opacity 0.18s ease, transform 0.18s ease;
}
.gp-design-panel.is-open { opacity: 1; transform: translateY(0); }
.gp-design-panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.gp-design-panel__close { background: none; border: 0; cursor: pointer; color: var(--gp-muted); padding: 4px; border-radius: 8px; display: inline-flex; }
.gp-design-panel__close:hover { color: var(--gp-text); }
.gp-design-panel__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gp-design-panel__item {
	display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 10px; cursor: pointer;
	background: transparent; border: 1px solid var(--gp-border); color: var(--gp-text); font-size: 0.8rem; font-weight: 600; text-align: left;
}
.gp-design-panel__item:hover { border-color: var(--gp-primary); }
.gp-design-panel__item.is-active { border-color: var(--gp-primary); background: color-mix(in srgb, var(--gp-primary) 8%, transparent); }
.gp-design-panel__swatch { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06); }

/* -------------------------------------------------- directory: view toggle, sections, live status */
.gp-viewtoggle { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--gp-border); border-radius: 10px; background: var(--gp-card); }
.gp-viewtoggle__btn {
	display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 30px;
	border: 0; border-radius: 8px; background: transparent; color: var(--gp-muted); cursor: pointer;
}
.gp-viewtoggle__btn .gp-icon { width: 15px; height: 15px; }
.gp-viewtoggle__btn:hover { color: var(--gp-primary); }
.gp-viewtoggle__btn.is-active { background: color-mix(in srgb, var(--gp-primary) 12%, transparent); color: var(--gp-primary); }
.gp-dir-section { margin: 0 0 30px; }
.gp-dir-section__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.gp-dir-section__title { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-family: var(--gp-font-heading); font-size: 1.15rem; font-weight: 800; color: var(--gp-text); }
.gp-dir-section__head .gp-chip__count { background: color-mix(in srgb, var(--gp-primary) 12%, transparent); color: var(--gp-primary); }
.gp-dir-status { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--gp-muted); margin: 0 0 12px; }
.gp-spinner { width: 14px; height: 14px; border: 2px solid color-mix(in srgb, var(--gp-primary) 25%, transparent); border-top-color: var(--gp-primary); border-radius: 50%; animation: gp-spin 0.7s linear infinite; }
@keyframes gp-spin { to { transform: rotate(360deg); } }
.gp-directory__controls { flex-wrap: wrap; }

/* -------------------------------------------------- compact tool actions: one line, all devices */
.gp-tool-hero__actions,
.gp-toolbar__actions {
	display: flex; flex-wrap: nowrap; align-items: center; gap: 6px;
	min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.gp-tool-hero__actions::-webkit-scrollbar,
.gp-toolbar__actions::-webkit-scrollbar { display: none; }
.gp-tool-hero__actions .gp-action-btn,
.gp-toolbar__actions .gp-action-btn {
	flex: 0 0 auto; padding: 7px 11px; font-size: 0.8rem; gap: 6px; white-space: nowrap;
}
.gp-tool-hero__actions .gp-action-btn .gp-icon,
.gp-toolbar__actions .gp-action-btn .gp-icon { width: 15px; height: 15px; }
@media (max-width: 1024px) {
	.gp-tool-hero__actions .gp-action-btn,
	.gp-toolbar__actions .gp-action-btn { padding: 7px 9px; }
}
@media (max-width: 768px) {
	.gp-tool-hero__actions .gp-action-btn,
	.gp-toolbar__actions .gp-action-btn { padding: 7px; }
	.gp-tool-hero__actions .gp-action-btn .gp-action-btn__label,
	.gp-toolbar__actions .gp-action-btn .gp-action-btn__label { display: none; }
}

/* -------------------------------------------------- home: full-bleed hero
   Placed before breadcrumbs; sections own their inner .gp-container. The
   final override lives at the very end of this file (cascade). */
.gp-home-main { overflow-x: clip; }

/* -------------------------------------------------- copy protection (opt-in) */
body.gp-protected { -webkit-user-select: none; user-select: none; }
body.gp-protected input,
body.gp-protected textarea,
body.gp-protected select,
body.gp-protected [contenteditable] { -webkit-user-select: text; user-select: text; }
body.gp-protected img { -webkit-user-drag: none; }

/* suggest-a-tool panel */
.gp-suggest-panel {
	position: fixed; z-index: 99999; top: 64px; right: 16px; width: 340px; max-width: calc(100vw - 24px);
	background: var(--gp-card); border: 1px solid var(--gp-border); border-radius: 14px;
	box-shadow: 0 12px 40px rgba(15, 23, 42, 0.25); padding: 14px;
	opacity: 0; transform: translateY(-6px); transition: opacity 0.18s ease, transform 0.18s ease;
}
.gp-suggest-panel.is-open, .gp-design-panel.is-open { opacity: 1; transform: translateY(0); }
.gp-suggest-panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.gp-suggest-panel__close { background: none; border: 0; cursor: pointer; color: var(--gp-muted); padding: 4px; border-radius: 8px; display: inline-flex; }
.gp-suggest-field { margin-bottom: 10px; }
.gp-suggest-field label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--gp-text); margin-bottom: 4px; }
.gp-suggest-field input,
.gp-suggest-field textarea {
	width: 100%; padding: 9px 11px; border: 1px solid var(--gp-border); border-radius: 10px;
	background: var(--gp-bg); color: var(--gp-text); font: inherit; font-size: 0.9rem;
}
.gp-suggest-field input:focus, .gp-suggest-field textarea:focus { outline: 2px solid color-mix(in srgb, var(--gp-primary) 45%, transparent); border-color: var(--gp-primary); }
.gp-suggest-note { font-size: 0.78rem; color: var(--gp-muted); margin: 0 0 10px; }
.gp-suggest-hp { position: absolute !important; left: -9999px !important; height: 0; overflow: hidden; }

/* load more */
.gp-loadmore-wrap { display: flex; justify-content: center; margin: 22px 0 6px; }
.gp-loadmore[hidden] { display: none; }
.gp-hidden { display: none !important; }

/* Site title: always one professional line on every screen. */
.main-title a {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
	display: inline-block;
	vertical-align: bottom;
}
.main-title { max-width: 100%; }
/* Reserve room beside the title ONLY when a logo image actually exists. */
body.gp-has-logo .main-title { max-width: calc(100% - 90px); }
@media (max-width: 768px) {
	body.gp-has-logo .main-title { max-width: calc(100% - 120px); }
	.main-title a { font-size: clamp(13px, 4vw, 20px); }
}
/* Branding always gets the leftover header room (desktop + mobile). */
.gp-tools-child .site-branding { flex: 1 1 auto; min-width: 0; }

/* -------------------------------------------------- breadcrumbs */
/* Standalone bar above the content card (generate_before_main_content). */
/* R19: inset matches the article padding so breadcrumbs line up with content. */
.gp-breadcrumbs-bar { margin-top: 14px; }
@media (min-width: 769px) {
	.gp-breadcrumbs-bar { padding-left: 40px; padding-right: 40px; }
}
.gp-breadcrumbs { margin: 0; }
.gp-breadcrumbs__list {
	display: flex; flex-wrap: nowrap; align-items: center; gap: 4px;
	list-style: none; margin: 0; padding: 8px 12px;
	background: var(--gp-card); border: 1px solid var(--gp-border);
	border-radius: var(--gp-radius-card); font-size: 0.85rem;
	overflow-x: auto; white-space: nowrap; scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}
.gp-breadcrumbs__item { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
.gp-breadcrumbs__link { color: var(--gp-muted); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.gp-breadcrumbs__link:hover { color: var(--gp-primary); }
.gp-breadcrumbs__link .gp-icon { width: 14px; height: 14px; }
.gp-breadcrumbs__home-icon { display: inline-flex; }
.gp-breadcrumbs__sep { color: var(--gp-muted); opacity: 0.6; display: inline-flex; }
.gp-breadcrumbs__sep .gp-icon { width: 13px; height: 13px; }
.gp-breadcrumbs__current { color: var(--gp-text); font-weight: 600; }

/* -------------------------------------------------------------- tool hero */
.gp-tool-hero {
	display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
	background: var(--gp-card); border: 1px solid var(--gp-border);
	border-radius: var(--gp-radius-card); box-shadow: var(--gp-shadow);
	padding: 24px; margin: 14px 0 18px;
}
.gp-tool-hero__main { display: flex; gap: 16px; align-items: flex-start; min-width: 0; }
.gp-tool-icon {
	display: inline-flex; align-items: center; justify-content: center;
	background: color-mix(in srgb, var(--gp-primary) 10%, transparent);
	color: var(--gp-primary); border-radius: 12px; flex-shrink: 0; overflow: hidden;
}
.gp-tool-icon .gp-icon { width: 55%; height: 55%; }
.gp-tool-icon--img img { width: 100%; height: 100%; object-fit: contain; }
.gp-tool-icon--svg svg { width: 100%; height: 100%; }
.gp-tool-hero__text { min-width: 0; }
.gp-tool-hero__badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.gp-tool-hero__title {
	font-family: var(--gp-font-heading);
	font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.25;
	margin: 0 0 6px; color: var(--gp-text); overflow-wrap: anywhere;
}
.gp-tool-hero__subtitle { margin: 0 0 4px; color: var(--gp-primary); font-weight: 600; font-size: 0.98rem; }
.gp-tool-hero__desc { margin: 0 0 10px; color: var(--gp-muted); }
.gp-tool-hero__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--gp-muted); font-size: 0.85rem; }
.gp-tool-hero__meta > span { display: inline-flex; align-items: center; gap: 6px; }
.gp-tool-hero__meta .gp-icon { width: 14px; height: 14px; }
.gp-tool-hero--notitle { background: transparent; border: 0; box-shadow: none; padding: 4px 0 0; }
.gp-tool-hero__actions--solo { padding: 0; }
.gp-tool-hero__actions { flex-shrink: 0; }

/* badges */
.gp-badge {
	display: inline-flex; align-items: center; gap: 4px;
	font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em;
	padding: 3px 8px; border-radius: 999px; text-transform: uppercase;
}
.gp-badge--featured { background: color-mix(in srgb, var(--gp-accent) 15%, transparent); color: color-mix(in srgb, var(--gp-accent) 80%, #000); }
.gp-badge--popular { background: color-mix(in srgb, var(--gp-danger) 12%, transparent); color: var(--gp-danger); }
.gp-badge--new { background: color-mix(in srgb, var(--gp-success) 14%, transparent); color: var(--gp-success); }
.gp-badge--updated { background: color-mix(in srgb, var(--gp-secondary) 14%, transparent); color: var(--gp-secondary); }
.gp-badge--custom { background: color-mix(in srgb, var(--gp-primary) 12%, transparent); color: var(--gp-primary); }
.gp-badge--category { background: color-mix(in srgb, var(--gp-primary) 10%, transparent); color: var(--gp-primary); text-transform: none; letter-spacing: 0; font-size: 0.78rem; }
.gp-badge--category:hover { background: color-mix(in srgb, var(--gp-primary) 18%, transparent); text-decoration: none; }

/* action buttons */
.gp-tool-hero__actions, .gp-toolbar__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.gp-action-btn {
	display: inline-flex; align-items: center; gap: 6px;
	background: var(--gp-bg); border: 1px solid var(--gp-border);
	color: var(--gp-text); border-radius: var(--gp-radius-btn);
	padding: 8px 12px; min-height: 42px; cursor: pointer; font-size: 0.85rem;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.gp-action-btn:hover { border-color: var(--gp-primary); color: var(--gp-primary); }
.gp-action-btn .gp-icon { width: 17px; height: 17px; }
.gp-action-btn--favorite .gp-icon-heart { fill: transparent; transition: fill 0.15s ease, color 0.15s ease, transform 0.2s ease; }
.gp-action-btn--favorite.is-active { color: var(--gp-danger); border-color: var(--gp-danger); }
.gp-action-btn--favorite.is-active .gp-icon-heart { fill: currentColor; }
.gp-action-btn--favorite.is-animating .gp-icon-heart { animation: gp-heart-pop 0.4s ease; }
@keyframes gp-heart-pop {
	0% { transform: scale(1); }
	40% { transform: scale(1.35); }
	100% { transform: scale(1); }
}

/* floating toolbar */
.gp-toolbar-wrap {
	position: fixed; top: 0; left: 0; right: 0; z-index: 980;
	transform: translateY(-120%); transition: transform 0.25s ease;
	pointer-events: none;
}
.gp-toolbar-wrap.is-visible { transform: translateY(0); pointer-events: auto; }
.gp-toolbar {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	max-width: var(--gp-width-tool); margin: 10px auto 0; padding: 8px 10px 8px 18px;
	background: color-mix(in srgb, var(--gp-card) 92%, transparent);
	backdrop-filter: blur(10px); border: 1px solid var(--gp-border);
	border-radius: var(--gp-radius-card); box-shadow: var(--gp-shadow);
}
.gp-toolbar__title { font-weight: 600; font-size: 0.92rem; color: var(--gp-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-toolbar__actions .gp-action-btn .gp-action-btn__label { display: none; }
.gp-toolbar__actions .gp-action-btn { padding: 8px; }

/* ------------------------------------------------------------- tool cards */
.gp-grid {
	display: grid; gap: 16px;
	grid-template-columns: repeat(var(--gp-cols-desktop, 4), minmax(0, 1fr));
}
.gp-grid--list { grid-template-columns: 1fr; }
.gp-tool-card {
	position: relative; display: flex; flex-direction: column;
	background: linear-gradient(145deg, var(--gp-card), color-mix(in srgb, var(--gp-primary) 3%, var(--gp-card)));
	border: 1px solid var(--gp-border);
	border-radius: var(--gp-radius-card); box-shadow: var(--gp-shadow);
	overflow: hidden; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.gp-tool-card:hover { transform: translateY(-4px); border-color: transparent; box-shadow: 0 10px 50px 0 rgba(26, 46, 85, 0.14); }
.gp-tool-card__link { display: flex; flex-direction: column; gap: 12px; padding: 18px; text-decoration: none; color: inherit; flex: 1; }
.gp-tool-card__fav {
	position: absolute; top: 10px; right: 10px; z-index: 2;
	background: var(--gp-bg); border: 1px solid var(--gp-border);
	width: 34px; height: 34px; border-radius: 999px;
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--gp-muted); cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease;
}
.gp-tool-card__fav .gp-icon { width: 16px; height: 16px; fill: transparent; }
.gp-tool-card__fav:hover { color: var(--gp-danger); border-color: var(--gp-danger); }
.gp-tool-card__fav.is-active { color: var(--gp-danger); border-color: var(--gp-danger); }
.gp-tool-card__fav.is-active .gp-icon-heart { fill: currentColor; }
.gp-tool-card__badges { display: flex; flex-wrap: wrap; gap: 4px; min-height: 0; }
.gp-tool-card__badges:empty { display: none; }
.gp-tool-card__title {
	font-family: var(--gp-font-heading); font-size: 1rem; margin: 0 0 4px; color: var(--gp-text); line-height: 1.3;
}
.gp-tool-card__desc { margin: 0; color: var(--gp-muted); font-size: 0.85rem; line-height: 1.45; }
.gp-tool-card__foot {
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
	padding: 10px 18px; border-top: 1px solid var(--gp-border); font-size: 0.78rem;
}
.gp-tool-card__cat { color: var(--gp-primary); text-decoration: none; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-tool-card__type { color: var(--gp-muted); }
.gp-tool-card__open { display: inline-flex; align-items: center; gap: 4px; color: var(--gp-muted); }
.gp-tool-card__open .gp-icon { width: 13px; height: 13px; transition: transform 0.15s ease; }
.gp-tool-card:hover .gp-tool-card__open .gp-icon { transform: translateX(3px); }

/* compact grid variant */
.gp-grid--compact .gp-tool-card__link { flex-direction: row; align-items: center; padding: 14px; }
.gp-grid--compact .gp-tool-card__foot { display: none; }
.gp-grid--compact .gp-tool-card__desc { display: none; }
/* list variant */
.gp-grid--list .gp-tool-card { flex-direction: row; align-items: center; }
.gp-grid--list .gp-tool-card__link { flex: 1; flex-direction: row; align-items: center; gap: 14px; }
.gp-grid--list .gp-tool-card__foot { border-top: 0; border-left: 1px solid var(--gp-border); }

/* -------------------------------------------------------------- directory */
.gp-directory__head { margin-bottom: 20px; }
.gp-directory__title { font-family: var(--gp-font-heading); font-size: clamp(1.4rem, 3vw, 1.9rem); margin: 0 0 8px; color: var(--gp-text); }
.gp-directory__desc { color: var(--gp-muted); margin: 0 0 14px; max-width: 70ch; }
.gp-directory__controls { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.gp-directory__controls form { display: contents; }
.gp-searchfield {
	display: flex; align-items: center; gap: 8px; flex: 1; min-width: 220px; max-width: 420px;
	background: var(--gp-card); border: 1px solid var(--gp-border);
	border-radius: var(--gp-radius-btn); padding: 0 14px; color: var(--gp-muted);
}
.gp-searchfield .gp-icon { width: 17px; height: 17px; }
.gp-searchfield__input {
	border: 0 !important; outline: none; background: transparent; color: var(--gp-text);
	width: 100%; padding: 12px 0; font-size: 0.95rem;
}
.gp-selectwrap select {
	border: 1px solid var(--gp-border); border-radius: var(--gp-radius-btn);
	background: var(--gp-card); color: var(--gp-text); padding: 11px 12px; min-height: 44px;
}
.gp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.gp-chip {
	display: inline-flex; align-items: center; gap: 6px;
	background: var(--gp-card); border: 1px solid var(--gp-border);
	color: var(--gp-text); border-radius: 999px; padding: 7px 14px;
	font-size: 0.85rem; text-decoration: none; cursor: pointer; min-height: 38px;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.gp-chip:hover { border-color: var(--gp-primary); color: var(--gp-primary); text-decoration: none; }
.gp-chip.is-active { background: color-mix(in srgb, var(--gp-primary) 10%, var(--gp-card)); border-color: color-mix(in srgb, var(--gp-primary) 45%, var(--gp-border)); color: var(--gp-primary); font-weight: 500; }
.gp-chip:not(.is-active):hover { background: rgba(60, 64, 67, 0.06); }
.gp-chip__count { background: rgba(128, 128, 128, 0.15); border-radius: 999px; font-size: 0.72rem; padding: 1px 7px; }
.gp-chip.is-active .gp-chip__count { background: rgba(255, 255, 255, 0.25); }

/* pagination */
.gp-pagination ul, .gp-pagination .page-numbers, .gp-pagination .nav-links {
	display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 22px 0 0; padding: 0; justify-content: center;
}
.gp-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 40px; min-height: 40px; padding: 0 10px;
	background: var(--gp-card); border: 1px solid var(--gp-border);
	border-radius: var(--gp-radius-btn); color: var(--gp-text); text-decoration: none; font-size: 0.9rem;
}
.gp-pagination .page-numbers.current { background: var(--gp-primary); border-color: var(--gp-primary); color: #fff; }
.gp-pagination .page-numbers:hover:not(.current) { border-color: var(--gp-primary); color: var(--gp-primary); }
.gp-pagination .gp-icon { width: 14px; height: 14px; }

/* empty states */
.gp-empty {
	text-align: center; padding: 48px 20px; background: var(--gp-card);
	border: 1px dashed var(--gp-border); border-radius: var(--gp-radius-card);
}
.gp-empty .gp-chip { margin: 0 2px; }
.gp-empty__hints { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; align-items: center; }
.gp-empty__title { font-size: 1.05rem; margin: 22px 0 10px; }

/* -------------------------------------------------------------- sections */
.gp-tool-section {
	background: var(--gp-card); border: 1px solid var(--gp-border);
	border-radius: var(--gp-radius-card); padding: 22px 24px; margin: 18px 0;
	box-shadow: var(--gp-shadow);
}
.gp-tool-section__title {
	display: flex; align-items: center; gap: 10px;
	font-family: var(--gp-font-heading); font-size: 1.15rem; margin: 0 0 16px; color: var(--gp-text);
}
.gp-tool-section__title .gp-icon { width: 20px; height: 20px; color: var(--gp-primary); }

/* formula + examples */
.gp-tool-formula {
	background: color-mix(in srgb, var(--gp-primary) 6%, transparent);
	border: 1px solid color-mix(in srgb, var(--gp-primary) 25%, transparent);
	border-radius: 10px; padding: 16px 18px; font-size: 1.05rem; overflow-x: auto;
}
.gp-tool-examples { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.gp-tool-example { background: var(--gp-bg); border: 1px solid var(--gp-border); border-radius: 10px; padding: 14px 16px; }
.gp-tool-example__title { margin: 0 0 8px; font-size: 0.95rem; color: var(--gp-text); }
.gp-tool-example__body { color: var(--gp-muted); font-size: 0.9rem; }
.gp-tool-example__body p { margin: 2px 0; }

/* notes */
.gp-note {
	display: flex; gap: 12px; align-items: flex-start; margin: 14px 0;
	border-radius: 10px; padding: 14px 16px; font-size: 0.92rem;
	border: 1px solid var(--gp-border); background: var(--gp-card);
}
.gp-note__icon { display: inline-flex; flex-shrink: 0; margin-top: 2px; }
.gp-note__icon .gp-icon { width: 18px; height: 18px; }
.gp-note__body { min-width: 0; }
.gp-note__body p { margin: 0 0 6px; } .gp-note__body p:last-child { margin-bottom: 0; }
.gp-note--info { background: color-mix(in srgb, var(--gp-secondary) 7%, var(--gp-card)); border-color: color-mix(in srgb, var(--gp-secondary) 30%, transparent); }
.gp-note--info .gp-note__icon { color: var(--gp-secondary); }
.gp-note--success { background: color-mix(in srgb, var(--gp-success) 7%, var(--gp-card)); border-color: color-mix(in srgb, var(--gp-success) 30%, transparent); }
.gp-note--success .gp-note__icon { color: var(--gp-success); }
.gp-note--warning { background: color-mix(in srgb, var(--gp-warning) 8%, var(--gp-card)); border-color: color-mix(in srgb, var(--gp-warning) 35%, transparent); }
.gp-note--warning .gp-note__icon { color: var(--gp-warning); }
.gp-note--important { background: color-mix(in srgb, var(--gp-danger) 7%, var(--gp-card)); border-color: color-mix(in srgb, var(--gp-danger) 30%, transparent); }
.gp-note--important .gp-note__icon { color: var(--gp-danger); }
.gp-note--tip { background: color-mix(in srgb, var(--gp-accent) 8%, var(--gp-card)); border-color: color-mix(in srgb, var(--gp-accent) 35%, transparent); }
.gp-note--tip .gp-note__icon { color: var(--gp-accent); }

/* FAQ accordion */
.gp-faq__list { display: grid; gap: 10px; }
.gp-faq__item { border: 1px solid var(--gp-border); border-radius: 10px; background: var(--gp-card); overflow: hidden; }
.gp-faq__q { margin: 0; font-size: 1rem; }
.gp-faq__toggle {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	width: 100%; background: none; border: 0; cursor: pointer; text-align: left;
	padding: 14px 16px; font-size: 1rem; font-weight: 600; color: var(--gp-text); min-height: 48px;
}
.gp-faq__toggle .gp-icon { width: 16px; height: 16px; flex-shrink: 0; transition: transform 0.2s ease; color: var(--gp-muted); }
.gp-faq__toggle[aria-expanded="true"] .gp-icon { transform: rotate(180deg); }
.gp-faq__a { border-top: 1px solid var(--gp-border); }
.gp-faq__a-inner { padding: 14px 16px; color: var(--gp-muted); font-size: 0.93rem; }

/* How-To */
.gp-howto__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; counter-reset: gp-step; }
.gp-howto__step { display: flex; gap: 14px; align-items: flex-start; }
.gp-howto__num {
	display: inline-flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; border-radius: 999px; flex-shrink: 0;
	background: var(--gp-primary); color: #fff; font-weight: 700; font-size: 0.85rem; margin-top: 2px;
}
.gp-howto__step-title { margin: 0 0 4px; font-size: 1rem; color: var(--gp-text); }
.gp-howto__step-desc { color: var(--gp-muted); font-size: 0.92rem; }
.gp-howto__step-image { margin: 0; flex-shrink: 0; }
.gp-howto__step-image img { border-radius: 10px; max-width: 160px; height: auto; }

/* tool nav (prev/next) */
.gp-tool-nav {
	display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: stretch; margin: 22px 0;
}
.gp-tool-nav__link {
	display: inline-flex; align-items: center; gap: 8px;
	background: var(--gp-card); border: 1px solid var(--gp-border);
	border-radius: var(--gp-radius-card); padding: 10px 14px;
	color: var(--gp-text); text-decoration: none; font-size: 0.9rem; font-weight: 600;
	min-width: 0;
}
.gp-tool-nav__link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-tool-nav__link small { display: block; font-weight: 400; color: var(--gp-muted); font-size: 0.72rem; }
.gp-tool-nav__link .gp-icon { width: 15px; height: 15px; flex-shrink: 0; }
.gp-tool-nav__link--prev { justify-self: start; }
.gp-tool-nav__link--next { justify-self: end; text-align: right; }
a.gp-tool-nav__link:hover { border-color: var(--gp-primary); color: var(--gp-primary); }
.gp-tool-nav__all {
	display: inline-flex; align-items: center; gap: 6px;
	background: var(--gp-bg); border: 1px solid var(--gp-border); border-radius: var(--gp-radius-btn);
	padding: 10px 14px; color: var(--gp-muted); text-decoration: none; font-size: 0.85rem;
}
.gp-tool-nav__all:hover { color: var(--gp-primary); border-color: var(--gp-primary); }
.gp-tool-nav__all .gp-icon { width: 15px; height: 15px; }

/* rating */
.gp-rating__stars { display: flex; gap: 4px; }
.gp-rating__star {
	background: none; border: 0; cursor: pointer; color: var(--gp-border);
	padding: 4px; border-radius: 6px; transition: color 0.15s ease, transform 0.12s ease;
}
.gp-rating__star .gp-icon { width: 26px; height: 26px; fill: transparent; }
.gp-rating__star:hover, .gp-rating__star.is-lit { color: var(--gp-accent); }
.gp-rating__star:hover { transform: scale(1.1); }
.gp-rating__star.is-lit .gp-icon { fill: currentColor; }
.gp-rating__meta { color: var(--gp-muted); font-size: 0.85rem; margin: 8px 0 0; }

/* author box */
.gp-author { display: flex; gap: 14px; align-items: flex-start; }
.gp-author__avatar { border-radius: 999px; }
.gp-author__name { margin: 0 0 4px; color: var(--gp-text); }
.gp-author__name a { color: var(--gp-primary); }
.gp-author__bio { margin: 0 0 6px; color: var(--gp-muted); font-size: 0.9rem; }
.gp-author__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--gp-muted); font-size: 0.8rem; }

/* ads */
.gp-ad { margin: 18px 0; text-align: center; overflow: hidden; }
.gp-ad ins, .gp-ad > * { max-width: 100%; }

/* --------------------------------------------------------------- homepage */
.gp-hero {
	position: relative; overflow: hidden; isolation: isolate;
	background: linear-gradient(160deg,
		color-mix(in srgb, var(--gp-primary) 7%, var(--gp-card)) 0%,
		color-mix(in srgb, var(--gp-secondary) 5%, var(--gp-card)) 45%,
		var(--gp-card) 100%);
	color: var(--gp-text); text-align: center; padding: 76px 0 60px;
}
.gp-hero::before, .gp-hero::after {
	content: ""; position: absolute; border-radius: 50%; filter: blur(70px);
	pointer-events: none; opacity: 0.12; z-index: -1;
}
.gp-hero::before { width: 420px; height: 420px; background: var(--gp-primary); top: -160px; left: -120px; }
.gp-hero::after { width: 380px; height: 380px; background: var(--gp-secondary); bottom: -180px; right: -110px; }
.gp-hero > .gp-container { position: relative; }
.gp-hero__glow { display: none; }
.gp-hero__title {
	font-family: var(--gp-font-heading); font-size: clamp(1.9rem, 4.5vw, 3rem);
	font-weight: 800; margin: 0 0 14px; letter-spacing: -0.5px; line-height: 1.15; color: var(--gp-text);
}
.gp-hero__title::after {
	content: ""; display: block; width: 92px; height: 4px; margin: 16px auto 0;
	border-radius: 2px; background: linear-gradient(135deg, var(--gp-primary), var(--gp-secondary));
}
.gp-hero__subtitle { margin: 0 auto 30px; max-width: 62ch; color: var(--gp-muted); font-size: 1.02rem; }
.gp-hero__search {
	display: flex; align-items: center; gap: 10px; max-width: 580px; margin: 0 auto;
	background: var(--gp-card); color: var(--gp-muted);
	border: 1px solid var(--gp-border); border-radius: var(--gp-radius-btn); padding: 15px 22px; cursor: pointer;
	font-size: 1rem; width: calc(100% - 40px); box-shadow: 0 10px 50px 0 rgba(26, 46, 85, 0.10);
	text-align: left;
}
.gp-hero__search:hover { border-color: color-mix(in srgb, var(--gp-primary) 45%, var(--gp-border)); box-shadow: 0 14px 60px 0 rgba(26, 46, 85, 0.18); transform: translateY(-1px); }
.gp-hero__search:hover span { color: var(--gp-primary); }
.gp-hero__search kbd {
	margin-left: auto; border: 1px solid var(--gp-border); border-bottom-width: 2px;
	border-radius: 5px; padding: 2px 8px; font-size: 0.75rem; color: var(--gp-muted);
	background: var(--gp-bg);
}
.gp-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 26px; }
.gp-hero__btn { border: 1px solid transparent; }
.gp-hero__btn .gp-icon { width: 18px; height: 18px; }
.gp-btn--ghost { background: color-mix(in srgb, var(--gp-primary) 8%, var(--gp-card)); border-color: color-mix(in srgb, var(--gp-primary) 35%, var(--gp-border)); color: var(--gp-primary); box-shadow: none; }
.gp-btn--ghost:hover { background: color-mix(in srgb, var(--gp-primary) 15%, var(--gp-card)); color: var(--gp-primary); }
.gp-hero__ticker {
	max-width: 920px; margin: 30px auto 0; overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.gp-hero__ticker-track { display: flex; width: max-content; animation: gp-ticker 38s linear infinite; }
.gp-hero__ticker:hover .gp-hero__ticker-track { animation-play-state: paused; }
.gp-hero__ticker-list { display: flex; align-items: center; gap: 10px; padding-right: 10px; }
.gp-hero__ticker-item {
	white-space: nowrap; color: var(--gp-text); text-decoration: none;
	font-size: 0.88rem; font-weight: 500; padding: 8px 16px; border-radius: var(--gp-radius-btn);
	background: var(--gp-card); border: 1px solid var(--gp-border);
	box-shadow: 0 4px 20px 0 rgba(26, 46, 85, 0.06);
	transition: color 0.3s ease, border-color 0.3s ease;
}
.gp-hero__ticker-item:hover { color: var(--gp-primary); border-color: color-mix(in srgb, var(--gp-primary) 45%, var(--gp-border)); }
@keyframes gp-ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
	.gp-hero__ticker-track { animation: none; }
}
.gp-hero__chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 26px; }
.gp-hero__chip {
	display: inline-flex; align-items: center; gap: 8px;
	background: var(--gp-card); color: var(--gp-text); text-decoration: none;
	border: 1px solid var(--gp-border); border-radius: var(--gp-radius-btn);
	padding: 9px 16px; font-size: 0.88rem; font-weight: 500;
	box-shadow: 0 4px 20px 0 rgba(26, 46, 85, 0.06); transition: color 0.3s ease, border-color 0.3s ease;
}
.gp-hero__chip:hover { color: var(--gp-primary); border-color: color-mix(in srgb, var(--gp-primary) 45%, var(--gp-border)); }
.gp-hero__chip .gp-tool-icon { background: transparent; color: var(--gp-primary); width: 18px !important; height: 18px !important; }
.gp-hero__stats {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	gap: 12px; margin: 30px 0 0; padding: 0;
}
.gp-hero__stat {
	display: flex; flex-direction: column-reverse; gap: 2px;
	background: var(--gp-card); border: 1px solid var(--gp-border);
	border-radius: var(--gp-radius-card); padding: 18px 12px;
	box-shadow: 0 10px 50px 0 rgba(26, 46, 85, 0.08);
}
.gp-hero__stat dd {
	margin: 0; font-family: var(--gp-font-heading); font-size: 1.7rem; font-weight: 900; line-height: 1.1;
	background: linear-gradient(135deg, var(--gp-primary), var(--gp-secondary));
	-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--gp-primary);
}
.gp-hero__stat dt { font-size: 0.8rem; color: var(--gp-muted); letter-spacing: 0.02em; }

/* quick tools tabbed panel (hero) */
.gp-quicktabs {
	max-width: 880px; margin: 32px auto 0; text-align: left;
	background: var(--gp-card); border-radius: 18px;
	box-shadow: 0 20px 50px 0 rgba(26, 46, 85, 0.12); overflow: hidden;
}
.gp-quicktabs__tabs {
	display: flex; overflow-x: auto; scrollbar-width: thin;
	background: color-mix(in srgb, var(--gp-primary) 6%, var(--gp-card));
	border-bottom: 1px solid var(--gp-border);
}
.gp-quicktabs__tab {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 13px 18px; background: transparent; border: 0;
	border-bottom: 2px solid transparent; color: var(--gp-muted);
	font-size: 0.9rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.gp-quicktabs__tab .gp-tool-icon { background: transparent; color: inherit; width: 18px !important; height: 18px !important; }
.gp-quicktabs__tab:hover { color: var(--gp-primary); background: color-mix(in srgb, var(--gp-primary) 8%, transparent); }
.gp-quicktabs__tab.is-active { color: var(--gp-primary); border-bottom-color: var(--gp-primary); background: var(--gp-card); font-weight: 600; }
.gp-quicktabs__panel { display: flex; align-items: center; gap: 18px; padding: 22px 26px; }
.gp-quicktabs__panel[hidden] { display: none; }
.gp-quicktabs__icon {
	width: 64px; height: 64px; border-radius: 16px; flex-shrink: 0;
	display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
	background: color-mix(in srgb, var(--gp-primary) 12%, transparent); color: var(--gp-primary);
}
.gp-quicktabs__icon .gp-tool-icon { background: transparent; width: 55% !important; height: 55% !important; }
.gp-quicktabs__body { min-width: 0; flex: 1; }
.gp-quicktabs__name { margin: 0 0 4px; font-family: var(--gp-font-heading); font-size: 1.15rem; color: var(--gp-text); }
.gp-quicktabs__desc { margin: 0; color: var(--gp-muted); font-size: 0.92rem; }
.gp-quicktabs__open { flex-shrink: 0; }
.gp-quicktabs__open .gp-icon { width: 16px; height: 16px; }

.gp-home-section { padding: 34px 0 6px; }
.gp-home-section__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.gp-home-section__title { display: flex; align-items: center; gap: 10px; font-family: var(--gp-font-heading); font-size: 1.35rem; margin: 0; color: var(--gp-text); }
.gp-home-section__title .gp-icon {
	width: 34px; height: 34px; padding: 8px; box-sizing: border-box;
	color: #fff; background: linear-gradient(135deg, var(--gp-primary), color-mix(in srgb, var(--gp-primary) 60%, var(--gp-secondary)));
	border-radius: 10px; box-shadow: 0 10px 30px 0 color-mix(in srgb, var(--gp-primary) 30%, transparent);
}
.gp-home-section__title { font-weight: 800; letter-spacing: -0.3px; }
.gp-home-section__more { display: inline-flex; align-items: center; gap: 4px; color: var(--gp-primary); text-decoration: none; font-size: 0.9rem; font-weight: 600; }
.gp-home-section__more .gp-icon { width: 15px; height: 15px; }

.gp-cats { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.gp-cat-card {
	display: flex; flex-direction: column; gap: 4px; padding: 16px;
	background: var(--gp-card); border: 1px solid var(--gp-border); border-radius: var(--gp-radius-card);
	text-decoration: none; transition: border-color 0.15s ease, transform 0.15s ease;
}
.gp-cat-card:hover { border-color: var(--gp-primary); transform: translateY(-2px); }
.gp-cat-card__name { font-weight: 600; color: var(--gp-text); }
.gp-cat-card__count { color: var(--gp-muted); font-size: 0.8rem; }

.gp-posts { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.gp-post-card { background: var(--gp-card); border: 1px solid var(--gp-border); border-radius: var(--gp-radius-card); overflow: hidden; }
.gp-post-card__thumb img { width: 100%; height: 150px; object-fit: cover; display: block; aspect-ratio: 3 / 2; }
.gp-post-card__body { padding: 16px; }
.gp-post-card__title { margin: 0 0 6px; font-size: 1rem; line-height: 1.35; }
.gp-post-card__title a { color: var(--gp-text); text-decoration: none; }
.gp-post-card__title a:hover { color: var(--gp-primary); }
.gp-post-card__meta { color: var(--gp-muted); font-size: 0.8rem; margin: 0 0 6px; }
.gp-post-card__excerpt { color: var(--gp-muted); font-size: 0.88rem; margin: 0; }
.gp-post-card--row { display: block; }
.gp-content-title { font-family: var(--gp-font-heading); }

.gp-cta {
	background: linear-gradient(135deg, var(--gp-primary), var(--gp-secondary));
	color: #fff; border-radius: var(--gp-radius-card); text-align: center; padding: 40px 24px;
}
.gp-cta__title { margin: 0 0 8px; font-size: 1.5rem; }
.gp-cta__text { margin: 0 auto 18px; opacity: 0.92; max-width: 52ch; }

/* footer: EduBlink dark band */
.gp-tools-child .site-footer,
.gp-tools-child .site-info { background: var(--gp-footer-bg, #231f40); }
.gp-tools-child .site-info,
.gp-tools-child .site-info a { color: var(--gp-footer-text, rgba(255, 255, 255, 0.78)); }
.gp-tools-child .site-info a:hover { color: #fff; }
.gp-tools-child .site-info { padding: 26px 0; font-size: 0.92rem; }

/* content headings: love-page divider style (Playfair-style display h2) */
.gp-tools-child .entry-content h2,
.gp-tools-child .comment-content h2 {
	font-family: var(--gp-font-heading); font-weight: 800; line-height: 1.3;
	letter-spacing: -0.4px; margin: 44px 0 16px; padding-top: 16px;
	border-top: 2px solid color-mix(in srgb, var(--gp-primary) 12%, transparent);
}
.gp-tools-child .entry-content h3 { font-family: var(--gp-font-heading); font-weight: 700; letter-spacing: -0.2px; }
.gp-tools-child .entry-content h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }

/* 404 */
.gp-404 { text-align: center; padding: 40px 0; }
.gp-404__code {
	font-family: var(--gp-font-heading); font-size: clamp(4rem, 14vw, 7rem);
	margin: 0; font-weight: 800; line-height: 1;
	background: linear-gradient(135deg, var(--gp-primary), var(--gp-secondary));
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.gp-404__title { font-size: 1.4rem; margin: 8px 0; }
.gp-404__desc { color: var(--gp-muted); margin: 0 0 22px; }
.gp-404__popular { margin-top: 36px; text-align: left; }
.gp-404__popular-title { font-size: 1.1rem; margin-bottom: 14px; }

/* page hero (search/favorites/category pages) */
.gp-page-hero { margin: 10px 0 18px; }
.gp-page-hero__title { font-family: var(--gp-font-heading); font-size: clamp(1.4rem, 3vw, 2rem); margin: 0 0 6px; }
.gp-page-hero__desc { color: var(--gp-muted); margin: 0; }
.gp-page-hero__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.gp-page-hero__fav {
	flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
	width: 42px; height: 42px; border-radius: 999px; cursor: pointer;
	background: var(--gp-card); border: 1px solid var(--gp-border); color: var(--gp-muted);
	transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease, transform 0.15s ease;
}
.gp-page-hero__fav .gp-icon { width: 19px; height: 19px; }
.gp-page-hero__fav:hover { color: var(--gp-danger); border-color: color-mix(in srgb, var(--gp-danger) 40%, var(--gp-border)); transform: translateY(-1px); }
.gp-page-hero__fav.is-active { color: #fff; background: var(--gp-danger); border-color: var(--gp-danger); }
html[data-gp-theme="dark"] .gp-page-hero__fav { background: color-mix(in srgb, var(--gp-primary) 6%, var(--gp-card)); }
.gp-page-hero__count {
	flex-shrink: 0; padding: 6px 14px; border-radius: 999px; font-size: 0.85rem; font-weight: 700;
	background: color-mix(in srgb, var(--gp-primary) 10%, transparent); color: var(--gp-primary);
}
.gp-page-hero__chips { margin-top: 14px; }

/* favorites page */
.gp-favorites-page__empty { text-align: center; padding: 40px 20px; background: var(--gp-card); border: 1px dashed var(--gp-border); border-radius: var(--gp-radius-card); }
.gp-favorites-page__status { min-height: 1.2em; margin-bottom: 10px; color: var(--gp-muted); }

/* --------------------------------------------------------------- drawer */
.gp-drawer { position: fixed; inset: 0; z-index: 1100; }
.gp-drawer__overlay { position: absolute; inset: 0; background: rgba(35, 31, 64, 0.5); opacity: 0; transition: opacity 0.22s ease; }
.gp-drawer.is-open .gp-drawer__overlay { opacity: 1; }
.gp-drawer__panel {
	position: absolute; top: 0; left: 0; bottom: 0; width: min(340px, 86vw);
	background: var(--gp-card); display: flex; flex-direction: column;
	border-radius: 0 16px 16px 0;
	transform: translateX(-104%); transition: transform 0.26s cubic-bezier(0.25, 0.8, 0.35, 1);
	box-shadow: 0 10px 50px 0 rgba(35, 31, 64, 0.25);
	overflow-y: auto; overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding-bottom: env(safe-area-inset-bottom, 0);
}
.gp-drawer.is-open .gp-drawer__panel { transform: translateX(0); }
.gp-drawer__head {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 16px 18px; border-bottom: 2px solid color-mix(in srgb, var(--gp-primary) 25%, transparent);
	position: sticky; top: 0; background: var(--gp-card); z-index: 2;
}
.gp-drawer__brand { font-family: var(--gp-font-heading); font-weight: 700; color: var(--gp-text); }
/* R19: reset the parent theme's button paint (its customizer button
   colours/gradients used to fill these round icon buttons). */
.gp-drawer__close,
.gp-search-modal__close,
.gp-design-panel__close,
.gp-suggest-panel__close,
.gp-keys-modal__close,
.gp-fs-bar__close {
	appearance: none; -webkit-appearance: none;
	background: none !important; background-image: none !important;
	border: 0 !important; box-shadow: none !important; text-shadow: none;
}
.gp-drawer__close {
	background: none; border: 0; cursor: pointer; color: var(--gp-muted);
	padding: 8px; border-radius: 8px; display: inline-flex; min-width: 40px; min-height: 40px; align-items: center; justify-content: center;
}
.gp-drawer__close:hover { background: rgba(128, 128, 128, 0.12); color: var(--gp-text); }
/* R19: the parent theme's button colour used to win and leave the × white
   (invisible on the light panel). Outrank it; per-design overrides below
   still win because they come later with equal specificity. */
body.gp-tools-child button.gp-drawer__close,
body.gp-tools-child button.gp-search-modal__close,
body.gp-tools-child button.gp-design-panel__close,
body.gp-tools-child button.gp-suggest-panel__close,
body.gp-tools-child button.gp-keys-modal__close,
body.gp-tools-child button.gp-fs-bar__close { color: var(--gp-muted); }
.gp-drawer__nav { padding: 10px 12px; }
.gp-drawer-menu__list { list-style: none; margin: 0; padding: 0; }
.gp-drawer-menu__list li + li { margin-top: 0; }
.gp-drawer-menu__list a,
.gp-drawer-menu__button {
	display: flex; align-items: center; gap: 14px; width: 100%;
	padding: 13px 18px; border-radius: 8px; color: var(--gp-text);
	text-decoration: none; font-size: 0.95rem; font-weight: 600; background: none; border: 0; cursor: pointer; text-align: left;
	transition: color 0.3s ease, background 0.3s ease;
}
.gp-drawer-menu__list a:hover, .gp-drawer-menu__button:hover { background: color-mix(in srgb, var(--gp-primary) 7%, transparent); color: var(--gp-primary); }
.gp-drawer-menu__list a:active { background: color-mix(in srgb, var(--gp-primary) 12%, transparent); }
.gp-drawer-menu__list .gp-icon { width: 20px; height: 20px; color: var(--gp-primary); }
.gp-drawer-menu__count { margin-left: auto; font-size: 0.78rem; font-weight: 500; color: var(--gp-muted); }
.gp-drawer__section { border-top: 1px solid var(--gp-bg); margin-top: 6px; padding-top: 10px; }
.gp-drawer__section-title {
	font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
	color: var(--gp-muted); margin: 0; padding: 10px 18px 6px;
}
.gp-drawer-menu__empty { color: var(--gp-muted); font-size: 0.85rem; padding: 4px 12px; display: block; }
.gp-drawer-lang { padding: 8px 18px 12px; }
.gp-drawer-lang__btns { display: flex; gap: 8px; flex-wrap: wrap; }
html[data-gp-lang="en"] .gp-drawer-lang [data-gp-lang-switch="en"],
html[data-gp-lang="hi"] .gp-drawer-lang [data-gp-lang-switch="hi"] {
	background: var(--gp-primary); border-color: var(--gp-primary); color: #fff;
}
.gp-drawer__section { padding: 6px 12px 14px; border-top: 1px solid var(--gp-border); }
.gp-drawer__section-title {
	font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em;
	color: var(--gp-muted); margin: 10px 12px 6px;
}

/* ---------------------------------------------------------- search modal */
.gp-search-modal { position: fixed; inset: 0; z-index: 1150; }
.gp-search-modal__overlay { position: absolute; inset: 0; background: rgba(17, 24, 39, 0.6); opacity: 0; transition: opacity 0.2s ease; backdrop-filter: blur(2px); }
.gp-search-modal.is-open .gp-search-modal__overlay { opacity: 1; }
.gp-search-modal__panel {
	position: relative; max-width: 640px; margin: 7vh auto 0; width: calc(100% - 32px);
	background: var(--gp-card); border-radius: 24px; box-shadow: 0 4px 8px 3px rgba(60, 64, 67, 0.15), 0 1px 3px rgba(60, 64, 67, 0.3);
	display: flex; flex-direction: column; max-height: 76vh; overflow: hidden;
	transform: translateY(-12px) scale(0.985); opacity: 0; transition: transform 0.2s ease, opacity 0.2s ease;
}
.gp-search-modal.is-open .gp-search-modal__panel { transform: none; opacity: 1; }
.gp-search-modal__head { display: flex; align-items: center; gap: 8px; padding: 12px 12px 12px 16px; border-bottom: 1px solid var(--gp-border); }
.gp-search-modal__inputwrap { display: flex; align-items: center; gap: 10px; flex: 1; color: var(--gp-muted); }
.gp-search-modal__inputwrap .gp-icon { width: 19px; height: 19px; }
.gp-search-modal__input {
	flex: 1; border: 0 !important; outline: none; background: transparent;
	color: var(--gp-text); font-size: 1.05rem; padding: 8px 0;
}
.gp-search-modal__kbd { border: 1px solid var(--gp-border); border-radius: 6px; padding: 2px 7px; font-size: 0.7rem; color: var(--gp-muted); }
.gp-search-modal__close { background: none; border: 0; color: var(--gp-muted); cursor: pointer; padding: 8px; border-radius: 8px; display: inline-flex; min-width: 40px; min-height: 40px; align-items: center; justify-content: center; }
.gp-search-modal__close:hover { background: rgba(128, 128, 128, 0.12); color: var(--gp-text); }
.gp-search-modal__body { overflow-y: auto; padding: 14px 16px 18px; overscroll-behavior: contain; }
.gp-search-modal__section { margin-bottom: 18px; }
.gp-search-modal__section-title { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gp-muted); margin: 0 0 8px; }
.gp-search-item {
	display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px;
	color: var(--gp-text); text-decoration: none;
}
.gp-search-item:hover, .gp-search-item.is-active { background: color-mix(in srgb, var(--gp-primary) 8%, transparent); }
.gp-search-item__icon { width: 36px !important; height: 36px !important; }
.gp-search-item__body { min-width: 0; display: grid; }
.gp-search-item__title { font-weight: 600; font-size: 0.93rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-search-item__title mark { background: color-mix(in srgb, var(--gp-accent) 40%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.gp-search-item__cat { color: var(--gp-muted); font-size: 0.78rem; }
.gp-search-modal__status { color: var(--gp-muted); font-size: 0.85rem; padding: 4px 2px 8px; }
.gp-search-modal__all { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; color: var(--gp-primary); font-weight: 600; text-decoration: none; font-size: 0.9rem; }
.gp-search-modal__all .gp-icon { width: 14px; height: 14px; }
.gp-search-modal--fullscreen .gp-search-modal__panel { max-width: 100%; margin: 0; max-height: 100%; height: 100%; border-radius: 0; }

/* loading skeleton */
.gp-skeleton {
	border-radius: var(--gp-radius-card);
	background: linear-gradient(90deg, var(--gp-border) 25%, color-mix(in srgb, var(--gp-border) 55%, var(--gp-card)) 50%, var(--gp-border) 75%);
	background-size: 200% 100%; animation: gp-shimmer 1.3s infinite linear; min-height: 140px;
}
.gp-skeleton--card { height: 160px; }
@keyframes gp-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* toasts */
.gp-toasts {
	position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
	z-index: 1300; display: flex; flex-direction: column; gap: 8px; align-items: center;
	pointer-events: none; width: max-content; max-width: calc(100vw - 32px);
}
.gp-toast {
	background: #111827; color: #fff; border-radius: 10px; padding: 10px 18px;
	font-size: 0.9rem; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
	display: inline-flex; align-items: center; gap: 8px;
	opacity: 0; transform: translateY(8px);
	transition: opacity 0.22s ease, transform 0.22s ease;
}
.gp-toast.is-visible { opacity: 1; transform: translateY(0); }
.gp-toast .gp-icon { width: 15px; height: 15px; color: var(--gp-success); }

/* mobile result bar (desktop-hidden; mobile.css shows it) */
.gp-result-bar { display: none; }

/* content links */
.gp-tools-child .entry-content a:not([class]),
.gp-tools-child .comment-content a:not([class]) { color: var(--gp-link, #1ab69d); }

/* misc */
.gp-notice { background: var(--gp-card); border: 1px solid var(--gp-warning); border-radius: 10px; padding: 14px 16px; color: var(--gp-text); }
.gp-tools-child .gp-breadcrumbs a, .gp-tools-child .gp-tool-card a, .gp-tools-child .gp-search-item { text-decoration: none; }

/* responsive visibility for header actions (aligned with GP's 768px mobile-menu breakpoint) */
@media (max-width: 768px) {
	.gp-hide-mobile { display: none !important; }
	/* mobile search keeps the intentional full-screen panel design (see below) */
	.gp-search-modal__kbd { display: none; }
}
@media (min-width: 769px) {
	.gp-hide-desktop { display: none !important; }
}

/* --------------------------------------------------------- page hero */
.gp-page-hero {
	position: relative;
	background: transparent; border: 0; box-shadow: none;
	padding: 10px 0 0; margin: 8px 0 6px;
}
.gp-page-hero .gp-breadcrumbs { margin: 0 0 10px; }
.gp-page-hero__row .gp-page-hero__title { flex: 1 1 auto; min-width: 0; }
.gp-page-hero__title {
	margin: 0; font-family: var(--gp-font-heading);
	font-size: clamp(1.45rem, 1.1rem + 1.6vw, 2rem);
	font-weight: 800; letter-spacing: -0.5px; line-height: 1.25;
	color: var(--gp-text); word-wrap: break-word;
	padding-bottom: 12px; margin-bottom: 14px; position: relative;
}
.gp-page-hero__title::after {
	content: ""; position: absolute; left: 0; bottom: 0; width: 72px; height: 4px;
	border-radius: 2px; background: linear-gradient(135deg, var(--gp-primary), var(--gp-secondary));
}
.gp-page-hero__meta {
	display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px;
	margin-top: 12px; font-size: 0.88rem; color: var(--gp-muted);
}
.gp-page-hero__meta-item {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 5px 12px; border: 1px solid var(--gp-border);
	border-radius: 999px; background: var(--gp-card); font-weight: 500;
}
.gp-page-hero__meta-item .gp-icon { width: 15px; height: 15px; }
.gp-page-hero__meta-item a { color: inherit; text-decoration: none; }
.gp-page-hero__meta-item a:hover { color: var(--gp-primary); }
/* hero replaces the plain GP entry header — hide it when active */
.gp-has-page-hero .entry-header { display: none; }
/* explicit title hiding (setting / per-page metabox) — filter handles GP; this catches the rest */
.gp-hide-entry-title .entry-header,
.gp-hide-entry-title .entry-title { display: none; }

/* -------------------------------------------------------------- dark mode */
/* html prefix raises specificity above the inline :root token block,
   so dark values always win regardless of source order. */
html[data-gp-theme="dark"] {
	--gp-bg: #0b1020;
	--gp-card: #131a2e;
	--gp-text: #e5e9f4;
	--gp-muted: #98a2b8;
	--gp-border: #263049;
}
html[data-gp-theme="dark"] .gp-hero { background: var(--gp-card); }
html[data-gp-theme="dark"] .gp-hero__search { box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); }
html[data-gp-theme="dark"] .gp-toolbar,
html[data-gp-theme="dark"] .gp-tool,
html[data-gp-theme="dark"] .gp-drawer__panel,
html[data-gp-theme="dark"] .gp-search-modal__panel { color: var(--gp-text); }
html[data-gp-theme="dark"] .gp-hero__search kbd { color: var(--gp-muted); }
html[data-gp-theme="dark"] .gp-toast { background: #e5e9f4; color: #111827; }
html[data-gp-theme="dark"] .gp-hero__search { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); }
html[data-gp-theme="dark"] .gp-skeleton {
	background: linear-gradient(90deg, #1c2540 25%, #263049 50%, #1c2540 75%);
	background-size: 200% 100%;
}
/* dark mode also flips GeneratePress surfaces (scoped to GP's own classes) */
html[data-gp-theme="dark"] body { background-color: var(--gp-bg); color: var(--gp-text); }
html[data-gp-theme="dark"] .gp-tools-child .site-header,
html[data-gp-theme="dark"] .site-header,
html[data-gp-theme="dark"] .separate-containers .inside-article,
html[data-gp-theme="dark"] .separate-containers .comments-area,
html[data-gp-theme="dark"] .separate-containers .page-header,
html[data-gp-theme="dark"] .widget-area .widget { background-color: var(--gp-card); }
html[data-gp-theme="dark"] .site-info { background-color: var(--gp-bg); color: var(--gp-muted); }
html[data-gp-theme="dark"] .entry-title,
html[data-gp-theme="dark"] .widget-title,
html[data-gp-theme="dark"] .main-navigation .main-nav ul li a { color: var(--gp-text); }
html[data-gp-theme="dark"] .main-navigation .main-nav ul li[class*="current-menu-"] > a { color: color-mix(in srgb, var(--gp-secondary) 60%, #fff); }
html[data-gp-theme="dark"] a:not([class]) { color: color-mix(in srgb, var(--gp-secondary) 65%, #fff); }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1280px) {
	.gp-grid { grid-template-columns: repeat(min(var(--gp-cols-desktop, 4), 4), minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
	.gp-grid { grid-template-columns: repeat(min(var(--gp-cols-tablet, 3), 3), minmax(0, 1fr)); }
	.gp-search-modal__panel { margin-top: 4vh; }
}
@media (max-width: 768px) {
	.gp-tool-hero { flex-direction: column; }
	.gp-tool-hero__actions { width: 100%; }
}
@media (max-width: 768px) {
	.gp-grid { grid-template-columns: repeat(var(--gp-cols-mobile, 2), minmax(0, 1fr)); gap: 12px; }
	.gp-tool-card__link { padding: 14px; gap: 10px; }
	.gp-tool-card__desc { display: none; }
	.gp-tool-section { padding: 18px 16px; }
	.gp-hero { padding: 44px 0 40px; }
	.gp-tool-nav { grid-template-columns: 1fr auto; }
	.gp-tool-nav__link--prev span, .gp-tool-nav__link--next span { max-width: 130px; }
	.gp-search-modal__panel { margin: 0; max-width: 100%; width: 100%; max-height: 100%; height: 100%; border-radius: 0; }
}
@media (max-width: 420px) {
	.gp-container { padding: 0 14px; }
	.gp-grid { grid-template-columns: 1fr 1fr; }
	.gp-action-btn__label { display: none; }
	.gp-action-btn { padding: 10px; }
	.gp-hero__search kbd { display: none; }
	.gp-cats { grid-template-columns: 1fr 1fr; }
}

/* -------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
	.gp-tools-child *,
	.gp-tools-child *::before,
	.gp-tools-child *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* --------------------------------------------------------- forced dark mode
   Admin lock: html[data-gp-force-dark]. The dark surfaces come from the
   normal html[data-gp-theme="dark"] rules (bootstrap forces them). What is
   added here is readability for CUSTOM calculator code. */
html[data-gp-force-dark="invert"] .entry-content {
	filter: invert(1) hue-rotate(180deg);
	background: #fff; /* invert turns this into a dark surface */
	border-color: #e5e7eb;
}
html[data-gp-force-dark="invert"] .entry-content img,
html[data-gp-force-dark="invert"] .entry-content video,
html[data-gp-force-dark="invert"] .entry-content iframe,
html[data-gp-force-dark="invert"] .entry-content embed,
html[data-gp-force-dark="invert"] .entry-content object,
html[data-gp-force-dark="invert"] .entry-content [data-gp-no-invert],
html[data-gp-force-dark="invert"] .entry-content .wp-block-image,
html[data-gp-force-dark="invert"] .entry-content .wp-block-embed {
	filter: invert(1) hue-rotate(180deg); /* flip media back to true colours */
}
html[data-gp-force-dark] .gp-tool-hero,
html[data-gp-force-dark] .gp-breadcrumbs-bar { filter: none; }

/* -------------------------------------------------- home: full-bleed hero (cascade winner)
   The hero background escapes the page column to the true viewport edges. */
.gp-home-main .gp-hero {
	width: 100vw;
	max-width: none;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* Home column: claim the full GP container inside the flex .site-content. */
.site-content > .gp-home-main {
	flex: 1 1 100%;
	width: 100%;
	max-width: 100%;
}

/* ============================================================ v1.12: style presets ============================================================ */

/* ---- E. Centre the directory title + search ---- */
.gp-directory--center .gp-directory__head { text-align: center; }
.gp-directory--center .gp-directory__head .gp-chips { justify-content: center; flex-wrap: wrap; }
.gp-directory--center .gp-directory__controls { justify-content: center; margin-left: auto; margin-right: auto; max-width: 640px; }
.gp-directory--center .gp-searchfield { flex: 1 1 260px; }

/* ---- F. Tool display designs (data-gp-card-style on wrapper) ---- */
[data-gp-card-style="nameonly"] .gp-tool-card { background: transparent; border: 0; box-shadow: none; border-radius: 0; }
[data-gp-card-style="nameonly"] .gp-grid { display: flex; flex-direction: column; gap: 0; }
[data-gp-card-style="nameonly"] .gp-tool-card .gp-tool-card__link { padding: 9px 6px; border-bottom: 1px solid var(--gp-border); }
[data-gp-card-style="nameonly"] .gp-tool-card__icon,
[data-gp-card-style="nameonly"] .gp-tool-card__fav,
[data-gp-card-style="nameonly"] .gp-tool-card__desc,
[data-gp-card-style="nameonly"] .gp-tool-card__foot { display: none; }
[data-gp-card-style="nameonly"] .gp-tool-card__title { font-weight: 600; font-size: 0.95rem; }

[data-gp-card-style="iconname"] .gp-tool-card { background: transparent; border: 0; box-shadow: none; }
[data-gp-card-style="iconname"] .gp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
[data-gp-card-style="iconname"] .gp-tool-card .gp-tool-card__link { flex-direction: row; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--gp-border); border-radius: 12px; background: var(--gp-card); }
[data-gp-card-style="iconname"] .gp-tool-card__icon { width: 30px !important; height: 30px !important; }
[data-gp-card-style="iconname"] .gp-tool-card__desc,
[data-gp-card-style="iconname"] .gp-tool-card__foot,
[data-gp-card-style="iconname"] .gp-tool-card__fav { display: none; }
[data-gp-card-style="iconname"] .gp-tool-card__title { font-size: 0.9rem; font-weight: 600; }

[data-gp-card-style="compact"] .gp-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
[data-gp-card-style="compact"] .gp-tool-card__desc,
[data-gp-card-style="compact"] .gp-tool-card__foot { display: none; }
[data-gp-card-style="compact"] .gp-tool-card .gp-tool-card__link { flex-direction: row; align-items: center; padding: 12px; }

[data-gp-card-style="detailed"] .gp-tool-card { border-radius: 18px; }
[data-gp-card-style="detailed"] .gp-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
[data-gp-card-style="detailed"] .gp-tool-card__icon { width: 52px !important; height: 52px !important; }
[data-gp-card-style="detailed"] .gp-tool-card__title { font-size: 1.08rem; }

[data-gp-card-style="pill"] .gp-grid { display: flex; flex-wrap: wrap; gap: 10px; }
[data-gp-card-style="pill"] .gp-tool-card {
	display: inline-flex; width: auto; border-radius: 999px; border: 1px solid var(--gp-border);
	background: var(--gp-card); box-shadow: none; overflow: visible;
}
[data-gp-card-style="pill"] .gp-tool-card .gp-tool-card__link { flex-direction: row; align-items: center; gap: 8px; padding: 7px 16px; }
[data-gp-card-style="pill"] .gp-tool-card__icon { width: 22px !important; height: 22px !important; }
[data-gp-card-style="pill"] .gp-tool-card__desc,
[data-gp-card-style="pill"] .gp-tool-card__foot,
[data-gp-card-style="pill"] .gp-tool-card__fav { display: none; }
[data-gp-card-style="pill"] .gp-tool-card__title { font-size: 0.88rem; font-weight: 600; }

[data-gp-card-style="banner"] .gp-grid { grid-template-columns: 1fr; gap: 12px; }
[data-gp-card-style="banner"] .gp-tool-card { border-left: 5px solid var(--gp-primary); border-radius: 12px; }
[data-gp-card-style="banner"] .gp-tool-card .gp-tool-card__link { flex-direction: row; align-items: center; gap: 14px; padding: 14px 16px; }

[data-gp-card-style="tile"] .gp-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
[data-gp-card-style="tile"] .gp-tool-card { text-align: center; }
[data-gp-card-style="tile"] .gp-tool-card .gp-tool-card__link { flex-direction: column; align-items: center; gap: 8px; padding: 18px 10px 12px; }
[data-gp-card-style="tile"] .gp-tool-card__icon { width: 44px !important; height: 44px !important; }
[data-gp-card-style="tile"] .gp-tool-card__desc,
[data-gp-card-style="tile"] .gp-tool-card__foot { display: none; }
[data-gp-card-style="tile"] .gp-tool-card__title { font-size: 0.85rem; font-weight: 600; }

[data-gp-card-style="rows"] .gp-grid { grid-template-columns: 1fr; gap: 0; }
[data-gp-card-style="rows"] .gp-tool-card { background: transparent; border: 0; border-bottom: 1px solid var(--gp-border); border-radius: 0; box-shadow: none; }
[data-gp-card-style="rows"] .gp-tool-card .gp-tool-card__link { flex-direction: row; align-items: center; gap: 12px; padding: 12px 6px; }
[data-gp-card-style="rows"] .gp-tool-card__desc { display: none; }
[data-gp-card-style="rows"] .gp-tool-card__title { font-size: 0.95rem; }

[data-gp-card-style="float"] .gp-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 20px; }
[data-gp-card-style="float"] .gp-tool-card { border: 0; box-shadow: 0 12px 32px rgba(17, 24, 39, 0.14); border-radius: 20px; }
[data-gp-card-style="float"] .gp-tool-card:hover { transform: translateY(-4px); }
[data-gp-card-style="float"] .gp-tool-card .gp-tool-card__link { padding: 16px; }

/* ---- G. Slide menu designs (body class) ---- */
body.gp-drawer-overlay .gp-drawer__panel { background: #0f172a; color: #e2e8f0; }
body.gp-drawer-overlay .gp-drawer__brand { color: #fff; }
body.gp-drawer-overlay .gp-drawer-menu__list a { color: #cbd5e1; }
body.gp-drawer-overlay .gp-drawer-menu__list a:hover { background: rgba(255,255,255,0.06); color: #fff; }

body.gp-drawer-gradient .gp-drawer__panel { background: linear-gradient(160deg, var(--gp-primary), var(--gp-secondary)); color: #fff; }
body.gp-drawer-gradient .gp-drawer__brand { color: #fff; }
body.gp-drawer-gradient .gp-drawer__close { color: #fff; }
body.gp-drawer-gradient .gp-drawer-menu__list a { color: rgba(255,255,255,0.92); border-color: rgba(255,255,255,0.14); }
body.gp-drawer-gradient .gp-drawer-menu__list a:hover { background: rgba(255,255,255,0.12); color: #fff; }

body.gp-drawer-glass .gp-drawer__panel { background: color-mix(in srgb, var(--gp-card) 72%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
body.gp-drawer-glass .gp-drawer__overlay { background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(2px); }

body.gp-drawer-rounded .gp-drawer__panel { top: 12px; bottom: 12px; left: 12px; border-radius: 22px; transform: translateX(calc(-100% - 24px)); }
body.gp-drawer-rounded .gp-drawer.is-open .gp-drawer__panel { transform: translateX(0); }

body.gp-drawer-bordered .gp-drawer-menu__list a { border: 1px solid var(--gp-border); border-radius: 12px; margin: 6px 10px; }
body.gp-drawer-bordered .gp-drawer-menu__list a:hover { border-color: var(--gp-primary); }

body.gp-drawer-minimal .gp-drawer__panel { box-shadow: none; border-right: 1px solid var(--gp-border); }
body.gp-drawer-minimal .gp-drawer-menu__list a { border: 0; font-weight: 500; }

body.gp-drawer-full .gp-drawer__panel { width: 100%; max-width: none; transform: translateY(-100%); top: 0; bottom: 0; left: 0; }
body.gp-drawer-full .gp-drawer.is-open .gp-drawer__panel { transform: translateY(0); }
body.gp-drawer-full .gp-drawer__nav { max-width: 640px; margin: 0 auto; width: 100%; }

body.gp-drawer-bottom .gp-drawer__panel { inset: auto 0 0 0; width: 100%; max-width: none; max-height: 78vh; border-radius: 22px 22px 0 0; transform: translateY(100%); }
body.gp-drawer-bottom .gp-drawer.is-open .gp-drawer__panel { transform: translateY(0); }

body.gp-drawer-pills .gp-drawer-menu__list a {
	display: inline-flex; margin: 5px 8px; border-radius: 999px; background: color-mix(in srgb, var(--gp-primary) 8%, transparent);
	border: 1px solid transparent; padding: 9px 16px; width: auto;
}
body.gp-drawer-pills .gp-drawer__nav ul { display: flex; flex-wrap: wrap; padding: 4px 10px; }
body.gp-drawer-pills .gp-drawer-menu__list a:hover { background: color-mix(in srgb, var(--gp-primary) 16%, transparent); }

/* ---- H. Page content designs (body class) ---- */
body.gp-page-style-card .inside-article { border: 1px solid var(--gp-border); border-radius: 16px; box-shadow: var(--gp-shadow); padding: 28px 30px; background: var(--gp-card); }
body.gp-page-style-outline .inside-article { border: 2px solid color-mix(in srgb, var(--gp-primary) 40%, var(--gp-border)); border-radius: 16px; background: transparent; }
body.gp-page-style-shadow .inside-article { border: 0; box-shadow: 0 18px 50px rgba(17, 24, 39, 0.16); border-radius: 20px; padding: 30px; }
body.gp-page-style-edge .inside-article { border: 1px solid var(--gp-border); border-radius: 14px; position: relative; overflow: hidden; padding-top: 30px; }
body.gp-page-style-edge .inside-article::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, var(--gp-primary), var(--gp-secondary)); }
body.gp-page-style-narrow .gp-tools-child .entry-content { max-width: 660px; margin-left: auto; margin-right: auto; text-align: left; }
body.gp-page-style-wide .gp-tools-child .entry-content { max-width: none; }
body.gp-page-style-paper .inside-article { background: repeating-linear-gradient(0deg, var(--gp-card) 0 28px, color-mix(in srgb, var(--gp-primary) 3%, var(--gp-card)) 28px 29px); border: 1px solid var(--gp-border); }
body.gp-page-style-panel .inside-article { background: #10182b; color: #dbe2f1; border-radius: 18px; }
body.gp-page-style-panel .inside-article a { color: #7dd3fc; }
body.gp-page-style-panel .gp-page-hero__title { color: #fff; }
body.gp-page-style-accent .gp-tools-child .entry-content > h2:first-child,
body.gp-page-style-accent .gp-page-hero__title { box-shadow: inset 0 -3px 0 var(--gp-primary); padding-bottom: 8px; }

/* Admin bar badge (logged-in) */
#wpadminbar .gp-ab-badge { display: inline-block; min-width: 17px; padding: 1px 5px; border-radius: 999px; background: #ee4a62; color: #fff; font-size: 10.5px; font-weight: 700; text-align: center; }

/* ---- Print stylesheet: paper gets the tool, nothing else ---- */
@media print {
	.site-header, .gp-bottom-nav, .gp-drawer, .gp-announce, .gp-breadcrumbs-bar,
	.gp-tool-hero__actions, .gp-toolbar, .gp-back-to-top, .gp-header-links,
	.site-footer, .widget-area, .gp-related, .gp-tool-nav, .gp-header-actions,
	.gp-fs-bar, #wpadminbar { display: none !important; }
	.gp-tool-hero, .inside-article { box-shadow: none !important; border: 0 !important; background: #fff !important; }
	body { background: #fff !important; color: #000 !important; }
	.gp-tool-hero__title { color: #000 !important; }
	a { text-decoration: none !important; color: #000 !important; }
}

/* ---- v1.12 feature styles ---- */
.gp-keys-modal { position: fixed; inset: 0; z-index: 100000; background: rgba(15, 23, 42, 0.5); display: flex; align-items: center; justify-content: center; padding: 16px; }
.gp-keys-modal[hidden] { display: none; }
.gp-keys-modal__panel { background: var(--gp-card); border: 1px solid var(--gp-border); border-radius: 16px; box-shadow: 0 18px 60px rgba(15,23,42,.3); padding: 18px 20px; width: 340px; max-width: 100%; }
.gp-keys-modal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.gp-keys-modal__close { background: none; border: 0; cursor: pointer; color: var(--gp-muted); display: inline-flex; padding: 4px; }
.gp-keys-modal table { width: 100%; border-collapse: collapse; }
.gp-keys-modal td { padding: 7px 4px; font-size: 0.88rem; color: var(--gp-text); border-bottom: 1px solid var(--gp-border); }
.gp-keys-modal kbd { background: var(--gp-bg); border: 1px solid var(--gp-border); border-bottom-width: 2px; border-radius: 6px; padding: 2px 8px; font-family: inherit; font-size: 0.8rem; font-weight: 700; color: var(--gp-text); }

.gp-install-banner {
	position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(74px + env(safe-area-inset-bottom, 0px) + 10px);
	z-index: 99990; display: flex; align-items: center; gap: 10px;
	background: var(--gp-card); border: 1px solid var(--gp-border); border-radius: 999px;
	box-shadow: 0 10px 34px rgba(15,23,42,.25); padding: 8px 10px 8px 18px; font-size: 0.88rem; color: var(--gp-text);
	max-width: calc(100vw - 20px);
}
.gp-install-banner__yes { background: var(--gp-primary); color: #fff; border: 0; border-radius: 999px; padding: 8px 16px; font-weight: 700; cursor: pointer; }
.gp-install-banner__no { background: none; border: 0; color: var(--gp-muted); cursor: pointer; display: inline-flex; padding: 6px; }

.gp-tool-card__views, .gp-tool-hero__views {
	display: inline-flex; align-items: center; gap: 4px; font-size: 0.72rem; font-weight: 700;
	color: var(--gp-muted); background: color-mix(in srgb, var(--gp-primary) 9%, transparent);
	padding: 1px 7px; border-radius: 999px; vertical-align: middle; margin-left: 6px;
}
.gp-tool-hero__views { font-size: 0.8rem; }
.gp-tool-hero__views .gp-icon { width: 14px; height: 14px; }
.gp-tool-card__link[style*="--gp-card-accent"] .gp-tool-card__icon { color: var(--gp-card-accent, var(--gp-primary)); }

.gp-menu-count { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px; background: color-mix(in srgb, var(--gp-primary) 12%, transparent); color: var(--gp-primary); font-size: 0.72rem; font-weight: 700; }

.gp-sc-tools .gp-grid { grid-template-columns: repeat(var(--gp-sc-cols, 3), minmax(0, 1fr)); }
.gp-grid--skeleton .gp-skeleton--card { height: 150px; }

/* Centre the page hero on directory pages too */
.gp-page-hero--center { text-align: center; }
.gp-page-hero--center .gp-page-hero__row { flex-direction: column; align-items: center; gap: 6px; }
.gp-page-hero--center .gp-page-hero__title::after { left: 50%; transform: translateX(-50%); }
.gp-page-hero--center .gp-page-hero__chips { justify-content: center; }

/* ==== language view (Hindi / English) =====================================
   html[data-gp-lang] is set by the switcher (drawer). Blocks marked with
   .lang-en / .lang-hi are hidden for the inactive language; "all" (default)
   shows everything. Elements without a lang class are always visible. */
html[data-gp-lang="en"] .lang-hi { display: none !important; }
html[data-gp-lang="hi"] .lang-en { display: none !important; }

/* ==== R17: no dark tap dot ==============================================
   Browsers paint a grey/dark highlight behind every tap on mobile. Kill it
   globally; keyboard users still get the :focus-visible outline above. */
.gp-tools-child, .gp-tools-child * {
	-webkit-tap-highlight-color: transparent;
}
.gp-tools-child *:focus { outline: none; }
.gp-tools-child *:focus-visible { outline: 2px solid var(--gp-primary); outline-offset: 2px; }
/* Active nav pill must follow the theme, never a fixed light colour. */
.gp-bottomnav__link.is-active .gp-icon { background: color-mix(in srgb, var(--gp-primary) 12%, transparent); }
html[data-gp-theme="dark"] .gp-bottomnav__link.is-active .gp-icon { background: color-mix(in srgb, var(--gp-primary) 22%, transparent); }

/* ==== R17: scrollable header items ====================================== */
.gp-header-scroll .gp-header-actions {
	flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
	-webkit-overflow-scrolling: touch; scrollbar-width: none;
	max-width: 60vw;
}
.gp-header-scroll .gp-header-actions::-webkit-scrollbar { display: none; }
@media (max-width: 768px) {
	.gp-header-scroll .gp-header-actions { max-width: 46vw; }
}

/* ==== R17: below-header scrollable strip ================================ */
.gp-header-strip { background: var(--gp-card); border-bottom: 1px solid var(--gp-border); }
.gp-header-strip__track {
	display: flex; gap: 8px; align-items: center;
	overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
	max-width: var(--gp-width-site, 1280px); margin: 0 auto; padding: 8px 20px;
}
.gp-header-strip__chip {
	flex-shrink: 0; display: inline-flex; align-items: center;
	padding: 6px 14px; border-radius: 999px; border: 1px solid var(--gp-border);
	background: var(--gp-bg); color: var(--gp-text); text-decoration: none;
	font-size: 0.84rem; font-weight: 500; white-space: nowrap;
	transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.gp-header-strip__chip:hover { border-color: var(--gp-primary); color: var(--gp-primary); background: color-mix(in srgb, var(--gp-primary) 6%, var(--gp-bg)); }

/* ==== R17: extra header designs (5–7) =================================== */
/* 5. Floating pill */
.gp-header-pill .site-header {
	background: transparent; border-bottom: 0; box-shadow: none; margin-bottom: -72px;
	z-index: 100; position: relative;
}
.gp-header-pill .site-header .inside-header {
	max-width: var(--gp-width-site, 1280px); margin: 10px auto 0; padding: 8px 20px;
	background: color-mix(in srgb, var(--gp-card) 88%, transparent);
	backdrop-filter: blur(12px); border: 1px solid var(--gp-border); border-radius: 999px;
	box-shadow: 0 8px 30px rgba(17, 24, 39, 0.10);
}
/* 6. Gradient brand bar */
.gp-header-gradient .site-header {
	background: linear-gradient(90deg, var(--gp-primary), var(--gp-secondary));
	border-bottom: 0;
}
.gp-header-gradient .site-header .main-title a,
.gp-header-gradient .site-header .site-description { color: #fff; }
.gp-header-gradient .site-header .gp-header-btn { color: #fff; }
.gp-header-gradient .site-header .gp-header-btn:hover { background: rgba(255, 255, 255, 0.16); }
.gp-header-gradient .site-header .gp-header-btn .gp-icon { color: #fff; }
.gp-header-gradient .gp-header-strip { background: transparent; border-bottom: 1px solid rgba(255,255,255,0.25); }
/* 7. Minimal bordered */
.gp-header-bordered .site-header { border-bottom: 2px solid var(--gp-text); box-shadow: none; }
.gp-header-bordered .inside-header { padding-top: 14px; padding-bottom: 14px; }
.gp-header-bordered .gp-header-btn { border: 1px solid var(--gp-border); border-radius: 10px; }

/* ==== R17: drawer accordion (child categories) ========================== */
.gp-drawer-cat__row { display: flex; align-items: center; gap: 4px; }
.gp-drawer-cat__row > a { flex: 1; }
.gp-drawer-cat__toggle {
	background: none; border: 0; color: var(--gp-muted); cursor: pointer;
	width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
	border-radius: 8px; transition: transform 0.15s ease, color 0.15s ease;
}
.gp-drawer-cat__toggle .gp-icon { width: 15px; height: 15px; }
.gp-drawer-cat__toggle:hover { color: var(--gp-primary); }
.gp-drawer-cat.is-open > .gp-drawer-cat__row .gp-drawer-cat__toggle { transform: rotate(180deg); color: var(--gp-primary); }
.gp-drawer-submenu { list-style: none; margin: 2px 0 4px; padding: 0 0 0 14px; }
.gp-drawer-submenu li > a { font-size: 0.92em; opacity: 0.92; }

/* ==== R17: offline banner =============================================== */
.gp-offline-banner {
	position: fixed; left: 50%; bottom: 16px; transform: translate(-50%, 150%);
	z-index: 1600; display: flex; align-items: center; gap: 8px;
	background: #1f2937; color: #f9fafb; font-size: 0.85rem; font-weight: 500;
	padding: 10px 18px; border-radius: 999px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
	transition: transform 0.25s ease, opacity 0.25s ease, visibility 0s linear 0.25s;
	pointer-events: none; max-width: calc(100vw - 24px);
	/* R23: the 150% slide alone is not enough when the bottom-nav rule
	   lifts the anchor to 74px — the pill stayed on screen. Opacity +
	   visibility make "hidden" genuinely invisible everywhere. */
	opacity: 0; visibility: hidden;
}
.gp-offline-banner.is-visible {
	transform: translate(-50%, 0);
	opacity: 1; visibility: visible;
	transition: transform 0.25s ease, opacity 0.25s ease;
}
body.gp-has-bottomnav .gp-offline-banner { bottom: calc(74px + env(safe-area-inset-bottom, 0)); }
.gp-offline-banner__close {
	background: none; border: 0; color: inherit; cursor: pointer; flex-shrink: 0;
	display: inline-flex; align-items: center; justify-content: center;
	width: 22px; height: 22px; border-radius: 6px; opacity: 0.85; padding: 0;
	/* R23 fix: the banner is pointer-events:none (page taps pass through),
	   the × must opt back in or it is never clickable. */
	pointer-events: auto;
}
.gp-offline-banner__close:hover { opacity: 1; background: rgba(255, 255, 255, 0.16); }
.gp-offline-banner__close .gp-icon { width: 13px; height: 13px; }

/* ==== R17: homepage custom HTML blocks ================================== */
.gp-home-section .gp-home-html {
	background: var(--gp-card); border: 1px solid var(--gp-border);
	border-radius: var(--gp-radius-card); box-shadow: var(--gp-shadow);
	padding: 26px 28px; margin: 26px 0;
}
.gp-home-html__title { margin: 0 0 12px; font-size: 1.35rem; }
.gp-home-html__content > :first-child { margin-top: 0; }
.gp-home-html__content > :last-child { margin-bottom: 0; }
.gp-home-html__content table { width: 100%; border-collapse: collapse; }
.gp-home-html__content th, .gp-home-html__content td { border: 1px solid var(--gp-border); padding: 8px 12px; text-align: left; }

/* ==== R17: list view × every card style =================================
   `.gp-grid--list` was silently losing to the per-style grid rules (same
   sheet, lower specificity). These per-style list rules keep each design's
   identity while presenting proper full-width rows. */
[data-gp-card-style="grid"] .gp-grid--list .gp-tool-card { flex-direction: row; align-items: center; }
[data-gp-card-style="grid"] .gp-grid--list .gp-tool-card .gp-tool-card__link { flex-direction: row; align-items: center; gap: 14px; }
[data-gp-card-style="grid"] .gp-grid--list .gp-tool-card__body { flex: 1; min-width: 0; }

[data-gp-card-style="nameonly"] .gp-grid--list { grid-template-columns: 1fr; }
[data-gp-card-style="nameonly"] .gp-grid--list .gp-tool-card { flex-direction: row; }

[data-gp-card-style="iconname"] .gp-grid.gp-grid--list { display: grid; grid-template-columns: 1fr; gap: 8px; }
[data-gp-card-style="iconname"] .gp-grid--list .gp-tool-card .gp-tool-card__link { width: 100%; }

[data-gp-card-style="compact"] .gp-grid.gp-grid--list { display: grid; grid-template-columns: 1fr; gap: 8px; }
[data-gp-card-style="compact"] .gp-grid--list .gp-tool-card { background: var(--gp-card); border: 1px solid var(--gp-border); border-radius: 12px; }
[data-gp-card-style="compact"] .gp-grid--list .gp-tool-card .gp-tool-card__link { width: 100%; }

[data-gp-card-style="detailed"] .gp-grid.gp-grid--list { display: grid; grid-template-columns: 1fr; gap: 14px; }
[data-gp-card-style="detailed"] .gp-grid--list .gp-tool-card { flex-direction: row; align-items: center; }
[data-gp-card-style="detailed"] .gp-grid--list .gp-tool-card .gp-tool-card__link { flex-direction: row; align-items: center; gap: 16px; }
[data-gp-card-style="detailed"] .gp-grid--list .gp-tool-card__body { flex: 1; min-width: 0; }

[data-gp-card-style="pill"] .gp-grid.gp-grid--list { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 8px; }
[data-gp-card-style="pill"] .gp-grid--list .gp-tool-card { display: flex; width: 100%; }
[data-gp-card-style="pill"] .gp-grid--list .gp-tool-card .gp-tool-card__link { flex: 1; }

[data-gp-card-style="banner"] .gp-grid--list { grid-template-columns: 1fr; }
[data-gp-card-style="banner"] .gp-grid--list .gp-tool-card { flex-direction: row; align-items: center; }

[data-gp-card-style="tile"] .gp-grid.gp-grid--list { display: grid; grid-template-columns: 1fr; gap: 8px; }
[data-gp-card-style="tile"] .gp-grid--list .gp-tool-card { text-align: left; }
[data-gp-card-style="tile"] .gp-grid--list .gp-tool-card .gp-tool-card__link { flex-direction: row; align-items: center; gap: 12px; }
[data-gp-card-style="tile"] .gp-grid--list .gp-tool-card__title { font-size: 0.95rem; }

[data-gp-card-style="rows"] .gp-grid--list { grid-template-columns: 1fr; }
[data-gp-card-style="rows"] .gp-grid--list .gp-tool-card { flex-direction: row; align-items: center; }

[data-gp-card-style="float"] .gp-grid.gp-grid--list { display: grid; grid-template-columns: 1fr; gap: 14px; }
[data-gp-card-style="float"] .gp-grid--list .gp-tool-card { flex-direction: row; align-items: center; }
[data-gp-card-style="float"] .gp-grid--list .gp-tool-card .gp-tool-card__link { flex-direction: row; align-items: center; gap: 14px; }
[data-gp-card-style="float"] .gp-grid--list .gp-tool-card__body { flex: 1; min-width: 0; }

/* Shared: in list mode the foot sits at the row end, never under the text. */
.gp-grid--list .gp-tool-card__foot { margin-left: auto; flex-shrink: 0; border-top: 0; border-left: 1px solid var(--gp-border); padding-left: 12px; }
.gp-grid--list .gp-tool-card__desc { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 560px) {
	.gp-grid--list .gp-tool-card__foot { display: none; }
}

/* ==== R17: directory width (full page by default) ======================== */
/* R19: capped width now centres too — it used to hug the left edge. */
.gp-is-directory .gp-site-main > .gp-container {
	max-width: var(--gp-width-dir, 100%);
	margin-left: auto; margin-right: auto;
}
/* Category landings keep the content column centred as well. */
.gp-is-directory .gp-site-main > .gp-container .gp-directory { width: 100%; }

/* Directory pages also escape GeneratePress' outer grid cap so the
   admin-chosen width (--gp-width-dir) really governs the page. */
body.gp-is-directory .grid-container { max-width: 100%; }
/* R19: category/directory pages own the FULL page — the parent theme's
   sidebar widgets are hidden and the content column is centred, so the
   grid never sits squashed on the left. */
body.gp-is-directory #right-sidebar,
body.gp-is-directory #left-sidebar { display: none; }
body.gp-is-directory #content {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* ==== R23: full-width tool pages (setting, default on) ================== */
/* Same escape the directory got in R17/R19, applied to every tool page:
   GeneratePress' outer grid cap goes away so calculators, result tables
   and action rows use the whole browser width. */
body.gp-tool-full .grid-container { max-width: 100%; }
/* The standalone breadcrumb bar is a .gp-container — it must follow the
   content column out to the edges or it sits 43px off-centre vs #content. */
body.gp-tool-full .gp-breadcrumbs-bar { max-width: 100%; }
body.gp-tool-full #right-sidebar,
body.gp-tool-full #left-sidebar { display: none; }
body.gp-tool-full #content {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* ==== R19: balance the last odd card row (no lonely left-hug card) ====== */
.gp-grid:not(.gp-grid--list) > .gp-tool-card:last-child:nth-child(odd) { grid-column: span 2; }
/* Single-column/list styles already fill the row — no span needed
   (equal-or-higher specificity than the span rule above). */
[data-gp-card-style="rows"] .gp-grid:not(.gp-grid--list) > .gp-tool-card:last-child:nth-child(odd),
[data-gp-card-style="rows"] .gp-grid.gp-grid--list > .gp-tool-card:last-child:nth-child(odd),
[data-gp-card-style="simplelist"] .gp-grid:not(.gp-grid--list) > .gp-tool-card:last-child:nth-child(odd),
[data-gp-card-style="simplelist"] .gp-grid.gp-grid--list > .gp-tool-card:last-child:nth-child(odd),
[data-gp-card-style="listaction"] .gp-grid:not(.gp-grid--list) > .gp-tool-card:last-child:nth-child(odd),
[data-gp-card-style="listaction"] .gp-grid.gp-grid--list > .gp-tool-card:last-child:nth-child(odd),
[data-gp-card-style="borderedlist"] .gp-grid:not(.gp-grid--list) > .gp-tool-card:last-child:nth-child(odd),
[data-gp-card-style="borderedlist"] .gp-grid.gp-grid--list > .gp-tool-card:last-child:nth-child(odd) { grid-column: auto; }

/* ==== R19: custom header text colour (wins when admin sets it) =========== */
body.gp-has-header-text .site-header .inside-header .main-title a,
body.gp-has-header-text .site-header .inside-header .site-description,
body.gp-has-header-text .site-header .inside-header .gp-header-btn,
body.gp-has-header-text .site-header .inside-header .main-navigation .main-nav ul li a,
body.gp-has-header-text .site-header .inside-header .main-navigation ul li a {
	color: var(--gp-header-text, inherit);
}
body.gp-has-header-text .site-header .inside-header .gp-header-btn:hover {
	color: var(--gp-header-text, inherit); background: color-mix(in srgb, var(--gp-header-text, #111827) 12%, transparent);
}

/* ==== R24: header icon colour options (win over every header design) ===== */
body.gp-has-header-icons .site-header .inside-header .gp-header-btn {
	color: var(--gp-hicon, inherit);
	background-color: var(--gp-hicon-bg, transparent);
}
body.gp-has-header-icons .site-header .inside-header .gp-header-btn .gp-icon {
	color: var(--gp-hicon, inherit);
}
body.gp-has-header-icons .site-header .inside-header .gp-header-btn:hover {
	color: var(--gp-hicon-hover, var(--gp-hicon, inherit));
	background-color: var(--gp-hicon-hover-bg, var(--gp-hicon-bg, rgba(128, 128, 128, 0.12)));
}
body.gp-has-header-icons .site-header .inside-header .gp-header-btn:hover .gp-icon {
	color: var(--gp-hicon-hover, var(--gp-hicon, inherit));
}

/* ==== R25: quick-link icon + colour options (All Tools / All Calculators) = */
body.gp-has-quick-colors .site-header .inside-header .gp-header-links__item--tools,
body.gp-has-quick-colors .site-header .inside-header .gp-header-links__item--tools .gp-icon {
	color: var(--gp-qlink-tools, inherit);
}
body.gp-has-quick-colors .site-header .inside-header .gp-header-links__item--calc,
body.gp-has-quick-colors .site-header .inside-header .gp-header-links__item--calc .gp-icon {
	color: var(--gp-qlink-calc, inherit);
}
body.gp-has-quick-colors .site-header .inside-header .gp-header-links__item--tools:hover,
body.gp-has-quick-colors .site-header .inside-header .gp-header-links__item--calc:hover {
	opacity: 0.8;
}

/* ==== R18: reference search modal ======================================= */
.gp-search-modal__chips {
	display: flex; gap: 8px; overflow-x: auto; padding: 10px 16px;
	border-bottom: 1px solid var(--gp-border); scrollbar-width: none; flex-shrink: 0;
}
.gp-search-modal__chips::-webkit-scrollbar { display: none; }
.gp-search-chip {
	flex-shrink: 0; border: 1px solid var(--gp-border); background: var(--gp-card);
	color: var(--gp-muted); border-radius: 999px; padding: 5px 14px; font-size: 0.85rem;
	font-weight: 500; cursor: pointer; line-height: 1.4; transition: all 0.15s ease;
}
.gp-search-chip:hover { color: var(--gp-primary); border-color: var(--gp-primary); }
.gp-search-chip.is-active { background: var(--gp-primary); border-color: var(--gp-primary); color: #fff; }
.gp-search-modal__section--popular { margin-bottom: 10px; }
.gp-search-modal__section-title--pop { display: flex; align-items: center; gap: 6px; }
.gp-search-modal__section-title--pop .gp-icon { width: 13px; height: 13px; }
.gp-search-pop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gp-search-pop {
	display: flex; align-items: center; gap: 10px; padding: 9px 10px; min-width: 0;
	border: 1px solid var(--gp-border); border-radius: 10px; color: var(--gp-text);
	text-decoration: none; font-size: 0.9rem; font-weight: 500; background: var(--gp-card);
}
.gp-search-pop:hover { border-color: var(--gp-primary); background: color-mix(in srgb, var(--gp-primary) 5%, transparent); }
.gp-search-pop__icon { width: 32px !important; height: 32px !important; border-radius: 9px; }
.gp-search-pop__icon .gp-icon { width: 16px; height: 16px; }
.gp-search-pop__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-search-modal__tip { display: flex; align-items: center; gap: 7px; color: var(--gp-muted); font-size: 0.8rem; margin: 12px 0 0; }
.gp-search-modal__tip .gp-icon { width: 13px; height: 13px; flex-shrink: 0; }
.gp-search-modal__foot {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 9px 16px; border-top: 1px solid var(--gp-border); flex-shrink: 0;
	color: var(--gp-muted); font-size: 0.78rem;
}
.gp-search-modal__hints { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; }
.gp-search-modal__hints i { font-style: normal; opacity: 0.6; }
.gp-search-modal__foot kbd { border: 1px solid var(--gp-border); border-radius: 5px; padding: 1px 6px; font-size: 0.7rem; background: var(--gp-bg); }
/* Rich result rows: icon | title + badge + category / 2-line desc | arrow */
.gp-search-item { align-items: flex-start; padding: 11px 12px; }
.gp-search-item__icon { width: 38px !important; height: 38px !important; margin-top: 2px; }
.gp-search-item__body { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.gp-search-item__topline { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.gp-search-item__best {
	flex-shrink: 0; font-size: 0.68rem; font-weight: 600; color: var(--gp-primary);
	background: color-mix(in srgb, var(--gp-primary) 12%, transparent);
	border: 1px solid color-mix(in srgb, var(--gp-primary) 35%, transparent);
	padding: 1px 8px; border-radius: 999px; white-space: nowrap;
}
.gp-search-item__desc {
	color: var(--gp-muted); font-size: 0.8rem; line-height: 1.45;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.gp-search-item__arrow { flex-shrink: 0; color: var(--gp-muted); align-self: center; }
.gp-search-item__arrow .gp-icon { width: 16px; height: 16px; }
.gp-search-item.is-active .gp-search-item__arrow { color: var(--gp-primary); transform: translateX(2px); }
.gp-search-modal .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); }
@media (max-width: 480px) {
	.gp-search-pop-grid { grid-template-columns: 1fr; }
	.gp-search-modal__hints kbd { display: none; }
}

/* ==== R18: header designs 8–10 ========================================== */
/* 8. Frosted Glass */
.gp-header-glass .site-header {
	background: transparent; border-bottom: 0; box-shadow: none;
	position: relative; z-index: 100; margin-bottom: -72px;
}
.gp-header-glass .site-header .inside-header {
	max-width: var(--gp-width-site, 1280px); margin: 12px auto 0; padding: 10px 22px;
	background: color-mix(in srgb, var(--gp-card) 55%, transparent);
	backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
	border: 1px solid color-mix(in srgb, var(--gp-border) 60%, transparent);
	border-radius: 18px; box-shadow: 0 10px 40px rgba(17, 24, 39, 0.08);
}
/* 9. Two-Tone Split */
.gp-header-twotone .site-header { border-bottom: 0; background: var(--gp-header-bg, var(--gp-card)); }
.gp-header-twotone .site-header .inside-header {
	background: linear-gradient(90deg, color-mix(in srgb, var(--gp-primary) 14%, transparent) 0%, transparent 34%);
	padding-top: 14px; padding-bottom: 14px; border-bottom: 3px solid var(--gp-secondary);
}
.gp-header-twotone .site-header .site-branding {
	background: var(--gp-primary); padding: 6px 16px; border-radius: 10px; margin-right: 14px;
}
.gp-header-twotone .site-header .main-title a { color: #fff; }
.gp-header-twotone .site-header .site-description { color: rgba(255, 255, 255, 0.82); }
.gp-header-twotone .site-header .gp-header-btn { border: 1px solid var(--gp-border); border-radius: 10px; }
/* 10. Floating Card */
.gp-header-floating .site-header {
	background: transparent; border-bottom: 0; box-shadow: none;
	position: relative; z-index: 100; margin-bottom: -76px;
}
.gp-header-floating .site-header .inside-header {
	max-width: min(var(--gp-width-site, 1280px), 1080px); margin: 14px auto 0; padding: 12px 26px;
	background: var(--gp-card); border: 1px solid var(--gp-border); border-radius: 20px;
	box-shadow: 0 14px 44px rgba(17, 24, 39, 0.14);
}

/* ==== R18: category-wise colours ======================================== */
.gp-tool-card .gp-tool-icon,
.gp-search-modal .gp-tool-icon {
	background: color-mix(in srgb, var(--gp-card-accent, var(--gp-cat-accent, var(--gp-primary))) 10%, transparent);
	color: var(--gp-card-accent, var(--gp-cat-accent, var(--gp-primary)));
}
.gp-tool-card .gp-tool-card__cat { color: var(--gp-cat-accent, var(--gp-primary)); }


/* ==== R20: slide-menu designs 11–20 ===================================== */
/* 11. Icon rail — narrow icon-only strip */
body.gp-drawer-rail .gp-drawer__panel { width: 84px; }
body.gp-drawer-rail .gp-drawer__brand { font-size: 0; }
body.gp-drawer-rail .gp-drawer__brand::first-letter { font-size: 1.3rem; }
body.gp-drawer-rail .gp-drawer__head { justify-content: center; padding: 14px 8px; }
body.gp-drawer-rail .gp-drawer__close { display: none; }
body.gp-drawer-rail .gp-drawer-menu__list a { font-size: 0; justify-content: center; gap: 0; padding: 13px 6px; }
body.gp-drawer-rail .gp-drawer-menu__list .gp-icon { width: 22px; height: 22px; margin: 0 auto; }
body.gp-drawer-rail .gp-drawer-menu__count { display: none; }
body.gp-drawer-rail .gp-drawer__section-title { font-size: 0; padding: 6px 0; margin: 6px 0; text-align: center; }
body.gp-drawer-rail .gp-drawer__section-title::before { content: "···"; font-size: 0.8rem; letter-spacing: 2px; color: var(--gp-muted); }
body.gp-drawer-rail .gp-drawer-menu__empty { font-size: 0; }
/* 12. Minimal — text only, no icons, airy */
body.gp-drawer-minimal2 .gp-drawer__panel { background: var(--gp-bg); }
body.gp-drawer-minimal2 .gp-drawer__head { border-bottom: 0; }
body.gp-drawer-minimal2 .gp-drawer-menu__list .gp-icon { display: none; }
body.gp-drawer-minimal2 .gp-drawer-menu__list a,
body.gp-drawer-minimal2 .gp-drawer-menu__button { padding: 12px 18px; font-weight: 500; border-radius: 6px; }
body.gp-drawer-minimal2 .gp-drawer-menu__list a:hover { background: transparent; color: var(--gp-primary); text-decoration: underline; text-underline-offset: 4px; }
body.gp-drawer-minimal2 .gp-drawer__section { border-top: 0; }
/* 13. Glass — frosted translucent panel */
body.gp-drawer-glass2 .gp-drawer__panel {
	background: color-mix(in srgb, var(--gp-card) 66%, transparent);
	backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5);
	border-right: 1px solid color-mix(in srgb, var(--gp-border) 55%, transparent);
}
body.gp-drawer-glass2 .gp-drawer__head { background: transparent; border-bottom-color: color-mix(in srgb, var(--gp-border) 50%, transparent); }
/* 14. Dark Pro — always-dark premium panel */
body.gp-drawer-darkpro .gp-drawer__panel { background: linear-gradient(180deg, #0b1220, #101a30); color: #e5edff; }
body.gp-drawer-darkpro .gp-drawer__brand { color: #fff; }
body.gp-drawer-darkpro .gp-drawer__head { background: transparent; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
body.gp-drawer-darkpro .gp-drawer__close { color: #93a4c3; }
body.gp-drawer-darkpro .gp-drawer-menu__list a,
body.gp-drawer-darkpro .gp-drawer-menu__button { color: #dbe4f8; border-left: 3px solid transparent; border-radius: 0 8px 8px 0; }
body.gp-drawer-darkpro .gp-drawer-menu__list a:hover { background: rgba(255, 255, 255, 0.06); border-left-color: var(--gp-primary); color: #fff; }
body.gp-drawer-darkpro .gp-drawer-menu__list .gp-icon { color: #8fb0ff; }
body.gp-drawer-darkpro .gp-drawer__section { border-top-color: rgba(255, 255, 255, 0.07); }
body.gp-drawer-darkpro .gp-drawer__section-title { color: #7e8dab; }
/* 15. Card list — every item a raised mini card */
body.gp-drawer-cardlist .gp-drawer__panel { background: var(--gp-bg); }
body.gp-drawer-cardlist .gp-drawer-menu__list a,
body.gp-drawer-cardlist .gp-drawer-menu__button {
	background: var(--gp-card); border: 1px solid var(--gp-border); border-radius: 12px;
	margin: 7px 10px; width: auto; box-shadow: 0 2px 6px rgba(17, 24, 39, 0.05); padding: 12px 14px;
}
body.gp-drawer-cardlist .gp-drawer-menu__list a:hover { border-color: var(--gp-primary); box-shadow: 0 4px 12px rgba(17, 24, 39, 0.09); }
body.gp-drawer-cardlist .gp-drawer__section { border-top: 0; }
/* 16. Gradient — full brand-gradient panel, white text */
body.gp-drawer-gradient2 .gp-drawer__panel { background: linear-gradient(160deg, var(--gp-primary), var(--gp-secondary)); color: #fff; }
body.gp-drawer-gradient2 .gp-drawer__brand { color: #fff; }
body.gp-drawer-gradient2 .gp-drawer__head { background: transparent; border-bottom: 1px solid rgba(255, 255, 255, 0.25); }
body.gp-drawer-gradient2 .gp-drawer__close { color: rgba(255, 255, 255, 0.85); }
body.gp-drawer-gradient2 .gp-drawer-menu__list a,
body.gp-drawer-gradient2 .gp-drawer-menu__button { color: #fff; }
body.gp-drawer-gradient2 .gp-drawer-menu__list a:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
body.gp-drawer-gradient2 .gp-drawer-menu__list .gp-icon { color: rgba(255, 255, 255, 0.9); }
body.gp-drawer-gradient2 .gp-drawer__section { border-top-color: rgba(255, 255, 255, 0.22); }
body.gp-drawer-gradient2 .gp-drawer__section-title { color: rgba(255, 255, 255, 0.8); }
body.gp-drawer-gradient2 .gp-drawer-menu__count { color: rgba(255, 255, 255, 0.85); }
/* 17. Accent bar — flat rows, colored side bar on hover */
body.gp-drawer-accentbar .gp-drawer__panel { border-right: 4px solid var(--gp-primary); }
body.gp-drawer-accentbar .gp-drawer-menu__list a { border-radius: 0; padding-left: 16px; border-left: 4px solid transparent; margin-left: -4px; }
body.gp-drawer-accentbar .gp-drawer-menu__list a:hover { background: color-mix(in srgb, var(--gp-primary) 7%, transparent); border-left-color: var(--gp-primary); }
body.gp-drawer-accentbar .gp-drawer__section { border-top: 0; }
/* 18. Compact — tight rows, more menu above the fold */
body.gp-drawer-compact .gp-drawer__head { padding: 10px 14px; }
body.gp-drawer-compact .gp-drawer-menu__list a,
body.gp-drawer-compact .gp-drawer-menu__button { padding: 8px 14px; font-size: 0.88rem; gap: 10px; }
body.gp-drawer-compact .gp-drawer-menu__list .gp-icon { width: 17px; height: 17px; }
body.gp-drawer-compact .gp-drawer__section { padding: 2px 8px 8px; margin-top: 2px; }
body.gp-drawer-compact .gp-drawer__section-title { margin: 6px 10px 2px; }
/* 19. Floating pills — detached pills on a soft canvas */
body.gp-drawer-floatingpills .gp-drawer__panel { background: var(--gp-bg); }
body.gp-drawer-floatingpills .gp-drawer-menu__list { padding: 4px 10px; }
body.gp-drawer-floatingpills .gp-drawer-menu__list li + li { margin-top: 8px; }
body.gp-drawer-floatingpills .gp-drawer-menu__list a,
body.gp-drawer-floatingpills .gp-drawer-menu__button {
	background: var(--gp-card); border: 1px solid var(--gp-border); border-radius: 999px; width: auto; margin: 0 4px;
}
body.gp-drawer-floatingpills .gp-drawer-menu__list a:hover { border-color: var(--gp-primary); background: color-mix(in srgb, var(--gp-primary) 6%, var(--gp-card)); }
body.gp-drawer-floatingpills .gp-drawer__section { border-top: 0; }
/* 20. App drawer — 2-column app grid tiles */
body.gp-drawer-appdrawer .gp-drawer__panel { background: var(--gp-bg); }
body.gp-drawer-appdrawer .gp-drawer__nav .gp-drawer-menu__list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 8px; }
body.gp-drawer-appdrawer .gp-drawer-menu__list a {
	flex-direction: column; text-align: center; gap: 7px; padding: 14px 6px;
	background: var(--gp-card); border: 1px solid var(--gp-border); border-radius: 14px; font-size: 0.8rem;
}
body.gp-drawer-appdrawer .gp-drawer-menu__list .gp-icon { width: 24px; height: 24px; }
body.gp-drawer-appdrawer .gp-drawer-menu__count { display: none; }
body.gp-drawer-appdrawer .gp-drawer__section { border-top: 0; }

/* ==== R20: header designs 11–19 ========================================= */
/* 11. Classic — boxed bar, thick brand underline */
.gp-header-classic .site-header { background: var(--gp-header-bg, var(--gp-card)); border-bottom: 1px solid var(--gp-border); }
.gp-header-classic .site-header .inside-header { padding-top: 14px; padding-bottom: 14px; }
body.gp-header-classic .site-header .main-title a {
	color: var(--gp-text); font-weight: 800; letter-spacing: -0.3px;
	box-shadow: inset 0 -4px 0 color-mix(in srgb, var(--gp-primary) 75%, transparent);
}
/* 12. Split — colored brand slab left, flat bar right */
.gp-header-split .site-header { border-bottom: 3px solid var(--gp-secondary); background: var(--gp-header-bg, var(--gp-card)); }
.gp-header-split .site-header .site-branding {
	background: var(--gp-primary); color: #fff; padding: 10px 22px; margin: -16px 16px -16px 0;
	border-radius: 0 14px 14px 0;
}
.gp-header-split .site-header .main-title a { color: #fff; }
.gp-header-split .site-header .site-description { color: rgba(255, 255, 255, 0.82); }
/* 13. Gradient — vertical brand gradient, white text */
.gp-header-gradient2 .site-header {
	background: linear-gradient(135deg, var(--gp-primary), var(--gp-secondary));
	border-bottom: 0; box-shadow: 0 6px 24px rgba(17, 24, 39, 0.16);
}
.gp-header-gradient2 .site-header .main-title a,
.gp-header-gradient2 .site-header .site-description,
.gp-header-gradient2 .site-header .gp-header-btn { color: #fff; }
.gp-header-gradient2 .site-header .gp-header-btn:hover { background: rgba(255, 255, 255, 0.18); }
/* 14. Glass sticky — frosted bar that hovers over content */
.gp-header-glasssticky .site-header {
	background: color-mix(in srgb, var(--gp-card) 72%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--gp-border) 60%, transparent);
	backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6);
	position: relative; z-index: 100; box-shadow: 0 4px 24px rgba(17, 24, 39, 0.06);
}
/* 15. Bold brand — oversized uppercase title, thin accent rule */
.gp-header-boldbrand .site-header { border-bottom: 2px solid var(--gp-border); }
body.gp-header-boldbrand .site-header .main-title a {
	font-size: 1.55rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: var(--gp-primary);
}
.gp-header-boldbrand .site-description { text-transform: none; letter-spacing: 0; }
/* 16. Minimal line — transparent, hairline bottom, ghost buttons */
.gp-header-minimalline .site-header { background: transparent; border-bottom: 1px solid var(--gp-border); box-shadow: none; }
.gp-header-minimalline .site-header .inside-header { padding-top: 18px; padding-bottom: 18px; }
.gp-header-minimalline .gp-header-btn { background: transparent; border: 1px solid transparent; }
.gp-header-minimalline .gp-header-btn:hover { border-color: var(--gp-border); }
/* 17. Pill nav — menu links become pill chips */
.gp-header-pillnav .site-header { background: var(--gp-header-bg, var(--gp-card)); border-bottom: 1px solid var(--gp-border); }
.gp-header-pillnav .main-navigation .main-nav ul li a,
.gp-header-pillnav .main-navigation ul li a {
	background: color-mix(in srgb, var(--gp-primary) 7%, transparent);
	border-radius: 999px; padding: 7px 14px !important; margin: 0 3px;
}
.gp-header-pillnav .main-navigation .main-nav ul li a:hover,
.gp-header-pillnav .main-navigation ul li a:hover { background: color-mix(in srgb, var(--gp-primary) 14%, transparent); color: var(--gp-primary); }
/* 18. Elevated card — in-flow card with deep shadow, rounded bottom */
.gp-header-elevatedcard .site-header {
	background: var(--gp-card); border-bottom: 0;
	box-shadow: 0 18px 44px rgba(17, 24, 39, 0.16), 0 2px 6px rgba(17, 24, 39, 0.06);
	border-radius: 0 0 22px 22px; position: relative; z-index: 100;
}
.gp-header-elevatedcard .site-header .inside-header { padding-top: 16px; padding-bottom: 16px; }
/* 19. App bar — always-dark compact bar */
.gp-header-appbar .site-header { background: #0f172a; border-bottom: 0; box-shadow: 0 2px 10px rgba(2, 6, 23, 0.4); }
.gp-header-appbar .site-header .inside-header { padding-top: 9px; padding-bottom: 9px; }
body.gp-header-appbar .site-header .main-title a { color: #fff; font-size: 1.02rem; letter-spacing: 0.2px; }
body.gp-header-appbar .site-header .site-description { color: #94a3b8; }
body.gp-header-appbar .site-header .gp-header-btn { color: #cbd5e1; }
body.gp-header-appbar .site-header .gp-header-btn:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
body.gp-header-appbar .site-header .gp-header-btn .gp-icon { color: #cbd5e1; }

/* ==== R20: tool listing layouts 11–20 =================================== */
/* 11. Simple list — plain text rows */
[data-gp-card-style="simplelist"] .gp-grid { grid-template-columns: 1fr; gap: 0; }
[data-gp-card-style="simplelist"] .gp-tool-card { background: transparent; border: 0; box-shadow: none; border-radius: 0; }
[data-gp-card-style="simplelist"] .gp-tool-card__link { flex-direction: row; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid color-mix(in srgb, var(--gp-border) 60%, transparent); }
[data-gp-card-style="simplelist"] .gp-tool-card__icon { width: 28px !important; height: 28px !important; border-radius: 7px; background: transparent; }
[data-gp-card-style="simplelist"] .gp-tool-card__desc { display: none; }
[data-gp-card-style="simplelist"] .gp-tool-card__foot { border-top: 0; padding-top: 0; }
[data-gp-card-style="simplelist"] .gp-tool-card__fav { top: 6px; }
/* 12. List with action button — rows with a filled Open button */
[data-gp-card-style="listaction"] .gp-grid { grid-template-columns: 1fr; gap: 10px; }
[data-gp-card-style="listaction"] .gp-tool-card { background: var(--gp-card); border: 1px solid var(--gp-border); box-shadow: none; border-radius: 12px; }
[data-gp-card-style="listaction"] .gp-tool-card__link { flex-direction: row; align-items: center; gap: 14px; padding: 13px 16px; }
[data-gp-card-style="listaction"] .gp-tool-card__desc { display: none; }
[data-gp-card-style="listaction"] .gp-tool-card__foot { border-top: 0; padding: 10px 16px 12px; }
[data-gp-card-style="listaction"] .gp-tool-card__open {
	background: var(--gp-card-accent, var(--gp-primary)); color: #fff; font-weight: 600;
	padding: 7px 14px; border-radius: 9px; gap: 6px;
}
[data-gp-card-style="listaction"] .gp-tool-card__open .gp-icon { color: #fff; }
/* 13. Stylish cards — gradient border, big radius, hover lift */
[data-gp-card-style="stylish"] .gp-tool-card { border: 1.5px solid transparent; border-radius: 18px; background: linear-gradient(var(--gp-card), var(--gp-card)) padding-box, linear-gradient(135deg, var(--gp-card-accent, var(--gp-primary)), color-mix(in srgb, var(--gp-secondary) 55%, transparent)) border-box; transition: transform 0.18s ease, box-shadow 0.18s ease; }
[data-gp-card-style="stylish"] .gp-tool-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(17, 24, 39, 0.12); }
[data-gp-card-style="stylish"] .gp-tool-card__icon { border-radius: 12px; }
[data-gp-card-style="stylish"] .gp-tool-card__title { font-size: 1.02rem; }
/* 14. Cards with ribbon — diagonal TOOL ribbon top-right */
[data-gp-card-style="ribbon"] .gp-tool-card { position: relative; overflow: hidden; border-radius: 12px; }
[data-gp-card-style="ribbon"] .gp-tool-card::after {
	content: "TOOL"; position: absolute; top: 14px; right: -30px; z-index: 2;
	transform: rotate(40deg); pointer-events: none;
	background: var(--gp-card-accent, var(--gp-primary)); color: #fff;
	font-size: 0.6rem; font-weight: 700; letter-spacing: 1.5px; padding: 3px 34px;
}
[data-gp-card-style="ribbon"] .gp-tool-card__fav { z-index: 3; }
/* 15. Icon tiles — icon-forward square tiles, no extra text */
[data-gp-card-style="icontiles"] .gp-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
[data-gp-card-style="icontiles"] .gp-tool-card { border: 1px solid var(--gp-border); border-radius: 16px; }
[data-gp-card-style="icontiles"] .gp-tool-card__link { flex-direction: column; text-align: center; gap: 10px; padding: 20px 10px 14px; }
[data-gp-card-style="icontiles"] .gp-tool-card__icon { width: 56px !important; height: 56px !important; border-radius: 16px; margin: 0 auto; }
[data-gp-card-style="icontiles"] .gp-tool-card__icon .gp-icon { width: 28px; height: 28px; }
[data-gp-card-style="icontiles"] .gp-tool-card__badges { justify-content: center; }
[data-gp-card-style="icontiles"] .gp-tool-card__title { display: block; width: 100%; font-size: 0.86rem; }
[data-gp-card-style="icontiles"] .gp-tool-card__desc { display: none; }
[data-gp-card-style="icontiles"] .gp-tool-card__foot { border-top: 0; padding: 0 0 8px; }
[data-gp-card-style="icontiles"] .gp-tool-card__foot .gp-tool-card__open { display: none; }
[data-gp-card-style="icontiles"] .gp-tool-card__cat { margin: 0 auto; font-size: 0.72rem; }
[data-gp-card-style="icontiles"] .gp-tool-card__type { margin: 0 auto; font-size: 0.72rem; }
[data-gp-card-style="icontiles"] .gp-tool-card__fav { top: 6px; right: 6px; }
/* 16. Split panel — colored icon slab left, content right */
[data-gp-card-style="splitpanel"] .gp-tool-card { overflow: hidden; border: 0; border-radius: 14px; }
[data-gp-card-style="splitpanel"] .gp-tool-card__link {
	padding: 0; display: grid; grid-template-columns: 72px 1fr; align-items: stretch; gap: 0;
}
[data-gp-card-style="splitpanel"] .gp-tool-card__icon {
	width: 100% !important; height: 100% !important; min-height: 86px; border-radius: 0;
	background: color-mix(in srgb, var(--gp-card-accent, var(--gp-primary)) 16%, transparent);
}
[data-gp-card-style="splitpanel"] .gp-tool-card__icon .gp-icon { width: 30px; height: 30px; }
[data-gp-card-style="splitpanel"] .gp-tool-card__body { padding: 14px 14px 6px; align-self: center; }
[data-gp-card-style="splitpanel"] .gp-tool-card__desc { display: none; }
[data-gp-card-style="splitpanel"] .gp-tool-card__foot { border-top: 1px dashed var(--gp-border); padding: 8px 14px 10px; }
/* 17. Bordered list — strong-ruled rows with accent edge */
[data-gp-card-style="borderedlist"] .gp-grid { grid-template-columns: 1fr; gap: 0; }
[data-gp-card-style="borderedlist"] .gp-tool-card { background: transparent; border: 0; border-left: 4px solid var(--gp-card-accent, var(--gp-primary)); border-radius: 0; box-shadow: none; }
[data-gp-card-style="borderedlist"] .gp-tool-card__link { flex-direction: row; align-items: center; gap: 14px; padding: 13px 14px; border-bottom: 2px solid var(--gp-border); }
[data-gp-card-style="borderedlist"] .gp-tool-card__link:hover { background: color-mix(in srgb, var(--gp-primary) 4%, transparent); }
[data-gp-card-style="borderedlist"] .gp-tool-card__desc { display: none; }
[data-gp-card-style="borderedlist"] .gp-tool-card__foot { border-top: 0; padding: 0 14px 10px; }
/* 18. Gradient cards — accent gradient wash backgrounds */
[data-gp-card-style="gradcards"] .gp-tool-card {
	border: 0; border-radius: 16px;
	background: linear-gradient(135deg, color-mix(in srgb, var(--gp-card-accent, var(--gp-primary)) 14%, var(--gp-card)) 0%, var(--gp-card) 55%);
}
[data-gp-card-style="gradcards"] .gp-tool-card__icon { background: color-mix(in srgb, var(--gp-card-accent, var(--gp-primary)) 20%, transparent); }
[data-gp-card-style="gradcards"] .gp-tool-card__title { font-weight: 700; }
/* 19. Chips — inline tool pills in a flowing row */
[data-gp-card-style="chips"] .gp-grid { display: flex; flex-wrap: wrap; gap: 9px; }
[data-gp-card-style="chips"] .gp-tool-card { background: var(--gp-card); border: 1px solid var(--gp-border); border-radius: 999px; box-shadow: none; width: auto !important; grid-column: auto !important; }
[data-gp-card-style="chips"] .gp-tool-card__link { flex-direction: row; align-items: center; gap: 8px; padding: 7px 15px 7px 8px; }
[data-gp-card-style="chips"] .gp-tool-card__icon { width: 26px !important; height: 26px !important; border-radius: 999px; }
[data-gp-card-style="chips"] .gp-tool-card__icon .gp-icon { width: 14px; height: 14px; }
[data-gp-card-style="chips"] .gp-tool-card__badges { display: none; }
[data-gp-card-style="chips"] .gp-tool-card__title { font-size: 0.85rem; font-weight: 600; }
[data-gp-card-style="chips"] .gp-tool-card__desc { display: none; }
[data-gp-card-style="chips"] .gp-tool-card__foot { display: none; }
[data-gp-card-style="chips"] .gp-tool-card__fav { position: static; margin-left: 2px; }
[data-gp-card-style="chips"] .gp-tool-card__fav .gp-icon { width: 13px; height: 13px; }
/* 20. Magazine — first card is a full-width feature story */
[data-gp-card-style="magazine"] .gp-grid { grid-template-columns: 1fr 1fr; }
[data-gp-card-style="magazine"] .gp-tool-card:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 0; border-radius: 16px; overflow: hidden; }
[data-gp-card-style="magazine"] .gp-tool-card:first-child .gp-tool-card__link { display: contents; }
[data-gp-card-style="magazine"] .gp-tool-card:first-child .gp-tool-card__icon { width: 100% !important; height: 100% !important; min-height: 130px; border-radius: 0; background: color-mix(in srgb, var(--gp-card-accent, var(--gp-primary)) 15%, transparent); }
[data-gp-card-style="magazine"] .gp-tool-card:first-child .gp-tool-card__icon .gp-icon { width: 40px; height: 40px; }
[data-gp-card-style="magazine"] .gp-tool-card:first-child .gp-tool-card__body { padding: 18px 18px 4px; }
[data-gp-card-style="magazine"] .gp-tool-card:first-child .gp-tool-card__title { font-size: 1.3rem; line-height: 1.25; }
[data-gp-card-style="magazine"] .gp-tool-card:first-child .gp-tool-card__desc { -webkit-line-clamp: 3; }
[data-gp-card-style="magazine"] .gp-tool-card:first-child .gp-tool-card__foot { grid-column: 2; border-top: 1px dashed var(--gp-border); }
[data-gp-card-style="magazine"] .gp-tool-card:first-child .gp-tool-card__fav { z-index: 3; }
@media (max-width: 560px) {
	[data-gp-card-style="magazine"] .gp-tool-card:first-child { grid-template-columns: 64px 1fr; }
	[data-gp-card-style="magazine"] .gp-tool-card:first-child .gp-tool-card__title { font-size: 1.05rem; }
}

/* ==== R21: professional category pages ================================== */
/* Hero card: icon tile + title + count + description, tinted with the
   category colour when category-wise colours are on. */
.gp-cat-hero {
	display: flex; align-items: center; gap: 16px;
	background: linear-gradient(135deg, color-mix(in srgb, var(--gp-cat-accent, var(--gp-primary)) 8%, var(--gp-card)) 0%, var(--gp-card) 65%);
	border: 1px solid var(--gp-border); border-radius: 18px;
	padding: 20px 24px; margin: 0 0 14px;
	box-shadow: 0 4px 18px rgba(17, 24, 39, 0.05);
}
.gp-cat-hero__icon {
	flex-shrink: 0; width: 58px; height: 58px; border-radius: 16px;
	display: inline-flex; align-items: center; justify-content: center;
	background: color-mix(in srgb, var(--gp-cat-accent, var(--gp-primary)) 14%, transparent);
	color: var(--gp-cat-accent, var(--gp-primary));
}
.gp-cat-hero__icon .gp-icon { width: 28px; height: 28px; }
.gp-cat-hero__text { min-width: 0; }
.gp-cat-hero .gp-directory__title { margin: 0 0 4px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gp-cat-hero__count {
	font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em;
	background: color-mix(in srgb, var(--gp-cat-accent, var(--gp-primary)) 12%, transparent);
	color: var(--gp-cat-accent, var(--gp-primary));
	padding: 3px 11px; border-radius: 999px; white-space: nowrap;
}
.gp-cat-hero .gp-directory__desc { margin: 0; }
.gp-directory--center .gp-cat-hero { flex-direction: column; text-align: center; }
.gp-directory--center .gp-cat-hero__text { display: flex; flex-direction: column; align-items: center; }
/* Sub-category chips ("Sections") */
.gp-subcats { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.gp-subcats__label {
	font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
	color: var(--gp-muted); margin-right: 4px;
}
.gp-subcats__chip {
	display: inline-flex; align-items: center; gap: 7px;
	background: var(--gp-card); border: 1px solid var(--gp-border); border-radius: 999px;
	padding: 6px 14px; font-size: 0.85rem; font-weight: 600; color: var(--gp-text);
	text-decoration: none; transition: all 0.15s ease;
}
.gp-subcats__chip:hover { border-color: var(--gp-cat-accent, var(--gp-primary)); color: var(--gp-cat-accent, var(--gp-primary)); background: color-mix(in srgb, var(--gp-cat-accent, var(--gp-primary)) 6%, var(--gp-card)); }
.gp-subcats__count {
	font-size: 0.7rem; font-weight: 700;
	background: color-mix(in srgb, var(--gp-cat-accent, var(--gp-primary)) 12%, transparent);
	color: var(--gp-cat-accent, var(--gp-primary));
	padding: 1px 8px; border-radius: 999px;
}
/* Child sections sit slightly apart below the main grid */
.gp-dir-section--child { margin-top: 26px; padding-top: 22px; border-top: 1px dashed var(--gp-border); }
.gp-dir-section--child .gp-dir-section__title { color: var(--gp-cat-accent, var(--gp-text)); }

/* ==== Image icons (PNG badges): fixed box, no extra background, image fits inside ==== */
.gp-tool-card .gp-tool-icon.gp-tool-icon--img,
.gp-tool-icon.gp-tool-icon--img {
	background: transparent !important;
	padding: 0 !important;
	border-radius: 12px;
	flex: 0 0 auto;
}
.gp-tool-card .gp-tool-icon.gp-tool-icon--img { width: 44px !important; height: 44px !important; }
.gp-tool-icon--img img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	object-fit: contain;
	border-radius: inherit;
}

/* ==== Dark mode: form controls and header buttons must not stay white ===== */
html[data-gp-theme="dark"] input,
html[data-gp-theme="dark"] select,
html[data-gp-theme="dark"] textarea,
html[data-gp-theme="dark"] input[type="search"],
html[data-gp-theme="dark"] .gp-searchfield,
html[data-gp-theme="dark"] .gp-search-inline input,
html[data-gp-theme="dark"] .gp-directory__controls input[type="search"] {
	background-color: var(--gp-card) !important;
	color: var(--gp-text) !important;
	border-color: var(--gp-border) !important;
	-webkit-text-fill-color: var(--gp-text);
}
html[data-gp-theme="dark"] input::placeholder,
html[data-gp-theme="dark"] textarea::placeholder { color: var(--gp-muted) !important; opacity: 1; }
html[data-gp-theme="dark"] input[type="search"]::-webkit-search-cancel-button { filter: invert(1); }
html[data-gp-theme="dark"] .gp-searchfield__input { background: transparent !important; }
html[data-gp-theme="dark"] .gp-header-cats__btn,
html[data-gp-theme="dark"] .gp-header-links__item {
	color: #ffffff;
}
html[data-gp-theme="dark"] .gp-header-cats__btn,
html[data-gp-theme="dark"] details.gp-header-cats[open] > .gp-header-cats__btn {
	background-color: rgba(19, 26, 46, 0.85) !important;
	color: var(--gp-text) !important;
	border-color: var(--gp-border) !important;
}
html[data-gp-theme="dark"] .gp-header-cats__btn .gp-icon { color: var(--gp-primary) !important; }

/* ==== Dark mode: category chips and sub-category pills ================= */
html[data-gp-theme="dark"] .gp-chip,
html[data-gp-theme="dark"] .gp-subcats__chip {
	background-color: var(--gp-card) !important;
	color: var(--gp-text) !important;
	border-color: var(--gp-border) !important;
}
html[data-gp-theme="dark"] .gp-chip.is-active,
html[data-gp-theme="dark"] .gp-chip[aria-current="page"] {
	background-color: var(--gp-primary) !important;
	color: #ffffff !important;
	border-color: var(--gp-primary) !important;
}
html[data-gp-theme="dark"] .gp-chip__count,
html[data-gp-theme="dark"] .gp-subcats__count {
	background-color: rgba(255, 255, 255, 0.08) !important;
	color: var(--gp-muted) !important;
}
html[data-gp-theme="dark"] .gp-subcats__label { color: var(--gp-muted); }


/* ==== gpd hero (All Tools look), shared by category pages ================ */
.gpd-hero{min-width:0;box-sizing:border-box;background:linear-gradient(135deg,var(--gpd-c1),var(--gpd-c2));color:#fff;border-radius:0;padding:36px 0 32px;margin:0 0 22px;box-shadow:0 10px 30px rgba(15,23,42,.12)}
.gpd-hero__in{min-width:0}
.gpd-hero__eyebrow{margin:0 0 6px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.85}
.gpd-hero__title{margin:0 0 8px;color:#fff;font-size:32px;line-height:1.15;font-weight:800;text-align:left}
.gpd-hero__desc{margin:0 0 16px;max-width:720px;opacity:.94;font-size:15px;line-height:1.5;text-align:left}
.gpd-hero__stats{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.gpd-hero__stat{background:rgba(255,255,255,.16);border-radius:12px;padding:8px 14px;font-size:14px}
.gpd-hero__stat b{font-size:17px;margin-right:4px}
.gpd-hero__grid{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;gap:10px;padding:2px 2px 10px;scroll-snap-type:x proximity;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.gpd-hero__cat{flex:0 0 230px;scroll-snap-align:start}
.gpd-hero__cat{min-width:0;display:flex;align-items:center;gap:10px;background:#fff;color:#1e1b4b;border-radius:12px;padding:12px 14px;text-decoration:none;font-size:14px;box-shadow:0 2px 6px rgba(15,23,42,.08)}
.gpd-hero__cat:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(15,23,42,.14)}
.gpd-hero__cat svg{width:20px;height:20px;color:var(--gpd-c1);flex:0 0 auto}
.gpd-hero__cat-name{flex:1;font-weight:600;line-height:1.25;min-width:0;overflow-wrap:anywhere}
.gpd-hero__cat-count{font-size:12px;background:#eef2ff;color:#334155;border-radius:999px;padding:2px 8px;flex:0 0 auto}
@media (max-width:640px){
.gpd-hero{padding:26px 0 22px;border-radius:0;margin:0 0 16px}
.gpd-hero__title{font-size:25px}
.gpd-hero__desc{font-size:14px}
.gpd-hero__stats{gap:8px}
.gpd-hero__stat{font-size:13px;padding:6px 10px}
.gpd-hero__grid{gap:8px}
.gpd-hero__cat{flex:0 0 200px}
.gpd-hero__cat{padding:10px;gap:8px;font-size:13px}
.gpd-hero__cat-name{font-size:13px}
}

/* ==== Calculator result tables (EMI schedule etc.) ===================== */
.gp-calc__table-wrap { margin-top: 16px; max-height: 420px; overflow: auto; border: 1px solid var(--gp-border); border-radius: 12px; }
.gp-calc__table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 520px; }
.gp-calc__table th, .gp-calc__table td { padding: 9px 12px; text-align: right; border-bottom: 1px solid var(--gp-border); white-space: nowrap; }
.gp-calc__table th:first-child, .gp-calc__table td:first-child, .gp-calc__table th:nth-child(2), .gp-calc__table td:nth-child(2) { text-align: left; }
.gp-calc__table thead th { position: sticky; top: 0; background: var(--gp-card); font-weight: 700; color: var(--gp-muted); }
.gp-calc__table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--gp-primary) 4%, transparent); }

/* ==== Calculator engagement: chart, share bar, history ================= */
.gp-calc__chart { margin-top: 16px; }
.gp-calc__legend { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--gp-muted); margin-bottom: 8px; }
.gp-calc__sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-left: 10px; }
.gp-calc__sw--a { background: var(--gp-primary); }
.gp-calc__sw--b { background: #f59e0b; }
.gp-calc__bars { display: flex; align-items: flex-end; gap: 6px; height: 160px; overflow-x: auto; padding-bottom: 4px; border-bottom: 1px solid var(--gp-border); }
.gp-calc__bar { flex: 0 0 26px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.gp-calc__bar span { font-size: 10px; color: var(--gp-muted); margin-top: 4px; }
.gp-calc__stack { width: 100%; height: 100%; display: flex; flex-direction: column-reverse; justify-content: flex-start; }
.gp-calc__stack i { display: block; width: 100%; }
.gp-calc__seg--a { background: var(--gp-primary); border-radius: 4px 4px 0 0; }
.gp-calc__seg--b { background: #f59e0b; }
.gp-calc__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.gp-calc__share { display: inline-flex; align-items: center; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--gp-border); background: var(--gp-card); color: var(--gp-text); font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; }
.gp-calc__share:hover { border-color: var(--gp-primary); color: var(--gp-primary); }
.gp-calc__copied { font-size: 12px; color: var(--gp-muted); }
.gp-calc__hist { width: 100%; margin-top: 10px; font-size: 13px; }
.gp-calc__histlabel { display: block; font-weight: 700; color: var(--gp-muted); margin-bottom: 6px; }
.gp-calc__hist ul { list-style: none; margin: 0; padding: 0; }
.gp-calc__hist li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--gp-border); }
.gp-calc__hist small { color: var(--gp-muted); white-space: nowrap; }

/* ==== Category pages: full-width hero in the active theme colours; controls on one line ==== */
.gp-directory__head > .gpd-hero {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	border-radius: 0;
}
.gp-directory__head > .gpd-hero .gp-container { max-width: 1280px; }
.gp-directory__controls {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: center;
	gap: 10px;
	width: 100%;
}
.gp-directory__controls .gp-searchfield { flex: 1 1 auto; min-width: 0; max-width: none; }
.gp-directory__controls select,
.gp-directory__controls .gp-selectwrap { flex: 0 0 auto; width: auto; }
.gp-directory__controls .gp-viewtoggle { flex: 0 0 auto; }
@media (max-width: 640px) {
	.gp-directory__controls .gp-searchfield { min-width: 120px; }
}
.gp-directory__head .gp-directory__controls { margin-left: 0; margin-right: 0; }
@media (max-width: 640px) {
	.gp-directory__controls { gap: 6px; }
	.gp-directory__controls .gp-searchfield { min-width: 0; padding: 0 10px; }
	.gp-directory__controls select { width: 112px !important; font-size: 14px; padding: 9px 8px; }
	.gp-directory__controls .gp-viewtoggle button { padding: 6px; }
	.gp-directory__controls .gp-searchfield__input { font-size: 14px; padding: 10px 0; }
}
@media (max-width: 640px) {
	.gp-tools-child .gp-directory__controls,
	.gp-directory .gp-directory__controls {
		flex-direction: row !important;
		align-items: center !important;
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
		padding: 0 !important;
		margin: 0 0 12px !important;
		height: auto !important;
	}
	.gp-tools-child .gp-directory__controls .gp-searchfield { flex: 1 1 0 !important; height: 44px; }
}

/* ==== Single tool / calculator hero: full width, theme colours, decorative ===== */
.gp-calc__head {
	position: relative; overflow: hidden; isolation: isolate;
	width: 100vw; max-width: 100vw;
	margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
	margin-top: 4px; margin-bottom: 26px;
	border-radius: 0; box-shadow: none;
	padding-top: clamp(30px, 4.4vw, 60px); padding-bottom: clamp(30px, 4.4vw, 60px);
	padding-left: max(20px, calc((100vw - 1280px) / 2 + 24px));
	padding-right: max(20px, calc((100vw - 1280px) / 2 + 24px));
	background: linear-gradient(125deg, var(--gp-primary) 0%, var(--gp-secondary) 100%);
	align-items: flex-start; gap: clamp(16px, 2.4vw, 28px);
}
.gp-calc__head::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1.2px);
	background-size: 18px 18px;
	-webkit-mask-image: linear-gradient(115deg, #000 0%, transparent 70%);
	        mask-image: linear-gradient(115deg, #000 0%, transparent 70%);
}
.gp-calc__head::after {
	content: ""; position: absolute; right: -10%; top: -60%; width: 60%; height: 220%; z-index: -1; pointer-events: none;
	background: radial-gradient(closest-side, rgba(255, 255, 255, .22), transparent 70%);
}
.gp-calc__icon {
	width: 76px; height: 76px; border-radius: 22px;
	background: rgba(255, 255, 255, .16);
	border: 1px solid rgba(255, 255, 255, .38);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.gp-calc__icon .gp-icon, .gp-calc__icon svg { width: 34px; height: 34px; }
.gp-calc__badge {
	background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .3);
	padding: 5px 12px; margin-bottom: 12px; font-size: .74rem;
}
.gp-tools-child .gp-calc__title {
	font-size: clamp(1.9rem, 3.8vw, 3.1rem); line-height: 1.08; margin-bottom: 12px;
	text-shadow: 0 2px 18px rgba(0, 0, 0, .15);
}
.gp-calc__lede { max-width: 62ch; font-size: clamp(.98rem, 1.2vw, 1.08rem); line-height: 1.6; }
@media (max-width: 600px) {
	.gp-calc__head {
		flex-direction: row; align-items: flex-start;
		padding-left: 18px; padding-right: 18px;
	}
	.gp-calc__icon { width: 52px; height: 52px; border-radius: 16px; }
	.gp-calc__icon .gp-icon, .gp-calc__icon svg { width: 24px; height: 24px; }
	.gp-tools-child .gp-calc__title { font-size: 1.55rem; }
}

/* ==== Category chips: one tidy scrolling row on desktop and mobile ===== */
.gp-tools-child .gp-directory__head .gp-chips,
.gp-tools-child .gp-directory--center .gp-directory__head .gp-chips,
.gp-tools-child .gp-chips {
	display: flex !important;
	flex-wrap: nowrap !important;
	justify-content: flex-start !important;
	align-items: center;
	gap: 8px;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding: 4px 2px 12px;
	margin: 0 0 6px;
	width: 100%;
	box-sizing: border-box;
	-webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 36px), transparent 100%);
	        mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 36px), transparent 100%);
}
.gp-tools-child .gp-chips::-webkit-scrollbar { display: none; }
.gp-tools-child .gp-chips > * {
	flex: 0 0 auto !important;
	white-space: nowrap;
	height: 38px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0 14px;
	font-size: 14px;
	line-height: 1;
}
.gp-tools-child .gp-chips .gp-chip__count { font-size: 12px; }
@media (min-width: 1100px) {
	/* On wide screens the row only fades when it actually overflows. */
	.gp-tools-child .gp-chips { -webkit-mask-image: none; mask-image: none; }
}

/* ==== Align category controls with chips and cards (desktop) ============ */
@media (min-width: 1100px) {
	.gp-directory__head > .gp-container:has(.gp-directory__controls) {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}