body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    margin: 20px;
    background: #f0f2f5;
    display: flex;
    gap: 20px;
}

.control-panel {
    width: 300px;
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.input-group {
    margin-bottom: 15px;
}

label {
    display: block;
    margin-bottom: 5px;
    color: #333;
    font-weight: 500;
}

input, select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}

button {
    background: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s;
    margin-top: 10px;
    width: 100%;
}

button:hover {
    background: #0056b3;
}

#preview-container {
    flex: 1;
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    display: flex;
    justify-content: center;
    align-items: center;
}

canvas {
    max-width: 100%;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

#download-link {
    display: none;
    margin-top: 10px;
    color: #007bff;
    text-decoration: none;
    text-align: center;
    display: block;
}

.warning {
    color: #dc3545;
    font-size: 14px;
    margin-top: 5px;
    display: none;
}

/* 预设背景选择器样式 */
#preset-bg {
    height: 36px; /* 标准高度 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#preset-bg option {
    padding: 8px;
    background-size: 60px 30px;
    background-position: right center;
    background-repeat: no-repeat;
}

/* 为每个预设背景添加预览图标 */
#preset-bg option[value="image/1.png"] { background-image: url('image/1.png'); }
#preset-bg option[value="image/2.png"] { background-image: url('image/2.png'); }
#preset-bg option[value="image/3.png"] { background-image: url('image/3.png'); }
#preset-bg option[value="image/4.png"] { background-image: url('image/4.png'); }
#preset-bg option[value="image/5.png"] { background-image: url('image/5.png'); }
#preset-bg option[value="image/6.png"] { background-image: url('image/6.png'); }
#preset-bg option[value="image/7.png"] { background-image: url('image/7.png'); }
#preset-bg option[value="image/8.png"] { background-image: url('image/8.png'); }
#preset-bg option[value="image/9.png"] { background-image: url('image/9.png'); }
#preset-bg option[value="image/10.png"] { background-image: url('image/10.png'); }
#preset-bg option[value="image/11.png"] { background-image: url('image/11.png'); }
#preset-bg option[value="image/12.png"] { background-image: url('image/12.png'); }
#preset-bg option[value="image/13.png"] { background-image: url('image/13.png'); }
#preset-bg option[value="image/14.png"] { background-image: url('image/14.png'); }

.plaintext-input {
    width: 100%;
    min-height: 100px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    resize: vertical; /* 允许垂直调整大小 */
    font-family: monospace;
    white-space: pre-wrap; /* 保留换行和空格 */
}

@media screen and (max-width: 768px) {
    .plaintext-input {
        min-height: 80px;
        font-size: 14px;
    }
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
    body {
        flex-direction: column;
        margin: 10px;
        gap: 15px;
    }

    .control-panel {
        width: 100%;
        padding: 15px;
        border-radius: 8px;
        order: 1; /* 将控制面板移到下方 */
    }

    #preview-container {
        width: 100%;
        min-height: 60vh;
        padding: 10px;
        order: 2; /* 预览区域在上方 */
        margin-bottom: 15px;
    }

    /* 输入项优化 */
    .input-group {
        margin-bottom: 12px;
    }

    input, select {
        padding: 10px;
        font-size: 16px; /* 增大移动端输入字号 */
    }

    /* 按钮优化 */
    button {
        padding: 12px;
        font-size: 17px;
    }

    /* 预设背景选择器优化 */
    #preset-bg {
        height: 44px; /* 更适合移动端触控 */
    }

    /* 预览画布尺寸调整 */
    canvas {
        max-width: 90%;
        margin: 0 auto;
    }
}

/* 小屏手机额外优化 */
@media screen and (max-width: 480px) {
    .control-panel {
        padding: 12px;
    }

    #preview-container {
        min-height: 50vh;
    }

    label {
        font-size: 14px;
    }

    input, select {
        font-size: 15px;
        padding: 8px;
    }
}

/* 平板设备优化 */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    body {
        gap: 15px;
    }

    .control-panel {
        width: 280px;
        padding: 18px;
    }

    #preview-container {
        padding: 15px;
    }
}