:root{
  --bcc-accent:#0b5cff;
  --bcc-bg:#ffffff;
  --bcc-text:#111827;
  --bcc-muted:#6b7280;
  --bcc-radius:16px;
  --bcc-shadow:0 18px 45px rgba(0,0,0,.12);
  --bcc-overlay: .55;
}

#bcc-root, #bcc-root *{
  box-sizing:border-box;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
}

#bcc-root button{
  appearance:none;
  -webkit-appearance:none;
  font:inherit;
}

/* Overlay / Modal */
.bcc-overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,var(--bcc-overlay));
  display:none; z-index:999998;
}

.bcc-modal{
  position:fixed; inset:0;
  display:none; z-index:999999;
  align-items:center; justify-content:center;
  padding:18px;
}

.bcc-card{
  width:min(820px, 100%);
  background:var(--bcc-bg);
  color:var(--bcc-text);
  border-radius:var(--bcc-radius);
  box-shadow:var(--bcc-shadow);
  overflow:hidden;
  max-height: calc(100vh - 36px);
  display:flex; flex-direction:column;
}

.bcc-card header{
  padding:18px 18px 12px;
  display:flex; justify-content:space-between; gap:12px; align-items:flex-start;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.bcc-title{ font-size:18px; font-weight:800; margin:0; }
.bcc-sub{ margin:6px 0 0; color:var(--bcc-muted); font-size:13px; line-height:1.45; }

.bcc-close{
  border:0; background:transparent; cursor:pointer;
  font-size:22px; line-height:1; padding:8px 10px;
  color:var(--bcc-muted);
}
.bcc-close:hover{ color:var(--bcc-text); }

.bcc-body{
  padding:16px 18px;
  display:grid; gap:12px;
  overflow:auto;
}

.bcc-row{
  display:flex; justify-content:space-between; align-items:flex-start; gap:14px;
  padding:14px; border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
}
.bcc-row strong{ display:block; font-size:14px; }
.bcc-row p{ margin:6px 0 0; color:var(--bcc-muted); font-size:13px; }

.bcc-badge{
  font-size:11px; color:#065f46; background:#d1fae5;
  padding:6px 10px; border-radius:999px; font-weight:700;
  white-space:nowrap;
}

.bcc-switch{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.bcc-toggle{
  width:46px; height:26px; border-radius:999px;
  background:rgba(0,0,0,.14); position:relative; cursor:pointer; border:0;
}
.bcc-toggle::after{
  content:""; width:22px; height:22px; border-radius:50%;
  background:#fff; position:absolute; top:2px; left:2px;
  transition:transform .18s ease;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}
.bcc-toggle[data-on="1"]{ background:var(--bcc-accent); }
.bcc-toggle[data-on="1"]::after{ transform:translateX(20px); }

/* Actions buttons — version PRO + anti overrides thème */
.bcc-actions{
  padding:14px 18px 18px;
  display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap;
  border-top:1px solid rgba(0,0,0,.06);
}

.bcc-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px;
  min-height:42px;
  padding:10px 16px;
  border-radius:999px;

  border:1px solid rgba(17,24,39,.18);
  background:#fff;
  color:var(--bcc-text) !important;

  font-weight:800;
  font-size:13px;
  cursor:pointer;

  box-shadow:0 1px 0 rgba(0,0,0,.03);
  transition:transform .06s ease, box-shadow .12s ease, background .12s ease;
}

.bcc-btn:hover{
  background:rgba(11,92,255,.06);
  box-shadow:0 10px 24px rgba(0,0,0,.08);
}
.bcc-btn:active{ transform:translateY(1px); }

.bcc-btn.primary{
  background:var(--bcc-accent);
  color:#fff !important;
  border-color:transparent;
}
.bcc-btn.primary:hover{ background:color-mix(in srgb, var(--bcc-accent) 88%, #000 12%); }

.bcc-btn.ghost{
  background:transparent;
  border-color:rgba(17,24,39,.18);
}

.bcc-btn:focus-visible{
  outline:3px solid color-mix(in srgb, var(--bcc-accent) 35%, #fff 65%);
  outline-offset:2px;
}

.bcc-links{
  padding:0 18px 18px;
  color:var(--bcc-muted); font-size:12px; line-height:1.4;
}
.bcc-links a{ color:var(--bcc-accent); text-decoration:none; font-weight:800; }
.bcc-links a:hover{ text-decoration:underline; }

/* Banner */
.bcc-banner{
  position:fixed; left:14px; right:14px;
  max-width:1000px; margin:0 auto;
  background:var(--bcc-bg);
  border:1px solid rgba(0,0,0,.08);
  box-shadow:var(--bcc-shadow);
  border-radius:18px;
  padding:14px;
  z-index:999997;
  display:none;
}
.bcc-banner.top{ top:14px; }
.bcc-banner.bottom{ bottom:14px; }

.bcc-banner-grid{
  display:grid;
  grid-template-columns: 1.2fr auto;
  gap:12px; align-items:center;
}
.bcc-banner h3{ margin:0; font-size:14px; font-weight:900; }
.bcc-banner p{ margin:6px 0 0; color:var(--bcc-muted); font-size:13px; line-height:1.35; }
.bcc-banner-actions{ display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; }

/* Floating button */
.bcc-float{
  position:fixed;
  right:16px;
  bottom:calc(16px + env(safe-area-inset-bottom, 0px));
  z-index:999996;

  display:none;
  align-items:center;
  justify-content:center;

  min-height:42px;
  padding:10px 14px;

  border-radius:999px;
  border:1px solid rgba(0,0,0,.14);
  background:#fff;
  color:var(--bcc-text) !important;

  box-shadow:0 14px 35px rgba(0,0,0,.14);
  cursor:pointer;
  font-weight:900;
  font-size:12px;
}
.bcc-float:hover{
  background:rgba(11,92,255,.06);
}

/* Responsive */
@media (max-width: 720px){
  .bcc-modal{ padding:12px; }
  .bcc-card header{ padding:14px 14px 10px; }
  .bcc-body{ padding:12px 14px; }
  .bcc-actions{ padding:12px 14px 14px; justify-content:stretch; }
  .bcc-btn{ width:100%; }
  .bcc-row{ flex-direction:column; align-items:stretch; }
  .bcc-switch{ justify-content:space-between; }
  .bcc-banner-grid{ grid-template-columns: 1fr; }
  .bcc-banner-actions{ justify-content:flex-start; }
}

@media (max-width: 380px){
  .bcc-title{ font-size:16px; }
  .bcc-sub{ font-size:12px; }
  .bcc-banner p{ font-size:12px; }
}