/* ================= 基础重置 ================= */
/* 通配选择器重置所有元素默认样式 */
*,
/* 伪元素重置 */
*::before,
*::after {
    /* 统一盒模型计算方式 */
    box-sizing: border-box;
    /* 清除默认外边距 */
    margin: 0;
    /* 清除默认内边距 */
    padding: 0;
    /* 禁用iOS点击高亮效果 */
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

/* 根元素基础设置 */
html {
    /* 基准字体大小16px */
    font-size: 16px;
    /* 基础行高1.5倍 */
    line-height: 1.5;
    /* 禁止iOS横屏字体缩放 */
    -webkit-text-size-adjust: 100%;
}

/* ================= 通用样式 ================= */
body {
    /* 页面四周5%边距 */
    margin: 5%;
    /* 清除默认内边距 */
    padding: 0;
    /* 字体栈：首选Arial，支持系统字体，最后无衬线字体 */
    font-family: 'Arial', system-ui, sans-serif;
    /* 纯黑背景色 */
    background-color: #000;
    /* 纯白文字颜色 */
    color: #fff;
    /* Safari字体抗锯齿 */
    -webkit-font-smoothing: antialiased;
    /* Firefox字体渲染优化 */
    -moz-osx-font-smoothing: grayscale;
}

/* ================= 主容器 ================= */
.box {
    /* 深灰色背景 */
    background-color: #333;
    /* 8px圆角 */
    border-radius: 8px;
    /* 内边距2rem（32px） */
    padding: 2rem;
    /* 最大宽度限制 */
    max-width: 500px;
    /* 上下3rem外边距，水平居中 */
    margin: 3rem auto;
    /* 阴影效果：X偏移0，Y偏移4px，模糊12px，透明度25%黑色 */
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

/* ================= 表单元素基样式 ================= */
/* 选择器组：选择框/文本输入框/提交按钮 */
select,
input[type="text"],
input[type="submit"] {
    /* 宽度100%填充容器 */
    width: 100%;
    /* 中灰色背景 */
    background-color: #444;
    /* 白色文字 */
    color: #fff;
    /* 1px深灰色边框 */
    border: 1px solid #555;
    /* 4px圆角 */
    border-radius: 4px;
    /* 内边距14px（0.875rem） */
    padding: 0.875rem;
    /* 字体大小1rem（16px） */
    font-size: 1rem;
    /* 上下0.5rem外边距，左右无 */
    margin: 0.5rem 0;
    /* 所有属性0.2秒缓动过渡 */
    transition: all 0.2s ease;
    /* 移除Safari默认样式 */
    -webkit-appearance: none;
    /* 移除Firefox默认样式 */
    -moz-appearance: none;
    /* 标准方法移除默认样式 */
    appearance: none;
}

/* ================= 输入框聚焦状态 ================= */
input[type="text"]:focus,
select:focus {
    /* 移除默认轮廓线 */
    outline: none;
    /* 蓝色边框 */
    border-color: #007bff;
    /* 2px蓝色发光效果 */
    box-shadow: 0 0 0 2px rgba(0,123,255,0.25);
}

/* ================= 选择框特殊样式 ================= */
select {
    /* 使用SVG DataURI作为下拉箭头 */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg...");
    /* 禁止背景重复 */
    background-repeat: no-repeat;
    /* 背景定位：右侧12px，垂直居中 */
    background-position: right 0.75rem center;
    /* 背景图标大小20px */
    background-size: 1.25rem;
    /* 右侧留出40px空间防止文字覆盖图标 */
    padding-right: 2.5rem;
}

/* ================= 按钮系统 ================= */
.button-group {
    /* 网格布局 */
    display: grid;
    /* 网格项间距16px */
    gap: 1rem;
    /* 顶部24px外边距 */
    margin-top: 1.5rem;
}

input[type="submit"] {
    /* 品牌蓝色背景 */
    background-color: #007bff;
    /* 无边框 */
    border: none;
    /* 中等字重 */
    font-weight: 500;
    /* 0.5px字间距 */
    /* 最小高度48px */
    min-height: 3rem;
}

/* 按钮悬停状态 */
input[type="submit"]:hover {
    /* 深蓝色背景 */
    background-color: #0056b3;
    /* 上移1px */
    transform: translateY(-1px);
    /* 添加阴影 */
    box-shadow: 0 3px 8px rgba(0,0,0,0.2);
}

/* 按钮点击状态 */
input[type="submit"]:active {
    /* 复位位置 */
    transform: translateY(0);
    /* 减小阴影 */
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* ================= 输出面板 ================= */
.output-box {
    /* 顶部32px外边距 */
    margin-top: 2rem;
    /* 内边距20px */
    padding: 1.25rem;
    /* 中灰色背景 */
    background-color: #444;
    /* 6px圆角 */
    border-radius: 6px;
    /* 最大高度为视口60% */
    max-height: 60vh;
    /* 内容溢出时显示滚动条 */
    overflow: auto;
}

.output-box pre {
    /* 保留空格但允许换行 */
    white-space: pre-wrap;
    /* 允许单词内断行 */
    word-break: break-word;
    /* 等宽字体 */
    font-family: 'Consolas', monospace;
    /* 14px字号 */
    font-size: 0.875rem;
    /* 1.6倍行高 */
    line-height: 1.6;
}

/* ================= 响应式设计 ================= */
/* 中屏幕断点（平板） */
@media (max-width: 768px) {
    .box {
        /* 内边距24px */
        padding: 1.5rem;
        /* 外边距24px */
        margin: 1.5rem auto;
    }

    /* 表单元素组 */
    select,
    input[type="text"],
    input[type="submit"] {
        /* 15px字号 */
        font-size: 0.9375rem;
        /* 12px内边距 */
        padding: 0.75rem;
    }

    select {
        /* 右侧留出36px */
        padding-right: 2.25rem;
        /* 图标大小16px */
        background-size: 1rem;
    }

    input[type="submit"] {
        /* 最小高度44px */
        min-height: 2.75rem;
    }

    .output-box {
        /* 内边距16px */
        padding: 1rem;
    }
}

/* 小屏幕断点（手机） */
@media (max-width: 480px) {
    body {
        /* 页面边距16px */
        margin: 1rem;
    }

    .box {
        /* 6px圆角 */
        border-radius: 6px;
    }

    input[type="submit"] {
        /* 15px字号 */
        font-size: 0.9375rem;
        /* 内边距10px */
        padding: 0.625rem;
    }
}

/* ================= 辅助样式 ================= */
.developer {
    /* 浅灰色文字 */
    color: #888;
    /* 14px字号 */
    font-size: 0.875rem;
    /* 文字居中 */
    text-align: center;
}

.header {
    /* 文字居中 */
    text-align: center;
}

footer {
    /* 文字居中 */
    text-align: center;
    /* 中灰色文字 */
    color: #444;
    /* 上下内边距24px */
    padding: 1.5rem 0;
    /* 14px字号 */
    font-size: 0.875rem;
}