@charset "UTF-8";
/* ALTCHA · Claude 精密锁扣版（方案 F）
   覆盖 altcha v3 自带样式（id=altcha-css），依赖主题 colors.blade.php 注入的 --color-* 三元组，明暗自适应。 */

.hb-altcha altcha-widget {
  display: block;
  width: 100%;
  --altcha-max-width: 100%;
  --altcha-color-primary: hsl(var(--color-primary));
  --altcha-color-base: hsl(var(--color-background-secondary));
  --altcha-color-base-content: hsl(var(--color-base));
  --altcha-color-error: hsl(var(--color-error));
  --altcha-color-success: hsl(var(--color-success));
  --altcha-border-color: hsl(var(--color-neutral));
  --altcha-border-radius: 12px;
}

@keyframes hbAltchaSpin { to { transform: rotate(360deg); } }
@keyframes hbAltchaShake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-5px)} 40%{transform:translateX(5px)} 60%{transform:translateX(-3px)} 80%{transform:translateX(3px)} }
@keyframes hbAltchaPop { 0%{transform:scale(.6)} 55%{transform:scale(1.12)} 100%{transform:scale(1)} }
@keyframes hbAltchaBreathe { 0%,100%{opacity:.45} 50%{opacity:1} }
@keyframes hbAltchaSlide { 0%{left:-35%} 60%{left:105%} 100%{left:105%} }
@keyframes hbAltchaBloom { 0%{box-shadow:0 0 0 0 hsl(var(--color-success) / .35)} 100%{box-shadow:0 0 0 12px hsl(var(--color-success) / 0)} }

/* ============ 卡片 ============ */
.hb-altcha altcha-widget .altcha {
  width: 100%;
  max-width: 100%;
  border: 1px solid hsl(var(--color-neutral));
  border-radius: 12px;
  background: hsl(var(--color-background-secondary));
  color: hsl(var(--color-base));
  padding: 15px 18px 12px;
  position: relative;
  overflow: hidden;
  font-family: inherit;
  -webkit-user-select: none;
  user-select: none;
  box-shadow: 0 1px 2px rgb(0 0 0 / .04), 0 12px 28px -18px hsl(var(--color-primary) / .35);
  transition: border-color .25s, box-shadow .25s;
}
.hb-altcha altcha-widget .altcha:hover {
  border-color: color-mix(in srgb, hsl(var(--color-primary)) 40%, hsl(var(--color-neutral)));
  box-shadow: 0 1px 2px rgb(0 0 0 / .04), 0 16px 34px -16px hsl(var(--color-primary) / .4);
}
/* 底部扫描线（验证中） */
.hb-altcha altcha-widget .altcha::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -35%;
  width: 32%;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, hsl(var(--color-primary)), transparent);
  opacity: 0;
  pointer-events: none;
}

/* 关键结构：altcha v3 里 .altcha-main 才是它的“整张卡”（第一行 + footer + 隐藏input 全是它的子节点，
   自带背景/边框/内边距）。这里把它拍平成纯容器（block），卡片外观统一由外层 .altcha 承担；
   第一个子 div 是“复选框 + 文案 + 挂锁”那一行，按行布局。 */
.hb-altcha altcha-widget .altcha-main {
  display: block !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  width: 100% !important;
  max-width: none !important;
}
.hb-altcha altcha-widget .altcha-main > div:first-child {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
.hb-altcha altcha-widget .altcha-main > div:first-child > * {
  display: flex !important;
  align-items: center !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}
.hb-altcha altcha-widget .altcha-checkbox-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  cursor: pointer;
  flex: 1 1 auto !important;
  min-width: 0;
}

/* ============ 复选框 ============ */
.hb-altcha altcha-widget .altcha-checkbox {
  position: relative;
  width: 22px;
  height: 22px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid color-mix(in srgb, hsl(var(--color-muted)) 50%, hsl(var(--color-neutral)));
  border-radius: 7px;
  background: hsl(var(--color-background));
  box-shadow: inset 0 1px 2px rgb(0 0 0 / .05);
  cursor: pointer;
  transition: all .22s cubic-bezier(.34,1.56,.64,1);
}
.hb-altcha altcha-widget .altcha-checkbox:hover {
  border-color: hsl(var(--color-primary));
  box-shadow: inset 0 1px 2px rgb(0 0 0 / .05), 0 0 0 4px hsl(var(--color-primary) / .12);
}
.hb-altcha altcha-widget .altcha-checkbox:has(input:focus-visible) {
  border-color: hsl(var(--color-primary));
  box-shadow: inset 0 1px 2px rgb(0 0 0 / .05), 0 0 0 4px hsl(var(--color-primary) / .18);
}
.hb-altcha altcha-widget .altcha-checkbox input {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: inherit;
  opacity: 1;
}
.hb-altcha altcha-widget .altcha-checkbox svg {
  display: block !important;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 8px;
  transform: translate(-50%, -50%);
  fill: none !important;
  stroke: hsl(var(--color-inverted));
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 16;
  stroke-dashoffset: 16;
  pointer-events: none;
  z-index: 2;
  transition: stroke-dashoffset .3s ease .08s;
}
/* 转圈 */
.hb-altcha altcha-widget .altcha-checkbox-spinner {
  position: absolute;
  inset: 0;
  border: none;
  border-radius: 50%;
  background: conic-gradient(hsl(var(--color-primary)) 0 270deg, transparent 270deg 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.2px), #000 calc(100% - 1.8px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2.2px), #000 calc(100% - 1.8px));
  animation: hbAltchaSpin .7s linear infinite;
  opacity: 0;
  pointer-events: none;
}

/* ============ 文案：主标题 + 副文案 ============ */
.hb-altcha altcha-widget .altcha label,
.hb-altcha altcha-widget .altcha[data-state="verifying"] label,
.hb-altcha altcha-widget .altcha[data-state="verified"] label,
.hb-altcha altcha-widget .altcha[data-state="error"] label,
.hb-altcha altcha-widget .altcha[data-state="expired"] label {
  /* 压过 altcha 自带的状态染色：主标题任何状态都保持正文色，状态色只落在副文案/图标上 */
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.35;
  display: block;
  color: hsl(var(--color-base)) !important;
}
.hb-altcha altcha-widget .altcha label::after {
  content: "点击完成安全验证";
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: hsl(var(--color-muted));
  margin-top: 3px;
  letter-spacing: .01em;
  transition: color .25s;
}

/* ============ 右侧挂锁（复用 altcha-logo 节点） ============ */
.hb-altcha altcha-widget .altcha-logo {
  position: relative;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 1px solid hsl(var(--color-neutral));
  background: hsl(var(--color-background));
  display: block;
  opacity: 1;
  transition: all .3s;
}
.hb-altcha altcha-widget .altcha-logo svg { display: none; }
.hb-altcha altcha-widget .altcha-logo::before,
.hb-altcha altcha-widget .altcha-logo::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  background-color: hsl(var(--color-muted));
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  transition: background-color .3s, transform .35s cubic-bezier(.34,1.56,.64,1);
}
/* 锁梁 */
.hb-altcha altcha-widget .altcha-logo::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  transform-origin: 33% 44%;
}
/* 锁体（evenodd 挖出锁孔） */
.hb-altcha altcha-widget .altcha-logo::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M7.5 10.5h9a2.5 2.5 0 0 1 2.5 2.5v4.5a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 5 17.5V13a2.5 2.5 0 0 1 2.5-2.5zm4.5 3.1a1.6 1.6 0 1 0 0 3.2 1.6 1.6 0 0 0 0-3.2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M7.5 10.5h9a2.5 2.5 0 0 1 2.5 2.5v4.5a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 5 17.5V13a2.5 2.5 0 0 1 2.5-2.5zm4.5 3.1a1.6 1.6 0 1 0 0 3.2 1.6 1.6 0 0 0 0-3.2z'/%3E%3C/svg%3E");
}

/* ============ 底部：发丝分隔线 + 双侧信息 ============ */
/* footer 强制收回卡片内、跟随卡片内边距（altcha 默认把它甩在卡片盒外右下角） */
.hb-altcha altcha-widget .altcha-footer {
  margin: 12px 0 0 !important;
  padding: 8px 0 0 !important;
  border-top: 1px solid hsl(var(--color-neutral) / .45) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: auto !important;
  position: static !important;
  font-size: 10.5px !important;
  line-height: 1.4 !important;
  color: hsl(var(--color-muted) / .75) !important;
  opacity: 1 !important;
  text-align: left;
  gap: 8px;
}
.hb-altcha altcha-widget .altcha-footer p { margin: 0; }
.hb-altcha altcha-widget .altcha-footer a { color: inherit; text-decoration: none; }
.hb-altcha altcha-widget .altcha-footer a:hover { color: hsl(var(--color-primary)); }
.hb-altcha altcha-widget .altcha-footer::after {
  content: "隐私友好 · 无 COOKIE";
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 9.5px;
  letter-spacing: .08em;
  opacity: .6;
}
.hb-altcha altcha-widget .altcha-error {
  color: hsl(var(--color-error));
  font-size: 12px;
  margin-top: 6px;
}

/* ============ 状态：验证中 ============ */
.hb-altcha altcha-widget .altcha[data-state="verifying"] {
  border-color: color-mix(in srgb, hsl(var(--color-primary)) 45%, hsl(var(--color-neutral)));
}
.hb-altcha altcha-widget .altcha[data-state="verifying"]::after {
  opacity: 1;
  animation: hbAltchaSlide 1.3s cubic-bezier(.45,.05,.55,.95) infinite;
}
.hb-altcha altcha-widget .altcha[data-state="verifying"] .altcha-checkbox {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
.hb-altcha altcha-widget .altcha[data-state="verifying"] .altcha-checkbox-spinner { opacity: 1; }
.hb-altcha altcha-widget .altcha[data-state="verifying"] label::after {
  content: "自动完成中，无需任何操作";
  color: hsl(var(--color-primary));
}
.hb-altcha altcha-widget .altcha[data-state="verifying"] .altcha-logo {
  border-color: color-mix(in srgb, hsl(var(--color-primary)) 40%, hsl(var(--color-neutral)));
}
.hb-altcha altcha-widget .altcha[data-state="verifying"] .altcha-logo::before,
.hb-altcha altcha-widget .altcha[data-state="verifying"] .altcha-logo::after {
  animation: hbAltchaBreathe 1.1s ease-in-out infinite;
}

/* ============ 状态：已验证 ============ */
.hb-altcha altcha-widget .altcha[data-state="verified"] .altcha-checkbox {
  background: hsl(var(--color-success));
  border-color: hsl(var(--color-success));
  box-shadow: none;
  animation: hbAltchaPop .4s cubic-bezier(.34,1.56,.64,1);
}
.hb-altcha altcha-widget .altcha[data-state="verified"] .altcha-checkbox svg { stroke-dashoffset: 0; }
.hb-altcha altcha-widget .altcha[data-state="verified"] label::after {
  content: "安全校验已完成，可继续操作";
  color: hsl(var(--color-success));
}
.hb-altcha altcha-widget .altcha[data-state="verified"] .altcha-logo {
  border-color: color-mix(in srgb, hsl(var(--color-success)) 28%, hsl(var(--color-neutral)));
  background: hsl(var(--color-success) / .08);
  animation: hbAltchaBloom .8s ease-out 1;
}
.hb-altcha altcha-widget .altcha[data-state="verified"] .altcha-logo::before {
  background-color: hsl(var(--color-success));
  transform: translate(-1.5px, -2.5px) rotate(-16deg);
}
.hb-altcha altcha-widget .altcha[data-state="verified"] .altcha-logo::after {
  background-color: hsl(var(--color-success));
}

/* ============ 状态：失败 / 过期 ============ */
.hb-altcha altcha-widget .altcha[data-state="error"] {
  border-color: hsl(var(--color-error));
  animation: hbAltchaShake .42s;
}
.hb-altcha altcha-widget .altcha[data-state="error"] .altcha-checkbox { border-color: hsl(var(--color-error)); }
.hb-altcha altcha-widget .altcha[data-state="error"] label::after {
  content: "验证失败，请重试";
  color: hsl(var(--color-error));
}
.hb-altcha altcha-widget .altcha[data-state="error"] .altcha-logo { border-color: color-mix(in srgb, hsl(var(--color-error)) 45%, hsl(var(--color-neutral))); }
.hb-altcha altcha-widget .altcha[data-state="error"] .altcha-logo::before,
.hb-altcha altcha-widget .altcha[data-state="error"] .altcha-logo::after { background-color: hsl(var(--color-error)); }

.hb-altcha altcha-widget .altcha[data-state="expired"] .altcha-checkbox { border-color: hsl(var(--color-warning)); }
.hb-altcha altcha-widget .altcha[data-state="expired"] label::after {
  content: "验证已过期，请重新验证";
  color: hsl(var(--color-warning));
}

/* 减弱动效偏好 */
@media (prefers-reduced-motion: reduce) {
  .hb-altcha altcha-widget .altcha,
  .hb-altcha altcha-widget .altcha *,
  .hb-altcha altcha-widget .altcha::after,
  .hb-altcha altcha-widget .altcha-logo::before,
  .hb-altcha altcha-widget .altcha-logo::after { animation: none !important; transition: none !important; }
}
