body, html {
    height: 100%;
    margin: 0;
    font-family: 'Segoe UI', 'Roboto', sans-serif; /* 更新字体堆栈，增加Roboto作为备选 */
    background-color: #f4f4f4;
    color: #333;
}

.container {
    width: 95%; /* 调整容器宽度以提供更多空间 */
    max-width: 1100px; /* 增加最大宽度以适应更大屏幕 */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 22px; /* 调整字体大小以提高可读性 */
    background-color: #ffffff;
    padding: 40px; /* 增加内边距以提供更多空间 */
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
    border-radius: 12px;
}

.input-group {
    margin-bottom: 35px; /* 调整间距以提供更好的视觉分隔 */
}

input[type="text"] {
    width: 100%; /* 维持输入框宽度自适应容器宽度 */
    min-width: 600px; /* 将输入框的最小宽度增加到600px */
    max-width: 100%; /* 确保输入框不超过容器宽度 */
    padding: 14px; /* 维持内边距以提高输入舒适度 */
    box-sizing: border-box;
    font-size: 18px; /* 细微调整字体大小以提高可读性 */
    margin-bottom: 20px;
    border: 2px solid #bbb;
    border-radius: 6px;
    transition: border-color 0.3s;
    overflow-x: auto; /* 允许水平滚动显示较长的内容 */
}

input[type="text"]:focus {
    border-color: #007bff; /* 调整焦点颜色以提高视觉反馈 */
}

label {
    font-weight: bold;
    font-size: 22px; /* 增加标签字体大小以匹配输入框字体大小 */
    display: block;
    margin-bottom: 12px;
    color: #0056b3; /* 调整标签颜色以提高视觉吸引力 */
}

.length-display {
    font-size: 20px; /* 增加长度显示字体大小以提高可读性 */
    color: #666;
    margin-top: 10px;
}

/* 增加一个特定的类来处理特别长的输入 */
.input-long {
    min-height: 50px; /* 维持最小高度以显示更多内容 */
    line-height: 1.5; /* 维持行高以改善多行文本的可读性 */
}