/* ✅ 全局基础设置 - 强制加粗 */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    font-weight: bold !important; /* 全局强制加粗 */
}

body { 
    font-family: "Microsoft YaHei", sans-serif; 
    background: #f9f9f9; 
    color: #333; 
    font-size: 14px; 
    padding-bottom: 80px; /* 为底部按钮留出空间 */
}

/* 顶部栏 */
.header { 
    position: relative; 
    height: 50px; 
    line-height: 50px; 
    text-align: center; 
    background: #fff; 
    border-bottom: 1px solid #eee; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); 
}
.back-btn { position: absolute; left: 16px; top: 0; font-size: 24px; color: #666; text-decoration: none; }
.version { position: absolute; right: 16px; top: 0; font-size: 14px; color: #999; }
.year { font-size: 12px; color: #999; margin-top: 4px; }
h1 { font-size: 20px; color: #333; }

/* 预览结果区 */
.preview-result { 
    background: #fff; 
    padding: 12px 16px; 
    border-bottom: 1px solid #eee; 
    transition: all 0.3s ease; 
}
.preview-result.hidden { display: none; }
.preview-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 10px; 
    font-size: 14px; 
    color: #333; 
}
.preview-header b { color: #d32f2f; font-size: 18px; }

/* ✅ 底部工具栏容器 - 美化重置和反选 */
.footer-actions {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 16px;
    background: #fff;
    position: fixed; /* 固定在底部 */
    bottom: 0;
    left: 0;
    right: 0;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
    z-index: 99;
}

/* ✅ 通用按钮样式 (重置、反选、复制共用) */
.action-btn {
    flex: 1;
    border: none;
    border-radius: 8px;
    padding: 12px 0;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    color: #fff;
    text-align: center;
}

/* 重置按钮 - 灰色系 */
#btnReset {
    background: linear-gradient(135deg, #78909c, #546e7a);
}
#btnReset:hover {
    background: linear-gradient(135deg, #90a4ae, #607d8b);
    transform: translateY(-2px);
}

/* 反选按钮 - 蓝色系 */
#btnInvert {
    background: linear-gradient(135deg, #42a5f5, #1e88e5);
}
#btnInvert:hover {
    background: linear-gradient(135deg, #64b5f6, #2196f3);
    transform: translateY(-2px);
}

/* 复制按钮 - 绿色系 (强调色) */
.btn-copy {
    background: linear-gradient(135deg, #66bb6a, #43a047);
}
.btn-copy:hover {
    background: linear-gradient(135deg, #81c784, #4caf50);
    transform: translateY(-2px);
}

/* 点击时的按压效果 */
.action-btn:active {
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* 结果球样式 */
.result-balls { display: flex; flex-wrap: wrap; gap: 6px; min-height: 20px; }
.ball { 
    width: 32px; height: 32px; 
    border-radius: 50%; 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    color: #fff; 
    font-size: 13px; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.2); 
    animation: popIn 0.2s ease-out; 
}
@keyframes popIn { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.ball-red { background: radial-gradient(circle at 35% 35%, #ff6b6b, #c0392b) !important; }
.ball-blue { background: radial-gradient(circle at 35% 35%, #6bb5ff, #2980b9) !important; }
.ball-green { background: radial-gradient(circle at 35% 35%, #6bff8a, #27ae60) !important; }

/* 数字网格 */
.number-grid { padding: 12px; background: #fff; border-bottom: 1px solid #eee; }
.row { display: flex; justify-content: space-between; margin-bottom: 8px; }
.num-btn { 
    width: 40px; height: 40px; 
    border-radius: 50%; 
    border: 1px solid #ddd; 
    font-size: 14px; 
    cursor: pointer; 
    transition: all 0.2s; 
    user-select: none; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: #fff; 
}
.num-btn:hover { transform: scale(1.08); }
.num-btn.dimmed { opacity: 0.2; transform: scale(0.85); filter: grayscale(100%); }

/* ✅ 手动选号高亮态 */
.num-btn.selected {
    border: 2px solid #ff9800 !important;
    background-color: #fff3e0 !important;
    transform: scale(1.1);
    box-shadow: 0 0 5px rgba(255, 152, 0, 0.5);
    color: #000000 !important; /* ✅ 使用最黑的字体 */
}

/* ✅ 属性按钮区 - 自适应网格布局 */
.attr-grid { 
    padding: 12px; 
    background: #fff; 
}

.attr-row { 
    display: grid;
    /* 核心：自动填充，最小宽度60px，剩余空间平分 */
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); 
    gap: 8px; 
    margin-bottom: 12px; 
}

.btn { 
    height: 32px; 
    border-radius: 20px; 
    border: 1px solid #ddd; 
    font-size: 13px; 
    cursor: pointer; 
    transition: all 0.2s; 
    user-select: none; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    padding: 0 4px; 
    background: #fff;
    white-space: nowrap; /* 防止文字内部换行 */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ✅ 全量属性配色 (保持原样) */
.btn[data-val="鼠"]{background:#e6e6fa;color:#4b0082}.btn[data-val="牛"]{background:#f0f8ff;color:#000080}.btn[data-val="虎"]{background:#fffacd;color:#8b4513}.btn[data-val="兔"]{background:#fafad2;color:#556b2f}.btn[data-val="龙"]{background:#ffe4e1;color:#8b0000}.btn[data-val="蛇"]{background:#f5f5dc;color:#2f4f4f}.btn[data-val="马"]{background:#f0fff0;color:#228b22}.btn[data-val="羊"]{background:#fff0f5;color:#c71585}.btn[data-val="猴"]{background:#e0ffff;color:#008b8b}.btn[data-val="鸡"]{background:#fff8dc;color:#8b4513}.btn[data-val="狗"]{background:#f5fffa;color:#2f4f4f}.btn[data-val="猪"]{background:#fdf5e6;color:#8b4513}
.btn[data-val="家禽"]{background:#e6f7ff;color:#005073}.btn[data-val="野兽"]{background:#f6f6f6;color:#333}.btn[data-val="单数"]{background:#e6ffe6;color:#006400}.btn[data-val="双数"]{background:#fff6e6;color:#8b4513}.btn[data-val="大数"]{background:#ffe6e6;color:#8b0000}.btn[data-val="小数"]{background:#e6f7ff;color:#005073}
.btn[data-val="大单"]{background:#ffe6e6;color:#8b0000}.btn[data-val="小单"]{background:#e6ffe6;color:#006400}.btn[data-val="大双"]{background:#ffe6e6;color:#8b0000}.btn[data-val="小双"]{background:#e6ffe6;color:#006400}.btn[data-val="合单"]{background:#e6f7ff;color:#005073}.btn[data-val="合双"]{background:#f6f6f6;color:#333}
.btn[data-val="合大"]{background:#ffe6e6;color:#8b0000}.btn[data-val="合小"]{background:#e6f7ff;color:#005073}
.btn[data-val="红波"]{background:#ffcccc;color:#cc0000}.btn[data-val="蓝波"]{background:#cce6ff;color:#003366}.btn[data-val="绿波"]{background:#ccffcc;color:#006600}
.btn[data-val="红单"]{background:#ffcccc;color:#cc0000}.btn[data-val="红双"]{background:#ffcccc;color:#cc0000}
.btn[data-val="蓝单"]{background:#cce6ff;color:#003366}.btn[data-val="蓝双"]{background:#cce6ff;color:#003366}
.btn[data-val="绿单"]{background:#ccffcc;color:#006600}.btn[data-val="绿双"]{background:#ccffcc;color:#006600}
.btn[data-val="金"]{background:#fffacd;color:#8b4513}.btn[data-val="木"]{background:#f0fff0;color:#228b22}.btn[data-val="水"]{background:#e6f7ff;color:#005073}.btn[data-val="火"]{background:#ffe4e1;color:#8b0000}.btn[data-val="土"]{background:#f5f5dc;color:#2f4f4f}
.btn[data-val="0尾"]{background:#ffebee;color:#c62828}.btn[data-val="1尾"]{background:#e8f5e9;color:#2e7d32}.btn[data-val="2尾"]{background:#e3f2fd;color:#1565c0}.btn[data-val="3尾"]{background:#fff8e1;color:#ef6c00}.btn[data-val="4尾"]{background:#f3e5f5;color:#7b1fa2}.btn[data-val="5尾"]{background:#e0f2f1;color:#00897b}.btn[data-val="6尾"]{background:#ede7f6;color:#5e35b1}.btn[data-val="7尾"]{background:#fffde7;color:#f57c00}.btn[data-val="8尾"]{background:#f1f8e9;color:#388e3c}.btn[data-val="9尾"]{background:#fce4ec;color:#ad1457}
.btn[data-val="0头单"]{background:#fff3e0;color:#e65100}.btn[data-val="0头双"]{background:#fff3e0;color:#bf360c}
.btn[data-val="1头单"]{background:#e8eaf6;color:#283593}.btn[data-val="1头双"]{background:#e8eaf6;color:#1a237e}
.btn[data-val="2头单"]{background:#e0f7fa;color:#00695c}.btn[data-val="2头双"]{background:#e0f7fa;color:#004d40}
.btn[data-val="3头单"]{background:#fce4ec;color:#880e4f}.btn[data-val="3头双"]{background:#fce4ec;color:#ad1457}
.btn[data-val="4头单"]{background:#f3e5f5;color:#6a1b9a}.btn[data-val="4头双"]{background:#f3e5f5;color:#4a148c}
.btn[data-val="0头"]{background:#fff3e0;color:#e65100}.btn[data-val="1头"]{background:#e8eaf6;color:#283593}.btn[data-val="2头"]{background:#e0f7fa;color:#00695c}.btn[data-val="3头"]{background:#fce4ec;color:#880e4f}.btn[data-val="4头"]{background:#f3e5f5;color:#6a1b9a}
.btn[data-val="0段"]{background:#efebe9;color:#4e342e}.btn[data-val="1段"]{background:#d7ccc8;color:#3e2723}.btn[data-val="2段"]{background:#cfd8dc;color:#37474f}.btn[data-val="3段"]{background:#b0bec5;color:#263238}.btn[data-val="4段"]{background:#eceff1;color:#455a64}.btn[data-val="5段"]{background:#c5cae9;color:#1a237e}.btn[data-val="6段"]{background:#b2dfdb;color:#004d40}.btn[data-val="7段"]{background:#f0f4c3;color:#827717}
.btn[data-val="1合"]{background:#e8eaf6;color:#283593}.btn[data-val="2合"]{background:#e8eaf6;color:#1a237e}.btn[data-val="3合"]{background:#e8eaf6;color:#283593}.btn[data-val="4合"]{background:#e8eaf6;color:#1a237e}.btn[data-val="5合"]{background:#e8eaf6;color:#283593}.btn[data-val="6合"]{background:#e8eaf6;color:#1a237e}.btn[data-val="7合"]{background:#e8eaf6;color:#283593}.btn[data-val="8合"]{background:#e8eaf6;color:#1a237e}.btn[data-val="9合"]{background:#e8eaf6;color:#283593}.btn[data-val="10合"]{background:#e8eaf6;color:#1a237e}.btn[data-val="11合"]{background:#e8eaf6;color:#283593}.btn[data-val="12合"]{background:#e8eaf6;color:#1a237e}.btn[data-val="13合"]{background:#e8eaf6;color:#283593}
.btn[data-val="0合尾"]{background:#fce4ec;color:#880e4f}.btn[data-val="1合尾"]{background:#fce4ec;color:#ad1457}.btn[data-val="2合尾"]{background:#fce4ec;color:#880e4f}.btn[data-val="3合尾"]{background:#fce4ec;color:#ad1457}.btn[data-val="4合尾"]{background:#fce4ec;color:#880e4f}.btn[data-val="5合尾"]{background:#fce4ec;color:#ad1457}.btn[data-val="6合尾"]{background:#fce4ec;color:#880e4f}.btn[data-val="7合尾"]{background:#fce4ec;color:#ad1457}.btn[data-val="8合尾"]{background:#fce4ec;color:#880e4f}.btn[data-val="9合尾"]{background:#fce4ec;color:#ad1457}
.btn[data-val="东段"]{background:#e8f5e9;color:#1b5e20}.btn[data-val="南段"]{background:#fce4ec;color:#880e4f}.btn[data-val="西段"]{background:#fff8e1;color:#f57f17}.btn[data-val="北段"]{background:#e3f2fd;color:#0d47a1}
.btn[data-val="1门"]{background:#e0f7fa;color:#00695c}.btn[data-val="2门"]{background:#e0f7fa;color:#004d40}.btn[data-val="3门"]{background:#e0f7fa;color:#00695c}.btn[data-val="4门"]{background:#e0f7fa;color:#004d40}.btn[data-val="5门"]{background:#e0f7fa;color:#00695c}
.btn[data-val="楼上码"],.btn[data-val="楼下码"],.btn[data-val="前落码"],.btn[data-val="后落码"],.btn[data-val="左边码"],.btn[data-val="右边码"]{background:#fff3e0;color:#e65100}
.btn[data-val="内围码"],.btn[data-val="外围码"],.btn[data-val="中数"],.btn[data-val="边数"]{background:#e8eaf6;color:#1a237e}

/* ✅ 选中态 */
.btn.active { 
    background: linear-gradient(to bottom, #FF0000, #FFFF00) !important; 
    color: white !important; 
    border-color: #e60000 !important; 
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 1px 2px rgba(0,0,0,0.15) !important; 
}

/* ✅ 复制结果模态框 */
.modal-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.6); z-index: 10000;
    display: none;
    align-items: center; justify-content: center;
    backdrop-filter: blur(2px);
}
.modal-overlay.show { 
    display: flex !important; 
}
.modal-content {
    background: #fff; width: 88%; max-width: 400px;
    border-radius: 12px; padding: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    animation: modalSlideUp 0.3s ease;
}
@keyframes modalSlideUp { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.modal-header h3 { font-size: 17px; color: #333; }
.close-modal { font-size: 26px; color: #999; cursor: pointer; line-height: 1; padding: 0 4px; }
.close-modal:hover { color: #333; }
.modal-body textarea {
    width: 100%; height: 110px; border: 1px solid #ddd; border-radius: 6px;
    padding: 12px; font-size: 14px; color: #333; resize: none;
    background: #fafafa; margin-bottom: 15px; font-family: monospace;
    line-height: 1.6;
}
.modal-body textarea:focus { outline: none; border-color: #009688; }
.modal-footer { display: flex; gap: 10px; }
.modal-btn { flex: 1; height: 42px; border: none; border-radius: 6px; font-size: 14px; cursor: pointer; transition: all 0.2s; }
.modal-btn:active { transform: scale(0.97); }
.modal-btn.primary { background: #009688; color: #fff; }
.modal-btn.primary:hover { background: #00796b; }
.modal-btn.secondary { background: #eee; color: #666; }
.modal-btn.secondary:hover { background: #ddd; }

/* 响应式适配 */
@media (max-width: 480px) {
    .num-btn { width: 36px; height: 36px; font-size: 12px; }
    /* 手机端网格稍微调小一点，以便一行能放下更多 */
    .attr-row { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); }
    .btn { height: 30px; font-size: 12px; }
    .modal-content { width: 92%; padding: 16px; }
    .modal-body textarea { height: 90px; font-size: 13px; }
}