:root{
  --cc-bg: rgba(10,10,10,0.9);
  --cc-surface: #0A0A0A;
  --cc-paper: #F8F7F4;
  --cc-muted: #999590;
  --cc-accent: #E63B2E;
}

.cc-hidden{display:none !important;}

.cc-banner{
  position:fixed;
  left:16px; right:16px; bottom:16px;
  z-index:9999;
  border:1px solid rgba(248,247,244,0.12);
  background:var(--cc-bg);
  backdrop-filter: blur(10px);
  color:var(--cc-paper);
  border-radius:16px;
}
.cc-banner__inner{
  max-width:1400px;
  margin:0 auto;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
@media (min-width: 900px){
  .cc-banner__inner{flex-direction:row; align-items:center; justify-content:space-between; gap:20px;}
}
.cc-title{font-family: Syne, Helvetica, sans-serif; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; font-size:12px;}
.cc-text{color:rgba(248,247,244,0.78); font-size:13px; line-height:1.5; max-width:820px;}
.cc-actions{display:flex; gap:10px; flex-wrap:wrap;}
.cc-btn{
  border-radius:999px;
  padding:10px 14px;
  font-size:12px;
  font-weight:700;
  letter-spacing:0.16em;
  text-transform:uppercase;
  border:1px solid rgba(248,247,244,0.18);
  background:transparent;
  color:var(--cc-paper);
  cursor:pointer;
}
.cc-btn:hover{border-color:rgba(248,247,244,0.34);}
.cc-btn--primary{background:var(--cc-accent); border-color:var(--cc-accent); color:var(--cc-paper);}
.cc-btn--primary:hover{filter:brightness(0.95);}

.cc-fab{
  position:fixed;
  left:16px;
  bottom:16px;
  z-index:9998;
  border-radius:999px;
  padding:10px 14px;
  background:rgba(10,10,10,0.8);
  color:var(--cc-paper);
  border:1px solid rgba(248,247,244,0.12);
  cursor:pointer;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  backdrop-filter: blur(8px);
}
.cc-fab:hover{border-color:rgba(248,247,244,0.3);}

.cc-modal-backdrop{
  position:fixed; inset:0;
  z-index:10000;
  background:rgba(10,10,10,0.6);
  backdrop-filter: blur(2px);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:16px;
}
@media (min-width: 900px){
  .cc-modal-backdrop{align-items:center;}
}
.cc-modal{
  width:min(760px, 100%);
  background:var(--cc-paper);
  color:#0A0A0A;
  border-radius:18px;
  border:1px solid rgba(10,10,10,0.12);
  overflow:hidden;
}
.cc-modal__head{
  padding:18px 18px 0 18px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.cc-modal__title{font-family: Syne, Helvetica, sans-serif; font-size:22px; font-weight:800; letter-spacing:-0.02em;}
.cc-modal__close{
  border:none;
  background:transparent;
  cursor:pointer;
  font-size:22px;
  line-height:1;
  color:#0A0A0A;
  padding:6px 8px;
  border-radius:10px;
}
.cc-modal__close:hover{background:rgba(10,10,10,0.06);}
.cc-modal__body{padding:12px 18px 18px 18px;}
.cc-modal__desc{color:rgba(10,10,10,0.7); font-size:13px; line-height:1.55; margin-top:8px;}
.cc-prefs{margin-top:14px; display:flex; flex-direction:column; gap:10px;}
.cc-pref{
  border:1px solid rgba(10,10,10,0.12);
  border-radius:14px;
  padding:14px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
.cc-pref strong{display:block; font-family: Syne, Helvetica, sans-serif;}
.cc-pref p{margin-top:4px; color:rgba(10,10,10,0.65); font-size:12.5px; line-height:1.45;}
.cc-switch{
  display:flex;
  align-items:center;
  gap:10px;
  user-select:none;
}
.cc-switch input{width:18px; height:18px;}
.cc-modal__foot{
  padding:14px 18px 18px 18px;
  border-top:1px solid rgba(10,10,10,0.10);
  display:flex;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}
.cc-btn--dark{
  background:#0A0A0A;
  border-color:#0A0A0A;
  color:var(--cc-paper);
}
.cc-btn--dark:hover{filter:brightness(1.05);}