:root{
  --cc-bg:#0e2238;
  --cc-text:#eef2f7;
  --cc-link:#9fd1ff;
  --cc-btn:#ffffff;
  --cc-btn-outline:#2a3c53;
  --cc-primary:#f15a29;
}
.cc-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:2147483000;
  background:var(--cc-bg); color:var(--cc-text); padding:14px 16px;
  box-shadow:0 -6px 24px rgba(0,0,0,.18);
}
.cc-content{display:flex; gap:16px; align-items:center; justify-content:space-between; max-width:1100px; margin:0 auto;}
.cc-text{font-size:.95rem; line-height:1.5}
.cc-link{color:var(--cc-link); text-decoration:underline}
.cc-actions{display:flex; gap:8px; flex-wrap:wrap}
.cc-btn{border:0; border-radius:10px; padding:10px 14px; cursor:pointer; font-weight:600}
.cc-primary{background:var(--cc-primary); color:#fff}
.cc-outline{background:var(--cc-btn-outline); color:var(--cc-btn);}

@media(max-width:720px){
  .cc-content{flex-direction:column; align-items:stretch}
  .cc-actions{justify-content:stretch}
  .cc-btn{width:100%}
}

/* modal */
.cc-modal{position:fixed; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; z-index:2147483001;}
.cc-modal__dialog{width:min(640px,92vw); background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 14px 48px rgba(0,0,0,.28)}
.cc-modal__header{display:flex; justify-content:space-between; align-items:center; padding:14px 16px; background:#f7f9fc; border-bottom:1px solid #e9eef5}
.cc-modal__body{padding:14px 16px; max-height:70vh; overflow:auto}
.cc-modal__footer{padding:14px 16px; background:#f7f9fc; border-top:1px solid #e9eef5; display:flex; justify-content:flex-end}
.cc-close{background:transparent; border:0; font-size:22px; cursor:pointer}

.cc-item{border:1px solid #eef2f7; border-radius:10px; padding:12px; margin-bottom:10px}
.cc-item__head{display:flex; align-items:center; justify-content:space-between; gap:10px}
.cc-badge{font-size:.75rem; background:#e8eef6; padding:4px 8px; border-radius:999px}

/* switch */
.cc-switch{position:relative; display:inline-block; width:48px; height:26px}
.cc-switch input{display:none}
.cc-slider{position:absolute; cursor:pointer; inset:0; background:#cfd8e3; border-radius:26px; transition:all .2s}
.cc-slider:before{content:""; position:absolute; height:20px; width:20px; left:3px; top:3px; background:#fff; border-radius:50%; transition:all .2s}
.cc-switch input:checked + .cc-slider{background:#22c55e}
.cc-switch input:checked + .cc-slider:before{transform:translateX(22px)}

/* manage button */
.cc-manage{
  position:fixed; left:16px; bottom:16px; z-index:2147483000;
  background:#fff; color:#0e2238; border:1px solid #dbe1ea; border-radius:999px; padding:10px 14px; cursor:pointer; box-shadow:0 8px 22px rgba(0,0,0,.1);
}