/* 3pika Gallery – admin UI (v2, light + ink/lime, full width) */
body.tpg-admin, body.tpg-admin #wpwrap, body.tpg-admin #wpcontent, body.tpg-admin #wpbody, body.tpg-admin #wpfooter { background: #f3f4f6; }
body.tpg-admin #wpbody-content { padding-bottom: 60px; }
body.tpg-admin #wpcontent { padding-left: 0; }

.tpg-wrap {
	--tpg-ink: #0f0f0f;
	--tpg-ink-2: #262626;
	--tpg-lime: #d6f25a;
	--tpg-lime-2: #e6ff74;
	--tpg-lime-soft: #f3fbd3;
	--tpg-lime-line: #d9ec95;
	--tpg-focus: rgba(15, 15, 15, .12);
	--tpg-bg: #f3f4f6;
	--tpg-card: #ffffff;
	--tpg-card-2: #f6f7f9;
	--tpg-card-3: #eaedf1;
	--tpg-line: #dfe3e8;
	--tpg-line-2: #b9c1ca;
	--tpg-text: #14171a;
	--tpg-text-2: #5c6470;
	--tpg-text-3: #8b93a0;
	--tpg-danger: #d94141;
	--tpg-danger-soft: #fdecec;
	--tpg-ok: #1f8a5f;
	--tpg-ok-soft: #e6f4ee;
	--tpg-r: 16px;
	--tpg-r-sm: 10px;
	--tpg-shadow: 0 1px 2px rgba(15, 15, 15, .04), 0 10px 26px -14px rgba(15, 15, 15, .14);
	max-width: none;
	margin: 0 24px 0 20px;
	padding-top: 6px;
	color: var(--tpg-text);
	font-size: 13px;
}
.tpg-wrap *, .tpg-wrap *::before, .tpg-wrap *::after { box-sizing: border-box; }
.tpg-wrap svg { flex: none; }
.tpg-wrap h1, .tpg-wrap h2, .tpg-wrap h3 { color: var(--tpg-text); letter-spacing: -.01em; }
.tpg-wrap a { color: var(--tpg-text); }
.tpg-wrap code { background: var(--tpg-card-3); color: var(--tpg-text); border-radius: 6px; padding: 2px 6px; font-size: 12px; }
.tpg-wrap [hidden] { display: none !important; }
/* No WordPress focus rings (blue hairline) anywhere inside the plugin. */
.tpg-wrap a:focus, .tpg-wrap a:focus-visible, .tpg-wrap button:focus, .tpg-wrap button:focus-visible, .tpg-wrap .tpg-btn:focus-visible, .tpg-wrap .tpg-dd-btn:focus-visible, .tpg-wrap label:focus, .tpg-wrap input[type="checkbox"]:focus, .tpg-wrap input[type="radio"]:focus, .tpg-wrap input[type="color"]:focus, .tpg-wrap [tabindex]:focus, .tpg-modal a:focus, .tpg-modal button:focus { outline: none !important; box-shadow: none !important; }
.tpg-wrap .tpg-switch input:focus-visible + span { box-shadow: none; }
/* WordPress sets border-radius: 2px on focused links (a:focus) – keep our own shapes when clicked. */
.tpg-wrap a.tpg-btn, .tpg-wrap a.tpg-iconbtn, .tpg-wrap a.tpg-back, .tpg-wrap a.tpg-pro-badge, .tpg-wrap .tpg-topnav a, .tpg-wrap .tpg-tabs a,
.tpg-wrap a.tpg-btn:focus, .tpg-wrap a.tpg-iconbtn:focus, .tpg-wrap a.tpg-back:focus, .tpg-wrap a.tpg-pro-badge:focus, .tpg-wrap .tpg-topnav a:focus, .tpg-wrap .tpg-tabs a:focus,
.tpg-wrap a.tpg-btn:active, .tpg-wrap a.tpg-iconbtn:active, .tpg-wrap a.tpg-back:active { border-radius: 999px; }
.tpg-wrap .tpg-settings-nav a, .tpg-wrap .tpg-settings-nav a:focus { border-radius: var(--tpg-r-sm); }
.tpg-wrap a.tpg-brand:focus, .tpg-wrap a.tpg-collage:focus, .tpg-wrap .tpg-gcard-body h3 a:focus, .tpg-wrap .tpg-hint a:focus { border-radius: 0; }
.tpg-wrap ::selection { background: var(--tpg-lime); color: var(--tpg-ink); }
body.tpg-admin .notice { border-radius: 10px; margin: 6px 24px 14px 20px; border-left-width: 4px; }
body.tpg-admin .notice-success { border-left-color: #0f0f0f; }

/* ---------- Top bar (dark, lime accents) ---------- */
.tpg-topbar { display: flex; align-items: center; gap: 18px; background: var(--tpg-ink); color: #fff; border-radius: var(--tpg-r); padding: 10px 14px 10px 14px; margin: 14px 0 24px; box-shadow: 0 14px 34px -18px rgba(15, 15, 15, .7); }
.tpg-brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: #fff !important; margin-right: 8px; }
.tpg-brand-mark { width: 36px; height: 36px; border-radius: 10px; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); }
.tpg-brand-mark img { width: 36px; height: 36px; display: block; }
.tpg-brand-name { font-size: 15px; font-weight: 500; white-space: nowrap; }
.tpg-brand-name b { font-weight: 800; }
.tpg-brand-ver { font-size: 11px; color: rgba(255, 255, 255, .45); font-weight: 500; margin-left: 2px; }
.tpg-topnav { display: flex; gap: 2px; flex: 1; flex-wrap: wrap; }
.tpg-topnav a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px; color: rgba(255, 255, 255, .72) !important; text-decoration: none; font-weight: 600; font-size: 13px; transition: background .2s, color .2s; }
.tpg-topnav a:hover { background: rgba(255, 255, 255, .08); color: #fff !important; }
.tpg-topnav a.is-active { background: rgba(255, 255, 255, .12); color: #fff !important; }
.tpg-topnav a.is-active svg { color: #fff; }
.tpg-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.tpg-topbar .tpg-btn-primary { background: var(--tpg-lime); color: var(--tpg-ink) !important; border-color: var(--tpg-lime); box-shadow: none; }
.tpg-topbar .tpg-btn-primary:hover { background: #fff; border-color: #fff; }

/* ---------- Page head ---------- */
.tpg-pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: 0 0 20px; }
.tpg-pagehead h1 { font-size: 30px; font-weight: 800; margin: 0 0 4px; padding: 0; line-height: 1.15; display: flex; align-items: center; gap: 12px; }
.tpg-pagehead-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.tpg-lead { color: var(--tpg-text-2); font-size: 14px; margin: 0; line-height: 1.55; }
.tpg-hint { color: var(--tpg-text-3); font-size: 12.5px; margin: 10px 0 0; line-height: 1.55; }
.tpg-hint a { color: var(--tpg-text); font-weight: 600; }
.tpg-eyebrow { display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tpg-text-3); margin-bottom: 4px; }
.tpg-count-pill { font-size: 12px; font-weight: 700; background: var(--tpg-ink); color: #fff; border-radius: 999px; height: 26px; min-width: 26px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }

/* ---------- Buttons ---------- */
.tpg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 999px; font: 600 13px/1 inherit; font-family: inherit; text-decoration: none !important; cursor: pointer; border: 1px solid transparent; transition: background .2s, color .2s, border-color .2s, transform .15s, box-shadow .2s; white-space: nowrap; box-shadow: none; }
.tpg-btn:active { transform: none; filter: brightness(.96); }
.tpg-btn:focus-visible { outline: 2px solid var(--tpg-ink); outline-offset: 2px; }
.tpg-btn:disabled, .tpg-btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.tpg-btn-primary { background: var(--tpg-ink); color: #fff !important; border-color: var(--tpg-ink); box-shadow: 0 10px 22px -12px rgba(15, 15, 15, .7); }
.tpg-btn-primary:hover { background: var(--tpg-ink-2); border-color: var(--tpg-ink-2); color: #fff !important; }
.tpg-btn-primary svg { color: #fff; }
.tpg-btn-dark { background: #fff; color: var(--tpg-ink) !important; border-color: var(--tpg-ink); }
.tpg-btn-dark:hover { background: var(--tpg-ink); color: #fff !important; }
.tpg-btn-ghost { background: #fff; color: var(--tpg-text) !important; border-color: var(--tpg-line-2); box-shadow: 0 1px 2px rgba(15, 15, 15, .05); }
.tpg-btn-ghost:hover { border-color: var(--tpg-ink); }
.tpg-btn-danger-link { background: transparent; color: var(--tpg-danger) !important; padding: 0 10px; }
.tpg-btn-danger-link:hover { background: var(--tpg-danger-soft); }
.tpg-btn-sm { height: 32px; padding: 0 13px; font-size: 12.5px; }
.tpg-btn-lg { height: 46px; padding: 0 24px; font-size: 14px; }
.tpg-btn.is-saving { opacity: .6; pointer-events: none; }
.tpg-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 999px; background: #fff; border: 1px solid var(--tpg-line-2); color: var(--tpg-text-2) !important; cursor: pointer; text-decoration: none !important; position: relative; transition: border-color .2s, color .2s, background .2s; padding: 0; font: inherit; }
.tpg-iconbtn:hover { border-color: var(--tpg-ink); background: var(--tpg-ink); color: #fff !important; }
.tpg-iconbtn:disabled { opacity: .35; cursor: default; }
.tpg-iconbtn-danger:hover { border-color: var(--tpg-danger); background: var(--tpg-danger-soft); color: var(--tpg-danger) !important; }
.tpg-flip svg { transform: scaleX(-1); }
.tpg-chip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--tpg-card-3); color: var(--tpg-text-2); font-size: 12px; font-weight: 600; white-space: nowrap; }
.tpg-chip svg { width: 14px; height: 14px; }
.tpg-chip-lime { background: var(--tpg-lime); color: var(--tpg-ink); }
.tpg-chip-accent { background: var(--tpg-ink); color: #fff; }
.tpg-muted { color: var(--tpg-text-3); }

/* ---------- Panels / cards ---------- */
.tpg-panel { background: var(--tpg-card); border: 1px solid var(--tpg-line); border-radius: var(--tpg-r); padding: 24px 26px; box-shadow: var(--tpg-shadow); }
.tpg-panel h2 { margin: 0 0 6px; font-size: 20px; font-weight: 800; }
.tpg-upsell { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; background: var(--tpg-ink); color: #fff; padding: 18px 22px; margin: 0 0 22px; border-radius: var(--tpg-r); background-image: radial-gradient(circle at 100% 0, rgba(214, 242, 90, .22), transparent 40%); }
.tpg-upsell-text { display: grid; gap: 4px; flex: 1; min-width: 240px; }
.tpg-upsell-eyebrow { display: inline-flex; align-items: center; gap: 6px; color: var(--tpg-lime); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.tpg-upsell strong { font-size: 14px; font-weight: 600; line-height: 1.45; }
.tpg-upsell .tpg-btn-primary { background: var(--tpg-lime); color: var(--tpg-ink) !important; border-color: var(--tpg-lime); box-shadow: none; }
.tpg-upsell .tpg-btn-primary:hover { background: #fff; border-color: #fff; }
.tpg-empty { text-align: center; padding: 56px 20px; background: var(--tpg-card); border: 1px dashed var(--tpg-line-2); border-radius: var(--tpg-r); }
.tpg-empty-hero { padding: 90px 20px; }
.tpg-empty-icon { width: 64px; height: 64px; border-radius: 20px; background: var(--tpg-ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.tpg-empty-icon svg { width: 28px; height: 28px; }
.tpg-empty h2 { margin: 0 0 6px; font-size: 20px; font-weight: 800; }
.tpg-empty p { color: var(--tpg-text-2); max-width: 520px; margin: 0 auto 20px; font-size: 14px; line-height: 1.55; }

/* ---------- Gallery cards ---------- */
.tpg-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.tpg-gcard { background: var(--tpg-card); border: 1px solid var(--tpg-line); border-radius: var(--tpg-r); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--tpg-shadow); transition: transform .2s, box-shadow .2s, border-color .2s; }
.tpg-gcard:hover { transform: translateY(-2px); border-color: var(--tpg-line-2); box-shadow: 0 18px 40px -18px rgba(15, 15, 15, .3); }
.tpg-collage { position: relative; display: grid; gap: 2px; aspect-ratio: 16 / 10; background: var(--tpg-card-3); grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; overflow: hidden; }
.tpg-collage img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tpg-collage-0 { display: flex; align-items: center; justify-content: center; }
.tpg-collage-1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.tpg-collage-2 { grid-template-rows: 1fr; }
.tpg-collage-3 img:first-child { grid-row: 1 / 3; }
.tpg-collage-empty { color: var(--tpg-line-2); }
.tpg-collage-empty svg { width: 42px; height: 42px; }
.tpg-collage-badge { position: absolute; left: 10px; bottom: 10px; background: rgba(15, 15, 15, .82); color: #fff; font-size: 11px; font-weight: 700; padding: 5px 9px; border-radius: 999px; backdrop-filter: blur(4px); }
.tpg-gcard-body { padding: 16px 18px 12px; display: grid; gap: 10px; }
.tpg-gcard-body h3 { margin: 0; font-size: 16px; font-weight: 800; line-height: 1.3; }
.tpg-gcard-body h3 a { text-decoration: none; }
.tpg-gcard-body h3 a:hover { text-decoration: underline; text-decoration-color: var(--tpg-lime); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.tpg-gcard-meta { display: flex; align-items: center; gap: 10px; }
.tpg-gcard-date { font-size: 12px; color: var(--tpg-text-3); }
.tpg-gcard-actions { display: flex; align-items: center; gap: 6px; padding: 12px 18px 16px; border-top: 1px solid var(--tpg-line); margin-top: auto; }
.tpg-gcard-actions .tpg-btn { margin-right: auto; }

/* Shortcode chip */
.tpg-shortcode { display: inline-flex; align-items: stretch; max-width: 100%; background: var(--tpg-card-2); border: 1px solid var(--tpg-line); border-radius: 999px; overflow: hidden; }
.tpg-shortcode input, .tpg-wrap .tpg-shortcode input[type="text"] { font-family: Consolas, Menlo, monospace; font-size: 12px; width: 190px; max-width: 100%; margin: 0; background: transparent; border: 0; box-shadow: none; padding: 0 4px 0 14px; height: 34px; color: var(--tpg-text); min-height: 0; }
.tpg-shortcode input:focus { outline: none; box-shadow: none; }
.tpg-shortcode .tpg-copy { border: 0; background: transparent; color: var(--tpg-text-2); cursor: pointer; padding: 0 12px; display: inline-flex; align-items: center; transition: color .2s, background .2s; }
.tpg-shortcode .tpg-copy:hover { background: var(--tpg-ink); color: #fff; }

/* Import */
.tpg-import-form { margin: 0 0 22px; padding: 18px 22px; }
.tpg-import-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tpg-file { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; }
.tpg-file input { position: absolute; opacity: 0; width: 0; height: 0; }
.tpg-file-btn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 999px; border: 1px dashed var(--tpg-line-2); font-weight: 600; }
.tpg-file:hover .tpg-file-btn { border-color: var(--tpg-ink); }
.tpg-file-name { color: var(--tpg-text-3); font-size: 12.5px; }

/* Help */
.tpg-help { margin-top: 28px; background: var(--tpg-card); border: 1px solid var(--tpg-line); padding: 22px 26px; border-radius: var(--tpg-r); }
.tpg-help h3 { margin: 0 0 14px; font-size: 15px; font-weight: 800; }
.tpg-help-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.tpg-help-item { display: grid; gap: 3px; padding: 12px 14px; background: var(--tpg-card-2); border-radius: var(--tpg-r-sm); font-size: 12.5px; color: var(--tpg-text-2); line-height: 1.45; }
.tpg-help-item b { color: var(--tpg-text); font-size: 13px; }

/* ---------- Builder ---------- */
.tpg-builder .tpg-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: var(--tpg-card); border: 1px solid var(--tpg-line); padding: 12px 16px; border-radius: var(--tpg-r); position: sticky; top: 42px; z-index: 50; box-shadow: var(--tpg-shadow); }
.tpg-header-left, .tpg-header-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tpg-header-left { flex: 1; min-width: 260px; }
.tpg-back { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 999px; background: var(--tpg-card-3); color: var(--tpg-text-2) !important; text-decoration: none; transition: background .2s, color .2s; }
.tpg-back:hover { background: var(--tpg-ink); color: #fff !important; }
.tpg-header-title { display: grid; gap: 0; flex: 1; min-width: 0; }
.tpg-header-title .tpg-eyebrow { margin: 0 0 -2px 2px; font-size: 10px; }
.tpg-wrap .tpg-title-input { font-size: 18px; font-weight: 600; border: 0; border-bottom: 2px solid transparent; border-radius: 0; box-shadow: none; padding: 2px 2px 4px; width: 100%; max-width: 640px; min-width: 0; background: transparent; color: var(--tpg-text); letter-spacing: -.01em; }
.tpg-wrap .tpg-title-input::placeholder { color: var(--tpg-text-3); font-weight: 600; }
.tpg-wrap .tpg-title-input:focus { outline: none; border-bottom-color: var(--tpg-line-2); box-shadow: none; }

.tpg-tabs { display: inline-flex; gap: 4px; background: var(--tpg-card-3); padding: 4px; border-radius: 999px; margin: 18px 0 12px; }
.tpg-tabs a { padding: 9px 16px; border-radius: 999px; text-decoration: none; color: var(--tpg-text-2); font-weight: 600; display: inline-flex; align-items: center; gap: 8px; transition: background .2s, color .2s, box-shadow .2s; }
.tpg-tabs a:hover { color: var(--tpg-text); }
.tpg-tabs a.is-active { background: var(--tpg-ink); color: #fff; }
.tpg-tabs a.is-active svg { color: #fff; }
.tpg-tab-count { background: #fff; color: var(--tpg-text); border-radius: 999px; font-size: 10.5px; font-weight: 700; height: 20px; min-width: 20px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.tpg-tabs a.is-active .tpg-tab-count { background: #fff; color: var(--tpg-ink); }
.tpg-tab { display: none; background: var(--tpg-card); border: 1px solid var(--tpg-line); padding: 22px; border-radius: var(--tpg-r); min-height: 420px; box-shadow: var(--tpg-shadow); }
.tpg-tab.is-active { display: block; }
.tpg-tab-settings { padding: 0; }
.tpg-tab-settings .tpg-settings-nav { border-radius: var(--tpg-r) 0 0 var(--tpg-r); }

/* Toolbar */
.tpg-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.tpg-toolbar-sep { width: 1px; height: 26px; background: var(--tpg-line); margin: 0 4px; }
.tpg-toolbar-right { margin-left: auto; color: var(--tpg-text-3); font-size: 12px; }
.tpg-bulk { display: flex; align-items: center; gap: 8px; background: var(--tpg-lime-soft); border: 1px solid var(--tpg-lime-line); padding: 4px 6px 4px 12px; border-radius: 999px; }
.tpg-bulk-count { font-weight: 700; font-size: 12.5px; }

/* Custom checkbox */
.tpg-check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; color: var(--tpg-text-2); }
.tpg-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.tpg-check span { width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid var(--tpg-line-2); background: #fff; display: inline-flex; align-items: center; justify-content: center; transition: background .15s, border-color .15s; }
.tpg-check span::after { content: ""; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); opacity: 0; }
.tpg-check input:checked + span { background: var(--tpg-ink); border-color: var(--tpg-ink); }
.tpg-check input:checked + span::after { opacity: 1; }

/* Image grid */
.tpg-images { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.tpg-images:empty + .tpg-images-empty { display: block; }
.tpg-images-empty { display: none; }
.tpg-img { position: relative; background: var(--tpg-card-3); border-radius: 12px; overflow: hidden; aspect-ratio: 1 / 1; cursor: grab; outline: 3px solid transparent; outline-offset: -3px; transition: outline-color .15s, box-shadow .2s, transform .2s; }
.tpg-img:hover { box-shadow: 0 12px 26px -12px rgba(15, 15, 15, .4); }
.tpg-img.is-selected { outline-color: var(--tpg-lime); box-shadow: 0 0 0 1px var(--tpg-ink) inset, 0 0 0 1px var(--tpg-ink); }
.tpg-img.ui-sortable-helper { cursor: grabbing; transform: scale(1.04) rotate(1deg); box-shadow: 0 20px 44px -12px rgba(15, 15, 15, .5); }
.tpg-img-placeholder { background: var(--tpg-lime-soft); border-radius: 12px; border: 2px dashed var(--tpg-lime-line); }
.tpg-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tpg-img-check { position: absolute; top: 0; left: 0; z-index: 2; padding: 10px; cursor: pointer; }
.tpg-img-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.tpg-img-check span { display: block; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .92); border: 1.5px solid rgba(15, 15, 15, .2); box-shadow: 0 2px 6px rgba(0, 0, 0, .2); cursor: pointer; transition: background .15s, border-color .15s; position: relative; }
.tpg-img-check span::after { content: ""; position: absolute; left: 10px; top: 5px; width: 7px; height: 13px; border: solid var(--tpg-ink); border-width: 0 2px 2px 0; transform: rotate(45deg); opacity: 0; }
.tpg-img-check input:checked + span { background: #fff; border-color: #fff; }
.tpg-img-check input:checked + span::after { opacity: 1; }
.tpg-img-actions { position: absolute; top: 8px; right: 8px; display: flex; gap: 4px; opacity: 0; transition: opacity .15s; z-index: 2; }
.tpg-img:hover .tpg-img-actions, .tpg-img:focus-within .tpg-img-actions { opacity: 1; }
.tpg-img-actions button { width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .95); color: var(--tpg-ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); transition: background .15s, color .15s; }
.tpg-img-actions button svg { width: 14px; height: 14px; }
.tpg-img-actions button:hover { background: var(--tpg-ink); color: #fff; }
.tpg-img-actions .tpg-img-remove:hover { background: var(--tpg-danger); color: #fff; }
.tpg-img-tags { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; flex-wrap: wrap; gap: 3px; z-index: 2; pointer-events: none; }
.tpg-tag { font-size: 10px; font-weight: 600; background: rgba(255, 255, 255, .92); color: var(--tpg-ink); padding: 3px 7px; border-radius: 999px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; backdrop-filter: blur(3px); }
.tpg-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c, #fff); flex: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); }
.tpg-img-video { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; pointer-events: none; }
.tpg-img-video svg { width: 44px; height: 44px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5)); }
.tpg-img-caption { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(transparent, rgba(15, 15, 15, .75)); color: #fff; font-size: 11px; padding: 28px 10px 8px; pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpg-img-caption + .tpg-img-tags:not(:empty) { bottom: 26px; }

/* Filters */
.tpg-filters-panel { max-width: 820px; }
.tpg-filters-list { margin: 16px 0; display: grid; gap: 8px; }
.tpg-filter-row { display: flex; align-items: center; gap: 12px; background: var(--tpg-card-2); border: 1px solid var(--tpg-line); padding: 8px 12px 8px 10px; border-radius: 999px; transition: border-color .2s; }
.tpg-filter-row:hover { border-color: var(--tpg-line-2); }
.tpg-filter-row.ui-sortable-helper { box-shadow: 0 14px 30px -10px rgba(15, 15, 15, .35); background: #fff; border-color: var(--tpg-ink); }
.tpg-filter-row .tpg-handle { color: var(--tpg-text-3); cursor: grab; display: inline-flex; }
.tpg-wrap .tpg-filter-row input[type="text"] { flex: 1; border: 0; background: transparent; box-shadow: none; font-weight: 600; font-size: 14px; min-height: 0; height: 32px; padding: 0 4px; color: var(--tpg-text); }
.tpg-wrap .tpg-filter-row input[type="text"]:focus { outline: none; box-shadow: none; }
.tpg-wrap .tpg-filter-row input[type="color"] { width: 30px; height: 30px; padding: 0; border: 2px solid #fff; border-radius: 50%; background: none; cursor: pointer; box-shadow: 0 0 0 1px var(--tpg-line-2); overflow: hidden; }
.tpg-wrap .tpg-filter-row input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.tpg-wrap .tpg-filter-row input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 50%; }
.tpg-filter-row .tpg-filter-count { color: var(--tpg-text-3); font-size: 12px; min-width: 60px; text-align: right; }
.tpg-filter-row .tpg-filter-id { font-size: 11px; color: var(--tpg-text-3); background: #fff; cursor: help; border-radius: 999px; }
.tpg-filter-row .tpg-filter-delete { color: var(--tpg-text-3); background: none; border: 0; cursor: pointer; padding: 6px; border-radius: 50%; display: inline-flex; transition: color .15s, background .15s; }
.tpg-filter-row .tpg-filter-delete:hover { color: var(--tpg-danger); background: var(--tpg-danger-soft); }
.tpg-filter-limit-note { margin-top: 14px; }

/* Settings (builder tab + global page) */
.tpg-settings-form { display: flex; gap: 0; background: var(--tpg-card); }
.tpg-settings-page { margin-top: 0; border: 1px solid var(--tpg-line); border-radius: var(--tpg-r); box-shadow: var(--tpg-shadow); }
.tpg-settings-page .tpg-settings-nav { border-radius: var(--tpg-r) 0 0 var(--tpg-r); }
.tpg-settings-nav { width: 250px; flex-shrink: 0; background: var(--tpg-card-2); border-right: 1px solid var(--tpg-line); padding: 16px 12px; display: flex; flex-direction: column; gap: 4px; }
.tpg-settings-nav a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--tpg-r-sm); text-decoration: none; color: var(--tpg-text-2); font-weight: 600; font-size: 14.5px; transition: background .15s, color .15s; }
.tpg-settings-nav a svg { width: 20px; height: 20px; }
.tpg-settings-nav a svg { color: var(--tpg-text-3); }
.tpg-settings-nav a:hover { color: var(--tpg-text); background: var(--tpg-card-3); }
.tpg-settings-nav a.is-active { background: var(--tpg-ink); color: #fff; }
.tpg-settings-nav a.is-active svg { color: #fff; }
.tpg-settings-body { flex: 1; padding: 10px 28px 24px; min-width: 0; }
.tpg-section { display: none; }
.tpg-section.is-active { display: block; }
.tpg-section h3 { margin: 16px 0 4px; font-size: 17px; font-weight: 800; }
.tpg-field { display: flex; align-items: flex-start; gap: 24px; padding: 12px 0; border-bottom: 1px solid var(--tpg-line); }
.tpg-field:last-child { border-bottom: 0; }
.tpg-field-label { width: 260px; flex-shrink: 0; font-weight: 600; padding-top: 8px; color: var(--tpg-text); }
.tpg-field-input { flex: 1; min-width: 0; }
.tpg-field-input .description { margin: 6px 0 0; color: var(--tpg-text-3); font-size: 12.5px; }
.tpg-wrap .tpg-field input[type="text"], .tpg-wrap .tpg-field input[type="number"], .tpg-wrap .tpg-field select, .tpg-wrap .tpg-field textarea { border: 1px solid var(--tpg-line-2); border-radius: var(--tpg-r-sm); box-shadow: none; min-height: 0; height: 38px; line-height: 1.4; padding: 0 12px; color: var(--tpg-text); background: #fff; font-size: 13px; font-weight: 500; }
.tpg-wrap .tpg-field textarea { height: auto; padding: 10px 12px; line-height: 1.5; }
.tpg-wrap .tpg-field select { padding-right: 34px; max-width: 100%; }
.tpg-wrap .tpg-field input:focus, .tpg-wrap .tpg-field select:focus, .tpg-wrap .tpg-field textarea:focus { border-color: var(--tpg-ink); box-shadow: 0 0 0 3px var(--tpg-focus); outline: none; }
.tpg-wrap .tpg-field input[type="number"].small-text { width: 90px; }
.tpg-wrap .tpg-field input[type="color"] { width: 44px; height: 38px; padding: 3px; cursor: pointer; border: 1px solid var(--tpg-line-2); border-radius: var(--tpg-r-sm); background: #fff; }
.tpg-switch { position: relative; display: inline-block; width: 44px; height: 24px; margin-top: 7px; }
.tpg-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.tpg-switch span { position: absolute; inset: 0; background: var(--tpg-line-2); border-radius: 24px; cursor: pointer; transition: background .2s; }
.tpg-switch span::before { content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .2s, background .2s; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.tpg-switch input:checked + span { background: var(--tpg-ink); }
.tpg-switch input:checked + span::before { transform: translateX(20px); background: #fff; }
.tpg-switch input:focus-visible + span { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--tpg-ink); }
.tpg-media-field { display: flex; align-items: center; gap: 10px; }
.tpg-media-preview { width: 52px; height: 52px; object-fit: contain; background: var(--tpg-card-2); border-radius: var(--tpg-r-sm); border: 1px solid var(--tpg-line); }
.tpg-wrap .tpg-media-field .button { border-radius: 999px; }
.tpg-formbar { display: flex; align-items: center; gap: 10px; padding: 18px 0 0; margin-top: 8px; border-top: 1px solid var(--tpg-line); }

/* ---------- Modals ---------- */
.tpg-modal { position: fixed; inset: 0; z-index: 100000; background: rgba(15, 15, 15, .55); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 20px; }
.tpg-modal[hidden] { display: none; }
.tpg-modal-box { background: #fff; color: var(--tpg-text, #14171a); border-radius: 20px; width: 940px; max-width: 100%; max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .5); animation: tpg-pop .18s ease-out; }
@keyframes tpg-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.tpg-modal-small { width: 520px; }
.tpg-modal-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--tpg-line); }
.tpg-modal-head strong { font-size: 16px; font-weight: 800; }
.tpg-modal-nav { margin-left: auto; display: flex; gap: 6px; }
.tpg-modal-head .tpg-modal-close { margin-left: 4px; }
.tpg-modal-body { display: flex; gap: 22px; padding: 20px; overflow: auto; }
.tpg-modal-preview { flex: 1; min-width: 0; background: var(--tpg-card-2); border-radius: 14px; display: flex; align-items: center; justify-content: center; min-height: 300px; overflow: hidden; }
.tpg-modal-preview img { max-width: 100%; max-height: 60vh; object-fit: contain; display: block; }
.tpg-modal-fields { width: 320px; flex-shrink: 0; display: flex; flex-direction: column; gap: 14px; }
.tpg-modal-small .tpg-modal-fields { width: 100%; }
.tpg-modal-fields label, .tpg-modal-fields .tpg-label { display: block; font-weight: 600; font-size: 12.5px; color: var(--tpg-text-2); }
.tpg-wrap .tpg-modal-fields input[type="text"], .tpg-wrap .tpg-modal-fields input[type="url"], .tpg-wrap .tpg-modal-fields textarea { width: 100%; margin-top: 6px; border: 1px solid var(--tpg-line-2); border-radius: var(--tpg-r-sm); box-shadow: none; min-height: 38px; padding: 8px 12px; color: var(--tpg-text); background: #fff; font-weight: 500; }
.tpg-wrap .tpg-modal-fields input:focus, .tpg-wrap .tpg-modal-fields textarea:focus { border-color: var(--tpg-ink); box-shadow: 0 0 0 3px var(--tpg-focus); outline: none; }
.tpg-modal-filters label { display: flex; align-items: center; gap: 8px; font-weight: 500; padding: 6px 0; color: var(--tpg-text); cursor: pointer; }
.tpg-modal-filters .tpg-swatch { width: 10px; height: 10px; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); }
.tpg-modal-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--tpg-line); }
.tpg-modal-foot .tpg-btn-danger-link { margin-right: auto; }

/* Confirm dialog */
.tpg-confirm-box { width: 440px; padding: 28px 28px 22px; text-align: center; }
.tpg-confirm-icon { width: 54px; height: 54px; border-radius: 50%; background: var(--tpg-danger-soft); color: var(--tpg-danger); display: inline-flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.tpg-confirm-box.is-neutral .tpg-confirm-icon { background: var(--tpg-card-3); color: var(--tpg-ink); }
.tpg-confirm-box h3 { margin: 0 0 8px; font-size: 18px; font-weight: 800; }
.tpg-confirm-box p { margin: 0 0 22px; color: var(--tpg-text-2); font-size: 14px; line-height: 1.55; }
.tpg-confirm-actions { display: flex; justify-content: center; gap: 8px; }
.tpg-btn-danger { background: var(--tpg-danger); color: #fff !important; border-color: var(--tpg-danger); }
.tpg-btn-danger:hover { background: #b93434; border-color: #b93434; }

.tpg-toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--tpg-ink, #0f0f0f); color: #fff; padding: 12px 20px; border-radius: 999px; font-size: 13px; font-weight: 600; opacity: 0; transition: opacity .2s, transform .2s; z-index: 100001; pointer-events: none; box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .4); border-left: 5px solid var(--tpg-lime, #d6f25a); }
.tpg-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }
.tpg-toast.is-error { border-left-color: #ff6b6b; }

/* ---------- License ---------- */
.tpg-license-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 20px; align-items: start; }
.tpg-license-card.is-active { background: var(--tpg-ink); color: #fff; border-color: var(--tpg-ink); background-image: radial-gradient(circle at 100% 0, rgba(214, 242, 90, .2), transparent 45%); }
.tpg-license-card.is-active h2, .tpg-license-card.is-active dd { color: #fff; }
.tpg-license-card.is-active .tpg-eyebrow { color: var(--tpg-lime); }
.tpg-license-card.is-active dt { color: rgba(255, 255, 255, .55); }
.tpg-license-card.is-active .tpg-license-info > div { border-bottom-color: rgba(255, 255, 255, .1); }
.tpg-license-card.is-active code { background: rgba(255, 255, 255, .1); color: var(--tpg-lime); }
.tpg-license-card.is-active .tpg-btn-ghost { background: transparent; color: #fff !important; border-color: rgba(255, 255, 255, .3); }
.tpg-license-card.is-active .tpg-btn-ghost:hover { border-color: #fff; }
.tpg-license-card.is-active .tpg-btn-danger-link { color: #ff8b8b !important; }
.tpg-license-card.is-active .tpg-btn-danger-link:hover { background: rgba(255, 255, 255, .08); }
.tpg-license-hero { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.tpg-license-hero h2 { margin: 0; font-size: 22px; }
.tpg-license-check { width: 52px; height: 52px; border-radius: 50%; background: var(--tpg-lime); color: var(--tpg-ink); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.tpg-license-check svg { width: 24px; height: 24px; }
.tpg-license-info { margin: 0 0 22px; display: grid; gap: 0; }
.tpg-license-info > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--tpg-line); }
.tpg-license-info dt { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--tpg-text-3); }
.tpg-license-info dd { margin: 0; font-weight: 600; font-size: 14px; }
.tpg-license-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tpg-license-actions .tpg-btn-danger-link { margin-left: auto; }
.tpg-status { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--tpg-r-sm); font-weight: 600; margin: 0 0 16px; }
.tpg-status-valid { background: var(--tpg-ok-soft); color: var(--tpg-ok); }
.tpg-status-invalid { background: var(--tpg-danger-soft); color: var(--tpg-danger); }
.tpg-key-row { display: flex; gap: 10px; margin: 18px 0 0; flex-wrap: wrap; }
.tpg-wrap .tpg-key-input { flex: 1; min-width: 220px; height: 46px; border: 1.5px solid var(--tpg-line-2); border-radius: 999px; padding: 0 20px; font: 700 16px/1 Consolas, Menlo, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--tpg-text); background: #fff; box-shadow: none; }
.tpg-wrap .tpg-key-input::placeholder { color: var(--tpg-text-3); }
.tpg-wrap .tpg-key-input:focus { border-color: var(--tpg-ink); box-shadow: 0 0 0 3px var(--tpg-focus); outline: none; }
.tpg-compare { width: 100%; border-collapse: collapse; margin-top: 16px; }
.tpg-compare th, .tpg-compare td { padding: 10px 10px; border-bottom: 1px solid var(--tpg-line); text-align: center; font-size: 13px; }
.tpg-compare th { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--tpg-text-3); padding-bottom: 12px; }
.tpg-compare td:first-child, .tpg-compare th:first-child { text-align: left; color: var(--tpg-text); }
.tpg-compare td:last-child { background: var(--tpg-lime-soft); }
.tpg-compare tbody tr:last-child td { border-bottom: 0; }
.tpg-yes { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; background: var(--tpg-ink); color: #fff; align-items: center; justify-content: center; }
.tpg-yes svg { width: 13px; height: 13px; }
.tpg-no { color: var(--tpg-line-2); display: inline-flex; }
.tpg-license-cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 20px; }
.tpg-license-cta .tpg-hint { margin: 0; }
.tpg-madeby { margin-top: 18px; }

/* ---------- Custom dropdown (wraps every <select>) ---------- */
.tpg-dd { position: relative; display: inline-block; min-width: 180px; max-width: 100%; vertical-align: middle; }
.tpg-dd > select { position: absolute !important; opacity: 0; pointer-events: none; width: 1px; height: 1px; left: 0; top: 0; margin: 0; }
.tpg-dd-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; height: 38px; padding: 0 12px 0 14px; border: 1px solid var(--tpg-line-2); border-radius: var(--tpg-r-sm); background: #fff; font: 500 13px/1 inherit; font-family: inherit; color: var(--tpg-text); cursor: pointer; text-align: left; transition: border-color .15s, box-shadow .15s; }
.tpg-dd-btn:hover { border-color: var(--tpg-text-3); }
.tpg-dd-btn:focus-visible, .tpg-dd.is-open .tpg-dd-btn { outline: none; border-color: var(--tpg-ink); box-shadow: 0 0 0 3px var(--tpg-focus); }
.tpg-dd-btn:disabled { cursor: not-allowed; background: var(--tpg-card-2); }
.tpg-dd-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpg-dd-btn svg { width: 14px; height: 14px; color: var(--tpg-text-3); transition: transform .2s; }
.tpg-dd.is-open .tpg-dd-btn svg { transform: rotate(180deg); color: var(--tpg-ink); }
.tpg-dd-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 100%; background: #fff; border: 1px solid var(--tpg-line); border-radius: 12px; box-shadow: 0 18px 44px -14px rgba(15, 15, 15, .35); padding: 6px; z-index: 80; max-height: 300px; overflow: auto; display: none; }
.tpg-dd.is-open .tpg-dd-menu { display: block; animation: tpg-pop .14s ease-out; }
.tpg-dd.is-up .tpg-dd-menu { top: auto; bottom: calc(100% + 6px); }
.tpg-dd-opt { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 12px; border-radius: 8px; cursor: pointer; font-weight: 500; font-size: 13px; white-space: nowrap; color: var(--tpg-text); }
.tpg-dd-opt:hover, .tpg-dd-opt.is-focus { background: var(--tpg-card-2); }
.tpg-dd-opt.is-selected { background: var(--tpg-ink); color: #fff; }
.tpg-dd-opt.is-selected svg { color: #fff; width: 14px; height: 14px; }
.tpg-dd-opt.is-disabled { opacity: .5; cursor: not-allowed; }
.tpg-dd-opt.is-disabled:hover { background: transparent; }
.tpg-dd-sm { min-width: 150px; }
.tpg-dd-sm .tpg-dd-btn { height: 30px; border-radius: 999px; font-size: 12.5px; padding: 0 10px 0 12px; }

/* ---------- Image tiles: file name under the thumbnail ---------- */
.tpg-img { aspect-ratio: auto; background: transparent; border-radius: 12px; outline: none; }
.tpg-img:hover { box-shadow: none; }
.tpg-img.is-selected { box-shadow: none; }
.tpg-img-thumb { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 12px; background: var(--tpg-card-3); outline: 3px solid transparent; outline-offset: -3px; transition: outline-color .15s, box-shadow .2s; }
.tpg-img:hover .tpg-img-thumb { box-shadow: 0 12px 26px -12px rgba(15, 15, 15, .4); }
.tpg-img.is-selected .tpg-img-thumb { outline-color: var(--tpg-ink); }
.tpg-img-name { display: block; margin-top: 6px; font-size: 11px; color: var(--tpg-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 2px; font-family: Consolas, Menlo, monospace; }
.tpg-img.ui-sortable-helper .tpg-img-name { opacity: 0; }

/* Filter colour: automatic (accent) vs own */
.tpg-filter-color { position: relative; display: inline-flex; align-items: center; }
.tpg-filter-color.is-auto input[type="color"] { opacity: .55; box-shadow: 0 0 0 1px var(--tpg-line-2), 0 0 0 3px #fff, 0 0 0 4px var(--tpg-line-2); }
.tpg-filter-color-reset { position: absolute; top: -6px; right: -6px; width: 16px; height: 16px; border-radius: 50%; border: 0; background: var(--tpg-ink); color: #fff; cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.tpg-filter-color-reset svg { width: 9px; height: 9px; }
.tpg-filter-color-reset:hover { background: var(--tpg-danger); }

/* Filter text colour swatch ("Aa") */
.tpg-filter-text { margin-left: -2px; }
.tpg-filter-text input[type="color"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 30px; height: 30px; }
.tpg-filter-text b { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--tpg-line-2); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; background: #9aa1ab; pointer-events: none; }
.tpg-filter-text.is-auto b { opacity: .7; }
.tpg-filter-row .tpg-filter-text b { background: #7c8591; }

/* Remove selected */
.tpg-btn-danger-outline { background: #fff; color: var(--tpg-danger) !important; border-color: var(--tpg-danger); }
.tpg-btn-danger-outline:hover { background: var(--tpg-danger); color: #fff !important; }

/* Video source row in the modal */
.tpg-video-source { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tpg-video-source .tpg-hint { margin: 0; font-family: Consolas, Menlo, monospace; }
.tpg-or { font-size: 12px; color: var(--tpg-text-3); }

/* Show more (large galleries) */
.tpg-more-wrap { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 22px 0 6px; }
.tpg-more-wrap .tpg-hint { margin: 0 8px 0 0; }

/* Filters inside the image modal: same black checkbox, dot in the filter colour */
.tpg-modal-filters .tpg-check { display: flex; gap: 10px; padding: 7px 0; color: var(--tpg-text); font-weight: 500; }
.tpg-modal-filters .tpg-check .tpg-swatch { width: 10px; height: 10px; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); margin-right: -2px; }

/* Toast a bit longer for server messages */
.tpg-toast { max-width: min(90vw, 560px); text-align: center; }

/* Filter pills in the Images tab (view one filter) */
.tpg-view-filters { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.tpg-vf { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--tpg-line-2); background: #fff; color: var(--tpg-text-2); font: 600 12.5px/1 inherit; font-family: inherit; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.tpg-vf:hover { border-color: var(--tpg-ink); color: var(--tpg-text); }
.tpg-vf.is-on { background: var(--tpg-ink); border-color: var(--tpg-ink); color: #fff; }
.tpg-vf i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); }
.tpg-vf.is-on i { box-shadow: 0 0 0 1px rgba(255, 255, 255, .5); }
.tpg-vf b { font-weight: 700; opacity: .6; }
.tpg-images.is-filtered .tpg-img { cursor: default; }

/* Colour bar above the filter list */
.tpg-filters-colorbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; margin: 14px 0 12px; background: var(--tpg-card-2); border: 1px solid var(--tpg-line); border-radius: 12px; }
.tpg-colorbar-label { font-weight: 700; font-size: 12.5px; margin-right: 4px; }
.tpg-filters-colorbar .tpg-filter-color input[type="color"] { width: 30px; height: 30px; padding: 0; border: 2px solid #fff; border-radius: 50%; background: none; cursor: pointer; box-shadow: 0 0 0 1px var(--tpg-line-2); overflow: hidden; }
.tpg-filters-colorbar .tpg-filter-color input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.tpg-filters-colorbar .tpg-filter-color input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 50%; }
.tpg-filters-colorbar .tpg-filter-text input[type="color"] { position: absolute; inset: 0; opacity: 0; }
.tpg-filters-colorbar .tpg-filter-text b { opacity: 1; }

/* Layout previews (choice cards) */
.tpg-pl { display: grid; gap: 2px; width: 64px; height: 40px; }
.tpg-pl b { background: #14171a; border-radius: 2px; opacity: .85; }
.tpg-pl-grid { grid-template-columns: repeat(3, 1fr); }
.tpg-pl-masonry { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 8px; grid-auto-flow: dense; }
.tpg-pl-masonry b:nth-child(1) { grid-row: span 3; } .tpg-pl-masonry b:nth-child(2) { grid-row: span 2; } .tpg-pl-masonry b:nth-child(3) { grid-row: span 4; } .tpg-pl-masonry b:nth-child(4) { grid-row: span 2; } .tpg-pl-masonry b:nth-child(5) { grid-row: span 3; } .tpg-pl-masonry b:nth-child(6) { grid-row: span 1; }
.tpg-pl-justified { display: flex; flex-wrap: wrap; }
.tpg-pl-justified b { height: 19px; } .tpg-pl-justified b:nth-child(1) { width: 26px; } .tpg-pl-justified b:nth-child(2) { width: 16px; } .tpg-pl-justified b:nth-child(3) { width: 18px; } .tpg-pl-justified b:nth-child(4) { width: 20px; } .tpg-pl-justified b:nth-child(5) { width: 42px; }
.tpg-pl-mosaic { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; }
.tpg-pl-mosaic b:first-child { grid-column: span 2; grid-row: span 2; }
.tpg-pl-list { grid-template-columns: 1fr; }
.tpg-pl-slider { display: flex; align-items: center; gap: 3px; }
.tpg-pl-slider b { flex: 1; height: 28px; }
.tpg-pl-slider i { font-style: normal; font-weight: 800; color: #8b93a0; font-size: 14px; line-height: 1; }
.tpg-pv-chips i { font-size: 7.5px; padding: 2px 5px; }
.tpg-pv-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; width: 84px; }
.tpg-pv-grid2 i { text-align: center; }
.tpg-pv-stack { display: grid; grid-template-columns: 1fr; gap: 3px; width: 84px; }
.tpg-pv-stack i { text-align: left; }

/* Compact choice cards so 8 fit on one row */
.tpg-field-label { width: 220px; }

/* Corner radius control */
.tpg-radius { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tpg-wrap .tpg-radius .tpg-radius-all { width: 80px; }
.tpg-radius-lock { width: 38px; height: 38px; border-radius: var(--tpg-r-sm); border: 1px solid var(--tpg-line-2); background: #fff; color: var(--tpg-text-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.tpg-radius-lock:hover { border-color: var(--tpg-ink); color: var(--tpg-ink); }
.tpg-radius.is-linked .tpg-radius-lock { background: var(--tpg-ink); border-color: var(--tpg-ink); color: #fff; }
.tpg-radius .tpg-i-unlock, .tpg-radius.is-linked .tpg-i-lock { display: block; }
.tpg-radius .tpg-i-lock, .tpg-radius.is-linked .tpg-i-unlock { display: none; }
.tpg-radius-corners { display: inline-flex; gap: 6px; }
.tpg-radius.is-linked .tpg-radius-corners { opacity: .45; pointer-events: none; }
.tpg-radius-c { display: inline-flex; align-items: center; gap: 4px; }
.tpg-radius-c i { width: 14px; height: 14px; border: 2px solid var(--tpg-line-2); display: inline-block; border-radius: 0; }
.tpg-radius-c0 i { border-top-left-radius: 6px; border-top-color: var(--tpg-ink); border-left-color: var(--tpg-ink); }
.tpg-radius-c1 i { border-top-right-radius: 6px; border-top-color: var(--tpg-ink); border-right-color: var(--tpg-ink); }
.tpg-radius-c2 i { border-bottom-right-radius: 6px; border-bottom-color: var(--tpg-ink); border-right-color: var(--tpg-ink); }
.tpg-radius-c3 i { border-bottom-left-radius: 6px; border-bottom-color: var(--tpg-ink); border-left-color: var(--tpg-ink); }
.tpg-wrap .tpg-radius-c input[type="number"] { width: 64px; }
.tpg-vf-none i { background: transparent; border: 1.5px dashed var(--tpg-text-3); box-shadow: none; }
.tpg-vf-none.is-on i { border-color: #fff; }

/* Wider dropdowns in settings */
.tpg-field .tpg-dd { min-width: 260px; }

/* Colour presets */
.tpg-color-field { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tpg-presets { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.tpg-preset { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; background: var(--c); cursor: pointer; padding: 0; box-shadow: 0 0 0 1px var(--tpg-line-2); transition: transform .15s, box-shadow .15s; }
.tpg-preset:hover { transform: scale(1.12); }
.tpg-preset.is-on { box-shadow: 0 0 0 2px var(--tpg-ink); }
.tpg-preset:disabled { opacity: .4; cursor: not-allowed; transform: none; }

/* Visual choice cards (filter style, hover icon) */
.tpg-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.tpg-choice { position: relative; display: grid; gap: 6px; width: 108px; padding: 8px 8px 7px; border: 1.5px solid var(--tpg-line); border-radius: 10px; background: #fff; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.tpg-choice-prev { min-height: 38px; padding: 6px; }
.tpg-choice-name { font-size: 11px; }
.tpg-pv i { font-size: 8.5px; padding: 3px 6px; }
.tpg-pv-wrap { flex-wrap: wrap; justify-content: center; max-width: 92px; row-gap: 3px; }
.tpg-pv-scroll { flex-wrap: nowrap; max-width: 96px; overflow: hidden; -webkit-mask-image: linear-gradient(to right, #000 70%, transparent); mask-image: linear-gradient(to right, #000 70%, transparent); }
.tpg-pv-scroll i { flex: none; }
.tpg-choice:hover { border-color: var(--tpg-line-2); }
.tpg-choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.tpg-choice:has(input:checked) { border-color: var(--tpg-ink); box-shadow: 0 0 0 1px var(--tpg-ink); }
.tpg-choice-prev { display: flex; align-items: center; justify-content: center; min-height: 46px; background: var(--tpg-card-2); border-radius: 8px; padding: 8px; overflow: hidden; }
.tpg-choice-name { font-size: 12px; font-weight: 600; text-align: center; color: var(--tpg-text-2); }
.tpg-choice:has(input:checked) .tpg-choice-name { color: var(--tpg-text); }
.tpg-pv { display: inline-flex; gap: 4px; align-items: center; }
.tpg-pv i { font-style: normal; font-size: 9.5px; font-weight: 600; padding: 4px 8px; border: 1px solid #cdd3da; border-radius: 6px; color: #14171a; background: #fff; line-height: 1; }
.tpg-pv i.on { background: #14171a; border-color: #14171a; color: #fff; }
.tpg-pv-pills i { border-radius: 999px; }
.tpg-pv-square i { border-radius: 0; }
.tpg-pv-soft i { border-color: transparent; background: #e6e9ee; }
.tpg-pv-soft i.on { background: #14171a; }
.tpg-pv-outline i { border-radius: 999px; border-width: 1.5px; background: transparent; }
.tpg-pv-outline i.on { background: transparent; color: #14171a; border-color: #14171a; }
.tpg-pv-underline i { border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; padding: 4px 4px; }
.tpg-pv-underline i.on { background: transparent; color: #14171a; border-bottom-color: #14171a; }
.tpg-pv-text i { border: 0; background: transparent; color: #8b93a0; padding: 4px 5px; }
.tpg-pv-text i.on { background: transparent; color: #14171a; font-weight: 800; }
.tpg-pv-dropdown i { border-radius: 6px; padding: 5px 10px; background: #fff; color: #14171a; min-width: 60px; text-align: left; }
.tpg-pv-icon { width: 30px; height: 30px; border-radius: 50%; background: #14171a; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.tpg-pv-icon svg { width: 16px; height: 16px; }
.tpg-pv-icon.is-none { background: transparent; color: #8b93a0; font-size: 16px; }

@media (max-width: 960px) {
	.tpg-license-grid { grid-template-columns: 1fr; }
	.tpg-settings-form { flex-direction: column; }
	.tpg-settings-nav { width: auto; flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--tpg-line); border-radius: var(--tpg-r) var(--tpg-r) 0 0 !important; }
	.tpg-field { flex-direction: column; gap: 6px; }
	.tpg-field-label { width: auto; padding-top: 0; }
	.tpg-modal-body { flex-direction: column; }
	.tpg-modal-fields { width: auto; }
	.tpg-builder .tpg-header { position: static; }
	.tpg-topbar { flex-wrap: wrap; }
	.tpg-topbar-right { margin-left: 0; }
	.tpg-wrap { margin: 0 12px; }
}
@media (max-width: 600px) {
	.tpg-topnav a span { display: none; }
	.tpg-brand-ver { display: none; }
	.tpg-cards { grid-template-columns: 1fr; }
}


/* Hover-effect previews */
.tpg-ph { position: relative; width: 44px; height: 34px; border-radius: 5px; background: linear-gradient(135deg, #5c6470, #14171a); overflow: hidden; display: block; }
.tpg-ph::after { content: ""; position: absolute; inset: 0; border-radius: 5px; }
.tpg-ph-zoom { background-size: 130%; background-position: center; }
.tpg-ph-zoom::after { box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .35); }
.tpg-ph-fade { opacity: .45; }
.tpg-ph-overlay::after { background: rgba(214, 242, 90, .55); }
.tpg-ph-slide::after { top: auto; height: 12px; background: rgba(0, 0, 0, .75); border-radius: 0; }
.tpg-ph-blur { filter: blur(1.5px); }
.tpg-ph-grayscale { background: linear-gradient(135deg, #b0b0b0, #4a4a4a); }
.tpg-ph-grayscale::after { background: linear-gradient(135deg, #5c6470, #14171a); clip-path: inset(0 0 0 50%); }
.tpg-ph-tilt { transform: rotate(-6deg) scale(.92); }
.tpg-ph-shine::after { background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%); }
.tpg-ph-lift { transform: translateY(-3px); box-shadow: 0 8px 12px -4px rgba(15, 15, 15, .55); }
.tpg-ph-none { background: #cfd4db; }
.tpg-choice input[disabled] { display: none !important; }

/* Pagination previews */
.tpg-pp { display: inline-flex; align-items: center; gap: 3px; font-size: 9px; font-weight: 700; color: #14171a; }
.tpg-pp i { font-style: normal; display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; border: 1px solid #cdd3da; border-radius: 4px; background: #fff; }
.tpg-pp i.on { background: #14171a; color: #fff; border-color: #14171a; }
.tpg-pp-none i { border: 0; background: #cfd4db; width: 10px; min-width: 0; height: 10px; border-radius: 2px; }
.tpg-pp-loadmore i { border-radius: 999px; padding: 0 9px; height: 18px; }
.tpg-pp-dots i { width: 7px; min-width: 0; height: 7px; padding: 0; border-radius: 50%; border: 0; background: #cdd3da; }
.tpg-pp-dots i.on { background: #14171a; }
.tpg-pp-infinite i { border: 0; background: transparent; font-size: 14px; }

/* One card only (Free edition: comparison without the licence card) */
.tpg-license-grid > .tpg-panel:only-child { grid-column: 1 / -1; max-width: 900px; }