:root{
  --bg-start:#e7d9ff; --bg-end:#c9b6ff;
  --card-bg:#ffffff; --text:#121212; --muted:#6b7280;
  --primary:#111827; --primary-text:#ffffff; --outline:#e5e7eb;
  --shadow:0 20px 40px rgba(0,0,0,.12);
  --thumb:22px; --pad:3px; --switch-w:48px; --switch-h:28px;
  /* overridable by inline vars from settings */
  --btn-accept-bg:#111827; --btn-accept-text:#ffffff;
  --btn-settings-bg:transparent; --btn-settings-text:#111827;
  --btn-decline-bg:transparent; --btn-decline-text:#111827;
}

#ccrtl-root{ position:fixed; inset:0; pointer-events:none; }

.cc-card{
  position:fixed; right:20px; bottom:20px; z-index:999999;
  width:min(420px, 92vw);
  background:var(--card-bg);
  border:1px solid var(--outline);
  border-radius:18px;
  padding:20px 20px 16px;
  box-shadow:var(--shadow);
  animation:ccrtl-slideIn .28s ease-out both;
  pointer-events:auto;
  direction: rtl;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,"Noto Sans Hebrew",Arial;
}
@keyframes ccrtl-slideIn{ from{ transform:translateY(8px); opacity:0 } to{ transform:none; opacity:1 } }

.cc-media{ display:flex; justify-content:center; align-items:center; background:#f5f5f5; border-radius:14px; width:100%; height:100px; margin:4px 0 12px; overflow:hidden }
.cc-emoji{ font-size:64px; filter:drop-shadow(0 6px 6px rgba(0,0,0,.07)) }

.cc-title{ margin:4px 0 10px; font-size:clamp(18px,2vw,22px); line-height:1.3; color:var(--text); font-weight:800; letter-spacing:-.01em }
.cc-body{ margin:0 0 16px; color:var(--muted); font-size:clamp(13px,1.6vw,16px); line-height:1.8 }
.cc-link{ color:inherit; border-bottom:2px solid currentColor; text-decoration:none; font-weight:700 }

.cc-actions{ display:flex; gap:16px; flex-wrap:wrap; justify-content:flex-start }
.cc-btn{ appearance:none; cursor:pointer; user-select:none; padding:12px 20px; border-radius:999px; font-size:16px; font-weight:700; border:1px solid transparent; transition:transform .08s, box-shadow .2s, background .2s, color .2s, border-color .2s }
.cc-btn:focus-visible{ outline:3px solid #8b5cf6; outline-offset:2px }
.cc-btn-primary{ background:var(--btn-accept-bg); color:var(--btn-accept-text); box-shadow:0 6px 14px rgba(0,0,0,.18) }
.cc-btn-primary:hover{ transform:translateY(-1px) }
.cc-btn-ghost-settings{ background:var(--btn-settings-bg); color:var(--btn-settings-text); border-color:var(--outline) }
.cc-btn-ghost-settings:hover{ background:rgba(0,0,0,.04) }
.cc-btn-ghost-decline{ background:var(--btn-decline-bg); color:var(--btn-decline-text); border-color:var(--outline) }
.cc-btn-ghost-decline:hover{ background:rgba(0,0,0,.04) }

.cc-prefs[hidden]{ display:none }
.cc-prefs{ margin-top:18px; border-top:1px solid var(--outline); padding-top:16px }
.cc-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0 }
.cc-row + .cc-row{ border-top:1px dashed var(--outline) }
.cc-row .cc-h{ font-weight:800; color:var(--text) }
.cc-row .cc-d{ color:var(--muted); font-size:14px; line-height:1.7; margin-top:6px }

.cc-switch{ position:relative; width:var(--switch-w); height:var(--switch-h); overflow:hidden }
.cc-switch input{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer }
.cc-track{ position:absolute; inset:0; border-radius:999px; background:#e5e7eb; border:1px solid var(--outline); transition:background .2s }
.cc-thumb{ position:absolute; top:var(--pad); left:var(--pad); width:var(--thumb); height:var(--thumb); border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:left .2s; will-change:left }
.cc-switch input:checked ~ .cc-track{ background:#111827 }
.cc-switch input:checked ~ .cc-thumb{ left: calc(100% - (var(--thumb) + var(--pad))) }
.cc-switch.locked .cc-track{ background:#111827 }
.cc-switch.locked .cc-thumb{ left: calc(100% - (var(--thumb) + var(--pad))) }
.cc-switch.locked input, .cc-switch.locked .cc-track, .cc-switch.locked .cc-thumb{ cursor:not-allowed }

.cc-prefs-actions{ display:flex; gap:12px; margin-top:14px; flex-wrap:wrap }

@media (max-width:480px){
  .cc-card{ right:12px; bottom:12px; width:calc(100vw - 24px) }
  .cc-btn{ flex:1 1 100%; text-align:center }
}