/**
 * Messletters — "7b" feature layer styles.
 * Inherits the 7a tokens (--mln7-*), so it follows your accent and night mode.
 */

.messletters-net.mln-app .mln7b-bar {
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
	margin: 12px 0 4px;
}
.messletters-net.mln-app .mln7b-bar-right { margin-left: auto; display: flex; gap: 8px; }

.messletters-net.mln-app .mln7b-btn {
	font: 700 13px var(--mln7-font, inherit);
	border: 2px solid var(--mln7-line, #d7e6df);
	background: var(--mln7-surface, #fff);
	color: var(--mln7-ink, #0f2622);
	border-radius: 999px; padding: 10px 15px; cursor: pointer;
	min-height: 44px; display: inline-flex; align-items: center; gap: 7px;
	transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.messletters-net.mln-app .mln7b-btn:hover { background: var(--mln7-accent-soft, #d9f2e8); transform: translateY(-1px); }
.messletters-net.mln-app .mln7b-btn.is-on {
	background: var(--mln7-accent, #10b981); border-color: var(--mln7-accent, #10b981);
	color: var(--mln7-accent-ink, #fff);
}
.messletters-net.mln-app .mln7b-btn b { font-weight: 800; }
.messletters-net.mln-app .mln7b-surprise { border-style: dashed; }

.messletters-net.mln-app .mln7b-vibes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.messletters-net.mln-app .mln7b-vibes-label {
	font: 800 11px var(--mln7-font, inherit); letter-spacing: .08em; text-transform: uppercase;
	color: var(--mln7-mut, #5d716c); margin-right: 2px;
}
.messletters-net.mln-app .mln7b-vibe {
	font: 700 12px var(--mln7-font, inherit); text-transform: capitalize;
	border: 1px solid var(--mln7-line, #d7e6df); background: var(--mln7-surface, #fff);
	color: var(--mln7-mut, #5d716c); border-radius: 999px; padding: 7px 12px; cursor: pointer;
	transition: all .15s ease;
}
.messletters-net.mln-app .mln7b-vibe:hover { color: var(--mln7-ink, #0f2622); border-color: var(--mln7-accent, #10b981); }
.messletters-net.mln-app .mln7b-vibe.is-on {
	background: var(--mln7-accent, #10b981); border-color: var(--mln7-accent, #10b981);
	color: var(--mln7-accent-ink, #fff);
}

/* Where it works ---------------------------------------------------- */
.messletters-net.mln-app .mln7b-row-compat { margin: 2px 0 6px; }
.messletters-net.mln-app .mln7b-compat { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.messletters-net.mln-app .mln7b-cp-label {
	font: 800 10px var(--mln7-font, inherit); letter-spacing: .08em; text-transform: uppercase;
	color: var(--mln7-mut, #5d716c);
}
.messletters-net.mln-app .mln7b-cp {
	font: 700 11px var(--mln7-font, inherit); border-radius: 999px; padding: 3px 9px;
	display: inline-flex; align-items: center; gap: 4px; border: 1px solid transparent;
}
.messletters-net.mln-app .mln7b-cp i { font-style: normal; font-weight: 900; }
.messletters-net.mln-app .mln7b-cp.is-ok { background: #e7f7f0; color: #0b7a5a; border-color: #bfe8d8; }
.messletters-net.mln-app .mln7b-cp.is-warn { background: #fff4e0; color: #a35b06; border-color: #f5d9ae; }
.messletters-net.mln-app .mln7b-cp.is-bad { background: #ffe9e9; color: #b02525; border-color: #f5c2c2; }
.messletters-net.mln-app[data-mln7-dark="1"] .mln7b-cp.is-ok { background: #10352b; color: #6fd6ac; border-color: #1c5344; }
.messletters-net.mln-app[data-mln7-dark="1"] .mln7b-cp.is-warn { background: #3a2c14; color: #e0ad5e; border-color: #55401d; }
.messletters-net.mln-app[data-mln7-dark="1"] .mln7b-cp.is-bad { background: #3c1d1d; color: #e88a8a; border-color: #5a2a2a; }

/* Name builder ------------------------------------------------------- */
.messletters-net.mln-app .mln7b-nb {
	margin: 12px 0; padding: 14px;
	border: 2px solid var(--mln7-line, #d7e6df); border-radius: var(--mln7-r-md, 18px);
	background: var(--mln7-surface, #fff);
}
.messletters-net.mln-app .mln7b-nb-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.messletters-net.mln-app .mln7b-nb-head b { font: 800 15px var(--mln7-font, inherit); color: var(--mln7-ink, #0f2622); }
.messletters-net.mln-app .mln7b-nb-head span { font: 600 12px var(--mln7-font, inherit); color: var(--mln7-mut, #5d716c); }
.messletters-net.mln-app .mln7b-nb-in {
	width: 100%; font: 700 16px var(--mln7-font, inherit);
	color: var(--mln7-ink, #0f2622); background: var(--mln7-bg, #eef4f1);
	border: 2px solid var(--mln7-line, #d7e6df); border-radius: var(--mln7-r-sm, 14px);
	padding: 12px 14px; min-height: 46px; outline: none;
}
.messletters-net.mln-app .mln7b-nb-in:focus { border-color: var(--mln7-accent, #10b981); }
.messletters-net.mln-app .mln7b-nb-wraps { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.messletters-net.mln-app .mln7b-nb-wrap {
	font: 700 13px var(--mln7-glyph, inherit);
	border: 1px solid var(--mln7-line, #d7e6df); background: var(--mln7-surface, #fff);
	color: var(--mln7-ink, #0f2622); border-radius: 999px; padding: 8px 13px; cursor: pointer; min-height: 40px;
}
.messletters-net.mln-app .mln7b-nb-wrap.is-on {
	background: var(--mln7-accent, #10b981); border-color: var(--mln7-accent, #10b981);
	color: var(--mln7-accent-ink, #fff);
}
.messletters-net.mln-app .mln7b-nb-out {
	font-family: var(--mln7-glyph, inherit); font-size: 24px; line-height: 1.5;
	color: var(--mln7-ink, #0f2622); background: var(--mln7-bg, #eef4f1);
	border-radius: var(--mln7-r-sm, 14px); padding: 14px; margin: 4px 0 8px;
	word-break: break-word; text-align: center; min-height: 56px;
}
.messletters-net.mln-app .mln7b-nb-compat { margin-bottom: 10px; text-align: center; }
.messletters-net.mln-app .mln7b-nb-copy {
	width: 100%; font: 800 14px var(--mln7-font, inherit); min-height: 46px;
	background: var(--mln7-accent, #10b981); color: var(--mln7-accent-ink, #fff);
	border: 0; border-radius: var(--mln7-r-sm, 14px); cursor: pointer;
}
.messletters-net.mln-app .mln7b-nb-copy:hover { background: var(--mln7-accent-press, #059669); }

/* Tray --------------------------------------------------------------- */
.messletters-net.mln-app .mln7b-tray {
	margin: 12px 0; padding: 14px;
	border: 2px solid var(--mln7-line, #d7e6df); border-radius: var(--mln7-r-md, 18px);
	background: var(--mln7-surface, #fff);
}
.messletters-net.mln-app .mln7b-tray-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.messletters-net.mln-app .mln7b-tray-head b { font: 800 15px var(--mln7-font, inherit); }
.messletters-net.mln-app .mln7b-copyall {
	font: 700 12px var(--mln7-font, inherit); min-height: 40px; padding: 8px 14px; cursor: pointer;
	border: 2px solid var(--mln7-accent, #10b981); background: transparent;
	color: var(--mln7-accent-press, #059669); border-radius: 999px;
}
.messletters-net.mln-app .mln7b-tray-item {
	display: flex; align-items: center; gap: 10px; padding: 8px 0;
	border-top: 1px solid var(--mln7-line, #d7e6df);
}
.messletters-net.mln-app .mln7b-tray-out {
	flex: 1; font-family: var(--mln7-glyph, inherit); font-size: 17px;
	color: var(--mln7-ink, #0f2622); word-break: break-word;
}
.messletters-net.mln-app .mln7b-tray-copy {
	font: 700 12px var(--mln7-font, inherit); min-height: 40px; padding: 8px 14px; cursor: pointer;
	border: 1px solid var(--mln7-line, #d7e6df); background: var(--mln7-bg, #eef4f1);
	color: var(--mln7-ink, #0f2622); border-radius: 999px;
}
.messletters-net.mln-app .mln7b-tray-note,
.messletters-net.mln-app .mln7b-empty {
	font: 600 12px var(--mln7-font, inherit); color: var(--mln7-mut, #5d716c); margin: 10px 0 0;
}

/* Deck --------------------------------------------------------------- */
.messletters-net.mln-app .mln7b-deck {
	margin: 12px 0; padding: 18px 14px;
	border: 2px solid var(--mln7-accent, #10b981); border-radius: var(--mln7-r-md, 18px);
	background: var(--mln7-surface, #fff); text-align: center;
}
.messletters-net.mln-app .mln7b-deck-out {
	font-family: var(--mln7-glyph, inherit); font-size: 34px; line-height: 1.35;
	color: var(--mln7-ink, #0f2622); word-break: break-word; min-height: 62px;
	display: flex; align-items: center; justify-content: center;
}
.messletters-net.mln-app .mln7b-deck-meta {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	font: 700 12px var(--mln7-font, inherit); color: var(--mln7-mut, #5d716c); margin: 8px 0;
}
.messletters-net.mln-app .mln7b-deck-compat { margin-bottom: 12px; }
.messletters-net.mln-app .mln7b-deck-nav { display: flex; align-items: center; gap: 8px; }
.messletters-net.mln-app .mln7b-deck-prev,
.messletters-net.mln-app .mln7b-deck-next {
	width: 52px; height: 48px; font-size: 24px; line-height: 1; cursor: pointer;
	border: 2px solid var(--mln7-line, #d7e6df); background: var(--mln7-surface, #fff);
	color: var(--mln7-ink, #0f2622); border-radius: var(--mln7-r-sm, 14px);
}
.messletters-net.mln-app .mln7b-deck-copy {
	flex: 1; min-height: 48px; font: 800 14px var(--mln7-font, inherit); cursor: pointer;
	background: var(--mln7-accent, #10b981); color: var(--mln7-accent-ink, #fff);
	border: 0; border-radius: var(--mln7-r-sm, 14px);
}
.messletters-net.mln-app.mln7b-deck-on [data-mln-results] { opacity: .55; }

/* Row flash + toast --------------------------------------------------- */
.messletters-net.mln-app .mln7b-flash { outline: 3px solid var(--mln7-accent, #10b981); outline-offset: 3px; border-radius: 14px; }
.mln7b-toast {
	position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 16px);
	background: #0f2622; color: #fff; font: 700 13px "Figtree", system-ui, sans-serif;
	padding: 12px 18px; border-radius: 999px; z-index: 99999;
	opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease;
}
.mln7b-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 560px) {
	.messletters-net.mln-app .mln7b-bar-right { margin-left: 0; width: 100%; }
	.messletters-net.mln-app .mln7b-bar-right .mln7b-btn { flex: 1; justify-content: center; }
	.messletters-net.mln-app .mln7b-deck-out { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
	.messletters-net.mln-app .mln7b-btn,
	.mln7b-toast { transition: none; }
}

/* Container style must keep working under the rows skin ---------------
   The skin draws its own panel on .mln-tool, so "unboxed" has to strip
   that too, not just the outer .mln-app frame. */
.messletters-net.mln-app.is-unboxed,
.messletters-net.mln-app.is-unboxed .mln-tool {
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	border-radius: 0 !important;
}
.messletters-net.mln-app.is-unboxed { padding: 0 !important; max-width: none; }
.messletters-net.mln-app.is-unboxed .mln-tool { padding-left: 0; padding-right: 0; }
.messletters-net.mln-app.is-unboxed .mln-grid { padding-left: 0; padding-right: 0; }

/* The inline preview panel must span the full row width so it reads as
   one object joined to the card you tapped. */
.messletters-net.mln-app .mln7-panel { width: 100%; grid-column: 1 / -1; }
.messletters-net.mln-app .mln-card.is-selected { border-color: var(--mln7-accent, #10b981); }

/* ---------------------------------------------------------------------
   Fix 1: restore the horizontal category SLIDER.
   The rows skin re-flows the strip with flex-wrap, which turns 66
   categories into a tall wrapped block. Put the scroller back.
   --------------------------------------------------------------------- */
.messletters-net.mln-app .mln-strip {
	display: flex !important;
	flex-wrap: nowrap !important;
	overflow-x: auto !important;
	overflow-y: hidden;
	gap: 8px;
	padding: 2px 2px 8px !important;
	margin: 0 0 8px;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x proximity;
}
.messletters-net.mln-app .mln-strip::-webkit-scrollbar { height: 6px; }
.messletters-net.mln-app .mln-strip::-webkit-scrollbar-thumb {
	background: var(--mln7-line, #d7e6df); border-radius: 999px;
}
.messletters-net.mln-app .mln-strip .mln-pill {
	flex: 0 0 auto !important;
	white-space: nowrap;
	scroll-snap-align: start;
}
.messletters-net.mln-app .mln-menu { max-height: none; }

/* ---------------------------------------------------------------------
   Fix 2: stop converted text rendering as tofu boxes.
   The skin's body font (Figtree) has no math-alphanumeric or symbol
   coverage, so styled output fell back to boxes. Force every element that
   shows CONVERTED text onto a full Unicode fallback stack.
   --------------------------------------------------------------------- */
.messletters-net.mln-app .mln-card-preview,
.messletters-net.mln-app .mln7-panel-out,
.messletters-net.mln-app .mln7-raw-out,
.messletters-net.mln-app .mln7-bio,
.messletters-net.mln-app .mln7-wa-out,
.messletters-net.mln-app .mln7-wa-name,
.messletters-net.mln-app .mln7-wa-in,
.messletters-net.mln-app .mln7-handle,
.messletters-net.mln-app .mln7b-deck-out,
.messletters-net.mln-app .mln7b-nb-out,
.messletters-net.mln-app .mln7b-tray-out,
.messletters-net.mln-app .mln7b-nb-wrap,
.messletters-net.mln-app .mln7-chip[data-mln7-wrap] {
	font-family: "Segoe UI Symbol", "Segoe UI Historic", "Apple Symbols",
		"Apple Color Emoji", "Noto Sans Symbols", "Noto Sans Symbols 2",
		"Noto Sans Math", "Noto Sans Canadian Aboriginal", "Noto Sans Cherokee",
		"Noto Sans Tibetan", "Noto Sans Javanese", "Cambria Math",
		"Segoe UI Emoji", "DejaVu Sans", sans-serif !important;
}

/* The slider rule above uses display:flex !important, which outranked the
   core's [hidden] rule and revealed every category's subcategory row at
   once. Re-assert hidden at equal specificity so only the ACTIVE
   category's subcategory slider is visible. */
.messletters-net.mln-app .mln-strip[hidden],
.messletters-net.mln-app .mln-strip-subs[hidden] { display: none !important; }

/* The active category's subcategory row is a slider too. */
.messletters-net.mln-app .mln-strip-subs {
	padding-top: 8px !important;
	border-top: 1px dashed var(--mln7-line, #d7e6df);
}

/* =====================================================================
   Compact form: name + wraps + vibes + compatibility + copy in one card.
   Replaces the tall stacked "Build a name" block.
   ===================================================================== */
.messletters-net.mln-app .mln7b-bar { display: none; }

.messletters-net.mln-app .mln7b-form {
	margin: 12px 0; padding: 12px;
	border: 1px solid var(--mln7-line, #d7e6df);
	border-radius: var(--mln7-r-md, 16px);
	background: var(--mln7-surface, #fff);
	display: flex; flex-direction: column; gap: 10px;
}
.messletters-net.mln-app .mln7b-f-head { display: flex; align-items: center; gap: 8px; }
.messletters-net.mln-app .mln7b-f-label {
	font: 800 10px var(--mln7-font, inherit); letter-spacing: .1em; text-transform: uppercase;
	color: var(--mln7-mut, #5d716c); flex: 0 0 auto;
}
.messletters-net.mln-app .mln7b-f-head .mln7b-nb-in {
	flex: 1; min-width: 0; font: 700 15px var(--mln7-font, inherit);
	color: var(--mln7-ink, #0f2622); background: transparent;
	border: 0; padding: 8px 4px; min-height: 40px; outline: none; width: auto;
}
.messletters-net.mln-app .mln7b-f-clear,
.messletters-net.mln-app .mln7b-f-dice {
	flex: 0 0 auto; min-width: 40px; min-height: 40px; cursor: pointer;
	background: transparent; border: 0; color: var(--mln7-mut, #5d716c);
	font-size: 18px; line-height: 1; border-radius: 10px;
	display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
}
.messletters-net.mln-app .mln7b-f-dice small {
	font: 700 9px var(--mln7-font, inherit); letter-spacing: .04em; margin-top: 1px;
}
.messletters-net.mln-app .mln7b-f-clear:hover,
.messletters-net.mln-app .mln7b-f-dice:hover { color: var(--mln7-accent-press, #059669); background: var(--mln7-accent-soft, #d9f2e8); }

.messletters-net.mln-app .mln7b-f-outrow {
	display: flex; align-items: center; gap: 10px;
	border-top: 1px solid var(--mln7-line, #d7e6df); padding-top: 10px;
}
.messletters-net.mln-app .mln7b-f-outrow .mln7b-nb-out {
	flex: 1; min-width: 0; margin: 0; padding: 0; background: none;
	font-size: 24px; line-height: 1.35; text-align: left; min-height: 34px;
	display: flex; align-items: center;
}
.messletters-net.mln-app .mln7b-f-outrow .mln7b-nb-copy {
	flex: 0 0 auto; width: auto; min-height: 42px; padding: 0 20px;
	border-radius: 12px; font-size: 14px;
}

.messletters-net.mln-app .mln7b-f-wraps { display: flex; align-items: center; gap: 8px; }
.messletters-net.mln-app .mln7b-f-wraps .mln7b-nb-wraps {
	flex: 1; min-width: 0; margin: 0; flex-wrap: nowrap; overflow-x: auto;
	scrollbar-width: none; padding-bottom: 2px;
}
.messletters-net.mln-app .mln7b-f-wraps .mln7b-nb-wraps::-webkit-scrollbar { height: 0; }
.messletters-net.mln-app .mln7b-nb-wraps .mln7b-nb-wrap {
	flex: 0 0 auto; min-width: 44px; min-height: 40px; padding: 8px 10px;
	border-radius: 11px; font-size: 14px;
}
.messletters-net.mln-app .mln7b-nb-wraps .is-extra { display: none; }
.messletters-net.mln-app .mln7b-nb-wraps.is-open { flex-wrap: wrap; overflow: visible; }
.messletters-net.mln-app .mln7b-nb-wraps.is-open .is-extra { display: inline-flex; }
.messletters-net.mln-app .mln7b-f-more {
	flex: 0 0 auto; min-width: 44px; min-height: 40px; cursor: pointer;
	border: 1px dashed var(--mln7-line, #d7e6df); background: transparent;
	color: var(--mln7-mut, #5d716c); border-radius: 11px; font: 700 15px var(--mln7-font, inherit);
}

.messletters-net.mln-app .mln7b-f-foot {
	display: flex; align-items: center; justify-content: space-between;
	gap: 10px; flex-wrap: wrap;
}
.messletters-net.mln-app .mln7b-f-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.messletters-net.mln-app .mln7b-f-foot .mln7b-vibes { gap: 6px; }
.messletters-net.mln-app .mln7b-f-right .mln7b-btn { min-height: 40px; padding: 8px 12px; }
.messletters-net.mln-app .mln7b-f-right .mln7b-nb-compat { margin: 0; }

@media (max-width: 560px) {
	.messletters-net.mln-app .mln7b-f-outrow { flex-wrap: wrap; }
	.messletters-net.mln-app .mln7b-f-outrow .mln7b-nb-copy { width: 100%; }
	.messletters-net.mln-app .mln7b-f-foot { flex-direction: column; align-items: stretch; }
	.messletters-net.mln-app .mln7b-f-foot .mln7b-vibes { overflow-x: auto; flex-wrap: nowrap; }
}

/* =====================================================================
   Decoration slider (multi-stop, drag to re-render every result)
   ===================================================================== */
.messletters-net.mln-app .mln7c-deco {
	margin: 10px 0; padding: 10px 12px;
	border: 1px solid var(--mln7-line, #d7e6df);
	border-radius: var(--mln7-r-md, 16px);
	background: var(--mln7-surface, #fff);
}
.messletters-net.mln-app .mln7c-deco-head {
	display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px;
}
.messletters-net.mln-app .mln7c-deco-label {
	font: 800 10px var(--mln7-font, inherit); letter-spacing: .1em; text-transform: uppercase;
	color: var(--mln7-mut, #5d716c);
}
.messletters-net.mln-app .mln7c-deco-name {
	font: 800 13px var(--mln7-font, inherit); color: var(--mln7-accent-press, #059669);
}
.messletters-net.mln-app .mln7c-range {
	width: 100%; margin: 2px 0 6px; accent-color: var(--mln7-accent, #10b981);
	height: 28px; cursor: pointer;
}
.messletters-net.mln-app .mln7c-deco-stops {
	display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
}
.messletters-net.mln-app .mln7c-deco-stops::-webkit-scrollbar { height: 0; }
.messletters-net.mln-app .mln7c-stop {
	flex: 0 0 auto; min-width: 40px; min-height: 38px; cursor: pointer;
	border: 1px solid var(--mln7-line, #d7e6df); background: var(--mln7-surface, #fff);
	color: var(--mln7-ink, #0f2622); border-radius: 11px; font-size: 15px; line-height: 1;
}
.messletters-net.mln-app .mln7c-stop.is-on {
	background: var(--mln7-accent, #10b981); border-color: var(--mln7-accent, #10b981);
	color: var(--mln7-accent-ink, #fff);
}

/* =====================================================================
   Desktop: categories become a persistent left rail beside the results.
   ===================================================================== */
@media (min-width: 1080px) {
	.messletters-net.mln-app .mln7c-split {
		display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 18px; align-items: start;
	}
	.messletters-net.mln-app .mln7c-split > .mln-menu {
		position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto;
		border: 1px solid var(--mln7-line, #d7e6df); border-radius: var(--mln7-r-md, 16px);
		padding: 10px !important; background: var(--mln7-surface, #fff);
		scrollbar-width: thin;
	}
	/* Rail: pills stack vertically instead of scrolling sideways. */
	.messletters-net.mln-app .mln7c-split > .mln-menu .mln-strip {
		flex-direction: column; flex-wrap: nowrap !important; overflow-x: visible !important;
		align-items: stretch; gap: 3px;
	}
	.messletters-net.mln-app .mln7c-split > .mln-menu .mln-pill {
		width: 100%; justify-content: flex-start; text-align: left; border-radius: 10px;
	}
	.messletters-net.mln-app .mln7c-split > .mln-menu .mln-strip-subs {
		margin-left: 8px; padding-left: 8px;
		border-left: 2px solid var(--mln7-line, #d7e6df); border-top: 0 !important;
	}
}

/* =====================================================================
   Mobile: composer pinned to the top, categories as a tab strip.
   ===================================================================== */
@media (max-width: 720px) {
	.messletters-net.mln-app [data-mln-input-card] {
		position: sticky; top: 0; z-index: 30;
		background: var(--mln7-bg, #eef4f1);
		padding-top: 6px; padding-bottom: 6px;
	}
	.messletters-net.mln-app .mln-menu {
		position: sticky; top: 62px; z-index: 25;
		background: var(--mln7-bg, #eef4f1); padding-bottom: 4px;
	}
	.messletters-net.mln-app .mln7c-deco { padding: 8px 10px; }
	.messletters-net.mln-app .mln7c-range { height: 34px; }
	.messletters-net.mln-app .mln7c-stop { min-width: 44px; min-height: 42px; }
}

/* =====================================================================
   Typography: keep converted names on one tidy, centred line and never
   let them fall back to a font without symbol coverage.
   ===================================================================== */
.messletters-net.mln-app .mln7c-stop,
.messletters-net.mln-app .mln7c-deco-name {
	font-family: "Segoe UI Symbol", "Apple Symbols", "Apple Color Emoji",
		"Noto Sans Symbols", "Noto Sans Symbols 2", "Noto Sans Math",
		"Segoe UI Emoji", "DejaVu Sans", sans-serif;
}
.messletters-net.mln-app .mln-card-preview,
.messletters-net.mln-app .mln7b-nb-out,
.messletters-net.mln-app .mln7b-deck-out {
	text-align: center;
	text-wrap: balance;
	overflow-wrap: anywhere;
	hyphens: none;
}
.messletters-net.mln-app .mln7b-f-outrow .mln7b-nb-out { text-align: left; }

/* =====================================================================
   COMPACT STACK (board 1a): three tight rows, ~330px instead of ~1250px.
   ===================================================================== */
.messletters-net.mln-app.mln7d .mln7b-form.mln7d-off {
	border: 0; background: none; padding: 0; margin: 0; gap: 0;
}
/* Everything left inside the old card is now hosted elsewhere. */
.messletters-net.mln-app.mln7d .mln7d-off .mln7b-f-head,
.messletters-net.mln-app.mln7d .mln7d-off .mln7b-f-outrow,
.messletters-net.mln-app.mln7d .mln7d-off .mln7b-f-wraps,
.messletters-net.mln-app.mln7d .mln7d-off .mln7b-f-foot { display: none !important; }
.messletters-net.mln-app.mln7d .mln7c-deco-head { display: contents; }
.messletters-net.mln-app.mln7d .mln7c-deco-label {
	font: 800 9.5px var(--mln7-font, inherit); letter-spacing: .1em;
	color: var(--mln7-mut, #5d716c); white-space: nowrap;
}

/* Row 1 — composer */
.messletters-net.mln-app.mln7d [data-mln-input-card] { padding: 0; border: 0; background: none; margin: 0 0 8px; }
.messletters-net.mln-app.mln7d .mln-input-row { align-items: center; gap: 6px; }
.messletters-net.mln-app.mln7d .mln-input {
	min-height: 46px; height: 46px; padding: 11px 14px; font-size: 15px; line-height: 1.4;
	border-radius: 12px; resize: none; overflow-y: auto;
}
.messletters-net.mln-app.mln7d .mln-clear { top: 7px; right: 108px; width: 28px; height: 28px; font-size: 16px; }
.messletters-net.mln-app.mln7d .mln7d-act {
	position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
	display: flex; align-items: center; gap: 6px; z-index: 3;
}
.messletters-net.mln-app.mln7d .mln7d-act .mln7d-btn {
	min-width: 34px; min-height: 34px; border-radius: 9px;
	background: transparent; border: 0; color: var(--mln7-mut, #5d716c); cursor: pointer;
}
.messletters-net.mln-app.mln7d .mln7d-act .mln7d-btn small { display: none; }
.messletters-net.mln-app.mln7d .mln7d-act .mln7d-copy {
	width: auto; min-height: 34px; padding: 0 16px; font-size: 13px; border-radius: 9px;
}

/* Row 1b — TRY chips + works-in + tray on one line */
.messletters-net.mln-app.mln7d .mln-try {
	display: flex; align-items: center; gap: 6px; flex-wrap: nowrap;
	overflow-x: auto; scrollbar-width: none; margin: 0 0 8px; padding-bottom: 2px;
}
.messletters-net.mln-app.mln7d .mln-try::-webkit-scrollbar { height: 0; }
.messletters-net.mln-app.mln7d .mln-try-chip { flex: 0 0 auto; height: 30px; padding: 0 12px; font-size: 12px; }
.messletters-net.mln-app.mln7d .mln7d-tryright {
	margin-left: auto; display: flex; align-items: center; gap: 6px; flex: 0 0 auto;
}
.messletters-net.mln-app.mln7d .mln7d-tryright .mln7b-btn { min-height: 30px; padding: 4px 10px; font-size: 12px; }
.messletters-net.mln-app.mln7d .mln7b-cp { font-size: 10.5px; padding: 2px 7px; }
.messletters-net.mln-app.mln7d .mln7b-cp-label { display: none; }

/* Row 2 — decoration, one line */
.messletters-net.mln-app.mln7d .mln7c-deco {
	display: flex; align-items: center; gap: 6px;
	padding: 6px 8px; margin: 0 0 8px; border-radius: 12px;
}

.messletters-net.mln-app.mln7d .mln7c-deco-stops { flex: 1; min-width: 0; gap: 5px; }
.messletters-net.mln-app.mln7d .mln7c-stop { min-width: 34px; min-height: 30px; border-radius: 9px; font-size: 13px; }
.messletters-net.mln-app.mln7d .mln7c-deco-stops .mln7d-extra { display: none; }
.messletters-net.mln-app.mln7d .mln7c-deco-stops.is-open { flex-wrap: wrap; overflow: visible; }
.messletters-net.mln-app.mln7d .mln7c-deco-stops.is-open .mln7d-extra { display: inline-flex; }
.messletters-net.mln-app.mln7d .mln7d-more {
	flex: 0 0 auto; height: 30px; padding: 0 11px; cursor: pointer; font-size: 12px; font-weight: 700;
	border: 1px dashed var(--mln7-line, #d7e6df); background: transparent;
	color: var(--mln7-mut, #5d716c); border-radius: 999px;
}

/* Row 3 — categories, one line; vibes tucked under */
.messletters-net.mln-app.mln7d .mln-menu { padding: 0 !important; margin: 0 0 8px; }
.messletters-net.mln-app.mln7d .mln-strip { margin: 0 0 6px; padding: 0 0 4px !important; }
.messletters-net.mln-app.mln7d .mln-pill { height: 30px; padding: 0 13px; font-size: 12.5px; }
.messletters-net.mln-app.mln7d .mln7d-vibes { display: flex; }
.messletters-net.mln-app.mln7d .mln7d-vibes .mln7b-vibes {
	flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 5px;
}
.messletters-net.mln-app.mln7d .mln7b-vibe { height: 28px; padding: 0 11px; font-size: 11.5px; }

/* Trim the rest of the chrome so the stack really is ~330px */
.messletters-net.mln-app.mln7d .mln-toolbar { margin: 0 0 8px; gap: 6px; }
.messletters-net.mln-app.mln7d .mln-search { min-height: 38px; }
.messletters-net.mln-app.mln7d .mln-section-label { margin: 4px 0 8px; }
.messletters-net.mln-app.mln7d .mln-grid { padding-top: 0 !important; }
.messletters-net.mln-app.mln7d .mln7b-tray { margin: 0 0 8px; padding: 10px; }

@media (max-width: 720px) {
	.messletters-net.mln-app.mln7d .mln7d-act .mln7d-copy { padding: 0 12px; }
	.messletters-net.mln-app.mln7d .mln-clear { right: 96px; }
}

/* =====================================================================
   DECORATION AS A SLIDER (compact, one row)
   DECOR  [——●————————]  Sparkle   [chips ▾]
   Drag the track and every style in the list re-renders live.
   ===================================================================== */
.messletters-net.mln-app.mln7d .mln7c-range { display: block !important; }

.messletters-net.mln-app.mln7d .mln7c-deco {
	display: grid;
	grid-template-columns: auto minmax(120px, 1fr) auto auto;
	align-items: center; gap: 10px;
	padding: 7px 12px;
}
.messletters-net.mln-app.mln7d .mln7c-deco-stops {
	grid-column: 1 / -1; order: 5; display: none;
}
.messletters-net.mln-app.mln7d .mln7c-deco-stops.is-open { display: flex; flex-wrap: wrap; }
.messletters-net.mln-app.mln7d .mln7c-deco-stops.is-open .mln7d-extra { display: inline-flex; }

/* Track: ticked so the stops are visible while dragging. */
.messletters-net.mln-app.mln7d .mln7c-range {
	-webkit-appearance: none; appearance: none;
	width: 100%; height: 30px; margin: 0; background: transparent; cursor: grab;
}
.messletters-net.mln-app.mln7d .mln7c-range:active { cursor: grabbing; }
.messletters-net.mln-app.mln7d .mln7c-range::-webkit-slider-runnable-track {
	height: 6px; border-radius: 999px;
	background:
		repeating-linear-gradient(90deg,
			var(--mln7-line, #d7e6df) 0 2px, transparent 2px calc(100% / 11)),
		var(--mln7-accent-soft, #d9f2e8);
}
.messletters-net.mln-app.mln7d .mln7c-range::-moz-range-track {
	height: 6px; border-radius: 999px;
	background:
		repeating-linear-gradient(90deg,
			var(--mln7-line, #d7e6df) 0 2px, transparent 2px calc(100% / 11)),
		var(--mln7-accent-soft, #d9f2e8);
}
.messletters-net.mln-app.mln7d .mln7c-range::-webkit-slider-thumb {
	-webkit-appearance: none; appearance: none;
	width: 20px; height: 20px; margin-top: -7px; border-radius: 50%;
	background: var(--mln7-accent, #10b981);
	border: 3px solid var(--mln7-surface, #fff);
	box-shadow: 0 1px 5px rgba(0, 0, 0, .22);
}
.messletters-net.mln-app.mln7d .mln7c-range::-moz-range-thumb {
	width: 20px; height: 20px; border-radius: 50%;
	background: var(--mln7-accent, #10b981);
	border: 3px solid var(--mln7-surface, #fff);
	box-shadow: 0 1px 5px rgba(0, 0, 0, .22);
}
.messletters-net.mln-app.mln7d .mln7c-range:focus-visible { outline: 2px solid var(--mln7-accent, #10b981); outline-offset: 3px; }

/* Live label + a small chip-picker toggle at the end of the row. */
.messletters-net.mln-app.mln7d .mln7c-deco-name {
	display: inline-block; min-width: 66px; text-align: right;
	font: 800 12px var(--mln7-font, inherit); color: var(--mln7-accent-press, #059669);
}
.messletters-net.mln-app.mln7d .mln7d-more { min-width: 44px; }

@media (max-width: 560px) {
	.messletters-net.mln-app.mln7d .mln7c-deco { grid-template-columns: auto 1fr auto; }
	.messletters-net.mln-app.mln7d .mln7d-more { display: none; }
	.messletters-net.mln-app.mln7d .mln7c-deco-name { min-width: 58px; font-size: 11.5px; }
}

/* One decoration control: the skin's separate chip row is folded into the
   slider above, so hide the duplicate. */
.messletters-net.mln-app.mln7d .mln7-deco.mln7d-hidden { display: none !important; }

/* =====================================================================
   VIBE SLIDER — label, live specimen, track, stop labels.
   ===================================================================== */
.messletters-net.mln-app .mln7b-vibes.mln7v-src { display: none !important; }

.messletters-net.mln-app .mln7v {
	margin: 0 0 8px; padding: 12px 14px;
	border: 1px solid var(--mln7-line, #d7e6df);
	border-radius: var(--mln7-r-md, 16px);
	background: var(--mln7-surface, #fff);
}
.messletters-net.mln-app .mln7v-head {
	display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.messletters-net.mln-app .mln7v-label {
	font: 800 10px var(--mln7-font, inherit); letter-spacing: .12em; text-transform: uppercase;
	color: var(--mln7-mut, #5d716c);
}
.messletters-net.mln-app .mln7v-name {
	font: 800 15px var(--mln7-font, inherit); color: var(--mln7-accent-press, #059669);
}
.messletters-net.mln-app .mln7v-specimen {
	font-size: 30px; line-height: 1.25; margin: 8px 0 12px; min-height: 38px;
	color: var(--mln7-ink, #0f2622); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
	font-family: "Segoe UI Symbol", "Apple Symbols", "Apple Color Emoji",
		"Noto Sans Symbols", "Noto Sans Symbols 2", "Noto Sans Math",
		"Segoe UI Emoji", "DejaVu Sans", sans-serif;
}
.messletters-net.mln-app .mln7v-range {
	-webkit-appearance: none; appearance: none;
	display: block; width: 100%; height: 26px; margin: 0; background: transparent; cursor: grab;
}
.messletters-net.mln-app .mln7v-range:active { cursor: grabbing; }
.messletters-net.mln-app .mln7v-range::-webkit-slider-runnable-track {
	height: 8px; border-radius: 999px; background: var(--mln7-accent-soft, #d9f2e8);
}
.messletters-net.mln-app .mln7v-range::-moz-range-track {
	height: 8px; border-radius: 999px; background: var(--mln7-accent-soft, #d9f2e8);
}
.messletters-net.mln-app .mln7v-range::-webkit-slider-thumb {
	-webkit-appearance: none; appearance: none;
	width: 24px; height: 24px; margin-top: -8px; border-radius: 50%;
	background: var(--mln7-accent, #10b981); border: 3px solid var(--mln7-surface, #fff);
	box-shadow: 0 2px 6px rgba(0, 0, 0, .22);
}
.messletters-net.mln-app .mln7v-range::-moz-range-thumb {
	width: 24px; height: 24px; border-radius: 50%;
	background: var(--mln7-accent, #10b981); border: 3px solid var(--mln7-surface, #fff);
	box-shadow: 0 2px 6px rgba(0, 0, 0, .22);
}
.messletters-net.mln-app .mln7v-ticks {
	display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 2px; margin-top: 4px;
}
.messletters-net.mln-app .mln7v-tick {
	background: none; border: 0; cursor: pointer; padding: 4px 2px;
	font: 600 11.5px var(--mln7-font, inherit); color: var(--mln7-mut, #5d716c);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 30px;
}
.messletters-net.mln-app .mln7v-tick.is-on { color: var(--mln7-accent-press, #059669); font-weight: 800; }

/* =====================================================================
   MOBILE FIXES — stop the control rows overlapping each other and stop
   the input text running under the Copy button.
   ===================================================================== */
.messletters-net.mln-app.mln7d .mln-input { padding-right: 124px !important; }
.messletters-net.mln-app.mln7d .mln-clear { right: 118px; }

@media (max-width: 720px) {
	/* Sticky rows with hard-coded offsets were stacking on top of each
	   other. Keep them in normal flow instead. */
	.messletters-net.mln-app.mln7d [data-mln-input-card],
	.messletters-net.mln-app.mln7d .mln-menu { position: static !important; top: auto !important; }

	.messletters-net.mln-app.mln7d .mln-input { padding-right: 108px !important; font-size: 15px; }
	.messletters-net.mln-app.mln7d .mln-clear { right: 104px; }
	.messletters-net.mln-app.mln7d .mln7d-act { right: 5px; gap: 4px; }
	.messletters-net.mln-app.mln7d .mln7d-act .mln7d-copy { padding: 0 13px; font-size: 12.5px; }
	.messletters-net.mln-app.mln7d .mln7d-act .mln7d-btn { min-width: 30px; }

	/* TRY row: chips scroll, the works-in badges drop to their own line so
	   they never sit on top of the chips. */
	.messletters-net.mln-app.mln7d .mln-try { flex-wrap: wrap; overflow: visible; row-gap: 6px; }
	.messletters-net.mln-app.mln7d .mln7d-tryright {
		margin-left: 0; width: 100%; justify-content: flex-start; flex-wrap: wrap;
	}

	.messletters-net.mln-app.mln7d .mln7c-deco {
		grid-template-columns: auto 1fr auto; row-gap: 4px; padding: 8px 10px;
	}
	.messletters-net.mln-app .mln7v { padding: 10px 12px; }
	.messletters-net.mln-app .mln7v-specimen { font-size: 24px; min-height: 30px; margin: 6px 0 10px; }
	.messletters-net.mln-app .mln7v-ticks { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.messletters-net.mln-app .mln7v-tick { font-size: 11px; }
}

/* =====================================================================
   DECORATION — same card treatment as the vibe slider:
   label + current name, a full-width track, stops as ticks underneath.
   ===================================================================== */
.messletters-net.mln-app.mln7d .mln7c-deco {
	display: block;
	margin: 0 0 8px; padding: 12px 14px;
	border: 1px solid var(--mln7-line, #d7e6df);
	border-radius: var(--mln7-r-md, 16px);
	background: var(--mln7-surface, #fff);
}
.messletters-net.mln-app.mln7d .mln7c-deco-head {
	display: flex !important; align-items: baseline; justify-content: space-between; gap: 10px;
	margin: 0 0 10px;
}
.messletters-net.mln-app.mln7d .mln7c-deco-label {
	font: 800 10px var(--mln7-font, inherit); letter-spacing: .12em; text-transform: uppercase;
	color: var(--mln7-mut, #5d716c);
}
.messletters-net.mln-app.mln7d .mln7c-deco-name {
	font: 800 15px var(--mln7-font, inherit); color: var(--mln7-accent-press, #059669);
	min-width: 0; text-align: right;
}

/* Full-width track, matching the vibe slider */
.messletters-net.mln-app.mln7d .mln7c-range {
	-webkit-appearance: none; appearance: none;
	display: block !important; width: 100%; height: 26px; margin: 0; background: transparent; cursor: grab;
}
.messletters-net.mln-app.mln7d .mln7c-range::-webkit-slider-runnable-track {
	height: 8px; border-radius: 999px; background: var(--mln7-accent-soft, #d9f2e8);
}
.messletters-net.mln-app.mln7d .mln7c-range::-moz-range-track {
	height: 8px; border-radius: 999px; background: var(--mln7-accent-soft, #d9f2e8);
}
.messletters-net.mln-app.mln7d .mln7c-range::-webkit-slider-thumb {
	-webkit-appearance: none; appearance: none;
	width: 24px; height: 24px; margin-top: -8px; border-radius: 50%;
	background: var(--mln7-accent, #10b981); border: 3px solid var(--mln7-surface, #fff);
	box-shadow: 0 2px 6px rgba(0, 0, 0, .22);
}
.messletters-net.mln-app.mln7d .mln7c-range::-moz-range-thumb {
	width: 24px; height: 24px; border-radius: 50%;
	background: var(--mln7-accent, #10b981); border: 3px solid var(--mln7-surface, #fff);
	box-shadow: 0 2px 6px rgba(0, 0, 0, .22);
}

/* Stops become evenly spread ticks under the track (always visible) */
.messletters-net.mln-app.mln7d .mln7c-deco-stops,
.messletters-net.mln-app.mln7d .mln7c-deco-stops.is-open {
	display: grid !important;
	grid-template-columns: repeat(15, minmax(0, 1fr));
	gap: 2px; margin-top: 4px; overflow: visible; flex-wrap: nowrap;
}
.messletters-net.mln-app.mln7d .mln7c-deco-stops .mln7c-stop,
.messletters-net.mln-app.mln7d .mln7c-deco-stops .mln7d-extra {
	display: inline-flex !important; align-items: center; justify-content: center;
	min-width: 0; width: 100%; min-height: 30px; padding: 0;
	border: 0; background: none; border-radius: 8px;
	font-size: 14px; color: var(--mln7-mut, #5d716c); cursor: pointer;
}
.messletters-net.mln-app.mln7d .mln7c-deco-stops .mln7c-stop:hover { background: var(--mln7-accent-soft, #d9f2e8); }
.messletters-net.mln-app.mln7d .mln7c-deco-stops .mln7c-stop.is-on {
	background: none; color: var(--mln7-accent-press, #059669);
	font-weight: 800; transform: scale(1.25);
}
.messletters-net.mln-app.mln7d .mln7d-more { display: none !important; }

@media (max-width: 720px) {
	.messletters-net.mln-app.mln7d .mln7c-deco { padding: 10px 12px; }
	.messletters-net.mln-app.mln7d .mln7c-deco-stops,
	.messletters-net.mln-app.mln7d .mln7c-deco-stops.is-open {
		grid-template-columns: repeat(8, minmax(0, 1fr)); row-gap: 2px;
	}
	.messletters-net.mln-app.mln7d .mln7c-stop { min-height: 34px; font-size: 15px; }
}

/* =====================================================================
   FINAL: Decoration and Vibe share ONE compact block style.
       LABEL   [==========track==========]   Value
   Both are single rows; the glyph/name ticks are hidden to keep the
   control stack short. Overrides the taller card treatment above.
   ===================================================================== */
.messletters-net.mln-app.mln7d .mln7c-deco,
.messletters-net.mln-app.mln7d .mln7v {
	display: grid !important;
	grid-template-columns: auto minmax(120px, 1fr) auto;
	align-items: center; gap: 12px;
	margin: 0 0 8px; padding: 8px 14px;
	border: 1px solid var(--mln7-line, #d7e6df);
	border-radius: 999px;
	background: var(--mln7-surface, #fff);
}
/* head becomes transparent so label and value sit directly on the grid */
.messletters-net.mln-app.mln7d .mln7c-deco-head,
.messletters-net.mln-app.mln7d .mln7v-head { display: contents !important; }

.messletters-net.mln-app.mln7d .mln7c-deco-label,
.messletters-net.mln-app.mln7d .mln7v-label {
	grid-column: 1; margin: 0;
	font: 800 10px var(--mln7-font, inherit); letter-spacing: .12em; text-transform: uppercase;
	color: var(--mln7-mut, #5d716c); white-space: nowrap;
}
.messletters-net.mln-app.mln7d .mln7c-range,
.messletters-net.mln-app.mln7d .mln7v-range {
	grid-column: 2; height: 24px; margin: 0;
}
.messletters-net.mln-app.mln7d .mln7c-deco-name,
.messletters-net.mln-app.mln7d .mln7v-name {
	grid-column: 3; margin: 0; min-width: 74px; text-align: right;
	font: 800 13px var(--mln7-font, inherit); color: var(--mln7-accent-press, #059669);
	white-space: nowrap;
}
/* Thumb/track sized for the slim row */
.messletters-net.mln-app.mln7d .mln7c-range::-webkit-slider-thumb,
.messletters-net.mln-app.mln7d .mln7v-range::-webkit-slider-thumb {
	width: 20px; height: 20px; margin-top: -7px;
}
.messletters-net.mln-app.mln7d .mln7c-range::-moz-range-thumb,
.messletters-net.mln-app.mln7d .mln7v-range::-moz-range-thumb { width: 20px; height: 20px; }
.messletters-net.mln-app.mln7d .mln7c-range::-webkit-slider-runnable-track,
.messletters-net.mln-app.mln7d .mln7v-range::-webkit-slider-runnable-track { height: 6px; }
.messletters-net.mln-app.mln7d .mln7c-range::-moz-range-track,
.messletters-net.mln-app.mln7d .mln7v-range::-moz-range-track { height: 6px; }

/* Hide the tall extras — specimen and tick rows */
.messletters-net.mln-app.mln7d .mln7v-specimen,
.messletters-net.mln-app.mln7d .mln7v-ticks,
.messletters-net.mln-app.mln7d .mln7c-deco-stops,
.messletters-net.mln-app.mln7d .mln7c-deco-stops.is-open { display: none !important; }

@media (max-width: 720px) {
	.messletters-net.mln-app.mln7d .mln7c-deco,
	.messletters-net.mln-app.mln7d .mln7v {
		grid-template-columns: auto minmax(80px, 1fr) auto;
		gap: 8px; padding: 7px 12px;
	}
	.messletters-net.mln-app.mln7d .mln7c-deco-name,
	.messletters-net.mln-app.mln7d .mln7v-name { min-width: 62px; font-size: 12px; }
}

/* =====================================================================
   Decoration + Vibe share one row: two columns from tablet up,
   stacked full-width on phones.
   ===================================================================== */
.messletters-net.mln-app .mln7s-row {
	display: grid; grid-template-columns: 1fr; gap: 8px; margin: 0 0 8px; width: 100%;
}
.messletters-net.mln-app.mln7d .mln7s-row > .mln7c-deco,
.messletters-net.mln-app.mln7d .mln7s-row > .mln7v {
	margin: 0; width: 100%; min-width: 0;
}
@media (min-width: 768px) {
	.messletters-net.mln-app .mln7s-row { grid-template-columns: 1fr 1fr; gap: 10px; }
}
/* The old wrapper inside the menu must not constrain the vibe pill. */
.messletters-net.mln-app.mln7d .mln7d-vibes { display: block; width: 100%; }
.messletters-net.mln-app.mln7d .mln7d-vibes:empty { display: none; }

/* TRY row and its tray/deck controls are removed in compact mode. */
.messletters-net.mln-app.mln7d .mln-try,
.messletters-net.mln-app.mln7d .mln7d-tryright,
.messletters-net.mln-app.mln7d .mln7b-tray { display: none !important; }

/* Search + count + favourites + night sit at the top of the tool. */
.messletters-net.mln-app.mln7d .mln-toolbar {
	order: -1; margin: 0 0 10px; display: flex; align-items: center;
	gap: 8px; flex-wrap: wrap;
}
.messletters-net.mln-app.mln7d .mln-toolbar .mln-search { flex: 1 1 260px; min-height: 44px; }
.messletters-net.mln-app.mln7d .mln-toolbar .mln-meta {
	flex: 0 0 auto; margin-left: auto; display: flex; align-items: center; gap: 8px;
}
@media (max-width: 560px) {
	.messletters-net.mln-app.mln7d .mln-toolbar .mln-search { flex: 1 1 100%; }
	.messletters-net.mln-app.mln7d .mln-toolbar .mln-meta { margin-left: 0; width: 100%; }
}

/* =====================================================================
   DESIGN 1e — exact parameters from the reference boards.
   Mobile ("Sticky Toolbar 1e"): each slider is its own card, stacked.
   Desktop ("Desktop Panel 1e"): both sliders share one inline row.
   ===================================================================== */

/* ---- Mobile / default: stacked slider cards ------------------------- */
.messletters-net.mln-app.mln7d .mln7s-row {
	display: grid !important; grid-template-columns: 1fr; gap: 9px; margin: 14px 0 10px;
}
.messletters-net.mln-app.mln7d .mln7s-row > .mln7c-deco,
.messletters-net.mln-app.mln7d .mln7s-row > .mln7v {
	display: block !important;
	background: var(--mln7-surface, #fff);
	border: 1px solid var(--mln7-line, #d7e6df);
	border-radius: 16px;
	padding: 12px 16px 8px;
	margin: 0;
}
.messletters-net.mln-app.mln7d .mln7c-deco-head,
.messletters-net.mln-app.mln7d .mln7v-head {
	display: flex !important; align-items: baseline; justify-content: space-between; gap: 12px;
}
.messletters-net.mln-app.mln7d .mln7c-deco-label,
.messletters-net.mln-app.mln7d .mln7v-label {
	font-size: 11px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
	color: #7c9a91; white-space: nowrap;
}
.messletters-net.mln-app.mln7d .mln7c-deco-name,
.messletters-net.mln-app.mln7d .mln7v-name {
	font-size: 14px; font-weight: 700; color: #0f9d6b; width: auto; min-width: 0; text-align: right;
}
.messletters-net.mln-app.mln7d .mln7c-range,
.messletters-net.mln-app.mln7d .mln7v-range {
	display: block !important; width: 100%; height: 26px; margin: 6px 0 0;
}

/* ---- Desktop: both sliders inline, sharing one row ------------------ */
@media (min-width: 1080px) {
	.messletters-net.mln-app.mln7d .mln7s-row {
		display: flex !important; align-items: center; gap: 18px;
		padding: 10px 10px 0; border-top: 1px solid var(--mln7-line, #d7e6df);
		margin: 10px 0 0; background: none;
	}
	.messletters-net.mln-app.mln7d .mln7s-row > .mln7c-deco,
	.messletters-net.mln-app.mln7d .mln7s-row > .mln7v {
		flex: 1; display: flex !important; align-items: center; gap: 12px;
		background: none; border: 0; border-radius: 0; padding: 0;
	}
	.messletters-net.mln-app.mln7d .mln7s-row > .mln7c-deco { position: relative; }
	.messletters-net.mln-app.mln7d .mln7s-row > .mln7c-deco::after {
		content: ''; position: absolute; right: -9px; top: 50%; transform: translateY(-50%);
		width: 1px; height: 22px; background: var(--mln7-line, #d7e6df);
	}
	.messletters-net.mln-app.mln7d .mln7c-deco-head,
	.messletters-net.mln-app.mln7d .mln7v-head { display: contents !important; }
	.messletters-net.mln-app.mln7d .mln7c-range,
	.messletters-net.mln-app.mln7d .mln7v-range { flex: 1; margin: 0; height: 24px; }
	.messletters-net.mln-app.mln7d .mln7c-deco-name,
	.messletters-net.mln-app.mln7d .mln7v-name {
		font-size: 13px; width: 44px; flex: 0 0 44px; text-align: right;
	}

	/* Category rail — 236px card, per spec */
	.messletters-net.mln-app .mln7c-split { grid-template-columns: 236px minmax(0, 1fr); gap: 14px; }
	.messletters-net.mln-app .mln7c-split > .mln-menu {
		width: 236px; background: var(--mln7-surface, #fff);
		border: 1px solid var(--mln7-line, #d7e6df); border-radius: 16px;
		padding: 8px !important; max-height: 760px; overflow-y: auto; scrollbar-width: thin;
	}
	.messletters-net.mln-app .mln7c-split > .mln-menu::-webkit-scrollbar { width: 6px; }
	.messletters-net.mln-app .mln7c-split > .mln-menu::-webkit-scrollbar-thumb {
		background: #cfe0d9; border-radius: 999px;
	}

	/* Wide screens show two result columns */
	.messletters-net.mln-app.mln7d .mln-grid {
		display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
	}
	.messletters-net.mln-app.mln7d .mln-card.is-wide { grid-column: 1 / -1; }
	.messletters-net.mln-app.mln7d .mln7-panel { grid-column: 1 / -1; }
}

/* Result card: name + actions on one header row */
.messletters-net.mln-app.mln7d .mln-card-foot {
	display: flex; align-items: center; justify-content: space-between;
	gap: 10px; padding-top: 8px;
}
.messletters-net.mln-app.mln7d .mln-copy {
	background: #10b981; color: #fff; font-size: 14px; font-weight: 700;
	padding: 10px 20px; border-radius: 999px; display: inline-flex; align-items: center; gap: 7px;
}

/* Rail group headings (Fonts / Names / Symbols) — desktop rail only. */
.messletters-net.mln-app .mln7g-head { display: none; }
@media (min-width: 1080px) {
	.messletters-net.mln-app .mln7c-split .mln7g-head {
		display: block; width: 100%;
		font-size: 10px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase;
		color: #7c9a91; padding: 10px 8px 4px; margin-top: 2px;
	}
	.messletters-net.mln-app .mln7c-split .mln7g-head:first-of-type { margin-top: 0; }
}

/* =====================================================================
   MERGED FIELD + MODE SWITCH (Desktop Panel 1e)
   [ Your text | Find a style ]  [ icon  input  ×  ⌘K ]  5 of 128 styles
   ===================================================================== */
.messletters-net.mln-app .mln7m {
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	background: var(--mln7-surface, #fff);
	border: 1px solid var(--mln7-line, #d7e6df);
	border-radius: 18px; padding: 8px; margin: 0 0 10px;
	box-shadow: 0 2px 10px rgba(16, 60, 48, .06);
}
.messletters-net.mln-app .mln7m-modes {
	display: flex; align-items: center; gap: 4px; flex: 0 0 auto;
	background: var(--mln7-bg, #eef4f1); border-radius: 999px; padding: 3px;
}
.messletters-net.mln-app .mln7m-mode {
	border: 0; border-radius: 999px; padding: 7px 14px; cursor: pointer;
	display: flex; align-items: center; gap: 7px;
	font-size: 13px; font-weight: 700; white-space: nowrap;
	background: transparent; color: var(--mln7-mut, #5d716c);
}
.messletters-net.mln-app .mln7m-mode.is-on {
	background: var(--mln7-surface, #fff); color: #0f9d6b;
	box-shadow: 0 1px 4px rgba(16, 60, 48, .10);
}
.messletters-net.mln-app .mln7m-field {
	flex: 1 1 240px; min-width: 0; display: flex; align-items: center; gap: 8px;
	background: var(--mln7-bg, #eef4f1); border-radius: 12px; padding: 0 10px; min-height: 44px;
}
.messletters-net.mln-app .mln7m-ico { color: var(--mln7-mut, #5d716c); font-size: 15px; flex: 0 0 auto; }
.messletters-net.mln-app .mln7m-in {
	flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
	font-size: 15px; font-weight: 600; color: var(--mln7-ink, #0f2622);
	min-height: 42px; padding: 0;
}
.messletters-net.mln-app .mln7m-in::placeholder { color: var(--mln7-mut, #5d716c); font-weight: 500; }
.messletters-net.mln-app .mln7m-clear {
	flex: 0 0 auto; border: 0; background: none; cursor: pointer; font-size: 16px; line-height: 1;
	color: var(--mln7-mut, #5d716c); width: 26px; height: 26px; border-radius: 999px;
}
.messletters-net.mln-app .mln7m-clear:hover { color: #0f9d6b; }
.messletters-net.mln-app .mln7m-kbd {
	flex: 0 0 auto; font: 600 11px var(--mln7-font, inherit);
	color: var(--mln7-mut, #5d716c); border: 1px solid var(--mln7-line, #d7e6df);
	border-radius: 7px; padding: 3px 7px; white-space: nowrap;
}
.messletters-net.mln-app .mln7m-count {
	flex: 0 0 auto; font-size: 13px; font-weight: 700;
	color: var(--mln7-mut, #5d716c); white-space: nowrap; padding-right: 4px;
}

/* The old separate search box and composer chrome are replaced by it. */
.messletters-net.mln-app.mln7m-on .mln-search,
.messletters-net.mln-app.mln7m-on .mln-toolbar .mln-search { display: none !important; }
.messletters-net.mln-app.mln7m-on.mln7d [data-mln-input-card] {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.messletters-net.mln-app.mln7m-on .mln-toolbar { margin-bottom: 8px; }

@media (max-width: 720px) {
	.messletters-net.mln-app .mln7m { border-radius: 16px; gap: 8px; }
	.messletters-net.mln-app .mln7m-modes { flex: 1 1 100%; }
	.messletters-net.mln-app .mln7m-mode { flex: 1; justify-content: center; padding: 8px 10px; }
	.messletters-net.mln-app .mln7m-field { flex: 1 1 100%; }
	.messletters-net.mln-app .mln7m-kbd { display: none; }
	.messletters-net.mln-app .mln7m-count { flex: 1 1 100%; text-align: left; }
}

/* =====================================================================
   MERGED CARD — exact reference layout
   [ Your text | Find a style ............ 8 of 128  ⇄  ☾ ]
   [ I  Vedaeon .................. ✕  ⌘K   ( Copy ) ]
   [ RECENT  chip chip chip ............... ♥ Favorites 0 ]
   ===================================================================== */
.messletters-net.mln-app .mln7m {
	display: block; padding: 0; overflow: hidden;
	background: var(--mln7-surface, #fff);
	border: 1px solid var(--mln7-line, #d7e6df);
	border-radius: 20px; margin: 0 0 10px;
	box-shadow: 0 2px 10px rgba(16, 60, 48, .06);
}

/* Row 1 — tabs on a tinted strip */
.messletters-net.mln-app .mln7m-tabs {
	display: flex; align-items: center; gap: 4px;
	background: var(--mln7-bg, #eef4f1);
	padding: 8px 12px 8px 8px;
}
.messletters-net.mln-app .mln7m-mode {
	border: 0; border-radius: 999px; padding: 9px 18px; cursor: pointer;
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 15px; font-weight: 700; white-space: nowrap;
	background: transparent; color: var(--mln7-mut, #5d716c);
}
.messletters-net.mln-app .mln7m-mode.is-on {
	background: var(--mln7-surface, #fff); color: var(--mln7-ink, #0f2622);
	box-shadow: 0 1px 4px rgba(16, 60, 48, .12);
}
.messletters-net.mln-app .mln7m-tico { font-size: 14px; opacity: .75; }
.messletters-net.mln-app .mln7m-tabsright {
	margin-left: auto; display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
}
.messletters-net.mln-app .mln7m-count {
	font-size: 14px; font-weight: 700; color: var(--mln7-mut, #5d716c); white-space: nowrap;
}
.messletters-net.mln-app .mln7m-icobtn {
	border: 0 !important; background: transparent !important;
	color: var(--mln7-mut, #5d716c) !important;
	width: 32px; height: 32px; min-width: 32px; min-height: 32px; padding: 0 !important;
	border-radius: 999px !important; display: grid; place-items: center; cursor: pointer;
	font-size: 17px; box-shadow: none !important;
}
.messletters-net.mln-app .mln7m-icobtn:hover { background: rgba(16, 185, 129, .14) !important; color: #0f9d6b !important; }

/* Row 2 — the field */
.messletters-net.mln-app .mln7m-field {
	display: flex; align-items: center; gap: 12px; padding: 14px 14px;
}
.messletters-net.mln-app .mln7m-ico {
	flex: 0 0 auto; color: #10b981; font-size: 20px; font-weight: 700; width: 22px; text-align: center;
}
.messletters-net.mln-app .mln7m-in {
	flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
	font-size: 26px; font-weight: 800; color: var(--mln7-ink, #0f2622);
	min-height: 44px; padding: 0; line-height: 1.2;
}
.messletters-net.mln-app .mln7m-in::placeholder { color: var(--mln7-mut, #5d716c); font-weight: 600; }
.messletters-net.mln-app .mln7m-clear {
	flex: 0 0 auto; border: 0; cursor: pointer; font-size: 18px; line-height: 1;
	color: var(--mln7-mut, #5d716c); width: 38px; height: 38px; border-radius: 999px;
	background: var(--mln7-bg, #eef4f1); display: grid; place-items: center;
}
.messletters-net.mln-app .mln7m-clear:hover { color: #0f9d6b; }
.messletters-net.mln-app .mln7m-kbd {
	flex: 0 0 auto; font: 600 12px var(--mln7-font, inherit);
	color: var(--mln7-mut, #5d716c); border: 1px solid var(--mln7-line, #d7e6df);
	border-radius: 9px; padding: 7px 10px; white-space: nowrap; background: var(--mln7-surface, #fff);
}
.messletters-net.mln-app .mln7m-copy {
	flex: 0 0 auto; border: 0; cursor: pointer;
	background: #10b981; color: #fff; font-size: 17px; font-weight: 700;
	padding: 13px 28px; border-radius: 999px; white-space: nowrap;
}
.messletters-net.mln-app .mln7m-copy:hover { background: #059669; }

/* Row 3 — RECENT + Favourites */
.messletters-net.mln-app .mln7m-recent {
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	padding: 0 14px 14px;
}
.messletters-net.mln-app .mln7m-recent-label {
	font-size: 11px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase;
	color: var(--mln7-mut, #5d716c); flex: 0 0 auto;
}
.messletters-net.mln-app .mln7m-recent-list { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.messletters-net.mln-app .mln7m-chip {
	border: 1px solid var(--mln7-line, #d7e6df); background: var(--mln7-surface, #fff);
	color: var(--mln7-ink, #0f2622); border-radius: 999px; padding: 10px 18px;
	font-size: 15px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.messletters-net.mln-app .mln7m-chip:hover { border-color: #10b981; color: #0f9d6b; }
.messletters-net.mln-app .mln7m-recent.is-empty .mln7m-recent-label { display: none; }
.messletters-net.mln-app .mln7m-fav {
	margin-left: auto; border: 1px solid #f6c9d2 !important; background: var(--mln7-surface, #fff) !important;
	color: var(--mln7-ink, #0f2622) !important; border-radius: 999px !important;
	padding: 10px 18px !important; font-size: 15px; font-weight: 700; cursor: pointer;
	display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
}
.messletters-net.mln-app .mln7m-fav .mln-heart { color: #ef4c66; }

/* Retire what the card replaces */
.messletters-net.mln-app.mln7m-on .mln-toolbar { display: none !important; }

@media (max-width: 720px) {
	.messletters-net.mln-app .mln7m { border-radius: 16px; }
	.messletters-net.mln-app .mln7m-tabs { padding: 6px 8px; gap: 2px; }
	.messletters-net.mln-app .mln7m-mode { padding: 8px 12px; font-size: 13.5px; }
	.messletters-net.mln-app .mln7m-count { font-size: 12.5px; }
	.messletters-net.mln-app .mln7m-field { padding: 12px; gap: 8px; flex-wrap: wrap; }
	.messletters-net.mln-app .mln7m-in { font-size: 20px; flex: 1 1 100%; order: -1; }
	.messletters-net.mln-app .mln7m-ico { display: none; }
	.messletters-net.mln-app .mln7m-kbd { display: none; }
	.messletters-net.mln-app .mln7m-copy { flex: 1; padding: 12px 18px; font-size: 15px; }
	.messletters-net.mln-app .mln7m-recent { padding: 0 12px 12px; gap: 8px; }
	.messletters-net.mln-app .mln7m-chip { padding: 8px 14px; font-size: 13px; }
	.messletters-net.mln-app .mln7m-fav { margin-left: 0; padding: 8px 14px !important; font-size: 13px; }
}

/* =====================================================================
   FINAL — values taken directly from "Desktop Panel 1e" / "Sticky Toolbar 1e"
   ===================================================================== */
.messletters-net.mln-app .mln7m {
	display: block; overflow: visible;
	background: var(--mln7-surface, #fff);
	border: 1px solid var(--mln7-line, #d7e6df);
	border-radius: 18px;
	padding: 8px 8px 10px;
	box-shadow: 0 2px 10px rgba(16, 60, 48, .06);
	margin: 0 0 10px;
}
.messletters-net.mln-app .mln7m-row1 { display: flex; align-items: center; gap: 10px; }

/* mode switch — tinted pill group */
.messletters-net.mln-app .mln7m-modes {
	display: flex; align-items: center; gap: 4px; flex: 0 0 auto;
	background: var(--mln7-bg, #eef4f1); border-radius: 999px; padding: 4px;
}
.messletters-net.mln-app .mln7m-mode {
	border: 0; border-radius: 999px; padding: 7px 14px; cursor: pointer;
	display: flex; align-items: center; gap: 7px;
	font-size: 13px; font-weight: 700; white-space: nowrap;
	background: transparent; color: var(--mln7-mut, #5d716c); box-shadow: none;
}
.messletters-net.mln-app .mln7m-mode.is-on {
	background: var(--mln7-surface, #fff); color: var(--mln7-ink, #0f2622);
	box-shadow: 0 1px 3px rgba(16, 60, 48, .12);
}

/* field group */
.messletters-net.mln-app .mln7m-field {
	display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; padding-left: 4px;
}
.messletters-net.mln-app .mln7m-in {
	flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
	font-size: 18px; font-weight: 600; color: var(--mln7-ink, #0f2622);
	min-height: 40px; padding: 0; line-height: 1.3;
}
.messletters-net.mln-app .mln7m-in::placeholder { color: var(--mln7-mut, #5d716c); font-weight: 500; }
.messletters-net.mln-app .mln7m-clear {
	flex: 0 0 auto; border: 0; background: var(--mln7-bg, #eef4f1);
	color: var(--mln7-mut, #5d716c); width: 26px; height: 26px; min-width: 26px;
	border-radius: 999px; display: grid; place-items: center; cursor: pointer; font-size: 14px;
}
.messletters-net.mln-app .mln7m-kbd {
	flex: 0 0 auto; font-size: 11px; font-weight: 600; color: var(--mln7-mut, #5d716c);
	border: 1px solid var(--mln7-line, #d7e6df); border-radius: 7px; padding: 3px 7px;
	white-space: nowrap; background: transparent;
}
.messletters-net.mln-app .mln7m-count {
	flex: 0 0 auto; font-size: 13px; font-weight: 700;
	color: var(--mln7-mut, #5d716c); white-space: nowrap;
}
.messletters-net.mln-app .mln7m-div {
	flex: 0 0 auto; width: 1px; height: 26px; background: var(--mln7-line, #d7e6df);
}
.messletters-net.mln-app .mln7m-slot { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.messletters-net.mln-app .mln7m-icobtn {
	border: 0 !important; background: transparent !important;
	color: var(--mln7-mut, #5d716c) !important;
	width: 32px; height: 32px; min-width: 32px; min-height: 32px; padding: 0 !important;
	border-radius: 999px !important; display: grid; place-items: center; cursor: pointer;
	font-size: 16px; box-shadow: none !important;
}
.messletters-net.mln-app .mln7m-icobtn:hover { background: rgba(16, 185, 129, .14) !important; color: #0f9d6b !important; }
.messletters-net.mln-app .mln7m-fav {
	border: 1px solid var(--mln7-line, #d7e6df) !important; background: var(--mln7-surface, #fff) !important;
	color: var(--mln7-ink, #0f2622) !important; border-radius: 999px !important;
	padding: 7px 13px !important; font-size: 13px; font-weight: 700; cursor: pointer;
	display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; margin: 0;
}
.messletters-net.mln-app .mln7m-fav .mln-heart { color: #ef4c66; font-size: 13px; }
.messletters-net.mln-app .mln7m-copy {
	flex: 0 0 auto; border: 0; cursor: pointer;
	background: #10b981; color: #fff; font-size: 14px; font-weight: 700;
	padding: 10px 20px; border-radius: 999px; display: flex; align-items: center; gap: 7px;
	white-space: nowrap;
}
.messletters-net.mln-app .mln7m-copy:hover { background: #059669; }

/* row 2 — sliders inset inside the card on desktop */
.messletters-net.mln-app.mln7d .mln7s-row.is-inset {
	display: flex !important; align-items: center; gap: 18px;
	padding: 10px 10px 0; border-top: 1px solid var(--mln7-line, #d7e6df);
	margin: 10px 0 0; background: none; border-radius: 0;
}
/* row 3 — recents */
.messletters-net.mln-app .mln7m-recent {
	display: flex; align-items: center; gap: 7px; flex-wrap: wrap; padding: 8px 10px 0;
}
.messletters-net.mln-app .mln7m-recent-label {
	font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
	color: #9db5ad; margin-right: 2px;
}
.messletters-net.mln-app .mln7m-recent-list { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.messletters-net.mln-app .mln7m-chip {
	border: 1px solid var(--mln7-line, #d7e6df); background: var(--mln7-surface, #fff);
	color: var(--mln7-ink, #0f2622); border-radius: 999px; padding: 6px 12px;
	font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.messletters-net.mln-app .mln7m-chip:hover { border-color: #10b981; color: #0f9d6b; }
.messletters-net.mln-app .mln7m-recent.is-empty { display: none; }

@media (max-width: 1079px) {
	.messletters-net.mln-app .mln7m-row1 { flex-wrap: wrap; }
	.messletters-net.mln-app .mln7m-modes { flex: 1 1 100%; }
	.messletters-net.mln-app .mln7m-mode { flex: 1; justify-content: center; }
	.messletters-net.mln-app .mln7m-field { flex: 1 1 100%; flex-wrap: wrap; padding-left: 0; }
	.messletters-net.mln-app .mln7m-in { flex: 1 1 100%; font-size: 17px; }
	.messletters-net.mln-app .mln7m-kbd { display: none; }
	.messletters-net.mln-app .mln7m-copy { margin-left: auto; }
}

/* =====================================================================
   HANDOFF SPEC (README.md) — design tokens, ported verbatim.
   Light / dark themed via the existing data-mln7-dark attribute.
   ===================================================================== */
.messletters-net.mln-app {
	--mln7-bg: #eef4f2;
	--mln7-surface: #ffffff;
	--mln7-line: #dfeae6;
	--mln7-ink: #1f3d33;
	--mln7-mut: #4d6c62;
	--mln7-faint: #7c9a91;
	--mln7-hint: #b9d6cb;
	--mln7-accent: #10b981;
	--mln7-accent-press: #0f9d6b;
	--mln7-accent-tint: rgba(16, 185, 129, .12);
	--mln7-heart: #ef4c66;
	--mln7-heart-text: #c0324a;
	--mln7-heart-tint: rgba(239, 76, 102, .14);
}
.messletters-net.mln-app[data-mln7-dark="1"] {
	--mln7-bg: #1b2a25;
	--mln7-surface: #243430;
	--mln7-line: #33453f;
	--mln7-ink: #e8f3ef;
	--mln7-mut: #8fb0a6;
	--mln7-faint: #7d9c93;
	--mln7-hint: #3d5a50;
}

/* Focus rings — every interactive element (spec: 2px accent, offset 2). */
.messletters-net.mln-app button:focus-visible,
.messletters-net.mln-app input:focus-visible,
.messletters-net.mln-app [tabindex]:focus-visible {
	outline: 2px solid var(--mln7-accent, #10b981) !important;
	outline-offset: 2px;
}

/* Copy success state — tint + revert (spec: rgba(16,185,129,.16) / #0f9d6b). */
.messletters-net.mln-app .mln7m-copy.is-copied,
.messletters-net.mln-app .mln-copy.is-copied {
	background: rgba(16, 185, 129, .16) !important;
	color: #0f9d6b !important;
}

/* Row 1 wrap behaviour (spec): field flex 1 1 240px min 240px; utility
   cluster in its own box, margin-left auto, drops to a second line
   instead of crushing the field. */
.messletters-net.mln-app .mln7m-row1 { flex-wrap: wrap; }
.messletters-net.mln-app .mln7m-field {
	flex: 1 1 240px; min-width: 240px; padding-left: 4px;
}
.messletters-net.mln-app .mln7m-utils {
	display: flex; align-items: center; gap: 10px; flex: 0 0 auto; margin-left: auto;
}
.messletters-net.mln-app .mln7m-in::placeholder { color: #9db5ad; }
.messletters-net.mln-app .mln7m-mode.is-on { box-shadow: 0 1px 3px rgba(16, 60, 48, .16); }

/* =====================================================================
   HANDOFF SPEC — rail, results header, result card, quiet tags, empty.
   ===================================================================== */

/* Rail (spec: sticky top 16, headings 10/800 .1em faint, items 12.5/600,
   radius 10, padding 7px 9px, count 10.5/700, active accent fill). */
@media (min-width: 900px) {
	.messletters-net.mln-app .mln7c-split { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 14px; align-items: start; }
	.messletters-net.mln-app .mln7c-split > .mln-menu {
		position: sticky; top: 16px; width: 236px;
		background: var(--mln7-surface); border: 1px solid var(--mln7-line);
		border-radius: 16px; padding: 8px !important;
		max-height: 760px; overflow-y: auto; scrollbar-width: thin;
	}
	.messletters-net.mln-app .mln7c-split > .mln-menu .mln-strip {
		flex-direction: column; flex-wrap: nowrap !important; overflow-x: visible !important;
		align-items: stretch; gap: 2px;
	}
	.messletters-net.mln-app .mln7c-split > .mln-menu .mln-pill {
		width: 100%; justify-content: flex-start; text-align: left;
		border-radius: 10px; padding: 7px 9px; height: auto; min-height: 34px;
		font-size: 12.5px; font-weight: 600; display: flex; align-items: center; gap: 9px;
		background: transparent; border: 0;
	}
	.messletters-net.mln-app .mln7c-split > .mln-menu .mln-pill:hover { background: var(--mln7-accent-tint); }
	.messletters-net.mln-app .mln7c-split > .mln-menu .mln-pill.is-active {
		background: var(--mln7-accent); color: #fff;
	}
	.messletters-net.mln-app .mln7c-split > .mln-menu .mln-pill.is-active .mln7g-count { color: rgba(255,255,255,.75); }
	.messletters-net.mln-app .mln7c-split .mln7g-head {
		display: block; font-size: 10px; font-weight: 800; letter-spacing: .1em;
		text-transform: uppercase; color: var(--mln7-faint); padding: 8px 9px 5px;
	}
}
.messletters-net.mln-app .mln7g-count {
	margin-left: auto; font-size: 10.5px; font-weight: 700; color: var(--mln7-faint);
}
.messletters-net.mln-app .mln7g-filter {
	display: flex; align-items: center; gap: 8px;
	background: var(--mln7-bg); border-radius: 10px; padding: 7px 10px; margin-bottom: 8px;
}
.messletters-net.mln-app .mln7g-filter input {
	width: 100%; border: 0; background: transparent; outline: none;
	font-size: 12px; font-weight: 600; color: var(--mln7-ink); min-height: 22px;
}
.messletters-net.mln-app .mln7g-filter { display: none; }
@media (min-width: 900px) { .messletters-net.mln-app .mln7c-split .mln7g-filter { display: flex; } }

/* Results header (spec: title 16/700, meta 12 muted, layout buttons 30px). */
.messletters-net.mln-app .mln7r-head {
	display: flex; align-items: center; gap: 10px; margin: 0 0 10px;
}
.messletters-net.mln-app .mln7r-title { font-size: 16px; font-weight: 700; color: var(--mln7-ink); }
.messletters-net.mln-app .mln7r-meta { font-size: 12px; color: var(--mln7-mut); }
.messletters-net.mln-app .mln7r-lay { margin-left: auto; display: flex; gap: 6px; }
.messletters-net.mln-app .mln7r-lay button {
	width: 30px; height: 30px; border-radius: 9px; cursor: pointer;
	border: 1px solid var(--mln7-line); background: var(--mln7-surface);
	color: var(--mln7-mut); font-size: 14px; display: grid; place-items: center;
}
.messletters-net.mln-app .mln7r-lay button[aria-pressed="true"] {
	border-color: var(--mln7-accent); background: var(--mln7-accent-tint); color: #0f9d6b;
}
.messletters-net.mln-app .mln7r-lay { display: none; }
@media (min-width: 900px) { .messletters-net.mln-app .mln7r-lay { display: flex; } }

/* Results grid (spec: 2 cols ≥1180, 1 col below or by choice). */
.messletters-net.mln-app.mln7d .mln-grid { display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 1180px) {
	.messletters-net.mln-app.mln7d [data-mln-cols="2"].mln-grid,
	.messletters-net.mln-app.mln7d .mln-grid[data-mln-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Result card (spec: radius 16, padding 13px 15px, grid gap 9; header row
   = name 11/700 .08em uppercase faint + actions right; output 19/1.45;
   platform line quiet 11.5 faint). */
.messletters-net.mln-app.mln7d .mln-card {
	display: flex; flex-direction: column; gap: 9px;
	background: var(--mln7-surface); border: 1px solid var(--mln7-line);
	border-radius: 16px; padding: 13px 15px; min-width: 0;
}
.messletters-net.mln-app.mln7d .mln-card-foot {
	order: -1; display: flex; align-items: center; gap: 8px;
	padding: 0; border: 0; flex-wrap: wrap; row-gap: 8px;
}
.messletters-net.mln-app.mln7d .mln-card-name {
	font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	color: var(--mln7-faint); white-space: nowrap; flex: 0 0 auto; margin: 0;
}
.messletters-net.mln-app.mln7d .mln-card-foot .mln-fav,
.messletters-net.mln-app.mln7d .mln-card-foot .mln-share {
	width: 30px; height: 30px; min-width: 30px; min-height: 30px;
	border: 1px solid var(--mln7-line); background: var(--mln7-surface);
	border-radius: 999px; display: grid; place-items: center; padding: 0;
}
.messletters-net.mln-app.mln7d .mln-card-foot .mln-fav { margin-left: auto; }
.messletters-net.mln-app.mln7d .mln-card-foot .mln-fav.is-on { color: var(--mln7-heart); border-color: rgba(239,76,102,.55); }
.messletters-net.mln-app.mln7d .mln-card-foot .mln-copy {
	height: 30px; min-height: 30px; padding: 0 13px; font-size: 12.5px; font-weight: 700;
	border-radius: 999px; background: var(--mln7-accent); color: #fff; border: 0;
}
.messletters-net.mln-app.mln7d .mln-card-preview {
	font-size: 19px; line-height: 1.45; color: var(--mln7-ink);
	word-break: break-word; text-align: left; margin: 0;
}
.messletters-net.mln-app.mln7d .mln7b-row-compat { margin: 0; order: 10; }
.messletters-net.mln-app .mln7b-compat.is-quiet {
	font-size: 11.5px; font-weight: 400; color: var(--mln7-faint);
	background: none; border: 0; padding: 0;
}

/* Favourites pill states (spec). */
.messletters-net.mln-app .mln7m-fav[aria-pressed="true"] {
	border-color: rgba(239, 76, 102, .55) !important;
	background: rgba(239, 76, 102, .14) !important;
	color: #c0324a !important;
}

/* Empty state (spec: dashed hint border, heart, 13px muted). */
.messletters-net.mln-app.mln7d .mln-empty {
	display: flex; align-items: center; gap: 10px;
	background: var(--mln7-surface); border: 1px dashed var(--mln7-hint);
	border-radius: 14px; padding: 16px 18px;
	font-size: 13px; color: var(--mln7-mut);
}

/* RECENT / TRY chips at spec sizes. */
.messletters-net.mln-app .mln7m-chip { padding: 4px 10px; font-size: 11.5px; font-weight: 600; }
.messletters-net.mln-app .mln7m-recent-label { font-size: 11px; font-weight: 700; letter-spacing: .09em; color: var(--mln7-mut); }

/* Results column: header + grid are one grid child so the desktop rail
   layout stays two columns (rail | results). */
.messletters-net.mln-app .mln7r-col { min-width: 0; width: 100%; }
@media (min-width: 900px) {
	.messletters-net.mln-app .mln7c-split { grid-template-columns: 236px minmax(0, 1fr) !important; }
	.messletters-net.mln-app .mln7c-split > .mln7r-col { min-width: 0; }
}

/* =====================================================================
   FINISHING PASS
   1. The merged field sat on a grey fill inside an already-white card,
      which read as a box-in-a-box. It is now flush with the card and
      separated by a hairline only.
   2. The slider track used a heavy tinted fill; softened to a neutral
      rail with the accent showing only up to the thumb.
   ===================================================================== */
.messletters-net.mln-app .mln7m-field {
	background: transparent !important;
	border-radius: 0;
	padding-left: 14px;
	border-left: 1px solid var(--mln7-line, #dfeae6);
	min-height: 46px;
}
.messletters-net.mln-app .mln7m-clear {
	background: transparent !important;
	border: 1px solid var(--mln7-line, #dfeae6);
}
.messletters-net.mln-app .mln7m-clear:hover {
	background: var(--mln7-accent-tint, rgba(16,185,129,.12)) !important;
	border-color: var(--mln7-accent, #10b981);
}
.messletters-net.mln-app .mln7m-modes { background: var(--mln7-bg, #eef4f2); }

/* Slider rails: neutral groove, accent only up to the value. */
.messletters-net.mln-app .mln7c-range::-webkit-slider-runnable-track,
.messletters-net.mln-app .mln7v-range::-webkit-slider-runnable-track,
.messletters-net.mln-app.mln7d .mln7c-range::-webkit-slider-runnable-track,
.messletters-net.mln-app.mln7d .mln7v-range::-webkit-slider-runnable-track {
	background: transparent;
	height: 5px; border-radius: 999px;
}
.messletters-net.mln-app .mln7c-range::-moz-range-track,
.messletters-net.mln-app .mln7v-range::-moz-range-track,
.messletters-net.mln-app.mln7d .mln7c-range::-moz-range-track,
.messletters-net.mln-app.mln7d .mln7v-range::-moz-range-track {
	background: transparent; height: 5px; border-radius: 999px;
}
.messletters-net.mln-app .mln7c-range,
.messletters-net.mln-app .mln7v-range {
	border-radius: 999px;
	background: var(--mln7-line, #dfeae6);
	background-clip: content-box;
	padding: 9px 0;
}
.messletters-net.mln-app .mln7c-range::-webkit-slider-thumb,
.messletters-net.mln-app .mln7v-range::-webkit-slider-thumb,
.messletters-net.mln-app.mln7d .mln7c-range::-webkit-slider-thumb,
.messletters-net.mln-app.mln7d .mln7v-range::-webkit-slider-thumb {
	width: 18px; height: 18px; margin-top: -6.5px;
	background: var(--mln7-accent, #10b981);
	border: 3px solid var(--mln7-surface, #fff);
	box-shadow: 0 1px 4px rgba(16, 60, 48, .22);
}
.messletters-net.mln-app .mln7c-range::-moz-range-thumb,
.messletters-net.mln-app .mln7v-range::-moz-range-thumb {
	width: 18px; height: 18px;
	background: var(--mln7-accent, #10b981);
	border: 3px solid var(--mln7-surface, #fff);
	box-shadow: 0 1px 4px rgba(16, 60, 48, .22);
}

/* Rail filter box: match the card, not a grey slab. */
.messletters-net.mln-app .mln7g-filter {
	background: transparent;
	border: 1px solid var(--mln7-line, #dfeae6);
	border-radius: 10px;
}
.messletters-net.mln-app .mln7g-filter:focus-within { border-color: var(--mln7-accent, #10b981); }

@media (max-width: 1079px) {
	.messletters-net.mln-app .mln7m-field { border-left: 0; padding-left: 0; }
}