.captcha-host,[data-captcha-field]{display:block;margin:6px 0 18px}
.captcha-field{display:flex;flex-direction:column;gap:12px}
.captcha-label{font-size:13px;line-height:1.4;color:#b7c7d4}
.captcha-tiles{display:flex;align-items:center;gap:8px}
/* Digit tiles: "liquid glass" — a soft gradient + blur, no border, depth
   comes from the inset highlight/shadow instead of an outline. */
.captcha-tile{
  width:46px;height:46px;flex:none;display:flex;align-items:center;justify-content:center;
  border-radius:14px;font:700 20px/1 Manrope,sans-serif;color:#f4faff;
  background:linear-gradient(155deg,rgba(255,255,255,.20),rgba(255,255,255,.05) 60%,rgba(255,255,255,.02));
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -10px 14px -10px rgba(0,0,0,.25),0 8px 18px -8px rgba(0,0,0,.35);
}
.captcha-op{flex:none;font:700 22px/1 Manrope,sans-serif;color:#9db2c3;padding:0 1px}
/* Answer tile: same rounded-square shape, but a plain filled input instead
   of the glass look, so it visibly reads as "type here". */
/* Scoped under .captcha-tiles: some page stylesheets style bare
   `input[type="text"]` inside their own form container at the same
   specificity, and this must win regardless of load order. */
.captcha-field .captcha-tiles .captcha-input{
  width:52px;height:46px;flex:none;box-sizing:border-box;text-align:center;
  border:0;border-radius:14px;background:rgba(2,8,14,.6);color:#f4faff;
  font:700 19px/1 Inter,system-ui,sans-serif;outline:none;
  box-shadow:inset 0 1px 4px rgba(0,0,0,.45);
}
.captcha-field .captcha-tiles .captcha-input:focus{box-shadow:inset 0 1px 4px rgba(0,0,0,.45),0 0 0 4px rgba(73,200,242,.16)}
@media(max-width:360px){.captcha-tile,.captcha-field .captcha-tiles .captcha-input{width:40px;height:40px;font-size:17px}}