/**
 * TF Ads Platform — app.css
 *
 * One stylesheet for all three canvas views (landing / auth / app).
 * No theme CSS is loaded on these pages, so everything lives here.
 *
 * Palette: deep pine green + warm paper. Deliberately close to the colour
 * language of WhatsApp (this is a click-to-WhatsApp product) without being
 * a clone of it. Dark mode follows the OS preference.
 */

:root {
	--bg:        #f6f5f0;
	--bg-raise:  #ffffff;
	--ink:       #17251f;
	--ink-soft:  #55655d;
	--line:      #dfe3dc;
	--brand:     #0e6b53;
	--brand-ink: #ffffff;
	--brand-soft:#e3f0ea;
	--accent:    #c8f04d;
	--danger:    #b3403a;
	--ok:        #1c7d4d;
	--radius:    14px;
	--radius-sm: 9px;
	--shadow:    0 1px 2px rgba(23, 37, 31, .06), 0 8px 28px rgba(23, 37, 31, .07);
	--font:      "Avenir Next", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg:        #101815;
		--bg-raise:  #18231e;
		--ink:       #e8ede9;
		--ink-soft:  #9fb0a7;
		--line:      #26332c;
		--brand:     #2fa07e;
		--brand-ink: #08130e;
		--brand-soft:#1a2f27;
		--accent:    #c8f04d;
		--shadow:    0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px rgba(0, 0, 0, .35);
	}
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font);
	font-size: 16px;
	line-height: 1.55;
}

h1, h2, h3 { line-height: 1.15; letter-spacing: -0.015em; margin: 0 0 .5em; }
h1 { font-size: clamp(1.7rem, 4.5vw, 2.6rem); }
h2 { font-size: clamp(1.25rem, 3vw, 1.6rem); margin-top: 1.6em; }
h3 { font-size: 1.05rem; }
p  { margin: 0 0 1em; }
a  { color: var(--brand); }
img { max-width: 100%; height: auto; }
pre {
	background: var(--brand-soft);
	border-radius: var(--radius-sm);
	padding: .8em 1em;
	white-space: pre-wrap;
	word-break: break-word;
	font-size: .92em;
}

:focus-visible {
	outline: 3px solid var(--brand);
	outline-offset: 2px;
	border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Layout ------------------------------------------------------------------ */

.tfap-wrap   { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.tfap-narrow { max-width: 520px;  margin: 0 auto; padding: 0 20px; }

.tfap-grid3, .tfap-grid4 { display: grid; gap: 18px; margin: 1.2em 0; }
.tfap-grid3 { grid-template-columns: repeat(3, 1fr); }
.tfap-grid4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 860px) {
	.tfap-grid4 { grid-template-columns: repeat(2, 1fr); }
	.tfap-grid3 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	.tfap-grid4 { grid-template-columns: 1fr; }
}

/* Nav --------------------------------------------------------------------- */

.tfap-nav {
	position: sticky;
	top: 0;
	z-index: 20;
	background: var(--bg-raise);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--line);
}

.tfap-nav-in {
	max-width: 1080px;
	margin: 0 auto;
	padding: 12px 20px;
	display: flex;
	align-items: center;
	gap: 20px;
}

.tfap-nav-in nav { margin-left: auto; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.tfap-nav-in nav a { text-decoration: none; color: var(--ink); font-weight: 500; }
.tfap-nav-in nav a:hover { color: var(--brand); }

.tfap-logo {
	font-weight: 800;
	font-size: 1.15rem;
	letter-spacing: -0.02em;
	color: var(--ink);
	text-decoration: none;
}
.tfap-logo::before {
	content: "";
	display: inline-block;
	width: .68em; height: .68em;
	margin-right: .45em;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, var(--accent), var(--brand) 70%);
}

/* Buttons ----------------------------------------------------------------- */

.tfap-btn {
	display: inline-block;
	background: var(--brand);
	color: var(--brand-ink);
	border: 1px solid var(--brand);
	border-radius: 999px;
	padding: .55em 1.3em;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	transition: transform .12s ease, filter .12s ease;
}
.tfap-btn:hover  { filter: brightness(1.08); }
.tfap-btn:active { transform: translateY(1px); }
.tfap-btn[disabled] { opacity: .55; cursor: default; }

.tfap-btn-lg    { padding: .8em 1.8em; font-size: 1.05rem; }
.tfap-btn-ghost { background: transparent; color: var(--brand); }

/* Landing ----------------------------------------------------------------- */

.tfap-hero { padding: 72px 0 30px; text-align: center; }

.tfap-eyebrow {
	display: inline-block;
	background: var(--brand-soft);
	color: var(--brand);
	border-radius: 999px;
	padding: .25em 1em;
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	margin-bottom: 1.2em;
}

.tfap-sub, .tfap-sub-center {
	color: var(--ink-soft);
	font-size: 1.1rem;
	max-width: 620px;
}
.tfap-sub-center { margin: 0 auto 1.6em; text-align: center; }

.tfap-steps { list-style: none; counter-reset: s; padding: 0; }
.tfap-step  { counter-increment: s; }
.tfap-step h3::before {
	content: counter(s);
	display: inline-grid;
	place-items: center;
	width: 1.7em; height: 1.7em;
	margin-right: .5em;
	border-radius: 50%;
	background: var(--brand);
	color: var(--brand-ink);
	font-size: .85em;
}

.tfap-card {
	background: var(--bg-raise);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 20px 22px;
}

.tfap-price-card { position: relative; text-align: center; padding-top: 28px; }
.tfap-price-card.is-featured { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand), var(--shadow); }

.tfap-badge {
	position: absolute;
	top: -12px; left: 50%;
	transform: translateX(-50%);
	background: var(--accent);
	color: #17251f;
	border-radius: 999px;
	padding: .15em .9em;
	font-size: .78rem;
	font-weight: 700;
	white-space: nowrap;
}

.tfap-price { font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; margin: .2em 0 0; }
.tfap-price-days { color: var(--ink-soft); margin-bottom: 1em; }

.tfap-quote { font-style: italic; color: var(--ink-soft); }
.tfap-quote footer { font-style: normal; font-weight: 600; color: var(--ink); margin-top: .6em; }

.tfap-faq details { border-bottom: 1px solid var(--line); padding: .8em 0; }
.tfap-faq summary { cursor: pointer; font-weight: 600; }

.tfap-footer {
	margin-top: 70px;
	border-top: 1px solid var(--line);
	padding: 26px 0 60px;
	color: var(--ink-soft);
	font-size: .9rem;
}

.tfap-wa-fab {
	position: fixed;
	right: 22px; bottom: 22px;
	z-index: 30;
	display: grid;
	place-items: center;
	width: 56px; height: 56px;
	border-radius: 50%;
	background: #25d366;
	color: #fff;
	box-shadow: var(--shadow);
}
.tfap-wa-fab svg { width: 30px; height: 30px; }

/* Forms ------------------------------------------------------------------- */

label { display: block; font-weight: 600; font-size: .92rem; margin: 0 0 14px; }

input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="number"], textarea, select {
	display: block;
	width: 100%;
	margin-top: .35em;
	background: var(--bg-raise);
	color: var(--ink);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	padding: .6em .8em;
	font: inherit;
}
input:focus, textarea:focus, select:focus { border-color: var(--brand); }

input[type="radio"], input[type="checkbox"] { accent-color: var(--brand); }
fieldset { border: 1px solid var(--line); border-radius: var(--radius-sm); margin: 0 0 14px; }
fieldset label { font-weight: 500; }
legend { font-weight: 700; padding: 0 .4em; }

.tfap-otp-row { display: flex; gap: 8px; align-items: stretch; margin-top: .35em; }
.tfap-otp-row input { margin-top: 0; flex: 1; }
.tfap-otp-row .tfap-btn { white-space: nowrap; }

.tfap-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px; height: 1px;
	opacity: 0;
	pointer-events: none;
}

.tfap-msg { min-height: 1.4em; font-size: .92rem; color: var(--ink-soft); }
.tfap-msg.is-err { color: var(--danger); }
.tfap-msg.is-ok  { color: var(--ok); }

.tfap-fineprint { font-size: .84rem; color: var(--ink-soft); }

/* Auth -------------------------------------------------------------------- */

.tfap-auth { padding: 56px 0 80px; }

.tfap-auth-card {
	background: var(--bg-raise);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 26px 26px 30px;
}

.tfap-tabs { display: flex; gap: 6px; margin-bottom: 20px; }
.tfap-tabs button {
	flex: 1;
	font: inherit;
	font-weight: 600;
	border: 1px solid var(--line);
	background: transparent;
	color: var(--ink-soft);
	border-radius: 999px;
	padding: .5em 0;
	cursor: pointer;
}
.tfap-tabs button.is-active {
	background: var(--brand);
	border-color: var(--brand);
	color: var(--brand-ink);
}

/* App --------------------------------------------------------------------- */

.tfap-app {
	max-width: 1080px;
	margin: 0 auto;
	padding: 26px 20px 80px;
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 30px;
	align-items: start;
}

@media (max-width: 760px) {
	.tfap-app { grid-template-columns: 1fr; }
	.tfap-side { display: flex; overflow-x: auto; gap: 6px; position: static; }
	.tfap-side button { white-space: nowrap; }
}

.tfap-side { position: sticky; top: 76px; display: grid; gap: 6px; }
.tfap-side button {
	font: inherit;
	font-weight: 600;
	text-align: left;
	background: transparent;
	color: var(--ink-soft);
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	padding: .55em .9em;
	cursor: pointer;
}
.tfap-side button:hover { color: var(--ink); background: var(--bg-raise); }
.tfap-side button.is-active {
	background: var(--brand-soft);
	color: var(--brand);
	border-color: rgba(14, 107, 83, .30);
}

.tfap-main { min-width: 0; }

.tfap-cred {
	background: var(--brand-soft);
	color: var(--brand);
	font-weight: 700;
	border-radius: 999px;
	padding: .3em .95em;
	font-size: .92rem;
}

.tfap-stat { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; margin: 0; }
.tfap-stat-label { color: var(--ink-soft); font-size: .85rem; margin: 0 0 .2em; }

.tfap-empty { color: var(--ink-soft); font-style: italic; }

/* Wizard steps */

.tfap-wsteps {
	list-style: none;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	counter-reset: w;
	margin: 0 0 22px;
}
.tfap-wsteps li {
	counter-increment: w;
	font-size: .84rem;
	font-weight: 600;
	color: var(--ink-soft);
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: .3em .9em .3em .5em;
}
.tfap-wsteps li::before {
	content: counter(w);
	display: inline-grid;
	place-items: center;
	width: 1.6em; height: 1.6em;
	margin-right: .45em;
	border-radius: 50%;
	background: var(--line);
	color: var(--ink);
	font-size: .82em;
}
.tfap-wsteps li.is-on { color: var(--brand); border-color: var(--brand); }
.tfap-wsteps li.is-on::before { background: var(--brand); color: var(--brand-ink); }

.tfap-gateways { display: flex; gap: 20px; flex-wrap: wrap; margin: 0 0 16px; }
.tfap-gateways label { font-weight: 500; margin: 0; }

/* Selectable cards inside the wizard (packages, variants) */

.tfap-pick { cursor: pointer; transition: border-color .12s ease, box-shadow .12s ease; }
.tfap-pick:hover { border-color: var(--brand); }
.tfap-pick.is-picked { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand), var(--shadow); }

/* Simple tables (ledger / payments / leads) */

.tfap-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tfap-table th, .tfap-table td {
	text-align: left;
	padding: .55em .7em;
	border-bottom: 1px solid var(--line);
	vertical-align: top;
}
.tfap-table th { color: var(--ink-soft); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }

.tfap-pill {
	display: inline-block;
	border-radius: 999px;
	padding: .1em .7em;
	font-size: .78rem;
	font-weight: 700;
	background: var(--brand-soft);
	color: var(--brand);
	white-space: nowrap;
}
.tfap-pill.is-warn { background: rgba(179, 64, 58, .13); color: var(--danger); }
.tfap-pill.is-dim  { background: var(--line); color: var(--ink-soft); }

/* v0.1.3 UI polish -------------------------------------------------------- */

/* Facebook-style ad preview card (wizard variants + checkout summary). */

.tfap-adprev {
	background: var(--bg-raise);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow);
	font-size: .92rem;
}
.tfap-adprev-head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px 6px;
}
.tfap-adprev-avatar {
	width: 34px; height: 34px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, var(--accent), var(--brand) 70%);
	flex: none;
}
.tfap-adprev-page { font-weight: 700; line-height: 1.1; }
.tfap-adprev-sponsored { color: var(--ink-soft); font-size: .76rem; }
.tfap-adprev-body { padding: 2px 14px 10px; white-space: pre-line; }
.tfap-adprev-media {
	background: var(--brand-soft);
	color: var(--ink-soft);
	min-height: 110px;
	display: grid;
	place-items: center;
	padding: 14px;
	text-align: center;
	font-size: .84rem;
	font-style: italic;
}
.tfap-adprev-media img { display: block; width: 100%; height: auto; }
.tfap-adprev-cta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border-top: 1px solid var(--line);
}
.tfap-adprev-cta strong { font-size: .95rem; }
.tfap-adprev-btn {
	flex: none;
	background: #25d366;
	color: #fff;
	border-radius: 8px;
	padding: .45em 1em;
	font-weight: 700;
	font-size: .84rem;
	white-space: nowrap;
}

/* WhatsApp chat preview (welcome bubble in, prefill bubble out). */

.tfap-waprev {
	background: #e5ddd5;
	border-radius: var(--radius);
	padding: 14px;
	display: grid;
	gap: 8px;
	margin: 14px 0;
}
@media (prefers-color-scheme: dark) {
	.tfap-waprev { background: #0b141a; }
}
.tfap-waprev-note { font-size: .76rem; color: var(--ink-soft); text-align: center; }
.tfap-wabubble {
	max-width: 85%;
	padding: .5em .8em;
	border-radius: 10px;
	font-size: .9rem;
	line-height: 1.4;
	box-shadow: 0 1px 1px rgba(0,0,0,.12);
	white-space: pre-line;
	word-break: break-word;
}
.tfap-wabubble.is-in  { background: #ffffff; color: #111; justify-self: start; border-top-left-radius: 2px; }
.tfap-wabubble.is-out { background: #d9fdd3; color: #111; justify-self: end;   border-top-right-radius: 2px; }

/* Wizard step pills become buttons for back-navigation. */
.tfap-wsteps li.is-done { cursor: pointer; }
.tfap-wsteps li.is-done:hover { border-color: var(--brand); color: var(--brand); }

/* Campaign card progress bar. */
.tfap-progress {
	height: 8px;
	border-radius: 999px;
	background: var(--line);
	overflow: hidden;
	margin: 8px 0 4px;
}
.tfap-progress > span {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--brand), var(--accent));
	border-radius: inherit;
	transition: width .4s ease;
}

/* Character counters + inline spinner. */
.tfap-count { font-weight: 500; font-size: .76rem; color: var(--ink-soft); float: right; }
.tfap-count.is-warn { color: var(--danger); }

.tfap-spin {
	display: inline-block;
	width: 1em; height: 1em;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	vertical-align: -0.15em;
	animation: tfap-rot .7s linear infinite;
}
@keyframes tfap-rot { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tfap-spin { animation: none; opacity: .5; } }

/* Tables scroll sideways on small screens instead of breaking the layout. */
#tfap-ledger, #tfap-payments { overflow-x: auto; }

/* ============ CANDIDATE INBOX (v0.2.5 — WhatsApp-style two-pane, copied
   from tf-wa-dashboard's inbox look, read-only customer edition) ============ */
.tfap-inbox {
	display: grid; grid-template-columns: 320px 1fr; min-height: 480px; height: 62vh;
	border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--card);
}
.tfap-inbox-list { overflow-y: auto; border-right: 1px solid var(--line); min-width: 0; }
.tfap-lead-item {
	display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center;
	width: 100%; text-align: left; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--line);
	background: transparent; cursor: pointer; font: inherit; color: inherit;
}
.tfap-lead-item:hover { background: rgba(0,0,0,.03); }
.tfap-lead-item.active { background: rgba(0,0,0,.05); box-shadow: inset 3px 0 0 var(--brand); }
.tfap-ava {
	width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
	background: rgba(14, 107, 83, .12);
	border: 1px solid rgba(14, 107, 83, .28);
	color: var(--brand); font-weight: 700;
}
.tfap-lead-main { min-width: 0; }
.tfap-lead-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tfap-lead-prev { color: var(--ink-soft); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tfap-lead-prev .you { color: var(--brand); font-weight: 600; }
.tfap-lead-time { color: var(--ink-soft); font-size: 11px; align-self: start; margin-top: 2px; white-space: nowrap; }

.tfap-inbox-thread { display: flex; flex-direction: column; min-width: 0; min-height: 0;
	background-color: #EFEAE2;   /* WhatsApp Web chat canvas */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23d6cfc2' stroke-width='1.4' opacity='.4'%3E%3Ccircle cx='24' cy='22' r='6'/%3E%3Cpath d='M84 18l10 10M94 18l-10 10'/%3E%3Cpath d='M18 86c6-8 14-8 20 0'/%3E%3Crect x='78' y='78' width='14' height='14' rx='3'/%3E%3Cpath d='M52 52l6 3-6 3z'/%3E%3C/g%3E%3C/svg%3E");
}
.tfap-thread-empty { flex: 1; display: grid; place-items: center; color: #667781; text-align: center; padding: 24px; }
.tfap-thread-head {
	display: flex; align-items: center; gap: 10px; padding: 10px 14px; flex-wrap: wrap;
	background: var(--card); border-bottom: 1px solid var(--line);
}
.tfap-thread-head .tfap-ava { width: 34px; height: 34px; }
.tfap-thread-title { min-width: 0; flex: 1; }
.tfap-thread-title .name { font-weight: 800; font-size: 14px; }
.tfap-thread-title .sub { color: var(--ink-soft); font-size: 11px; font-family: ui-monospace, monospace; }
.tfap-thread-head .tfap-btn { padding: 6px 12px; font-size: 12px; }

.tfap-msgs { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 6px; }
.tfap-bubble {
	max-width: 68%; width: fit-content; padding: 5px 9px 4px; border-radius: 7.5px; position: relative;
	font-size: 13.5px; line-height: 17px; color: #111B21;
	word-wrap: break-word; overflow-wrap: anywhere;
	box-shadow: 0 1px 0.5px rgba(11,20,26,.13);
}
.tfap-bubble .txt { white-space: pre-wrap; }
.tfap-bubble.in  { align-self: flex-start; background: #FFFFFF; border-top-left-radius: 0; }
.tfap-bubble.out { align-self: flex-end;  background: #D9FDD3; border-top-right-radius: 0; }
.tfap-bubble.out.ai::before { content: "🤖"; position: absolute; top: -7px; right: -6px; font-size: 11px; opacity: .9; }
.tfap-bubble .meta {
	display: flex; gap: 4px; align-items: center; justify-content: flex-end;
	margin-top: 1px; margin-left: 14px; font-size: 10.5px; line-height: 13px; color: #667781; white-space: nowrap;
}
.tfap-bubble .meta .who { color: #8E44AD; font-weight: 700; }
.tfap-daychip { align-self: center; background: rgba(255,255,255,.92); color: #54656F; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 8px; box-shadow: 0 1px 0.5px rgba(11,20,26,.13); margin: 6px 0 2px; }
.tfap-thread-lock { flex: 1; display: grid; place-items: center; text-align: center; color: #667781; padding: 24px; }

.tfap-inbox-back { display: none; }
@media (max-width: 860px) {
	.tfap-inbox { grid-template-columns: 1fr; height: 70vh; }
	.tfap-inbox-thread { display: none; }
	.tfap-inbox.thread-open .tfap-inbox-list { display: none; }
	.tfap-inbox.thread-open .tfap-inbox-thread { display: flex; }
	.tfap-inbox-back { display: inline-block; }
}
@media (prefers-color-scheme: dark) {
	.tfap-lead-item:hover { background: rgba(255,255,255,.04); }
	.tfap-lead-item.active { background: rgba(255,255,255,.07); }
	.tfap-inbox-thread { background-color: #0B141A; background-image: none; }
	.tfap-bubble.in  { background: #202C33; color: #E9EDEF; }
	.tfap-bubble.out { background: #005C4B; color: #E9EDEF; }
	.tfap-bubble .meta { color: #8696A0; }
	.tfap-daychip { background: #182229; color: #8696A0; }
	.tfap-thread-empty, .tfap-thread-lock { color: #8696A0; }
}

/* ==========================================================================
   v0.2.6 REDESIGN LAYER
   Same class names, new visual system. Later rules override the base above.
   Direction: "recruitment desk on WhatsApp" — Bricolage Grotesque display
   over Inter body, pine-green brand, lime accent reserved for the logo dot
   and focus ring, and ONE signature element: the credit balance rendered as
   an outgoing WhatsApp bubble (it's literally money you can spend on chats).
   ========================================================================== */

:root {
	--font:         "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
	--font-display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
	--bg:        #f2f5f2;
	--panel:     #ffffff;
	--radius:    16px;
	--shadow:    0 1px 2px rgba(23, 37, 31, .05), 0 10px 32px rgba(23, 37, 31, .08);
	--wa-bubble: #d9fdd3;
	--wa-ink:    #0b3d2e;
}
@media (prefers-color-scheme: dark) {
	:root {
		--bg:        #0e1512;
		--panel:     #17211c;
		--wa-bubble: #005c4b;
		--wa-ink:    #e9edef;
	}
}

body { font-family: var(--font); }
h1, h2, h3, .tfap-logo, .tfap-price, .tfap-stat {
	font-family: var(--font-display);
	letter-spacing: -0.01em;
}
h1 { font-weight: 800; }
h2 { font-weight: 700; }

/* --- Nav: solid app bar, logo never wraps ------------------------------- */
.tfap-nav {
	width: 100%;
	background: var(--panel);
	backdrop-filter: none;
	border-bottom: 1px solid var(--line);
}
.tfap-nav-in { width: 100%; max-width: 1160px; padding: 0 20px; min-height: 60px; }
.tfap-logo { white-space: nowrap; font-size: 1.2rem; display: inline-flex; align-items: center; }
.tfap-logo span { color: var(--brand); margin-left: .28em; }
.tfap-logo::before { flex: none; }
.tfap-nav-in nav { flex-wrap: nowrap; }
.tfap-nav-in nav a { font-size: .95rem; }

/* Signature: credits as an outgoing WhatsApp bubble. */
.tfap-cred {
	position: relative;
	background: var(--wa-bubble);
	color: var(--wa-ink);
	border-radius: 10px 10px 2px 10px;
	padding: .34em 1em;
	font-weight: 800;
	font-size: .92rem;
	box-shadow: 0 1px 0.5px rgba(11, 20, 26, .13);
	white-space: nowrap;
}
.tfap-cred::after {
	content: ""; position: absolute; right: -5px; bottom: 0;
	border: 5px solid transparent; border-bottom-color: var(--wa-bubble); border-right-width: 0;
}

/* --- App shell: sidebar card + main panel ------------------------------- */
.tfap-app {
	max-width: 1160px;
	grid-template-columns: 224px minmax(0, 1fr);
	gap: 22px;
	padding-top: 22px;
}
.tfap-side {
	top: 82px;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 10px;
	gap: 2px;
}
.tfap-side button {
	display: flex; align-items: center; gap: 10px;
	font-weight: 600; font-size: .95rem;
	padding: .62em .8em;
	border-radius: 10px;
}
.tfap-side button::before { font-size: 1.05rem; line-height: 1; width: 1.3em; text-align: center; }
.tfap-side button[data-view="home"]::before     { content: "📊"; }
.tfap-side button[data-view="leads"]::before    { content: "💬"; }
.tfap-side button[data-view="wizard"]::before   { content: "✨"; }
.tfap-side button[data-view="billing"]::before  { content: "🧾"; }
.tfap-side button[data-view="settings"]::before { content: "⚙️"; }
.tfap-side button.is-active {
	background: var(--brand);
	color: var(--brand-ink);
	border-color: var(--brand);
}
.tfap-side button.is-active::before { filter: grayscale(1) brightness(4); }

.tfap-main {
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 26px 28px 34px;
}
.tfap-main > .tfap-msg:empty { display: none; }
.tfap-main h1 { font-size: clamp(1.45rem, 3vw, 1.9rem); margin-bottom: .7em; }

/* Cards inside the panel sit on the page tint so they read as layers. */
.tfap-main .tfap-card { background: var(--bg); box-shadow: none; }
.tfap-main .tfap-adprev, .tfap-main .tfap-price-card { background: var(--bg-raise); }
.tfap-inbox { background: var(--panel); }

@media (max-width: 760px) {
	.tfap-app { grid-template-columns: 1fr; }
	.tfap-side { position: static; display: flex; overflow-x: auto; padding: 6px; }
	.tfap-side button { flex: none; }
	.tfap-main { padding: 18px 16px 26px; }
}

/* --- Wizard steps: quiet chips, filled current step ----------------------- */
.tfap-wsteps { gap: 8px; }
.tfap-wsteps li { background: var(--bg); border-color: transparent; }
.tfap-wsteps li.is-on {
	background: var(--brand-soft);
	border-color: rgba(14, 107, 83, .35);
	font-weight: 700;
}

/* --- Focus ring uses the accent (lime) so it's visible on green ---------- */
:focus-visible { outline: 3px solid var(--accent); }

/* --- Stat cards ----------------------------------------------------------- */
#tfap-stat-cards .tfap-card { border-top: 3px solid var(--brand); }
.tfap-stat { font-size: 2rem; }

/* Nav stays on one line on desktop, wraps gracefully on small screens. */
@media (max-width: 700px) {
	.tfap-nav-in { flex-wrap: wrap; padding: 8px 14px; gap: 10px 14px; }
	.tfap-nav-in nav { flex-wrap: wrap; gap: 10px 14px; }
}

/* ==========================================================================
   v0.2.7 PROFESSIONAL POLISH LAYER
   ========================================================================== */

/* Nav: quiet elevation so the bar reads as chrome, not content. */
.tfap-nav { box-shadow: 0 1px 0 rgba(23, 37, 31, .04); }
.tfap-nav-in nav { gap: 14px; }
.tfap-nav-in nav a { color: var(--ink-soft); font-weight: 600; }
.tfap-nav-in nav a:hover { color: var(--brand); }

/* App frame: a touch wider, calmer gap. */
.tfap-app { max-width: 1220px; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; }

/* Sidebar: items never wrap; section feels like product navigation. */
.tfap-side { padding: 8px; }
.tfap-side button {
	white-space: nowrap;
	font-size: .93rem;
	padding: .68em .85em;
	color: var(--ink);
	font-weight: 600;
}
.tfap-side button:hover { background: var(--bg); color: var(--ink); }
.tfap-side button.is-active { box-shadow: 0 6px 16px rgba(14, 107, 83, .28); }
.tfap-side button.is-active::before { filter: none; }

/* Main panel: generous, consistent rhythm. */
.tfap-main { padding: 30px 34px 40px; }
.tfap-main h1 { margin: 0 0 1em; }
.tfap-main h2 {
	font-size: 1.02rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--ink-soft);
	margin: 2.2em 0 .9em;
	font-family: var(--font);
	font-weight: 700;
}

/* Stat cards: credit balance is the hero (deep pine), the rest stay quiet. */
#tfap-stat-cards { gap: 16px; }
#tfap-stat-cards .tfap-card {
	background: var(--bg-raise);
	border: 1px solid var(--line);
	border-top: 1px solid var(--line);
	border-radius: 14px;
	box-shadow: none;
	padding: 18px 20px 16px;
}
#tfap-stat-cards .tfap-card:first-child {
	background: linear-gradient(145deg, #0e6b53, #0a5643 62%, #094c3b);
	border-color: #0a5643;
}
#tfap-stat-cards .tfap-card:first-child .tfap-stat-label { color: rgba(255, 255, 255, .75); }
#tfap-stat-cards .tfap-card:first-child .tfap-stat { color: #ffffff; }
.tfap-stat-label {
	font-size: .74rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	margin-bottom: .45em;
}
.tfap-stat { font-size: 1.9rem; line-height: 1.1; }

/* Tables: airy rows, hover, numbers legible. */
.tfap-table th, .tfap-table td { padding: .75em .8em; }
.tfap-table tbody tr:hover { background: var(--bg); }
.tfap-table td { font-variant-numeric: tabular-nums; }

/* Status banner: only visible when it has content; softer chrome. */
.tfap-msg { border-radius: 10px; }
.tfap-msg.is-err, .tfap-msg:not(:empty) { padding: .7em 1em; }
.tfap-msg.is-err { background: rgba(179, 64, 58, .09); }
.tfap-msg.is-ok  { background: rgba(28, 125, 77, .10); }

/* Inputs: consistent modern fields everywhere (auth, wizard, settings). */
input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
input[type="number"], select, textarea {
	width: 100%;
	font: inherit;
	color: var(--ink);
	background: var(--bg-raise);
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: .6em .8em;
	transition: border-color .12s ease, box-shadow .12s ease;
}
input:focus, select:focus, textarea:focus {
	outline: none;
	border-color: var(--brand);
	box-shadow: 0 0 0 3px rgba(14, 107, 83, .15);
}
label { display: block; font-weight: 600; font-size: .92rem; margin: 0 0 14px; }
label > input, label > select, label > textarea, label > .tfap-otp-row { margin-top: 6px; }

/* Empty states read as invitations, not apologies. */
.tfap-empty { font-style: normal; background: var(--bg); border: 1px dashed var(--line); border-radius: 12px; padding: 18px; }

@media (prefers-color-scheme: dark) {
	#tfap-stat-cards .tfap-card:first-child { background: linear-gradient(145deg, #17614d, #114c3c 62%, #0e4234); border-color: #114c3c; }
	.tfap-side button.is-active { box-shadow: 0 6px 16px rgba(0, 0, 0, .45); }
}

/* Inbox list: name over preview (spans must stack), time stays top-right. */
.tfap-lead-name, .tfap-lead-prev { display: block; }
.tfap-lead-item { align-items: start; }
.tfap-lead-item .tfap-ava { align-self: center; }

/* ==========================================================================
   v0.2.8 FIXES (found by reproducing the live site in a real browser)
   ========================================================================== */

/* The hidden attribute must always win — 0.2.7's `label { display:block }`
   was overriding the browser's [hidden] handling, exposing the OTP field
   and other stashed elements. */
[hidden] { display: none !important; }

/* Auth page: the card was never width-constrained; centre it properly. */
.tfap-auth { max-width: 560px; margin: 0 auto; padding: 56px 20px 80px; }

/* Belt & braces: the app layout only ever applies to the MAIN element, so
   no future body class can recreate the body-as-grid collision. */
body.tfap { display: block; max-width: none; padding: 0; }

/* ==========================================================================
   v0.3.0 — STAFF STRIP ("view as customer") + all-customer chat browser
   ==========================================================================
   Rendered for tfap_manage only. It replaces the sticky nav as the pinned
   element on the app page (adjacent-sibling rule below), because while an admin
   is impersonating a customer the "who am I looking at / how do I get out"
   affordance is the one thing that must never scroll away. */

.tfap-actbar {
	position: sticky;
	top: 0;
	z-index: 40;
	background: var(--bg-raise);
	border-bottom: 1px solid var(--line);
	box-shadow: 0 1px 0 rgba(23, 37, 31, .04);
}
/* Acting: amber chrome — deliberately NOT the brand green, so "I am someone
   else right now" is legible at a glance and in peripheral vision. */
.tfap-actbar.is-acting {
	background: #fff8e6;
	border-bottom-color: #e8c877;
	box-shadow: inset 0 3px 0 #e0a63a;
}

.tfap-actbar-in {
	max-width: 1080px;
	margin: 0 auto;
	padding: 9px 20px;
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.tfap-actbar-tag {
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--ink-soft);
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: .2em .8em;
	white-space: nowrap;
}
.tfap-actbar.is-acting .tfap-actbar-tag { background: #f6e3b6; border-color: #e0c485; color: #6b4a09; }

.tfap-actbar-who { font-size: .96rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34vw; }
.tfap-actbar.is-acting .tfap-actbar-who { color: #6b4a09; }

.tfap-actbar-search { position: relative; flex: 1 1 260px; min-width: 200px; }
.tfap-actbar-search input[type="search"] { padding: .42em .8em; border-radius: 999px; }

.tfap-actbar-admin { margin-left: auto; font-size: .9rem; font-weight: 600; color: var(--brand); text-decoration: none; white-space: nowrap; }
.tfap-actbar-admin:hover { text-decoration: underline; }

.tfap-actbar-note {
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 20px 9px;
	font-size: .84rem;
	color: #6b4a09;
}

/* Customer picker results ------------------------------------------------- */

.tfap-cust-results {
	position: absolute;
	z-index: 50;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	max-height: min(60vh, 420px);
	overflow-y: auto;
	background: var(--bg-raise);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow);
	padding: 5px;
}

.tfap-cust-hit {
	display: block;
	width: 100%;
	text-align: left;
	background: none;
	border: 0;
	border-radius: var(--radius-sm);
	padding: .5em .7em;
	font: inherit;
	color: var(--ink);
	cursor: pointer;
}
.tfap-cust-hit:hover, .tfap-cust-hit:focus-visible { background: var(--brand-soft); outline: none; }
.tfap-cust-name  { display: block; font-weight: 700; }
.tfap-cust-meta  { display: block; font-size: .84rem; color: var(--ink-soft); }
.tfap-cust-stats { display: block; font-size: .78rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.tfap-cust-none  { margin: 0; padding: .6em .7em; font-size: .88rem; color: var(--ink-soft); }

/* With the strip present it is the pinned element, so the nav underneath is a
   normal in-flow header and the sidebar's sticky offset drops accordingly. */
body.tfap-staff .tfap-nav  { position: static; }
body.tfap-staff .tfap-side { top: 14px; }

.tfap-btn-sm { padding: .34em .95em; font-size: .86rem; }

/* Staff-only bits inside the app ------------------------------------------ */

.tfap-side-staff { border-top: 1px dashed var(--line); margin-top: 6px; padding-top: 10px !important; }
.tfap-side button[data-view="allchats"]::before { content: "🛠"; }

.tfap-staff-card { margin-top: 26px; border-left: 3px solid #e0a63a; }
.tfap-staff-card h2 { margin-top: 0; }

.tfap-inline { display: flex; align-items: center; gap: .5em; font-weight: 500; }
.tfap-inline > input[type="checkbox"] { margin-top: 0; width: auto; }

.tfap-searchrow { max-width: 520px; }

/* Unpaid-but-ready campaigns get amber trim to separate them from live ones. */
.tfap-draft-card { border-left: 3px solid #e0a63a; }

@media (prefers-color-scheme: dark) {
	.tfap-actbar.is-acting { background: #2a2313; border-bottom-color: #6d5626; box-shadow: inset 0 3px 0 #c9922f; }
	.tfap-actbar.is-acting .tfap-actbar-tag { background: #3d3218; border-color: #6d5626; color: #f0d79a; }
	.tfap-actbar.is-acting .tfap-actbar-who,
	.tfap-actbar-note { color: #f0d79a; }
}

@media (max-width: 720px) {
	.tfap-actbar-in { gap: 8px 10px; padding: 8px 14px; }
	.tfap-actbar-who { max-width: 100%; }
	.tfap-actbar-admin { margin-left: 0; }
	.tfap-actbar-note { padding: 0 14px 8px; }
	.tfap-actbar-search { flex-basis: 100%; }
}

/* ==========================================================================
   v0.3.1 — NAV CTA VISIBILITY ("My dashboard" / "Get started")
   ==========================================================================
   Root cause, not a repaint: `.tfap-nav-in nav a` (specificity 0,1,2) beat
   `.tfap-btn` (0,1,0), so the pill kept its green fill but its LABEL inherited
   the plain nav-link colour — dark ink on brand green, 2.46:1, below the 4.5:1
   WCAG AA floor. Worse, `nav a:hover { color: var(--brand) }` painted the text
   the same green as the fill: 1.00:1, the label vanished on hover.

   Fixed by restoring the intended pairing with enough specificity to win, then
   giving the primary action real presence: elevation, a darker (higher-contrast)
   hover, and a visible keyboard focus ring. Measured: rest 6.47:1 (AA),
   hover 8.68:1 (AAA), active 10.84:1 (AAA); dark mode 5.81 / 7.61 / 4.78. The
   pill itself reads 6.47:1 against the nav bar, well over the 3:1 needed for a
   UI shape to be discernible. --brand-ink is used rather than a literal white,
   so dark mode gets its near-black label automatically.

   Selectors stay at `.tfap-nav-in nav a.tfap-btn` (0,2,2) — enough to beat the
   0,1,2 nav-link rule and no more. Adding :link/:visited would push it to 0,3,2
   and out-specify the dark-mode override below, which is exactly the kind of
   specificity creep that caused this bug in the first place. */

.tfap-nav-in nav a.tfap-btn {
	color: var(--brand-ink);
	background: var(--brand);
	border-color: var(--brand);
	font-weight: 700;
	padding: .58em 1.4em;
	letter-spacing: -0.005em;
	/* Lifts the pill off a near-white bar without shouting. */
	box-shadow: 0 1px 2px rgba(14, 107, 83, .20), 0 6px 16px rgba(14, 107, 83, .26);
}

/* Darker on hover, not lighter: brightness(1.08) washed the fill out and cost
   contrast against the white label. Also cancels the inherited nav-link hover
   colour, which was the invisible-text bug. */
.tfap-nav-in nav a.tfap-btn:hover,
.tfap-nav-in nav a.tfap-btn:focus-visible {
	color: var(--brand-ink);
	background: #0a5641;
	border-color: #0a5641;
	filter: none;
	transform: translateY(-1px);
	box-shadow: 0 2px 4px rgba(14, 107, 83, .24), 0 10px 22px rgba(14, 107, 83, .32);
}

.tfap-nav-in nav a.tfap-btn:active {
	background: #084635;
	border-color: #084635;
	transform: translateY(1px);
	box-shadow: 0 1px 2px rgba(14, 107, 83, .24);
}

/* Keyboard users get an explicit ring — the hover state alone is not a focus
   indicator, and the pill is the primary action on the page. */
.tfap-nav-in nav a.tfap-btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(14, 107, 83, .30), 0 10px 22px rgba(14, 107, 83, .32);
}

/* Ghost buttons in the nav lost their label colour to the same specificity
   clash — fix them together rather than waiting for the next report. */
.tfap-nav-in nav a.tfap-btn.tfap-btn-ghost {
	color: var(--brand);
	background: transparent;
	box-shadow: none;
}
.tfap-nav-in nav a.tfap-btn.tfap-btn-ghost:hover {
	color: var(--brand-ink);
	background: var(--brand);
}

@media (prefers-color-scheme: dark) {
	/* Brand green is lighter in dark mode, so the hover must go LIGHTER to gain
	   contrast against the near-black label — the inverse of light mode. */
	.tfap-nav-in nav a.tfap-btn {
		box-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 6px 16px rgba(0, 0, 0, .4);
	}
	.tfap-nav-in nav a.tfap-btn:hover,
	.tfap-nav-in nav a.tfap-btn:focus-visible {
		background: #3cb890;
		border-color: #3cb890;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .5), 0 10px 22px rgba(0, 0, 0, .45);
	}
	.tfap-nav-in nav a.tfap-btn:active {
		background: #279070;
		border-color: #279070;
	}
	.tfap-nav-in nav a.tfap-btn:focus-visible {
		box-shadow: 0 0 0 3px rgba(47, 160, 126, .45), 0 10px 22px rgba(0, 0, 0, .45);
	}
}

/* Small screens: the nav wraps, so keep the CTA from being squeezed to a sliver
   and make sure it stays a comfortable tap target. */
@media (max-width: 560px) {
	.tfap-nav-in nav a.tfap-btn { padding: .6em 1.25em; }
}