/* Color Chat — theme-friendly UI. No white page/background is forced. */
.color-chat-settings { color: inherit; }
.color-chat-settings .cc-settings-intro,
.color-chat-settings .cc-color-editor,
.color-chat-settings .cc-tariff {
    background: rgba(127,127,127,.06);
    border: 1px solid rgba(127,127,127,.16);
    border-radius: 8px;
}
.color-chat-settings .cc-settings-intro {
    display:flex; flex-wrap:wrap; gap:10px; padding:12px; margin-bottom:12px;
}
.color-chat-settings .cc-status-line {
    flex:1 1 180px; padding:8px 10px; border-radius:6px;
    background: rgba(127,127,127,.05);
}
.color-chat-settings .cc-label { opacity:.7; display:block; font-size:12px; margin-bottom:3px; }
.color-chat-settings .cc-color-editor { padding:14px; margin-bottom:14px; }
.color-chat-settings .cc-section-title { font-weight:700; margin-bottom:4px; }
.color-chat-settings .cc-muted { opacity:.65; font-size:13px; }
.color-chat-settings .cc-color-controls {
    display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:12px;
}
.color-chat-settings input[type="color"] {
    width:46px; height:38px; padding:2px; border:1px solid rgba(127,127,127,.35);
    border-radius:6px; background:transparent; cursor:pointer;
}
.color-chat-settings .cc-hex {
    min-width:105px;
}
.color-chat-settings .cc-color-preview {
    display:inline-block; font-weight:800; font-size:16px;
    padding:2px 8px; border-radius:5px; background:rgba(127,127,127,.09);
}
.color-chat-settings .cc-tariffs-title { margin:8px 0 10px; }
.color-chat-settings .cc-tariffs {
    display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px;
}
.color-chat-settings .cc-tariff { padding:14px; position:relative; overflow:hidden; }
.color-chat-settings .cc-tariff::before {
    content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
    background:var(--cc-accent, currentColor); opacity:.9;
}
.color-chat-settings .cc-tariff-head {
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    margin-bottom:12px;
}
.color-chat-settings .cc-tariff-name { font-size:16px; font-weight:700; }
.color-chat-settings .cc-swatch {
    width:24px; height:24px; border-radius:50%; border:1px solid rgba(127,127,127,.35);
    box-shadow:0 0 0 3px rgba(127,127,127,.08);
}
.color-chat-settings .cc-price { font-size:20px; font-weight:800; }
.color-chat-settings .cc-meta { opacity:.7; font-size:13px; margin:5px 0 12px; }
.color-chat-settings .cc-buy { width:100%; }
.color-chat-settings .cc-result { margin-top:12px; min-height:20px; }
@media (max-width:600px) {
    .color-chat-settings .cc-tariffs { grid-template-columns:1fr; }
    .color-chat-settings .cc-color-controls input[type="text"] { flex:1 1 100px; }
}