/* MRSTORE Dashboard — self-hosted utilities (CSP-safe, no Tailwind CDN) */
:root {
  --brand-50:#ecfdf5; --brand-100:#d1fae5; --brand-200:#a7f3d0; --brand-300:#6ee7b7;
  --brand-400:#34d399; --brand-500:#10b981; --brand-600:#059669; --brand-700:#047857;
  --brand-800:#065f46; --brand-900:#064e3b;
  --slate-50:#f8fafc; --slate-100:#f1f5f9; --slate-200:#e2e8f0; --slate-300:#cbd5e1;
  --slate-400:#94a3b8; --slate-500:#64748b; --slate-600:#475569; --slate-700:#334155;
  --slate-800:#1e293b; --slate-900:#0f172a;
}
*,*::before,*::after{box-sizing:border-box}
html{line-height:1.5;-webkit-text-size-adjust:100%}
body.dash-body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:linear-gradient(165deg,#f8fafc 0%,#ecfdf5 42%,#f8fafc 100%);
  min-height:100vh;
  color:var(--slate-900);
}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
a{color:inherit}
pre{margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

.block{display:block}
.inline-block{display:inline-block}
.inline-flex{display:inline-flex}
.flex{display:flex}
.grid{display:grid}
.hidden{display:none}
.relative{position:relative}
.absolute{position:absolute}
.sticky{position:sticky}
.flex-col{flex-direction:column}
.flex-wrap{flex-wrap:wrap}
.flex-1{flex:1 1 0%}
.shrink-0{flex-shrink:0}
.items-center{align-items:center}
.items-start{align-items:flex-start}
.justify-between{justify-content:space-between}
.justify-center{justify-content:center}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.list-decimal{list-style-type:decimal}
.list-inside{list-style-position:inside}
.capitalize{text-transform:capitalize}
.uppercase{text-transform:uppercase}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.break-all{word-break:break-all}
.whitespace-pre-wrap{white-space:pre-wrap}
.overflow-auto{overflow:auto}
.overflow-hidden{overflow:hidden}
.overflow-x-auto{overflow-x:auto}
.overflow-y-auto{overflow-y:auto}
.border{border-width:1px;border-style:solid;border-color:var(--slate-200)}
.border-0{border-width:0}
.border-b{border-bottom-width:1px;border-bottom-style:solid;border-color:var(--slate-200)}
.text-center{text-align:center}
.text-left{text-align:left}
.ml-auto{margin-left:auto}
.mt-auto{margin-top:auto}
.m-0{margin:0}
.mx-1{margin-left:.25rem;margin-right:.25rem}
.min-h-screen{min-height:100vh}
.min-w-0{min-width:0}
.w-full{width:100%}
.h-full{height:100%}
.font-sans{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.shadow-xl{box-shadow:0 20px 25px -5px rgb(0 0 0/.1),0 8px 10px -6px rgb(0 0 0/.1)}
.blur-2xl{filter:blur(40px)}
.opacity-80{opacity:.8}
.opacity-90{opacity:.9}
.leading-tight{line-height:1.25}
.leading-snug{line-height:1.375}
.leading-relaxed{line-height:1.625}
.tracking-tight{letter-spacing:-.025em}
.tracking-wider{letter-spacing:.05em}
.tracking-widest{letter-spacing:.1em}
.tracking-\[0\.2em\]{letter-spacing:.2em}
.p-0{padding:0}
.px-0{padding-left:0;padding-right:0}
.py-0{padding-top:0;padding-bottom:0}
.pt-0{padding-top:0}
.pb-0{padding-bottom:0}
.pl-0{padding-left:0}
.pr-0{padding-right:0}
.m-0{margin:0}
.mt-0{margin-top:0}
.mb-0{margin-bottom:0}
.ml-0{margin-left:0}
.mr-0{margin-right:0}
.gap-0{gap:0}
.space-y-0>:not([hidden])~:not([hidden]){margin-top:0}
.p-0\.5{padding:.125rem}
.px-0\.5{padding-left:.125rem;padding-right:.125rem}
.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}
.pt-0\.5{padding-top:.125rem}
.pb-0\.5{padding-bottom:.125rem}
.pl-0\.5{padding-left:.125rem}
.pr-0\.5{padding-right:.125rem}
.m-0\.5{margin:.125rem}
.mt-0\.5{margin-top:.125rem}
.mb-0\.5{margin-bottom:.125rem}
.ml-0\.5{margin-left:.125rem}
.mr-0\.5{margin-right:.125rem}
.gap-0\.5{gap:.125rem}
.space-y-0\.5>:not([hidden])~:not([hidden]){margin-top:.125rem}
.p-1{padding:.25rem}
.px-1{padding-left:.25rem;padding-right:.25rem}
.py-1{padding-top:.25rem;padding-bottom:.25rem}
.pt-1{padding-top:.25rem}
.pb-1{padding-bottom:.25rem}
.pl-1{padding-left:.25rem}
.pr-1{padding-right:.25rem}
.m-1{margin:.25rem}
.mt-1{margin-top:.25rem}
.mb-1{margin-bottom:.25rem}
.ml-1{margin-left:.25rem}
.mr-1{margin-right:.25rem}
.gap-1{gap:.25rem}
.space-y-1>:not([hidden])~:not([hidden]){margin-top:.25rem}
.p-1\.5{padding:.375rem}
.px-1\.5{padding-left:.375rem;padding-right:.375rem}
.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}
.pt-1\.5{padding-top:.375rem}
.pb-1\.5{padding-bottom:.375rem}
.pl-1\.5{padding-left:.375rem}
.pr-1\.5{padding-right:.375rem}
.m-1\.5{margin:.375rem}
.mt-1\.5{margin-top:.375rem}
.mb-1\.5{margin-bottom:.375rem}
.ml-1\.5{margin-left:.375rem}
.mr-1\.5{margin-right:.375rem}
.gap-1\.5{gap:.375rem}
.space-y-1\.5>:not([hidden])~:not([hidden]){margin-top:.375rem}
.p-2{padding:.5rem}
.px-2{padding-left:.5rem;padding-right:.5rem}
.py-2{padding-top:.5rem;padding-bottom:.5rem}
.pt-2{padding-top:.5rem}
.pb-2{padding-bottom:.5rem}
.pl-2{padding-left:.5rem}
.pr-2{padding-right:.5rem}
.m-2{margin:.5rem}
.mt-2{margin-top:.5rem}
.mb-2{margin-bottom:.5rem}
.ml-2{margin-left:.5rem}
.mr-2{margin-right:.5rem}
.gap-2{gap:.5rem}
.space-y-2>:not([hidden])~:not([hidden]){margin-top:.5rem}
.p-2\.5{padding:.625rem}
.px-2\.5{padding-left:.625rem;padding-right:.625rem}
.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}
.pt-2\.5{padding-top:.625rem}
.pb-2\.5{padding-bottom:.625rem}
.pl-2\.5{padding-left:.625rem}
.pr-2\.5{padding-right:.625rem}
.m-2\.5{margin:.625rem}
.mt-2\.5{margin-top:.625rem}
.mb-2\.5{margin-bottom:.625rem}
.ml-2\.5{margin-left:.625rem}
.mr-2\.5{margin-right:.625rem}
.gap-2\.5{gap:.625rem}
.space-y-2\.5>:not([hidden])~:not([hidden]){margin-top:.625rem}
.p-3{padding:.75rem}
.px-3{padding-left:.75rem;padding-right:.75rem}
.py-3{padding-top:.75rem;padding-bottom:.75rem}
.pt-3{padding-top:.75rem}
.pb-3{padding-bottom:.75rem}
.pl-3{padding-left:.75rem}
.pr-3{padding-right:.75rem}
.m-3{margin:.75rem}
.mt-3{margin-top:.75rem}
.mb-3{margin-bottom:.75rem}
.ml-3{margin-left:.75rem}
.mr-3{margin-right:.75rem}
.gap-3{gap:.75rem}
.space-y-3>:not([hidden])~:not([hidden]){margin-top:.75rem}
.p-3\.5{padding:.875rem}
.px-3\.5{padding-left:.875rem;padding-right:.875rem}
.py-3\.5{padding-top:.875rem;padding-bottom:.875rem}
.pt-3\.5{padding-top:.875rem}
.pb-3\.5{padding-bottom:.875rem}
.pl-3\.5{padding-left:.875rem}
.pr-3\.5{padding-right:.875rem}
.m-3\.5{margin:.875rem}
.mt-3\.5{margin-top:.875rem}
.mb-3\.5{margin-bottom:.875rem}
.ml-3\.5{margin-left:.875rem}
.mr-3\.5{margin-right:.875rem}
.gap-3\.5{gap:.875rem}
.space-y-3\.5>:not([hidden])~:not([hidden]){margin-top:.875rem}
.p-4{padding:1rem}
.px-4{padding-left:1rem;padding-right:1rem}
.py-4{padding-top:1rem;padding-bottom:1rem}
.pt-4{padding-top:1rem}
.pb-4{padding-bottom:1rem}
.pl-4{padding-left:1rem}
.pr-4{padding-right:1rem}
.m-4{margin:1rem}
.mt-4{margin-top:1rem}
.mb-4{margin-bottom:1rem}
.ml-4{margin-left:1rem}
.mr-4{margin-right:1rem}
.gap-4{gap:1rem}
.space-y-4>:not([hidden])~:not([hidden]){margin-top:1rem}
.p-5{padding:1.25rem}
.px-5{padding-left:1.25rem;padding-right:1.25rem}
.py-5{padding-top:1.25rem;padding-bottom:1.25rem}
.pt-5{padding-top:1.25rem}
.pb-5{padding-bottom:1.25rem}
.pl-5{padding-left:1.25rem}
.pr-5{padding-right:1.25rem}
.m-5{margin:1.25rem}
.mt-5{margin-top:1.25rem}
.mb-5{margin-bottom:1.25rem}
.ml-5{margin-left:1.25rem}
.mr-5{margin-right:1.25rem}
.gap-5{gap:1.25rem}
.space-y-5>:not([hidden])~:not([hidden]){margin-top:1.25rem}
.p-6{padding:1.5rem}
.px-6{padding-left:1.5rem;padding-right:1.5rem}
.py-6{padding-top:1.5rem;padding-bottom:1.5rem}
.pt-6{padding-top:1.5rem}
.pb-6{padding-bottom:1.5rem}
.pl-6{padding-left:1.5rem}
.pr-6{padding-right:1.5rem}
.m-6{margin:1.5rem}
.mt-6{margin-top:1.5rem}
.mb-6{margin-bottom:1.5rem}
.ml-6{margin-left:1.5rem}
.mr-6{margin-right:1.5rem}
.gap-6{gap:1.5rem}
.space-y-6>:not([hidden])~:not([hidden]){margin-top:1.5rem}
.p-7{padding:1.75rem}
.px-7{padding-left:1.75rem;padding-right:1.75rem}
.py-7{padding-top:1.75rem;padding-bottom:1.75rem}
.pt-7{padding-top:1.75rem}
.pb-7{padding-bottom:1.75rem}
.pl-7{padding-left:1.75rem}
.pr-7{padding-right:1.75rem}
.m-7{margin:1.75rem}
.mt-7{margin-top:1.75rem}
.mb-7{margin-bottom:1.75rem}
.ml-7{margin-left:1.75rem}
.mr-7{margin-right:1.75rem}
.gap-7{gap:1.75rem}
.space-y-7>:not([hidden])~:not([hidden]){margin-top:1.75rem}
.p-8{padding:2rem}
.px-8{padding-left:2rem;padding-right:2rem}
.py-8{padding-top:2rem;padding-bottom:2rem}
.pt-8{padding-top:2rem}
.pb-8{padding-bottom:2rem}
.pl-8{padding-left:2rem}
.pr-8{padding-right:2rem}
.m-8{margin:2rem}
.mt-8{margin-top:2rem}
.mb-8{margin-bottom:2rem}
.ml-8{margin-left:2rem}
.mr-8{margin-right:2rem}
.gap-8{gap:2rem}
.space-y-8>:not([hidden])~:not([hidden]){margin-top:2rem}
.w-9{width:2.25rem}
.h-9{height:2.25rem}
.w-10{width:2.5rem}
.h-10{height:2.5rem}
.w-14{width:3.5rem}
.h-14{height:3.5rem}
.w-20{width:5rem}
.h-20{height:5rem}
.w-40{width:10rem}
.h-40{height:10rem}
.w-full{width:100%}
.max-w-sm{max-width:24rem}
.max-w-2xl{max-width:42rem}
.max-w-3xl{max-width:48rem}
.max-w-\[14rem\]{max-width:14rem}
.min-w-\[8rem\]{min-width:8rem}
.min-w-\[12rem\]{min-width:12rem}
.max-h-48{max-height:12rem}
.max-h-80{max-height:20rem}
.min-h-\[20rem\]{min-height:20rem}
.h-40{height:10rem}
.w-40{width:10rem}
.w-20{width:5rem}
.w-9{width:2.25rem}
.h-9{height:2.25rem}
.w-10{width:2.5rem}
.h-10{height:2.5rem}
.rounded{border-radius:.25rem}
.rounded-lg{border-radius:.5rem}
.rounded-xl{border-radius:.75rem}
.rounded-2xl{border-radius:1rem}
.rounded-full{border-radius:9999px}
.text-xs{font-size:.75rem;line-height:1rem}
.text-sm{font-size:.875rem;line-height:1.25rem}
.text-base{font-size:1rem}
.text-lg{font-size:1.125rem;line-height:1.75rem}
.text-xl{font-size:1.25rem;line-height:1.75rem}
.text-2xl{font-size:1.5rem;line-height:2rem}
.text-3xl{font-size:1.875rem;line-height:2.25rem}
.text-5xl{font-size:3rem;line-height:1}
.text-\[10px\]{font-size:10px;line-height:1.2}
.text-\[11px\]{font-size:11px;line-height:1.3}
.font-medium{font-weight:500}
.font-semibold{font-weight:600}
.font-bold{font-weight:700}
.font-extrabold{font-weight:800}
.text-white{color:#fff}
.text-slate-300{color:#cbd5e1}
.text-slate-400{color:#94a3b8}
.text-slate-500{color:#64748b}
.text-slate-600{color:#475569}
.text-slate-700{color:#334155}
.text-slate-800{color:#1e293b}
.text-slate-900{color:#0f172a}
.text-brand-300{color:#6ee7b7}
.text-brand-700{color:#047857}
.text-emerald-300{color:#6ee7b7}
.text-emerald-700{color:#047857}
.text-emerald-800{color:#065f46}
.text-rose-600{color:#e11d48}
.text-rose-700{color:#be123c}
.text-rose-800{color:#9f1239}
.text-amber-700{color:#b45309}
.text-amber-900{color:#78350f}
.text-amber-950{color:#451a03}
.text-indigo-300{color:#a5b4fc}
.text-indigo-600{color:#4f46e5}
.text-rose-800\/80{color:rgba(159,18,57,.8)}
.bg-white{background-color:#fff}
.bg-slate-50{background-color:#f8fafc}
.bg-slate-100{background-color:#f1f5f9}
.bg-slate-900{background-color:#0f172a}
.bg-brand-500{background-color:#10b981}
.bg-brand-600{background-color:#059669}
.bg-emerald-100{background-color:#d1fae5}
.bg-amber-50{background-color:#fffbeb}
.bg-amber-100{background-color:#fef3c7}
.bg-rose-50{background-color:#fff1f2}
.bg-rose-100{background-color:#ffe4e6}
.bg-blue-600{background-color:#2563eb}
.bg-pink-600{background-color:#db2777}
.bg-indigo-600{background-color:#4f46e5}
.bg-violet-600{background-color:#7c3aed}
.bg-violet-700{background-color:#6d28d9}
.bg-emerald-400{background-color:#34d399}
.bg-emerald-600{background-color:#059669}
.bg-emerald-700{background-color:#047857}
.bg-indigo-50{background-color:#eef2ff}
.text-indigo-900{color:#312e81}
.text-violet-900{color:#4c1d95}
.text-violet-950{color:#2e1065}
.text-violet-900\/80{color:rgba(76,29,149,.85)}
.border-violet-200{border-color:#ddd6fe}
.border-indigo-200{border-color:#c7d2fe}
.hover\:bg-violet-700:hover{background-color:#6d28d9}
.hover\:bg-emerald-800:hover{background-color:#065f46}
.hover\:bg-blue-700:hover{background-color:#1d4ed8}
.bg-white\/10{background-color:rgba(255,255,255,.1)}
.bg-white\/15{background-color:rgba(255,255,255,.15)}
.bg-brand-500\/20{background-color:rgba(16,185,129,.2)}
.bg-slate-50\/80{background-color:rgba(248,250,252,.8)}
.bg-rose-50\/50{background-color:rgba(255,241,242,.5)}
.bg-indigo-50\/40{background-color:rgba(238,242,255,.4)}
.bg-amber-50{background-color:#fffbeb}
.border-slate-100{border-color:#f1f5f9}
.border-slate-200{border-color:#e2e8f0}
.border-amber-100{border-color:#fef3c7}
.border-rose-100{border-color:#ffe4e6}
.border-indigo-100{border-color:#e0e7ff}
.border-brand-100{border-color:#d1fae5}
.border-white\/10{border-color:rgba(255,255,255,.1)}
.border-white\/15{border-color:rgba(255,255,255,.15)}
.border-white\/20{border-color:rgba(255,255,255,.2)}
.border-brand-100{border-color:#d1fae5}
.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-g1),var(--tw-g2),var(--tw-g3))}
.from-brand-500{--tw-g1:#10b981}
.to-brand-700{--tw-g3:#047857;--tw-g2:#059669}
.from-slate-900{--tw-g1:#0f172a}
.via-slate-900{--tw-g2:#0f172a}
.to-brand-900{--tw-g3:#064e3b}
.from-indigo-950{--tw-g1:#1e1b4b}
.to-brand-900{--tw-g3:#064e3b}
.bg-gradient-to-br.from-slate-900.via-slate-900.to-brand-900, .from-slate-900.via-slate-900.to-brand-900{background:linear-gradient(to bottom right,#0f172a,#0f172a,#064e3b)}
.from-indigo-950.via-slate-900.to-brand-900, .bg-gradient-to-br.from-indigo-950{background:linear-gradient(to bottom right,#1e1b4b,#0f172a,#064e3b)}
.from-brand-500.to-brand-700, .bg-gradient-to-br.from-brand-500{background:linear-gradient(to bottom right,#10b981,#047857)}
.hover\:bg-brand-50:hover{background-color:#ecfdf5}
.hover\:bg-brand-400:hover{background-color:#34d399}
.hover\:bg-brand-700:hover{background-color:#047857}
.hover\:bg-indigo-500:hover{background-color:#6366f1}
.hover\:bg-white\/15:hover{background-color:rgba(255,255,255,.15)}
.hover\:border-brand-300:hover{border-color:#6ee7b7}
.hover\:text-rose-700:hover{color:#be123c}
.hover\:text-slate-800:hover{color:#1e293b}
.hover\:underline:hover{text-decoration:underline}
.-right-8{right:-2rem}
.-top-8{top:-2rem}
.aspect-\[4\/5\]{aspect-ratio:4/5}
.sm\:col-span-2{/* base no-op */}
.lg\:col-span-2{/* base no-op */}

@media (min-width:640px){
  .sm\:inline-flex{display:inline-flex}
  .sm\:p-5{padding:1.25rem}
  .sm\:px-5{padding-left:1.25rem;padding-right:1.25rem}
  .sm\:text-sm{font-size:.875rem;line-height:1.25rem}
  .sm\:text-xl{font-size:1.25rem;line-height:1.75rem}
  .sm\:text-2xl{font-size:1.5rem;line-height:2rem}
  .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sm\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sm\:col-span-2{grid-column:span 2 / span 2}
}
@media (min-width:1024px){
  .lg\:hidden{display:none}
  .lg\:grid{display:grid}
  .lg\:border{border-width:1px;border-style:solid;border-color:rgba(15,23,42,.07)}
  .lg\:m-3{margin:.75rem}
  .lg\:pl-0{padding-left:0}
  .lg\:rounded-2xl{border-radius:1rem}
  .lg\:sticky{position:sticky}
  .lg\:top-3{top:.75rem}
  .lg\:col-span-2{grid-column:span 2 / span 2}
  .lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .lg\:grid-cols-\[260px_1fr\]{grid-template-columns:260px 1fr}
  .lg\:h-\[calc\(100vh-1\.5rem\)\]{height:calc(100vh - 1.5rem)}
}


.card {
  background:#fff; border:1px solid rgba(15,23,42,.07);
  box-shadow:0 1px 2px rgba(15,23,42,.04),0 10px 30px rgba(15,23,42,.05);
  border-radius:1rem;
}
.nav-btn {
  display:flex; align-items:center; gap:.55rem; width:100%;
  text-align:left; padding:.65rem .85rem; border-radius:.75rem;
  font-size:.875rem; font-weight:500; color:#475569; background:transparent; border:0;
}
.nav-btn:hover { background:#f1f5f9; color:#0f172a; }
.nav-btn.active { background:#ecfdf5; color:#047857; box-shadow:inset 0 0 0 1px #a7f3d0; }
.field {
  width:100%; border:1px solid #e2e8f0; border-radius:.75rem;
  padding:.6rem .85rem; font-size:.875rem; background:#fff; outline:none;
}
.field:focus { border-color:#34d399; box-shadow:0 0 0 3px rgba(16,185,129,.15); }
.lbl { display:block; font-size:.7rem; font-weight:700; color:#64748b; margin-bottom:.3rem; text-transform:uppercase; letter-spacing:.04em; }
.chip {
  display:inline-flex; align-items:center; gap:.3rem; padding:.35rem .7rem;
  border-radius:999px; font-size:.75rem; font-weight:700; border:1px solid #cbd5e1;
  background:#fff; color:#0f172a; cursor:pointer;
}
.chip.active, .chip:hover { border-color:#059669; background:#ecfdf5; color:#065f46; }
.outbox {
  white-space:pre-wrap; word-break:break-word; background:#0f172a; color:#e2e8f0;
  border-radius:.9rem; padding:1rem; font-size:.84rem; line-height:1.55; min-height:5rem;
}
.toast {
  position:fixed !important;
  left:50% !important;
  bottom:1.5rem !important;
  right:auto !important;
  transform:translateX(-50%) translateY(120%);
  z-index:99999 !important;
  background:#0f172a;
  color:#fff;
  padding:.85rem 1.15rem;
  border-radius:.85rem;
  font-size:.9rem;
  font-weight:600;
  max-width:min(92vw, 36rem);
  box-shadow:0 12px 40px rgba(0,0,0,.35);
  opacity:0;
  transition:opacity .2s, transform .2s;
  pointer-events:none;
}
.toast.show {
  transform:translateX(-50%) translateY(0);
  opacity:1 !important;
}
.stat { padding:1rem; border-radius:.9rem; background:#f8fafc; border:1px solid #e2e8f0; }

/* —— Feature Lab (calm, compact) —— */
.fl-grid { display:flex; flex-direction:column; gap:.75rem; }
.fl-card {
  background:#fff; border:1px solid #e2e8f0; border-radius:1rem;
  box-shadow:0 1px 2px rgba(15,23,42,.04); overflow:hidden;
}
.fl-card.fl-today { border-color:#6ee7b7; box-shadow:0 0 0 1px #a7f3d0, 0 8px 24px rgba(16,185,129,.08); }
.fl-row {
  display:flex; flex-wrap:wrap; align-items:center; gap:.85rem;
  padding:.9rem 1rem;
}
.fl-thumb {
  width:72px !important; height:72px !important; max-width:72px !important;
  object-fit:cover; border-radius:.75rem; border:1px solid #e2e8f0;
  background:#f8fafc; flex-shrink:0; display:block;
}
.fl-thumb-missing { opacity:.45; }
.fl-main { flex:1 1 12rem; min-width:0; }
.fl-title-row { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; }
.fl-emoji { font-size:1.1rem; line-height:1; }
.fl-name { font-size:.95rem; font-weight:700; color:#0f172a; margin:0; }
.fl-tier {
  font-size:.62rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
  padding:.15rem .45rem; border-radius:999px;
}
.fl-tier-free { background:#ecfdf5; color:#047857; }
.fl-tier-pro { background:#f5f3ff; color:#6d28d9; }
.fl-badge-today {
  font-size:.62rem; font-weight:800; text-transform:uppercase;
  padding:.15rem .45rem; border-radius:999px; background:#059669; color:#fff;
}
.fl-hook {
  margin:.35rem 0 0; font-size:.82rem; color:#475569; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.fl-meta { margin:.25rem 0 0; font-size:.7rem; color:#94a3b8; }
.fl-actions {
  display:flex; flex-direction:column; gap:.4rem; flex-shrink:0;
}
.fl-actions-inline { flex-direction:row; flex-wrap:wrap; margin-top:.5rem; }
.fl-btn-primary {
  border:0; border-radius:.7rem; padding:.5rem .85rem;
  background:#059669; color:#fff; font-size:.78rem; font-weight:700; cursor:pointer;
  white-space:nowrap;
}
.fl-btn-primary:hover { background:#047857; }
.fl-btn-ghost {
  border:1px solid #e2e8f0; border-radius:.7rem; padding:.45rem .75rem;
  background:#fff; color:#334155; font-size:.75rem; font-weight:600; cursor:pointer;
}
.fl-btn-ghost:hover { background:#f8fafc; border-color:#cbd5e1; }
.fl-advanced {
  border-top:1px solid #f1f5f9; background:#fafbfc;
  font-size:.8rem; color:#64748b;
}
.fl-advanced > summary {
  cursor:pointer; padding:.55rem 1rem; font-weight:600; color:#64748b;
  list-style:none; user-select:none;
}
.fl-advanced > summary::-webkit-details-marker { display:none; }
.fl-advanced > summary::before { content:'▸ '; color:#94a3b8; }
.fl-advanced[open] > summary::before { content:'▾ '; }
.fl-advanced-body { padding:0 1rem 1rem; }
.fl-desc { margin:.35rem 0; font-size:.8rem; color:#475569; line-height:1.4; }
.fl-desc span { display:inline-block; min-width:4.2rem; font-weight:700; color:#94a3b8; font-size:.68rem; text-transform:uppercase; letter-spacing:.03em; }
.fl-fields { display:grid; gap:.6rem; margin-top:.65rem; }
@media (min-width:640px) { .fl-fields { grid-template-columns:1fr 1fr; } }
.fl-blueprint { margin-top:.65rem; }
.fl-blueprint > summary { cursor:pointer; font-weight:600; color:#64748b; font-size:.75rem; }
.fl-pre {
  margin-top:.4rem; white-space:pre-wrap; word-break:break-word;
  background:#fff; border:1px solid #e2e8f0; border-radius:.75rem;
  padding:.75rem; font-size:.72rem; font-family:ui-sans-serif,system-ui,sans-serif;
  color:#475569; max-height:10rem; overflow:auto;
}
@media (max-width:639px) {
  .fl-actions { width:100%; flex-direction:row; }
  .fl-btn-primary, .fl-btn-ghost { flex:1; text-align:center; }
}

/* size utilities used by dashboard thumbs */
.w-14{width:3.5rem}.h-14{height:3.5rem}
.w-16{width:4rem}.h-16{height:4rem}
.w-20{width:5rem}.h-20{height:5rem}
.object-cover{object-fit:cover}
.shrink-0{flex-shrink:0}
.overflow-hidden{overflow:hidden}

/* —— Review board (preview → edit → approve → push) —— */
.rv-card {
  background:#fff; border:1px solid #e2e8f0; border-radius:1rem;
  box-shadow:0 1px 2px rgba(15,23,42,.04); padding:1rem 1.1rem 1.1rem;
}
.rv-card.rv-approved { border-color:#7dd3fc; box-shadow:0 0 0 1px #bae6fd; }
.rv-card.rv-failed { border-color:#fca5a5; }
.rv-card.rv-pushed { border-color:#6ee7b7; }
.rv-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.75rem; }
.rv-head-left { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; }
.rv-title { font-size:.9rem; font-weight:700; color:#0f172a; }
.rv-chip { font-size:.62rem; font-weight:800; text-transform:uppercase; letter-spacing:.03em; padding:.15rem .45rem; border-radius:999px; background:#f1f5f9; color:#475569; }
.rv-chip-fmt { background:#eef2ff; color:#4338ca; }
.rv-alert { margin:.5rem 0 .75rem; padding:.75rem 1rem; border-radius:.75rem; font-size:.85rem; font-weight:600; white-space:pre-wrap; }
.rv-alert-fail { background:#fff1f2; border:1px solid #fecdd3; color:#9f1239; }
.rv-alert-ok { background:#ecfdf5; border:1px solid #a7f3d0; color:#065f46; }
.rv-body { display:grid; gap:1rem; }
@media (min-width:900px) {
  .rv-body { grid-template-columns: minmax(240px, 42%) 1fr; align-items:start; }
}
.rv-media { min-width:0; }
.rv-image-wrap, .rv-video-wrap {
  background:#0f172a; border-radius:.9rem; overflow:hidden; border:1px solid #e2e8f0;
}
.rv-image {
  display:block; width:100%; max-height:420px; object-fit:contain; background:#0f172a;
}
.rv-video {
  display:block; width:100%; max-height:480px; background:#000;
}
.rv-media-label {
  font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:#64748b; padding:.4rem .65rem; background:#f8fafc; border-top:1px solid #e2e8f0;
}
.rv-slides { margin-top:.65rem; }
.rv-slides-row { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.35rem; }
.rv-slides-row img {
  width:64px; height:64px; object-fit:cover; border-radius:.5rem; border:1px solid #e2e8f0;
}
.rv-urls { display:grid; gap:.5rem; margin-top:.65rem; }
.rv-copy { min-width:0; }
.rv-caption { min-height:10rem; font-size:.9rem; line-height:1.45; }
.rv-notes { margin-top:.65rem; font-size:.8rem; color:#64748b; }
.rv-notes > summary { cursor:pointer; font-weight:600; }
.rv-pre {
  margin-top:.4rem; white-space:pre-wrap; word-break:break-word;
  background:#f8fafc; border:1px solid #e2e8f0; border-radius:.75rem;
  padding:.75rem; font-size:.75rem; font-family:ui-sans-serif,system-ui,sans-serif;
  color:#475569; max-height:12rem; overflow:auto;
}
.rv-actions { display:flex; flex-wrap:wrap; gap:.45rem; margin-top:1rem; padding-top:.75rem; border-top:1px solid #f1f5f9; }
.rv-btn {
  border-radius:.7rem; padding:.55rem .9rem; font-size:.8rem; font-weight:700; cursor:pointer;
  border:1px solid #cbd5e1; background:#fff; color:#0f172a;
}
.rv-btn:hover { background:#f8fafc; border-color:#94a3b8; }
.rv-btn-save { border-color:#94a3b8; background:#f1f5f9; color:#0f172a; }
.rv-btn-save:hover { background:#e2e8f0; }
.rv-btn-approve { background:#0284c7; border-color:#0284c7; color:#fff !important; }
.rv-btn-approve:hover { background:#0369a1; color:#fff !important; }
.rv-btn-push { background:#059669; border-color:#059669; color:#fff !important; }
.rv-btn-push:hover { background:#047857; color:#fff !important; }
.rv-btn-ghost { background:#fff; color:#0f172a; border-color:#cbd5e1; }
.rv-btn-ghost:hover { background:#f8fafc; }
.rv-btn-danger { color:#be123c !important; border-color:#fecdd3; background:#fff1f2; }
.rv-btn-danger:hover { background:#ffe4e6; }

/* Generate media chooser modal */
.gen-modal {
  display:none; position:fixed; inset:0; z-index:100000;
  align-items:center; justify-content:center; padding:1rem;
}
.gen-modal.show { display:flex; }
.gen-modal-backdrop {
  position:absolute; inset:0; background:rgba(15,23,42,.45);
}
.gen-modal-panel {
  position:relative; z-index:1; width:min(28rem, 100%);
  padding:1.25rem 1.35rem; max-height:90vh; overflow:auto;
}
.gen-choices { display:flex; flex-direction:column; gap:.55rem; }
.gen-choice {
  text-align:left; border:1px solid #e2e8f0; border-radius:.85rem;
  padding:.85rem 1rem; background:#fff; cursor:pointer;
}
.gen-choice:hover, .gen-choice.gen-choice-active {
  border-color:#6ee7b7; background:#ecfdf5;
}
.gen-choice-title { display:block; font-weight:700; font-size:.9rem; color:#0f172a; }
.gen-choice-sub { display:block; font-size:.75rem; color:#64748b; margin-top:.2rem; }

/* Own media upload */
.rv-upload-row { display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.75rem; }
.rv-upload-btn {
  display:inline-flex; align-items:center; cursor:pointer;
  border:1px dashed #94a3b8; border-radius:.7rem; padding:.5rem .85rem;
  font-size:.78rem; font-weight:700; color:#0f172a; background:#f8fafc;
}
.rv-upload-btn:hover { border-color:#059669; background:#ecfdf5; color:#047857; }
.rv-upload-vid { border-color:#a5b4fc; }
.rv-upload-vid:hover { border-color:#6366f1; background:#eef2ff; color:#4338ca; }
.media-lib-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:.75rem;
}
.media-lib-item {
  border:1px solid #e2e8f0; border-radius:.85rem; overflow:hidden; background:#fff;
}
.media-lib-item img, .media-lib-item video {
  width:100%; height:110px; object-fit:cover; display:block; background:#0f172a;
}
.media-lib-meta { padding:.5rem .6rem .65rem; }
.media-lib-actions { display:flex; flex-wrap:wrap; gap:.25rem; margin-top:.35rem; }
.media-lib-actions .rv-btn { padding:.3rem .5rem; font-size:.68rem; }
.pulse-dot {
  width:.55rem; height:.55rem; border-radius:999px; background:#10b981;
  box-shadow:0 0 0 0 rgba(16,185,129,.5); animation:dash-pulse 1.6s infinite;
}
.pulse-dot.off { background:#94a3b8; box-shadow:none; animation:none; }
@keyframes dash-pulse {
  0% { box-shadow:0 0 0 0 rgba(16,185,129,.45); }
  70% { box-shadow:0 0 0 8px rgba(16,185,129,0); }
  100% { box-shadow:0 0 0 0 rgba(16,185,129,0); }
}
.platform-badge {
  font-size:.65rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  padding:.2rem .5rem; border-radius:.4rem;
}
.plat-facebook { background:#dbeafe; color:#1d4ed8; }
.plat-instagram { background:#fce7f3; color:#be185d; }
.plat-tiktok { background:#f1f5f9; color:#0f172a; }
.plat-site { background:#d1fae5; color:#047857; }
.plat-ad { background:#fef3c7; color:#b45309; }
.conn-ok { color:#047857; }
.conn-off { color:#94a3b8; }
.sidebar-open { transform: translateX(0) !important; }
.auto-log {
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.72rem; line-height:1.45; max-height:12rem; overflow:auto;
  background:#0f172a; color:#86efac; border-radius:.75rem; padding:.75rem 1rem;
}
.toggle {
  position:relative; width:2.6rem; height:1.45rem; border-radius:999px;
  background:#cbd5e1; transition:.2s; border:none; cursor:pointer;
}
.toggle.on { background:#059669; }
.toggle::after {
  content:''; position:absolute; top:.15rem; left:.15rem; width:1.15rem; height:1.15rem;
  border-radius:999px; background:#fff; transition:.2s; box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.toggle.on::after { left:1.3rem; }
.flyer-sheet {
  width:100%; max-width:420px; margin:0 auto; aspect-ratio:4/5;
  border-radius:1.25rem; overflow:hidden; position:relative; color:#fff;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:1.75rem; box-shadow:0 20px 50px rgba(15,23,42,.25);
}
.flyer-sheet.theme-emerald { background:linear-gradient(145deg,#064e3b 0%,#059669 55%,#10b981 100%); }
.flyer-sheet.theme-slate { background:linear-gradient(145deg,#0f172a 0%,#1e293b 55%,#334155 100%); }
.flyer-sheet.theme-sunset { background:linear-gradient(145deg,#7c2d12 0%,#ea580c 50%,#f59e0b 100%); }
.flyer-sheet.theme-indigo { background:linear-gradient(145deg,#312e81 0%,#4f46e5 55%,#818cf8 100%); }
@media (max-width:1023px) {
  .side-nav {
    position:fixed; inset:0 auto 0 0; width:16.5rem; z-index:50;
    transform:translateX(-105%); transition:transform .2s; box-shadow:12px 0 40px rgba(15,23,42,.15);
  }
  .side-backdrop {
    position:fixed; inset:0; background:rgba(15,23,42,.4); z-index:40;
    opacity:0; pointer-events:none; transition:opacity .2s;
  }
  .side-backdrop.show { opacity:1; pointer-events:auto; }
}
@media (min-width:1024px) {
  .side-nav { transform:none !important; }
  .side-backdrop { display:none !important; }
}
/* solid primary buttons that only had utility classes */
/* —— Button contrast: solid = white text; outline = dark text (never grey-on-grey) —— */
button.bg-brand-600, a.bg-brand-600,
button.bg-brand-500, a.bg-brand-500 { background-color:#059669; color:#fff !important; border:0; }
button.bg-brand-600:hover, a.bg-brand-600:hover { background-color:#047857; color:#fff !important; }
button.bg-indigo-600 { background-color:#4f46e5; color:#fff !important; border:0; }
button.bg-indigo-600:hover { background-color:#4338ca; color:#fff !important; }
button.bg-blue-600 { background-color:#2563eb; color:#fff !important; border:0; }
button.bg-blue-600:hover { background-color:#1d4ed8; color:#fff !important; }
button.bg-pink-600 { background-color:#db2777; color:#fff !important; border:0; }
button.bg-slate-900 { background-color:#0f172a; color:#fff !important; border:0; }
button.bg-violet-600 { background-color:#7c3aed; color:#fff !important; border:0; }
button.bg-violet-600:hover,
button.hover\:bg-violet-700:hover { background-color:#6d28d9; color:#fff !important; }
button.bg-emerald-700 { background-color:#047857; color:#fff !important; border:0; }
button.bg-emerald-700:hover { background-color:#065f46; color:#fff !important; }
button.bg-emerald-600 { background-color:#059669; color:#fff !important; border:0; }
button.bg-emerald-400 { background-color:#34d399; color:#0f172a !important; border:0; font-weight:700; }

/* Outline / grey-border buttons: readable dark text on white */
button.border.border-slate-200,
button.border-slate-200 {
  background:#fff;
  color:#0f172a !important;
  border:1px solid #cbd5e1;
  font-weight:600;
}
button.border.border-slate-200:hover,
button.border-slate-200:hover {
  background:#f8fafc;
  border-color:#94a3b8;
  color:#0f172a !important;
}
button.border.border-indigo-200,
button.bg-indigo-50 {
  background:#eef2ff !important;
  color:#312e81 !important;
  border:1px solid #c7d2fe;
  font-weight:600;
}
button.border.border-rose-200,
button.text-rose-700 {
  color:#be123c !important;
}


/* v710 growth engine */
#growth-engine-root .card { border-radius: 1rem; }
#growth-engine-root pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }


/* v720 Marketing Manager */
#mm-root .card { border-radius: 1rem; }
#mm-root pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; line-height: 1.45; }
#mm-root .line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* v740 marketing org roles */
#cm-root .card, #mh-root .card, #pb-root .card { border-radius: 1rem; }

/* ═══ Creative Studio modern shell (2026) ═══ */
#view-flyer.cs-app {
  --cs-bg: #0b0f14;
  --cs-panel: #121820;
  --cs-panel-2: #171e28;
  --cs-line: rgba(255,255,255,0.08);
  --cs-text: #e8eef6;
  --cs-muted: #8b9bb0;
  --cs-accent: #34d399;
  --cs-accent-2: #2dd4bf;
  margin: -0.25rem;
  padding: 0.75rem;
  border-radius: 1.25rem;
  background:
    radial-gradient(900px 400px at 10% -10%, rgba(52,211,153,0.12), transparent 55%),
    radial-gradient(700px 320px at 90% 0%, rgba(56,189,248,0.08), transparent 50%),
    var(--cs-bg);
  color: var(--cs-text);
  min-height: calc(100vh - 6rem);
}
#view-flyer.cs-app .lbl,
#view-flyer.cs-app .cs-field .lbl {
  display: block;
  color: #9fb0c5 !important;
  font-size: 11px !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0 0 0.35rem;
}
#view-flyer.cs-app .field,
#view-flyer.cs-app input.field,
#view-flyer.cs-app textarea.field,
#view-flyer.cs-app select.field {
  display: block;
  width: 100%;
  min-height: 2.55rem;
  background: #0a0e13 !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  color: #f1f5f9 !important;
  border-radius: 0.75rem;
  box-shadow: none !important;
  padding: 0.55rem 0.75rem;
  font-size: 14px;
  line-height: 1.35;
  -webkit-appearance: none;
  appearance: none;
}
#view-flyer.cs-app textarea.field,
#view-flyer.cs-app .cs-ta {
  min-height: 4.5rem;
  resize: vertical;
}
#view-flyer.cs-app .field:focus {
  border-color: rgba(52,211,153,0.65) !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(52,211,153,0.15) !important;
}
#view-flyer.cs-app select.field {
  background-image: linear-gradient(45deg, transparent 50%, #94a3b8 50%), linear-gradient(135deg, #94a3b8 50%, transparent 50%) !important;
  background-position: calc(100% - 16px) 1.15em, calc(100% - 11px) 1.15em !important;
  background-size: 5px 5px, 5px 5px !important;
  background-repeat: no-repeat !important;
  padding-right: 2rem;
  color: #f8fafc !important;
}
#view-flyer.cs-app select.field option {
  background: #0f172a;
  color: #f8fafc;
}
#view-flyer.cs-app input[type="range"] {
  width: 100%;
  accent-color: #10b981;
  height: 1.4rem;
}
#view-flyer.cs-app input[type="color"].field,
#view-flyer.cs-app .cs-color {
  min-height: 2.55rem;
  padding: 0.2rem;
  cursor: pointer;
}
#view-flyer.cs-app .card {
  background: var(--cs-panel);
  border: 1px solid var(--cs-line);
  color: var(--cs-text);
  box-shadow: none;
}
#view-flyer.cs-app .cs-field {
  display: block;
  margin-bottom: 0.15rem;
}

.cs-topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  padding: 0.75rem 1rem;
  margin-bottom: 0.85rem;
  border-radius: 1rem;
  background: rgba(18,24,32,0.9);
  border: 1px solid var(--cs-line);
  backdrop-filter: blur(12px);
}
.cs-topbar-left { display: flex; align-items: center; gap: 0.7rem; min-width: 10rem; }
.cs-logo-mark {
  width: 2.25rem; height: 2.25rem;
  border-radius: 0.7rem;
  display: grid; place-items: center;
  font-weight: 900; font-size: 0.75rem; letter-spacing: 0.04em;
  background: linear-gradient(135deg, #10b981, #0ea5e9);
  color: #041016;
  box-shadow: 0 8px 20px rgba(16,185,129,0.25);
}
.cs-topbar-title { font-weight: 800; font-size: 0.98rem; letter-spacing: -0.02em; }
.cs-topbar-sub { font-size: 11px; color: var(--cs-muted); margin-top: 1px; }
.cs-topbar .cs-tabs { margin: 0 auto; }
.cs-topbar-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-left: auto; }

.cs-btn {
  border: 1px solid var(--cs-line);
  background: #1a222d;
  color: var(--cs-text);
  border-radius: 0.7rem;
  padding: 0.5rem 0.85rem;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s;
}
.cs-btn:hover { background: #222c3a; border-color: rgba(255,255,255,0.14); }
.cs-btn-primary {
  background: linear-gradient(135deg, #10b981, #14b8a6);
  border-color: transparent;
  color: #042f2e;
}
.cs-btn-primary:hover { filter: brightness(1.05); }
.cs-btn-ghost { background: transparent; }

#view-flyer .cs-tabs {
  display: inline-flex;
  padding: 0.25rem;
  gap: 0.2rem;
  border-radius: 999px;
  background: #0a0e13;
  border: 1px solid var(--cs-line);
}
#view-flyer .cs-tab {
  border: 0;
  background: transparent;
  color: var(--cs-muted);
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
#view-flyer .cs-tab:hover { color: var(--cs-text); }
#view-flyer .cs-tab.is-active {
  background: #1f2a37;
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}

.cs-controls {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-height: none; /* never clip form fields */
  overflow: visible;
  padding-right: 0.1rem;
  min-width: 0;
}
@media (min-width: 768px) {
  .cs-controls {
    max-height: calc(100vh - 7.5rem);
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0.35rem;
    scrollbar-width: thin;
    scrollbar-color: #334155 transparent;
  }
}
/* Always-open complete sections (no broken accordions) */
.cs-section {
  background: #121820;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 1rem;
  overflow: visible;
}
.cs-sec-head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.85rem 1rem 0.55rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.cs-sec-title {
  font-weight: 800;
  font-size: 0.98rem;
  color: #f8fafc;
  letter-spacing: -0.02em;
}
.cs-sec-sub {
  font-size: 11px;
  color: #8b9bb0;
  margin-top: 0.1rem;
}
.cs-sec-body {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0.9rem 1rem 1.05rem;
  overflow: visible;
}
.cs-panel-ico {
  width: 1.7rem; height: 1.7rem;
  border-radius: 0.5rem;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 900;
  background: #1a2430;
  color: #34d399;
  border: 1px solid rgba(255,255,255,0.1);
  flex-shrink: 0;
}
.cs-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.25rem;
}
.cs-type-block {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 0.85rem;
  padding: 0.7rem 0.75rem 0.8rem;
  background: rgba(0,0,0,0.2);
}
.cs-type-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6ee7b7;
  margin-bottom: 0.5rem;
}
#cs-sec-type .cs-row2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 900px) {
  #cs-sec-type .cs-type-block:first-of-type .cs-row2 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.cs-chip-btn {
  border: 1px solid rgba(255,255,255,0.12);
  background: #161d27;
  color: #cbd5e1;
  border-radius: 999px;
  padding: 0.35rem 0.7rem;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.cs-chip-btn:hover { color: #fff; border-color: rgba(255,255,255,0.2); }
.cs-chip-danger { color: #fca5a5; }
.cs-action-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.35rem; }
.cs-url-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.45rem;
  margin-top: 0.55rem;
}
.cs-feature-box {
  margin-top: 0.35rem;
  padding: 0.75rem;
  border-radius: 0.9rem;
  border: 1px solid rgba(52,211,153,0.22);
  background: rgba(16,185,129,0.06);
}
.cs-feature-box .cs-btn-row { margin-top: 0.55rem; }
#cs-feature {
  font-weight: 600;
}
.cs-drop-hint {
  margin: 0.45rem 0 0;
  font-size: 11px;
  color: #7c8da1;
  text-align: center;
}
#view-flyer .cs-drop-btn {
  width: 100%;
  min-height: 3rem;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  pointer-events: auto;
}
#view-flyer .cs-img-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  min-height: 3.2rem;
  padding: 0.35rem 0;
}

#view-flyer .cs-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.6rem, 1fr));
  gap: 0.4rem;
}
#view-flyer .cs-swatch {
  height: 2.6rem;
  border-radius: 0.65rem;
  border: 2px solid transparent;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
}
#view-flyer .cs-swatch span {
  font-size: 8px;
  bottom: 0.2rem;
  left: 0.3rem;
  right: 0.2rem;
  opacity: 0.95;
}
#view-flyer .cs-swatch.is-on {
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(52,211,153,0.45);
  transform: none;
}
#view-flyer .cs-drop {
  border: 1px dashed rgba(255,255,255,0.14);
  background: #0a0e13;
  border-radius: 0.9rem;
}
#view-flyer .cs-drop.is-drag {
  border-color: var(--cs-accent);
  background: rgba(16,185,129,0.08);
}
#view-flyer .cs-drop-btn {
  background: linear-gradient(135deg, #1f2937, #111827);
  border-radius: 0.7rem;
  font-size: 12px;
}
#view-flyer .cs-thumb {
  border-radius: 0.55rem;
  border: 2px solid transparent;
  background: #0a0e13;
}
#view-flyer .cs-thumb.is-on, #view-flyer .cs-thumb:hover {
  border-color: var(--cs-accent);
}

.cs-stage {
  background: #0a0e13;
  border: 1px solid var(--cs-line);
  border-radius: 1.1rem;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 18px 18px;
  background-position: -1px -1px;
}
.cs-stage-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.cs-stage-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cs-muted);
}
.cs-stage-meta {
  font-size: 11px;
  font-weight: 600;
  color: #cbd5e1;
  margin-top: 0.1rem;
}
.cs-status-pill {
  font-size: 10px;
  font-weight: 700;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  background: rgba(52,211,153,0.12);
  color: #6ee7b7;
  border: 1px solid rgba(52,211,153,0.25);
}
.cs-fab-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: center;
}
.cs-fab {
  border: 1px solid var(--cs-line);
  background: #151c26;
  color: #e2e8f0;
  border-radius: 999px;
  padding: 0.4rem 0.8rem;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.cs-fab:hover { background: #1c2633; }
.cs-fab-accent {
  background: linear-gradient(135deg, #10b981, #14b8a6);
  border-color: transparent;
  color: #042f2e;
}
.cs-fab-push {
  background: linear-gradient(135deg, #0ea5e9, #6366f1);
  border-color: transparent;
  color: #fff;
}
.cs-fab-push:hover { filter: brightness(1.08); background: linear-gradient(135deg, #0ea5e9, #6366f1); }

/* Live video sits over phone screen area of canvas */
.cs-canvas-frame {
  position: relative;
}
.cs-phone-video-slot {
  position: absolute;
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
  background: #000;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}
.cs-phone-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
  pointer-events: none;
}
.cs-phone-video-slot:not([hidden]) {
  pointer-events: auto;
}
.cs-phone-video-slot:not([hidden]) .cs-phone-video {
  pointer-events: auto;
}

/* Push PNG/MP4 → Pages */
.cs-push-box {
  margin-top: 0.85rem;
  padding: 0.85rem 0.9rem;
  border-radius: 0.95rem;
  border: 1px solid rgba(99,102,241,0.35);
  background: linear-gradient(145deg, rgba(14,165,233,0.08), rgba(99,102,241,0.1));
}
.cs-push-box .cs-type-label {
  color: #a5b4fc;
  margin-bottom: 0.25rem;
}
.cs-push-box .cs-btn-row {
  margin-top: 0.55rem;
  flex-wrap: wrap;
}
.cs-push-box #cs-push-status-msg {
  margin-top: 0.5rem;
  color: #94a3b8;
  word-break: break-all;
}
.cs-drop-btn-alt {
  margin-top: 0.4rem;
  background: linear-gradient(135deg, #1e3a5f, #0f172a) !important;
  border: 1px solid rgba(56,189,248,0.25);
}
.cs-muted {
  font-size: 11px;
  color: #7c8da1;
  font-weight: 600;
}

#view-flyer .cs-nudge {
  background: var(--cs-panel);
  border: 1px solid var(--cs-line);
  border-radius: 1rem;
  padding: 0.75rem 0.85rem;
}
#view-flyer .cs-nudge-title {
  color: var(--cs-muted);
  letter-spacing: 0.08em;
}
#view-flyer .cs-nudge-item { color: var(--cs-muted); }
#view-flyer .cs-nudge-item b { color: #fff; }
#view-flyer .cs-nudge-item input[type="range"] { accent-color: #10b981; }
#view-flyer .cs-color {
  border: 1px solid var(--cs-line);
  background: #0a0e13;
}

/* v791+ workbench layout */
.cs-workbench {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  align-items: start;
}
/* Phone: preview first + sticky while scrolling controls */
@media (max-width: 767px) {
  .cs-workbench {
    display: flex;
    flex-direction: column;
  }
  .cs-preview-pane {
    order: -1;
    position: sticky;
    top: 0;
    z-index: 20;
    max-height: min(72vh, 34rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 12px 30px rgba(15,23,42,.12);
  }
  .cs-preview-stage {
    max-width: 16.5rem;
    margin: 0 auto;
  }
}
/* iPad + small laptop: true side-by-side */
@media (min-width: 768px) {
  .cs-workbench {
    grid-template-columns: minmax(0, 1.05fr) minmax(17.5rem, 0.95fr);
    gap: 1rem;
  }
  .cs-preview-pane {
    position: sticky;
    top: 0.65rem;
    max-height: calc(100vh - 1.25rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    align-self: start;
  }
}
/* Wide PC: roomier preview column */
@media (min-width: 1200px) {
  .cs-workbench {
    grid-template-columns: minmax(0, 1.1fr) minmax(20rem, 0.9fr);
  }
  .cs-preview-stage { max-width: 22rem; }
}
.cs-preview-pane {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.cs-preview-head {
  display: none;
}
.cs-canvas-frame {
  width: 100%;
  max-width: 22rem;
  margin: 0 auto;
  height: 350px;
  max-height: min(50vh, 480px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 1rem;
}
#flyer-preview-canvas {
  display: block;
  border-radius: 0.95rem;
  box-shadow: 0 18px 50px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06);
  background: #05080c;
  /* width/height set in JS — never raw 1350px on screen */
  max-width: 100%;
}
.cs-hint {
  margin: 0;
  text-align: center;
  font-size: 10px;
  color: #6b7c90;
  line-height: 1.35;
}
.cs-row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
  margin-top: 0.45rem;
}
.cs-row2 > div:only-child,
.cs-panel-body > .cs-row2 > .cs-btn { width: auto; }
.cs-lib-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0.55rem 0 0.3rem;
  font-size: 11px;
  font-weight: 700;
  color: #8b9bb0;
}
.cs-empty { font-size: 11px; color: #64748b; }
.cs-thumb {
  position: relative;
  width: 3.1rem;
  height: 3.1rem;
}
.cs-thumb-x {
  position: absolute;
  top: -4px; right: -4px;
  width: 1rem; height: 1rem;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  line-height: 1rem;
  text-align: center;
  display: none;
}
.cs-thumb:hover .cs-thumb-x { display: block; }
.cs-status-pill.on {
  background: rgba(52,211,153,0.15);
  color: #6ee7b7;
}
.cs-preview-pane {
  max-height: calc(100vh - 1.5rem);
  overflow-x: hidden;
  overflow-y: auto;
}
@media (max-width: 900px) {
  .cs-topbar-actions .cs-btn-ghost:not(:last-child) { display: none; }
  .cs-row2 { grid-template-columns: 1fr; }
}
.cs-nudge {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.95rem;
  padding: 0.75rem 0.8rem;
}
.cs-nudge-title {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
  margin-bottom: 0.5rem;
}
.cs-nudge-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem 0.65rem;
}
.cs-nudge-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 11px;
  font-weight: 600;
  color: #475569;
}
.cs-nudge-item b { color: #0f172a; font-weight: 800; }
.cs-nudge-item input[type="range"] {
  width: 100%;
  accent-color: #059669;
  height: 1.25rem;
}
.cs-nudge-selects { margin-top: 0.45rem; }
@media (max-width: 380px) {
  .cs-nudge-grid { grid-template-columns: 1fr; }
}

#flyer-preview.flyer-canvas {
  box-shadow: 0 28px 55px -12px rgba(15, 23, 42, 0.4), 0 0 0 1px rgba(255,255,255,0.08) inset;
  transition: aspect-ratio .2s ease;
  max-height: min(38rem, 70vh);
  background: transparent;
  width: 100%;
}
#flyer-preview .flyer-bg {
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(145deg,#022c22,#064e3b 40%,#0f766e);
}
#flyer-preview .flyer-mesh {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  transition: opacity .2s;
}
#flyer-preview .flyer-grain {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}
#flyer-preview .flyer-grain.grain-strong { opacity: .1; }
#flyer-preview .flyer-content { position: relative; z-index: 4; pointer-events: none; }
#flyer-preview.is-light { color: #0f172a !important; }
#flyer-preview.is-light #fp-sub,
#flyer-preview.is-light #fp-eyebrow,
#flyer-preview.is-light #fp-foot-l,
#flyer-preview.is-light #fp-foot-r { color: rgba(15,23,42,.65) !important; }
#flyer-preview.layout-bold .flyer-top { text-align: center; display: flex; flex-direction: column; align-items: center; }
#flyer-preview.layout-bold #fp-sub { margin-left: auto; margin-right: auto; }
#flyer-preview.layout-minimal #fp-glass { background: transparent; border: 0; backdrop-filter: none; box-shadow: none; padding-left: 0; padding-right: 0; }
#flyer-preview.layout-magazine #fp-headline { letter-spacing: -0.03em; max-width: 90%; }
#flyer-preview.layout-product .flyer-top { max-width: 92%; }

/* Screenshot layer */
.flyer-shot {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(var(--shot-x, 0), var(--shot-y, 0)) scale(var(--shot-scale, 0.72));
  transform-origin: center center;
  transition: transform .15s ease, opacity .15s ease;
  pointer-events: none;
}
/* Phone mockups use taller aspect so they look like phones */
.flyer-shot.place-phone {
  width: 38%; height: 62%;
  left: 31%; top: 24%;
}
.flyer-shot.place-phone-right {
  width: 36%; height: 64%;
  left: 54%; top: 16%;
}
.flyer-shot.place-float {
  width: 62%; height: 38%;
  left: 19%; top: 32%;
}
.flyer-shot.place-hero-bottom {
  width: 72%; height: 42%;
  left: 14%; top: 42%;
}
.flyer-shot.place-side {
  width: 44%; height: 55%;
  left: 52%; top: 22%;
}
.flyer-shot.place-bg,
.flyer-shot.place-full {
  inset: 0; width: 100%; height: 100%;
  left: 0; top: 0;
  transform: none !important;
}
.flyer-shot.place-bg { opacity: 0.4; z-index: 1; }
.flyer-shot.place-bg .flyer-shot-frame,
.flyer-shot.place-full .flyer-shot-frame {
  width: 100%; height: 100%;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}
.flyer-shot.place-none { display: none !important; }

.flyer-shot-frame {
  width: 100%; height: 100%;
  overflow: hidden;
  position: relative;
  background: #0a0a0a;
  border-radius: 1.35rem;
  box-shadow: 0 25px 50px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08);
}
.flyer-shot.frame-iphone .flyer-shot-frame {
  border: 3px solid #0a0a0a;
  box-shadow: 0 0 0 6px #111, 0 28px 50px rgba(0,0,0,.5);
  border-radius: 1.5rem;
}
.flyer-shot.frame-iphone .flyer-shot-frame::before {
  content: '';
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 36%; height: 10px; border-radius: 999px; background: #0a0a0a; z-index: 2;
}
.flyer-shot.frame-glass .flyer-shot-frame {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.35);
  backdrop-filter: blur(4px);
  padding: 4px;
}
.flyer-shot.frame-soft .flyer-shot-frame { border: 0; }
.flyer-shot.frame-none .flyer-shot-frame {
  box-shadow: none; border: 0; background: transparent;
}
.flyer-shot.frame-browser .flyer-shot-frame {
  border-radius: 12px; background: #fff; padding-top: 22px;
}
.flyer-browser-bar {
  position: absolute; top: 0; left: 0; right: 0; height: 22px;
  background: #e5e7eb; display: none; align-items: center; gap: 5px; padding: 0 10px; z-index: 2;
}
.flyer-shot.frame-browser .flyer-browser-bar {
  display: flex !important;
}
#fp-browser[hidden] { display: none !important; }
.flyer-shot:not(.frame-browser) .flyer-browser-bar { display: none !important; }
.flyer-browser-bar span {
  width: 8px; height: 8px; border-radius: 50%; background: #f87171;
}
.flyer-browser-bar span:nth-child(2) { background: #fbbf24; }
.flyer-browser-bar span:nth-child(3) { background: #34d399; }
#fp-img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.flyer-shot-placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255,255,255,.35);
  background: linear-gradient(160deg,#1e293b,#0f172a);
}

/* When phone-right / side, keep text left */
#flyer-preview.place-phone-right .flyer-top,
#flyer-preview.place-side .flyer-top { max-width: 50%; }

.flyer-orb {
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  filter: blur(2px);
  z-index: 1;
}
.flyer-orb-a {
  width: 12rem; height: 12rem;
  right: -3rem; top: -2rem;
  background: radial-gradient(circle, rgba(255,255,255,0.35), transparent 70%);
}
.flyer-orb-b {
  width: 14rem; height: 14rem;
  left: -4rem; bottom: 10%;
  background: radial-gradient(circle, rgba(0,0,0,0.25), transparent 70%);
}
.cs-drop {
  border: 1.5px dashed #cbd5e1;
  border-radius: 1rem;
  padding: .85rem;
  background: #f8fafc;
  transition: border-color .15s, background .15s;
}
.cs-drop.is-drag {
  border-color: #10b981;
  background: #ecfdf5;
}
.cs-drop-btn {
  width: 100%;
  padding: .7rem 1rem;
  border-radius: .75rem;
  background: #0f172a;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  border: 0;
  cursor: pointer;
}
.cs-drop-btn:hover { background: #1e293b; }
.cs-img-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.cs-thumb {
  width: 3rem; height: 3rem;
  border-radius: .55rem;
  overflow: hidden;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  background: #e2e8f0;
}
.cs-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-thumb.is-on, .cs-thumb:hover { border-color: #10b981; }

/* Text safe zones — keep copy off mockup */
#flyer-preview.zone-left .flyer-top {
  max-width: 48% !important;
  margin-right: auto;
}
#flyer-preview.zone-right .flyer-top {
  max-width: 48% !important;
  margin-left: auto;
}
#flyer-preview.zone-top .flyer-top {
  max-width: 92%;
}
#flyer-preview.zone-bottom .flyer-top {
  display: none !important;
}
#flyer-preview.zone-left .flyer-content,
#flyer-preview.zone-right .flyer-content {
  pointer-events: none;
}
.cs-color {
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.65rem;
  padding: 0;
  background: #fff;
  cursor: pointer;
  flex-shrink: 0;
}

/* Full preview modal */
.cs-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.cs-preview-modal.is-open { display: flex; }
.cs-preview-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(4px);
}
.cs-preview-modal-panel {
  position: relative;
  z-index: 1;
  width: min(96vw, 42rem);
  max-height: min(94vh, 56rem);
  background: #0f172a;
  border-radius: 1.15rem;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.cs-preview-modal-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  padding: 0.85rem 1rem;
  background: #1e293b;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.cs-preview-modal-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: #fff;
}
.cs-preview-modal-sub {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 0.15rem;
}
.cs-preview-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.cs-preview-modal-body {
  padding: 1rem;
  overflow: auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background: #020617;
}
.cs-preview-modal-body img {
  max-width: 100%;
  max-height: min(78vh, 48rem);
  height: auto;
  border-radius: 0.75rem;
  box-shadow: 0 20px 50px rgba(0,0,0,.4);
}
body.cs-preview-open { overflow: hidden; }
button.bg-indigo-600 { background-color: #4f46e5; color: #fff; border: 0; }
button.bg-indigo-600:hover { background-color: #4338ca; }

.cs-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}
.cs-tab {
  padding: .55rem .95rem;
  border-radius: .85rem;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.06);
  color: #e2e8f0;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.cs-tab:hover { background: rgba(255,255,255,.12); }
.cs-tab.is-active {
  background: #34d399;
  color: #0f172a;
  border-color: transparent;
}
.cs-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  gap: .45rem;
  margin-top: .35rem;
}
.cs-swatch {
  position: relative;
  height: 3.1rem;
  border-radius: .75rem;
  border: 2px solid transparent;
  cursor: pointer;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.15);
}
.cs-swatch span {
  position: absolute;
  left: .4rem; right: .4rem; bottom: .3rem;
  font-size: 9px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.55);
  text-align: left;
  line-height: 1.15;
}
.cs-swatch.is-on {
  border-color: #0f172a;
  box-shadow: 0 0 0 2px #34d399, inset 0 0 0 1px rgba(255,255,255,.2);
  transform: scale(1.03);
}
.cs-size-card {
  text-align: left;
  border: 1px solid #e2e8f0;
  background: #fff;
  border-radius: 1rem;
  padding: 1rem;
  font-weight: 800;
  font-size: .95rem;
  color: #0f172a;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.cs-size-card span {
  display: block;
  margin-top: .25rem;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
}
.cs-size-card:hover {
  border-color: #10b981;
  box-shadow: 0 8px 24px rgba(15,23,42,.08);
}
@media print {
  body * { visibility: hidden !important; }
  #flyer-preview, #flyer-preview * { visibility: visible !important; }
  #flyer-preview {
    position: fixed !important;
    left: 50% !important; top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 400px !important;
  }
}


/* ═══ v770 Complete Digital Marketing Platform ═══ */
.dmp-hero {
  background: linear-gradient(135deg, #0f172a 0%, #064e3b 48%, #0f172a 100%);
  color: #fff;
  padding: 1.5rem 1.35rem;
  border-radius: 1.25rem;
  border: none;
  box-shadow: 0 20px 40px rgba(15,23,42,.25);
}
.dmp-hero-badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #6ee7b7;
  margin-bottom: .5rem;
}
.dmp-hero-title {
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.15;
  margin: 0;
}
.dmp-hero-sub {
  margin: .65rem 0 0;
  font-size: .9rem;
  color: #cbd5e1;
  max-width: 42rem;
  line-height: 1.5;
}
.dmp-ai-pill {
  display: inline-flex;
  margin-top: .85rem;
  padding: .3rem .7rem;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
.dmp-ai-pill.off { background: rgba(251,191,36,.15); color: #fcd34d; border: 1px solid rgba(251,191,36,.35); }
.dmp-ai-pill.on { background: rgba(52,211,153,.15); color: #6ee7b7; border: 1px solid rgba(52,211,153,.35); }
.dmp-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .6rem;
  margin-top: 1.15rem;
}
@media (max-width: 720px) {
  .dmp-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.dmp-kpi {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: .85rem;
  padding: .65rem .5rem;
  text-align: center;
}
.dmp-kpi b {
  display: block;
  font-size: 1.35rem;
  font-weight: 800;
  color: #fff;
}
.dmp-kpi span {
  font-size: 10px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.dmp-camp-line {
  margin: .85rem 0 0;
  font-size: 12px;
  color: #a7f3d0;
}
.dmp-pipeline { padding: 1.15rem 1.25rem; }
.dmp-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
}
.dmp-step {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .7rem;
  border-radius: .75rem;
  border: 1px solid #e2e8f0;
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  color: #334155;
  cursor: pointer;
}
.dmp-step:hover { border-color: #10b981; color: #047857; }
.dmp-step.is-done {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #047857;
}
.dmp-step-num {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  background: #f1f5f9;
  display: grid;
  place-items: center;
  font-size: 11px;
}
.dmp-step.is-done .dmp-step-num { background: #10b981; color: #fff; }
.dmp-step-arrow { color: #cbd5e1; font-weight: 700; padding: 0 .15rem; }
.dmp-free-list {
  margin: 0;
  padding-left: 1.15rem;
  line-height: 1.55;
}
.dmp-free-list li { margin: .35rem 0; }
.dmp-roles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: .75rem;
}
.dmp-role {
  text-align: left;
  border: 1px solid #e2e8f0;
  background: #fff;
  border-radius: 1rem;
  padding: 1rem;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .12s;
}
.dmp-role:hover {
  border-color: #10b981;
  box-shadow: 0 10px 28px rgba(15,23,42,.08);
  transform: translateY(-1px);
}
.dmp-role-icon { font-size: 1.5rem; line-height: 1; }
.dmp-role-name { font-weight: 800; margin-top: .45rem; color: #0f172a; font-size: .95rem; }
.dmp-role-job { font-size: 12px; color: #64748b; margin-top: .25rem; line-height: 1.4; }
.dmp-role-free {
  margin-top: .55rem;
  font-size: 11px;
  font-weight: 700;
  color: #047857;
  background: #ecfdf5;
  border-radius: .5rem;
  padding: .25rem .45rem;
  display: inline-block;
}
.dmp-quick {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .2rem;
  text-align: left;
  border: 1px solid #e2e8f0;
  background: #fff;
  border-radius: 1rem;
  padding: 1rem;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.dmp-quick:hover {
  border-color: #10b981;
  box-shadow: 0 8px 24px rgba(15,23,42,.07);
}
.dmp-quick span { font-size: 1.35rem; }
.dmp-quick b { font-size: .95rem; color: #0f172a; }
.dmp-quick small { font-size: 11px; color: #64748b; }
.dmp-badge {
  display: inline-flex;
  align-items: center;
  padding: .2rem .55rem;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: #f1f5f9;
  color: #475569;
  white-space: nowrap;
}
.dmp-camp-card {
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 1rem 1.1rem;
  background: #fff;
}
.dmp-camp-card.is-active {
  border-color: #6ee7b7;
  box-shadow: 0 0 0 1px #a7f3d0;
}
.dmp-camp-top {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  align-items: flex-start;
}
.dmp-camp-name { font-weight: 800; color: #0f172a; }
.dmp-camp-meta { font-size: 12px; color: #64748b; margin-top: .2rem; }
.dmp-camp-feats { font-size: 11px; color: #059669; margin-top: .55rem; font-weight: 600; }
.dmp-camp-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .75rem; }
.dmp-q-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: .75rem;
  padding: 1rem 1.15rem;
}
.dmp-bar-row {
  display: grid;
  grid-template-columns: 5.5rem 1fr 2rem;
  gap: .5rem;
  align-items: center;
  margin: .4rem 0;
  font-size: 12px;
}
.dmp-bar-label { color: #475569; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dmp-bar-track {
  height: .55rem;
  background: #f1f5f9;
  border-radius: 999px;
  overflow: hidden;
}
.dmp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #059669, #34d399);
  border-radius: 999px;
}
.dmp-bar-n { text-align: right; font-weight: 700; color: #0f172a; }
/* Soft-hide pure AI actions when offline (optional class on buttons) */
html.dmp-ai-off .dmp-ai-only { opacity: .55; }
html.dmp-ai-on .dmp-ai-only { opacity: 1; }


/* —— Always-visible Push to Pages bar (v811+) —— */
.cs-push-sticky {
  position: sticky;
  top: 0;
  z-index: 40;
  margin: 0 0 0.75rem;
  padding: 0.65rem 0.85rem;
  border-radius: 0.95rem;
  border: 1px solid rgba(99,102,241,0.45);
  background: linear-gradient(135deg, rgba(14,165,233,0.18), rgba(99,102,241,0.22));
  box-shadow: 0 8px 24px rgba(15,23,42,0.25);
}
.cs-push-sticky-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
}
.cs-push-sticky-title {
  font-size: 13px;
  font-weight: 800;
  color: #e0e7ff;
  letter-spacing: 0.01em;
}
.cs-push-sticky-sub {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 2px;
}
.cs-push-sticky-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.cs-push-sticky .cs-btn-primary {
  background: linear-gradient(135deg, #0ea5e9, #6366f1) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 800 !important;
  min-height: 2.5rem;
  padding: 0.5rem 0.9rem;
}

/* —— v822 easier editor controls —— */
.cs-quick-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.85rem;
  padding: 0.55rem 0.65rem;
  border-radius: 0.85rem;
  background: rgba(15,23,42,0.55);
  border: 1px solid rgba(255,255,255,0.08);
}
.cs-quick-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-right: 0.25rem;
}
.cs-quick-chip {
  border: 1px solid rgba(255,255,255,0.14);
  background: #1e293b;
  color: #f1f5f9;
  border-radius: 999px;
  padding: 0.4rem 0.75rem;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  min-height: 2.15rem;
}
.cs-quick-chip:hover {
  background: #334155;
  border-color: rgba(52,211,153,0.4);
}
.cs-field-lg, #view-flyer .cs-field-lg {
  min-height: 2.65rem !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}
.cs-ta-lg {
  min-height: 5.5rem !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
  font-weight: 600 !important;
}
.cs-hint-inline {
  font-weight: 600;
  font-size: 10px;
  color: #64748b;
  text-transform: none;
  letter-spacing: 0;
}
.cs-range-lg {
  width: 100%;
  accent-color: #10b981;
  height: 1.4rem;
}
.cs-range-val {
  display: inline-block;
  min-width: 1.5rem;
  color: #6ee7b7;
  font-size: 13px;
}
.cs-type-size-row {
  display: flex;
  gap: 0.4rem;
  margin: 0.35rem 0 0.55rem;
}
.cs-size-btn {
  flex: 1;
  min-height: 2.4rem;
  border-radius: 0.65rem;
  border: 1px solid rgba(255,255,255,0.12);
  background: #0f172a;
  color: #e2e8f0;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
}
.cs-size-btn:hover {
  background: #1e293b;
  border-color: #34d399;
  color: #fff;
}
#view-flyer .cs-field .lbl {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #94a3b8 !important;
  margin-bottom: 0.3rem !important;
  display: block;
}
#view-flyer .cs-field .field,
#view-flyer .cs-field select.field,
#view-flyer .cs-field input.field {
  min-height: 2.5rem;
  font-size: 13px;
}
#view-flyer .cs-btn {
  min-height: 2.55rem;
  font-size: 12px;
  font-weight: 800;
  padding: 0.5rem 0.85rem;
}
#view-flyer .cs-section {
  margin-bottom: 0.75rem;
}
#view-flyer .cs-sec-title {
  font-size: 14px !important;
}

/* ═══════════════════════════════════════════════════════════
   v823 — Compact icon side nav (border SVG icons, collapse)
   ═══════════════════════════════════════════════════════════ */
.dash-shell {
  grid-template-columns: var(--sn-w, 13.5rem) 1fr;
  transition: grid-template-columns .2s ease;
}
body.sn-collapsed .dash-shell {
  --sn-w: 4.25rem;
  grid-template-columns: 4.25rem 1fr;
}
.side-nav {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  max-height: 100vh;
  width: var(--sn-w, 13.5rem);
  margin: 0;
  padding: 0.55rem 0.45rem 0.65rem;
  background: #fff;
  border-right: 1px solid #e2e8f0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  overflow: hidden; /* scroll only .sn-scroll — foot never eats Advanced/Brand */
  z-index: 30;
  box-shadow: none;
  transition: width .2s ease;
}
/* Middle column scrolls; Brand / Advanced always reachable */
.sn-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-bottom: 0.35rem;
}
.sn-scroll > .sn-sec,
.sn-scroll > .sn-nav,
.sn-scroll > .sn-more,
.sn-scroll > .sn-soft-switch {
  flex-shrink: 0;
}
.sn-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.25rem 0.3rem 0.55rem;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 0.35rem;
  min-height: 2.6rem;
}
.sn-mark {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  border-radius: 0.55rem;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  font-weight: 900;
  font-size: 0.85rem;
  display: grid;
  place-items: center;
}
.sn-brand { min-width: 0; flex: 1; }
.sn-title { font-size: 0.8rem; font-weight: 800; color: #0f172a; line-height: 1.15; }
.sn-sub { font-size: 0.62rem; font-weight: 700; color: #059669; letter-spacing: 0.02em; }
.sn-toggle, .sn-close-mobile, .sn-menu-open {
  flex-shrink: 0;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sn-ico-border {
  width: 1.85rem;
  height: 1.85rem;
  border: 1.5px solid #cbd5e1;
  border-radius: 0.5rem;
  display: grid;
  place-items: center;
  color: #475569;
  background: #fff;
  transition: border-color .15s, color .15s, background .15s;
}
.sn-toggle:hover .sn-ico-border,
.sn-close-mobile:hover .sn-ico-border,
.sn-menu-open:hover .sn-ico-border {
  border-color: #10b981;
  color: #047857;
  background: #ecfdf5;
}
body.sn-collapsed .sn-toggle .sn-ico-border svg { transform: rotate(180deg); }
.sn-sec {
  margin: 0.4rem 0.35rem 0.2rem;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;
}
.sn-nav { display: flex; flex-direction: column; gap: 0.12rem; }
.side-nav .nav-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 2.15rem;
  padding: 0.28rem 0.4rem;
  border-radius: 0.55rem;
  border: 0;
  background: transparent;
  color: #475569;
  font-size: 0.78rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.side-nav .nav-btn:hover { background: #f8fafc; color: #0f172a; }
.side-nav .nav-btn.active {
  background: #ecfdf5;
  color: #047857;
  box-shadow: inset 0 0 0 1px #a7f3d0;
}
.nav-ico {
  width: 1.7rem;
  height: 1.7rem;
  flex-shrink: 0;
  border: 1.5px solid #d1d5db;
  border-radius: 0.45rem;
  display: grid;
  place-items: center;
  color: #64748b;
  background: #fff;
}
.nav-ico svg { width: 0.95rem; height: 0.95rem; display: block; }
.side-nav .nav-btn:hover .nav-ico {
  border-color: #94a3b8;
  color: #0f172a;
}
.side-nav .nav-btn.active .nav-ico {
  border-color: #34d399;
  color: #047857;
  background: #fff;
}
.nav-lbl {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-tag {
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #4f46e5;
  background: #e0e7ff;
  border: 1px solid #c7d2fe;
  border-radius: 999px;
  padding: 0.1rem 0.35rem;
}
.sn-more {
  margin-top: 0.35rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.55rem;
  background: #f8fafc;
  overflow: visible; /* do not clip Advanced list when open */
  flex-shrink: 0;
}
.sn-more > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.15rem;
  padding: 0.28rem 0.4rem;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 700;
  color: #64748b;
}
.sn-more > summary::-webkit-details-marker { display: none; }
.sn-more-list {
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
  padding: 0 0.2rem 0.35rem;
}
.sn-foot {
  flex-shrink: 0;
  margin-top: 0; /* foot is outside .sn-scroll — always visible at bottom */
  padding-top: 0.45rem;
  border-top: 1px solid #f1f5f9;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  background: #fff;
}
.sn-user {
  font-size: 0.65rem;
  color: #94a3b8;
  text-align: center;
  padding: 0.15rem;
}
.sn-logout {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.15rem;
  padding: 0.28rem 0.4rem;
  border-radius: 0.55rem;
  color: #e11d48;
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 700;
}
.sn-logout:hover { background: #fff1f2; }
.sn-logout .nav-ico { border-color: #fecdd3; color: #e11d48; }

/* Collapsed: icon rail only — kills empty white waste */
body.sn-collapsed .side-nav {
  width: 4.25rem;
  padding-left: 0.35rem;
  padding-right: 0.35rem;
  align-items: center;
}
body.sn-collapsed .sn-brand,
body.sn-collapsed .sn-sec,
body.sn-collapsed .nav-lbl,
body.sn-collapsed .nav-tag,
body.sn-collapsed .sn-user,
body.sn-collapsed .sn-soft-label,
body.sn-collapsed .sn-more > summary .nav-lbl {
  display: none !important;
}
body.sn-collapsed .sn-scroll {
  width: 100%;
  align-items: center;
}
body.sn-collapsed .sn-head {
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.2rem 0 0.45rem;
}
body.sn-collapsed .side-nav .nav-btn,
body.sn-collapsed .sn-logout,
body.sn-collapsed .sn-more > summary {
  justify-content: center;
  padding: 0.35rem;
  width: 2.55rem;
  min-height: 2.55rem;
  margin: 0 auto;
}
body.sn-collapsed .sn-more {
  border: 0;
  background: transparent;
  width: 100%;
}
body.sn-collapsed .sn-more-list .nav-btn { margin: 0.08rem auto; }
body.sn-collapsed .sn-nav { width: 100%; align-items: center; }

@media (max-width: 1023px) {
  .dash-shell { display: block; }
  .side-nav {
    position: fixed;
    inset: 0 auto 0 0;
    width: 15rem !important;
    max-width: 80vw;
    height: 100%;
    transform: translateX(-105%);
    transition: transform .2s;
    box-shadow: 12px 0 40px rgba(15, 23, 42, 0.15);
    z-index: 50;
  }
  .side-nav.sidebar-open { transform: translateX(0) !important; }
  body.sn-collapsed .side-nav {
    width: 15rem !important;
  }
  /* on mobile always show labels when open */
  body.sn-collapsed .side-nav.sidebar-open .sn-brand,
  body.sn-collapsed .side-nav.sidebar-open .sn-sec,
  body.sn-collapsed .side-nav.sidebar-open .nav-lbl,
  body.sn-collapsed .side-nav.sidebar-open .nav-tag,
  body.sn-collapsed .side-nav.sidebar-open .sn-user {
    display: initial !important;
  }
  body.sn-collapsed .side-nav.sidebar-open .nav-btn {
    width: 100%;
    justify-content: flex-start;
    margin: 0;
    padding: 0.28rem 0.4rem;
  }
}
@media (min-width: 1024px) {
  .side-nav { transform: none !important; }
  .lg\:grid-cols-\[260px_1fr\] { /* legacy utility ignored — dash-shell owns grid */ }
}

/* Still carousel strip */
.cs-carousel-box {
  margin-top: 0.75rem;
  padding: 0.7rem 0.75rem;
  border-radius: 0.9rem;
  border: 1px solid rgba(139,92,246,0.35);
  background: linear-gradient(145deg, rgba(139,92,246,0.08), rgba(99,102,241,0.1));
}
.cs-carousel-slides {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.5rem 0 0.65rem;
  min-height: 4.5rem;
}
.cs-cslide {
  position: relative;
  width: 4.6rem;
  border: 2px solid transparent;
  border-radius: 0.65rem;
  background: #0a0e13;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  text-align: left;
}
.cs-cslide img {
  display: block;
  width: 100%;
  height: 3.4rem;
  object-fit: cover;
  background: #111;
}
.cs-cslide-num {
  position: absolute;
  top: 3px; left: 3px;
  min-width: 1.1rem;
  height: 1.1rem;
  border-radius: 999px;
  background: rgba(15,23,42,0.85);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  display: grid;
  place-items: center;
}
.cs-cslide-title {
  display: block;
  font-size: 9px;
  font-weight: 700;
  color: #cbd5e1;
  padding: 0.2rem 0.25rem 0.3rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cs-cslide.is-on {
  border-color: #a78bfa;
  box-shadow: 0 0 0 2px rgba(139,92,246,0.35);
}
.cs-cslide:hover { border-color: rgba(167,139,250,0.5); }

/* Carousel: pick from library + multi preview */
.cs-carousel-steps {
  margin: 0 0 0.55rem;
  padding-left: 1.15rem;
  font-size: 11px;
  color: #94a3b8;
  line-height: 1.45;
}
.cs-carousel-steps b { color: #e2e8f0; }
.cs-carousel-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  max-height: 9rem;
  overflow-y: auto;
  margin-bottom: 0.55rem;
  padding: 0.35rem 0;
}
.cs-pick-thumb {
  width: 4.2rem;
  border: 2px solid transparent;
  border-radius: 0.55rem;
  background: #0a0e13;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
}
.cs-pick-thumb img {
  width: 100%;
  height: 3.1rem;
  object-fit: cover;
  display: block;
}
.cs-pick-name {
  display: block;
  font-size: 8px;
  font-weight: 700;
  color: #94a3b8;
  padding: 0.15rem 0.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cs-pick-thumb.is-on { border-color: #34d399; }
.cs-pick-thumb:hover { border-color: rgba(52,211,153,0.5); }
.cs-cslide.is-missing { border-color: #f59e0b; }
.cs-cslide-empty {
  height: 3.4rem;
  display: grid;
  place-items: center;
  font-size: 9px;
  font-weight: 800;
  color: #fbbf24;
  background: #1c1917;
}
.cs-lib-filter {
  max-width: 9rem;
  min-height: 1.8rem !important;
  font-size: 11px !important;
  padding: 0.25rem 0.45rem !important;
}

/* Stage carousel prev/next under live canvas */
.cs-stage-carousel-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin: 0.45rem 0 0.25rem;
}
.cs-stage-cbtn {
  border: 1px solid rgba(255,255,255,0.14);
  background: #151c26;
  color: #e2e8f0;
  border-radius: 999px;
  min-width: 2.2rem;
  min-height: 2rem;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  padding: 0.3rem 0.65rem;
}
.cs-stage-cbtn:hover { background: #1c2633; border-color: #34d399; }
.cs-stage-cbtn-wide { padding: 0.3rem 0.85rem; }
.cs-stage-cdots { display: flex; gap: 0.3rem; flex-wrap: wrap; justify-content: center; }
.cs-stage-dot, .cs-preview-dot {
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.2);
  background: #0f172a;
  color: #94a3b8;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}
.cs-stage-dot.is-on, .cs-preview-dot.is-on {
  background: #10b981;
  border-color: #6ee7b7;
  color: #042f2e;
}
.cs-preview-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.cs-preview-count { font-weight: 800; font-size: 13px; color: #334155; min-width: 3.5rem; text-align: center; }
.cs-preview-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: center;
  padding: 0.5rem 0.75rem 0.75rem;
}

/* Marketing Studio · multi-software */
.sn-soft-switch { width: 100%; }
.sn-soft-label {
  display: block;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94a3b8;
  margin: 0 0 0.2rem 0.15rem;
}
.sn-soft-select {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  min-height: 2rem !important;
  padding: 0.25rem 0.4rem !important;
}
body.sn-collapsed .sn-soft-switch { display: none; }

.ws-soft-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 0.75rem;
}
.ws-soft-card {
  border: 1px solid #e2e8f0;
  border-radius: 0.9rem;
  padding: 0.85rem;
  background: #fff;
}
.ws-soft-card.is-active {
  border-color: #6ee7b7;
  box-shadow: 0 0 0 2px rgba(16,185,129,0.15);
  background: #f0fdf4;
}
.ws-soft-top { display: flex; gap: 0.65rem; align-items: center; }
.ws-soft-mark {
  width: 2.4rem; height: 2.4rem; border-radius: 0.65rem;
  background: linear-gradient(135deg,#10b981,#059669);
  color: #fff; font-weight: 900; display: grid; place-items: center;
}
.ws-soft-name { font-weight: 800; font-size: 0.95rem; color: #0f172a; }
.ws-soft-status { font-size: 0.72rem; color: #64748b; margin-top: 0.1rem; }
.ws-soft-actions { display: flex; gap: 0.4rem; margin-top: 0.65rem; flex-wrap: wrap; align-items: center; }
.ws-pill {
  font-size: 0.65rem; font-weight: 800; text-transform: uppercase;
  color: #047857; background: #d1fae5; border: 1px solid #a7f3d0;
  border-radius: 999px; padding: 0.2rem 0.55rem;
}
#ws-root .cs-btn {
  min-height: 2.2rem;
  padding: 0.4rem 0.75rem;
  border-radius: 0.65rem;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid #e2e8f0;
  background: #fff;
  cursor: pointer;
}
#ws-root .cs-btn-primary {
  background: linear-gradient(135deg,#10b981,#059669);
  color: #fff;
  border: none;
}
#ws-root .lbl {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  color: #64748b;
  margin-bottom: 0.25rem;
  text-transform: uppercase;
}