#clicaptcha-container{
	display: none;
	padding: 15px;
	border: 1px solid #b1b3b8;
	background-color: #f5f6f7;
	position: fixed;
	z-index: 100000;
	left: 50%;
	top: 50%;
	margin-left: -191px;
	margin-top: -161px;
	border-radius: 10px;
	box-shadow: 0 0 0 1px hsla(0,0%,100%,.3) inset, 0 .5em 1em rgba(0, 0, 0, 0.6);
}
#clicaptcha-container .clicaptcha-imgbox{
	position: relative;
}
#clicaptcha-container .clicaptcha-imgbox .step{
	position: absolute;
	width: 20px;
	height: 20px;
	line-height: 20px;
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	color: #f04848;
	border: 3px solid #f04848;
	background-color: #fff;
	border-radius: 30px;
	box-shadow: 0 0 10px #fff;
	-webkit-user-select: none;
	user-select: none;
	box-sizing: unset;
}
#clicaptcha-container .clicaptcha-img{
	width: 350px;
	height: 200px;
	border: none;
}
#clicaptcha-container .clicaptcha-title{
	font-family: 'Microsoft YaHei';
	height: 40px;
	line-height: 40px;
	font-size: 14px;
	text-align: center;
	color: #333;
	margin-top: 10px;
}
#clicaptcha-container .clicaptcha-title span{
	font-size: 16px;
	font-weight: bold;
	color: #c00;
}
#clicaptcha-container .clicaptcha-title span.clicaptcha-clicked{
	color: #069;
}
#clicaptcha-container .clicaptcha-refresh-box{
	position: relative;
	margin-top: 10px;
}
#clicaptcha-container .clicaptcha-refresh-line{
	position: absolute;
	top: 16px;
	width: 140px;
	height: 1px;
	background-color: #ccc;
}
#clicaptcha-container .clicaptcha-refresh-line-left{
	left: 5px;
}
#clicaptcha-container .clicaptcha-refresh-line-right{
	right: 5px;
}
#clicaptcha-container .clicaptcha-refresh-btn{
	display: block;
	margin: 0 auto;
	width: 32px;
	height: 32px;
	background: url(../image/refresh.png) no-repeat;
}
#clicaptcha-container .clicaptcha-refresh-btn:hover{
	background-position:-32px 0;
}
#clicaptcha-mask{
	display: none;
	position: fixed;
	z-index: 99999;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: 0.5;
	background-color: rgb(0, 0, 0);
}

/* 追加到 captcha.css 末尾 */
#clicaptcha-container .clicaptcha-close-btn {
    font-size: 18px;
    color: #999;
    text-decoration: none;
    line-height: 1;
}
#clicaptcha-container .clicaptcha-close-btn:hover {
    color: #333;
}

/* 手机端缩放显示 */
@media screen and (max-width: 480px) {
    #clicaptcha-container {
        transform-origin: top center;  /* 缩放从顶部居中开始 */
        transform: scale(0.9);         /* 缩放到屏幕宽度的90% */
    }
}

.placeholder {
width: 350px;
height: 200px;
background: #f0f0f0;
display: flex;
align-items: center;
justify-content: center;
color: #999;
font-size: 14px;
gap: 8px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.placeholder::before {
content: '';
width: 16px;
height: 16px;
border: 2px solid #ccc;
border-top-color: #666;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}

/* 基础样式 - 扁平化按钮的共性 */
.flat-button {
    /* 排版 */
    font-family: Arial, sans-serif;
    font-size: 15px;
    color: #ffffff; /* 默认文字颜色为白色 */
    text-decoration: none; /* 移除下划线（如果是 <a> 标签） */
    
    /* 盒子模型与布局 */
    padding: 10px 20px;
    border: none; /* 扁平化设计的核心：移除边框 */
    border-radius: 4px; /* 轻微圆角，也可以设置为 0px 实现极简风格 */
    cursor: pointer;
    display: inline-block;
    text-align: center;

    /* 过渡效果 - 让交互更平滑 */
    transition: background-color 0.2s ease, transform 0.1s ease;
}

/* 1. Primary Button (主色 - 例如蓝色) */
.flat-button.primary {
    background-color: #007bff; /* 纯色背景 */
}

/* 鼠标悬停 (Hover) 效果 */
.flat-button.primary:hover {
    background-color: #0056b3; /* 颜色略微加深 */
}

/* 鼠标按下 (Active) 效果 */
.flat-button.primary:active {
    background-color: #004085;
    transform: translateY(1px); /* 轻微下沉效果 */
}

/* 2. Secondary Button (副色 - 例如灰色/绿色，用作次要操作) */
.flat-button.secondary {
    background-color: #6c757d;
}

/* 鼠标悬停 (Hover) 效果 */
.flat-button.secondary:hover {
    background-color: #5a6268;
}

/* 鼠标按下 (Active) 效果 */
.flat-button.secondary:active {
    background-color: #495057;
    transform: translateY(1px);
}