/* 设置整个页面的背景渐变色 */
body {
    font-family: "Microsoft YaHei", sans-serif;
    background: linear-gradient(120deg, #a1c4fd, #c2e9fb);
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

/* 中心区域样式 */
.container {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    text-align: center;

    /* 固定宽度，保持输出/输入框不随着文本变化 */
    width: 700px;
    max-width: 700px;
}
/* 工具区域：左右分栏 */
.toolbox {
    display: flex;
    justify-content: space-between;
    gap: 1rem; /* 输入框和输出框之间的间距 */
    margin-top: 1rem;
}

.input-box,
.output-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
/* 文本输入区域 */
textarea {
    width: 100%;         /* 占满容器宽度 */
    height: 200px;       /* 固定高度 */
    resize: none;        /* 禁止拖动改变大小 */
    overflow-y: scroll;  /* 固定高度时出现垂直滚动条 */
    box-sizing: border-box; /* 避免因为padding撑大 */
    padding: 0.5rem;
    font-size: 1rem;
}
/* 文本输出区域 */
#outputArea {
    width: 100%;          /* 占满容器 */
    height: 200px;        /* 固定高度 */
    overflow-y: scroll;   /* 垂直滚动条 */
    overflow-x: auto;     /* 水平滚动条 */
    box-sizing: border-box;
    margin-top: 0.5rem;
    padding: 0.5rem;
    background: #f0f0f0;
    border-radius: 5px;
    text-align: left;
    white-space: pre-wrap;
    word-break: break-all;
}
/* 按钮组：小工具栏 */
.btn-group {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
}

button {
    flex: 1;                /* 等宽按钮 */
    padding: 0.7rem 0;      /* 上下间距 */
    font-size: 1rem;
    border: none;
    border-radius: 5px;
    color: white;
    cursor: pointer;
    transition: background 0.3s ease;
}

/* 合并行按钮（蓝色） */
button:first-child {
    background: #66a6ff;
}
button:first-child:hover {
    background: #4a8be0;
}

/* 清空按钮（红色） */
.clear-btn {
    background: #ff6666;
}
.clear-btn:hover {
    background: #e04a4a;
}

/* 复制按钮（绿色） */
#copyBtn {
    background: #4caf50;
}
#copyBtn:hover {
    background: #3e8e41;
}


