/* Xcojo CAPTCHA widget */
.xco-cap { display: block; margin: 4px 0 2px; }
.xco-cap-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 16px; border: 1px solid var(--xm-hair-strong, rgba(15,23,42,.14)); background: var(--xm-field, rgba(255,255,255,.9)); transition: border-color .2s ease, box-shadow .2s ease; }
.xco-cap[data-state="done"] .xco-cap-row { border-color: color-mix(in srgb, var(--xco-success, #16856B) 55%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--xco-success, #16856B) 14%, transparent); }
.xco-cap-box { display: inline-flex; align-items: center; gap: 12px; padding: 4px 2px; border: 0; background: none; color: inherit; font: inherit; font-weight: 600; cursor: pointer; text-align: left; }
.xco-cap-box:disabled { cursor: default; opacity: 1; }
.xco-cap-box:focus-visible { outline: 3px solid color-mix(in srgb, var(--xco-accent, #0F8B8D) 55%, transparent); outline-offset: 4px; border-radius: 10px; }
.xco-cap-tick { position: relative; flex: none; width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--xco-ink-soft, #5C676B); background: transparent; transition: all .2s ease; }
.xco-cap-box:hover:not(:disabled) .xco-cap-tick { border-color: var(--xco-accent, #0F8B8D); }
.xco-cap[data-state="working"] .xco-cap-tick { border-color: color-mix(in srgb, var(--xco-accent, #0F8B8D) 30%, transparent); border-top-color: var(--xco-accent, #0F8B8D); border-radius: 50%; animation: xco-cap-spin .8s linear infinite; }
.xco-cap[data-state="done"] .xco-cap-tick { background: var(--xco-success, #16856B); border-color: var(--xco-success, #16856B); }
.xco-cap[data-state="done"] .xco-cap-tick::after { content: ""; position: absolute; left: 7px; top: 2px; width: 7px; height: 13px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg); }
.xco-cap-brand { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--xco-ink-soft, #5C676B); white-space: nowrap; }
.xco-cap-brand::before { content: "✦ "; color: var(--xco-accent, #0F8B8D); }
.xco-cap-msg { margin: 8px 2px 0; font-size: .86rem; color: var(--xco-ink-soft, #5C676B); }
.xco-cap-msg.is-bad { color: var(--xco-danger, #C43D4B); }
.xco-cap-panel { margin-top: 10px; padding: 14px; border-radius: 16px; border: 1px solid var(--xm-hair-strong, rgba(15,23,42,.14)); background: var(--xm-card-strong, rgba(255,255,255,.86)); }
.xco-cap-panel[hidden] { display: none; }
.xco-cap-prompt { margin: 0 0 10px; font-weight: 600; }
.xco-cap-grid { position: relative; width: min(300px, 100%); aspect-ratio: 1; margin: 0 auto; background-size: 100% 100%; border-radius: 12px; overflow: hidden; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); }
.xco-cap-cell { border: 0; background: transparent; cursor: pointer; position: relative; padding: 0; }
.xco-cap-cell:focus-visible { outline: 3px solid var(--xco-accent, #0F8B8D); outline-offset: -3px; }
.xco-cap-cell.is-on { background: color-mix(in srgb, var(--xco-accent, #0F8B8D) 30%, transparent); box-shadow: inset 0 0 0 3px var(--xco-accent, #0F8B8D); }
.xco-cap-cell.is-on::after { content: "✓"; position: absolute; top: 4px; right: 6px; color: #fff; background: var(--xco-accent, #0F8B8D); width: 20px; height: 20px; border-radius: 50%; font-size: 13px; line-height: 20px; text-align: center; }
.xco-cap-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.xco-cap-link { border: 0; background: none; padding: 4px 0; color: var(--xco-accent, #0F8B8D); font: inherit; font-size: .86rem; cursor: pointer; text-decoration: underline; }
.xco-cap-answer { width: 100%; max-width: 160px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--xm-hair-strong, rgba(15,23,42,.2)); background: var(--xm-field, #fff); color: inherit; font-size: 1.1rem; }
.xco-cap-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
@keyframes xco-cap-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .xco-cap[data-state="working"] .xco-cap-tick { animation-duration: 2s; } }
.xco-cap[hidden] { display: none; }