/* Self-hosted captcha widget (website forms + login). */
.q-captcha { --qc-accent: #b5562f; --qc-ink: #2a211c; --qc-muted: #6b5e55; display: grid; gap: 8px; margin: 4px 0 6px; padding: 12px 14px; border: 1px solid #e6dccd; border-radius: 16px; background: linear-gradient(135deg, #fffaf3, #fff); box-shadow: 0 10px 24px -20px rgba(28,23,20,.6); }
.q-captcha__label { display: flex; align-items: center; gap: 6px; font: 700 11px/1 system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--qc-muted); }
.q-captcha__shield { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; animation: q-captcha-hue 7s ease-in-out infinite; }
@keyframes q-captcha-hue { 0%, 100% { color: #b5562f; } 33% { color: #c9a45c; } 66% { color: #5f7055; } }
.q-captcha__row { display: flex; align-items: center; gap: 10px; }
.q-captcha__img { display: block; width: 180px; height: 60px; border-radius: 10px; background: #f3eadb; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); object-fit: cover; }
.q-captcha.is-loading .q-captcha__img { background: linear-gradient(100deg, #f3eadb 30%, #fbf6ee 50%, #f3eadb 70%) 0 0 / 300% 100%; animation: q-captcha-shimmer 1.2s linear infinite; }
.q-captcha.is-loading .q-captcha__img:not([src]) , .q-captcha.is-loading .q-captcha__img[src=""] { color: transparent; }
@keyframes q-captcha-shimmer { to { background-position: -150% 0; } }
.q-captcha__new { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid #e6dccd; border-radius: 50%; background: #fff; cursor: pointer; transition: transform .2s, box-shadow .2s; }
.q-captcha__new:hover { box-shadow: 0 6px 14px -8px rgba(0,0,0,.4); transform: translateY(-1px); }
.q-captcha__new:focus-visible { outline: 3px solid color-mix(in srgb, #b5562f 55%, transparent); outline-offset: 2px; }
.q-captcha__new svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; animation: q-captcha-hue 7s ease-in-out infinite; }
.q-captcha__new.is-spin svg { animation: q-captcha-spin .6s cubic-bezier(.3,1.4,.5,1), q-captcha-hue 7s ease-in-out infinite; }
@keyframes q-captcha-spin { from { transform: rotate(-360deg); } }
.q-captcha__field { display: grid; gap: 4px; margin: 0; font-size: 13px; font-weight: 600; color: var(--qc-ink); }
.q-captcha__field input { width: 180px; max-width: 100%; min-height: 44px; padding: 6px 12px; border: 1.5px solid #d9c9b4; border-radius: 10px; background: #fff; font: 700 22px/1 ui-monospace, "SFMono-Regular", Menlo, monospace; letter-spacing: .42em; color: var(--qc-ink); transition: border-color .2s, box-shadow .2s; }
.q-captcha__field input:focus { outline: none; border-color: var(--qc-accent); box-shadow: 0 0 0 3px color-mix(in srgb, #b5562f 18%, transparent); }
.q-captcha.is-complete .q-captcha__field input { border-color: #5f7055; }
.q-captcha.is-wrong .q-captcha__field input { border-color: #b32d2e; animation: q-captcha-shake .4s; }
@keyframes q-captcha-shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.q-captcha__status { font-size: 12px; color: #b32d2e; }
.q-captcha__status:empty { display: none; }
@media (prefers-reduced-motion: reduce) { .q-captcha *, .q-captcha { animation: none !important; } }

/* wp-login.php – sits on the dark glass panel. */
.login .q-captcha { margin: 0 0 16px; }
.login .q-captcha, .q-gc__balance .q-captcha { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.22); box-shadow: none; }
.login .q-captcha__label, .q-gc__balance .q-captcha__label { color: #e9c77f; }
.login .q-captcha__field span, .q-gc__balance .q-captcha__field span { color: #fbf3e6; font-weight: 600; }
.login .q-captcha__field input, .q-gc__balance .q-captcha__field input { border-color: rgba(255,255,255,.35); background: #fff; color: #2a211c; text-transform: none; letter-spacing: .42em; font-family: ui-monospace, Menlo, monospace; }
.login .q-captcha__new, .q-gc__balance .q-captcha__new { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); color: #fbf3e6; }
.login .q-captcha__field input { width: 100%; font-size: 22px; }
.login .q-captcha__img { width: 180px; }