/* SCOPE: only inside .cxb-sandbox */
/* Force Hind Siliguri everywhere in the plugin area */
.cxb-sandbox{--brand:#9B59B6;--ok:#10b981;--warn:#f59e0b;--off:#9ca3af;--ink:#111827;--muted:#334155;
--kv1:#60a5fa;--kv2:#a78bfa;--kv3:#f472b6;--kv4:#fb923c;--kv5:#34d399;
font-family:'Hind Siliguri',system-ui,-apple-system,Segoe UI,Roboto,Noto Sans,Helvetica,Arial,'Apple Color Emoji','Segoe UI Emoji',sans-serif}
.cxb-sandbox *{font-family:'Hind Siliguri',system-ui,-apple-system,Segoe UI,Roboto,Noto Sans,Helvetica,Arial,'Apple Color Emoji','Segoe UI Emoji',sans-serif !important;color:var(--ink)}
.cxb-sandbox input,.cxb-sandbox textarea,.cxb-sandbox select,.cxb-sandbox button,.cxb-sandbox label,.cxb-sandbox .title,.cxb-sandbox .chip,.cxb-sandbox .badge,.cxb-sandbox .cxbtn,.cxb-sandbox .actions .button{font-family:'Hind Siliguri',system-ui,-apple-system,Segoe UI,Roboto,Noto Sans,Helvetica,Arial,'Apple Color Emoji','Segoe UI Emoji',sans-serif !important}

.cxb-sandbox .wrap{max-width:1100px;margin:20px auto;padding:0 8px}

.cxb-sandbox .card{background:#fff;border:1px solid #e6effe;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.06);overflow:hidden;margin-bottom:16px}
.cxb-sandbox .card .head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid #eef2f7;background:linear-gradient(90deg,#f0f9ff,#ffffff,#fff7ed)}
.cxb-sandbox .title{font-size:18px;font-weight:800}

/* === FORM === */
.cxb-sandbox .cxb-form-intro{background:#fff;border:1px solid #e6effe;border-radius:12px;padding:12px;margin:12px}
.cxb-sandbox .cxb-hero{position:relative;overflow:hidden;border-radius:14px;border:1px solid #e6effe;background:linear-gradient(135deg,#eef2ff,#fff7ed);padding:16px;display:flex;gap:16px;align-items:center}
.cxb-sandbox .cxb-hero .hero-title{font-weight:900;font-size:20px;margin-bottom:4px}
.cxb-sandbox .cxb-hero .hero-sub{font-weight:700;color:var(--muted);margin-bottom:8px}
.cxb-sandbox .cxb-hero .chips{display:flex;flex-wrap:wrap;gap:8px}
.cxb-sandbox .cxb-hero .chip{padding:6px 10px;border-radius:9999px;background:#fff;border:1px solid #e6effe;box-shadow:0 2px 8px rgba(0,0,0,.05);font-weight:700}
.cxb-sandbox .glow{position:absolute;right:-40px;top:-40px;width:160px;height:160px;background:radial-gradient(circle at center, rgba(99,102,241,.25), rgba(99,102,241,0));filter:blur(8px)}
.cxb-sandbox .glow2{position:absolute;left:-30px;bottom:-30px;width:120px;height:120px;background:radial-gradient(circle at center, rgba(251,146,60,.25), rgba(251,146,60,0));filter:blur(10px)}

.cxb-sandbox form{padding:12px}
.cxb-sandbox .cxb-grid{display:grid;grid-template-columns:1fr;gap:12px}
.cxb-sandbox label{font-weight:800;display:block}
.cxb-sandbox input,.cxb-sandbox textarea,.cxb-sandbox select{width:100%;padding:12px;border:1px solid #e6effe;border-radius:14px;background:#fff;outline:none;transition:border .2s, box-shadow .2s, background .2s}
.cxb-sandbox input::placeholder,.cxb-sandbox textarea::placeholder{color:#94a3b8}
.cxb-sandbox input:focus,.cxb-sandbox textarea:focus,.cxb-sandbox select:focus{border:2px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(120deg,var(--kv1),var(--kv2),var(--kv3),var(--kv4),var(--kv5),var(--kv1)) border-box;background-size:100% 100%,300% 300%;animation:cxb-kv-border 8s linear infinite;box-shadow:0 6px 24px rgba(99,102,241,.08)}
.cxb-sandbox .button{border:1px solid #e6effe;background:#fff;border-radius:9999px;padding:10px 16px;cursor:pointer;font-weight:800}
.cxb-sandbox .button-primary{background:linear-gradient(135deg,#9B59B6,#6EE7B7);border:none;color:#fff;box-shadow:0 10px 22px rgba(107,114,128,.2)}

/* === ADMIN === */
.cxb-sandbox .cxb-tabbar{display:flex;flex-wrap:wrap;gap:8px;padding:6px;border-radius:12px;background:linear-gradient(90deg,#f0f9ff,#fff,#fff7ed);border:1px solid #e6effe}
.cxb-sandbox .cxbtn{border:1px solid #e2e8f0;background:#fff;border-radius:9999px;padding:8px 12px;cursor:pointer;font-weight:800}
.cxb-sandbox .cxbtn.is-primary{box-shadow:0 6px 16px rgba(0,0,0,.08)}
.cxb-sandbox .cxbtn.filter[data-filter="active"]{background:linear-gradient(135deg,#10b981,#34d399);color:#fff;border:none}
.cxb-sandbox .cxbtn.filter[data-filter="inactive"]{background:linear-gradient(135deg,#9ca3af,#6b7280);color:#fff;border:none}
.cxb-sandbox .cxbtn.filter[data-filter="hasweb"]{background:linear-gradient(135deg,#60a5fa,#7c3aed);color:#fff;border:none}
.cxb-sandbox .cxbtn.filter[data-filter="noweb"]{background:linear-gradient(135deg,#f59e0b,#ef4444);color:#fff;border:none}
.cxb-sandbox .cxbtn.filter[data-filter="fbonly"]{background:linear-gradient(135deg,#fb7185,#f97316);color:#fff;border:none}
.cxb-sandbox .cxbtn.filter[data-filter="all"]{background:linear-gradient(135deg,#9B59B6,#6EE7B7);color:#fff;border:none}

.cxb-sandbox .cxb-container-body{padding:14px 16px}
.cxb-sandbox .cxb-section-title{background:linear-gradient(90deg,#e0f2fe,#ede9fe,#fff7ed);border:1px solid #e6effe;padding:10px 12px;border-radius:10px;font-weight:900;margin-bottom:10px}

.cxb-sandbox .cxb-list{margin:0;padding:0;list-style:none}
.cxb-sandbox .cxb-item{background:#fff;border:1px solid #e6effe;border-radius:12px;margin-bottom:12px}
.cxb-sandbox .cxb-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px;border-bottom:1px dashed #eef2f7}
.cxb-sandbox .cxb-head .idx{font-weight:900;color:#64748b}
.cxb-sandbox .cxb-head .name{flex:1;min-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cxb-sandbox .badge.status{padding:4px 8px;border-radius:9999px;background:#e5e7eb}
.cxb-sandbox .cxb-item[data-active="1"] .badge.status{background:#dcfce7;color:#065f46}
.cxb-sandbox .actions{margin-left:auto;display:flex;flex-wrap:wrap;gap:8px}
.cxb-sandbox .toggle-active{background:linear-gradient(135deg,#10b981,#34d399);color:#fff;border:none}
.cxb-sandbox .cxb-item[data-active="0"] .toggle-active{background:linear-gradient(135deg,#f97316,#ef4444);color:#fff;border:none}
.cxb-sandbox .reveal{background:linear-gradient(135deg,#6366f1,#a855f7,#ec4899);color:#f59e0b !important;border:1px solid #f59e0b}

/* KV animated detail */
.cxb-sandbox .cxb-card{background:#fff;border:1px solid #e6effe;border-radius:12px;padding:12px;margin-bottom:12px;box-shadow:0 6px 16px rgba(0,0,0,.04)}
.cxb-sandbox .cxb-card__head{font-weight:900;margin-bottom:8px;padding:6px 10px;border-radius:9999px;display:inline-block;background:linear-gradient(90deg,#e9d5ff,#f0f9ff);border:1px solid #e6effe}
.cxb-sandbox .cxb-card__body.kv{padding:14px;border:2px solid transparent;border-radius:14px;background:linear-gradient(#ffffff,#ffffff) padding-box,linear-gradient(120deg,var(--kv1),var(--kv2),var(--kv3),var(--kv4),var(--kv5),var(--kv1)) border-box;background-size:100% 100%,300% 300%;animation:cxb-kv-border 9s linear infinite}
.cxb-sandbox .cxb-card__body.kv:hover{animation-duration:5s;box-shadow:0 6px 24px rgba(99,102,241,.15),0 0 0 1px rgba(99,102,241,.12)}
.cxb-sandbox .cxb-card__body.kv p{margin:6px 0;padding:6px 8px;border-radius:8px}
.cxb-sandbox .cxb-card__body.kv p:nth-child(odd){background:#f9fafb}
.cxb-sandbox .cxb-card__body.kv p strong{display:inline-block;min-width:180px;font-weight:900}
@keyframes cxb-kv-border{0%{background-position:0% 50%,0% 50%}100%{background-position:0% 50%,200% 50%}}

.cxb-sandbox .wa-row{display:flex;gap:8px;align-items:flex-start}
.cxb-sandbox .wa-row textarea{flex:1}
.cxb-sandbox .wa-send{background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;border:none}
.cxb-sandbox .demo-grid{display:grid;grid-template-columns:1fr;gap:10px}
.cxb-sandbox .demo-grid label{background:#fff;border-radius:12px;padding:10px;border:1px solid #e6effe;transition:box-shadow .2s,border-color .2s,background .2s}
.cxb-sandbox .demo-grid label:focus-within{border:2px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(120deg,#60a5fa,#a78bfa,#f472b6,#fb923c,#34d399,#60a5fa) border-box;background-size:100% 100%,300% 300%;animation:cxb-kv-border 7s linear infinite}
.cxb-sandbox .demo-actions{display:flex;gap:8px;margin-top:8px}
.cxb-sandbox .demo-invite{background:linear-gradient(135deg,#3b82f6,#06b6d4);color:#fff;border:none}

/* Responsive */
@media (max-width:640px){
  .cxb-sandbox .wrap{padding:0 10px}
  .cxb-sandbox .card .head{flex-direction:column;align-items:flex-start;gap:6px}
  .cxb-sandbox .cxb-hero{flex-direction:column;align-items:flex-start}
  .cxb-sandbox .cxb-tabbar{overflow:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;padding-bottom:8px}
  .cxb-sandbox .cxbtn{padding:8px 10px;font-size:14px}
  .cxb-sandbox .cxb-head{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:6px}
  .cxb-sandbox .cxb-head .badge{grid-column:1/3}
  .cxb-sandbox .cxb-head .actions{grid-column:1/-1;display:flex;width:100%;gap:6px}
  .cxb-sandbox .cxb-head .actions .button{flex:1;min-width:120px}
  .cxb-sandbox input, .cxb-sandbox textarea{font-size:16px}
  .cxb-sandbox .cxb-card__body.kv p strong{min-width:42%}
}
@media (min-width:720px){ .cxb-sandbox .cxb-grid{grid-template-columns:1fr 1fr} }
@media (min-width:1024px){ .cxb-sandbox .cxb-grid{grid-template-columns:1fr 1fr 1fr} }