/*!
 * GiniTool — interface styles.
 *
 * One stylesheet, no framework, no build step. Everything is tokenised at the
 * top so a colour or radius changes in one place. Layout uses grid and flex
 * with intrinsic sizing, so it adapts without a long list of breakpoints.
 */

/* ==========================================================================
   Tokens
   ========================================================================== */

:root {
	--gini-brass: #e8a33d;
	--gini-brass-deep: #b97417;
	--gini-brass-soft: #fff4e0;
	--gini-indigo: #242457;
	--gini-indigo-deep: #14142f;
	--gini-teal: #2fc9b4;
	--gini-teal-soft: #e6f9f6;
	--gini-cloud: #f7f8fb;
	--gini-ink: #1b1b2f;
	--gini-muted: #5a5a82;
	--gini-line: #e3e5ef;
	--gini-danger: #d6455d;
	--gini-danger-soft: #fdecef;
	--gini-white: #fff;

	--gini-radius: 12px;
	--gini-radius-lg: 18px;
	--gini-radius-pill: 999px;

	--gini-shadow-sm: 0 1px 2px rgba(20, 20, 47, .06), 0 2px 6px rgba(20, 20, 47, .04);
	--gini-shadow: 0 2px 6px rgba(20, 20, 47, .06), 0 12px 28px rgba(20, 20, 47, .08);
	--gini-shadow-lg: 0 8px 20px rgba(20, 20, 47, .1), 0 28px 60px rgba(20, 20, 47, .12);

	--gini-font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
		Roboto, "Helvetica Neue", Arial, sans-serif;
	--gini-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
		"Liberation Mono", monospace;

	--gini-wrap: 1180px;
	--gini-gutter: 20px;
	--gini-ease: cubic-bezier(.22, .68, .36, 1);
}

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

/* An author `display` rule beats the browser's own rule for [hidden], which
   silently breaks every toggle in this stylesheet. This puts it back. */
[hidden] { display: none !important; }

.gini-icon { flex: none; }

.gini-wrap {
	width: 100%;
	max-width: var(--gini-wrap);
	margin-inline: auto;
	padding-inline: var(--gini-gutter);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* A visible focus ring everywhere, because keyboard users exist and the
   default outline is removed by most resets. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--gini-teal);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.gini-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 18px;
	border: 1px solid transparent;
	border-radius: var(--gini-radius);
	font: inherit;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.2;
	cursor: pointer;
	text-decoration: none;
	background: var(--gini-white);
	color: var(--gini-indigo);
	transition: background .16s var(--gini-ease), border-color .16s var(--gini-ease),
		transform .1s var(--gini-ease), box-shadow .16s var(--gini-ease);
}

.gini-btn:hover { background: var(--gini-cloud); }
.gini-btn:active { transform: translateY(1px); }

.gini-btn--primary {
	/* Brass is a surface colour: at 2.3:1 on white it fails contrast as text,
	   so the label is deep indigo (7.9:1 on brass) rather than white. */
	background: var(--gini-brass);
	color: var(--gini-indigo-deep);
	box-shadow: var(--gini-shadow-sm);
}
.gini-btn--primary:hover { background: #f0b055; }

.gini-btn--ghost {
	background: transparent;
	border-color: var(--gini-line);
	color: var(--gini-muted);
}
.gini-btn--ghost:hover { background: var(--gini-cloud); color: var(--gini-indigo); }

.gini-btn--quiet {
	background: transparent;
	color: var(--gini-muted);
	font-weight: 500;
	font-size: 14px;
	padding: 9px 12px;
}
.gini-btn--quiet:hover { color: var(--gini-danger); background: var(--gini-danger-soft); }

.gini-btn--lg { padding: 15px 28px; font-size: 17px; }

.gini-btn[disabled] { opacity: .5; cursor: not-allowed; }

.gini-iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px; height: 32px;
	border: 1px solid var(--gini-line);
	border-radius: 8px;
	background: var(--gini-white);
	color: var(--gini-muted);
	cursor: pointer;
	transition: .15s var(--gini-ease);
}
.gini-iconbtn:hover:not([disabled]) { color: var(--gini-indigo); border-color: var(--gini-muted); }
.gini-iconbtn[disabled] { opacity: .35; cursor: not-allowed; }
.gini-file__remove:hover:not([disabled]) { color: var(--gini-danger); border-color: var(--gini-danger); }

/* ==========================================================================
   Search
   ========================================================================== */

.gini-search { position: relative; width: 100%; max-width: 640px; margin-inline: auto; }

.gini-search__field {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--gini-white);
	border: 2px solid var(--gini-line);
	border-radius: var(--gini-radius-pill);
	padding: 4px 8px 4px 20px;
	box-shadow: var(--gini-shadow);
	transition: border-color .16s var(--gini-ease), box-shadow .16s var(--gini-ease);
}
.gini-search__field:focus-within {
	border-color: var(--gini-brass);
	box-shadow: var(--gini-shadow-lg);
}
.gini-search__icon { color: var(--gini-muted); }

.gini-search__input {
	flex: 1;
	border: 0;
	background: none;
	padding: 15px 0;
	font: inherit;
	font-size: 17px;
	color: var(--gini-ink);
	min-width: 0;
}
.gini-search__input:focus { outline: none; }
.gini-search__input::-webkit-search-cancel-button { display: none; }

.gini-search__clear {
	border: 0; background: none; cursor: pointer;
	color: var(--gini-muted); padding: 8px; border-radius: 50%;
	display: inline-flex;
}
.gini-search__clear:hover { background: var(--gini-cloud); color: var(--gini-ink); }

.gini-search__results {
	position: absolute;
	inset-inline: 0;
	top: calc(100% + 8px);
	z-index: 60;
	margin: 0; padding: 6px;
	list-style: none;
	background: var(--gini-white);
	border: 1px solid var(--gini-line);
	border-radius: var(--gini-radius-lg);
	box-shadow: var(--gini-shadow-lg);
	max-height: min(60vh, 420px);
	overflow-y: auto;
	text-align: start;
}
.gini-search__results li a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 14px;
	border-radius: 10px;
	text-decoration: none;
	color: var(--gini-ink);
}
.gini-search__results li a:hover,
.gini-search__results li.is-active a { background: var(--gini-cloud); }
.gini-search__name { font-weight: 600; flex: 1; }
.gini-search__name mark { background: #ffe9c2; color: inherit; border-radius: 3px; padding: 0 2px; }
.gini-search__cat { font-size: 13px; color: var(--gini-muted); }
.gini-search__badge {
	font-size: 11px; font-weight: 600;
	background: var(--gini-teal-soft); color: #0e6d60;
	padding: 3px 8px; border-radius: var(--gini-radius-pill);
}
.gini-search__empty { padding: 16px; color: var(--gini-muted); font-size: 15px; }

/* ==========================================================================
   Cards
   ========================================================================== */

.gini-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
	gap: 14px;
}
.gini-grid--compact { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }

.gini-card {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 13px;
	padding: 17px;
	background: var(--gini-white);
	border: 1px solid var(--gini-line);
	border-radius: var(--gini-radius);
	text-decoration: none;
	color: inherit;
	transition: border-color .16s var(--gini-ease), transform .16s var(--gini-ease),
		box-shadow .16s var(--gini-ease);
}
.gini-card:hover {
	border-color: var(--gini-brass);
	transform: translateY(-2px);
	box-shadow: var(--gini-shadow);
}
.gini-card__icon {
	display: grid; place-items: center;
	width: 42px; height: 42px;
	flex: none;
	border-radius: 10px;
	background: var(--gini-brass-soft);
	color: var(--gini-brass-deep);
}
.gini-card__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gini-card__name { font-weight: 700; color: var(--gini-indigo); }
.gini-card__summary { font-size: 13.5px; color: var(--gini-muted); line-height: 1.45; }
.gini-card__badge {
	align-self: flex-start;
	margin-top: 3px;
	font-size: 10.5px; font-weight: 600;
	background: var(--gini-teal-soft); color: #0e6d60;
	padding: 3px 8px; border-radius: var(--gini-radius-pill);
	white-space: nowrap;
}

/* Category cards */
.gini-cats {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
	gap: 16px;
}
.gini-cat {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 22px;
	background: var(--gini-white);
	border: 1px solid var(--gini-line);
	border-radius: var(--gini-radius-lg);
	text-decoration: none;
	color: inherit;
	transition: .18s var(--gini-ease);
	border-top: 3px solid var(--cat-color, var(--gini-brass));
}
.gini-cat:hover { transform: translateY(-3px); box-shadow: var(--gini-shadow); }
.gini-cat__head { display: flex; align-items: center; gap: 11px; }
.gini-cat__icon {
	display: grid; place-items: center;
	width: 38px; height: 38px; border-radius: 10px;
	background: color-mix(in srgb, var(--cat-color) 14%, transparent);
	color: var(--cat-color);
}
.gini-cat__name { font-weight: 800; font-size: 18px; color: var(--gini-indigo); flex: 1; }
.gini-cat__count { font-size: 12.5px; color: var(--gini-muted); }
.gini-cat__tagline { font-size: 14.5px; color: var(--gini-ink); line-height: 1.5; }
.gini-cat__list { font-size: 13px; color: var(--gini-muted); line-height: 1.6; }
.gini-cat__cta {
	margin-top: auto; padding-top: 6px;
	display: inline-flex; align-items: center; gap: 5px;
	font-weight: 600; font-size: 14px; color: var(--cat-color);
}
.gini-cat:hover .gini-cat__cta .gini-icon { transform: translateX(3px); }
.gini-cat__cta .gini-icon { transition: transform .16s var(--gini-ease); }

/* ==========================================================================
   Breadcrumbs, notices
   ========================================================================== */

.gini-crumbs {
	display: flex; align-items: center; flex-wrap: wrap; gap: 5px;
	font-size: 13.5px; color: var(--gini-muted); margin-bottom: 14px;
}
.gini-crumbs a { color: var(--gini-muted); text-decoration: none; }
.gini-crumbs a:hover { color: var(--gini-brass-deep); text-decoration: underline; }
.gini-crumbs [aria-current] { color: var(--gini-ink); font-weight: 600; }

.gini-notice {
	display: flex; align-items: flex-start; gap: 10px;
	padding: 13px 16px; border-radius: var(--gini-radius);
	font-size: 14.5px; line-height: 1.55; margin: 0 0 16px;
}
.gini-notice--info { background: var(--gini-teal-soft); color: #0b5c51; }
.gini-notice--warn { background: var(--gini-brass-soft); color: #7a4c0b; }
.gini-notice--error { background: var(--gini-danger-soft); color: #93213a; }

/* The "this is a big file" heads-up, shown before a slow in-browser job. */
.gini-heavy-note { font-size: 14px; }

/* A result note that qualifies the headline — text no longer selectable after
   a re-render, images skipped, and so on. It has to read as a caveat rather
   than as an error, so it sits under the stats in the warning colour. */
.gini-stat-note {
	font-size: 14px; line-height: 1.55; color: var(--gini-muted);
	margin: 12px 0 0;
}
.gini-stat-note--warn {
	background: var(--gini-brass-soft); color: #7a4c0b;
	padding: 11px 14px; border-radius: var(--gini-radius);
}

.gini-privacy {
	display: flex; align-items: flex-start; gap: 9px;
	font-size: 13.5px; color: var(--gini-muted); line-height: 1.55;
	margin: 18px 0 0;
}
.gini-privacy .gini-icon { color: var(--gini-teal); margin-top: 1px; }
.gini-privacy--client .gini-icon { color: var(--gini-teal); }

/* ==========================================================================
   How-to panel
   ========================================================================== */

.gini-howto-btn {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 9px 15px;
	border: 1px solid var(--gini-line);
	border-radius: var(--gini-radius-pill);
	background: var(--gini-white);
	color: var(--gini-indigo);
	font: inherit; font-size: 14px; font-weight: 600;
	cursor: pointer;
	transition: .15s var(--gini-ease);
}
.gini-howto-btn:hover { border-color: var(--gini-brass); background: var(--gini-brass-soft); }
.gini-howto-btn .gini-icon { color: var(--gini-brass-deep); }

.gini-howto {
	margin: 0 0 22px;
	background: linear-gradient(180deg, var(--gini-brass-soft), var(--gini-white));
	border: 1px solid #f0ddb9;
	border-radius: var(--gini-radius-lg);
	animation: gini-drop .28s var(--gini-ease);
}
@keyframes gini-drop {
	from { opacity: 0; transform: translateY(-8px); }
	to { opacity: 1; transform: none; }
}
.gini-howto__inner { padding: 22px; position: relative; }
.gini-howto__title { margin: 0 0 18px; font-size: 19px; font-weight: 800; color: var(--gini-indigo); }

.gini-howto__steps {
	list-style: none;
	margin: 0; padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 18px;
}
.gini-howto__step { display: flex; flex-direction: column; gap: 10px; }
.gini-howto__art { position: relative; display: block; width: 64px; height: 64px; }
.gini-howto__num {
	position: absolute; top: -4px; inset-inline-start: -6px;
	width: 22px; height: 22px;
	display: grid; place-items: center;
	background: var(--gini-indigo); color: var(--gini-white);
	border-radius: 50%; font-size: 12px; font-weight: 700;
}
.gini-howto__text { display: flex; flex-direction: column; gap: 3px; }
.gini-howto__text strong { color: var(--gini-indigo); font-size: 15px; }
.gini-howto__text span { font-size: 13.5px; color: var(--gini-muted); line-height: 1.55; }
.gini-howto__close {
	position: absolute; top: 14px; inset-inline-end: 14px;
	display: inline-flex; align-items: center; gap: 5px;
	border: 0; background: none; cursor: pointer;
	color: var(--gini-muted); font: inherit; font-size: 13px;
	padding: 6px 8px; border-radius: 8px;
}
.gini-howto__close:hover { background: rgba(0, 0, 0, .05); color: var(--gini-ink); }

/* ==========================================================================
   Tool interface
   ========================================================================== */

.gini-tool {
	background: var(--gini-white);
	border: 1px solid var(--gini-line);
	border-radius: var(--gini-radius-lg);
	padding: 24px;
	box-shadow: var(--gini-shadow-sm);
}

/* --- drop zone --- */

.gini-drop {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 44px 24px;
	border: 2px dashed #e0c99b;
	border-radius: var(--gini-radius-lg);
	background: var(--gini-brass-soft);
	cursor: pointer;
	text-align: center;
	transition: .18s var(--gini-ease);
}
.gini-drop:hover, .gini-drop:focus-visible { border-color: var(--gini-brass); background: #fff8ec; }
.gini-drop.is-over {
	border-color: var(--gini-teal);
	background: var(--gini-teal-soft);
	transform: scale(1.01);
}
.gini-drop__input {
	position: absolute; inset: 0;
	opacity: 0; width: 100%; height: 100%; cursor: pointer;
}
.gini-drop__label { display: flex; flex-direction: column; gap: 4px; }
.gini-drop__label strong { font-size: 19px; color: var(--gini-indigo); }
.gini-drop__hint { font-size: 14.5px; color: var(--gini-muted); }
.gini-drop__meta {
	margin: 12px 0 0; text-align: center;
	font-size: 13px; color: var(--gini-muted);
}

/* --- unavailable state (no engine behind a server tool) --- */

.gini-tool--off { background: var(--gini-cloud); }

.gini-unavailable { text-align: center; padding: 10px 0 4px; }
.gini-unavailable__art { display: inline-block; margin-bottom: 10px; opacity: .85; }
.gini-unavailable h2 { margin: 0 0 8px; font-size: 20px; font-weight: 800; color: var(--gini-indigo); }
.gini-unavailable > p {
	max-width: 58ch; margin: 0 auto 6px;
	color: var(--gini-muted); font-size: 15px; line-height: 1.6;
}
.gini-unavailable h3 {
	margin: 28px 0 4px; font-size: 15px; font-weight: 700; color: var(--gini-indigo);
}
.gini-unavailable__sub { margin: 0 auto 16px; font-size: 13.5px; color: var(--gini-muted); }
.gini-unavailable .gini-grid { text-align: start; }

/* Visible to administrators only, so it reads as a note rather than an error. */
.gini-unavailable__admin {
	display: inline-flex; align-items: flex-start; gap: 9px; text-align: start;
	max-width: 58ch; margin: 14px auto 0; padding: 11px 15px;
	background: var(--gini-brass-soft); border-radius: var(--gini-radius);
	font-size: 13.5px; color: #7a4c0b; line-height: 1.55;
}
.gini-unavailable__admin .gini-icon { flex: none; margin-top: 2px; }

/* --- file list --- */

.gini-files { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.gini-file {
	display: flex; align-items: center; gap: 12px;
	padding: 11px 13px;
	border: 1px solid var(--gini-line);
	border-radius: var(--gini-radius);
	background: var(--gini-cloud);
}
.gini-file__icon { color: var(--gini-brass-deep); display: flex; }
.gini-file__meta { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.gini-file__name {
	font-weight: 600; font-size: 14.5px; color: var(--gini-ink);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gini-file__size { font-size: 12.5px; color: var(--gini-muted); }
.gini-file__order { display: flex; gap: 4px; }

.gini-add-more { margin-bottom: 16px; }

/* --- options --- */

.gini-options { display: grid; gap: 18px; margin: 20px 0; }
.gini-opt { display: flex; flex-direction: column; gap: 7px; }
.gini-opt__label { font-weight: 600; font-size: 14.5px; color: var(--gini-indigo); }
.gini-opt__optional {
	font-weight: 500; font-size: 12px; color: var(--gini-muted);
	margin-inline-start: 5px;
}
.gini-opt__help { margin: 0; font-size: 13px; color: var(--gini-muted); line-height: 1.5; }

.gini-input {
	width: 100%;
	padding: 11px 13px;
	border: 1px solid var(--gini-line);
	border-radius: 10px;
	font: inherit; font-size: 15px;
	color: var(--gini-ink);
	background: var(--gini-white);
}
.gini-input:focus { border-color: var(--gini-brass); outline: none; box-shadow: 0 0 0 3px #fbe6c4; }
.gini-input--color { padding: 4px; height: 44px; cursor: pointer; }
select.gini-input, .gini-select {
	width: 100%; padding: 11px 13px;
	border: 1px solid var(--gini-line); border-radius: 10px;
	font: inherit; font-size: 15px; background: var(--gini-white); color: var(--gini-ink);
}

.gini-number { display: flex; align-items: center; gap: 8px; }
.gini-number .gini-input { max-width: 140px; }
.gini-number__suffix { font-size: 14px; color: var(--gini-muted); }

.gini-range { display: flex; align-items: center; gap: 12px; }
.gini-range input[type=range] { flex: 1; accent-color: var(--gini-brass); }
.gini-range__out {
	min-width: 48px; text-align: center;
	font-variant-numeric: tabular-nums; font-weight: 600;
	font-size: 14px; color: var(--gini-indigo);
}

.gini-radios { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.gini-radio { cursor: pointer; }
.gini-radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.gini-radio__box {
	display: flex; flex-direction: column; gap: 3px;
	padding: 13px 15px;
	border: 2px solid var(--gini-line);
	border-radius: var(--gini-radius);
	background: var(--gini-white);
	transition: .15s var(--gini-ease);
	height: 100%;
}
.gini-radio:hover .gini-radio__box { border-color: #d9cdb2; }
.gini-radio input:checked + .gini-radio__box {
	border-color: var(--gini-brass);
	background: var(--gini-brass-soft);
}
.gini-radio input:focus-visible + .gini-radio__box { outline: 3px solid var(--gini-teal); outline-offset: 2px; }
.gini-radio__label { font-weight: 600; font-size: 14.5px; color: var(--gini-indigo); }
.gini-radio__hint { font-size: 12.5px; color: var(--gini-muted); line-height: 1.45; }

.gini-toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.gini-toggle input { position: absolute; opacity: 0; }
.gini-toggle__track {
	width: 42px; height: 24px; border-radius: var(--gini-radius-pill);
	background: #cfd2e0; position: relative; transition: background .16s var(--gini-ease);
	flex: none;
}
.gini-toggle__dot {
	position: absolute; top: 3px; inset-inline-start: 3px;
	width: 18px; height: 18px; border-radius: 50%;
	background: var(--gini-white);
	transition: transform .16s var(--gini-ease);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.gini-toggle input:checked + .gini-toggle__track { background: var(--gini-teal); }
.gini-toggle input:checked + .gini-toggle__track .gini-toggle__dot { transform: translateX(18px); }
.gini-toggle input:focus-visible + .gini-toggle__track { outline: 3px solid var(--gini-teal); outline-offset: 2px; }
.gini-toggle__label { font-size: 14.5px; color: var(--gini-ink); }

.gini-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; }

/* --- progress and the genie --- */

.gini-genie-stage {
	display: grid;
	place-items: center;
	min-height: 180px;
	margin-bottom: 4px;
}

.gini-progress { text-align: center; padding: 8px 0 20px; }
.gini-progress__bar {
	height: 8px;
	background: var(--gini-line);
	border-radius: var(--gini-radius-pill);
	overflow: hidden;
	max-width: 420px;
	margin: 0 auto 14px;
}
.gini-progress__fill {
	height: 100%;
	width: 2%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--gini-brass), var(--gini-teal));
	transition: width .35s var(--gini-ease);
}
.gini-progress__label { margin: 0 0 4px; font-weight: 600; font-size: 16px; color: var(--gini-indigo); }
.gini-progress__note { margin: 0 0 16px; font-size: 13.5px; color: var(--gini-muted); }

/* --- results --- */

.gini-result { display: flex; flex-direction: column; gap: 16px; }
.gini-result__headline {
	display: flex; align-items: center; justify-content: center; gap: 9px;
	margin: 0; font-size: 21px; font-weight: 800; color: var(--gini-indigo);
}
.gini-result__tick {
	color: var(--gini-teal);
	background: var(--gini-teal-soft);
	border-radius: 50%; padding: 5px; width: 32px; height: 32px;
	animation: gini-pop .4s var(--gini-ease);
}
@keyframes gini-pop {
	0% { transform: scale(.4); opacity: 0; }
	60% { transform: scale(1.15); }
	100% { transform: scale(1); opacity: 1; }
}

.gini-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	gap: 10px;
	max-width: 520px;
	margin-inline: auto;
}
.gini-stat {
	text-align: center; padding: 13px 10px;
	background: var(--gini-cloud);
	border: 1px solid var(--gini-line);
	border-radius: var(--gini-radius);
}
.gini-stat span { display: block; font-size: 12px; color: var(--gini-muted); margin-bottom: 3px; }
.gini-stat strong { font-size: 19px; color: var(--gini-indigo); font-variant-numeric: tabular-nums; }
.gini-stat.is-good { background: var(--gini-teal-soft); border-color: #bfeee6; }
.gini-stat.is-good strong { color: #0b7d6d; }
.gini-stat.is-flat { background: var(--gini-cloud); }
.gini-stat-note { text-align: center; margin: 10px 0 0; font-size: 14px; color: var(--gini-muted); }
.gini-stat-note--warn { color: #7a4c0b; background: var(--gini-brass-soft); padding: 10px; border-radius: 10px; }

.gini-result__files { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.gini-out {
	display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
	padding: 13px 15px;
	border: 1px solid var(--gini-line);
	border-radius: var(--gini-radius);
	background: var(--gini-cloud);
}
.gini-out__meta { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.gini-out__name {
	font-weight: 600; font-size: 14.5px;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gini-out__size { font-size: 12.5px; color: var(--gini-muted); }
.gini-out--gone { justify-content: center; color: var(--gini-muted); font-size: 14px; }
.gini-result__privacy { margin: 0; text-align: center; font-size: 13px; color: var(--gini-muted); }

/* ==========================================================================
   The genie animation
   ========================================================================== */

.gini-genie { overflow: visible; }

.gini-genie__figure {
	transform-origin: 108px 145px;
	animation: gini-emerge 3.2s var(--gini-ease) infinite;
}
/* Rises out of the lamp, hovers, then sinks back — a loop that reads as
   "still working" rather than "finished". */
@keyframes gini-emerge {
	0%   { opacity: 0; transform: translateY(46px) scale(.16); }
	15%  { opacity: 1; transform: translateY(0) scale(1); }
	35%  { transform: translateY(-6px) scale(1); }
	55%  { transform: translateY(1px) scale(1); }
	75%  { transform: translateY(-4px) scale(1); }
	88%  { opacity: 1; transform: translateY(0) scale(1); }
	100% { opacity: 0; transform: translateY(46px) scale(.16); }
}

.gini-genie__lamp {
	transform-origin: 140px 165px;
	animation: gini-lamp-rock 3.2s var(--gini-ease) infinite;
}
@keyframes gini-lamp-rock {
	0%, 100% { transform: rotate(0deg); }
	12% { transform: rotate(-4deg); }
	24% { transform: rotate(2deg); }
	40% { transform: rotate(0deg); }
}

.gini-genie__arm--l {
	transform-origin: 78px 76px;
	animation: gini-wave 1.4s ease-in-out infinite;
}
.gini-genie__hand--l {
	transform-origin: 78px 76px;
	animation: gini-wave 1.4s ease-in-out infinite;
}
@keyframes gini-wave {
	0%, 100% { transform: rotate(0deg); }
	50% { transform: rotate(-14deg); }
}

.gini-genie__spark {
	transform-box: fill-box;
	transform-origin: center;
	animation: gini-twinkle 1.8s ease-in-out infinite;
}
.gini-genie__spark--2 { animation-delay: .45s; }
.gini-genie__spark--3 { animation-delay: .9s; }
@keyframes gini-twinkle {
	0%, 100% { opacity: .25; transform: scale(.6) rotate(0deg); }
	50% { opacity: 1; transform: scale(1.15) rotate(45deg); }
}

/* Anyone who has asked their system to reduce motion gets a still image and a
   progress bar. Vestibular disorders make looping motion genuinely unpleasant,
   and a decorative animation is never worth that. */
@media (prefers-reduced-motion: reduce) {
	.gini-genie__figure,
	.gini-genie__lamp,
	.gini-genie__arm--l,
	.gini-genie__hand--l,
	.gini-genie__spark,
	.gini-result__tick,
	.gini-howto {
		animation: none !important;
	}
	.gini-genie__figure { opacity: 1; transform: none; }
	.gini-progress__fill { transition: none; }
	* { scroll-behavior: auto !important; }
}

/* ==========================================================================
   Content sections
   ========================================================================== */

.gini-article { max-width: 72ch; }
.gini-article__intro { font-size: 18px; line-height: 1.65; color: var(--gini-ink); }
.gini-article h2 { font-size: 22px; font-weight: 800; color: var(--gini-indigo); margin: 30px 0 10px; }
.gini-article p { line-height: 1.7; color: var(--gini-ink); }

.gini-faq { max-width: 72ch; margin-top: 36px; }
.gini-faq h2 { font-size: 22px; font-weight: 800; color: var(--gini-indigo); margin: 0 0 14px; }
.gini-faq__item { border-bottom: 1px solid var(--gini-line); }
.gini-faq__item summary {
	cursor: pointer; padding: 15px 0;
	font-weight: 600; font-size: 16px; color: var(--gini-indigo);
	list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.gini-faq__item summary::-webkit-details-marker { display: none; }
.gini-faq__item summary::after {
	content: "+"; font-size: 22px; font-weight: 400; color: var(--gini-brass-deep);
	transition: transform .18s var(--gini-ease); flex: none; line-height: 1;
}
.gini-faq__item[open] summary::after { transform: rotate(45deg); }
.gini-faq__answer p { margin: 0 0 15px; line-height: 1.7; color: var(--gini-muted); }

.gini-related { margin-top: 40px; }
.gini-related h2 { font-size: 20px; font-weight: 800; color: var(--gini-indigo); margin: 0 0 14px; }

/* ==========================================================================
   Advertisement slots
   ========================================================================== */

.gini-ad {
	display: block;
	margin: 28px auto;
	text-align: center;
	max-width: 100%;
	overflow: hidden;
}
.gini-ad__label {
	display: block;
	font-size: 10.5px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #9a9ab5;
	margin-bottom: 5px;
}
/* A slot with no ad in it collapses completely — no reserved box, no layout
   shift, nothing for a visitor to notice. */
.gini-ad:empty { display: none; margin: 0; }
.gini-ad--sidebar { margin: 0 0 24px; }

@media (max-width: 900px) {
	.gini-ad--sidebar { display: none; }
}

/* ==========================================================================
   Client-side tool chrome (shared by every browser tool)
   ========================================================================== */

.gt-root { display: flex; flex-direction: column; gap: 16px; }

.gt-pane { display: flex; flex-direction: column; gap: 6px; }
.gt-pane__head {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.gt-pane__head label { font-weight: 600; font-size: 14.5px; color: var(--gini-indigo); }
.gt-pane__tools { display: flex; gap: 6px; }

.gt-area {
	width: 100%;
	padding: 13px;
	border: 1px solid var(--gini-line);
	border-radius: var(--gini-radius);
	font: inherit; font-size: 14.5px; line-height: 1.6;
	color: var(--gini-ink); background: var(--gini-white);
	resize: vertical; min-height: 90px;
}
.gt-area:focus { border-color: var(--gini-brass); outline: none; box-shadow: 0 0 0 3px #fbe6c4; }
.gt-area--mono, .gt-input--mono { font-family: var(--gini-mono); font-size: 13.5px; }

.gt-input, .gt-select {
	width: 100%; padding: 11px 13px;
	border: 1px solid var(--gini-line); border-radius: 10px;
	font: inherit; font-size: 15px; color: var(--gini-ink); background: var(--gini-white);
}
.gt-input:focus, .gt-select:focus {
	border-color: var(--gini-brass); outline: none; box-shadow: 0 0 0 3px #fbe6c4;
}
.gt-input--lg { font-size: 17px; padding: 13px 15px; }
.gt-color { width: 60px; height: 44px; padding: 4px; border: 1px solid var(--gini-line); border-radius: 10px; cursor: pointer; }
.gt-range { width: 100%; accent-color: var(--gini-brass); }

.gt-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.gt-row--sep { border-top: 1px solid var(--gini-line); padding-top: 16px; margin-top: 4px; }
.gt-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.gt-field { display: flex; flex-direction: column; gap: 5px; }
.gt-field > span { font-weight: 600; font-size: 13.5px; color: var(--gini-indigo); }
.gt-field > small { font-size: 12.5px; }
.gt-field--grow { flex: 1; min-width: 200px; }

.gt-btn {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 9px 15px; border: 1px solid var(--gini-line); border-radius: 10px;
	background: var(--gini-white); color: var(--gini-indigo);
	font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
	transition: .15s var(--gini-ease);
}
.gt-btn:hover { background: var(--gini-cloud); border-color: #cfd2e0; }
.gt-btn.is-active { background: var(--gini-brass-soft); border-color: var(--gini-brass); }
.gt-btn--primary {
	background: var(--gini-brass); border-color: var(--gini-brass); color: var(--gini-indigo-deep);
}
.gt-btn--primary:hover { background: #f0b055; }
.gt-btnrow { display: flex; flex-wrap: wrap; gap: 8px; }

.gt-mini {
	padding: 5px 11px; border: 1px solid var(--gini-line); border-radius: var(--gini-radius-pill);
	background: var(--gini-white); color: var(--gini-muted);
	font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
	transition: .15s var(--gini-ease);
}
.gt-mini:hover { color: var(--gini-indigo); border-color: var(--gini-muted); }
.gt-mini.is-copied { background: var(--gini-teal-soft); color: #0b7d6d; border-color: #bfeee6; }

.gt-tabs {
	display: flex; flex-wrap: wrap; gap: 4px;
	border-bottom: 1px solid var(--gini-line); padding-bottom: 0;
}
.gt-tab {
	padding: 10px 16px; border: 0; background: none; cursor: pointer;
	font: inherit; font-size: 14.5px; font-weight: 600; color: var(--gini-muted);
	border-bottom: 3px solid transparent; margin-bottom: -1px;
	transition: .15s var(--gini-ease);
}
.gt-tab:hover { color: var(--gini-indigo); }
.gt-tab.is-active { color: var(--gini-indigo); border-bottom-color: var(--gini-brass); }

.gt-checks { border: 1px solid var(--gini-line); border-radius: var(--gini-radius); padding: 14px 16px; }
.gt-checks legend { font-weight: 600; font-size: 14px; color: var(--gini-indigo); padding: 0 6px; }
.gt-check, .gt-radio2 {
	display: flex; align-items: flex-start; gap: 8px;
	font-size: 14px; color: var(--gini-ink); cursor: pointer; padding: 5px 0;
}
.gt-check input, .gt-radio2 input { margin-top: 2px; accent-color: var(--gini-brass); flex: none; }
.gt-radio2 em { color: var(--gini-muted); font-style: normal; font-size: 13px; }

.gt-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); gap: 10px; }
.gt-stat {
	text-align: center; padding: 13px 8px;
	background: var(--gini-cloud); border: 1px solid var(--gini-line); border-radius: var(--gini-radius);
}
.gt-stat strong { display: block; font-size: 21px; color: var(--gini-indigo); font-variant-numeric: tabular-nums; }
.gt-stat span { font-size: 12px; color: var(--gini-muted); }

.gt-status { font-size: 14px; line-height: 1.55; min-height: 20px; }
.gt-status.is-ok { color: #0b7d6d; }
.gt-status.is-error { color: var(--gini-danger); }
.gt-status strong { font-weight: 700; }
.gt-errline {
	background: var(--gini-danger-soft); border-radius: 8px; padding: 9px 11px;
	font-family: var(--gini-mono); font-size: 12.5px; margin: 7px 0; overflow-x: auto;
	color: #93213a;
}

.gt-muted { color: var(--gini-muted); font-size: 13.5px; line-height: 1.6; }
.gt-error { color: var(--gini-danger); }
.gt-h3 { font-size: 16px; font-weight: 700; color: var(--gini-indigo); margin: 14px 0 8px; }
.gt-note {
	background: var(--gini-cloud); border-inline-start: 3px solid var(--gini-brass);
	padding: 12px 15px; border-radius: 0 10px 10px 0;
	font-size: 13.5px; color: var(--gini-muted); line-height: 1.65; margin: 14px 0 0;
}
.gt-pre {
	background: var(--gini-indigo-deep); color: #d8dcf0;
	padding: 14px; border-radius: 10px; overflow-x: auto;
	font-family: var(--gini-mono); font-size: 13px; line-height: 1.55;
}

.gt-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.gt-table th, .gt-table td {
	text-align: start; padding: 9px 10px; border-bottom: 1px solid var(--gini-line);
	vertical-align: top;
}
.gt-table th { font-weight: 600; color: var(--gini-indigo); }
.gt-table code { font-family: var(--gini-mono); font-size: 13px; word-break: break-all; }
.gt-scroll { overflow-x: auto; }

.gt-kv { display: grid; gap: 7px; }
.gt-kv__row {
	display: flex; align-items: center; gap: 10px;
	padding: 9px 12px; background: var(--gini-cloud);
	border: 1px solid var(--gini-line); border-radius: 10px;
	font-size: 14px;
}
.gt-kv__row > span:first-child { min-width: 130px; color: var(--gini-muted); font-size: 13px; }
.gt-kv__row code { flex: 1; font-family: var(--gini-mono); font-size: 13px; word-break: break-all; }

.gt-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.gt-chip {
	display: inline-flex; align-items: baseline; gap: 5px;
	padding: 5px 11px; background: var(--gini-brass-soft); border-radius: var(--gini-radius-pill);
	font-size: 13px; color: #7a4c0b;
}
.gt-chip em { font-style: normal; font-weight: 700; }
.gt-chip i { font-style: normal; opacity: .7; font-size: 11.5px; }
.gt-chipbtn {
	padding: 7px 13px; border: 1px solid var(--gini-line); border-radius: var(--gini-radius-pill);
	background: var(--gini-white); font: inherit; font-size: 13px; cursor: pointer;
	color: var(--gini-muted);
}
.gt-chipbtn:hover { border-color: var(--gini-brass); color: var(--gini-indigo); }

.gt-limits { display: grid; gap: 7px; }
.gt-limit { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--gini-muted); }
.gt-limit > span:first-child { min-width: 130px; }
.gt-limit__bar { flex: 1; height: 6px; background: var(--gini-line); border-radius: var(--gini-radius-pill); overflow: hidden; }
.gt-limit__bar > span { display: block; height: 100%; background: var(--gini-teal); border-radius: inherit; }
.gt-limit.is-over .gt-limit__bar > span { background: var(--gini-danger); }
.gt-limit__num { font-variant-numeric: tabular-nums; min-width: 72px; text-align: end; }
.gt-limit.is-over .gt-limit__num { color: var(--gini-danger); font-weight: 600; }

.gt-bar { display: block; width: 90px; height: 6px; background: var(--gini-line); border-radius: var(--gini-radius-pill); overflow: hidden; }
.gt-bar > span { display: block; height: 100%; background: var(--gini-brass); }

.gt-bigresult { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.gt-big {
	padding: 16px; background: var(--gini-cloud);
	border: 1px solid var(--gini-line); border-radius: var(--gini-radius); text-align: center;
}
.gt-big span { display: block; font-size: 12.5px; color: var(--gini-muted); margin-bottom: 4px; }
.gt-big strong { font-size: 22px; color: var(--gini-indigo); font-variant-numeric: tabular-nums; }
.gt-big em { display: block; font-style: normal; font-size: 13px; margin-top: 4px; color: var(--gini-muted); }
.gt-big--hero { grid-column: 1 / -1; background: var(--gini-brass-soft); border-color: #f0ddb9; }
.gt-big--hero strong { font-size: 28px; }
.gt-big.is-good { background: var(--gini-teal-soft); border-color: #bfeee6; }
.gt-big.is-warn { background: var(--gini-brass-soft); border-color: #f0ddb9; }
.gt-big.is-bad { background: var(--gini-danger-soft); border-color: #f6ccd4; }
.gt-bigresult .gt-note { grid-column: 1 / -1; }

.gt-calc { padding: 16px; border: 1px solid var(--gini-line); border-radius: var(--gini-radius); }
.gt-calc__q { margin: 0 0 12px; font-size: 15px; color: var(--gini-indigo); }
.gt-calc__r { margin: 12px 0 0; font-size: 15px; color: var(--gini-ink); min-height: 22px; }
.gt-calc__r strong { color: var(--gini-brass-deep); font-size: 17px; }

.gt-hashes { display: grid; gap: 10px; }
.gt-hash { padding: 12px 14px; background: var(--gini-cloud); border: 1px solid var(--gini-line); border-radius: 10px; }
.gt-hash__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.gt-hash__val { font-family: var(--gini-mono); font-size: 12.5px; word-break: break-all; color: var(--gini-ink); }

.gt-passwords { display: grid; gap: 8px; }
.gt-password {
	display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
	padding: 11px 14px; background: var(--gini-cloud);
	border: 1px solid var(--gini-line); border-radius: 10px;
}
.gt-password code { flex: 1; font-family: var(--gini-mono); font-size: 15px; word-break: break-all; }
.gt-password__meter { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: var(--gini-radius-pill); }
.gt-password__meter.is-weak { background: var(--gini-danger-soft); color: #93213a; }
.gt-password__meter.is-fair { background: var(--gini-brass-soft); color: #7a4c0b; }
.gt-password__meter.is-strong { background: var(--gini-teal-soft); color: #0b7d6d; }
.gt-password__meter.is-vstrong { background: #0b7d6d; color: #fff; }

.gt-highlight {
	white-space: pre-wrap; word-break: break-word;
	background: var(--gini-cloud); border: 1px solid var(--gini-line);
	border-radius: 10px; padding: 13px; font-family: var(--gini-mono); font-size: 13px;
	line-height: 1.6; max-height: 260px; overflow-y: auto;
}
.gt-highlight mark { background: #ffe08a; color: var(--gini-ink); border-radius: 3px; }

.gt-regex { display: flex; align-items: center; gap: 6px; }
.gt-regex__slash { font-family: var(--gini-mono); font-size: 20px; color: var(--gini-muted); }
.gt-regex__pat { flex: 1; }
.gt-regex__flags { width: 80px; }

.gt-diff { border: 1px solid var(--gini-line); border-radius: 10px; overflow: hidden; font-family: var(--gini-mono); font-size: 13px; }
.gt-diff__row { display: flex; gap: 0; }
.gt-diff__n { width: 46px; flex: none; text-align: end; padding: 2px 8px; color: #9a9ab5; background: var(--gini-cloud); user-select: none; }
.gt-diff__s { width: 20px; flex: none; text-align: center; user-select: none; }
.gt-diff__v { flex: 1; padding: 2px 8px; white-space: pre-wrap; word-break: break-word; }
.gt-diff__row.is-add { background: #e8f8ee; }
.gt-diff__row.is-add .gt-diff__s { color: #0b7d4b; }
.gt-diff__row.is-del { background: var(--gini-danger-soft); }
.gt-diff__row.is-del .gt-diff__s { color: #93213a; }

.gt-serp { padding: 20px; background: var(--gini-white); border: 1px solid var(--gini-line); border-radius: 10px; }
.gt-serp__card { max-width: 600px; font-family: Arial, sans-serif; }
.gt-serp--mobile { max-width: 380px; }
.gt-serp__url { font-size: 13px; color: #202124; margin-bottom: 3px; }
.gt-serp__title { font-size: 20px; color: #1a0dab; line-height: 1.3; margin-bottom: 3px; }
.gt-serp--mobile .gt-serp__title { font-size: 18px; }
.gt-serp__desc { font-size: 14px; color: #4d5156; line-height: 1.58; }

.gt-swatch { height: 90px; border-radius: var(--gini-radius); border: 1px solid var(--gini-line); }
.gt-contrast { padding: 20px; border-radius: 10px; font-size: 17px; text-align: center; margin-bottom: 12px; }
.gt-pass { color: #0b7d6d; font-weight: 700; }
.gt-fail { color: var(--gini-danger); font-weight: 700; }

.gt-zones { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 9px; }
.gt-zone {
	padding: 12px 14px; background: var(--gini-cloud);
	border: 1px solid var(--gini-line); border-radius: 10px;
}
.gt-zone.is-work { background: var(--gini-teal-soft); border-color: #bfeee6; }
.gt-zone.is-night { background: #eceef7; opacity: .75; }
.gt-zone__name { display: block; font-size: 12.5px; color: var(--gini-muted); margin-bottom: 3px; }
.gt-zone__name em { font-style: normal; color: var(--gini-brass-deep); font-weight: 600; }
.gt-zone__time { display: block; font-size: 20px; color: var(--gini-indigo); font-variant-numeric: tabular-nums; }
.gt-zone__date { font-size: 12px; color: var(--gini-muted); }

.gt-live {
	display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
	padding: 12px 15px; background: var(--gini-brass-soft);
	border-radius: 10px; font-size: 14px;
}
.gt-live code { font-family: var(--gini-mono); font-size: 16px; font-weight: 700; color: #7a4c0b; }

.gt-qr { display: grid; place-items: center; padding: 20px; background: var(--gini-cloud); border-radius: var(--gini-radius); min-height: 200px; }
.gt-qr svg { max-width: 100%; height: auto; border-radius: 6px; }

.gt-result { display: flex; flex-direction: column; gap: 6px; }
.gt-parts { margin-top: 6px; }
.gt-warnlist { margin: 0; padding-inline-start: 20px; font-size: 13.5px; color: #7a4c0b; line-height: 1.6; }
.gt-okpill { color: #0b7d6d; }
.gt-warnpill { color: #7a4c0b; }
.gt-freq { display: flex; flex-wrap: wrap; gap: 7px; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 720px) {
	.gini-tool { padding: 16px; border-radius: var(--gini-radius); }
	.gini-drop { padding: 30px 16px; }
	.gini-drop__label strong { font-size: 17px; }
	.gini-howto__inner { padding: 18px; }
	.gini-howto__steps { grid-template-columns: 1fr; gap: 14px; }
	.gini-howto__step { flex-direction: row; align-items: flex-start; gap: 14px; }
	.gini-howto__art { flex: none; width: 52px; height: 52px; }
	.gini-howto__art svg { width: 52px; height: 52px; }
	.gini-genie { width: 140px; height: 133px; }
	.gini-genie-stage { min-height: 140px; }
	.gini-actions .gini-btn { width: 100%; justify-content: center; }
	.gini-actions .gini-btn--quiet { width: auto; }
	.gini-radios { grid-template-columns: 1fr; }
	.gt-row > .gt-field { width: 100%; }
	.gini-search__input { font-size: 16px; } /* 16px stops iOS zooming the page */
	.gt-input, .gt-select, .gt-area { font-size: 16px; }
	.gini-kv__row > span:first-child, .gt-kv__row > span:first-child { min-width: 90px; }
}

@media (max-width: 400px) {
	.gini-grid, .gini-cats { grid-template-columns: 1fr; }
	.gini-stats { grid-template-columns: repeat(2, 1fr); }
}

/* Touch targets: anything tappable gets at least 44px of height on coarse
   pointers, which is the smallest reliably hittable target on a phone. */
@media (pointer: coarse) {
	.gini-btn, .gt-btn, .gini-iconbtn, .gt-tab, .gini-howto-btn { min-height: 44px; }
	.gini-iconbtn { width: 44px; }
	.gt-mini { min-height: 36px; }
}

@media print {
	.gini-ad, .gini-tool, .gini-howto-btn, .gini-search { display: none !important; }
}

/* ==========================================================================
   Visual page picker
   Thumbnails instead of typing "1-3, 7, 12-". The text field stays visible
   underneath and stays in sync, so both ways of working keep functioning.
   ========================================================================== */

.gini-picker { margin: 18px 0 4px; }

.gini-picker__bar {
	display: flex; align-items: center; justify-content: space-between;
	flex-wrap: wrap; gap: 10px; margin-bottom: 12px;
}
.gini-picker__count { font-size: 14px; font-weight: 600; color: var(--gini-ink); }
.gini-picker__actions { display: flex; flex-wrap: wrap; gap: 6px; }
.gini-picker__status { font-size: 14px; color: var(--gini-muted); margin: 0; }

.gini-picker__grid {
	display: grid; gap: 12px; margin: 0; padding: 4px;
	grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
	list-style: none;
	/* Tall documents get a scroller rather than pushing the action button off
	   the bottom of a phone screen. */
	max-height: 460px; overflow-y: auto; overscroll-behavior: contain;
}

.gini-thumb {
	position: relative; cursor: pointer; border-radius: 10px;
	padding: 6px 6px 4px; background: var(--gini-cloud);
	border: 2px solid transparent; transition: border-color .12s, background .12s;
	text-align: center;
}
.gini-thumb:hover { background: var(--gini-brass-soft); }
.gini-thumb:focus-visible { outline: 3px solid var(--gini-brass); outline-offset: 2px; }
.gini-thumb.is-on { border-color: var(--gini-brass); background: var(--gini-brass-soft); }

.gini-thumb__frame {
	display: flex; align-items: center; justify-content: center;
	aspect-ratio: 3 / 4; background: #fff; border-radius: 6px; overflow: hidden;
	box-shadow: 0 1px 3px rgba(20, 20, 47, .14);
}
.gini-thumb__canvas { max-width: 100%; max-height: 100%; display: block; }
.gini-thumb__n { display: block; font-size: 12px; margin-top: 5px; color: var(--gini-muted); }
.gini-thumb.is-on .gini-thumb__n { color: var(--gini-ink); font-weight: 600; }

/* Order mode: the position in the sequence, not just "selected". */
.gini-thumb__badge:empty { display: none; }
.gini-thumb__badge {
	position: absolute; top: 2px; right: 2px; min-width: 20px; height: 20px;
	display: flex; align-items: center; justify-content: center;
	padding: 0 5px; border-radius: 10px;
	background: var(--gini-brass); color: #fff;
	font-size: 11px; font-weight: 700; line-height: 1;
}

.gini-thumb__spinner {
	width: 18px; height: 18px; border-radius: 50%;
	border: 2px solid var(--gini-line, #e3e5ee); border-top-color: var(--gini-brass);
	animation: gini-spin .7s linear infinite;
}
@keyframes gini-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
	.gini-thumb__spinner { animation-duration: 2.4s; }
}

@media (max-width: 480px) {
	.gini-picker__grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 9px; }
	.gini-picker__bar { font-size: 13px; }
}