:root {
    --cc-primary:       #0f4c81;
    --cc-primary-hover: #0a3560;
    --cc-text:          #1a1a1a;
    --cc-text-muted:    #555555;
    --cc-border:        #e0e0e0;
    --cc-toggle-on:     #0f4c81;
    --cc-toggle-off:    #d1d5db;
}

/* ── Bottone "Personalizza" nel banner CDN ───────────────── */
a.cc-personalizza {
    background:      transparent !important;
    border-color:    transparent !important;
    color:           inherit !important;
    text-decoration: underline;
    font-weight:     400 !important;
    opacity:         .8;
}
a.cc-personalizza:hover {
    opacity:         1;
    text-decoration: underline !important;
}

/* ── Pannello preferenze ─────────────────────────────────── */
#cc-panel {
    position:      fixed;
    top:           50%;
    left:          50%;
    transform:     translate(-50%, -50%);
    width:         min(520px, calc(100vw - 32px));
    max-height:    90vh;
    overflow-y:    auto;
    background:    #ffffff;
    border-radius: 10px;
    box-shadow:    0 8px 32px rgba(0, 0, 0, 0.16);
    z-index:       100001;
    padding:       28px;
    font-family:   inherit;
    font-size:     14px;
    color:         var(--cc-text);
}

#cc-panel h2 {
    margin:      0 0 8px;
    font-size:   17px;
    font-weight: 600;
}

.cc-panel-desc {
    color:         var(--cc-text-muted);
    font-size:     13px;
    line-height:   1.6;
    margin-bottom: 20px;
}
.cc-panel-desc a { color: var(--cc-primary); }

/* ── Categorie ───────────────────────────────────────────── */
.cc-category {
    border:        1px solid var(--cc-border);
    border-radius: 8px;
    padding:       14px 16px;
    margin-bottom: 12px;
}

.cc-category-header {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    margin-bottom:   6px;
}

.cc-category-title { font-weight: 600; font-size: 14px; }

.cc-category-desc {
    font-size:   12px;
    color:       var(--cc-text-muted);
    line-height: 1.55;
}

/* ── Toggle switch ───────────────────────────────────────── */
.cc-toggle {
    position:    relative;
    width:       44px;
    height:      24px;
    flex-shrink: 0;
}
.cc-toggle input { opacity: 0; width: 0; height: 0; }

.cc-toggle-slider {
    position:      absolute;
    inset:         0;
    background:    var(--cc-toggle-off);
    border-radius: 24px;
    cursor:        pointer;
    transition:    background .25s;
}
.cc-toggle-slider::before {
    content:       '';
    position:      absolute;
    width:         18px;
    height:        18px;
    bottom:        3px;
    left:          3px;
    background:    #ffffff;
    border-radius: 50%;
    transition:    transform .25s;
    box-shadow:    0 1px 3px rgba(0, 0, 0, 0.2);
}
.cc-toggle input:checked + .cc-toggle-slider              { background: var(--cc-toggle-on); }
.cc-toggle input:checked + .cc-toggle-slider::before      { transform: translateX(20px); }
.cc-toggle input:disabled + .cc-toggle-slider             { opacity: .55; cursor: not-allowed; }

/* ── Azioni pannello ─────────────────────────────────────── */
.cc-panel-actions {
    display:    flex;
    gap:        10px;
    margin-top: 20px;
    flex-wrap:  wrap;
}

.cc-btn-save {
    background:    var(--cc-primary);
    color:         #ffffff;
    border:        none;
    border-radius: 6px;
    padding:       9px 20px;
    font-size:     13px;
    font-weight:   600;
    font-family:   inherit;
    cursor:        pointer;
    transition:    background .2s;
}
.cc-btn-save:hover { background: var(--cc-primary-hover); }

.cc-btn-cancel {
    background:    #f3f4f6;
    color:         var(--cc-text);
    border:        1px solid var(--cc-border);
    border-radius: 6px;
    padding:       9px 20px;
    font-size:     13px;
    font-weight:   600;
    font-family:   inherit;
    cursor:        pointer;
    transition:    background .2s;
}
.cc-btn-cancel:hover { background: #e5e7eb; }