/* 全局重置 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f4f7f6;
    color: #333;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    padding: 40px 20px;
}

/* 主容器：让左右两块并排显示 */
.container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
    max-width: 1200px;
}

/* 卡片样式（白色背景带阴影） */
.card {
    background: #fff;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    flex: 1;
    min-width: 300px;
}

h2 {
    font-size: 1.3rem;
    margin-bottom: 20px;
    color: #2c3e50;
    font-weight: bold;
}

/* ================== 左侧：输入区域 ================== */
textarea {
    width: 100%;
    height: 350px;
    padding: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    resize: vertical;
    font-family: monospace; /* 适合显示字母和数字 */
    font-size: 14px;
    line-height: 1.5;
    outline: none;
    transition: border-color 0.3s;
}

textarea:focus {
    border-color: #4dabf7;
}

/* 新增按钮组布局（开始检查 + 一键清空并排） */
.button-group {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

/* 蓝色主按钮（开始检查） */
.primary-btn {
    flex: 2;
    padding: 12px;
    background: #4dabf7;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: background 0.3s, transform 0.2s;
}

.primary-btn:hover {
    background: #339af0;
    transform: translateY(-2px);
}

/* 红色危险按钮（一键清空） */
.danger-btn {
    flex: 1;
    padding: 12px;
    background: #fa5252;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: background 0.3s, transform 0.2s;
}

.danger-btn:hover {
    background: #e03131;
    transform: translateY(-2px);
}

/* ================== 右侧：结果展示区域 ================== */
/* 上方的彩色数据方块阵列 */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    margin-bottom: 20px;
    text-align: center;
}

.stat-item {
    padding: 15px 5px;
    border-radius: 8px;
    color: white;
    cursor: pointer;
    transition: transform 0.2s, opacity 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.stat-item:hover {
    transform: translateY(-3px);
    opacity: 0.9;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.stat-item span {
    font-size: 12px;
    margin-bottom: 5px;
    opacity: 0.95;
}

.stat-item b {
    font-size: 20px;
}

/* 各个状态的专属颜色（完美匹配你要求的英文标题颜色） */
.all      { background-color: #0d6efd; } /* 蓝色 - Total */
.active   { background-color: #198754; } /* 绿色 - Live */
.canceled { background-color: #dc3545; } /* 红色 - Disable */
/* 黄色和亮蓝色的底色配黑色文字更清晰 */
.verify   { background-color: #ffc107; color: #000 !important; } /* 黄色 - Verify */
.notExist { background-color: #6c757d; } /* 灰色 - Unregistered */
.unknown  { background-color: #0dcaf0; color: #000 !important; } /* 亮蓝色 - Error */

/* 结果文字滚动框 */
.result-box {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 15px;
    height: 295px;
    overflow-y: auto;
    font-family: monospace;
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 20px;
}

/* 导出 Excel 按钮 */
.export-btn {
    width: 100%;
    padding: 12px;
    background: #20c997;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: background 0.3s, transform 0.2s;
}

.export-btn:hover {
    background: #12b886;
    transform: translateY(-2px);
}

/* ================== 手机端适配 ================== */
/* 如果有人用手机打开你的网站，上方的6个彩色方块会自动变成 3个一行，防止挤压 */
@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}