:root {
            --primary: #2196F3;
            --secondary: #1976D2;
            --bg: #f5f5f5;
            --panel-bg: #fff;
            --border: #e0e0e0;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        wkbody {
            font-family: system-ui, sans-serif;
            min-height: 100vh;
            padding: 20px;
        }

        .wkcontainer {
            display: grid;
            grid-template-columns: 320px 1fr;
            gap: 20px;
            max-width: 1200px;
            margin: 0 auto;
            background: var(--panel-bg);
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            padding: 20px;
        }
        
        .upload-area p{
            margin-bottom: 0 !important; 
        }


        .control-panel {
            border-right: 1px solid var(--border);
            padding-right: 20px;
            max-height: 90vh;
            overflow-y: auto;
        }
        .control-panel h2{
            text-align: center;
        }

        .control-group {
            margin: 5px 0;
        }

        label {
            display: block;
            margin-bottom: 5px;
            color: #666;
            font-size: 14px;
        }

        select,
        input[type="range"] {
            width: 100%;
            padding: 8px;
            border: 1px solid var(--border);
            border-radius: 4px;
            background: white;
        }

        input[type="color"] {
           /* width: 32px; */
            height: 32px;
            border-radius: 50%;
            padding: 0;
            border: 2px solid var(--border);
            overflow: hidden;
        }

        input[type="color"]::-webkit-color-swatch {
            border: none;
            border-radius: 50%;
        }

        input[type="color"]::-webkit-color-swatch-wrapper {
            padding: 0;
        }

        .color-picker-group {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-top: 10px;
        }

        .color-preview {
            width: 100%;
            height: 40px;
            border-radius: 8px;
            border: 2px solid var(--border);
        }

        .preview-panel {
            position: relative;
            width: 100%;
            height: 89vh;
            max-height: 100%;
            overflow: auto;  /* 溢出滚动 */
        }
        
        .preview-panel-wrapper {
            position: relative;  /* 让按钮相对于这个容器定位 */
            display: inline-block;  /* 让宽度自适应内容 */
}

        #downloadBtn {
            position: relative;
            padding: 8px 15px;
            width: 100%;
            margin: 0 auto 10px auto; /* 关键修改 - 水平居中 */
            display: block; /* 确保margin auto生效 */
            left: auto;
            transform: none;
            border-radius: 8px; /* 调整为更紧凑的圆角 */
            border: 2px dashed var(--border);
        }

        .download-button:hover {
            background-color: #45a049;
        }

        #previewCanvas {
            width: 100%;
            height: auto;
            min-height: 460px; /* 最小高度保证 */
            border: 2px dashed var(--border);
            border-radius: 8px;
            background: repeating-conic-gradient(#eee 0% 25%, white 0% 50%) 50% / 20px 20px;
            overflow: auto; /* 画布自身滚动 */
            object-fit: contain; /* 保持图片比例 */
        }

        

        #downloadBtn:hover {
            background: var(--secondary);
            
        }

        .upload-area {
            height: 90px;
            border: 2px dashed var(--border);
            border-radius: 8px;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: 0.3s;
            flex-direction: column;
            gap: 8px;
            position: relative;
        }

        #fileInput {
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer;
        }

        .font-upload-btn {
            padding: 8px 8px;
            background: var(--primary);
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: 0.3s;
            white-space: nowrap;
        }
        .font-control-group {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .font-control-group label {
            white-space: nowrap;
        }
        .font-control-group select {
            flex-grow: 1;
        }
        .watermark-textarea {
            width: 100%;
            padding: 8px;
            border: 1px solid #ccc;  /* 默认灰色边框 */
            border-radius: 4px;
            resize: vertical;
            min-height: 30px;
            outline: none;  /* 移除默认的焦点轮廓 */
            transition: border-color 0.3s;  /* 添加过渡效果 */
        }
    
         /* 聚焦时保持相同样式或轻微变化 */
        .watermark-textarea:focus {
            border: 1px solid #ccc;  /* 保持灰色边框 */
            /* 或者使用更柔和的焦点样式，例如浅蓝色 */
            /* border: 1px solid #a0c4ff; */
            box-shadow: none;  /* 移除可能存在的阴影 */
        }
        .dashed-divider {
            border: none;
            border-top: 1px dashed #ccc;
            margin: 10px 0; /* 调整上下间距 */
        }
        .switch-label {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .custom-switch {
            position: relative;
            display: inline-block;
            width: 40px;
            height: 20px;
        }
        
        .custom-switch input {
          opacity: 0;
          width: 0;
          height: 0;
        }
        
        .slider {
          position: absolute;
          cursor: pointer;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-color: #ff4949;
          transition: .4s;
          border-radius: 20px;
        }
        
        .slider:before {
          position: absolute;
          content: "";
          height: 16px;
          width: 16px;
          left: 2px;
          bottom: 2px;
          background-color: white;
          transition: .4s;
          border-radius: 50%;
        }
        
        input:checked + .slider {
          background-color: #5d5cde;
        }
        
        input:checked + .slider:before {
          transform: translateX(20px);
        }
        
        input:focus + .slider {
          box-shadow: 0 0 1px #5d5cde;
        }
        .download-hint {
            position: sticky;
            bottom: 0;
            background: var(--panel-bg);
            padding: 8px 0;
            z-index: 1;
            box-shadow: 0 -4px 12px rgba(0,0,0,0.05);
        }
        .download-hint p{
            color: #928f8f;
            font-size: 13px;
            border: 2px dashed var(--border);
            
        }
        /* 修改后的响应式样式 */
@media (max-width: 600px) { /* 调整为更可靠的移动端断点 */

        wkbody {
            font-family: system-ui, sans-serif;
            min-height: 100vh;
            padding: 5px;
        }
        .wkcontainer {
            grid-template-columns: 1fr;
            padding: 12px;
            height: auto;
        }
    
        .control-panel {
            border-right: none;
            border-bottom: 1px solid var(--border);
            padding: 0 0 0 0;
            max-height: none;
        }
    
        .upload-area {
            height: 60px;
            border: 2px dashed var(--border);
            border-radius: 8px;
            margin-bottom: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: 0.3s;
            flex-direction: column;
            gap: 8px;
            position: relative;
        }
        
                #previewCanvas {
            width: 100%;
            height: auto;
            min-height: 300px; /* 最小高度保证 */
            border: 2px dashed var(--border);
            border-radius: 8px;
            background: repeating-conic-gradient(#eee 0% 25%, white 0% 50%) 50% / 20px 20px;
            overflow: auto; /* 画布自身滚动 */
             object-fit: contain; /* 保持图片比例 */
        }
        
        .preview-panel-wrapper {
            position: relative;
            display: flex;
            flex-direction: column;
            height: 65vh; /* 固定容器高度 */
            max-height: 100%;  /* 限制最大高度为父容器高度 */
            overflow: auto;  /* 隐藏溢出内容 */
        }
        /* 新增滚动容器 */
        .preview-content {
            flex: 1;
            overflow-y: auto; /* 启用垂直滚动 */
            position: relative;
            flex: 1;          /* 填充剩余空间 */
            min-height: 0;     /* 允许缩小 */
        }
            
            
        .download-hint p{
            color: #928f8f;
            font-size: 11px;
            display: none;
            }
        #downloadBtn {
            padding: 3px 5px; /* 减小按钮尺寸 */
        }
        
    }
        
        /* 桌面端优化 */
        @media (min-width: 601px) {
        .wkcontainer {
            min-width: 800px; /* 保持桌面端最小宽度 */
        }
    }