/* GPTGenie: Schriftfarbe in den Einstellungen (Farbkreise + eigener Farbwähler, wie im PDF-Editor) */
#letterColor.gg-ink-native { display: none !important; }
.gg-ink .gg-ink-hex { font: 600 11px ui-monospace, SFMono-Regular, Menlo, monospace; color: rgba(245,245,247,0.45); letter-spacing: .04em; }

.gg-ink-swatches { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.gg-ink-swatch {
  width: 30px; height: 30px; border-radius: 50%; padding: 0; margin: 0; position: relative; flex: 0 0 auto;
  background: var(--c, #000);
  border: 2px solid rgba(255,255,255,0.16);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.25);
  cursor: pointer; transition: transform .12s, border-color .12s, box-shadow .12s;
  -webkit-tap-highlight-color: transparent;
}
.gg-ink-swatch:hover { transform: scale(1.08); }
.gg-ink-swatch:focus-visible { outline: 2px solid rgba(var(--a-c084fc,192,132,252),0.9); outline-offset: 2px; }
.gg-ink-swatch.active { border-color: #fff; box-shadow: 0 0 0 2px rgba(var(--a-a855f7,168,85,247),0.75); }
.gg-ink-custom {
  background: conic-gradient(#f44336,#ffeb3b,#4caf50,#00bcd4,#3f51b5,#e91e63,#f44336);   /* accent-keep: Farbauswahl */
  overflow: hidden;
}
/* Eigene Farbe gewählt: Regenbogenring mit der Farbe in der Mitte */
.gg-ink-custom.has-color::after {
  content: ''; position: absolute; inset: 5px; border-radius: 50%;
  background: var(--cc, #000); box-shadow: 0 0 0 1.5px rgba(var(--a-0a0913,10,9,19),0.55);
}
.gg-ink-custom.open { border-color: rgba(var(--a-c084fc,192,132,252),0.95); }

/* ── Eigener Farbwähler ── */
.gg-cp { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; max-width: 360px; animation: ggCpIn .16s ease-out; }
.gg-cp[hidden] { display: none; }
@keyframes ggCpIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.gg-cp-sv {
  position: relative; height: 140px; border-radius: 10px; cursor: crosshair; touch-action: none; outline: none;
  background:
    linear-gradient(to top, #000, rgba(0,0,0,0)),
    linear-gradient(to right, #fff, rgba(255,255,255,0)),
    hsl(var(--hue, 0), 100%, 50%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}
.gg-cp-sv-thumb {
  position: absolute; left: var(--x, 0%); top: var(--y, 100%);
  width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
  background: var(--col, #000); border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.4);
  pointer-events: none;
}
.gg-cp-hue {
  position: relative; height: 16px; border-radius: 999px; cursor: pointer; touch-action: none; outline: none; margin: 0 9px;
  background: linear-gradient(to right, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%);   /* accent-keep: Farbauswahl */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}
.gg-cp-hue-thumb {
  position: absolute; top: 50%; left: var(--x, 0%);
  width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%;
  background: hsl(var(--hue, 0), 100%, 50%); border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.4);
  pointer-events: none;
}
.gg-cp-sv:focus-visible, .gg-cp-hue:focus-visible { box-shadow: 0 0 0 2px rgba(var(--a-c084fc,192,132,252),0.85); }
.gg-cp-row {
  display: flex; align-items: center; gap: 6px; padding: 4px 8px 4px 4px;
  border-radius: 9px; background: rgba(0,0,0,0.22); border: 1px solid rgba(255,255,255,0.10);
}
.gg-cp-row:focus-within { border-color: rgba(var(--a-c084fc,192,132,252),0.6); }
.gg-cp-prev { width: 26px; height: 26px; border-radius: 6px; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15); }
.gg-cp-hash { font: 600 12px ui-monospace, SFMono-Regular, Menlo, monospace; color: rgba(245,245,247,0.45); margin-left: 2px; }
.gg-cp .gg-cp-hex {
  flex: 1; min-width: 0; width: auto; background: none !important; border: none !important; outline: none; padding: 4px 0 !important; margin: 0;
  font: 600 14px ui-monospace, SFMono-Regular, Menlo, monospace !important; color: #f5f5f7 !important;
  letter-spacing: .04em; text-transform: uppercase; box-shadow: none !important; border-radius: 0;
}
.gg-cp .gg-cp-hex.bad { color: #f87171 !important; }
.gg-cp-recent-wrap[hidden] { display: none; }
.gg-cp-recent-title { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(245,245,247,0.45); margin-bottom: 6px; }
.gg-cp-recent { display: flex; flex-wrap: wrap; gap: 6px; }
.gg-cp-chip {
  width: 24px; height: 24px; border-radius: 6px; padding: 0; margin: 0; cursor: pointer;
  background: var(--c, #000); border: 1px solid rgba(255,255,255,0.16);
  transition: transform .12s;
}
.gg-cp-chip:hover { transform: scale(1.1); }
.gg-cp-chip:focus-visible { outline: 2px solid rgba(var(--a-c084fc,192,132,252),0.85); outline-offset: 2px; }