@keyframes slide-up-check { 0% { transform: translateY(30px) scale(0.8); opacity: 0; } 100% { transform: translateY(0) scale(1); opacity: 1; } }

main.captcha {
  user-select: none; width: 350px; display: flex; flex-direction: column; align-items: stretch;
  background: white; box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  border: 1px solid #f0f0f0; overflow: hidden; font-family: system-ui, -apple-system, sans-serif;

  &.ing {
    header .header-top .refresh {
      pointer-events: none;
      background-image: url("/wait.svg");
      background-repeat: no-repeat;
      background-position: center;
      background-size: 20px 20px;
      &::after { display: none; }
    }
    header .icons-row .icon-item .icon-box .icon-shape {
      background: url("/wait.svg") no-repeat center;
      background-size: contain;
      -webkit-mask-image: none;
      mask-image: none;
    }
  }

  header {
    width: 100%; display: flex; flex-direction: column; box-sizing: border-box;
    padding: 1rem 1.25rem 0.75rem 1.25rem; background: linear-gradient(180deg, #ffffff 0%, #f4f5f7 100%);
    border-bottom: 1px solid #e5e7eb; position: relative;

    .header-top {
      display: flex; justify-content: space-between; align-items: center;
      .title {
        display: block; font-size: 16px; font-weight: 600; letter-spacing: 0.3px;
        background: linear-gradient(135deg, #111827 0%, #4b5563 100%);
        background-clip: text; color: transparent;
        &.success-text { color: #10b981; }
        &.error-text { color: #ef4444; }
      }
      .refresh {
        background: #fff; flex-shrink: 0; padding: 0; height: 30px; width: 30px;
        border-radius: 50%; border: 1px solid #e5e7eb; color: #6b7280;
        box-shadow: 0 1px 2px rgba(0,0,0,0.05); cursor: pointer;
        display: flex; align-items: center; justify-content: center;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); outline: none;
        &::after { content: "↻"; font-size: 18px; line-height: 1; margin-top: -2px; }
        &:hover {
          background: #f3f4f6; color: #111827; border-color: #d1d5db;
          transform: rotate(90deg); box-shadow: inset 0 2px 5px rgba(0,0,0,0.1), inset 0 1px 2px rgba(0,0,0,0.06);
        }
        &:active { transform: rotate(90deg) scale(0.95); box-shadow: inset 0 3px 6px rgba(0,0,0,0.15); }
      }
    }

    .icons-row {
      display: flex; justify-content: space-around; margin-top: 14px; padding-top: 14px; border-top: 1px dashed #e5e7eb;
      
      .icon-item {
        display: flex; align-items: center; gap: 8px;
        .icon-box {
          width: 26px; height: 26px; padding: 6px; background: linear-gradient(135deg, #fffdfa, #fff8f0);
          border-radius: 10px; box-shadow: inset 0 2px 5px rgba(0,0,0,0.04), inset 0 1px 2px rgba(0,0,0,0.02);
          border: 1px solid #ffedd5; box-sizing: content-box;
          
          .icon-shape {
            display: block; width: 100%; height: 100%; background: linear-gradient(135deg, #fbbf24 0%, #ea580c 100%);
            -webkit-mask-size: contain; -webkit-mask-position: center; -webkit-mask-repeat: no-repeat;
            mask-size: contain; mask-position: center; mask-repeat: no-repeat;
          }
        }
      }
    }
  }

  .click-box {
    width: 350px; height: 350px; background-size: 350px 350px; cursor: crosshair; display: none; position: relative;
    .state-overlay {
      position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,0.7);
      display: flex; align-items: center; justify-content: center; z-index: 50; backdrop-filter: blur(2px);
      .spinner {
        display: block; width: 36px; height: 36px;
        background: url("/wait.svg") no-repeat center;
        background-size: contain;
      }
      .success-mark {
        display: block; position: relative; width: 56px; height: 56px; border-radius: 50%;
        background: linear-gradient(135deg, #34d399, #10b981);
        box-shadow: 0 8px 16px rgba(16, 185, 129, 0.25), inset 0 2px 4px rgba(255,255,255,0.3);
        animation: slide-up-check 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
        &::after {
          content: ""; position: absolute; left: 20px; top: 14px; width: 12px; height: 22px;
          border: solid white; border-width: 0 4px 4px 0; transform: rotate(45deg); border-radius: 2px;
        }
      }
      .fail-mark {
        display: block; position: relative; width: 56px; height: 56px; border-radius: 50%;
        background: linear-gradient(135deg, #f87171, #ef4444);
        box-shadow: 0 8px 16px rgba(239, 68, 68, 0.25), inset 0 2px 4px rgba(255,255,255,0.3);
        animation: slide-up-check 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
        &::after, &::before {
          content: ""; position: absolute; left: 26px; top: 16px; width: 4px; height: 24px;
          background: white; border-radius: 2px;
        }
        &::after { transform: rotate(45deg); }
        &::before { transform: rotate(-45deg); }
      }
    }
  }
}

.badge {
  background: linear-gradient(135deg, #10b981, #059669); align-items: center; border: 2px solid #fff;
  border-radius: 50%; box-shadow: inset 0 0 4px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.15); color: #fff;
  display: flex; font-family: Inter, system-ui, monospace; font-weight: 700; font-size: 14px;
  height: 24px; justify-content: center; width: 24px; box-sizing: border-box; text-shadow: 0 1px 1px rgba(0,0,0,0.2);
  
  &.click-badge {
    position: absolute; font-size: 15px; cursor: pointer; border-width: 3px; z-index: 10;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    &:hover {
      transform: scale(1.15); background: linear-gradient(135deg, #34d399, #10b981);
      border-color: #fff; box-shadow: inset 0 0 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.2);
    }
  }
}
