.lp-cb {
    /* Theme CSS vars chain — supports both naming conventions:
       (a) "long" — --color-bg-card, --color-accent, ... (default brand-kit)
       (b) "short" — --bg-card, --yellow, --text-2, --border, ... (brutalist + others)
       Last value = hardcoded fallback for themes without any vars. */
    --cb-bg:      var(--color-bg-card, var(--bg-card, var(--bg, #ffffff)));
    --cb-text:    var(--color-text-primary, var(--text, var(--white, #1d2327)));
    --cb-text-2:  var(--color-text-secondary, var(--text-2, #646970));
    --cb-accent:  var(--color-accent, var(--yellow, var(--accent, #2271b1)));
    --cb-border:  var(--color-border, var(--border, #c3c4c7));
    --cb-radius:  var(--radius-md, 6px);
    --cb-font:    var(--font-body, var(--font, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif));
    /* Accent text colour: most brutalist themes use dark text on yellow accent,
       most light themes use white text on blue accent. Theme can override. */
    --cb-accent-text: var(--color-on-accent, var(--text-on-yel, #ffffff));

    position: fixed;
    z-index: 99999;
    font-family: var(--cb-font);
    font-size: 14px;
    line-height: 1.5;
    color: var(--cb-text);
    background: var(--cb-bg);
    border: 1px solid var(--cb-border);
    box-sizing: border-box;
}
.lp-cb *, .lp-cb *::before, .lp-cb *::after { box-sizing: border-box; }
.lp-cb[hidden] { display: none !important; }

.lp-cb__title { margin: 0 0 8px; font-size: 16px; font-weight: 600; }
.lp-cb__desc  { margin: 0 0 12px; color: var(--cb-text-2); }

.lp-cb__categories { margin: 12px 0; }
.lp-cb__category {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--cb-border);
}
.lp-cb__category:last-child { border-bottom: none; }
.lp-cb__category input[type="checkbox"] { grid-row: 1 / span 2; margin-top: 4px; }
.lp-cb__category-name { font-weight: 600; }
.lp-cb__category-desc { font-size: 13px; color: var(--cb-text-2); }

.lp-cb__actions {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: flex-end;
    margin-top: 12px;
    flex-wrap: wrap;
}
.lp-cb__policy {
    margin-right: auto;
    font-size: 13px;
    color: var(--cb-text-2);
    text-decoration: underline;
}

.lp-cb__btn {
    padding: 8px 16px;
    border: 1px solid var(--cb-border);
    border-radius: var(--cb-radius);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    background: transparent;
    color: var(--cb-text);
    font-family: inherit;
    transition: opacity 0.15s;
}
.lp-cb__btn:hover { opacity: 0.85; }
.lp-cb__btn--primary {
    background: var(--cb-accent);
    color: var(--cb-accent-text);
    border-color: var(--cb-accent);
}
.lp-cb__btn--ghost { background: transparent; }
.lp-cb__btn--secondary { background: transparent; }

.lp-cb-reopen {
    position: fixed;
    bottom: 12px;
    left: 12px;
    background: transparent;
    border: 1px solid var(--cb-border, #c3c4c7);
    border-radius: var(--cb-radius, 6px);
    padding: 6px 12px;
    color: var(--cb-text-2, #646970);
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
    z-index: 99998;
}
.lp-cb-reopen:hover { color: var(--cb-text, #1d2327); }
.lp-cb-reopen[hidden] { display: none !important; }

@media (max-width: 600px) {
    .lp-cb__actions { flex-direction: column; align-items: stretch; }
    .lp-cb__policy  { margin-right: 0; text-align: center; }
    .lp-cb__btn     { width: 100%; }
}