/*
 * Templates feature page (site/features/templates.blade.php).
 * Builds on wa.css; every class here is prefixed kf-tp-.
 */

/* ---------- Shared bits ---------- */
.kf-tp-var { padding: 0 3px; border-radius: 4px; background: rgba(37, 211, 102, .22); color: var(--kh-wa-dark); font-weight: 600; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.kf-tp-var.is-unknown { background: #fee2e2; color: #b91c1c; }
.kf-tp-var.is-new { animation: kf-tp-flash .8s ease; }
@keyframes kf-tp-flash { from { background: rgba(37, 211, 102, .65); } }
.kf-tp-wa-footer { display: block; margin-top: 6px; color: #667781; font-size: 12px; }
.kf-tp-textarea { display: block; width: 100%; min-width: 0; padding: 10px 12px; border: 1.5px solid var(--ks-line); border-radius: 12px; background: var(--ks-soft); color: var(--ks-ink); font: 500 14.5px/1.5 var(--ks-font); resize: vertical; transition: border-color .2s, box-shadow .2s, background .2s; }
.kf-tp-textarea:focus { outline: none; border-color: var(--ks-primary); background: #fff; box-shadow: 0 0 0 4px rgba(18, 140, 126, .14); }
.kf-tp-textarea.is-large { min-height: 124px; }

.kf-tp-card.is-wa, .kf-tp-card-icon.is-wa { --tone: #1faa59; --soft: #dcfce7; }
.kf-tp-card.is-sms, .kf-tp-card-icon.is-sms { --tone: #2563eb; --soft: #dbeafe; }
.kf-tp-card.is-mail, .kf-tp-card-icon.is-mail { --tone: #ea580c; --soft: #ffedd5; }
.kf-tp-card-icon { --tone: var(--kh-wa-teal); --soft: #dcf5ea; flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--soft); color: var(--tone); font-size: 18px; }
.kf-tp-prev-title { flex: 1; min-width: 0; line-height: 1.3; }
.kf-tp-prev-title strong { display: block; overflow: hidden; color: var(--ks-ink); font-size: 15px; white-space: nowrap; text-overflow: ellipsis; }
.kf-tp-prev-title small { display: block; overflow: hidden; color: var(--ks-muted); font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; }

.kf-tp-badge, .kf-tp-step { --tone: #475569; --soft: #e2e8f0; }
.kf-tp-badge.is-pending, .kf-tp-step.is-pending { --tone: #b45309; --soft: #fef3c7; }
.kf-tp-badge.is-approved, .kf-tp-step.is-approved { --tone: #15803d; --soft: #dcfce7; }
.kf-tp-badge.is-rejected, .kf-tp-step.is-rejected { --tone: #be123c; --soft: #ffe4e6; }
.kf-tp-badge { flex: none; display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; background: var(--soft); color: var(--tone); font-size: 12px; font-style: normal; font-weight: 700; white-space: nowrap; }
.kf-tp-badge.is-swap { animation: kh-pop .32s cubic-bezier(.2, .9, .3, 1.2) both; }

/* ---------- Hero editor ---------- */
.kf-tp-hero { position: relative; padding: 24px 0 40px; }
.kf-tp-editor { position: relative; z-index: 1; max-width: 500px; margin: 0 auto; background: #fff; box-shadow: 0 40px 80px -30px rgba(7, 94, 84, .45), 0 18px 36px rgba(11, 31, 26, .1); }
.kf-tp-editor-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 16px; background: #fff; }
.kf-tp-field { min-width: 0; }
.kf-tp-label { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; color: var(--ks-muted); font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.kf-tp-label i { font-size: 16px; color: var(--kh-wa-teal); }
.kf-tp-help { margin: 6px 0 0; color: var(--ks-muted); font-size: 12.5px; }
.kf-tp-help code { padding: 1px 6px; border-radius: 6px; background: var(--ks-primary-50); color: var(--ks-primary-700); font-size: 12px; }
.kf-tp-contacts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.kf-tp-contact { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px; border: 1.5px solid var(--ks-line); border-radius: 12px; background: #fff; color: var(--ks-ink); font: inherit; text-align: left; cursor: pointer; transition: border-color .2s, background .2s, box-shadow .2s; }
.kf-tp-contact:hover { border-color: #9fdcc4; }
.kf-tp-contact[aria-pressed="true"] { border-color: var(--ks-primary); background: var(--ks-primary-50); box-shadow: 0 0 0 3px rgba(18, 140, 126, .1); }
.kf-tp-avatar { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--kh-wa-dark), var(--kh-wa-teal)); color: #fff; font-size: 11.5px; font-weight: 700; }
.kf-tp-contact-name { min-width: 0; line-height: 1.25; }
.kf-tp-contact-name strong, .kf-tp-contact-name small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.kf-tp-contact-name strong { font-size: 13px; }
.kf-tp-contact-name small { color: var(--ks-muted); font-size: 11.5px; }
.kf-tp-hero-preview { padding: 14px 16px 18px; border-top: 1px solid var(--ks-line); }
.kf-tp-hero-chat { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.kf-tp-hero-chat-name { min-width: 0; line-height: 1.25; }
.kf-tp-hero-chat-name strong { display: block; color: var(--ks-ink); font-size: 13px; }
.kf-tp-hero-chat-name small { display: block; color: var(--ks-muted); font-size: 11.5px; }
.kf-tp-hero-msg { max-width: 94%; overflow-wrap: anywhere; }
.kf-tp-hero-msg.is-swap { animation: kh-pop .3s cubic-bezier(.2, .9, .3, 1.2) both; }
.kf-tp-float-meta { top: 2%; right: -6%; animation-delay: -2s; }
.kf-tp-float-meta small i { color: #16a34a; }
.kf-tp-float-email { bottom: -30px; left: -7%; animation-delay: -4s; }

/* ---------- Channel switcher ---------- */
.kf-tp-mail-subject { margin: 8px 0 2px; font-size: 1.05rem; }
.kf-tp-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
.kf-tp-meta span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--ks-line); border-radius: 999px; background: #fff; color: var(--ks-text); font-size: 13px; font-weight: 600; }
.kf-tp-meta i { font-size: 16px; color: var(--kh-wa-teal); }
.kf-tp-meta .is-ok { border-color: #bbf7d0; background: #dcfce7; color: #15803d; }
.kf-tp-meta .is-ok i { color: #16a34a; }

/* ---------- Variable picker ---------- */
.kf-tp-picker { align-items: start; }
.kf-tp-picker-controls, .kf-tp-picker-preview { min-width: 0; }
.kf-tp-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.kf-tp-mode { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; padding: 12px; border: 1.5px solid var(--ks-line); border-radius: 14px; background: #fff; color: var(--ks-ink); font: 600 13.5px/1.3 var(--ks-font); text-align: left; cursor: pointer; transition: border-color .2s, background .2s, box-shadow .2s; }
.kf-tp-mode i { font-size: 20px; color: var(--kh-wa-teal); }
.kf-tp-mode span { min-width: 0; }
.kf-tp-mode:hover { border-color: #9fdcc4; }
.kf-tp-mode[aria-pressed="true"] { border-color: var(--ks-primary); background: var(--ks-primary-50); color: var(--ks-primary-700); box-shadow: 0 0 0 4px rgba(18, 140, 126, .1); }
.kf-tp-hint { margin: 10px 0 0; color: var(--ks-muted); font-size: 13.5px; line-height: 1.5; }
.kf-tp-vars[hidden] { display: none !important; }
.kf-tp-vars .kh-chip { font-variant-ligatures: none; }
.kf-tp-picker-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.kf-tp-count { color: var(--ks-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.kf-tp-count.is-over { color: #b91c1c; font-weight: 600; }
.kf-tp-reset { margin: 0; }
.kf-tp-picker-preview .kh-builder-window { background: var(--ks-soft); box-shadow: var(--ks-shadow-lg); }
.kf-tp-picker-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 18px; }
.kf-tp-picker-chat { display: flex; flex-direction: column; justify-content: center; min-height: 180px; padding: 18px 14px; border: 1px solid var(--ks-line); border-radius: 16px; }
.kf-tp-picker-chat .kh-msg { overflow-wrap: anywhere; }
.kf-tp-picker-chat .kh-msg.is-swap { animation: kh-pop .3s cubic-bezier(.2, .9, .3, 1.2) both; }
.kf-tp-contact-card { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.kf-tp-contact-card div { min-width: 0; padding: 10px 12px; border: 1px solid var(--ks-line); border-radius: 12px; background: #fff; }
.kf-tp-contact-card dt { color: var(--ks-muted); font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.kf-tp-contact-card dd { margin: 2px 0 0; overflow: hidden; color: var(--ks-ink); font-size: 13.5px; white-space: nowrap; text-overflow: ellipsis; }

/* ---------- Library ---------- */
.kf-tp-filters { justify-content: center; margin-bottom: 28px; }
.kf-tp-lib-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.kf-tp-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.kf-tp-card { --tone: var(--kh-wa-teal); --soft: #dcf5ea; display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 16px; border: 1.5px solid var(--ks-line); border-radius: 18px; background: #fff; color: var(--ks-text); font: inherit; text-align: left; cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .2s; }
.kf-tp-card[hidden] { display: none !important; }
.kf-tp-card:hover { border-color: #9fdcc4; transform: translateY(-2px); }
.kf-tp-card[aria-pressed="true"] { border-color: var(--tone); box-shadow: 0 18px 36px -22px var(--tone); }
.kf-tp-card.is-in { animation: kh-pop .32s cubic-bezier(.2, .9, .3, 1.2) both; }
.kf-tp-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.kf-tp-card-meta { min-width: 0; overflow: hidden; color: var(--ks-muted); font-size: 12px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.kf-tp-card strong { color: var(--ks-ink); font-size: 15px; overflow-wrap: anywhere; }
.kf-tp-card-body { display: -webkit-box; overflow: hidden; color: var(--ks-muted); font-size: 13.5px; line-height: 1.5; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.kf-tp-lib-stage { position: sticky; top: 96px; min-width: 0; }
.kf-tp-prev { padding: 18px; border: 1px solid var(--ks-line); border-radius: 24px; background: #fff; box-shadow: var(--ks-shadow-lg); animation: kh-panel-in .4s ease both; }
.kf-tp-prev-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.kf-tp-prev-screen { display: flex; flex-direction: column; gap: 8px; min-height: 280px; padding: 16px; border: 1px solid var(--ks-line); border-radius: 18px; overflow-wrap: anywhere; }
.kf-tp-prev-screen.is-sms, .kf-tp-prev-screen.is-mail { background: #fff; }
.kf-tp-prev-screen.is-mail .kh-mail-meta > span:last-child { min-width: 0; }

/* ---------- Approval ---------- */
.kf-tp-approve { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 32px; align-items: start; }
.kf-tp-approve-steps { min-width: 0; }
.kf-tp-steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.kf-tp-step { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 18px; background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .88); font: inherit; text-align: left; cursor: pointer; transition: background .2s, border-color .2s, color .2s, box-shadow .2s; }
.kf-tp-step:hover { background: rgba(255, 255, 255, .12); }
.kf-tp-step[aria-pressed="true"] { border-color: #fff; background: #fff; color: var(--ks-text); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .45); }
.kf-tp-step-num { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: rgba(255, 255, 255, .12); color: #fff; font-size: 21px; transition: background .2s, color .2s; }
.kf-tp-step[aria-pressed="true"] .kf-tp-step-num { background: var(--soft); color: var(--tone); }
.kf-tp-step-copy { min-width: 0; line-height: 1.35; }
.kf-tp-step-copy strong { display: block; color: inherit; font-size: 15px; }
.kf-tp-step[aria-pressed="true"] .kf-tp-step-copy strong { color: var(--ks-ink); }
.kf-tp-step-copy small { display: block; font-size: 13px; opacity: .78; }
.kf-tp-approve-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.kf-tp-note { flex-direction: row; align-items: flex-start; gap: 12px; padding: 16px; }
.kf-tp-note > i { flex: none; font-size: 22px; color: #b9f6d0; }
.kf-tp-note p { margin: 0; font-size: 13.5px; line-height: 1.5; }
.kf-tp-note strong { color: #fff; }
.kf-tp-approve-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; padding: 18px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 26px; background: rgba(255, 255, 255, .08); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.kf-tp-approve-phone { min-width: 0; overflow: hidden; border-radius: 20px; background: #fff; box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .5); }
.kf-tp-approve-row { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px 14px; border-bottom: 1px solid var(--ks-line); }
.kf-tp-approve-chat { padding: 14px; }
.kf-tp-approve-chat .kh-msg { width: 94%; max-width: 94%; overflow-wrap: anywhere; }
.kf-tp-approve-panels { display: grid; min-width: 0; padding: 6px 4px; }
.kf-tp-approve-panel { grid-area: 1 / 1; min-width: 0; }
.kf-tp-approve-panel[hidden] { display: block !important; visibility: hidden; }
.kf-tp-approve-panel:not([hidden]) { animation: kh-panel-in .4s ease both; }
.kf-tp-approve-panel h3 { margin: 14px 0 8px; color: #fff; font-size: 1.3rem; }
.kf-tp-approve-panel p { margin: 0; color: rgba(255, 255, 255, .84); font-size: 15px; }
.kf-tp-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.kf-tp-pills span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; background: rgba(255, 255, 255, .1); color: #fff; font-size: 13px; font-weight: 600; }
.kf-tp-pills i { flex: none; font-size: 16px; color: #b9f6d0; }

/* ---------- Email editors ---------- */
.kf-tp-emocks { display: grid; grid-template-columns: minmax(0, 1fr); }
.kf-tp-emock { grid-area: 1 / 1; background: #fff; box-shadow: var(--ks-shadow-lg); animation: kh-panel-in .4s ease both; }
.kf-tp-emock[hidden] { display: none !important; }
.kf-tp-bee { display: grid; grid-template-columns: 112px minmax(0, 1fr); min-height: 380px; }
.kf-tp-bee-palette { display: grid; align-content: start; gap: 8px; padding: 14px 10px; border-right: 1px solid var(--ks-line); background: var(--ks-soft); }
.kf-tp-bee-block { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 8px; overflow: hidden; border: 1px solid var(--ks-line); border-radius: 10px; background: #fff; color: var(--ks-ink); font-size: 12.5px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.kf-tp-bee-block i { flex: none; font-size: 16px; color: var(--kh-wa-teal); }
.kf-tp-bee-canvas { position: relative; display: grid; align-content: start; gap: 10px; min-width: 0; padding: 14px 18px; overflow: hidden; background: #eef3f1; }
.kf-tp-bee-layout { justify-self: start; display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 10px; overflow: hidden; border-radius: 999px; background: var(--ks-primary-50); color: var(--ks-primary-700); font-size: 12px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.kf-tp-bee-layout i { flex: none; font-size: 15px; }
.kf-tp-bee-logo { display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 8px; background: #fff; }
.kf-tp-bee-logo b { flex: none; width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(135deg, var(--kh-wa-dark), var(--kh-wa-teal)); }
.kf-tp-bee-logo i { flex: 1; max-width: 60px; height: 6px; border-radius: 999px; background: #e3eee9; }
.kf-tp-bee-hero { display: grid; place-items: center; height: 96px; border-radius: 10px; background: linear-gradient(135deg, var(--kh-wa-teal), var(--kh-wa)); color: rgba(255, 255, 255, .85); font-size: 34px; }
.kf-tp-bee-text { display: grid; gap: 6px; padding: 10px 12px; border: 1.5px dashed transparent; border-radius: 8px; background: #fff; }
.kf-tp-bee-text strong { color: var(--ks-ink); font-size: 14px; }
.kf-tp-bee-text i { height: 6px; border-radius: 999px; background: #e3eee9; }
.kf-tp-bee-text i:last-child { width: 70%; }
.kf-tp-bee-text.is-selected { border-color: var(--kh-wa-teal); box-shadow: 0 0 0 4px rgba(18, 140, 126, .1); }
.kf-tp-bee-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.kf-tp-bee-cols span { display: grid; place-items: center; height: 56px; border-radius: 8px; background: #fff; color: var(--kh-wa-teal); font-size: 22px; }
.kf-tp-bee-btn { justify-self: center; padding: 9px 16px; border-radius: 10px; background: var(--kh-wa-dark); color: #fff; font-size: 13px; font-weight: 700; }
.kf-tp-bee-drag { position: absolute; top: 62%; left: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border: 1.5px solid var(--kh-wa-teal); border-radius: 10px; background: #fff; box-shadow: 0 14px 30px -12px rgba(7, 94, 84, .5); color: var(--ks-ink); font-size: 12.5px; font-weight: 700; pointer-events: none; animation: kf-tp-drag 5s ease-in-out infinite; }
.kf-tp-bee-drag i { font-size: 16px; color: var(--kh-wa-teal); }
@keyframes kf-tp-drag {
    0%, 12% { opacity: 0; transform: translate(-40px, -20px); }
    24% { opacity: 1; }
    60% { opacity: 1; transform: translate(90px, 30px); }
    74%, 100% { opacity: 0; transform: translate(90px, 30px); }
}
.kf-tp-ck { display: grid; align-content: start; gap: 12px; min-height: 380px; padding: 18px; background: var(--ks-soft); }
.kf-tp-ck-field { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--ks-line); border-radius: 10px; background: #fff; }
.kf-tp-ck-field small { color: var(--ks-muted); font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.kf-tp-ck-field span { color: var(--ks-ink); font-size: 14px; }
.kf-tp-ck-editor { overflow: hidden; border: 1px solid var(--ks-line); border-radius: 12px; background: #fff; }
.kf-tp-ck-toolbar { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 10px; border-bottom: 1px solid var(--ks-line); background: var(--ks-soft); }
.kf-tp-ck-toolbar i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: var(--ks-text); font-size: 17px; }
.kf-tp-ck-toolbar i:first-child { background: #fff; color: var(--ks-primary); box-shadow: var(--ks-shadow); }
.kf-tp-ck-body { padding: 14px 16px; color: var(--ks-text); font-size: 14px; overflow-wrap: anywhere; }
.kf-tp-ck-body p { margin: 0 0 10px; }
.kf-tp-ck-body p:last-child { margin: 0; }
.kf-tp-ck-sign { color: var(--ks-muted); }

.kf-tp-faq-head { max-width: 860px; margin: 80px auto 20px; text-align: center; }
.kf-tp-faq-head h3 { font-size: 1.4rem; }

@media (prefers-reduced-motion: reduce) {
    .kf-tp-bee-drag { display: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
    .kf-tp-float-meta { right: -2%; }
    .kf-tp-float-email { left: -3%; }
}
@media (max-width: 960px) {
    .kf-tp-hero { max-width: 560px; margin: 0 auto; }
    .kf-tp-float-meta { right: 0; }
    .kf-tp-float-email { left: 0; }
    .kf-tp-lib-grid, .kf-tp-approve { grid-template-columns: minmax(0, 1fr); }
    .kf-tp-lib-stage { position: static; order: -1; }
}
@media (max-width: 640px) {
    .kf-tp-hero { padding: 8px 0 24px; }
    .kf-tp-float-meta, .kf-tp-float-email { display: none; }
    .kf-tp-editor-body { padding: 12px; }
    .kf-tp-hero-preview { padding: 12px; }
    .kf-tp-contact { flex-direction: column; justify-content: center; gap: 4px; padding: 8px 4px; text-align: center; }
    .kf-tp-contact-name { width: 100%; }
    .kf-tp-contact-name strong { font-size: 12.5px; }
    .kf-tp-contact-name small { display: none; }
    .kf-tp-modes { grid-template-columns: minmax(0, 1fr); }
    .kf-tp-mode { flex-direction: row; align-items: center; gap: 10px; padding: 10px 12px; }
    .kf-tp-picker-body { padding: 12px; }
    .kf-tp-contact-card { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    .kf-tp-filters { flex-wrap: nowrap; justify-content: flex-start; margin: 0 -18px 20px; padding: 0 18px 6px; overflow-x: auto; scrollbar-width: none; }
    .kf-tp-filters::-webkit-scrollbar { display: none; }
    .kf-tp-filters .kh-chip { flex: none; }
    .kf-tp-cards { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .kf-tp-card { padding: 14px; }
    .kf-tp-prev { padding: 14px; border-radius: 20px; }
    .kf-tp-prev-screen { min-height: 0; padding: 12px; }
    .kf-tp-approve-notes, .kf-tp-approve-stage { grid-template-columns: minmax(0, 1fr); }
    .kf-tp-approve-stage { padding: 12px; border-radius: 22px; }
    .kf-tp-step { padding: 12px; gap: 12px; }
    .kf-tp-step-num { width: 38px; height: 38px; font-size: 19px; }
    .kf-tp-seg button { height: auto; min-height: 40px; padding: 8px; line-height: 1.2; }
    .kf-tp-bee { grid-template-columns: 84px minmax(0, 1fr); min-height: 0; }
    .kf-tp-bee-palette { padding: 10px 6px; }
    .kf-tp-bee-block { padding: 6px; font-size: 11.5px; }
    .kf-tp-bee-canvas { padding: 10px; }
    .kf-tp-bee-drag { display: none; }
    .kf-tp-ck { min-height: 0; padding: 12px; }
    .kf-tp-faq-head { margin-top: 56px; }
}