:root{
  --ccm-brand:#ffbe98;--ccm-accent:#9B4825;--ccm-bg:#fff;--ccm-text:#1f1f1f;--ccm-muted:#777;
  --ccm-btn-primary:#ffbe98;--ccm-btn-secondary:#ececec;--ccm-btn-text:#1f1f1f;--ccm-overlay:rgba(0,0,0,.45);
  --ccm-radius:14px;--ccm-shadow:0 10px 30px rgba(0,0,0,.12);--ccm-lm-blur:14px;
}
.ccm-overlay{position:fixed;inset:0;background:var(--ccm-overlay);opacity:0;pointer-events:none;transition:.2s;z-index:99998}
.ccm-overlay.show{opacity:1;pointer-events:auto}
.ccm-modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;z-index:99999;opacity:0;transform:translateY(10px);pointer-events:none;transition:.2s}
.ccm-modal.show{opacity:1;transform:none;pointer-events:auto}
.ccm-card{width:min(900px,100%);background:var(--ccm-bg);color:var(--ccm-text);border-radius:var(--ccm-radius);box-shadow:var(--ccm-shadow);border:1px solid #ececec;padding:22px}
.ccm-header{display:flex;align-items:center;gap:12px;padding-bottom:10px;border-bottom:1px dashed #e7e7e7}
.ccm-logo{width:36px;height:36px;border-radius:50%}
.ccm-groups{display:flex;flex-direction:column;gap:10px;padding:16px 0}
.ccm-acc summary{list-style:none;display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid #eee;border-radius:12px;background:#fafafa;cursor:pointer}
.ccm-acc[open] summary{background:#fff;border-color:#e6e6e6}
.ccm-acc-body{padding:12px 16px 16px;color:var(--ccm-muted)}
.ccm-chip{font-size:12px;padding:4px 8px;border-radius:999px;background:color-mix(in srgb,var(--ccm-brand) 18%, #fff);color:var(--ccm-accent);border:1px solid color-mix(in srgb,var(--ccm-brand) 35%, #fff)}
.ccm-switch{position:relative;width:46px;height:26px}
.ccm-switch input{display:none}
.ccm-slider{position:absolute;inset:0;background:#d9d9d9;border-radius:999px;transition:.2s}
.ccm-slider:after{content:"";position:absolute;width:20px;height:20px;top:3px;left:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.ccm-switch input:checked + .ccm-slider{background:var(--ccm-brand)}
.ccm-switch input:checked + .ccm-slider:after{transform:translateX(20px)}
.ccm-footer{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding-top:10px}
.ccm-actions{display:flex;gap:10px}
.ccm-btn{all:unset;display:inline-block !important;border-radius:12px !important;padding:12px 16px !important;font-weight:600 !important;font-size:1rem !important;text-align:center !important;cursor:pointer !important;transition:all .2s ease !important;user-select:none !important;white-space:nowrap !important;color:var(--ccm-btn-text) !important;background:#fff}
.ccm-primary{background:var(--ccm-btn-primary) !important}
.ccm-primary:hover{background:color-mix(in srgb,var(--ccm-btn-primary) 85%, black) !important}
.ccm-outline{background:#fff !important;border:2px solid var(--ccm-brand) !important;color:var(--ccm-accent) !important}
.ccm-outline:hover{background:color-mix(in srgb,var(--ccm-brand) 10%, #fff) !important}
.ccm-secondary{background:#f2f2f2 !important;color:#333 !important;border:1px solid #ddd !important}
.ccm-secondary:hover{background:#e6e6e6 !important;border-color:#ccc !important;transform:translateY(-1px) !important;box-shadow:0 2px 6px rgba(0,0,0,.08) !important}
.ccm-policy{color:var(--ccm-accent);text-decoration:underline}
.ccm-signature{margin-left:auto;font-size:12px;color:var(--ccm-muted)}
.ccm-fab{position:fixed;width:54px;height:54px;border-radius:999px;border:1px solid #e5e5e5;background:#fff;box-shadow:var(--ccm-shadow);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:8px;transition:transform .15s ease, box-shadow .2s ease;z-index:99997}
.ccm-fab img{width:100%;height:100%;border-radius:999px}
.ccm-fab:hover{transform:translateY(-2px)}
.ccm-fab.bottom-right{right:18px;bottom:18px}
.ccm-fab.bottom-left{left:18px;bottom:18px}
.ccm-fab.top-right{right:18px;top:18px}
.ccm-fab.top-left{left:18px;top:18px}

/* MOBILE FIXES */
@media (max-width: 480px){
  .ccm-card{padding:16px}
  .ccm-footer{flex-direction:column; align-items:stretch; gap:12px; }
  .ccm-actions{flex-direction:column; width:100%; gap:8px;}
  .ccm-btn{width:100% !important}
  .ccm-signature{margin:0 auto; text-align:center;}
}

@media (max-width:640px){
  .ccm-actions{width:100%;justify-content:space-between}
  .ccm-header h3{font-size:18px}
}