/* Fancy Text Studio 2.1.0 - mobile first, scoped to .fts-app */
.fts-app, .fts-app *, .fts-app *::before, .fts-app *::after { box-sizing: border-box; }

.fts-app {
	--fts-accent: #5b3df5;
	--fts-ink: #17132b;
	--fts-paper: #ffffff;
	--fts-tint: #f1eeff;
	--fts-fg: #17132b;
	--fts-mut: #5d5876;
	--fts-bd: #17132b;
	--fts-sh: #17132b;
	--fts-sun: #ffd23f;
	--fts-ok: #0f7a3b; --fts-warn: #8f5200; --fts-bad: #b3202a;
	--fts-okbg: #dff5e7; --fts-warnbg: #ffefd2; --fts-badbg: #fde3e4;
	position: relative; width: 100%; max-width: 1180px; margin: 1.25em auto; padding: 12px;
	background: var(--fts-tint); color: var(--fts-fg);
	border: 2px solid var(--fts-bd); border-radius: 18px;
	font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Helvetica, Arial, sans-serif;
	text-align: left; direction: ltr; -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
.fts-theme-dark {
	--fts-paper: #1c1930; --fts-tint: #12101f; --fts-fg: #eeebff; --fts-mut: #a9a4c6; --fts-bd: #4a4380; --fts-sh: #000;
	--fts-ok: #5ad58a; --fts-warn: #f1b45b; --fts-bad: #ff7d83; --fts-okbg: #12311f; --fts-warnbg: #38290f; --fts-badbg: #3a191c;
}
@media (prefers-color-scheme: dark) {
	.fts-theme-auto {
		--fts-paper: #1c1930; --fts-tint: #12101f; --fts-fg: #eeebff; --fts-mut: #a9a4c6; --fts-bd: #4a4380; --fts-sh: #000;
		--fts-ok: #5ad58a; --fts-warn: #f1b45b; --fts-bad: #ff7d83; --fts-okbg: #12311f; --fts-warnbg: #38290f; --fts-badbg: #3a191c;
	}
}
.fts-app button, .fts-app input, .fts-app select, .fts-app textarea { font: inherit; color: inherit; margin: 0; }
.fts-app :focus-visible { outline: 3px solid var(--fts-accent); outline-offset: 2px; }
.fts-app [hidden] { display: none !important; }
.fts-app h3 { margin: 0; }

/* ---------- instant skeleton (printed by PHP, replaced by JS) ---------- */
.fts-skel { display: grid; gap: 12px; }
.fts-skel .fts-input { background: var(--fts-paper); }
.fts-skel-stage, .fts-skel-card { border-radius: 14px; background: linear-gradient(100deg, var(--fts-paper) 30%, var(--fts-tint) 50%, var(--fts-paper) 70%); background-size: 300% 100%; animation: fts-sh 1.2s linear infinite; border: 2px solid var(--fts-bd); }
.fts-skel-stage { height: 170px; }
.fts-skel-cards { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.fts-skel-card { height: 92px; }
.fts-skel-tabs { height: 46px; }
@keyframes fts-sh { to { background-position: -100% 0; } }

/* ---------- layout ---------- */
.fts-shell { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.fts-side { display: grid; gap: 12px; align-content: start; min-width: 0; }
.fts-main { min-width: 0; background: var(--fts-paper); border: 2px solid var(--fts-bd); border-radius: 16px; padding: 12px; }

/* ---------- inputs ---------- */
.fts-lbl { display: block; margin: 0 0 6px; font-weight: 700; font-size: 14px; }
.fts-input, .fts-field, .fts-select, .fts-search {
	width: 100%; min-height: 48px; padding: 10px 12px; font-size: 16px;
	background: var(--fts-paper); color: var(--fts-fg);
	border: 2px solid var(--fts-bd); border-radius: 12px;
}
.fts-input { display: block; resize: vertical; line-height: 1.5; font-size: 18px; }
.fts-input:focus, .fts-field:focus, .fts-select:focus, .fts-search:focus { border-color: var(--fts-accent); box-shadow: 3px 3px 0 var(--fts-accent); outline: none; }
.fts-rtl { font-family: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", "Noto Naskh Arabic", "Segoe UI", serif; line-height: 2.1; }
.fts-inrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.fts-count { margin-left: auto; color: var(--fts-mut); font-size: 13px; }
.fts-over { color: var(--fts-bad) !important; font-weight: 700; }

/* ---------- buttons ---------- */
.fts-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	min-height: 46px; padding: 0 16px; background: var(--fts-paper); color: var(--fts-fg);
	border: 2px solid var(--fts-bd); border-radius: 12px; cursor: pointer; font-weight: 700; line-height: 1.2;
	box-shadow: 3px 3px 0 var(--fts-sh); transition: transform .08s ease, box-shadow .08s ease;
	-webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.fts-btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--fts-sh); }
.fts-btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--fts-sh); }
.fts-btn.fts-sm { min-height: 38px; padding: 0 12px; font-size: 14px; box-shadow: 2px 2px 0 var(--fts-sh); }
.fts-btn.fts-primary { background: var(--fts-accent); color: #fff; }

/* ---------- stage (live preview) ---------- */
.fts-stage {
	position: relative; padding: 14px; color: #fff;
	background: radial-gradient(120% 140% at 100% 0%, var(--fts-accent) 0%, #1c1546 55%, #17132b 100%);
	border: 2px solid var(--fts-bd); border-radius: 18px; box-shadow: 5px 5px 0 var(--fts-sun);
}
.fts-stage-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fts-stage-name { font-size: 12.5px; font-weight: 700; letter-spacing: .02em; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .16); }
.fts-stage-out {
	min-height: 84px; margin: 10px 0 8px; padding: 6px 2px; display: flex; align-items: center; justify-content: center; text-align: center;
	font-family: system-ui, "Segoe UI Symbol", "Noto Sans Symbols", "Noto Sans Symbols 2", "Noto Sans Math", "Apple Symbols", "Noto Sans CJK SC", "Noto Naskh Arabic", sans-serif;
	font-size: clamp(26px, 7vw, 40px); line-height: 1.55; overflow-wrap: anywhere; word-break: break-word;
}
.fts-stage-out.fts-long { font-size: clamp(19px, 5vw, 26px); }
.fts-stage-out.fts-rtl { font-size: clamp(26px, 6vw, 36px); line-height: 2.1; }
.fts-stage .fts-b { background: rgba(255, 255, 255, .14); color: #fff; }
.fts-stage .fts-b.fts-ok { background: rgba(90, 213, 138, .22); color: #b9f7d0; }
.fts-stage .fts-b.fts-warn { background: rgba(241, 180, 91, .25); color: #ffe1ae; }
.fts-stage .fts-b.fts-bad { background: rgba(255, 125, 131, .28); color: #ffd0d3; }
.fts-stage .fts-badges { justify-content: center; }
.fts-stage-btns { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 8px; margin-top: 12px; }
.fts-stage .fts-btn { box-shadow: 3px 3px 0 rgba(0, 0, 0, .5); }
.fts-stage .fts-btn:not(.fts-primary) { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .7); }
.fts-stage .fts-btn.fts-primary { background: var(--fts-sun); color: #17132b; border-color: #17132b; }
.fts-ic-light { color: #fff; border-color: rgba(255, 255, 255, .6); }

/* ---------- mockups ---------- */
.fts-mockwrap { background: var(--fts-paper); border: 2px solid var(--fts-bd); border-radius: 16px; padding: 10px; }
.fts-seg { display: flex; gap: 4px; padding: 3px; background: var(--fts-tint); border-radius: 12px; border: 2px solid var(--fts-bd); }
.fts-seg button { flex: 1 1 0; min-height: 38px; padding: 0 4px; font-size: 13px; font-weight: 700; background: transparent; border: 0; border-radius: 9px; cursor: pointer; color: var(--fts-mut); }
.fts-seg button.fts-on { background: var(--fts-ink); color: #fff; }
.fts-theme-dark .fts-seg button.fts-on { background: var(--fts-accent); }
.fts-mockbox { margin-top: 10px; }
.fts-mock { padding: 12px; border-radius: 12px; border: 1px solid var(--fts-bd); background: var(--fts-tint); overflow: hidden; min-width: 0; overflow-wrap: anywhere; }
.fts-mk-label { margin-bottom: 8px; color: var(--fts-mut); font-size: 12px; }
.fts-mk-row { display: flex; gap: 10px; align-items: center; }
.fts-mk-stats { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--fts-mut); }
.fts-mk-name { font-weight: 700; font-size: 17px; line-height: 1.6; }
.fts-mk-text { font-size: 15px; line-height: 1.6; }
.fts-mk-sub { color: var(--fts-mut); font-size: 12px; font-weight: 400; }
.fts-av { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--fts-accent), #ffb347); }
.fts-av-sq { border-radius: 10px; }
.fts-ig .fts-mk-name, .fts-ig .fts-mk-text { margin-top: 6px; }
.fts-wa { background: #e8e1d6; color: #111b21; }
.fts-wa .fts-mk-label { color: #55606b; }
.fts-bubble { max-width: 92%; margin-left: auto; padding: 8px 10px 4px; background: #d9fdd3; color: #111b21; border-radius: 10px 0 10px 10px; }
.fts-time { text-align: right; font-size: 11px; color: #667781; }
.fts-gm { background: #151922; border-color: #2a3042; color: #f2f4f8; }
.fts-gm .fts-mk-label, .fts-gm .fts-mk-sub { color: #98a1b6; }
.fts-dc { background: #313338; border-color: #3f4147; color: #dbdee1; }
.fts-dc .fts-mk-label, .fts-dc .fts-mk-sub { color: #a3a6aa; }
.fts-dc .fts-mk-name { color: #f2f3f5; }
.fts-note { margin: 0; color: var(--fts-mut); font-size: 13px; line-height: 1.5; }

/* ---------- tabs & chips ---------- */
.fts-tabs { display: flex; gap: 6px; overflow-x: auto; margin: 0 0 12px; padding: 2px 2px 8px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.fts-tab {
	flex: 0 0 auto; min-height: 44px; padding: 0 16px; background: var(--fts-tint); color: var(--fts-fg);
	border: 2px solid var(--fts-bd); border-radius: 12px; cursor: pointer; font-weight: 700; white-space: nowrap; touch-action: manipulation;
}
.fts-tab.fts-active { background: var(--fts-sun); color: #17132b; box-shadow: 3px 3px 0 var(--fts-sh); }
.fts-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.fts-chip {
	flex: 0 0 auto; min-height: 38px; padding: 0 14px; background: var(--fts-paper); border: 2px solid var(--fts-bd); border-radius: 999px;
	cursor: pointer; font-size: 14px; font-weight: 600; white-space: nowrap; touch-action: manipulation;
}
.fts-chip.fts-active { background: var(--fts-ink); border-color: var(--fts-ink); color: #fff; }
.fts-theme-dark .fts-chip.fts-active { background: var(--fts-accent); border-color: var(--fts-accent); }
@media (prefers-color-scheme: dark) { .fts-theme-auto .fts-chip.fts-active { background: var(--fts-accent); border-color: var(--fts-accent); } .fts-theme-auto .fts-seg button.fts-on { background: var(--fts-accent); } }

.fts-bar { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 4px 0 8px; }
.fts-check { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; min-height: 40px; }
.fts-check input { width: 20px; height: 20px; accent-color: var(--fts-accent); flex: 0 0 auto; }
.fts-inline { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.fts-inline .fts-select { width: auto; }
.fts-help, .fts-legend { margin: 0 0 12px; color: var(--fts-mut); font-size: 13.5px; line-height: 1.55; }
.fts-h { margin: 22px 0 10px !important; font-size: 17px; line-height: 1.3; }
.fts-empty { margin: 16px 0; color: var(--fts-mut); text-align: center; }
.fts-legend strong { color: var(--fts-fg); }

/* ---------- cards ---------- */
.fts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 10px; }
.fts-fullrow { grid-column: 1 / -1; }
.fts-card { display: flex; flex-direction: column; gap: 6px; padding: 10px; min-width: 0; background: var(--fts-tint); border: 2px solid var(--fts-bd); border-radius: 14px; content-visibility: auto; contain-intrinsic-size: auto 120px; }
.fts-card.fts-sel { background: var(--fts-paper); box-shadow: 4px 4px 0 var(--fts-accent); border-color: var(--fts-accent); }
.fts-card.fts-boxed .fts-out { opacity: .55; }
.fts-out {
	min-height: 2.6em; padding: 4px; cursor: pointer; border-radius: 8px;
	font-family: system-ui, "Segoe UI", "Segoe UI Symbol", "Noto Sans", "Noto Sans Symbols", "Noto Sans Symbols 2", "Noto Sans Math", "Apple Symbols", "Noto Sans CJK SC", sans-serif;
	font-size: 20px; line-height: 1.8; overflow-wrap: anywhere; word-break: break-word; unicode-bidi: plaintext; -webkit-tap-highlight-color: transparent;
}
.fts-out:hover { background: color-mix(in srgb, var(--fts-accent) 12%, transparent); }
.fts-out.fts-rtl { font-size: 22px; line-height: 2.2; }
.fts-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12.5px; color: var(--fts-mut); }
.fts-meta .fts-name { font-weight: 700; flex: 1 1 auto; min-width: 0; }
.fts-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.fts-b { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11.5px; line-height: 1.6; font-weight: 700; background: var(--fts-paper); }
.fts-b.fts-ok { color: var(--fts-ok); background: var(--fts-okbg); }
.fts-b.fts-warn { color: var(--fts-warn); background: var(--fts-warnbg); }
.fts-b.fts-bad { color: var(--fts-bad); background: var(--fts-badbg); }
.fts-ic { width: 40px; height: 34px; flex: 0 0 auto; background: transparent; border: 2px solid var(--fts-bd); border-radius: 10px; cursor: pointer; font-size: 18px; line-height: 1; color: var(--fts-mut); touch-action: manipulation; }
.fts-ic.fts-on { color: #c98400; border-color: #e8a200; background: var(--fts-sun); }
.fts-ic-light.fts-ic { height: 32px; }

/* ---------- forms & tools ---------- */
.fts-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-bottom: 12px; }
.fts-form label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 700; }
.fts-form label.fts-check { flex-direction: row; font-weight: 400; }
.fts-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; }
.fts-row .fts-select { width: auto; flex: 1 1 150px; }
.fts-row .fts-btn { flex: 1 1 auto; }
.fts-range { width: 100%; accent-color: var(--fts-accent); min-height: 32px; }
.fts-syms { display: flex; flex-wrap: wrap; gap: 6px; }
.fts-sym { width: 46px; height: 46px; font-size: 22px; background: var(--fts-tint); border: 2px solid var(--fts-bd); border-radius: 10px; cursor: pointer; touch-action: manipulation; }
.fts-meter { height: 14px; background: var(--fts-tint); border: 2px solid var(--fts-bd); border-radius: 999px; overflow: hidden; }
.fts-meter-bar { height: 100%; width: 0; background: var(--fts-accent); transition: width .15s ease; }
.fts-meter-bar.fts-over { background: var(--fts-bad); }

.fts-toast {
	position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
	max-width: calc(100vw - 32px); padding: 10px 18px; background: #17132b; color: #fff; border: 2px solid var(--fts-sun); border-radius: 999px;
	font-size: 15px; font-weight: 700; box-shadow: 0 6px 24px rgba(0, 0, 0, .3); transition: opacity .15s ease, transform .15s ease; z-index: 100001;
}
.fts-toast.fts-show { opacity: 1; transform: translate(-50%, 0); }
.fts-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- responsive ---------- */
/* very small phones */
@media (max-width: 380px) {
	.fts-app { padding: 8px; border-radius: 14px; }
	.fts-main { padding: 8px; }
	.fts-stage { padding: 10px; }
	.fts-stage-btns { grid-template-columns: 1fr 1fr; }
	.fts-stage-btns .fts-primary { grid-column: 1 / -1; }
	.fts-btn { padding: 0 12px; }
	.fts-tab { padding: 0 12px; }
	.fts-seg button { font-size: 12px; }
}
/* large phones and small tablets */
@media (min-width: 600px) {
	.fts-app { padding: 18px; }
	.fts-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fts-bar { grid-template-columns: 1fr auto; align-items: center; }
	.fts-search { max-width: 340px; }
}
/* tablets: stage and mockups sit side by side above the list */
@media (min-width: 700px) and (max-width: 979px) {
	.fts-side { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
	.fts-inbox, .fts-note { grid-column: 1 / -1; }
}
/* laptops and desktops */
@media (min-width: 980px) {
	.fts-shell { grid-template-columns: 380px minmax(0, 1fr); align-items: start; gap: 18px; }
	.fts-main { padding: 16px; }
	.fts-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* keep the preview in view while scrolling, but only if the screen is tall enough to hold it */
@media (min-width: 980px) and (min-height: 820px) {
	.fts-side { position: sticky; top: 16px; }
}
@media (min-width: 1500px) {
	.fts-app { max-width: 1320px; }
	.fts-shell { grid-template-columns: 420px minmax(0, 1fr); }
}
/* landscape phones: short screens */
@media (max-height: 480px) and (orientation: landscape) {
	.fts-stage-out { min-height: 56px; font-size: 24px; }
	.fts-toast { bottom: 8px; }
}
/* notches / safe areas */
@supports (padding: max(0px)) {
	.fts-app { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
}
@media (hover: none) {
	.fts-btn:hover { transform: none; box-shadow: 3px 3px 0 var(--fts-sh); }
	.fts-out:hover { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
	.fts-app *, .fts-toast, .fts-skel-stage, .fts-skel-card { transition: none !important; animation: none !important; }
}