/* -------------------- */
/* 全局样式         */
/* -------------------- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap');

:root {
    --primary-blue: #007bff;
    --primary-blue-hover: #0056b3;
    --light-blue: #f0f7ff;
    --border-color: #ddd;
    --text-color: #333;
    --bg-color: #f8f9fa;
    /* 页面背景色 */
    --white-color: #fff;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Noto Sans SC', sans-serif;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: var(--bg-color);
    padding: 20px;
}

/* -------------------- */
/* 主容器与布局       */
/* -------------------- */

.container {
    width: 100%;
    max-width: 950px;
    background-color: var(--white-color);
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    padding: 25px 30px;
}

.container h1 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 20px;
    text-align: center;
}

/* 编辑器主区域 (使用 Flex 布局) */
.editor-wrapper {
    display: flex;
    gap: 20px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 20px;
}

/* -------------------- */
/* 左侧控制面板       */
/* -------------------- */
.controls-panel {
    width: 300px;
    border-right: 1px solid var(--border-color);
    padding-right: 20px;
}

.controls-panel .title {
    display: block;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 12px;
}

/* 滤镜选项按钮 */
.filter-options .buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* 一行两个 */
    gap: 10px;
}

.buttons button {
    width: 100%;
    height: 40px;
    font-size: 14px;
    background-color: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.buttons button:hover {
    background-color: var(--light-blue);
}

/* 激活按钮的样式 */
.buttons button.active {
    background-color: var(--primary-blue);
    color: var(--white-color);
    border-color: var(--primary-blue);
}

/* 滑块样式 */
.slider {
    margin-top: 20px;
}

.slider .slider-info {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: var(--text-color);
    margin-bottom: 5px;
}

.slider input[type="range"] {
    width: 100%;
    height: 5px;
    -webkit-appearance: none;
    appearance: none;
    background: #eee;
    border-radius: 5px;
    outline: none;
}

/* 滑块的拖动按钮 */
.slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    background: var(--primary-blue);
    border-radius: 50%;
    cursor: pointer;
}

/* 旋转选项 */
.rotate-options {
    margin-top: 20px;
}

.rotate-options .buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 一行四个 */
    gap: 10px;
}

/* --------------------------------- */
/* (新代码) */

/* 重新设置旋转按钮的样式 */
.rotate-options .buttons button {
    /* 使用 flex 布局让内部的 img 完美居中 */
    display: flex;
    justify-content: center;
    align-items: center;

    /* 移除所有内边距，因为 flex 会处理居中 */
    padding: 0;

    /* (之前设置的 font-size 和 padding-top 已经不再需要) */
}

/* 设置按钮内部图标(img)的大小 */
.rotate-options .buttons button img {
    width: 20px;
    /* 您可以根据图标的实际观感调整大小 */
    height: 20px;
    /* 保持宽高一致 */
}

/* --------------------------------- */

/* 重置按钮 */
.reset-btn {
    width: 100%;
    height: 42px;
    font-size: 15px;
    font-weight: 500;
    color: #666;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 6px;
    cursor: pointer;
    margin-top: 20px;
    transition: background-color 0.2s;
}

.reset-btn:hover {
    background-color: #e0e0e0;
}


/* -------------------- */
/* 右侧预览面板       */
/* -------------------- */
.preview-panel {
    flex-grow: 1;
    /* 占据剩余所有空间 */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 250px;
    /* 保证一个最小高度 */
    overflow: hidden;
    /* 防止图片过大时溢出 */
}

.image-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 上传提示 */
.upload-prompt {
    font-size: 18px;
    color: #999;
    text-align: center;
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    padding: 60px 40px;
    width: 100%;
}

/* 预览图片 */
.preview-img {
    max-width: 100%;
    max-height: 450px;
    /* 限制最大高度 */
    object-fit: contain;
    /* 保持图片比例 */
    transition: filter 0.3s ease, transform 0.3s ease;
    /* 关键：让滤镜和变换有动画 */
}

/* .hidden 类，用于隐藏元素 (JS 将会用到) */
.hidden {
    display: none;
}


/* -------------------- */
/* 底部控制按钮      */
/* -------------------- */
.bottom-controls {
    display: flex;
    justify-content: flex-end;
    /* 按钮靠右 */
    gap: 15px;
    margin-top: 20px;
}

.bottom-controls button {
    height: 45px;
    font-size: 16px;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    border: none;
    padding: 0 25px;
    transition: background-color 0.2s, opacity 0.2s;
}

.choose-btn {
    background-color: #6c757d;
    color: var(--white-color);
}

.choose-btn:hover {
    background-color: #5a6268;
}

.save-btn {
    background-color: var(--primary-blue);
    color: var(--white-color);
    opacity: 0.7;
    /* 默认不可用 */
    pointer-events: none;
    /* 默认不可点击 */
}

/* 当图片加载后，JS 会移除这个类 */
.save-btn.active {
    opacity: 1;
    pointer-events: auto;
}

.save-btn.active:hover {
    background-color: var(--primary-blue-hover);
}