/* CreatorzKE Video Studio — distinctive palette: charcoal graphite + burnt amber + slate teal */
.cke-vs {
	--ck-bg: #171a1f;
	--ck-surface: #1f232a;
	--ck-surface-raised: #262b33;
	--ck-border: #343a44;
	--ck-text: #e9e7e1;
	--ck-text-dim: #9aa0ab;
	--ck-accent: #c3702f;
	--ck-accent-hover: #d9832f;
	--ck-accent-2: #4f7a72;
	--ck-danger: #b1503f;
	--ck-success: #5c8a63;
	--ck-radius: 10px;
	--ck-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	font-family: var(--ck-font);
	color: var(--ck-text);
	background: var(--ck-bg);
	border-radius: 14px;
	padding: 28px;
	max-width: 1180px;
	margin: 0 auto;
	box-sizing: border-box;
}
.cke-vs *, .cke-vs *::before, .cke-vs *::after { box-sizing: border-box; }

/* Reset so the active theme's default button skin (rounded pills, brand colors,
   box-shadows, etc.) never leaks into the widget. Uses :where() so it carries
   ZERO extra specificity — every specific button style below (.ck-btn-primary,
   .ck-tab, .ck-chip, etc.) must still be able to override it. The earlier bug:
   this reset was written as a plain `.cke-vs button` rule, which is MORE
   specific than a single class like `.ck-btn-primary`, so it was winning and
   wiping out the amber/teal backgrounds on every actual button. */
.cke-vs :where(button) {
	background: none;
	background-image: none;
	box-shadow: none;
	border-radius: 0;
	text-shadow: none;
	line-height: normal;
}

/* Single source of truth for visibility toggling. JS only ever sets/removes the
   `hidden` attribute; this rule guarantees it always wins over any other display
   rule below, no matter the selector specificity or source order. Without this,
   individual elements (canvas preview, video player, action buttons, etc.) can
   stay visibly rendered even after being marked hidden. */
.cke-vs [hidden] { display: none !important; }

.cke-vs.cke-vs-guard { padding: 40px; text-align: center; }
.cke-vs.cke-vs-guard h2 { margin: 0 0 8px; font-size: 20px; }
.cke-vs-guard-sub { color: var(--ck-text-dim); font-size: 14px; margin: 0 0 20px; }
.cke-vs-guard-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 4px; }
.cke-vs-resend-row { margin-top: 18px; }
.cke-vs-narrow-form { max-width: 360px; margin: 0 auto; text-align: left; }
.cke-vs-forgot-row { margin: 14px 0 0; font-size: 13px; }
.cke-vs-forgot-row a { color: var(--ck-text-dim); text-decoration: underline; }
.cke-vs-forgot-row a:hover { color: var(--ck-accent); }

/* Verify-link result banner */
.cke-vs.cke-vs-banner { max-width: 1180px; margin: 0 auto 14px; padding: 14px 18px; border-radius: var(--ck-radius); font-size: 14px; text-align: center; }
.cke-vs-banner-success { background: rgba(92,138,99,0.16); border: 1px solid var(--ck-success); color: var(--ck-success); }
.cke-vs-banner-error { background: rgba(177,80,63,0.16); border: 1px solid var(--ck-danger); color: var(--ck-danger); }

/* Guard form fields (registration modal) */
.cke-vs .ck-field { text-align: left; margin: 0 0 14px; }
.cke-vs .ck-field label { display: block; font-size: 12px; color: var(--ck-text-dim); margin-bottom: 6px; }
.cke-vs .ck-field input {
	width: 100%; background: var(--ck-bg); border: 1px solid var(--ck-border); border-radius: 8px;
	padding: 10px 12px; color: var(--ck-text); font-size: 14px; font-family: var(--ck-font);
}
.cke-vs .ck-field input:focus { outline: none; border-color: var(--ck-accent); }
.cke-vs .ck-field-hint { display: block; font-size: 11px; color: var(--ck-text-dim); margin-top: 5px; }
.cke-vs-honeypot { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cke-vs-form-msg { font-size: 13px; margin: 4px 0 14px; text-align: left; }
.cke-vs-form-msg-success { color: var(--ck-success); }
.cke-vs-form-msg-error { color: var(--ck-danger); }
.cke-vs button.ck-link-btn {
	background: none; border: none; padding: 0; color: var(--ck-accent); font-size: 13px;
	text-decoration: underline; cursor: pointer; font-family: var(--ck-font);
}
.cke-vs button.ck-link-btn:hover { color: var(--ck-accent-hover); }

/* Header */
.ck-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.ck-header-title { display: flex; align-items: center; gap: 10px; }
.ck-logo { width: 28px; height: 28px; color: var(--ck-accent); }
.ck-header-title h2 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }

.ck-wallet-chip {
	display: flex; align-items: center; gap: 10px;
	background: var(--ck-surface);
	border: 1px solid var(--ck-border);
	border-radius: 999px;
	padding: 8px 8px 8px 16px;
}
.ck-wallet-label { font-size: 12px; color: var(--ck-text-dim); }
.ck-wallet-amount { font-size: 16px; font-weight: 700; color: var(--ck-accent); }
.ck-wallet-unit { font-size: 12px; color: var(--ck-text-dim); }

/* Tabs — pill buttons, each with its own soft pulsing glow ring so the three
   sections (Generate / Wallet Activity / Get API) read as distinct, clickable
   destinations rather than a plain underline row. */
.ck-tabs { display: flex; gap: 10px; flex-wrap: wrap; border-bottom: none; margin-bottom: 20px; }
.ck-tab {
	position: relative;
	background: var(--ck-surface);
	border: 1.5px solid var(--ck-border);
	border-radius: 999px;
	color: var(--ck-text-dim);
	padding: 9px 18px; font-size: 14px; font-weight: 600; cursor: pointer;
	font-family: var(--ck-font);
	transition: color .15s ease, border-color .15s ease, background .15s ease, transform .15s ease;
	animation: ck-tab-pulse 2.6s ease-in-out infinite;
}
.ck-tab:nth-child(1) { --ck-tab-glow: 195,112,47;  animation-delay: 0s; }
.ck-tab:nth-child(2) { --ck-tab-glow: 79,122,114;  animation-delay: .3s; }
.ck-tab:nth-child(3) { --ck-tab-glow: 92,138,99;   animation-delay: .6s; }

.ck-tab:hover { color: var(--ck-text); transform: translateY(-1px); }
.ck-tab.is-active {
	color: #fff;
	background: rgba(var(--ck-tab-glow), 0.16);
	border-color: rgb(var(--ck-tab-glow));
	animation: ck-tab-pulse-active 2.2s ease-in-out infinite;
}

@keyframes ck-tab-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(var(--ck-tab-glow), 0.35); }
	50%      { box-shadow: 0 0 0 4px rgba(var(--ck-tab-glow), 0); }
}
@keyframes ck-tab-pulse-active {
	0%, 100% { box-shadow: 0 0 0 0 rgba(var(--ck-tab-glow), 0.55); }
	50%      { box-shadow: 0 0 0 6px rgba(var(--ck-tab-glow), 0); }
}

@media (prefers-reduced-motion: reduce) {
	.ck-tab, .ck-tab.is-active { animation: none; }
}

.ck-panel { display: none; }
.ck-panel.is-active { display: block; }

/* Cards & Grid */
.ck-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.ck-card {
	background: var(--ck-surface);
	border: 1px solid var(--ck-border);
	border-radius: var(--ck-radius);
	padding: 20px;
}
.ck-card h3 { margin-top: 0; font-size: 16px; }

/* Mode switch (segmented control, not a generic pill) */
.ck-mode-switch {
	display: flex; background: var(--ck-bg); border: 1px solid var(--ck-border);
	border-radius: 8px; padding: 3px; margin-bottom: 18px;
}
.ck-mode-btn {
	flex: 1; background: transparent; border: none; color: var(--ck-text-dim);
	padding: 8px 10px; font-size: 13px; font-weight: 600; border-radius: 6px; cursor: pointer;
	font-family: var(--ck-font);
}
.ck-mode-btn.is-active { background: var(--ck-accent); color: #1a1a1a; }

/* Fields */
.ck-field { margin-bottom: 16px; }
.ck-field-row { display: flex; gap: 12px; }
.ck-field-half { flex: 1; }
.ck-label { display: block; font-size: 12px; font-weight: 600; color: var(--ck-text-dim); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
.ck-hint { font-size: 12px; color: var(--ck-text-dim); margin: 6px 0 0; }

.cke-vs input[type="text"],
.cke-vs input[type="number"],
.cke-vs input[type="file"],
.cke-vs textarea,
.cke-vs select {
	width: 100%;
	background: var(--ck-bg);
	border: 1px solid var(--ck-border);
	border-radius: 8px;
	padding: 10px 12px;
	color: var(--ck-text);
	font-size: 14px;
	font-family: var(--ck-font);
}
.cke-vs textarea { resize: vertical; }
.cke-vs input:focus, .cke-vs textarea:focus, .cke-vs select:focus { outline: none; border-color: var(--ck-accent); }

.ck-select-wrap { position: relative; }
.ck-select-wrap select { appearance: none; -webkit-appearance: none; padding-right: 34px; }
.ck-select-caret { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--ck-text-dim); pointer-events: none; }

.ck-cost-display {
	background: var(--ck-bg); border: 1px solid var(--ck-border); border-radius: 8px;
	padding: 10px 12px; font-size: 16px; font-weight: 700; color: var(--ck-accent-2);
}
.ck-cost-display span { font-size: 11px; font-weight: 500; color: var(--ck-text-dim); text-transform: uppercase; margin-left: 4px; }

/* Toggle switch (custom, not a checkbox) */
.ck-toggle-row { margin-bottom: 16px; }
.ck-toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.ck-toggle input { display: none; }
.ck-toggle-track { width: 40px; height: 22px; border-radius: 999px; background: var(--ck-bg); border: 1px solid var(--ck-border); position: relative; transition: background .15s ease; flex-shrink: 0; }
.ck-toggle-thumb { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--ck-text-dim); transition: transform .15s ease, background .15s ease; }
.ck-toggle input:checked + .ck-toggle-track { background: var(--ck-accent); border-color: var(--ck-accent); }
.ck-toggle input:checked + .ck-toggle-track .ck-toggle-thumb { transform: translateX(18px); background: #1a1a1a; }
.ck-toggle-text { font-size: 13px; color: var(--ck-text); }
.ck-toggle-text em { color: var(--ck-text-dim); font-style: normal; }

/* Dropzone / canvas preview */
.ck-dropzone {
	position: relative; border: 1.5px dashed var(--ck-border); border-radius: var(--ck-radius);
	min-height: 180px; display: flex; align-items: center; justify-content: center;
	cursor: pointer; background: var(--ck-bg); overflow: hidden;
}
.ck-dropzone:hover, .ck-dropzone.is-dragover { border-color: var(--ck-accent); }
.ck-dropzone-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--ck-text-dim); font-size: 13px; padding: 20px; text-align: center; }
.ck-dropzone-empty svg { width: 28px; height: 28px; color: var(--ck-accent-2); }
.ck-canvas-preview { width: 100%; max-height: 260px; object-fit: contain; display: block; }

/* Buttons */
.ck-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	border: 1px solid transparent; border-radius: 8px; padding: 10px 18px;
	font-size: 14px; font-weight: 600; cursor: pointer; font-family: var(--ck-font);
	transition: background .12s ease, border-color .12s ease, opacity .12s ease;
	text-decoration: none;
}
.ck-btn-primary { background: var(--ck-accent); color: #1a1710; }
.ck-btn-primary:hover { background: var(--ck-accent-hover); }
.ck-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.ck-btn-secondary { background: var(--ck-accent-2); color: #101512; }
.ck-btn-ghost { background: transparent; border-color: var(--ck-border); color: var(--ck-text); }
.ck-btn-ghost:hover { border-color: var(--ck-accent); color: var(--ck-accent); }
.ck-btn-block { width: 100%; }
.ck-btn-sm { padding: 6px 12px; font-size: 12px; }

/* Loading state: shown on any .ck-btn while an async action (e.g. Paystack
   init) is in flight, so the click never feels dead-air / unresponsive. */
.ck-btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.ck-btn.is-loading::after {
	content: '';
	position: absolute;
	top: 50%; left: 50%;
	width: 16px; height: 16px;
	margin: -8px 0 0 -8px;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-top-color: #fff;
	border-radius: 50%;
	animation: ck-btn-spin 0.7s linear infinite;
}
.ck-btn-ghost.is-loading::after,
.ck-btn-secondary.is-loading::after { border-color: rgba(0, 0, 0, 0.25); border-top-color: currentColor; }
@keyframes ck-btn-spin { to { transform: rotate(360deg); } }

/* Payment modal overlay: covers the topup modal body while Paystack's
   checkout is being initialized server-side, right up until the iframe
   (or redirect) takes over — closes the "click and nothing happens" gap. */
.ck-modal.ck-modal-busy { pointer-events: none; }
.ck-payment-loading {
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 28px 12px 8px;
	text-align: center;
}
.ck-payment-loading.is-visible { display: flex; }
.ck-payment-loading-spinner {
	width: 34px; height: 34px;
	border: 3px solid var(--ck-border);
	border-top-color: var(--ck-accent);
	border-radius: 50%;
	animation: ck-btn-spin 0.8s linear infinite;
}
.ck-payment-loading p { margin: 0; font-size: 13px; color: var(--ck-text-dim, #9a9a9a); }

/* Progress bar */
.ck-progress-wrap { margin-bottom: 16px; }
.ck-progress-track { height: 6px; background: var(--ck-bg); border-radius: 999px; overflow: hidden; border: 1px solid var(--ck-border); }
.ck-progress-fill { height: 100%; width: 8%; background: linear-gradient(90deg, var(--ck-accent-2), var(--ck-accent)); transition: width .4s ease; }
.ck-progress-status { display: block; margin-top: 6px; font-size: 12px; color: var(--ck-text-dim); }

/* Video stage */
.ck-video-stage {
	background: var(--ck-bg); border: 1px solid var(--ck-border); border-radius: var(--ck-radius);
	min-height: 320px; display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.ck-video-placeholder { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--ck-text-dim); font-size: 13px; padding: 30px; text-align: center; }
.ck-video-placeholder svg { width: 32px; height: 32px; color: var(--ck-accent-2); }
#ck-video-player { width: 100%; max-height: 420px; display: block; background: #000; }
.ck-video-actions { display: flex; gap: 10px; margin-top: 14px; }

/* Tables */
.ck-table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 13px; }
.ck-table th { text-align: left; color: var(--ck-text-dim); font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: 0.03em; padding: 8px 10px; border-bottom: 1px solid var(--ck-border); }
.ck-table td { padding: 10px; border-bottom: 1px solid var(--ck-border); }
.ck-table .ck-empty { color: var(--ck-text-dim); text-align: center; padding: 20px; }

.ck-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.ck-badge-active { background: rgba(92,138,99,0.18); color: var(--ck-success); }
.ck-badge-revoked { background: rgba(177,80,63,0.18); color: var(--ck-danger); }
.ck-badge-trial { background: rgba(90,130,200,0.18); color: #6ea1e0; margin-left: 6px; }
.ck-hint-sm { font-size: 11px; margin: 2px 0 0; opacity: 0.75; }
.ck-trial-key-box { border: 1px dashed var(--ck-border); border-radius: 10px; padding: 12px 14px; margin: 14px 0; }
.ck-trial-key-box .ck-btn { margin-top: 8px; }

.ck-endpoint-box { display: flex; flex-direction: column; gap: 6px; background: var(--ck-bg); border: 1px solid var(--ck-border); border-radius: 8px; padding: 12px; margin: 12px 0; }
.ck-endpoint-box code { font-size: 12px; color: var(--ck-accent-2); }

.ck-inline-form { display: flex; gap: 10px; margin-top: 16px; }
.ck-inline-form input { flex: 1; }

.ck-new-key-reveal { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 12px; background: var(--ck-bg); border: 1px solid var(--ck-accent); border-radius: 8px; font-size: 13px; flex-wrap: wrap; }
.ck-new-key-reveal code { color: var(--ck-accent); word-break: break-all; }

/* Modal */
.ck-modal-overlay {
	position: fixed; inset: 0; background: rgba(10,11,13,0.72);
	align-items: center; justify-content: center; z-index: 100000;
	display: flex;
}

.ck-modal {
	position: relative; background: var(--ck-surface); border: 1px solid var(--ck-border);
	border-radius: var(--ck-radius); padding: 26px; width: 90%; max-width: 400px;
	color: var(--ck-text); font-family: var(--ck-font);
}
.ck-modal h3 { margin-top: 0; }
.cke-vs button.ck-modal-close {
	position: absolute; top: 14px; right: 14px;
	background: transparent; background-image: none; border: none; box-shadow: none;
	width: auto; height: auto; border-radius: 0; padding: 4px;
	color: var(--ck-text-dim); cursor: pointer; line-height: 0;
}
.cke-vs button.ck-modal-close:hover { color: var(--ck-accent); }
.ck-modal-close svg { width: 18px; height: 18px; display: block; }

.ck-quick-amounts { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 20px; }
.ck-chip {
	background: var(--ck-bg); border: 1px solid var(--ck-border); color: var(--ck-text);
	border-radius: 999px; padding: 6px 14px; font-size: 12px; cursor: pointer; font-family: var(--ck-font);
}
.ck-chip:hover, .ck-chip.is-active { border-color: var(--ck-accent); color: var(--ck-accent); }

/* Toast */
.ck-toast {
	position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
	background: var(--ck-surface-raised); border: 1px solid var(--ck-border); color: var(--ck-text);
	padding: 12px 20px; border-radius: 8px; font-size: 13px; z-index: 100001; box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.ck-toast.ck-toast-error { border-color: var(--ck-danger); color: #f0b3a6; }
.ck-toast.ck-toast-success { border-color: var(--ck-success); color: #c7e3cb; }

/* Admin page reuse */
.cke-admin-wrap .form-table th { width: 220px; }

/* ---------- Responsive breakpoints ---------- */

/* Tablet */
@media (max-width: 860px) {
	.ck-grid { grid-template-columns: 1fr; }
}

/* Phone */
@media (max-width: 560px) {
	.cke-vs { padding: 16px; border-radius: 0; }
	.ck-header { align-items: flex-start; }
	.ck-wallet-chip { width: 100%; justify-content: space-between; padding: 8px 8px 8px 14px; }
	.ck-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.ck-tab { flex: 0 0 auto; padding: 10px 12px; white-space: nowrap; }
	.ck-card { padding: 14px; }
	.ck-field-row { flex-direction: column; }
	.ck-video-stage { min-height: 220px; }
	.ck-modal { width: calc(100% - 32px); padding: 20px; }
	.ck-quick-amounts { justify-content: space-between; }
	.ck-chip { flex: 1 1 calc(50% - 8px); text-align: center; }
	.ck-inline-form { flex-direction: column; }
	.ck-table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ---------- Multi-Modal Studio: Step 1 image generator, gallery, audio panel ---------- */

.ck-field-third { flex: 1; }
.ck-field-grow { flex: 1 1 100%; }

.ck-step-card { margin-bottom: 20px; }
.ck-step-header { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.ck-step-header h3 { margin: 0; font-size: 16px; }
.ck-step-badge {
	display: flex; align-items: center; justify-content: center;
	width: 22px; height: 22px; border-radius: 50%;
	background: var(--ck-accent); color: #1a1a1a;
	font-size: 12px; font-weight: 700; flex-shrink: 0;
}

.ck-image-form { align-items: flex-start; flex-wrap: wrap; }
.ck-image-form .ck-field-row { flex: 1 1 100%; margin-top: 8px; }

.ck-gallery {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 12px; margin-top: 16px;
}
.ck-gallery-empty { grid-column: 1 / -1; text-align: center; padding: 20px 0; }
.ck-gallery-card {
	position: relative; border: 1px solid var(--ck-border); border-radius: var(--ck-radius);
	overflow: hidden; background: var(--ck-bg);
}
.ck-gallery-card img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.ck-gallery-card .ck-use-as-reference {
	position: absolute; left: 6px; right: 6px; bottom: 6px;
	width: calc(100% - 12px); opacity: 0; transition: opacity .15s ease;
	font-size: 11px; padding: 6px 8px; text-align: center;
}
.ck-gallery-card:hover .ck-use-as-reference,
.ck-gallery-card:focus-within .ck-use-as-reference { opacity: 1; }

.ck-audio-panel { border-top: 1px solid var(--ck-border); padding-top: 16px; margin-top: 4px; }
.ck-audio-dropzone {
	height: auto; min-height: 44px; padding: 12px 14px;
	display: flex; align-items: center; justify-content: center;
	font-size: 13px; color: var(--ck-text-dim); text-align: center;
}
.ck-audio-mode-switch { margin-top: 12px; }

@media (max-width: 560px) {
	.ck-gallery { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
	.ck-gallery-card .ck-use-as-reference { opacity: 1; }
}

/* ============================================================
   Stepper Navigation
   ============================================================ */

.ck-stepper {
	display: flex; align-items: center; gap: 10px;
	margin-bottom: 20px; padding: 6px;
	background: var(--ck-surface); border: 1px solid var(--ck-border);
	border-radius: 12px;
}
.ck-step-tab {
	flex: 1; display: flex; align-items: center; gap: 10px;
	background: transparent; border: 1px solid transparent; border-radius: 8px;
	padding: 10px 14px; cursor: pointer; text-align: left;
	font-family: var(--ck-font); transition: background .12s ease, border-color .12s ease;
}
.ck-step-tab:hover { background: var(--ck-surface-raised); }
.ck-step-tab.is-active { background: var(--ck-surface-raised); border-color: var(--ck-accent); }
.ck-step-num {
	display: flex; align-items: center; justify-content: center; flex-shrink: 0;
	width: 26px; height: 26px; border-radius: 50%;
	background: var(--ck-bg); border: 1px solid var(--ck-border); color: var(--ck-text-dim);
	font-size: 13px; font-weight: 700; transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.ck-step-tab.is-active .ck-step-num { background: var(--ck-accent); border-color: var(--ck-accent); color: #1a1a1a; }
.ck-step-label { display: flex; flex-direction: column; line-height: 1.3; }
.ck-step-label strong { font-size: 13px; font-weight: 700; color: var(--ck-text); }
.ck-step-label em { font-size: 11px; font-style: normal; color: var(--ck-text-dim); }
.ck-step-tab.is-active .ck-step-label strong { color: var(--ck-accent); }
.ck-step-connector { width: 24px; height: 1px; background: var(--ck-border); flex-shrink: 0; }

.ck-step-panel { display: none; }
.ck-step-panel.is-active { display: block; }

/* Sub-tabs (inside Step 1) */
.ck-subtabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--ck-border); }
.ck-subtab {
	background: transparent; border: none; color: var(--ck-text-dim);
	padding: 9px 4px; margin-right: 18px; font-size: 13px; font-weight: 600; cursor: pointer;
	border-bottom: 2px solid transparent; margin-bottom: -1px; font-family: var(--ck-font);
}
.ck-subtab:hover { color: var(--ck-text); }
.ck-subtab.is-active { color: var(--ck-accent); border-bottom-color: var(--ck-accent); }
.ck-subpanel { display: none; }
.ck-subpanel.is-active { display: block; }

/* ============================================================
   2-Column Split Layout (Desktop)
   ============================================================ */

.ck-container { display: block; }
.ck-controls > .ck-step-panel > .ck-card,
.ck-controls .ck-card { margin-bottom: 20px; }
.ck-controls .ck-card:last-child { margin-bottom: 0; }

.ck-sidebar { display: flex; flex-direction: column; gap: 16px; margin-top: 20px; }
.ck-sidebar-card { padding: 16px; }
.ck-sidebar-balance { display: flex; align-items: baseline; gap: 6px; margin: 8px 0 12px; }
.ck-sidebar-balance span:first-child { font-size: 22px; font-weight: 700; color: var(--ck-accent); }
.ck-sidebar-thumb {
	margin-top: 8px; border: 1px dashed var(--ck-border); border-radius: var(--ck-radius);
	background: var(--ck-bg); aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center;
	overflow: hidden;
}
.ck-sidebar-thumb-empty { font-size: 12px; color: var(--ck-text-dim); text-align: center; padding: 12px; }
.ck-sidebar-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ck-sidebar-cost-row { margin-bottom: 14px; }
.ck-sidebar-cost-row .ck-cost-display { margin-top: 8px; width: 100%; text-align: center; font-size: 18px; }
.ck-sidebar-action { position: relative; }

@media (min-width: 992px) {
	.ck-container { display: grid; grid-template-columns: 1fr 380px; gap: 24px; align-items: start; }
	.ck-sidebar { margin-top: 0; position: sticky; top: 20px; }
}

/* ============================================================
   Accordions (details / summary)
   ============================================================ */

.ck-accordion {
	border: 1px solid var(--ck-border); border-radius: var(--ck-radius);
	background: var(--ck-bg); margin: 16px 0; overflow: hidden;
}
.ck-accordion summary {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	list-style: none; cursor: pointer; padding: 12px 14px;
	font-size: 13px; font-weight: 600; color: var(--ck-text);
	-webkit-user-select: none; user-select: none;
}
.ck-accordion summary::-webkit-details-marker { display: none; }
.ck-accordion-caret { width: 16px; height: 16px; color: var(--ck-text-dim); transition: transform .15s ease; flex-shrink: 0; }
.ck-accordion[open] .ck-accordion-caret { transform: rotate(180deg); }
.ck-accordion summary:hover { color: var(--ck-accent); }
.ck-accordion summary:hover .ck-accordion-caret { color: var(--ck-accent); }
.ck-accordion-body { padding: 4px 14px 14px; border-top: 1px solid var(--ck-border); }
.ck-accordion-body .ck-field:last-child { margin-bottom: 0; }

/* ============================================================
   Mobile Floating Action Bar (Credit Estimator + Generate)
   ============================================================ */

.ck-mobile-bar-spacer { display: none; }

@media (max-width: 991px) {
	.ck-mobile-bar-spacer { display: block; height: 92px; }

	.ck-sidebar-action {
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 999;
		margin: 0; border-radius: 0; border-left: none; border-right: none; border-bottom: none;
		box-shadow: 0 -8px 24px rgba(0,0,0,0.35);
		display: flex; align-items: center; gap: 14px; padding: 10px 14px;
		background: var(--ck-surface);
	}
	.ck-sidebar-action .ck-sidebar-cost-row { margin-bottom: 0; flex-shrink: 0; }
	.ck-sidebar-action .ck-sidebar-cost-row .ck-label { display: none; }
	.ck-sidebar-action .ck-cost-display { margin-top: 0; white-space: nowrap; padding: 8px 10px; font-size: 14px; }
	.ck-sidebar-action .ck-progress-wrap { position: absolute; left: 14px; right: 14px; top: -30px; margin: 0; }
	.ck-sidebar-action #ck-generate-btn { flex: 1; }
}

@media (max-width: 560px) {
	.ck-stepper { flex-direction: column; align-items: stretch; gap: 6px; }
	.ck-step-connector { display: none; }
	.ck-step-tab { padding: 10px 12px; }
}

/* ============================================================
   Live System Status Banner & M-Pesa Badge
   ============================================================ */
.ck-status-banner {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	flex-wrap: wrap;
	padding: 8px 14px;
	margin-bottom: 14px;
	background: var(--ck-surface);
	border: 1px solid var(--ck-border);
	border-radius: 999px;
	font-size: 12px;
	color: var(--ck-text-dim);
}
.ck-status-left { display: flex; align-items: center; gap: 8px; }
.ck-status-dot {
	width: 8px; height: 8px; border-radius: 50%; background: var(--ck-success); flex-shrink: 0;
	box-shadow: 0 0 0 0 rgba(92,138,99,0.6);
	animation: ck-status-pulse 2s infinite;
}
@keyframes ck-status-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(92,138,99,0.55); }
	70%  { box-shadow: 0 0 0 6px rgba(92,138,99,0); }
	100% { box-shadow: 0 0 0 0 rgba(92,138,99,0); }
}
.ck-status-right { display: flex; align-items: center; }
.ck-mpesa-badge {
	display: inline-flex; align-items: center; gap: 6px;
	background: rgba(92,138,99,0.14);
	color: var(--ck-success);
	border: 1px solid rgba(92,138,99,0.4);
	border-radius: 999px;
	padding: 4px 10px;
	font-weight: 600;
	font-size: 11.5px;
	white-space: nowrap;
}
.ck-flag { font-size: 13px; line-height: 1; }

@media (max-width: 560px) {
	.ck-status-banner { justify-content: center; text-align: center; border-radius: 12px; }
	.ck-status-left { justify-content: center; flex-wrap: wrap; }
}

/* ============================================================
   Transparent KES Pricing Banner
   ============================================================ */
.ck-pricing-banner { margin-bottom: 16px; }
.ck-price-list { list-style: none; margin: 4px 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ck-price-item {
	flex: 1 1 160px;
	display: flex; flex-direction: column; gap: 2px;
	background: var(--ck-surface-raised);
	border: 1px solid var(--ck-border);
	border-radius: var(--ck-radius);
	padding: 10px 12px;
}
.ck-price-label { font-size: 12px; color: var(--ck-text-dim); }
.ck-price-value { font-size: 15px; font-weight: 700; color: var(--ck-accent); }
.ck-price-value em { font-style: normal; font-size: 11px; font-weight: 500; color: var(--ck-text-dim); margin-left: 2px; }
.ck-price-note {
	margin: 0; font-size: 12.5px; color: var(--ck-text);
	background: rgba(195,112,47,0.1);
	border: 1px dashed rgba(195,112,47,0.4);
	border-radius: var(--ck-radius);
	padding: 8px 12px;
}

/* ============================================================
   Preset Quick-Click Prompt Chips
   ============================================================ */
.ck-prompt-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ck-prompt-chip {
	font-size: 12px; font-weight: 500; line-height: 1.3;
	background: var(--ck-surface-raised);
	border: 1px solid var(--ck-border);
	color: var(--ck-text);
	border-radius: 999px;
	padding: 7px 12px;
	cursor: pointer;
	transition: border-color .15s ease, color .15s ease, background .15s ease;
	max-width: 100%;
}
.ck-prompt-chip:hover, .ck-prompt-chip:focus-visible {
	border-color: var(--ck-accent);
	color: var(--ck-accent);
	background: rgba(195,112,47,0.08);
}
.ck-prompt-helper { margin-top: 8px; }
.ck-prompt-helper a { color: var(--ck-accent-2); font-weight: 600; text-decoration: none; }
.ck-prompt-helper a:hover { text-decoration: underline; }

/* ============================================================
   Embedded Sample Output Video Gallery
   ============================================================ */
.ck-samples { margin-top: 24px; }
.ck-samples-title { margin: 0 0 12px; font-size: 16px; font-weight: 600; }
.ck-samples-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; max-width: 720px; margin: 0 auto; }
.ck-sample-col {
	display: flex; flex-direction: column; gap: 6px;
	background: var(--ck-surface);
	border: 1px solid var(--ck-border);
	border-radius: var(--ck-radius);
	padding: 8px;
}
.ck-sample-col video {
	width: 100%; aspect-ratio: 9 / 16; object-fit: cover;
	border-radius: 8px; background: #000; display: block;
}
.ck-sample-label { font-size: 12px; color: var(--ck-text-dim); text-align: center; }
.ck-samples-caption { margin: 10px 0 0; font-size: 12px; color: var(--ck-text-dim); text-align: center; }

@media (max-width: 768px) {
	.ck-samples-grid { grid-template-columns: 1fr; }
	.ck-sample-col video { aspect-ratio: 16 / 9; }
}

/* ============================================================
   Mobile-First Floating CTA Bar
   ============================================================ */
.ck-mobile-cta-bar { display: none; }

@media (max-width: 768px) {
	.ck-mobile-cta-bar {
		display: flex; gap: 8px;
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
		padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
		background: var(--ck-surface);
		border-top: 1px solid var(--ck-border);
		box-shadow: 0 -8px 24px rgba(0,0,0,0.35);
	}
	/* Step 2's own sticky generate bar (.ck-sidebar-action) takes over once the
	   user reaches the generate step, so this bar steps aside to avoid a
	   double bottom-bar stack. Toggled via JS with the .is-hidden class. */
	.ck-mobile-cta-bar.is-hidden { display: none; }

	.ck-mobile-cta-btn {
		flex: 1; text-align: center; white-space: nowrap;
		font-size: 13px; font-weight: 700;
		border-radius: 999px;
		padding: 12px 10px;
		border: 1px solid var(--ck-border);
		cursor: pointer;
	}
	.ck-mobile-cta-generate {
		background: var(--ck-accent); border-color: var(--ck-accent); color: #fff;
	}
	.ck-mobile-cta-generate:hover { background: var(--ck-accent-hover); }
	.ck-mobile-cta-topup {
		background: transparent; color: var(--ck-text);
	}
}