:root {
    --captcha-bg: #ffffff;
    --captcha-border: #e2e8f0;
    --captcha-text: #1e293b;
    --captcha-text-muted: #64748b;
    --captcha-track: #f1f5f9;
    --captcha-handle: #ffffff;
    --captcha-handle-border: #cbd5e1;
    --brand-blue: #1890ff;
    --brand-success: #52c41a;
    --brand-danger: #ff4d4f;
}

/* 自动化暗黑主题配置适配 */
[data-theme="dark"] {
    --captcha-bg: #1e293b;
    --captcha-border: #334155;
    --captcha-text: #f8fafc;
    --captcha-text-muted: #94a3b8;
    --captcha-track: #0f172a;
    --captcha-handle: #334155;
    --captcha-handle-border: #475569;
}

/* 全局整体上下居中弹性布局 */
.page-layout { 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    padding: 20px;
    box-sizing: border-box;
}

/* 业务头部样式（修正跑偏问题） */
.warning-header {
    text-align: center; 
    width: 344px; 
    margin: 0 auto 20px auto; 
    padding: 14px;
    background: #fff2e6; 
    border: 1px solid #ffd8b3; 
    border-radius: 10px;
    box-sizing: border-box;
}
[data-theme="dark"] .warning-header { background: #452300; border-color: #733c00; }
.warning-header__title { color: #e67300; font-size: 15px; font-weight: bold; margin: 0 0 4px 0; display: flex; align-items: center; justify-content: center; gap: 6px; }
[data-theme="dark"] .warning-header__title { color: #ff9433; }
.warning-header__desc { color: #b35900; font-size: 13px; margin: 0; line-height: 1.4; }
[data-theme="dark"] .warning-header__desc { color: #ffd1a3; }

/* 盲人读屏器专用隐藏类 */
.captcha-sr-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }

/* 组件主容器：强制包裹，绝不让内部元素溢出 */
.captcha-container {
    width: 344px; 
    height: 228px; 
    box-sizing: border-box; 
    padding: 12px;
    border: 1px solid var(--captcha-border); 
    background: var(--captcha-bg);
    border-radius: 14px; 
    box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.08);
    position: relative; 
    user-select: none; 
    margin: 0 auto;
}

/* 动感微光骨架屏（Skeleton Shimmer Effect） */
.captcha-skeleton { position: absolute; top: 12px; left: 12px; width: 320px; height: 204px; display: flex; flex-direction: column; gap: 12px; }
.captcha-skeleton__canvas { width: 320px; height: 150px; background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 8px; }
.captcha-skeleton__track { width: 320px; height: 42px; background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 21px; }
[data-theme="dark"] .captcha-skeleton__canvas, [data-theme="dark"] .captcha-skeleton__track { background: linear-gradient(90deg, #334155 25%, #475569 50%, #334155 75%); background-size: 200% 100%; }

@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* 内部画布视窗渲染状态区：强力锁定 320x150 物理尺寸 */
.captcha-viewport { 
    position: relative; 
    width: 320px; 
    height: 150px; 
    background: var(--captcha-track); 
    overflow: hidden; 
    border-radius: 8px; 
    box-sizing: border-box;
}
.captcha-bg-img { width: 100%; height: 100%; display: block; pointer-events: none; }

/* 修复滑块漂移崩溃的核心：必须加上 pointer-events: none，防止滑块图片阻断鼠标拖拽事件 */
.captcha-slide-img { 
    position: absolute; 
    left: 0; 
    top: 0; 
    height: 52px; 
    width: 52px; 
    z-index: 10; 
    touch-action: none; 
    pointer-events: none;
    filter: drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.75)) contrast(1.1); 
}

/* 交互滑轨轨道 */
.captcha-track { 
    position: relative; 
    height: 42px; 
    background: var(--captcha-track); 
    border: 1px solid var(--captcha-border); 
    border-radius: 21px; 
    margin-top: 12px; 
    overflow: hidden; 
    box-sizing: border-box;
}
.captcha-text { position: absolute; width: 100%; text-align: center; line-height: 40px; color: var(--captcha-text-muted); font-size: 12px; z-index: 1; font-weight: 500; padding: 0 44px; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.captcha-handle { position: absolute; left: 0; top: 0; width: 42px; height: 40px; background: var(--captcha-handle); border: 1px solid var(--captcha-handle-border); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--captcha-text); font-weight: bold; cursor: pointer; box-shadow: 0 3px 8px rgba(0,0,0,0.12); z-index: 2; touch-action: none; }
.captcha-active-bar { position: absolute; left: 0; top: 0; height: 100%; background: #e0f2fe; width: 0; z-index: 0; }
[data-theme="dark"] .captcha-active-bar { background: #0369a1; }

/* 异常阻断与原地重试遮罩弹窗 */
.captcha-error-shield { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--captcha-bg); border-radius: 14px; color: var(--brand-danger); font-size: 13px; font-weight: 500; gap: 8px; z-index: 20; padding: 20px; text-align: center; box-sizing: border-box; }
.captcha-retry-button { padding: 6px 16px; background: var(--brand-blue); color: #ffffff; border: none; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: bold; box-shadow: 0 2px 4px rgba(24, 144, 255, 0.2); transition: opacity 0.2s; }
.captcha-retry-button:hover { opacity: 0.9; }