/* 页面主体样式 */
body {
    background-color: #2c2c2c; /* 背景颜色为暗色 */
    color: #ffffff; /* 文字颜色为白色 */
    font-family: Arial, sans-serif; /* 使用Arial字体 */
    display: flex; /* 使用Flexbox布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    height: 100vh; /* 视窗高度 */
    margin: 0; /* 去除默认外边距 */
}

/* 容器样式 */
.container {
    background-color: #3a3a3a; /* 背景颜色稍浅 */
    padding: 20px; /* 内边距 */
    border-radius: 10px; /* 圆角边框 */
    width: 80%; /* 宽度80% */
    max-width: 600px; /* 最大宽度600px */
    box-sizing: border-box; /* 包括内边距和边框在内的盒子模型 */
    text-align: center; /* 容器内文本居中 */
}

/* 标题样式 */
.title {
    margin-bottom: 33px; /* 标题下方的间距 */
    color: #ffffff; /* 标题文字颜色为白色 */
    font-size: 28px; /* 标题字体大小 */
}

/* 行布局样式 */
.row {
    display: flex; /* 使用Flexbox布局 */
    justify-content: space-between; /* 元素之间的空间均匀分布 */
    margin-bottom: 10px; /* 行间距 */
    align-items: center; /* 垂直居中对齐 */
    flex-wrap: nowrap; /* 禁止内容换行，保持在一行内 */
}

/* 输入框通用样式 */
.input-box {
    background-color: #4a4a4a; /* 输入框背景色 */
    border: 1px solid #6a6a6a; /* 边框颜色 */
    border-radius: 5px; /* 圆角边框 */
    padding: 10px; /* 内边距 */
    text-align: center; /* 文本居中 */
    color: #ffffff; /* 文字颜色为白色 */
    box-sizing: border-box; /* 包括内边距和边框在内的盒子模型 */
}

/* IP地址输入框样式 */
.input-ip {
    width: calc(65% - 20px); /* 调整IP地址框宽度 */
}

/* CIDR输入框样式 */
.input-cidr {
    width: calc(30% - 20px); /* 调整CIDR框宽度 */
}

/* 斜杠样式 */
.slash {
    color: #ffffff; /* 斜杠颜色 */
    font-size: 20px; /* 字体大小 */
    padding: 0 5px; /* 左右内边距 */
}

/* 大输入框样式 */
.input-large {
    width: 100%; /* 拉长后的框宽度 */
}

/* 标签样式 */
.label {
    width: 30%; /* 标签宽度 */
    text-align: left; /* 文本左对齐 */
    margin-right: 5px; /* 标签与输入框之间的间距 */
    line-height: 32px; /* 行高 */
}

/* 输入框容器样式 */
.input-container {
    width: 70%; /* 输入框容器宽度 */
}