:root{
  --cc-bg:#ffffff;
  --cc-text:#1d1d1f;
  --cc-muted:#6e6e73;
  --cc-border:rgba(0,0,0,0.10);
  --cc-shadow:0 -8px 28px rgba(0,0,0,.10);
  --cc-radius:16px;
  --cc-btn-radius:999px;
}

/* Banner */
#cc-banner{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:3000;
  display:none;
  padding:16px;
}
#cc-banner .cc-shell{
  max-width:1100px;
  margin:0 auto;
  background:var(--cc-bg);
  color:var(--cc-text);
  border:1px solid var(--cc-border);
  border-radius:var(--cc-radius);
  box-shadow:var(--cc-shadow);
  padding:18px;
}
#cc-banner .cc-row{
  display:flex;
  gap:16px;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
}
#cc-banner p{
  margin:0;
  line-height:1.45;
  color:var(--cc-muted);
  max-width:720px;
}
#cc-banner a{ color:inherit; text-decoration:underline; }

/* Buttons */
.cc-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.cc-btn{
  appearance:none;
  border:1px solid var(--cc-border);
  background:#f5f5f7;
  color:var(--cc-text);
  padding:10px 14px;
  border-radius:var(--cc-btn-radius);
  font-size:14px;
  cursor:pointer;
}
.cc-btn:hover{ filter:brightness(0.98); }
.cc-btn-primary{
  background:var(--cc-text);
  color:#fff;
  border-color:transparent;
}
.cc-btn-ghost{
  background:transparent;
}

/* Modal */
#cc-modal{
  position:fixed;
  inset:0;
  z-index:4000;
  display:none;
  background:rgba(0,0,0,0.45);
  padding:18px;
}
#cc-modal .cc-dialog{
  max-width:860px;
  margin:40px auto;
  background:var(--cc-bg);
  border-radius:22px;
  border:1px solid var(--cc-border);
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,0.25);
}
#cc-modal header{
  position:sticky;
  top:0;
  background:var(--cc-bg);
  padding:18px 18px 12px;
  border-bottom:1px solid var(--cc-border);
  z-index:1;
}
#cc-modal h2{ margin:0; font-size:18px; }
#cc-modal .cc-sub{ margin:6px 0 0; color:var(--cc-muted); font-size:14px; }
#cc-modal .cc-body{ padding:16px 18px; }

.cc-cat{
  border:1px solid var(--cc-border);
  border-radius:18px;
  padding:14px;
  margin:12px 0;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.cc-cat h3{ margin:0; font-size:15px; }
.cc-cat p{ margin:6px 0 0; color:var(--cc-muted); font-size:14px; }

/* Toggle */
.cc-toggle{
  display:flex;
  align-items:center;
  gap:10px;
  user-select:none;
}
.cc-switch{
  position:relative;
  width:46px;
  height:28px;
  border-radius:999px;
  background:#e5e5ea;
  border:1px solid var(--cc-border);
  cursor:pointer;
  flex:0 0 auto;
}
.cc-switch::after{
  content:"";
  position:absolute;
  top:3px; left:3px;
  width:22px; height:22px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,0.12);
  transition:transform .18s ease;
}
.cc-switch[aria-checked="true"]{
  background:var(--cc-text);
}
.cc-switch[aria-checked="true"]::after{
  transform:translateX(18px);
}
.cc-switch[aria-disabled="true"]{
  opacity:0.6;
  cursor:not-allowed;
}

#cc-modal footer{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
  padding:14px 18px 18px;
  border-top:1px solid var(--cc-border);
  background:var(--cc-bg);
}

/* Small helper link */
.cc-link{
  cursor:pointer;
  text-decoration:underline;
}

/* YouTube placeholder */
.yt-consent-placeholder{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:18px;
  background:rgba(255,255,255,0.92);
  border-radius:18px;
}
.yt-consent-placeholder .cc-btn{ margin-top:12px; }

@media (max-width:560px){
  #cc-modal .cc-dialog{ margin:18px auto; }
  #cc-banner .cc-shell{ padding:16px; }
}

@media (prefers-reduced-motion: reduce){
  .cc-switch::after{ transition:none; }
}