*{margin: 0;padding: 0;box-sizing: border-box;font-family: 'Arial', sans-serif;}
body{background-color: #f5f5f5;color: #333;line-height: 2;}
.login-modal{display: none;background-color: rgba(0,0,0,0.5);z-index: 2000;}
.login-content{position: relative;background-color: white;padding: 25px;border-radius: 8px;width: 350px;box-shadow: 0 4px 12px rgba(0,0,0,0.15);}
.login-title{font-size: 20px;margin-bottom: 20px;color: #333;text-align: center;}
.login-form-group{margin-bottom: 15px;}
.login-form-control{width: 100%;padding: 10px 12px;border: 1px solid #ddd;border-radius: 4px;font-size: 14px;height: 40px;box-sizing: border-box;}
.login-form-control:focus{border-color: #1E90FF;outline: none;}
.login-btn{background-color: #1E90FF;color: white;border: none;padding: 10px 15px;border-radius: 4px;cursor: pointer;font-size: 14px;width: 100%;margin-top: 10px;}
.login-btn:hover{background-color: #1C86EE;}
.get-code-btn{background-color: #f0f0f0;color: #333;border: 1px solid #ddd;padding: 10px 12px;border-radius: 4px;cursor: pointer;font-size: 14px;width: 50%;height: 40px;box-sizing: border-box;white-space: nowrap;line-height: 1;}
.get-code-btn:hover{background-color: #e0e0e0;}
.get-code-btn:disabled{background-color: #f5f5f5;color: #999;cursor: not-allowed;}
.login-footer{margin-top: 15px;text-align: center;font-size: 13px;color: #999;}
.code-input-group{display: flex;gap: 10px;align-items: center;}
.code-input-group .login-form-control{flex: 1;height: 40px;box-sizing: border-box;width: 200px;}
/* 登录框关闭按钮样式 - 修正版*/
.login-close-btn{position: absolute;top: 10px;right: 10px;width: 24px;height: 24px;background: #f0f0f0;border: none;border-radius: 50%;cursor: pointer;font-size: 16px;color: #666;padding: 0;display: flex;align-items: center;justify-content: center;line-height: 1;transition: all 0.2s;}
.login-close-btn:hover{background: #e0e0e0;color: #333;}
.mylogs .record-item{padding:15px 30px;}
.morediv{text-align: center;padding: 15px 0;}
.hasmore{border: 0;background: #ddd;padding: 5px 15px;border-radius: 5px;cursor: pointer;}
.hasmore:hover{background: #b2aaaa;}
.red{color:red}
/* 禁用状态样式*/
.hasmore:disabled{background-color: #cccccc;color: #666666;pointer-events: none;cursor: not-allowed;opacity: 0.8;}
.srpay{border-radius: 12px;line-height: normal;background: none;}
.vip-popup{min-width: 800px;max-width: 95%;height: 600px;border-radius: 12px;overflow: hidden;display: none;box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);background: white;}
.vip-popup.on{display: flex!important;}
.left-panel{width: 300px;background: linear-gradient(135deg, #3A3A3A, #1A1A1A);color: white;padding: 30px;}
.right-panel{flex: 1;padding: 10px 30px;display: flex;flex-direction: column;background: white;}
.title{font-size: 24px;font-weight: bold;margin-bottom: 25px;}
.feature-list{margin-bottom: 30px;}
.feature-list h3{font-size: 16px;margin-bottom: 15px;}
.feature-list ul{list-style: none;}
.feature-list li{font-size: 14px;margin-bottom: 10px;position: relative;padding-left: 15px;}
.feature-list li:before{content: "●";position: absolute;left: 0;font-size: 12px;color: #FF4E50;}
.pricing-options{display: flex;justify-content: space-between;margin: 10px 0;}
.pricing-option{width: 30%;border: 1px solid #eee;border-radius: 8px;padding: 15px;text-align: center;cursor: pointer;transition: all 0.3s;}
.pricing-option:hover{border-color: #FF4E50;}
.pricing-option.selected{border-color: #FF4E50;background-color: #FFF5F5;}
.price{font-size: 18px;font-weight: bold;color: #FF4E50;margin: 10px 0;}
.points{font-size: 14px;color: #666;}
.permanent{font-size: 12px;color: #999;margin-top: 5px;}
.no-tricks{font-size: 12px;color: #999;text-align: center;margin-bottom: 20px;}
.payment-section{text-align: center;margin-top: 10px;}
.payment-amount{font-size: 18px;margin-bottom: 15px;font-weight: bold;}
.payment-amount span{color: #FF4E50;font-size: 20px;}
.payment-button{background-color: #FF4E50;color: white;border: none;border-radius: 4px;padding: 12px 50px;font-size: 16px;cursor: pointer;margin-bottom: 15px;width: 100%;transition: all 0.3s;}
.a-button{background: linear-gradient(45deg, #292321 0%, #533a31 30%, #210f08 70%, #FFE0B2 100%);color: white;border: none;border-radius: 4px;padding: 12px 50px;font-size: 16px;cursor: pointer;margin-bottom: 15px;width: 100%;transition: all 0.3s;}
.payment-button:hover{background-color: #e43f40;transform: translateY(-2px);box-shadow: 0 4px 10px rgba(255, 78, 80, 0.2);}
.terms{font-size: 12px;color: #999;margin-bottom: 15px;}
.other-options{display: flex;justify-content: center;gap: 20px;}
.other-option{color: #666;font-size: 14px;text-decoration: underline;cursor: pointer;}
.disclaimer{font-size: 12px;color: #999;margin-top: 20px;line-height: 1.5;}
/* 新增的二维码样式*/
.qr-container{display: flex;justify-content: space-around;margin-bottom: 20px;gap: 20px;}
.qr-item{display: flex;flex-direction: column;align-items: center;justify-content: center;}
.qr-title{margin-top: 10px;font-size: 14px;color: #333;}
.qr-code{width: 154px;height: 154px;border: 1px solid #eee;border-radius: 8px;background: #f9f9f9;font-size: 12px;color: #888;}
.qr-code .alipay-code{width: 154px;height: 154px;}
.qr-code img{width:100%;height:auto}
.qr-code canvas{width: 100px;height: 100px;}
#wechat-qr{width: 160px;height: 160px;border: 0px solid #eee;}
/* 移动端支付按钮*/
.mobile-payment-buttons{display: flex;flex-direction: column;gap: 10px;margin-bottom: 15px;}
.mobile-pay-btn{display: block;padding: 12px 0;border: none;border-radius: 4px;font-size: 16px;color: white;cursor: pointer;text-align: center;text-decoration: none;transition: all 0.3s;}
.alipay-btn{background: #1677ff;}
.alipay-btn:hover{background: #0e6ae0;}
.wechat-btn{background: #09bb07;}
.wechat-btn:hover{background: #07a805;}
/* 响应式设计*/

.navbar{line-height: 1;}
.container{display: flex;flex-direction: column;min-height: 100vh;}
/* 导航栏样式*/
.navbar{background-color: white;padding: 15px 20px;box-shadow: 0 2px 5px rgba(0,0,0,0.1);display: flex;justify-content: space-between;align-items: center;z-index: 102;}
.logo{font-size: 20px;font-weight: bold;color: #333;}
.logo img{vertical-align: bottom;display: block;}
/* 导航按钮样式*/
.nav-btn{background-color: #f0f0f0;color: #333;border: none;padding: 8px 12px;border-radius: 4px;cursor: pointer;font-size: 14px;margin-right: 8px;}
.nav-btn:hover{background-color: #e0e0e0;}
.nav-btn:disabled{opacity: 0.5;cursor: not-allowed;}
.nav-btnvip{background: linear-gradient(135deg, #ffd700 0%, #ffA500 100%);color: #333;border: none;padding: 8px 12px;border-radius: 4px;cursor: pointer;font-size: 14px;margin-right: 8px;box-shadow: 0 2px 4px rgba(0,0,0,0.1);}
.nav-btnvip:hover{background: linear-gradient(135deg, #ffc107 0%, #ff8c00 100%);box-shadow: 0 3px 6px rgba(0,0,0,0.15);}
.nav-btnvip:disabled{background: linear-gradient(135deg, #fff3cd 0%, #ffeeba 100%);opacity: 0.7;cursor: not-allowed;box-shadow: none;}
/* 手机端隐藏VIP按钮*/
@media (max-width: 768px){
.nav-btnvip{display: none !important;}
}
.download-btn{background-color: #1E90FF;color: white;border: none;padding: 8px 16px;border-radius: 4px;cursor: pointer;font-size: 14px;}
.download-btn:hover{background-color: #1C86EE;}
/* 主内容区*/
.main-content{display: flex;flex: 1;}
/* 左侧菜单*/
.sidebar{width: 85px;background-color: white;box-shadow: 2px 0 5px rgba(0,0,0,0.1);padding: 20px 0;display: flex;flex-direction: column;align-items: center;overflow-x: auto;white-space: nowrap;z-index: 101;}
.menu-item{padding: 12px 0;text-align: center;cursor: pointer;font-size: 12px;color: #000;font-family: "KaiTi", "STKaiti", sans-serif;transition: all 0.3s;width: 85px;display: flex;flex-direction: column;align-items: center;justify-content: center;text-decoration: none;border: none;}
.menu-item:hover, .menu-item.active{background-color: #f0f0f0;color: #000;}
.menu-icon{font-size: 18px;margin-bottom: 5px;color: #1E90FF;}
.menu-icons{font-size: 18px;margin-bottom: 5px;width: 20px; height: 20px;color: #1E90FF;}
.menu-text{display: block;width: 100%;text-align: center;word-break: keep-all;white-space: nowrap;}
/* 表单标签样式*/
.form-label{display: flex;align-items: center;margin-bottom: 5px;font-size: 14px;color: #555;}
.form-label-icon{margin-right: 8px;color: #1E90FF;width: 16px;text-align: center;}
.text-click-region{background-color: rgba(30, 144, 255, 0.1);border: 1px dashed rgba(30, 144, 255, 0.3);z-index: 999;cursor: pointer;transition: all 0.2s;}
.text-click-region:hover{background-color: rgba(30, 144, 255, 0.2);}
.text-edit-box{z-index: 1000;}
.preview-container:hover .text-click-region{display: block;}
/* 中间功能区*/
.function-area{width: 287px;background-color: white;padding: 20px;box-shadow: 0 0 5px rgba(0,0,0,0.1);z-index: 101;}
/* 右侧预览区*/
.preview-area{flex: 1;background-color: #f9f9f9;padding: 20px;display: flex;flex-direction: column;align-items: center;justify-content: center;position: relative;overflow: auto;}
.preview-placeholder{color: #999;font-size: 16px;text-align: center;}
/* 预览容器样式*/
.preview-container{position: relative;display: flex;align-items: center;justify-content: center;width: 100%;height: 100%;overflow: auto;background-image: repeating-linear-gradient(-45deg, #cbcbcb14, #96939412 0px, #00000000 0px, #00000000 15px);border: 1px dashed #f0f0f0;border-radius: 0.5rem;flex-direction: column;}
/* 预览图片*/
.preview-image{max-width: 100%;max-height: 80vh;box-shadow: 0 0 10px rgba(0,0,0,0.1);}
/* 表单元素样式*/
.form-group{margin-bottom: 15px;}
.form-control{width: 100%;padding: 12px 12px;border: 1px solid #ddd;border-radius: 4px;font-size: 15px;}
.form-control:focus{border-color: #1E90FF;outline: none;}
.btn{background-color: #1E90FF;color: white;border: none;padding: 10px 15px;border-radius: 4px;cursor: pointer;font-size: 14px;width: 100%;margin-top: 10px;}
.btn:hover{background-color: #1C86EE;}
.rebtn{display:none;background-color: #1E90FF;color: white;border: none;padding: 10px 15px;border-radius: 4px;cursor: pointer;font-size: 14px;width: 100%;margin-top: 10px;}
.rebtn:hover{background-color: #1C86EE;}
.btn1{background-color: #1E90FF;color: white;border: none;padding: 10px 15px;border-radius: 4px;cursor: pointer;font-size: 14px;width: 100%;margin-top: 10px;}
.btn1:hover{background-color: #1C86EE;}
.btn2 {background-color: #1E90FF;color: white;border: none;padding: 10px 15px;border-radius: 4px;cursor: pointer;font-size: 14px;width: 100%;margin-top: 10px;}
.btn2:hover{background-color: #1C86EE;}
.btn3 {background-color: #1E90FF;color: white;border: none;padding: 10px 15px;border-radius: 4px;cursor: pointer;font-size: 14px;width: 100%;margin-top: 10px;}
.btn3:hover{background-color: #1C86EE;}
.text-row{display: flex;margin-bottom: 10px;}
.text-input{flex: 1;margin-right: 5px;}
.add-text-btn{width: 30px;background-color: #1E90FF;color: white;border: none;border-radius: 4px;cursor: pointer;}
/* 图片上传区域*/
.upload-area{border: 1px dashed #77bcff;padding: 20px;text-align: center;margin-bottom: 15px;cursor: pointer;}
.upload-area:hover{border-color: #1E90FF;}
.upload-icon{font-size: 24px;color: #0081ff;margin-bottom: 10px;}
.upload-text{color: #1c86ee;font-size: 14px;}
/* 上传的图片列表*/
.image-list{display: flex;flex-wrap: wrap;gap: 10px;margin-top: 10px;}
.image-item{position: relative;width: calc(50% - 5px);}
.image-item img{width: 100%;height: auto;border-radius: 4px;display: block;}
.delete-btn{position: absolute;top: -5px;right: -5px;background-color: #ff4444;color: white;border: none;border-radius: 50%;width: 20px;height: 20px;display: flex;align-items: center;justify-content: center;cursor: pointer;font-size: 10px;}
/* GIF预览容器*/
.gif-preview-container{display: flex;flex-direction: column;align-items: center;width: 100%;}
.gif-info{margin-top: 15px;font-size: 14px;color: #666;text-align: center;width: 100%;}
/* 尺寸比例选项样式*/
.ratio-options{display: flex;flex-wrap: wrap;gap: 8px;margin-bottom: 15px;}
.ratio-option{padding: 8px 12px;border: 1px solid #ddd;border-radius: 4px;cursor: pointer;font-size: 14px;background-color: #f9f9f9;text-align: center;}
.ratio-option:hover{background-color: #f0f0f0;}
.ratio-option.selected{background-color: #1E90FF;color: white;border-color: #1E90FF;}
/* 背景颜色选项样式*/
/* 背景颜色选项样式 */
.bg-color-options {
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
    gap: 8px; /* 使用gap替代margin来设置间距 */
    background: #e7e7e7;
    padding: 15px 0;
    border-radius: 15px;
}

.bg-color-option {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s ease; /* 添加过渡效果 */
    position: relative;
}

/* 悬停效果 */
.bg-color-option:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* 选中效果 */
.bg-color-option.selected {
    border-color: #000000;
    transform: scale(1.15);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

/* 为白色背景添加特殊样式，因为白色在白色背景下不明显 */
.bg-color-option[data-color="white"].selected {
    border-color: #333;
    background-color: #f0f0f0; /* 选中时稍微变灰一点 */
}

/* 选中的标记（可选） */
.bg-color-option.selected::after {
    content: "✓";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 14px;
    text-shadow: 0 0 2px #000;
}

/* 为浅色背景调整标记颜色 */
.bg-color-option[data-color="white"].selected::after,
.bg-color-option[data-color="#FBBC05"].selected::after {
    color: #333;
    text-shadow: 0 0 2px #fff;
}
/* 标签内容隐藏*/
.tab-content{display: none;}
.tab-content.active{display: block;}
.tab-preview{display: none;}
.tab-preview.active{display: flex;}
/* 首页图片样式*/
.home-image{width: 100%;margin-bottom: 15px;border-radius: 4px;box-shadow: 0 2px 5px rgba(0,0,0,0.1);}
/* 我的记录标签样式*/
.member-tabs{display: flex;border-bottom: 1px solid #ddd;margin-bottom: 15px;}
.member-tab{padding: 10px 15px;cursor: pointer;font-size: 14px;border-bottom: 2px solid transparent;}
.member-tab.active{border-bottom: 2px solid #1E90FF;color: #1E90FF;}
.member-tab-content{display: none;}
.member-tab-content.active{display: block;}
.record-item{margin-bottom: 15px;cursor: pointer;}
.record-item img{width: 100%;border-radius: 4px;border: 1px solid #ddd;}
.edit-section{margin-bottom: 15px;border: 1px solid #ddd;border-radius: 4px;padding: 10px;}
.edit-imgsection{margin-bottom: 15px;}
.edit-section-title{font-weight: bold;margin-bottom: 8px;color: #1E90FF;display: flex;align-items: center;}
.edit-section-title i{margin-right: 8px;}
.edit-controls{display: flex;flex-wrap: wrap;gap: 8px;margin-bottom: 8px;}
.edit-control-group{display: flex;flex-direction: column;min-width: 80px;}
.edit-control-group label{font-size: 12px;color: #666;margin-bottom: 4px;}
.edit-btn{background-color: #4CAF50;color: white;border: none;padding: 6px 12px;border-radius: 4px;cursor: pointer;font-size: 12px;margin-top: 8px;}
.edit-btn1{background-color: #4CAF50;color: white;border: none;padding: 6px 12px;border-radius: 4px;cursor: pointer;font-size: 12px;width: 57px;height: 33px;}
.edit-btn2{background-color: #1E90FF;color: white;border: none;padding: 6px 12px;border-radius: 4px;cursor: pointer;font-size: 12px;width: 93px;height: 35px;}
.edit-btn:hover{background-color: #45a049;}
.edit-btn1:hover{background-color: #45a049;}
.color-preview{width: 57px;height: 33px;border: 1px solid #ddd;display: inline-block;vertical-align: middle;margin-left: 5px;cursor: pointer;}
/* 文字编辑框样式*/
.text-edit-box{position: absolute;min-width: 100px;min-height: 30px;border: 2px dashed #1E90FF;padding: 5px;cursor: move;z-index: 1000;outline: none;}
.text-edit-box:focus{border: 2px solid #1E90FF;}
.text-edit-box.editing{border: 2px solid #1E90FF;}
/* 合并后的控制组样式*/
.combined-control-group{display: flex;gap: 8px;width: 100%;}
.combined-control-group .edit-control-group{flex: 1;}
/* 裁剪标尺样式*/
.crop-overlay{position: absolute;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0, 0, 0, 0.5);z-index: 100;pointer-events: none;}
.crop-handle{width: 10px;height: 10px;background-color: white;border: 2px solid #1E90FF;position: absolute;pointer-events: auto;z-index: 101;}
.crop-handle-tl{top: -5px;left: -5px;cursor: nwse-resize;}
.crop-handle-tr{top: -5px;right: -5px;cursor: nesw-resize;}
.crop-handle-bl{bottom: -5px;left: -5px;cursor: nesw-resize;}
.crop-handle-br{bottom: -5px;right: -5px;cursor: nwse-resize;}
.crop-handle-t{top: -5px;left: 50%;transform: translateX(-50%);cursor: ns-resize;}
.crop-handle-b{bottom: -5px;left: 50%;transform: translateX(-50%);cursor: ns-resize;}
.crop-handle-l{top: 50%;left: -5px;transform: translateY(-50%);cursor: ew-resize;}
.crop-handle-r{top: 50%;right: -5px;transform: translateY(-50%);cursor: ew-resize;}
.crop-selection{position: absolute;border: 2px dashed #1E90FF;background-color: rgba(30, 144, 255, 0.1);pointer-events: auto;z-index: 100;}
.crop-ruler{position: absolute;background-color: rgba(0, 0, 0, 0.7);color: white;font-size: 10px;padding: 1px 3px;pointer-events: none;z-index: 102;}
/* 标尺刻度样式*/
.ruler-horizontal{position: absolute;height: 15px;left: 0;right: 0;top: -15px;background-color: #f0f0f0;border-bottom: 1px solid #ccc;z-index: 90;}
.ruler-vertical{position: absolute;width: 15px;top: 0;bottom: 0;left: -15px;background-color: #f0f0f0;border-right: 1px solid #ccc;z-index: 90;}
.ruler-marker{position: absolute;background-color: #333;}
.ruler-marker-major{width: 1px;height: 10px;}
.ruler-marker-minor{width: 1px;height: 5px;}
.ruler-label{position: absolute;font-size: 10px;color: #333;transform: translateX(-50%);text-align: center;white-space: nowrap;}
/* 证件照增强选项*/
.enhance-options{display: flex;flex-wrap: wrap;gap: 10px;margin-bottom: 15px;}
.enhance-option{display: flex;align-items: center;font-size: 13px;cursor: pointer;}
.enhance-option input{margin-right: 5px;}
/* 响应式设计*/
@media (max-width: 768px){
.main-content{flex-direction: column;}
.bg-color-option{width: 40px;height: 40px;border-radius: 50%;cursor: pointer;margin: 0 5px;border: 2px solid transparent;}
.sidebar{width: 100%;flex-direction: row;padding: 0;overflow-x: auto;-webkit-overflow-scrolling: touch;}
.menu-item{flex: 0 0 auto;padding: 18px 15px 11px 15px;font-size: 12px;border: none;min-width: 70px;}
.menu-item:hover, .menu-item.active{background-color: #f0f0f0;border: none;}
.menu-icon{display: block;margin-bottom: 5px;font-size: 16px;}  
.member-tabs-gridss {display: none !important;}
.menu-text{font-size: 14px;}
.function-area{width: 100%;}
.preview-area{padding: 10px;}
.preview-area.qsy{order:1;display:none}
.function-area.qsy{order:2;}
.rebtn{display:block}
}
/* Toast消息样式*//* Toast消息样式 - 居中显示*/
.toast-message{position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);padding: 16px 24px;border-radius: 8px;color: white;font-size: 14px;box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);z-index: 2100;display: none;opacity: 0;max-width: 80%;text-align: center;align-items: center;justify-content: center;animation: toastFadeIn 0.3s ease forwards;}
.toast-content{display: flex;align-items: center;gap: 8px;}
.toast-content i{font-size: 18px;}
.toast-info{background-color: rgba(30, 144, 255, 0.95);}
.toast-success{background-color: rgba(76, 175, 80, 0.95);}
.toast-warning{background-color: rgba(255, 193, 7, 0.95);color: #333;}
.toast-error{background-color: rgba(244, 67, 54, 0.95);}
/* 动画效果*/
@keyframes toastFadeIn{from{opacity: 0;transform: translate(-50%, -40%);}
to{opacity: 1;transform: translate(-50%, -50%);}}
@keyframes toastFadeOut{from{opacity: 1;transform: translate(-50%, -50%);}
to{opacity: 0;transform: translate(-50%, -60%);}}
/* 确认对话框样式 - 增强版*/
.confirm-dialog{display: none;position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0, 0, 0, 0.5);z-index: 2000;align-items: center;justify-content: center;animation: fadeIn 0.3s ease;}
.confirm-dialog-content{background-color: white;border-radius: 8px;width: 400px;max-width: 90%;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);transform: translateY(-20px);transition: all 0.3s ease;opacity: 0;}
.confirm-dialog.show .confirm-dialog-content{transform: translateY(0);opacity: 1;}
.confirm-dialog-header{padding: 15px 20px;border-bottom: 1px solid #eee;font-size: 18px;font-weight: bold;display: flex;justify-content: space-between;align-items: center;}
.confirm-dialog-close{background: none;border: none;font-size: 20px;cursor: pointer;color: #999;}
.confirm-dialog-body{padding: 20px;font-size: 16px;line-height: 1.5;}
.confirm-dialog-footer{padding: 15px 20px;border-top: 1px solid #eee;display: flex;justify-content: flex-end;gap: 10px;}
.confirm-dialog-btn{padding: 8px 16px;border-radius: 4px;cursor: pointer;font-size: 14px;transition: all 0.2s;}
.confirm-dialog-cancel{background-color: #f0f0f0;color: #333;border: 1px solid #ddd;}
.confirm-dialog-cancel:hover{background-color: #e0e0e0;}
.confirm-dialog-confirm{background-color: #1E90FF;color: white;border: 1px solid #1C86EE;}
.confirm-dialog-confirm:hover{background-color: #1C86EE;}
@keyframes fadeIn{from{opacity: 0;}
to{opacity: 1;}}
/* 新建画布按钮样式*/
.new-canvas-btn{background-color: #1E90FF;color: white;border: none;padding: 10px 15px;border-radius: 4px;cursor: pointer;font-size: 14px;margin-top: 10px;width: 100%;}
/* 画布尺寸输入框样式*/
.canvas-size-inputs{display: flex;gap: 10px;margin-bottom: 10px;}
.canvas-size-inputs input{flex: 1;padding: 8px;border: 1px solid #ddd;border-radius: 4px;}
/* 画布颜色选项样式*/
.canvas-color-options{display: flex;flex-wrap: wrap;gap: 8px;margin-bottom: 10px;}
.canvas-color-option{width: 30px;height: 30px;border-radius: 4px;cursor: pointer;border: 2px solid transparent;}
.canvas-color-option.selected{border-color: #1E90FF;}
/* 透明背景图案*/
.transparent-bg{background-image: linear-gradient(45deg, #ddd 25%, transparent 25%), linear-gradient(-45deg, #ddd 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ddd 75%), linear-gradient(-45deg, transparent 75%, #ddd 75%);background-size: 20px 20px;background-position: 0 0, 0 10px, 10px -10px, -10px 0px;}
/* 预览上传容器 - 修正版*/
.preview-upload-container{display: flex;flex-direction: column;justify-content: center;align-items: center;width: 95%;height: 95%;margin: 0 auto;}
/* 按钮容器 - 强制横向排列*/
.upload-buttons-container{display: flex !important;flex-direction: row !important;justify-content: center !important;align-items: center !important;gap: 15px;width: auto;margin: 20px 0;}
/* 统一按钮样式 - 强制相同尺寸*/
.upload-btn,
.new-canvas-btn{width: 160px !important;height: 48px !important;padding: 0 15px !important;margin: 0 !important;display: inline-flex !important;align-items: center;justify-content: center;gap: 8px;border: none;border-radius: 6px;cursor: pointer;font-size: 16px;box-shadow: 0 2px 5px rgba(0,0,0,0.2);transition: all 0.3s ease;white-space: nowrap;}
/* 打开图片按钮*/
.upload-btn{background-color: #1E90FF;color: white;}
/* 新建画布按钮*/
.new-canvas-btn{background-color: #4CAF50;color: white;}
/* 移除所有可能干扰的绝对定位*/
.new-canvas-btn[style*="position: absolute"],
.new-canvas-btn[style*="top:"],
.new-canvas-btn[style*="right:"]{position: relative !important;top: auto !important;right: auto !important;}

.color-picker-popup{position: absolute;background: white;border: 1px solid #ddd;border-radius: 4px;padding: 10px;box-shadow: 0 2px 10px rgba(0,0,0,0.2);z-index: 2000;}
.color-picker-popup input[type="color"]{width: 100%;margin-bottom: 10px;}
.color-palette{display: grid;grid-template-columns: repeat(8, 1fr);gap: 5px;margin-top: 10px;}
.color-palette-item{width: 20px;height: 20px;border-radius: 3px;cursor: pointer;border: 1px solid #eee;}
.color-palette-item:hover{transform: scale(1.1);}

.imported-image-container{position: absolute;z-index: 1001;cursor: move;border: 2px dashed #1E90FF;transform-origin: center center;}
.imported-image{width: 100%;height: 100%;display: block;}
.imported-image-handle{position: absolute;width: 12px;height: 12px;background-color: white;border: 2px solid #1E90FF;border-radius: 50%;z-index: 1002;pointer-events: auto;}
.imported-image-handle-nw{top: -5px;left: -5px;cursor: nwse-resize;}
.imported-image-handle-ne{top: -5px;right: -5px;cursor: nesw-resize;}
.imported-image-handle-sw{bottom: -5px;left: -5px;cursor: nesw-resize;}
.imported-image-handle-se{bottom: -5px;right: -5px;cursor: nwse-resize;}
.imported-image-handle-n{top: -5px;left: 50%;margin-left: -5px;cursor: ns-resize;}
.imported-image-handle-s{bottom: -5px;left: 50%;margin-left: -5px;cursor: ns-resize;}
.imported-image-handle-w{top: 50%;left: -5px;margin-top: -5px;cursor: ew-resize;}
.imported-image-handle-e{top: 50%;right: -5px;margin-top: -5px;cursor: ew-resize;}
/* 固定尺寸框样式*/
.fixed-size-frame{border: 2px dashed rgba(255, 0, 0, 0.7) !important;background-color: rgba(255, 255, 255, 0.2);pointer-events: none;z-index: 1000;}
.size-label{position: absolute;bottom: -25px;left: 0;right: 0;text-align: center;color: red;font-size: 12px;background-color: rgba(255, 255, 255, 0.7);padding: 2px 5px;border-radius: 3px;}
/* 手柄样式*/
.resize-handle{position: absolute;width: 10px;height: 10px;background: #1E90FF;border: 1px solid white;border-radius: 50%;z-index: 1100;transform: translate(-50%, -50%);}
.resize-handle-nw{cursor: nwse-resize;left: 0%;top: 0%;}
.resize-handle-ne{cursor: nesw-resize;left: 100%;top: 0%;}
.resize-handle-sw{cursor: nesw-resize;left: 0%;top: 100%;}
.resize-handle-se{cursor: nwse-resize;left: 100%;top: 100%;}
.resize-handle-n{cursor: ns-resize;left: 50%;top: 0%;}
.resize-handle-s{cursor: ns-resize;left: 50%;top: 100%;}
.resize-handle-w{cursor: ew-resize;left: 0%;top: 50%;}
.resize-handle-e{cursor: ew-resize;left: 100%;top: 50%;}

.preview_canvas{max-width: 100%;max-height: 80vh;position: relative;}
.mask-canvas{cursor: none;position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 100;touch-action: none;}
/* 现代画笔调节工具样式*/
.brush-control{display: flex;align-items: center;gap: 12px;margin-top: 8px;background: #f8f9fa;padding: 12px 15px;border-radius: 8px;border: 1px solid #e9ecef;}
.brush-icon{color: #1E90FF;font-size: 16px;}
.brush-icon.small{opacity: 0.7;}
.brush-icon.large{font-size: 20px;}
.brush-slider{flex: 1;height: 6px;-webkit-appearance: none;background: linear-gradient(to right, #1E90FF, #1E90FF) no-repeat #e9ecef;background-size: 50% 100%;border-radius: 10px;outline: none;transition: background 0.3s ease;}
.brush-slider::-webkit-slider-thumb{-webkit-appearance: none;width: 22px;height: 22px;background: white;border: 2px solid #1E90FF;border-radius: 50%;cursor: pointer;box-shadow: 0 2px 6px rgba(30, 144, 255, 0.4);transition: all 0.2s;}
.brush-slider::-webkit-slider-thumb:hover{transform: scale(1.15);box-shadow: 0 3px 8px rgba(30, 144, 255, 0.6);}
.brush-size-value{min-width: 50px;text-align: center;font-size: 14px;font-weight: 600;color: #495057;background: #e9f7fe;padding: 4px 8px;border-radius: 4px;border: 1px solid #d1ecff;}
#mask-canvas{position: absolute;top: 0;left: 0;cursor: crosshair;touch-action: none;-webkit-tap-highlight-color: transparent;user-select: none;}
.preview_canvas{position: relative;display: inline-block;}
.drawing-mode{cursor: crosshair;}
/* Brush Preview Circle*/
.brush-preview{position: absolute;pointer-events: none;transform: translate(-50%, -50%);z-index: 9999;background: rgba(255, 255, 255, 0.7);border: 2px solid #fff;border-radius: 50%;}
/* Mask Controls*/#mask-controls{margin-top: 15px;text-align: center;}
#mask-controls button{margin: 0 5px;}
@media (max-width: 768px){
.preview-container{overflow: visible;touch-action: manipulation;}
}
/* 用户头像样式*/
.user-avatar{width: 32px;height: 32px;border-radius: 50%;margin-left: 10px;margin-bottom: 2px;object-fit: cover;cursor: pointer;box-shadow: 0 2px 5px rgba(0,0,0,0.1);transition: all 0.3s ease;}
.user-avatar:hover{transform: scale(1.1);box-shadow: 0 2px 10px rgba(0,0,0,0.2);}
/* 移除登录按钮的默认样式*/
#login-btn.download-btn{border: none;color: #fff;margin: 0;margin-left: 7px;}
/* 用户信息面板*/
.xdesign-user-info-panel{position: absolute;right: 0;top: calc(100% + 10px);width: 300px;background: #fff;border-radius: 8px;box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);z-index: 1000;opacity: 0;visibility: hidden;transform: translateY(-10px);transition: all 0.3s ease;}
.user-menu-container:hover .xdesign-user-info-panel{opacity: 1;visibility: visible;transform: translateY(0);}
.user-menu-container .xdesign-user-info-panel.on{opacity: 1;visibility: visible;transform: translateY(0);}
.xdesign-user-info-panel__inner{padding: 16px;}
.xdesign-user-info-panel__header{display: flex;align-items: center;padding-bottom: 16px;border-bottom: 1px solid #f0f0f0;}
.xdesign-user-info__avatar{border-radius: 50%;overflow: hidden;margin-right: 12px;}
.xdesign-user-info__avatar-img{width: 100%;height: 100%;object-fit: cover;}
.xdesign-user-info-panel__header-info{flex: 1;}
.xdesign-user-info-panel__header-username{font-size: 14px;font-weight: 500;color: #333;margin-bottom: 4px;}
.xdesign-user-info-panel__header-uid{font-size: 12px;color: #999;display: flex;align-items: center;}
.xdesign-user-info-panel__header-copy{margin-left: 8px;color: #1E90FF;cursor: pointer;}
.xdesign-user-info-panel__header-arrow{color: #999;}
.xdesign-user-info-panel__vip{margin: 16px 0;padding: 16px;border-radius: 8px;}
.xdesign-user-info-panel__vip-empty-title{color: var(--content-card-svip-personal-primary, #55230b);text-align: center;font-size: 14px;font-style: normal;font-weight: 600;line-height: 20px;margin-bottom: 4px;}
.xdesign-user-info-panel__balance{margin-top: 20px;position: relative;display: flex;width: 100%;align-items: center;height: 36px;background: var(--background-card-svip-mask-bottom, linear-gradient(180deg, rgba(255, 253, 251, .8) 0%, rgba(255, 255, 255, 0) 100%));}
.xdesign-user-info-panel__balance-item .amount{flex: 1;text-align: right;padding: 0 0 0 4px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.xdesign-user-info-panel__vip-empty-description{color: var(--content-card-svip-personal-secondary, rgba(85, 35, 11, .8));text-align: center;font-size: 13px;font-style: normal;font-weight: 400;line-height: 25px;}
.xdesign-user-info-panel__vip-empty-open{display: flex;height: 34px;width: 100%;justify-content: center;align-items: center;border-radius: 8px;background: var(--background-card-svip-personal-btn, #292523);color: var(--content-card-svip-personal-btn, #ffc8a3);text-align: center;font-size: 14px;font-style: normal;font-weight: 600;line-height: 20px;margin: 14px auto 0;cursor: pointer;}
.xdesign-user-info-panel__balance{position: relative;display: flex;width: 100%;align-items: center;height: 36px;background: var(--background-card-svip-mask-bottom, linear-gradient(180deg, rgba(255, 253, 251, .8) 0%, rgba(255, 255, 255, 0) 100%));}
.xdesign-user-info-panel__balance-item{flex: 1;padding: 0 14px;display: flex;justify-content: space-between;align-items: center;color: var(--content-web-primary, #17181a);font-size: 12px;font-style: normal;font-weight: 500;line-height: 16px;box-sizing: border-box;position: relative;}
.xdesign-user-info-panel__balance-item.clickable{cursor: pointer;}
.xdesign-user-info-panel__balance-name{display: flex;align-items: center;font-size: 14px;color: #666;}
.xdesign-user-info-panel__balance-name img{width: 16px;height: 16px;margin-right: 8px;}
.amount{font-size: 14px;color: #333;font-weight: 500;}
.xdesign-user-info-panel__list{border-top: 1px solid #f0f0f0;padding-top: 16px;}
.xdesign-user-info-panel__list-item{display: flex;width: 100%;justify-content: space-between;align-items: center;height: 36px;cursor: pointer;}
.xdesign-user-info-panel__list-label{color: var(--content-system-primary, #1c1d1f);font-size: 15px;font-style: normal;font-weight: 500;line-height: 20px;display: flex;align-items: center;}
.xdesign-user-info-panel__theme{display: flex;gap: 8px;}
.xdesign-user-info-panel__theme-item{padding: 4px 12px;border-radius: 4px;background: #f5f5f5;color: #666;font-size: 15px;cursor: pointer;}
.xdesign-user-info-panel__theme-active{background: #1E90FF;color: #fff;}
.xdesign-user-info-panel__footer{padding-top: 16px;border-top: 1px solid #f0f0f0;text-align: center;color: #666;font-size: 15px;cursor: pointer;}
.xdesign-user-info-panel__footer:hover{color: #FF4D4F;}
/* 小箭头*/
.user-menu-container::after{content: "";position: absolute;bottom: -10px;right: 15px;width: 0;height: 0;border-left: 10px solid transparent;border-right: 10px solid transparent;border-bottom: 10px solid white;opacity: 0;transition: opacity 0.3s;filter: drop-shadow(0 -2px 2px rgba(0,0,0,0.1));}
.user-menu-container:hover::after{opacity: 1;}
/* 用户菜单容器*/
.user-menu-container{position: relative;display: inline-block;}
/* 下拉菜单*/
.user-dropdown{display: none;position: absolute;right: 0;top: 100%;background-color: white;min-width: 120px;box-shadow: 0 8px 16px rgba(0,0,0,0.1);border-radius: 4px;z-index: 1000;overflow: hidden;}
.user-menu-container:hover .user-dropdown{display: block;}
/* 下拉菜单项*/
.dropdown-item{padding: 10px 15px;cursor: pointer;font-size: 14px;color: #333;transition: background-color 0.2s;}
.dropdown-item:hover{background-color: #f5f5f5;color: #1E90FF;}
/* 添加小箭头*/
.user-dropdown::before{content: "";position: absolute;top: -5px;right: 15px;width: 0;height: 0;border-left: 5px solid transparent;border-right: 5px solid transparent;border-bottom: 5px solid white;}
/* 用户信息编辑弹窗样式*/
.user-edit-modal{display: none;position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0,0,0,0.5);z-index: 2000;align-items: center;justify-content: center;}
.user-edit-content{background-color: white;padding: 25px;border-radius: 8px;width: 450px;max-width: 90%;box-shadow: 0 4px 20px rgba(0,0,0,0.15);}
.user-edit-title{font-size: 18px;margin-bottom: 20px;text-align: center;color: #333;font-weight: bold;}
.user-edit-avatar{text-align: center;margin-bottom: 20px;}
.user-edit-avatar-img{width: 100px;height: 100px;border-radius: 50%;object-fit: cover;border: 2px solid #f0f0f0;cursor: pointer;transition: all 0.3s;}
.user-edit-avatar-img:hover{border-color: #1E90FF;}
.user-edit-avatar-upload{display: none;}
.user-edit-form-group{margin-bottom: 15px;}
.user-edit-form-group label{display: block;margin-bottom: 8px;font-size: 14px;color: #555;font-weight: 500;}
.user-edit-form-control{width: 100%;padding: 10px 15px;border: 1px solid #ddd;border-radius: 4px;font-size: 14px;transition: border-color 0.3s;}
.user-edit-form-control:focus{border-color: #1E90FF;outline: none;}
.user-edit-buttons{display: flex;justify-content: space-between;margin-top: 25px;}
.user-edit-btn{padding: 10px 20px;border-radius: 4px;cursor: pointer;font-size: 14px;transition: all 0.3s;}
.user-edit-btn-cancel{background-color: #f5f5f5;color: #666;border: 1px solid #ddd;}
.user-edit-btn-cancel:hover{background-color: #e0e0e0;}
.user-edit-btn-save{background-color: #1E90FF;color: white;border: none;}
.user-edit-btn-save:hover{background-color: #1C86EE;}
.user-edit-avatar-text{text-align: center;margin-top: 5px;color: #1E90FF;font-size: 13px;cursor: pointer;}
.user-edit-avatar-text:hover{text-decoration: underline;}
.editphone{position:relative;}
.validate-control{display: flex;gap: 15px;}
.yzminput{width:80%}
.editphonebtn{position: absolute;height: 30px;border: 0;background: #292929;padding: 0 10px;cursor: pointer;top: 4px;right: 4px;color: #fff;font-size: 12px;border-radius: 3px;}
.record-modal{display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);z-index: 1000;justify-content: center;align-items: center;}
.record-modal-content{width: 80%;max-width: 600px;background-color: #fff;border-radius: 12px;overflow: hidden;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);max-height: 80vh;display: flex;flex-direction: column;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.record-modal-header{padding: 16px 24px;border-bottom: 1px solid #f0f0f0;display: flex;justify-content: space-between;align-items: center;}
.record-modal-title{font-size: 18px;font-weight: 500;color: #333;}
.record-modal-close{font-size: 20px;cursor: pointer;color: #000000;position: absolute;right: 10px;background: #e0e0e0;height: 30px;width: 30px;text-align: center;line-height: 30px;top: 10px;border-radius: 50px;}
.record-modal-body{flex: 1;overflow: hidden;padding: 0;}
.record-tabs{display: flex;justify-content: center;background-color: #f5f5f5;padding: 8px;margin: 16px 16px 0;border-radius: 8px;}
.record-tab{padding: 8px 16px;cursor: pointer;font-size: 14px;color: #666;border-radius: 6px;margin: 0 4px;border: none;background: transparent;transition: all 0.3s;}
.record-tab.active{color: #333;font-weight: 500;background-color: #fff;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}
.record-tab-content{display: none;padding: 16px;overflow-y: auto;height: 380px;}
.record-tab-content.active{display: block;}
.record-item{padding: 12px 0;border-bottom: 1px solid #f5f5f5;display: flex;justify-content: space-between;}
.record-item-main{flex: 1;}
.record-item-title{font-size: 14px;color: #333;margin-bottom: 4px;}
.record-item-time{font-size: 12px;color: #999;}
.record-item-amount{font-size: 14px;text-align: right;}
.record-empty{padding: 40px 0;text-align: center;color: #999;}
.record-date-picker{padding: 16px;border-bottom: 1px solid #f0f0f0;}
.confirm-dialog, .login-modal{z-index: 1001;}
.logs-data{width: 137px;padding: 8px 12px;border: 1px solid #ddd;border-radius: 4px;font-size: 14px;}
.upload-preview-container{position: relative;margin-bottom: 15px;border: 1px dashed #ddd;padding: 10px;border-radius: 4px;display: none;}
.upload-preview-container.show{display: block;}
.upload-preview-close{position: absolute;top: 5px;right: 5px;background: #ff4444;color: white;border: none;width: 20px;height: 20px;border-radius: 50%;display: flex;align-items: center;justify-content: center;cursor: pointer;}
.upload-preview-image{max-width: 100%;max-height: 150px;display: block;margin: 0 auto;}
.member-tabs-grid{display: flex;flex-direction: column;gap: 8px;margin-bottom: 15px;}
.member-tabs-gridss{display: flex;flex-direction: column;gap: 8px;margin-bottom: 15px;}
.member-tab-row{display: flex;gap: 8px;}
.member-tab-imgrow{gap: 5px;margin: 0;flex-wrap: wrap;justify-content: normal;}
.member-tab-grid{flex: 1;padding: 10px 15px;cursor: pointer;font-size: 14px;background-color: #f5f5f5;color: #333;border-radius: 4px;text-align: center;transition: all 0.3s;}
.member-tab-grid:hover{background-color: #e0e0e0;}
.member-tab-grid.active{background-color: #1E90FF;color: white;}
.logs .record-item{gap: 5px;flex-wrap: wrap;margin: 0;justify-content: normal;}
.record-item img{transition: all 0.3s ease;cursor: pointer;}
.record-item img:hover{transform: scale(1.02);box-shadow: 0 2px 8px rgba(0,0,0,0.2);}
.logs .record-item img{width: calc(50% - 5px);border-radius: 4px;border: 1px solid #ddd;}
#zhengjianzhao-image-list{display:none}
@media (max-width: 768px){
.vip-popup{flex-direction: column;height: auto;max-width: 100%;min-width: 96%;}
.left-panel{width: 100%;order:2}
.right-panel{padding:10px;order:1}
.pricing-options{gap: 10px;}
.pricing-option{width: 100%;padding: 15px 5px;}
.pc-payment{display: none;}
.mobile-payment{display: block;}

.user-menu-container:hover .xdesign-user-info-panel{opacity: 0;visibility: hidden;transform: translateY(-10px);}
.user-menu-container:hover .xdesign-user-info-panel.on{opacity: 1;visibility: visible;transform: translateY(0);}
.user-menu-container .xdesign-user-info-panel.on::after{opacity:1}
.user-menu-container.on:hover::after{opacity: 1;}
.user-menu-container:hover::after{opacity: 0;}
} 
@media (min-width: 769px){
.mobile-payment{display: none;}
}

.menuList {
  background: transparent;
  padding: 12px 0;
}

.menuList .clearfix {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.menuList .clearfix li {
  margin: 0 15px;
}

.menuList .clearfix li a {
  color: #000;
  text-decoration: none;
  background: transparent;
  padding: 8px 12px;
  font-size: 16px;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.menuList .clearfix li a:hover {
  color: #333;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

@media (max-width: 768px) {
  .menuList .clearfix {
    flex-direction: column;
    align-items: center;
  }
  .menuList .clearfix li {
    margin: 8px 0;
  }
}
/* 历史记录基础样式 */
.loglist {
    display: block;
    padding: 10px;
    box-sizing: border-box;
    width:100%;
    max-width: 768px;
    margin:0 auto;
    text-align: center;
    position: relative;
}
.morlog{
    width:20px;
}
.morlog svg{height:80px}
.morlog i{background: #1e90ff;color:#fff}
.log_item_list{flex:1}
.log_flex{
    display:flex;align-items: center;
}
.history-title {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px 0;
  
}

.history-title .text {
  padding: 0 15px;
  font-size: 18px;
  color: #333;
  font-weight: bold;
  color:#1e90ff;
}

.history-title .line {
  flex: 1;
  height: 1px;
  background-color: #ccc;
}
.no_item{width: 100%;
    text-align: center;}
.log_item {
    /* 在桌面端每行显示5张图片 */
    width: calc(20% - 10px); /* 减去gap的宽度 */
    aspect-ratio: 1/1; /* 保持图片正方形 */
    overflow: hidden;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    cursor: pointer;
    display: inline-block;
    margin: 0 5px;
}

.log_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.log_img:hover {
    transform: scale(1.05);
}

/* 移动端响应式设计 */
@media (max-width: 768px) {
    .loglist{display:none}
    .log_item {
        /* 在移动端每行显示3张图片 */
        width: calc(33.33% - 10px);
    }
}

@media (max-width: 480px) {
    .log_item {
        /* 在更小的移动设备上每行显示2张图片 */
        width: calc(50% - 10px);
    }
}

.hide{display:none}