/* 页面整体样式 */
body { 
    font-family: Arial, sans-serif; 
    background:#f0f2f5;       /* 柔和灰蓝背景，护眼 */
    margin:0; 
    padding:20px; 
    display:flex; 
    justify-content:center; 
    color:#333;               /* 默认文字颜色柔和黑，清晰可读 */
}

/* 容器样式 */
.container { 
    width:100%; 
    max-width:1200px; 
    background:#fcfcfc;       /* 柔和白背景 */
    border-radius:12px; 
    box-shadow:0 4px 12px rgba(0,0,0,0.06); 
    padding:20px; 
}

/* 标题 */
h2 { 
    text-align:center; 
    color:#2c3e50;            /* 深灰蓝色，柔和清晰 */
}

/* 提示文字 */
p.tip { 
    text-align:center; 
    color:#555;               /* 柔和灰色提示 */
    font-size:14px; 
    margin:0;
    margin-bottom:4px; 
}

/* 域名输入框 */
#domains { 
    width:100%; 
    max-width:600px; 
    min-width:200px; 
    height:200px; 
    border:1px solid #c8d0d8; 
    border-radius:8px; 
    padding:10px; 
    font-size:14px; 
    resize:vertical; 
    display:block; 
    margin:10px auto 10px auto; 
    background:#f9f9f9;       /* 浅灰背景，护眼 */
    color:#333;               /* 文字清晰 */
}

/* 按钮样式 */
button { 
    width:100%; 
    max-width:200px; 
    display:block; 
    margin:10px auto; 
    padding:12px; 
    border:none; 
    border-radius:8px; 
    background:#5a9bd5;       /* 柔和蓝色 */
    color:#fff; 
    font-size:16px; 
    cursor:pointer; 
    transition: background 0.3s; 
}
button:hover { 
    background:#4682b4;       /* 鼠标悬停颜色加深 */
}
button:disabled { 
    background:#b0b0b0;       /* 禁用状态灰色 */
    color:#fff; 
    cursor:not-allowed; 
}

/* 表格容器，保证横向滚动 */
.table-container { 
    width:100%; 
    overflow-x:auto; 
    margin-top:20px; 
}

/* 表格基础样式 */
table { 
    width:100%; 
    border-collapse:collapse; 
    table-layout:auto; 
}

/* 表头与单元格样式 */
th, td { 
    border:1px solid #d1d5da; 
    padding:10px; 
    font-size:14px; 
    vertical-align:top; 
}

/* 表头颜色 */
th { 
    background:#e6ebf0;        /* 浅灰蓝背景 */
    color:#2c3e50;             /* 深灰蓝文字 */
    text-align:left; 
}

/* 表格列宽 */
td.index { 
    width:40px; 
    text-align:center; 
}
td.domain { 
    white-space:nowrap; 
    overflow:hidden; 
    text-overflow:ellipsis; 
}

/* CNAME 链路文字颜色，柔和蓝色，护眼清晰 */
td.cname { 
    color:#3498db;  
}

/* A 记录文字颜色，柔和绿色，护眼清晰 */
td.a { 
    color:#2ecc71; 
}

/* 保持文本换行和不换断单词 */
td.cname, td.a { 
    white-space:pre-wrap; 
    word-break:keep-all; 
}