/* 顺企网滑块验证码样式（2026-11-06 精简版：对齐 auth-card.css 红色色板）
 * 结构：.tc-container > .tc-header(.tc-title + .tc-refresh) + .tc-body(.tc-image-area + .tc-slider-area) + .tc-message
 * 在 .captcha-modal / .captcha-popup-container 里外层已有标题栏，内层 .tc-title 隐藏，刷新按钮浮在图片右上角。
 */
.think-captcha,
.think-captcha-widget,
.tc-container {
    --tc-red: #C62828;
    --tc-red-dark: #7B0000;
    --tc-text: #1a1a2e;
    --tc-sub: #64748b;
    --tc-border: #e2e8f0;
    --tc-bg: #f1f5f9;
    --tc-ok: #16a34a;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.tc-container {
    position: relative;
    width: 100%;
    max-width: 348px;
    margin: 0 auto;
    background: #fff;
    color: var(--tc-text);
    box-sizing: border-box;
}
.tc-container *,
.tc-container *:before,
.tc-container *:after { box-sizing: border-box; }

/* 标题行（独立使用时显示；弹窗里只保留刷新按钮） */
.tc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 10px;
}
.tc-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--tc-text);
}
.tc-icon-shield,
.tc-image-info,
.tc-footer { display: none !important; }

.tc-refresh {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: var(--tc-sub);
    cursor: pointer;
    transition: color .15s, background-color .15s;
    -webkit-user-select: none;
    user-select: none;
}
.tc-refresh:hover { color: var(--tc-red); background: var(--tc-bg); }
.tc-icon-refresh,
.tc-icon-arrow { display: inline-block; font-style: normal; line-height: 1; }
.tc-icon-refresh:before { content: "\21BB"; font-size: 17px; }

/* 外层已有标题栏：隐藏内层标题，刷新按钮浮到图片右上角 */
.captcha-modal .tc-header,
.captcha-popup-container .tc-header {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 15;
    padding: 0;
}
.captcha-modal .tc-title,
.captcha-popup-container .tc-title { display: none; }
.captcha-modal .tc-refresh,
.captcha-popup-container .tc-refresh {
    background: rgba(255, 255, 255, .88);
    color: var(--tc-text);
}
.captcha-modal .tc-refresh:hover,
.captcha-popup-container .tc-refresh:hover { background: #fff; color: var(--tc-red); }

.tc-body { padding: 0; }

/* 图片区：按 300x180 原图等比缩放 */
.tc-image-area {
    position: relative;
    width: 100%;
    aspect-ratio: 5 / 3;
    border-radius: 8px;
    overflow: hidden;
    background: var(--tc-bg);
}
.tc-base-image { position: relative; width: 100%; height: 100%; }
.tc-base-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
}

/* 拼图块 */
.tc-puzzle-piece {
    position: absolute;
    width: 50px;
    height: 50px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    cursor: grab;
    z-index: 10;
    will-change: left;
    pointer-events: none;
    touch-action: none;
    filter: drop-shadow(0 0 1px rgba(255, 255, 255, .95)) drop-shadow(0 1px 3px rgba(0, 0, 0, .35));
}
.tc-puzzle-piece.tc-dragging { transition: none !important; cursor: grabbing; }
.tc-puzzle-target { position: absolute; pointer-events: none; z-index: 5; }

/* 滑轨 */
.tc-slider-area {
    position: relative;
    height: 40px;
    margin-top: 12px;
}
.tc-slider-track {
    position: relative;
    width: 100%;
    height: 100%;
    background: var(--tc-bg);
    box-shadow: inset 0 0 0 1px var(--tc-border);
    border-radius: 8px;
    overflow: hidden;
}
.tc-slider-bg {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background: rgba(198, 40, 40, .1);
    border-right: 0;
}
.tc-slider-thumb {
    position: absolute;
    left: 0;
    top: 0;
    width: 44px;
    height: 100%;
    background: var(--tc-red);
    border-radius: 7px;
    cursor: grab;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    transition: background-color .15s;
}
.tc-slider-thumb:hover,
.tc-slider-thumb.tc-active { background: var(--tc-red-dark); cursor: grabbing; }
.tc-slider-icon { color: #fff; font-size: 16px; line-height: 1; }
.tc-icon-arrow:before { content: "\2192"; font-weight: 700; }
/* 文字是 thumb 的子元素，随滑块一起移动、被滑轨裁掉 */
.tc-slider-text {
    position: absolute;
    left: 44px;
    width: 260px;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    white-space: nowrap;
    color: var(--tc-sub);
    font-size: 13px;
    pointer-events: none;
}
.tc-slider-mask { display: none; }

/* 成功 / 失败 */
.tc-container.tc-success .tc-slider-thumb { background: var(--tc-ok); }
.tc-container.tc-success .tc-slider-bg { background: rgba(22, 163, 74, .12); }
.tc-container.tc-success .tc-icon-arrow:before { content: "\2713"; }
.tc-container.tc-fail .tc-slider-thumb { background: var(--tc-red); animation: tc-shake .4s; }
.tc-container.tc-fail .tc-slider-track { box-shadow: inset 0 0 0 1px rgba(198, 40, 40, .45); }

/* 状态消息：弹窗里显示在标题栏，组件内仅作标记 */
.tc-message { display: none !important; }

/* 加载中（核心脚本 showLoading） */
.tc-loading,
.tc-loading-state {
    min-height: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--tc-sub);
    font-size: 13px;
}
.tc-spinner {
    width: 26px;
    height: 26px;
    border: 2px solid var(--tc-border);
    border-top-color: var(--tc-red);
    border-radius: 50%;
    animation: tc-spin .8s linear infinite;
}
.tc-loading-text { color: var(--tc-sub); font-size: 13px; }

/* 出错 */
.tc-error { text-align: center; padding: 32px 16px; }
.tc-error-icon {
    width: 40px;
    height: 40px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: #fef2f2;
    color: var(--tc-red);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
}
.tc-error-message { margin-bottom: 14px; color: var(--tc-sub); font-size: 14px; }
.tc-retry-btn {
    padding: 8px 22px;
    border: 0;
    border-radius: 8px;
    background: var(--tc-red);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
}
.tc-retry-btn:hover { background: var(--tc-red-dark); }

@keyframes tc-spin { to { transform: rotate(360deg); } }
@keyframes tc-fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes tc-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

/* 不支持 aspect-ratio 的老浏览器 */
@supports not (aspect-ratio: 1 / 1) {
    .tc-image-area { height: 0; padding-top: 60%; }
    .tc-base-image { position: absolute; top: 0; left: 0; }
}

/* 暗色主题（目前没有页面使用，保留兼容） */
.tc-container.tc-theme-dark { background: #1e1e1e; color: #fff; }
.tc-container.tc-theme-dark .tc-slider-track { background: #2d2d2d; box-shadow: inset 0 0 0 1px #404040; }