@import "//at.alicdn.com/t/c/font_5030783_danfyrd0teh.css";
:root { text-autospace: normal; }

a{text-decoration:none;}
html,body,form,div,h1,h2,a{-webkit-text-size-adjust:none;-webkit-font-smoothing: antialiased;}
body{padding:0;margin:0px;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif,'新宋体';background:#fff;font-size:14px;}
.m{-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;transition:all .3s ease-in-out;}
.s{box-shadow:1px 1px 2px 0 rgba(0,0,0,0.1) ,-1px -1px 0px 0 rgba(0,0,0,0.05);}
*{box-sizing:border-box;position:relative;}
input{border:none;outline:none;}

.hide{display:none !important;}

switch x{position:absolute;z-index:1;top:2px;left:2px;width:24px !important;height:24px !important;-webkit-transition:.2s ease-in-out;
transition:.2s ease-in-out;-webkit-transition-property:-webkit-transform,width,left;transition-property:transform,width,left;
border-radius:16px;background-color:#fff;background-clip:padding-box;-webkit-box-shadow:0 2px 5px rgba(0,0,0,.4);
box-shadow:0 2px 5px rgba(0,0,0,.4)}
switch{float:left;width:60px;height:32px;position:relative;background:#fff;border-radius:20px;
border:#ddd 2px solid;cursor:pointer;margin-top:2px;}
.switch_select,.switch_true{border:#007bff 2px solid !important;background:#007bff;}
.switch_select x,.switch_true x{right:2px !important;left:auto;}

img_prevew{position:fixed;width:100%;padding-top:10vh;padding-bottom:10vh;height:100vh;left:0;top:0;background:rgba(0,0,0,.75);z-index:10000;display:flex;justify-content:center;}
img_prevew img{float:left;height:100%;}

.br5{border-radius: 5px;}
.br10{border-radius: 10px;}
.br50{border-radius: 50%;}
.br15{border-radius: 15px;}
._bb{background: #007bff  !important;}
._ib{background: #6610f2  !important;}
._pb{background: #e83e8c  !important;}
._rb{background: #dc3545 !important;}
._ob{background: #fd7e14 !important;}
._yb{background: #ffc107 !important;}
._gb{background: #28a745 !important;}
._cb{background: #17a2b8 !important;}
._tb{background: #20c997 !important;}
._wb{background: #fff !important;}
._gayb{background: #6c757d !important;}
._sb{background: #28a745 !important;}
._db{background: #dc3545 !important;}

._bc{color: #007bff !important;}
._ic{color: #6610f2 !important;}
._pc{color: #e83e8c !important;}
._rc{color: #dc3545 !important;}
._oc{color: #fd7e14 !important;}
._yc{color: #ffc107 !important;}
._gc{color: #28a745 !important;}
._cc{color: #17a2b8 !important;}
._tc{color: #20c997 !important;}
._wc{color: #fff !important;}
._gayc{color: #6c757d !important;}
._sc{color: #28a745 !important;}
._dc{color: #dc3545 !important;}

.bgt{background-image: linear-gradient(to top left ,rgba(255,255,255,.1),rgba(255,255,255,0) 40%,rgba(0,0,0,.12) 51%,rgba(0,0,0,.04))!important;}

.btt{background-image: linear-gradient(to bottom,rgba(255,255,255,.3),rgba(255,255,255,0) 50%,rgba(0,0,0,.12) 51%,rgba(0,0,0,.04))!important}

.sm{box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);}
.shadow{box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);}
.sd{box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);}
.sl{box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);}
.sxl{box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);}
.s2xl{box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);}
.sinner{box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);}


.popup {
            position: fixed;
            top: 50vh;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.7);
            background: white;
            padding: 20px;
            border-radius: 15px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
            width: 500px;
            max-width: 90%;
            z-index: 1000;
            opacity: 0;
            transition: all 0.3s ease;
        }
        .popup.show {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }
        .popup-header {float:left;width:100%;
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 15px;
            color: #333;
        }
        .popup-header icon{position:absolute;right:0px;font-size:22px !important;top:0px;cursor: pointer;}
        .popup-header icon:hover{color:#0056b3;}
        .popup-content {
            font-size: 15px;
            color: #666;
            line-height: 1.5;
        }

.cbt{float:left;
            margin-top: 20px;
            padding: 10px 30px;
            background: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background 0.3s;
        }

        .cbt:hover {
            background: #0056b3;
        }
        
 .alert-box {
            position: fixed;
            top: -100px;
            left: 50%;
            transform: translateX(-50%);
            padding: 15px 25px;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            min-width: 200px;
            max-width: 400px;
            display: flex;
            align-items: center;
            gap: 10px;
            z-index: 999999;
            opacity: 0;
            transition: all 0.5s ease-in-out;
        }

        .alert-box.show {
            top: 20px;
            opacity: 1;
        }

        .alert-icon {
            width: 30px;
            height: 30px;
            fill: white; 
        }

        .alert-message {
            color: white;
            font-family: Arial, sans-serif;
            font-size: 16px;
        }
        
 .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 9999;
            opacity: 0;
            transition: opacity 0.3s ease;
            display: none;
            filter: blur(2px) brightness(100%);
        }

        /* 弹窗容器 */
        .side-modal {
            position: fixed;
            right: -800px; /* 初始位置在左侧外 */
            top: 0;
            width: 400px;
            height: 100%;
            background: #fff;
            z-index: 10000;
            box-shadow: 2px 0 15px rgba(0, 0, 0, 0.3);
            display: flex;
            flex-direction: column;
            transition: left 0.3s ease;
        }

        /* 标题栏 */
        .modal-header {
            background: #007bff;
            color: white;
            padding:10px 15px 10px 15px;
            
            font-family: Arial, sans-serif;
            font-size: 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        /* 关闭按钮 */
        .modal-close {
            background: none;
            border: none;
            color: white;
            font-size: 30px;
            cursor: pointer;
            padding: 0 5px;
        }

        .modal-close:hover {
            color: #ff4444;
        }

        /* 内容区域 */
        .modal-content {
            flex: 1;
            padding: 15px;
            overflow-y: auto;
            font-family: Arial, sans-serif;
        }

        /* 显示时的状态 */
        .modal-overlay.show {
            opacity: 1;
            display: block;
        }

        .side-modal.show {
            right: 0;
        }
    .preview-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,.5);
            z-index: 99999;
            opacity: 0;
            transition: opacity 0.3s ease;
            display: none;
        }

        /* 预览窗口 */
        .preview-modal {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            max-width: 80%;
            max-height: 80%;
            background: rgba(255, 255, 255, 1);
            border-radius: 20px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
            z-index: 100000;
            padding: 20px;
            opacity: 0;
            transition: opacity 0.3s ease;
            display: none;
        }

        /* 显示状态 */
        .preview-overlay.show, .preview-modal.show {
            opacity: 1;
            display: block;
        }

        /* 图片容器 */
        .preview-image {
            max-width: 100%;
            height: 70vh;
            display: block;
            margin: 0 auto;
            
        }

        /* 导航箭头 */
        .nav-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(0, 0, 0, 0.3);
            color: white;
            border: none;
            width:50px;height:50px;
            cursor: pointer;
            font-size: 20px;
            border-radius: 50%;
            display:flex;justify-content:center;align-items:center;
        }
.nav-arrow svg{width:25px;height:25px;}
        .nav-arrow.left { left: 10px; }
        .nav-arrow.right { right: 10px; }
        .nav-arrow:hover { background: rgba(0, 0, 0, 0.8); }

        /* 图片序列按钮 */
        .image-dots {
            text-align: center;
            margin-top: 15px;
        }

        .image-dot {
            display: inline-block;
            width: 12px;
            height: 12px;
            background: #ccc;
            border-radius: 50%;
            margin: 0 5px;
            cursor: pointer;
        }

        .image-dot.active {
            background: #007bff;
        }
        
 .custom-confirm-modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 99999;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    /* 遮罩层 */
    .custom-confirm-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(2px);
    }

    /* 内容区域 */
    .custom-confirm-content {
      position: relative;
      background: #fff;
      padding: 20px;
      border-radius:15px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
      width: 320px;
      max-width: 90%;
      text-align: center;
      animation: fadeIn 0.3s ease;
      top:-80px;
    }

    /* 消息文本 */
    .custom-confirm-content p {
      margin: 0 0 20px;
      font-size: 16px;
      color: #333;
    }

    /* 按钮容器 */
    .custom-confirm-buttons {
      display: flex;
      justify-content: space-around;
    }

    /* 按钮样式 */
    .custom-confirm-btn {
      padding: 8px 20px;
      border: none;
      border-radius: 6px;
      font-size: 14px;
      cursor: pointer;
      transition: background 0.2s ease;
    }

    .custom-confirm-btn.confirm {
      background: #007bff;
      color: #fff;
    }

    .custom-confirm-btn.confirm:hover,
    .custom-confirm-btn.confirm:focus {
      background: #007bff;
      outline: none; /* 移除默认焦点边框 */
    }

    .custom-confirm-btn.cancel {
      background: #e0e0e0;
      color: #333;
    }

    .custom-confirm-btn.cancel:hover,
    .custom-confirm-btn.cancel:focus {
      background: #c0c0c0;
      outline: none;
    }

    /* 动画效果 */
    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(-20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    
    
    
.notification-container {
            position: fixed;
            bottom: 20px;
            right: 30px;
            width: 360px;
            z-index: 100000;
        }

        .notification {
            padding: 15px;
            margin-bottom: 10px;
            border-radius: 8px;
            color: white;
            position: relative;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            opacity: 0;
        }

        .notification.success {
            background-color: #28a745;
        }

        .notification.error {
            background-color: #dc3545;
        }

        .notification.warn {
            background-color: #ffc107;
            color: #fff;
        }

        .notification-icon {
            margin-right: 10px;
            font-size: 16px;
        }

        .notification-close {
            position: absolute;
            right: 10px;
            top: 10px;
            cursor: pointer;
            color: inherit;
            opacity: 0.7;
        }

        .notification-close:hover {
            opacity: 1;
        }
 .upload-window {
            width: 450px;
            background: white;
            border-radius: 20px;
            padding: 20px;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
            z-index: 99999;
            transition: all 0.3s ease;
            opacity: 0;
        }

        .upload-window.visible {
            opacity: 1;
        }

        .upload-window.minimized {
            width: 250px;
            height: 50px;
            top: auto;
            bottom: 20px;
            left: auto;
            right: 20px;
            transform: none;
            overflow: hidden;
        }
.upload-window.minimized h3{top:-6px}
        .window-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .window-header h3 {
            margin: 0;
            color: #333;
        }

        .minimize-btn {
            cursor: pointer;
            color: #666;
            font-size:18px;
            transition: color 0.2s;top:-5px;
        }
.minimize-btn i{font-size:24px !important;margin-left:5px;}
        .minimize-btn:hover {
            color: #333;
        }

        .drag-area {
            border: 2px dashed #d1d5db;
            height: 120px;
            border-radius:15px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f9fafb;
            color: #6b7280;
            transition: all 0.2s;
            cursor: pointer;
        }

        .drag-area.dragover {
            background: #e5e7eb;
            border-color: #9ca3af;
            color: #374151;
        }

        .file-list {
            max-height: 200px;
            overflow-y: auto;
            margin: 15px 0;
            padding: 10px;
            background: #f9fafb;
            border-radius: 5px;
        }

        .file-item {
            display: flex;
            align-items: center;
            padding: 8px;
            padding-top:10px;padding-bottom:10px;
            border-radius: 5px;
            background: white;
            margin-bottom: 5px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            transition: all 0.3s;
            font-size:13px;
        }

        .file-item.uploading {
            opacity: 0.7;
        }

        .file-item.completed {
            background: #ecfdf5;
        }

        .file-item.failed {
            background: #fee2e2;
        }

        .file-icon {
            margin-right: 10px;
            color: #6b7280;
        }

        .file-status {
            margin-left: auto;
            font-size: 12px;
            color: #666;
        }

        #startUpload {
            width: 100%;
            padding: 10px;
            background: #3b82f6;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background 0.2s;
        }

        #startUpload:hover {
            background: #2563eb;
        }

        #openUpload {
            padding: 10px 20px;
            background: #10b981;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background 0.2s;
        }

        #openUpload:hover {
            background: #059669;
        }
        
        
    login_box{position:fixed;width:100%;height:100vh;background:rgba(0,0,0,.3);z-index:10000;top:0;left:0;display:flex;justify-content:center;align-items:center;}
login_box inbox{float:left;width:400px;background:#fff;border-radius:25px;padding:10px;z-index:100;margin-top:-100px;min-height:300px;
box-shadow:0px 0px 5px 1px rgba(0,0,0,0.2);padding-left:30px;padding-right:30px;padding-bottom:80px;overflow:hidden;}
login_box hn{float:left;width:100%;height:50px;line-height:50px;margin-bottom:10px;border-bottom:1px solid #eee;font-size:18px;font-weight:bold;text-align:center;}
login_box input{float:left;width:100%;height:45px;line-height:45px;margin-top:10px;border:1px solid #ccc;border-radius:5px;box-sizing:border-box;padding-left:10px;padding-right:10px;}
login_box hn a{position:absolute;font-size:24px !important;right:0;font-weight:normal;color:#666;top:-10px;right:-10px}
login_box hn a:hover{color:crimson;cursor: pointer;}
login_box bt{float:left;width:100%;height:45px;line-height:45px;margin-top:15px;border-radius:5px;text-align:center;font-size:17px;cursor: pointer;}

login_box login_bottom{position:absolute;width:100%;bottom:0;height:60px;line-height:60px;background:#eee;left:0;}
login_box login_bottom a{text-align:center;font-size:14px;width:100%;float:left;cursor: pointer;}    
        
l{float:left;width:100%;margin-bottom:10px;min-height:30px;padding-left:80px;}
l input{float:left;width:100%;height:30px;line-height:30px;font-size:12px;box-sizing:border-box;}
l text{position:absolute;left:0;line-height:30px;font-size:12px;}
l help{float:left;width:100%;font-size:11px;line-height:16px;color:#999;margin-top:3px;}
l bt{float:left;height:36px;line-height:36px;padding-left:20px;font-size:12px;padding-right:20px;
margin-right:10px;background:#eee;font-size:12px;cursor: pointer;}
l bt:hover{background:#000 !important;color:#fff;}
l textarea{float:left;width:100%;outline:none;border:1px solid #eee;height:100px;}