/*
 * Lily Fonts — Stylesheet v6
 * Author: Vinayak Bibyan
 *
 * Layout changes in v6:
 *   · input + category rail + toggles are one sticky toolbar
 *   · character counter sits beside the input and hides under 600px, which
 *     is what let the input padding and the rail gap tighten up
 *   · results label became a dropdown jump menu
 *   · two toggle buttons pinned under the rail
 *
 * If the theme has its own sticky header, set the offset once:
 *   .lf-app { --lf-sticky-top: 64px; }
 */

/* ─── TOKENS ────────────────────────────────────────────── */
.lf-app {
	--lf-bg:          #f8fafc;
	--lf-surface:     #ffffff;
	--lf-surface-2:   #f1f5f9;
	--lf-border:      rgba(148, 163, 184, 0.18);
	--lf-border-2:    rgba(198, 97, 63, 0.18);

	--lf-accent:      #c6613f;
	--lf-accent-2:    #8b5cf6;
	--lf-accent-3:    #0ea5e9;

	--lf-emoji-1:     #f97316;
	--lf-emoji-2:     #ec4899;

	--lf-game-1:      #10b981;
	--lf-game-2:      #059669;

	--lf-text:        #0f172a;
	--lf-text-2:      #475569;
	--lf-text-3:      #94a3b8;
	--lf-text-light:  #cbd5e1;

	--lf-shadow-sm:   0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
	--lf-shadow-md:   0 4px 16px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.05);
	--lf-shadow-lg:   0 10px 40px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.06);
	--lf-shadow-glow: 0 0 0 3px rgba(198, 97, 63, 0.15);

	--lf-radius:      14px;
	--lf-radius-lg:   20px;
	--lf-radius-xl:   28px;
	--lf-radius-sm:   8px;
	--lf-radius-pill: 100px;

	--lf-preview-max-h: 170px;
	--lf-scroll-thumb:  linear-gradient(180deg, var(--lf-accent), var(--lf-accent-2));

	--lf-font-display: 'Playfair Display', Georgia, serif;
	--lf-font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	/* Anything that renders GENERATED text uses this stack. DM Sans first
	   for normal letters, then the Noto families that carry the blocks
	   system fonts routinely lack. CSS falls back per character, so a
	   single missing glyph pulls from Noto without touching the rest. */
	/* 'Noto Sans' sits ahead of the symbol families on purpose: it carries
	   Latin AND the combining marks, so a letter+mark cluster resolves there
	   instead of falling through to a symbol font that has the mark but no
	   letters — which is what turned the Glitch and Zalgo cards into boxes. */
	--lf-font-glyph:   'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
	                   'Noto Sans', 'Noto Sans Math', 'Noto Sans Symbols', 'Noto Sans Symbols 2',
	                   'Noto Sans Canadian Aboriginal', 'Noto Sans Javanese',
	                   'Noto Sans Balinese', 'Noto Sans Cherokee',
	                   'Noto Serif Tibetan', 'Segoe UI Symbol', 'Apple Symbols', sans-serif;

	--lf-transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
	--lf-spring:     all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);

	--lf-sticky-top: 0px;

	font-family: var(--lf-font-body);
	color: var(--lf-text);
	background: var(--lf-bg);
	min-height: 300px;
	padding-bottom: 44px;
	position: relative;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ─── WIDTH BREAKOUT ────────────────────────────────────────
   Lets the tool escape a narrow theme container without the page's own
   text losing its padding. `overflow-x: clip` on <html> is added by the
   script; unlike `hidden` it suppresses the sideways scrollbar WITHOUT
   creating a scroll container, so position:sticky keeps working. */
.lf-app.lf-breakout {
	width: var(--lf-breakout, 100vw);
	margin-left: calc(50% - var(--lf-breakout-half, 50vw));
	margin-right: calc(50% - var(--lf-breakout-half, 50vw));
	max-width: none;
}

.lf-app.lf-breakout .lf-toolbar-inner,
.lf-app.lf-breakout .lf-section {
	max-width: min(1680px, 100%);
}

@media (max-width: 959px) {
	/* Phones ignore the percentage and always go edge to edge. */
	.lf-app.lf-breakout {
		width: 100vw;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
	}
}

html.lf-has-breakout { overflow-x: clip; }

.lf-sentinel {
	height: 1px;
	margin-bottom: -1px;
	pointer-events: none;
}

/* ─── STICKY TOOLBAR ────────────────────────────────────── */
.lf-toolbar {
	position: sticky;
	top: var(--lf-sticky-top);
	z-index: 60;
	background: rgba(248, 250, 252, 0.94);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--lf-border);
	/* Rounded bottom corners so the pinned bar reads as a floating card
	   rather than a full-bleed strip. */
	border-radius: 0 0 var(--lf-radius-xl) var(--lf-radius-xl);
	transition: box-shadow 0.25s ease, background 0.25s ease;
}

.lf-app.lf-no-sticky .lf-toolbar {
	position: relative;
	top: auto;
}

/* Fallback when a theme ancestor's overflow has broken position:sticky.
   The script switches the bar to position:fixed and this spacer holds the
   height it left behind so the page does not jump. */
.lf-toolbar-spacer { height: 0; }

.lf-app.lf-fixed-fallback .lf-toolbar {
	box-shadow: var(--lf-shadow-md);
}

.lf-toolbar.lf-stuck {
	box-shadow: 0 10px 30px -12px rgba(15, 23, 42, 0.20), 0 2px 8px rgba(15, 23, 42, 0.05);
	background: rgba(255, 255, 255, 0.96);
	border-bottom-color: transparent;
}

.lf-toolbar-inner {
	max-width: 980px;
	margin: 0 auto;
	padding: 14px 16px 8px;
}

/* ─── INPUT ─────────────────────────────────────────────── */
.lf-input-wrapper {
	position: relative;
	background: var(--lf-surface);
	border-radius: var(--lf-radius-lg);
	box-shadow:
		0 1px 2px rgba(15, 23, 42, 0.04),
		0 6px 16px -6px rgba(15, 23, 42, 0.10),
		0 18px 40px -22px rgba(79, 70, 229, 0.28),
		inset 0 0 0 1.5px var(--lf-border);
	transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1), transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.lf-input-wrapper:hover {
	box-shadow:
		0 1px 2px rgba(15, 23, 42, 0.05),
		0 10px 22px -8px rgba(15, 23, 42, 0.12),
		0 26px 52px -24px rgba(79, 70, 229, 0.34),
		inset 0 0 0 1.5px var(--lf-border-2);
}

.lf-input-wrapper:focus-within {
	box-shadow:
		0 2px 4px rgba(15, 23, 42, 0.05),
		0 12px 26px -8px rgba(79, 70, 229, 0.20),
		0 30px 60px -26px rgba(79, 70, 229, 0.42),
		inset 0 0 0 1.8px var(--lf-accent),
		var(--lf-shadow-glow);
}

.lf-input {
	width: 100%;
	/* Right padding leaves room for the counter + clear button that now
	   sit inside the box instead of on a row beneath it. */
	padding: 20px 132px 20px 22px;
	border: none;
	background: transparent;
	font-family: var(--lf-font-body);
	font-size: 18px;
	color: var(--lf-text);
	resize: none;
	outline: none;
	line-height: 1.5;
	min-height: 66px;
	max-height: 260px;
	box-sizing: border-box;
	border-radius: var(--lf-radius-lg);
	caret-color: var(--lf-accent);
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: rgba(198, 97, 63, 0.55) transparent;
	transition: padding 0.2s ease, min-height 0.2s ease, font-size 0.2s ease;
}

.lf-input::placeholder {
	color: var(--lf-text-3);
	font-weight: 300;
}

.lf-input::-webkit-scrollbar { width: 9px; }
.lf-input::-webkit-scrollbar-track { background: transparent; }
.lf-input::-webkit-scrollbar-thumb {
	background: var(--lf-scroll-thumb);
	border-radius: 100px;
	border: 3px solid transparent;
	background-clip: content-box;
}

/* Counter + clear, pinned to the right edge of the input */
.lf-input-side {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	gap: 8px;
	pointer-events: none;
}

.lf-char-count {
	font-size: 11.5px;
	color: var(--lf-text-3);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
	white-space: nowrap;
	transition: color 0.2s ease;
}

.lf-char-count.lf-char-near {
	color: var(--lf-emoji-1);
	font-weight: 600;
}

.lf-clear-btn {
	pointer-events: auto;
	width: 26px;
	height: 26px;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--lf-surface-2);
	border: 1px solid var(--lf-border);
	border-radius: 50%;
	cursor: pointer;
	color: var(--lf-text-3);
	transition: var(--lf-transition);
	padding: 0;
}

.lf-clear-btn:hover {
	background: #fee2e2;
	border-color: #fca5a5;
	color: #ef4444;
	transform: scale(1.08);
}

/* ─── CATEGORY RAIL ─────────────────────────────────────── */
.lf-rail {
	display: flex;
	gap: 5px;
	overflow-x: auto;
	scroll-behavior: smooth;
	padding: 10px 2px 8px;
	-ms-overflow-style: none;
	scrollbar-width: none;
	align-items: center;
}

.lf-rail::-webkit-scrollbar { display: none; }

.lf-pill {
	white-space: nowrap;
	padding: 6px 14px;
	border-radius: var(--lf-radius-pill);
	border: 1.5px solid var(--lf-border);
	background: var(--lf-surface);
	font-family: var(--lf-font-body);
	font-size: 12.5px;
	font-weight: 500;
	color: var(--lf-text-2);
	cursor: pointer;
	transition: var(--lf-spring);
	flex-shrink: 0;
	line-height: 1.35;
}

.lf-pill:hover {
	border-color: var(--lf-accent);
	color: var(--lf-accent);
	background: rgba(198, 97, 63, 0.06);
}

.lf-pill.active {
	background: linear-gradient(135deg, var(--lf-accent), var(--lf-accent-2));
	border-color: transparent;
	color: #fff;
	box-shadow: 0 3px 12px rgba(198, 97, 63, 0.32);
}

/* Once the rail is scrolled, fade its leading edge so the hidden pills
   read as "there is more to the left" instead of being cut off. */
.lf-toolbar.lf-rail-scrolled .lf-rail {
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 26px);
	        mask-image: linear-gradient(to right, transparent 0, #000 26px);
}

.lf-pill-emoji { border-color: rgba(249, 115, 22, 0.32); color: #c2410c; }
.lf-pill-emoji:hover { border-color: var(--lf-emoji-1); color: var(--lf-emoji-1); background: rgba(249,115,22,0.07); }
.lf-pill-emoji.active {
	background: linear-gradient(135deg, var(--lf-emoji-1), var(--lf-emoji-2));
	box-shadow: 0 3px 12px rgba(249, 115, 22, 0.32);
}

/* ─── TOGGLE ROW ────────────────────────────────────────── */
.lf-toggle-row {
	display: flex;
	gap: 8px;
	padding: 0 2px 10px;
	/* Scrolls sideways like the category rail instead of wrapping, so the
	   three buttons stay on one line at any width. */
	flex-wrap: nowrap;
	overflow-x: auto;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.lf-toggle-row::-webkit-scrollbar { display: none; }
.lf-toggle { flex: 0 0 auto; }

.lf-toggle {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 13px 5px 9px;
	border-radius: var(--lf-radius-pill);
	border: 1.5px solid var(--lf-border);
	background: var(--lf-surface);
	font-family: var(--lf-font-body);
	font-size: 12px;
	font-weight: 600;
	color: var(--lf-text-2);
	cursor: pointer;
	transition: var(--lf-transition);
	line-height: 1.3;
}

.lf-toggle:hover { border-color: var(--lf-accent); color: var(--lf-accent); }

.lf-toggle-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--lf-text-light);
	flex: none;
	transition: var(--lf-transition);
}

.lf-toggle-glyph { font-size: 13px; line-height: 1; }

.lf-toggle.lf-toggle-on {
	background: linear-gradient(135deg, rgba(198, 97, 63,0.10), rgba(139,92,246,0.10));
	border-color: var(--lf-accent);
	color: var(--lf-accent);
}

.lf-toggle.lf-toggle-on .lf-toggle-dot {
	background: var(--lf-accent);
	box-shadow: 0 0 0 3px rgba(198, 97, 63, 0.18);
}

.lf-toggle-gaming:hover { border-color: var(--lf-game-1); color: var(--lf-game-2); }

.lf-toggle-gaming.lf-toggle-on {
	background: linear-gradient(135deg, rgba(16,185,129,0.12), rgba(5,150,105,0.12));
	border-color: var(--lf-game-1);
	color: var(--lf-game-2);
}

.lf-toggle-gaming.lf-toggle-on .lf-toggle-dot {
	background: var(--lf-game-1);
	box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
}

/* ─── RESULTS BAR + JUMP MENU ───────────────────────────── */
.lf-section {
	max-width: 980px;
	margin: 0 auto;
	padding: 18px 16px 0;
}

.lf-results-bar {
	position: relative;
	margin-bottom: 14px;
}

.lf-results-menu-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 12px 7px 12px;
	border-radius: var(--lf-radius-pill);
	border: 1.5px solid var(--lf-border);
	background: var(--lf-surface);
	font-family: var(--lf-font-body);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--lf-text);
	cursor: pointer;
	transition: var(--lf-transition);
	max-width: 100%;
}

.lf-results-menu-btn:hover { border-color: var(--lf-accent); box-shadow: var(--lf-shadow-sm); }
.lf-results-menu-btn[aria-expanded="true"] .lf-chevron { transform: rotate(180deg); }
.lf-chevron { transition: transform 0.2s ease; color: var(--lf-text-3); flex: none; }

.lf-label-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--lf-accent), var(--lf-accent-2));
	flex: none;
}

.lf-results-menu-btn.lf-menu-emoji .lf-label-dot {
	background: linear-gradient(135deg, var(--lf-emoji-1), var(--lf-emoji-2));
}

.lf-count-badge {
	background: var(--lf-surface-2);
	color: var(--lf-text-2);
	font-size: 11px;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: var(--lf-radius-pill);
	font-variant-numeric: tabular-nums;
}

.lf-menu {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 70;
	width: min(560px, calc(100vw - 32px));
	background: var(--lf-surface);
	border: 1px solid var(--lf-border);
	border-radius: var(--lf-radius);
	box-shadow: var(--lf-shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.lf-menu.lf-menu-open { opacity: 1; visibility: visible; transform: translateY(0); }

.lf-menu-inner {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 2px;
	padding: 10px;
	max-height: min(60vh, 420px);
	overflow-y: auto;
}

.lf-menu-item {
	text-align: left;
	padding: 7px 10px;
	border: none;
	background: transparent;
	border-radius: var(--lf-radius-sm);
	font-family: var(--lf-font-body);
	font-size: 12.5px;
	color: var(--lf-text-2);
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.lf-menu-item:hover { background: var(--lf-surface-2); color: var(--lf-text); }
.lf-menu-item.active {
	background: linear-gradient(135deg, var(--lf-accent), var(--lf-accent-2));
	color: #fff;
	font-weight: 600;
}
.lf-menu-item-emoji { color: #c2410c; }
.lf-menu-item-emoji.active { background: linear-gradient(135deg, var(--lf-emoji-1), var(--lf-emoji-2)); color: #fff; }

/* ─── GRID + CARDS ──────────────────────────────────────── */
.lf-grid {
	display: grid;
	/* Fixed column counts, not auto-fill: a card wide enough to hold a
	   decorated result on ONE line is the point, so the count is pinned
	   per breakpoint rather than derived from a minimum width. */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}

.lf-card {
	position: relative;
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
	background: var(--lf-surface);
	border: 1px solid var(--lf-border);
	border-radius: var(--lf-radius-lg);
	padding: 15px 14px 10px 18px;
	cursor: pointer;
	outline: none;
	transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.lf-card:hover {
	border-color: var(--lf-border-2);
	box-shadow: 0 8px 22px rgba(35, 41, 80, 0.09);
}
.lf-card:focus-visible {
	border-color: var(--lf-accent);
	box-shadow: 0 0 0 3px rgba(198, 97, 63, 0.22);
}
.lf-card:active { transform: translateY(1px); }
.lf-card.lf-card-copied { border-color: var(--lf-accent); }

/* head: name + category chip left, star right */
.lf-card-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}
.lf-card-meta {
	display: flex;
	align-items: center;
	gap: 9px;
	min-width: 0;
	flex-wrap: wrap;
}
.lf-card-name {
	font-family: var(--lf-font-body);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--lf-text);
}
.lf-card-cat {
	display: inline-flex;
	align-items: center;
	height: 20px;
	padding: 0 8px;
	border-radius: 999px;
	background: var(--lf-surface-2);
	font-family: var(--lf-font-body);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--lf-text-3);
	white-space: nowrap;
}

/* the preview is the loudest element on the card — one line, ellipsized;
   the copy always uses the full string, not the clipped display */
.lf-card-preview {
	max-width: 100%;
	margin: 12px 0 10px;
	font-family: var(--lf-font-glyph);
	font-size: 27px;
	line-height: 1.35;
	color: var(--lf-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-height: 37px;
}
.lf-placeholder-hint {
	font-family: var(--lf-font-body);
	font-size: 13.5px;
	color: var(--lf-text-3);
	font-style: italic;
}

/* fav: persisted state, kept apart from the one-shot rail actions */
.lf-fav-btn {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	margin: -2px -4px 0 0;
	flex: none;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--lf-text-3);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background 0.14s ease, color 0.14s ease;
}
.lf-fav-btn:hover { background: var(--lf-surface-2); }
.lf-fav-btn:focus-visible { outline: 2px solid var(--lf-accent); outline-offset: 2px; }
.lf-fav-btn.lf-fav-on { color: var(--lf-accent); }
.lf-fav-btn.lf-fav-on svg { fill: var(--lf-accent); }

/* chaos slider (Zalgo / Glitch cards) — unchanged behaviour, sits above the rail */
.lf-chaos { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.lf-chaos-label { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lf-text-3); flex: none; }
.lf-chaos-label b { color: var(--lf-accent); }
.lf-chaos input[type=range] { flex: 1; accent-color: var(--lf-accent); height: 22px; margin: 0; }

/* card action rail — always visible, tertiary weight; never behind hover.
   Named .lf-card-rail: .lf-rail is already the category pill rail. */
.lf-card-rail {
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	border-top: 1px solid var(--lf-border);
	padding-top: 7px;
	margin-right: -4px;
}
.lf-card-rail-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	font-family: var(--lf-font-body);
	font-size: 12px;
	font-weight: 500;
	color: var(--lf-text-3);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.lf-card-rail-label .lf-icon-check { display: none; }
.lf-card.lf-card-copied .lf-card-rail-label {
	color: var(--lf-accent);
	font-weight: 600;
	font-size: 12.5px;
	animation: lf-rail-pop 0.18s ease-out;
}
.lf-card.lf-card-copied .lf-card-rail-label .lf-icon-check { display: inline-flex; }
@keyframes lf-rail-pop { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.lf-card-rail-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.lf-icon-btn {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: var(--lf-radius-sm);
	background: transparent;
	color: var(--lf-text-3);
	cursor: pointer;
	padding: 0;
	-webkit-tap-highlight-color: transparent;
	transition: background 0.14s ease, color 0.14s ease;
}
.lf-icon-btn:hover { background: var(--lf-surface-2); color: var(--lf-accent); }
.lf-icon-btn:focus-visible { outline: 2px solid var(--lf-accent); outline-offset: 2px; }
.lf-copy-btn { color: var(--lf-text-2); }
.lf-copy-btn:hover { background: rgba(198, 97, 63, 0.10); color: var(--lf-accent); }
.lf-app.lf-gaming-on .lf-icon-btn:hover { color: var(--lf-game-2); }

@keyframes lf-shuffle-in { 0% { transform: translateY(6px); opacity: 0.35; } 100% { transform: none; opacity: 1; } }
.lf-card.lf-shuffled .lf-card-preview { animation: lf-shuffle-in 0.32s cubic-bezier(0.34,1.4,0.64,1); }

@media (max-width: 520px) {
	.lf-card-preview { font-size: 24px; min-height: 33px; }
}


/* ── restored: gaming/emoji card accents ── */
.lf-app.lf-gaming-on .lf-card::before {
	background: linear-gradient(180deg, var(--lf-game-1), var(--lf-game-2));
}
.lf-app.lf-gaming-on .lf-card:hover { border-color: rgba(16, 185, 129, 0.35); }

.lf-card-emoji::before { background: linear-gradient(180deg, var(--lf-emoji-1), var(--lf-emoji-2)); }
.lf-card-emoji .lf-card-cat { color: #c2410c; }


/* ── restored: per-category preview behaviour ── */
.lf-card-preview::-webkit-scrollbar { width: 6px; }
.lf-card-preview::-webkit-scrollbar-track { background: transparent; }
.lf-card-preview::-webkit-scrollbar-thumb { background: var(--lf-scroll-thumb); border-radius: 100px; }

.lf-card-emoji .lf-card-preview { font-size: 19px; line-height: 1.7; }
.lf-card-comic .lf-card-preview { font-family: 'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', cursive; }

.lf-card[data-cat="morse"] .lf-card-preview,
.lf-card[data-cat="regional"] .lf-card-preview { font-size: 15px; letter-spacing: 0.02em; }

.lf-card[data-cat="zalgo"] .lf-card-preview { line-height: 2.1; }


/* ── restored: load-more, empty, toast, entrance, social preview ── */
.lf-loadmore-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 26px 16px 0;
}

.lf-loadmore-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 22px;
	border-radius: var(--lf-radius-pill);
	border: none;
	background: linear-gradient(135deg, var(--lf-accent), var(--lf-accent-2));
	color: #fff;
	font-family: var(--lf-font-body);
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 4px 16px rgba(198, 97, 63, 0.3);
	transition: var(--lf-transition);
}

.lf-loadmore-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(198, 97, 63, 0.38); }
.lf-loadmore-hint { font-size: 12px; color: var(--lf-text-3); margin: 0; }

.lf-empty {
	display: none;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 56px 20px;
	color: var(--lf-text-3);
	text-align: center;
}

.lf-empty-icon { font-size: 30px; color: var(--lf-text-light); }
.lf-empty p { margin: 0; font-size: 14px; }

.lf-toast {
	position: fixed;
	left: 50%;
	bottom: 26px;
	transform: translate(-50%, 16px);
	background: var(--lf-text);
	color: #fff;
	font-size: 13px;
	font-weight: 500;
	padding: 9px 20px;
	border-radius: var(--lf-radius-pill);
	box-shadow: var(--lf-shadow-lg);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
	z-index: 9999;
	pointer-events: none;
}

.lf-toast.lf-toast-show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* ─── ENTRANCE ──────────────────────────────────────────── */
.lf-app .lf-card { opacity: 0; transform: translateY(8px); }
.lf-app.lf-ready .lf-card { animation: lf-fadeup 0.34s ease forwards; }
.lf-app.lf-ready .lf-card:nth-child(1) { animation-delay: 0.02s; }
.lf-app.lf-ready .lf-card:nth-child(2) { animation-delay: 0.04s; }
.lf-app.lf-ready .lf-card:nth-child(3) { animation-delay: 0.06s; }
.lf-app.lf-ready .lf-card:nth-child(4) { animation-delay: 0.08s; }
.lf-app.lf-ready .lf-card:nth-child(5) { animation-delay: 0.10s; }
.lf-app.lf-ready .lf-card:nth-child(6) { animation-delay: 0.12s; }
.lf-app.lf-ready .lf-card:nth-child(n+7) { animation-delay: 0.14s; }

@keyframes lf-fadeup {
	to { opacity: 1; transform: translateY(0); }
}

/* ─── RESPONSIVE ────────────────────────────────────────── */
@media (max-width: 1024px) {
	.lf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
	/* Counter is the first thing to go on a narrow screen — that reclaimed
	   space is what lets the input padding and rail gap shrink. */
	.lf-char-count { display: none; }

	.lf-input { padding-right: 48px; padding-left: 18px; font-size: 16px; min-height: 58px; }
	.lf-input-side { right: 9px; }

	.lf-toolbar-inner { padding: 10px 12px 6px; }
	.lf-rail { gap: 4px; padding: 8px 0 6px; }
	.lf-pill { padding: 6px 12px; font-size: 12px; }
	.lf-toggle-row { gap: 6px; padding: 0 0 8px; }
	.lf-toggle { padding: 5px 11px 5px 8px; font-size: 11.5px; }

	.lf-section { padding: 14px 12px 0; }
	.lf-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
	/* Edge to edge on phones — the tool is the page here. */
	.lf-app { --lf-side: 12px; }
	.lf-card-preview { font-size: 17px; }
	.lf-menu { width: calc(100vw - 24px); }
	.lf-menu-inner { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}

@media (max-width: 380px) {
	.lf-toggle-text { font-size: 11px; }
	.lf-pill { padding: 5px 10px; }
}

/* ─── ACCESSIBILITY ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.lf-app *,
	.lf-app *::before,
	.lf-app *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	.lf-app .lf-card { opacity: 1; transform: none; }
}

@media print {
	.lf-toolbar, .lf-loadmore-wrap, .lf-toast, .lf-copy-btn { display: none !important; }
	.lf-card { break-inside: avoid; border: 1px solid #ddd; }
}


/* ─── SOCIAL PREVIEW ────────────────────────────────────────
   A button beside Gaming Mode opens realistic phone mock-ups so the
   visitor can see the copied style in the place they will actually paste
   it. The chrome is drawn in CSS — no platform logo artwork is used. */
.lf-toggle-social.lf-toggle-on,
.lf-toggle-social:hover {
	border-color: var(--lf-emoji-2);
	color: var(--lf-emoji-2);
}

.lf-social-overlay {
	position: fixed;
	inset: 0;
	z-index: 9998;
	background: rgba(15, 23, 42, 0.55);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.22s ease, visibility 0.22s;
}

.lf-social-overlay.lf-open { opacity: 1; visibility: visible; }

.lf-social-modal {
	background: var(--lf-surface);
	border-radius: var(--lf-radius-xl);
	box-shadow: var(--lf-shadow-lg);
	width: min(90vw, 1400px);
	max-height: calc(100vh - 40px);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transform: translateY(12px) scale(0.985);
	transition: transform 0.26s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.lf-social-overlay.lf-open .lf-social-modal { transform: none; }

.lf-social-head {
	position: relative;
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding: 16px 56px 12px 22px;
	border-bottom: 1px solid var(--lf-border);
}

.lf-social-head h3 {
	margin: 0;
	flex: none;
	font-family: var(--lf-font-display);
	font-size: 19px;
	font-weight: 600;
	color: var(--lf-text);
	white-space: nowrap;
}

.lf-social-head p {
	margin: 0;
	flex: 1;
	min-width: 0;
	font-size: 12.5px;
	color: var(--lf-text-3);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.lf-social-close {
	position: absolute;
	top: 14px;
	right: 16px;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid var(--lf-border);
	background: var(--lf-surface-2);
	color: var(--lf-text-2);
	cursor: pointer;
	transition: var(--lf-transition);
	padding: 0;
}

.lf-social-close:hover { background: #fee2e2; border-color: #fca5a5; color: #ef4444; transform: rotate(90deg); }

.lf-social-strip {
	display: flex;
	gap: 18px;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 20px 22px 24px;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}

/* auto margins on the ends centre the phones on wide screens without
   breaking overflow scrolling — justify-content:center would clip the
   left phone when the strip overflows */
.lf-social-strip > .lf-phone:first-child { margin-left: auto; }
.lf-social-strip > .lf-phone:last-child  { margin-right: auto; }

.lf-social-strip::-webkit-scrollbar { height: 8px; }
.lf-social-strip::-webkit-scrollbar-thumb { background: var(--lf-scroll-thumb); border-radius: 100px; }

/* ── phone frame ── */
.lf-phone {
	flex: 0 0 auto;
	width: 292px;
	scroll-snap-align: center;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.lf-phone-body {
	position: relative;
	background: #0f172a;
	border-radius: 34px;
	padding: 9px;
	box-shadow: 0 18px 40px -18px rgba(15, 23, 42, 0.55), inset 0 0 0 1px rgba(255,255,255,0.09);
}

.lf-phone-screen {
	position: relative;
	background: #fff;
	border-radius: 26px;
	height: 452px;
	overflow-y: auto;
	overflow-x: hidden;
	font-size: 12px;
	line-height: 1.4;
	color: #0f172a;
	scrollbar-width: thin;
}

.lf-phone-screen::-webkit-scrollbar { width: 4px; }
.lf-phone-screen::-webkit-scrollbar-thumb { background: rgba(148,163,184,.5); border-radius: 100px; }

.lf-phone-notch {
	position: absolute;
	top: 9px;
	left: 50%;
	transform: translateX(-50%);
	width: 78px;
	height: 17px;
	background: #0f172a;
	border-radius: 100px;
	z-index: 3;
}

.lf-phone-label {
	text-align: center;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--lf-text-3);
}

/* ── real-screenshot mode ──
   When the owner supplies their own profile screenshots, the drawn chrome
   is dropped and only the bio is overlaid, positioned in percentages so it
   tracks the image at any width. */
.lf-shot { padding: 0; background: #fff; }

.lf-shot-wrap { position: relative; width: 100%; }

.lf-shot-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 26px 26px 0 0;
}

.lf-shot-bio {
	position: absolute;
	line-height: 1.35;
	color: #0f172a;
	word-break: break-word;
	overflow-wrap: break-word;
	/* A touch of backdrop keeps the swapped line legible over whatever the
	   screenshot has underneath it. */
	background: rgba(255, 255, 255, 0.82);
	border-radius: 4px;
	padding: 1px 3px;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.82);
}

/* ── shared bits ── */
.lf-sp-status {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 9px 15px 4px;
	font-size: 11px;
	font-weight: 700;
	color: #0f172a;
}

.lf-sp-sig { display: flex; align-items: center; gap: 2px; font-size: 10px; font-weight: 700; }
.lf-sp-sig i { width: 2.5px; background: #0f172a; border-radius: 1px; }
.lf-sp-sig i:nth-child(1) { height: 4px; }
.lf-sp-sig i:nth-child(2) { height: 6px; }
.lf-sp-sig i:nth-child(3) { height: 8px; }
.lf-sp-sig i:nth-child(4) { height: 10px; }
.lf-sp-sig b { width: 17px; height: 9px; border: 1.2px solid #0f172a; border-radius: 2.5px; margin-left: 2px; }
.lf-sp-sig b::after { content: ''; display: block; width: 60%; height: 100%; background: #0f172a; border-radius: 1px; }

.lf-sp-avatar {
	border-radius: 50%;
	background: linear-gradient(135deg, #c6613f, #a75c44);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--lf-font-display);
	font-weight: 700;
	font-style: italic;
	flex: none;
	background-size: cover;
	background-position: center;
}

.lf-sp-styled { font-family: var(--lf-font-glyph); word-break: break-word; overflow-wrap: break-word; }
.lf-sp-empty  { color: #b9c2cf; font-style: italic; font-weight: 400; }

.lf-ic-link, .lf-ic-cal {
	display: inline-block;
	width: 9px; height: 9px;
	margin-right: 3px;
	border: 1.3px solid currentColor;
	vertical-align: -1px;
}
.lf-ic-link { border-radius: 50% 2px 50% 2px; }
.lf-ic-cal  { border-radius: 2px; border-top-width: 3px; }

/* ═══ INSTAGRAM ═══ */
.lf-ig { background: #fff; color: #262626; }

.lf-ig-bar {
	display: flex; align-items: center; gap: 9px;
	padding: 4px 14px 12px;
}
.lf-ig-plus { font-size: 20px; font-weight: 300; line-height: 1; }
.lf-ig-handle { flex: 1; text-align: center; font-weight: 700; font-size: 14px; }
.lf-ig-handle em { font-style: normal; font-weight: 400; font-size: 10px; }
.lf-ig-burger { display: flex; flex-direction: column; gap: 3px; }
.lf-ig-burger i { width: 15px; height: 1.6px; background: #262626; border-radius: 2px; }

.lf-ig-top { display: flex; align-items: center; gap: 20px; padding: 4px 16px 0; }
.lf-ig-av { width: 74px; height: 74px; font-size: 29px; }
.lf-ig-stats { display: flex; gap: 20px; text-align: center; flex: 1; justify-content: space-around; }
.lf-ig-stats b { display: block; font-size: 15px; font-weight: 700; }
.lf-ig-stats span { font-size: 11px; color: #262626; }

.lf-ig-name { padding: 11px 16px 1px; font-weight: 700; font-size: 12.5px; }
.lf-ig-bio  { padding: 0 16px; font-size: 12.5px; line-height: 1.42; }
.lf-ig-link { padding: 3px 16px 0; font-size: 12.5px; color: #00376b; font-weight: 600; }

.lf-ig-btns { display: flex; gap: 6px; padding: 12px 16px 0; }
.lf-ig-btns span {
	flex: 1; text-align: center; background: #efefef; border-radius: 8px;
	padding: 7px 0; font-size: 12px; font-weight: 600;
}

.lf-ig-tabs { display: flex; margin-top: 14px; border-top: 1px solid #dbdbdb; }
.lf-ig-tabs span { flex: 1; height: 38px; position: relative; }
.lf-ig-tabs span::before {
	content: ''; position: absolute; left: 50%; top: 50%;
	transform: translate(-50%, -50%);
	width: 15px; height: 15px; border: 1.6px solid #8e8e8e;
}
.lf-ig-tabs .on::before { border-color: #262626; }
.lf-ig-tabs .reel::before { border-radius: 3px; }
.lf-ig-tabs .tag::before { border-radius: 50% 50% 3px 3px; }
.lf-ig-tabs .on::after {
	content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1.6px; background: #262626;
}

.lf-ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 2px; }
.lf-ig-grid i { display: block; padding-top: 100%; background: #f1f3f5; }

/* ═══ X ═══ */
.lf-x { background: #fff; color: #0f1419; }

.lf-x-banner {
	position: relative; height: 78px;
	background: linear-gradient(120deg, #334155, #0f172a);
	display: flex; align-items: center; justify-content: space-between; padding: 0 12px;
}
.lf-x-back, .lf-x-search {
	width: 26px; height: 26px; border-radius: 50%;
	background: rgba(15,23,42,.55); color: #fff;
	display: flex; align-items: center; justify-content: center; font-size: 14px;
}

.lf-x-body { padding: 0 14px 10px; }
.lf-x-av {
	width: 62px; height: 62px; font-size: 24px;
	border: 3px solid #fff; margin-top: -31px;
}

.lf-x-nameline { display: flex; align-items: center; gap: 6px; margin-top: 7px; }
.lf-x-name { font-size: 17px; font-weight: 800; }
.lf-x-verify {
	flex: none; font-size: 10px; font-weight: 700; color: #0f1419;
	border: 1px solid #cfd9de; border-radius: 100px; padding: 2px 7px;
}
.lf-x-handle { font-size: 12.5px; color: #536471; margin-top: 1px; }
.lf-x-bio    { font-size: 12.5px; margin-top: 8px; line-height: 1.4; }
.lf-x-meta   { font-size: 11.5px; color: #536471; margin-top: 7px; }
.lf-x-counts { font-size: 12px; color: #536471; margin-top: 7px; }
.lf-x-counts b { color: #0f1419; font-weight: 700; }

.lf-x-btns { display: flex; gap: 7px; margin-top: 11px; }
.lf-x-btns span {
	flex: 1; text-align: center; border: 1px solid #cfd9de; border-radius: 100px;
	padding: 6px 0; font-size: 12px; font-weight: 700;
}

.lf-x-tabs { display: flex; border-bottom: 1px solid #eff3f4; margin-top: 4px; }
.lf-x-tabs span {
	flex: 1; text-align: center; padding: 11px 0; font-size: 12px;
	font-weight: 600; color: #536471; position: relative;
}
.lf-x-tabs .on { color: #0f1419; font-weight: 800; }
.lf-x-tabs .on::after {
	content: ''; position: absolute; left: 50%; transform: translateX(-50%);
	bottom: 0; width: 42px; height: 3.4px; background: #1d9bf0; border-radius: 100px;
}

/* ═══ FACEBOOK ═══ */
.lf-fb { background: #fff; color: #050505; }

.lf-fb-cover {
	position: relative; height: 96px;
	background: linear-gradient(120deg, #1e3a8a, #1877f2);
	display: flex; align-items: flex-start; justify-content: space-between; padding: 10px 12px;
}

.lf-fb-body { padding: 0 16px 12px; text-align: center; }
.lf-fb-av {
	width: 84px; height: 84px; font-size: 33px;
	border: 4px solid #fff; margin: -44px auto 0;
}

.lf-fb-name { font-size: 19px; font-weight: 800; margin-top: 8px; }
.lf-fb-meta { font-size: 12px; color: #65676b; margin-top: 3px; }
.lf-fb-bio  { font-size: 12.5px; margin-top: 8px; line-height: 1.4; }

.lf-fb-btns { display: flex; gap: 7px; margin-top: 12px; }
.lf-fb-btns span {
	flex: 1; text-align: center; background: #e4e6eb; border-radius: 7px;
	padding: 8px 0; font-size: 12.5px; font-weight: 700;
}
.lf-fb-btns .pri { background: #1877f2; color: #fff; }

.lf-fb-tabs { display: flex; gap: 8px; margin-top: 14px; }
.lf-fb-tabs span {
	padding: 6px 15px; border-radius: 100px; font-size: 12.5px;
	font-weight: 600; color: #65676b; background: #f0f2f5;
}
.lf-fb-tabs .on { background: #e7f3ff; color: #1877f2; }

.lf-fb-sec  { text-align: left; font-size: 15px; font-weight: 800; margin-top: 16px; }
.lf-fb-link { text-align: left; font-size: 12.5px; color: #1877f2; margin-top: 6px; }

.lf-social-foot {
	margin: 6px 22px 10px;
	font-size: 9.5px;
	line-height: 1.5;
	color: var(--lf-text-3);
	opacity: 0.75;
	text-align: center;
}
.lf-social-foot a { color: var(--lf-accent); }

@media (max-width: 600px) {
	.lf-toggle-social { margin-left: 0; }
	.lf-social-modal { width: 100vw; max-height: 100vh; border-radius: 0; }
	.lf-social-strip { padding: 16px 14px 20px; gap: 14px; }
	.lf-phone { width: min(280px, 82vw); }
}



/* ─── DECORATION PULSE ──────────────────────────────────────
   Flipping Text Decoration rebuilds every card at once, which without
   feedback just looks like a flicker. A staggered lift plus a sheen
   sweeping left to right makes the change feel deliberate — the eye
   follows the wave across the grid instead of being startled by it.
   Index comes from --lf-i, set per card by the script. */
@keyframes lf-decor-pop {
	0%   { transform: translateY(0) scale(1); }
	30%  { transform: translateY(-7px) scale(1.025); }
	58%  { transform: translateY(2px) scale(0.996); }
	100% { transform: translateY(0) scale(1); }
}

@keyframes lf-decor-glow {
	0%, 100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0); }
	35%      { box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.30),
	                       0 16px 34px -16px rgba(139, 92, 246, 0.55); }
}

@keyframes lf-sheen {
	from { background-position: -140% 0; }
	to   { background-position: 240% 0; }
}

.lf-app.lf-pulse .lf-card {
	animation: lf-decor-pop 0.62s cubic-bezier(0.34, 1.5, 0.64, 1) both,
	           lf-decor-glow 0.62s ease both;
	animation-delay: calc(var(--lf-i, 0) * 26ms);
}

.lf-app.lf-pulse .lf-card-preview {
	background-image: linear-gradient(100deg,
		transparent 35%, rgba(139, 92, 246, 0.20) 50%, transparent 65%);
	background-size: 240% 100%;
	background-repeat: no-repeat;
	animation: lf-sheen 0.9s ease both;
	animation-delay: calc(var(--lf-i, 0) * 26ms);
}

.lf-app.lf-pulse.lf-pulse-game .lf-card {
	animation: lf-decor-pop 0.62s cubic-bezier(0.34, 1.5, 0.64, 1) both,
	           lf-decor-glow-game 0.62s ease both;
	animation-delay: calc(var(--lf-i, 0) * 26ms);
}

@keyframes lf-decor-glow-game {
	0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
	35%      { box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.30),
	                       0 16px 34px -16px rgba(16, 185, 129, 0.55); }
}

/* the button itself should feel clicked */
.lf-toggle:active { transform: scale(0.94); }

@keyframes lf-glyph-spin {
	0%   { transform: rotate(0deg) scale(1); }
	50%  { transform: rotate(180deg) scale(1.4); }
	100% { transform: rotate(360deg) scale(1); }
}

@keyframes lf-ring {
	from { box-shadow: 0 0 0 0 rgba(198, 97, 63, 0.55); }
	to   { box-shadow: 0 0 0 15px rgba(198, 97, 63, 0); }
}

.lf-toggle.lf-fired .lf-toggle-glyph {
	animation: lf-glyph-spin 0.6s cubic-bezier(0.34, 1.5, 0.64, 1);
	display: inline-block;
}

.lf-toggle.lf-fired .lf-toggle-dot { animation: lf-ring 0.7s ease-out; }

@media (prefers-reduced-motion: reduce) {
	.lf-app.lf-pulse .lf-card,
	.lf-app.lf-pulse .lf-card-preview,
	.lf-toggle.lf-fired .lf-toggle-glyph,
	.lf-toggle.lf-fired .lf-toggle-dot { animation: none !important; }
}

/* ─── AD SLOTS ──────────────────────────────────────────────
   Full-row slots dealt into the grid at fixed card positions. They span
   every column and carry a visible label, so they never read as another
   copyable card — which is both better for the visitor and the safer
   side of AdSense's accidental-click policy. */
.lf-ad-slot {
	grid-column: 1 / -1;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100px;
	padding: 26px 14px 14px;
	margin: 4px 0;
	background: var(--lf-surface-2);
	border: 1px solid var(--lf-border);
	border-radius: var(--lf-radius-lg);
	overflow: hidden;
}

.lf-ad-slot::before {
	content: attr(data-label);
	position: absolute;
	top: 8px;
	left: 14px;
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--lf-text-3);
}

.lf-ad-slot > * { max-width: 100%; }

.lf-ad-empty {
	font-size: 12px;
	color: var(--lf-text-3);
	font-style: italic;
}


/* ═══════════════════════════════════════════════════════════
   v10 — STUDIO LAYER
   Everything below reuses the existing tokens (--lf-accent, --lf-surface,
   --lf-border, radii, shadows). No new colours; layout of the tool itself
   is unchanged — these are additions inside the same containers.
   ═══════════════════════════════════════════════════════════ */

/* ─── Toolbar tools — compact pills, same scale as the category rail ─── */
.lf-tools-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 2px 2px 10px;
}

.lf-tool {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 36px;
	padding: 0 14px;
	border-radius: 999px;
	border: 1.5px solid var(--lf-border);
	background: var(--lf-surface);
	font-family: var(--lf-font-body);
	font-size: 13px;
	font-weight: 600;
	color: var(--lf-text-2);
	cursor: pointer;
	white-space: nowrap;
	transition: var(--lf-transition);
}
.lf-tool:hover { border-color: var(--lf-accent); color: var(--lf-accent); box-shadow: var(--lf-shadow-sm); transform: translateY(-1px); }
.lf-tool:active { transform: scale(0.96); }
.lf-tool:focus-visible { outline: 2px solid var(--lf-accent); outline-offset: 2px; }

.lf-tool-icon { display: inline-flex; width: 16px; height: 16px; flex: none; color: inherit; }
.lf-tool-icon svg { width: 16px; height: 16px; }
.lf-tool-label { line-height: 1; }

/* current state, inline: "· Royal" */
.lf-tool-state { font-size: 11.5px; font-weight: 600; color: var(--lf-text-3); line-height: 1; max-width: 12ch; overflow: hidden; text-overflow: ellipsis; }
.lf-tool-state:not(:empty)::before { content: '·'; margin-right: 6px; color: var(--lf-border-2); }
.lf-tool.lf-toggle-on .lf-tool-state, .lf-tool.lf-tool-open .lf-tool-state { color: var(--lf-accent); }
.lf-tool.lf-toggle-gaming.lf-toggle-on .lf-tool-state { color: var(--lf-game-2); }

.lf-tool.lf-toggle-on, .lf-tool.lf-tool-open {
	border-color: var(--lf-accent);
	background: linear-gradient(135deg, rgba(198, 97, 63,0.09), rgba(139,92,246,0.09));
	color: var(--lf-accent);
}
.lf-tool.lf-toggle-gaming.lf-toggle-on, .lf-tool.lf-toggle-gaming.lf-tool-open {
	border-color: var(--lf-game-1);
	background: linear-gradient(135deg, rgba(16,185,129,0.10), rgba(5,150,105,0.10));
	color: var(--lf-game-2);
}

.lf-tool-studio { border-color: var(--lf-accent); background: linear-gradient(135deg, rgba(198, 97, 63,0.10), rgba(139,92,246,0.06)); color: var(--lf-accent); }
.lf-tool-badge {
	font-size: 8.5px; font-weight: 700; letter-spacing: 0.08em; line-height: 1;
	padding: 3px 6px; border-radius: 99px;
	background: linear-gradient(135deg, var(--lf-accent), var(--lf-accent-2));
	color: #fff;
}

.lf-tool.lf-fired .lf-toggle-glyph { animation: lf-glyph-spin 0.6s cubic-bezier(0.34,1.5,0.64,1); }

@media (max-width: 600px) {
	.lf-tools-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
	.lf-tools-row::-webkit-scrollbar { display: none; }
	.lf-tool { height: 34px; padding: 0 12px; flex: none; }
}

/* ─── Drum-wheel row ─── */
@keyframes lf-pop-in {
	from { opacity: 0; transform: translateY(-10px) scale(0.94); }
	to   { opacity: 1; transform: none; }
}

.lf-wheel-row[hidden] { display: none !important; }   /* themes love resetting [hidden] */

.lf-wheel-row {
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: 640px;
	margin: 0 0 10px;
	padding: 6px 8px;
	border-radius: 999px;
	border: 1.5px solid var(--lf-border-2);
	background: linear-gradient(135deg, rgba(198, 97, 63,0.06), rgba(139,92,246,0.04), var(--lf-surface));
	box-shadow: 0 8px 26px -14px rgba(198, 97, 63,0.45), var(--lf-shadow-sm);
}
.lf-wheel-row.lf-pop { animation: lf-pop-in 0.28s cubic-bezier(0.34,1.56,0.64,1) both; }

.lf-wheel-kicker { flex: none; font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; color: var(--lf-accent); padding-left: 6px; }
.lf-wheel-nav {
	flex: none; width: 24px; height: 24px; border-radius: 50%;
	border: 1.5px solid var(--lf-border); background: var(--lf-surface);
	color: var(--lf-text-2); cursor: pointer; font-size: 14px; line-height: 1;
	display: flex; align-items: center; justify-content: center; padding: 0;
	transition: var(--lf-transition);
}
.lf-wheel-nav:hover { border-color: var(--lf-accent); color: var(--lf-accent); }
.lf-wheel-close { font-size: 10px; margin-left: auto; }

.lf-wheel {
	flex: 1; min-width: 0;
	display: flex; align-items: center; justify-content: center; gap: 4px;
	perspective: 240px; overflow: hidden; height: 32px;
	touch-action: pan-y;               /* horizontal swipes belong to the wheel */
	cursor: grab; user-select: none;
}
.lf-wheel.lf-dragging { cursor: grabbing; }
.lf-wheel-item {
	flex: none; display: inline-flex; align-items: center; gap: 5px;
	border: 1.5px solid transparent; background: transparent;
	color: var(--lf-text-2); cursor: pointer;
	padding: 4px 7px; border-radius: 999px;
	font-family: var(--lf-font-body); font-size: 14px; line-height: 1;
	transition: transform 0.14s ease, opacity 0.14s ease, background 0.14s ease;
	transform-style: preserve-3d;
	pointer-events: auto;
}
.lf-wheel-item.lf-wheel-active {
	border-color: var(--lf-accent);
	background: linear-gradient(135deg, rgba(198, 97, 63,0.12), rgba(139,92,246,0.10));
	color: var(--lf-accent);
	padding: 4px 12px; font-size: 12.5px; font-weight: 600;
}
.lf-wheel-glyph { font-size: 14px; }
.lf-wheel-name  { font-size: 12.5px; }
.lf-wheel-hint  { flex: 0 1 auto; min-width: 0; font-size: 10.5px; color: var(--lf-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 600px) {
	.lf-wheel-row { border-radius: 18px; padding: 6px 8px; gap: 6px; }
	.lf-wheel-kicker, .lf-wheel-hint { display: none; }   /* the wheel IS the row on a phone */
	.lf-wheel-nav:not(.lf-wheel-close) { display: none; } /* swipe replaces the arrows */
	.lf-wheel { height: 38px; }
	.lf-wheel-item { font-size: 15px; padding: 5px 8px; }
	.lf-wheel-item.lf-wheel-active { font-size: 13.5px; padding: 5px 13px; }
}

/* ─── Your styles row ─── */
.lf-yours { padding-top: 14px; }
.lf-yours-head {
	display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
	padding-bottom: 8px; margin-bottom: 12px;
	background: linear-gradient(90deg, var(--lf-border), transparent) bottom / 100% 1px no-repeat;
}
.lf-yours-kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; color: var(--lf-accent); }
.lf-yours-title  { margin: 0; font-family: var(--lf-font-display); font-size: 20px; font-weight: 600; color: var(--lf-text); }
.lf-yours-cap    { font-size: 12px; color: var(--lf-text-3); margin-left: auto; }
.lf-yours-row    { display: flex; flex-wrap: wrap; gap: 8px; }

.lf-chip {
	display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
	padding: 8px 14px 8px 12px; border-radius: 999px;
	border: 1.5px solid var(--lf-border); background: var(--lf-surface);
	font-family: var(--lf-font-glyph); font-size: 15px; color: var(--lf-text);
	cursor: pointer; transition: var(--lf-transition); text-align: left;
}
.lf-chip:hover { border-color: var(--lf-accent); box-shadow: 0 6px 18px -10px rgba(198, 97, 63,0.55); transform: translateY(-1px); }
.lf-chip-ic { font-size: 12px; color: var(--lf-accent); flex: none; }
.lf-chip-rec .lf-chip-ic { color: var(--lf-text-3); }
.lf-chip-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch; }
.lf-chip-x { flex: none; font-size: 10px; color: var(--lf-text-3); padding: 2px 4px; border-radius: 50%; }
.lf-chip-x:hover { color: #ef4444; background: #fee2e2; }

/* ─── Font Studio popup ─── */
.lf-studio {
	position: relative;
	background: linear-gradient(160deg, var(--lf-surface), var(--lf-surface-2));
	border-radius: var(--lf-radius-xl);
	border: 1px solid var(--lf-border);
	box-shadow: var(--lf-shadow-lg), 0 0 0 1px rgba(198, 97, 63,0.08), 0 30px 80px -30px rgba(198, 97, 63,0.45);
	width: 90vw;
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	padding: 22px 24px;
	transform: translateY(12px) scale(0.985);
	transition: transform 0.26s cubic-bezier(0.34,1.4,0.64,1);
}
.lf-social-overlay.lf-open .lf-studio { transform: none; }
.lf-studio .lf-social-close { top: 14px; right: 16px; }

/* head: titles left, input right — the user shouldn't have to close the
   studio to change their text */
.lf-studio-head {
	display: flex; align-items: center; gap: 16px;
	margin-bottom: 16px; padding-right: 44px;
}
.lf-studio-titles { flex: none; }
.lf-studio-titles .lf-yours-kicker { font-size: 9.5px; }
.lf-studio-head h3 { margin: 2px 0 0; font-family: var(--lf-font-display); font-size: 15px; font-weight: 600; color: var(--lf-text); white-space: nowrap; }
.lf-studio-input {
	flex: 1; min-width: 0; height: 40px;
	padding: 0 16px;
	border: 1.5px solid var(--lf-border);
	border-radius: 12px;
	background: var(--lf-surface);
	font-family: var(--lf-font-body); font-size: 14px; color: var(--lf-text);
	outline: none;
	transition: var(--lf-transition);
}
.lf-studio-input:focus { border-color: var(--lf-accent); box-shadow: 0 0 0 3px rgba(198, 97, 63,0.12); }

.lf-reels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.lf-reel {
	display: flex; flex-direction: column; align-items: center; gap: 5px;
	padding: 12px 10px 10px; min-width: 0;
	background: var(--lf-surface); border: 1px solid var(--lf-border); border-radius: var(--lf-radius);
}
.lf-reel-label { font-size: 9.5px; font-weight: 700; letter-spacing: 0.18em; color: var(--lf-text-3); margin-bottom: 2px; }
.lf-reel-step {
	width: 28px; height: 28px; border-radius: 50%;
	border: 1.5px solid var(--lf-border); background: transparent; color: var(--lf-text-2);
	cursor: pointer; font-size: 9px; display: flex; align-items: center; justify-content: center; padding: 0;
	transition: var(--lf-transition);
}
.lf-reel-step:hover { border-color: var(--lf-accent); color: var(--lf-accent); }
.lf-reel-prev, .lf-reel-next {
	font-family: var(--lf-font-glyph); font-size: 11px; color: var(--lf-text); opacity: 0.25;
	max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; height: 15px;
}
.lf-reel-cur {
	font-family: var(--lf-font-glyph); font-size: 16px; font-weight: 500; color: var(--lf-accent);
	text-shadow: 0 0 18px rgba(198, 97, 63,0.35);
	max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	min-height: 24px; display: flex; align-items: center;
}

.lf-spin {
	display: inline-flex; align-items: center; gap: 8px; margin: 16px auto 0;
	padding: 9px 24px; border-radius: 999px;
	border: 1.5px solid var(--lf-accent);
	background: linear-gradient(135deg, rgba(198, 97, 63,0.12), rgba(139,92,246,0.10));
	color: var(--lf-accent); font-family: var(--lf-font-body); font-size: 13.5px; font-weight: 700;
	cursor: pointer; box-shadow: 0 0 0 4px rgba(198, 97, 63,0.10), 0 10px 26px -14px rgba(198, 97, 63,0.6);
	transition: var(--lf-transition);
	position: relative; left: 50%; transform: translateX(-50%);
}
.lf-spin:hover:not(:disabled) { background: linear-gradient(135deg, var(--lf-accent), var(--lf-accent-2)); color: #fff; }
.lf-spin:disabled { opacity: 0.6; cursor: wait; }
@keyframes lf-spin-icon { to { transform: rotate(360deg); } }
.lf-spin.lf-spinning svg { animation: lf-spin-icon 0.6s linear infinite; }

.lf-studio-result { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--lf-border); text-align: center; }
.lf-studio-out {
	font-family: var(--lf-font-glyph); font-size: 22px; line-height: 1.55; color: var(--lf-text);
	text-shadow: 0 0 22px rgba(198, 97, 63,0.18); word-break: break-word; min-height: 34px; margin-bottom: 12px;
}
.lf-studio-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.lf-ghost {
	padding: 9px 18px; border-radius: 999px;
	border: 1.5px solid var(--lf-border); background: transparent;
	color: var(--lf-text-2); font-family: var(--lf-font-body); font-size: 13px; font-weight: 600;
	cursor: pointer; transition: var(--lf-transition);
}
.lf-ghost:hover { border-color: var(--lf-accent); color: var(--lf-accent); }

/* labelled ad space at the bottom of a popup (opt-in) */
.lf-modal-ad {
	position: relative; margin-top: 16px; padding: 22px 12px 10px;
	min-height: 70px;
	border: 1px dashed var(--lf-border); border-radius: var(--lf-radius);
	background: var(--lf-surface);
	display: flex; align-items: center; justify-content: center;
}
.lf-modal-ad::before {
	content: attr(data-label);
	position: absolute; top: 6px; left: 12px;
	font-size: 9px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--lf-text-3);
}
.lf-modal-ad[hidden] { display: none !important; }

/* Same three-column studio on a phone — just tighter. The reels shrink,
   the head stacks, and the panel keeps its card shape. */
@media (max-width: 600px) {
	.lf-studio { width: calc(100vw - 12px); max-height: calc(100vh - 12px); padding: 16px 12px; border-radius: var(--lf-radius-lg); }
	.lf-studio-head { flex-direction: column; align-items: stretch; gap: 10px; padding-right: 40px; }
	.lf-studio-head h3 { font-size: 13.5px; }
	.lf-studio-input { height: 38px; font-size: 13.5px; }
	.lf-reels { gap: 6px; }
	.lf-reel { padding: 9px 4px 8px; gap: 4px; }
	.lf-reel-label { font-size: 8px; letter-spacing: 0.12em; }
	.lf-reel-cur { font-size: 13px; min-height: 20px; }
	.lf-reel-prev, .lf-reel-next { font-size: 9.5px; height: 13px; }
	.lf-reel-step { width: 25px; height: 25px; font-size: 8px; }
	.lf-studio-out { font-size: 18px; }
	.lf-studio-actions .lf-loadmore-btn, .lf-studio-actions .lf-ghost { padding-left: 14px; padding-right: 14px; }
}

/* ─── IG/FB preview: limits ─── */
.lf-phone-cap {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 8px;
	margin-top: 8px;
	font-size: 11.5px;
	white-space: nowrap;
}
.lf-phone-cap span { color: var(--lf-text-3); font-weight: 600; letter-spacing: 0.02em; }
.lf-phone-cap b { font-weight: 600; color: var(--lf-accent); }
.lf-phone-cap b.lf-limit-over { color: #ef4444; }
.lf-limit span { color: var(--lf-text-3); }
.lf-limit b { font-weight: 600; color: var(--lf-accent); }
.lf-limit b.lf-limit-over { color: #ef4444; }

@media (prefers-reduced-motion: reduce) {
	.lf-wheel-row.lf-pop, .lf-card.lf-shuffled .lf-card-preview, .lf-spin.lf-spinning svg { animation: none !important; }
	.lf-wheel-item { transition: none; }
}


/* ─── STUCK STATE ───────────────────────────────────────────
   While the toolbar is pinned, the big input collapses to a compact
   field. !important is deliberate: autoGrow() writes an inline height on
   the textarea, and an inline style would otherwise win — that was the
   "doesn't shrink until I click outside" bug. The JS also stops growing
   while pinned, so these two agree. Everything eases back on unpin. */
.lf-input { transition: height 0.22s ease, font-size 0.22s ease, padding 0.22s ease, border-radius 0.22s ease; }

.lf-toolbar.lf-stuck .lf-input {
	height: 44px !important;
	min-height: 44px !important;
	max-height: 44px !important;
	font-size: 15px;
	padding: 10px 52px 10px 16px;
	border-radius: 14px;
	overflow-y: hidden;
	white-space: nowrap;
}
.lf-toolbar.lf-stuck .lf-counter { display: none; }
.lf-toolbar.lf-stuck .lf-toolbar-inner { padding-top: 8px; padding-bottom: 6px; row-gap: 6px; }
.lf-toolbar.lf-stuck .lf-pill { height: 32px; font-size: 12.5px; }
.lf-toolbar.lf-stuck .lf-tool { height: 32px; font-size: 12.5px; padding: 0 12px; }
.lf-toolbar.lf-stuck .lf-tools-row { padding-bottom: 6px; }
/* The tools row and the wheel row live inside the toolbar, so they pin
   with it — on phones as well as desktop. Nothing is hidden while stuck. */

@media (max-width: 600px) {
	.lf-toolbar.lf-stuck .lf-input { height: 40px !important; min-height: 40px !important; max-height: 40px !important; font-size: 14px; }
	.lf-toolbar.lf-stuck .lf-tool { height: 30px; }
}

@media (prefers-reduced-motion: reduce) { .lf-input { transition: none; } }

/* ─── MODALS ON PHONES ──────────────────────────────────────
   Full screen, no entry transform (a transformed ancestor hijacks
   position:fixed, which the pinned close button needs), and the close
   button rides the viewport so it survives scrolling the panel. */
@media (max-width: 600px) {
	.lf-social-modal, .lf-studio {
		width: 100vw;
		height: 100dvh;
		max-height: 100dvh;
		border-radius: 0;
		transform: none !important;
	}
	.lf-social-overlay .lf-social-close {
		position: fixed;
		top: calc(env(safe-area-inset-top, 0px) + 10px);
		right: 12px;
		z-index: 12;
		box-shadow: var(--lf-shadow-sm);
	}
}