/* =========================================================
   CREATIVITY BUSINESS SOLUTION - REUSABLE COMPONENTS
   ========================================================= */
.cbs-surface-card { border:1px solid var(--cbs-border); border-radius:var(--cbs-radius); background:var(--cbs-surface); }
.cbs-surface-card-head { min-height:50px; padding:0 13px; display:flex; align-items:center; justify-content:space-between; gap:10px; border-bottom:1px solid var(--cbs-border-soft); }
.cbs-surface-card-body { padding:13px; }
.cbs-badge,.cbs-pill { width:fit-content; max-width:100%; display:inline-flex; align-items:center; gap:5px; padding:4px 8px; border:1px solid var(--cbs-border); border-radius:999px; color:var(--cbs-text-2); background:var(--cbs-bg-raised); font-size:var(--cbs-font-label); font-weight:800; }
.cbs-badge-accent { color:var(--cbs-accent); border-color:var(--cbs-accent-border); background:var(--cbs-accent-faint); }
.cbs-badge-success { color:var(--cbs-success); border-color:color-mix(in srgb,var(--cbs-success) 40%,var(--cbs-border)); background:var(--cbs-success-soft); }
.cbs-badge-danger { color:var(--cbs-danger); border-color:color-mix(in srgb,var(--cbs-danger) 42%,var(--cbs-border)); background:var(--cbs-danger-soft); }
.cbs-alert-box { padding:11px 12px; display:flex; align-items:flex-start; gap:9px; border:1px solid var(--cbs-border); border-radius:9px; color:var(--cbs-text-2); background:var(--cbs-surface); }
.cbs-alert-box.is-info { border-color:var(--cbs-accent-border); background:var(--cbs-accent-faint); }.cbs-alert-box.is-success { border-color:color-mix(in srgb,var(--cbs-success) 42%,var(--cbs-border)); background:var(--cbs-success-soft); }.cbs-alert-box.is-danger { border-color:color-mix(in srgb,var(--cbs-danger) 44%,var(--cbs-border)); background:var(--cbs-danger-soft); }
.cbs-alert-copy { flex:1; min-width:0; }.cbs-alert-copy strong { display:block; color:var(--cbs-text); font-size:var(--cbs-font-primary); }.cbs-alert-copy small { display:block; margin-top:3px; color:var(--cbs-text-2); font-size:var(--cbs-font-secondary); }
.cbs-kpi-strip { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:9px; }
.cbs-kpi-tile { min-height:88px; padding:12px; display:grid; grid-template-columns:40px minmax(0,1fr); align-items:center; gap:10px; border:1px solid var(--cbs-border); border-radius:var(--cbs-radius); background:var(--cbs-surface); }
.cbs-kpi-tile-icon { width:40px; height:40px; display:grid; place-items:center; border-radius:10px; color:var(--cbs-accent); background:var(--cbs-accent-faint); }
.cbs-kpi-tile small { color:var(--cbs-muted); font-size:var(--cbs-font-label); }.cbs-kpi-tile strong { display:block; margin-top:3px; color:var(--cbs-text); font-size:calc(16px * var(--cbs-font-scale,1)); font-weight:900; }
.cbs-empty { min-height:220px; padding:24px; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--cbs-muted); text-align:center; }
.cbs-empty-icon { width:50px; height:50px; margin-bottom:10px; display:grid; place-items:center; border:1px solid var(--cbs-accent-border); border-radius:12px; color:var(--cbs-accent); background:var(--cbs-accent-faint); }.cbs-empty strong { color:var(--cbs-text); font-size:var(--cbs-font-primary); }.cbs-empty p { max-width:520px; margin:5px 0 0; font-size:var(--cbs-font-secondary); line-height:1.5; }
.cbs-progress { height:8px; overflow:hidden; border-radius:999px; background:var(--cbs-surface-3); }.cbs-progress>span { display:block; width:var(--cbs-progress,0%); height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--cbs-accent-strong),var(--cbs-accent)); }
.cbs-segmented { padding:3px; display:inline-flex; gap:3px; border:1px solid var(--cbs-border); border-radius:9px; background:var(--cbs-bg-raised); }.cbs-segmented button,.cbs-segmented a { min-height:32px; padding:0 10px; display:inline-flex; align-items:center; border:0; border-radius:7px; color:var(--cbs-text-2); background:transparent; text-decoration:none; cursor:pointer; font:inherit; font-size:var(--cbs-font-secondary); font-weight:750; }.cbs-segmented .is-active { color:var(--cbs-accent); background:var(--cbs-accent-faint); box-shadow:inset 0 0 0 1px var(--cbs-accent-border); }
.cbs-skeleton { position:relative; overflow:hidden; border-radius:7px; background:var(--cbs-surface-3); }.cbs-skeleton::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.055),transparent); transform:translateX(-100%); animation:cbsSkeleton 1.4s ease-in-out infinite; }@keyframes cbsSkeleton{to{transform:translateX(100%)}}
@media(prefers-reduced-motion:reduce){.cbs-skeleton::after{animation:none!important}}