:root{
  --cmc-primary:#27aae1;
  --cmc-accent:#f7941d;
  --cmc-soft:#f1f2f2;
  --cmc-bg:#ffffff;
  --cmc-fg:#1f2937;
  --cmc-shadow:0 10px 30px rgba(0,0,0,.15);
}
body.dark :root, body.dark{
  --cmc-bg:#1f1f1f;
  --cmc-fg:#f5f5f5;
  --cmc-soft:#2a2a2a;
}

#cmc-helper{
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 9999;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.cmc-helper-button{
  width: 64px; height: 64px; border-radius: 9999px; border: none; cursor: pointer;
  background: var(--cmc-bg); color: var(--cmc-fg); box-shadow: var(--cmc-shadow);
  display:flex; align-items:center; justify-content:center; padding:0; position:relative;
  transition: transform .1s ease, box-shadow .2s ease;
}
.cmc-helper-button:hover{ transform: translateY(-2px); }

.cmc-badge{
  position:absolute; top:-6px; right:-6px; background:var(--cmc-accent); color:#fff;
  border-radius:9999px; padding:2px 6px; font-size:12px; font-weight:700; box-shadow: var(--cmc-shadow);
}

.cmc-panel{
  position: absolute; right: 0; bottom: 80px; width: 320px; max-width: 88vw;
  background: var(--cmc-bg); color: var(--cmc-fg); border-radius: 16px; box-shadow: var(--cmc-shadow);
  overflow: hidden;
}
.cmc-header{
  display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid rgba(0,0,0,.06);
  background: linear-gradient(135deg, var(--cmc-primary), var(--cmc-accent)); color:#fff;
}
.cmc-title{ font-weight:700; font-size:15px; }
.cmc-body{ padding: 14px; display:flex; flex-direction:column; gap:10px; }

.cmc-actions{ display:flex; flex-wrap:wrap; gap:8px; }
.cmc-actions button{
  flex:1 1 auto;
  background: var(--cmc-soft); color: var(--cmc-fg); border:none; border-radius:12px; padding:10px 12px;
  cursor:pointer; transition:transform .05s ease, box-shadow .15s ease;
}
.cmc-actions button:hover{ transform: translateY(-1px); box-shadow: var(--cmc-shadow); }

.cmc-tip{
  font-size: 13px; background: rgba(0,0,0,.04); border-radius:12px; padding:10px;
}
body.dark .cmc-tip{ background: rgba(255,255,255,.06); }

.cmc-prompt{
  position:absolute; right:80px; bottom: 16px; max-width: 260px;
  background: var(--cmc-bg); color: var(--cmc-fg); border-radius: 16px; box-shadow: var(--cmc-shadow);
  padding: 10px 12px; font-size: 14px;
  animation: cmc-pop .15s ease-out;
}
@keyframes cmc-pop{ from{ transform:scale(.95); opacity:0 } to{ transform:scale(1); opacity:1 } }

/* SVG-Maskottchen */
.cmc-mascot{ width: 34px; height: 34px; display:block; }
.cmc-header .cmc-mascot{ filter: drop-shadow(0 2px 2px rgba(0,0,0,.2)); }

.cmc-row{ display:flex; align-items:center; gap:8px; }
.cmc-link{ color:inherit; text-decoration: none; font-weight:600; border-bottom:1px dotted currentColor; }
.cmc-close{
  margin-left:auto; background:transparent; border:none; color:inherit; cursor:pointer; font-weight:700;
}