/* Koyu tema, minimal, erişilebilir */
:root{
  --cc-bg:#0b0b0c; --cc-card:#18181b; --cc-border:#2a2a2e;
  --cc-text:#f4f4f5; --cc-muted:#b1b1b7;
  --cc-accent:#ff6a00; --cc-accent-2:#ff8b2d;
  --cc-radius:14px; --cc-shadow:0 12px 34px rgba(0,0,0,.45);
}

.cc-hidden{display:none !important}

.cc-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:9999;
  background:rgba(0,0,0,.5); backdrop-filter:saturate(150%) blur(6px);
  padding:16px;
}
.cc-wrap{
  margin:0 auto; max-width:960px;
  background:var(--cc-card); color:var(--cc-text);
  border:1px solid var(--cc-border); border-radius:var(--cc-radius);
  box-shadow:var(--cc-shadow);
  display:flex; gap:16px; align-items:flex-start; padding:16px;
}
.cc-text{flex:1}
.cc-title{margin:0 0 6px; font-weight:800}
.cc-desc{margin:0; color:var(--cc-muted); line-height:1.6; font-size:14px}
.cc-actions{display:flex; gap:8px; flex-wrap:wrap}

.cc-btn{
  border:0; border-radius:10px; padding:10px 14px; font-weight:800; cursor:pointer;
}
.cc-btn.primary{
  background:linear-gradient(135deg,var(--cc-accent),var(--cc-accent-2));
  color:#121212;
}
.cc-btn.ghost{ background:transparent; color:#e5e7eb; border:1px solid var(--cc-border)}
.cc-btn.link{ background:transparent; color:#ff9f50; text-decoration:underline; padding:0 2px}
.cc-inline{display:inline-flex; align-items:center; gap:6px}

/* Modal */
.cc-modal-backdrop{
  position:fixed; inset:0; z-index:10000; background:rgba(0,0,0,.6);
  display:none; align-items:center; justify-content:center; padding:20px;
}
.cc-modal{
  max-width:720px; width:100%;
  background:var(--cc-card); color:var(--cc-text);
  border:1px solid var(--cc-border); border-radius:16px; box-shadow:var(--cc-shadow);
  padding:16px;
}
.cc-modal header{display:flex; align-items:center; justify-content:space-between; gap:12px}
.cc-modal h2{margin:0; font-size:20px}
.cc-close{border:1px solid var(--cc-border); background:#101015; color:#eee; border-radius:8px; padding:6px 10px; cursor:pointer}
.cc-body{margin-top:12px; display:grid; gap:10px}
.cc-row{
  display:flex; gap:12px; align-items:start;
  background:#101015; border:1px solid var(--cc-border); padding:12px; border-radius:12px;
}
.cc-row h3{margin:0 0 4px; font-size:16px}
.cc-row p{margin:0; color:var(--cc-muted); font-size:14px; line-height:1.6}
.cc-switch{margin-left:auto; display:flex; align-items:center; gap:8px}
.cc-switch input{width:42px; height:22px}

/* Mobile */
@media (max-width:640px){
  .cc-wrap{flex-direction:column}
  .cc-actions{width:100%}
  .cc-actions .cc-btn{flex:1}
}