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

 body {
     font: 12px/150% Arial, "Microsoft YaHei", "宋体";
     color: #333;
     background-color: #f7f7f7;
 }

 img {
     border: 0;
     vertical-align: middle;
 }

 em,
 i {
     font-style: normal;
 }

 ins {
     text-decoration: none;
 }

 ul,
 li,
 ol,
 dt,
 dd,
 dl {
     list-style: none;
     outline: none;
 }

 input,
 button,
 select,
 textarea {
     outline: 0;
 }
/* ------- 通用滚动条样式 ------ */
.divScrollbar {
    overflow: hidden;
}

/* 自定义滚动条样式 */
.divScrollbar::-webkit-scrollbar {
    width: 6px;
    /* 滚动条宽度 */
    height: 6px;
}

.divScrollbar::-webkit-scrollbar-track {
    background-color: #FFFFFF;
    /* 轨道背景颜色 */
    cursor: pointer;
}

.divScrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .3);
    /* 滚动条拇指颜色 */
    border-radius: 3px;
    /* 滚动条拇指圆角 */
}

.divScrollbar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, .5);
    /* 鼠标悬停时滚动条拇指颜色 */
}
 .container {
     width: 540px;
     height: 600px;
     margin: 0px auto;
     /* background-color: #fff; */
     padding: 40px 0px; 
     /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */
 }

 .feedbackHeader {
     margin-bottom: 30px;
     display: flex;
 }

 .feedbackHeader h1 {
     font-size: 26px;
     font-weight: bold;
     color: #333;
     line-height: 48px;
     background: linear-gradient(90deg, #2e50f7 0%, #f738c0 60%, #f44a4c 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }

 .feedbackHeader p {
     font-size: 14px;   
     color: #666;
     font-style: italic;
     margin-left: 10px;

 }
  .feedbackHeader p span { display: block;margin-top: 18px;line-height: 20px; }

 .form-group {
     margin-bottom: 15px;
 }
 .upload-item { margin-bottom: 0px;}

 .form-group label {
     display: block;
     margin-bottom: 8px;
     font-weight: 500; 
 }

 .form-group label.required::after {
     content: ' *';
     color: #ff5a00;
 }

 .form-group textarea {
     width: 100%;
     padding: 10px 20px;
     border: 1px solid #d9d9d9;
     border-radius: 4px;
     resize: vertical;
     height: 90px;
     font-size: 14px;
     font-family: inherit;
 }

 .form-group textarea:focus {
     outline: none;
     border-color: #ff5a00;
     box-shadow: 0 0 0 2px rgba(255, 90, 0, 0.2);
 }


 .upload-area {
     border: 2px dashed #d9d9d9;
     border-radius: 4px;
     padding: 20px 20px;
     height: 90px;
     text-align: center;
     cursor: pointer;
     transition: all 0.3s;
     background-color: #Fff;
 }

 .upload-area:hover {
     border-color: #ff5a00;
     background-color: #ffefe8;
 }

 .upload-area .upload-icon {
     font-size: 24px;
     color: #999;
     margin-bottom: 12px;
 }

 .upload-area p {
     color: #666;
     font-size: 14px;
 }

 .upload-files {
     margin-top: 16px;
     display: flex;
     flex-wrap: wrap;
     gap: 12px;
 }

 .file-item {
     display: inline-block;
     margin-right: 12px;
     margin-bottom: 12px;
     position: relative;
     border: 1px solid #d9d9d9;
     padding: 5px;
     background-color: #Fff;
     border-radius: 4px;
 }

 .file-item img {
     width: 80px;
     height: 80px;
     object-fit: cover;
     border-radius: 4px;

 }

 .file-item .file-remove {
     position: absolute;
     top: -8px;
     right: -8px;
     color: #fff;
     border-radius: 50%;
     width: 18px;
     height: 18px;
     text-align: center;
     line-height: 20px;
     font-size: 12px;
     cursor: pointer;
     background: #ff5a00 url(../images/close.png) no-repeat center center;
     background-size: 12px 12px;
 }

 .file-remove:hover {
     background-color: #f56c6c;
 }


 .submit-btn {
     display: block;
     width: 100%;
     padding: 12px;
     background-color: #ff5a00;
     color: white;
     border: none;
     border-radius: 4px;
     font-size: 16px;
     font-weight: 500;
     cursor: pointer;
     transition: background-color 0.3s;
 }

 .submit-btn:hover {
     background: linear-gradient(90deg, #ff5a00 0%, #f2923d 100%);
 }

 .submit-btn:disabled {
     background-color: #d9d9d9;
     cursor: not-allowed;
 }

 .error-message {
     color: #ff5a00;
     font-size: 12px;
     margin-top: 4px;
     display: none;
 }

 .success-message {
     color: #52c41a;
     font-size: 14px;
     margin-top: 16px;
     text-align: center;
 }

 .problem-types {
     display: flex;
     flex-wrap: wrap;
     gap: 6px;
     margin-bottom: 8px;
 }

 .type-option {
     display: flex;
     align-items: center;
     padding: 8px 16px;
     border: 1px solid #d9d9d9;
     border-radius: 4px;
     cursor: pointer;
     transition: all 0.3s;
     font-size: 14px;
     background-color: #fff;
 }

 .type-option:hover {
     border-color: #ff5a00;
     background-color: #ffefe8;
 }

 input:focus {
     background-color: #fff !important;
 }

 .type-option input[type="radio"] {
     display: none;
 }

 .type-option input[type="radio"]:checked+span {
     color: #ff5a00;
     font-weight: 500;
 }

 /* .type-option input[type="radio"]:checked+span::before {
        content: '';
        display: inline-block;
        width: 8px;
        height: 8px;
        background-color: #ff5a00;
        border-radius: 50%;
        margin-right: 8px;
    } */



 /* 修复选中状态时label的样式 */
 .type-option:has(input[type="radio"]:checked) {
     border-color: #ff5a00;
     background-color: #ffefe8;
     box-shadow: 0 0 0 2px rgba(255, 90, 0, 0.2);
 }

.contact-item {
     display: flex;
    align-items: center;
 }
 .contact-item label { 
    width: 70px; margin-bottom: 0px;}

 .contact-item input {
     flex: 1;
    padding:10px 12px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
 }

 .contact-item input:focus {
     outline: none;
     border-color: #ff5a00;
     box-shadow: 0 0 0 2px rgba(255, 90, 0, 0.2);

 }

 /* 添加文件按钮样式 */
 .add-file-item {
     display: inline-block;
     margin-right: 12px;
     margin-bottom: 12px;
     width: 90px;
     height: 90px;
     border: 2px dashed #d9d9d9;
     border-radius: 4px;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: all 0.3s;
     background-color: #Fff;
 }

 .add-file-item:hover {
     border-color: #ff5a00;
     background-color: #ffefe8;
 }

 .add-file-icon {
     font-size: 24px;
     color: #999;
 }

 .add-file-item:hover .add-file-icon {
     color: #ff5a00;
 }


 /* 模态框背景 */
 .showFailedModal {
     /* 默认隐藏 */
     position: fixed;
     z-index: 1;
     left: 0;
     top: -100px;
     width: 100%;
     height: 100px;
     /* height: 100%; */
     /* background-color: rgba(0, 0, 0, 0.5); */
     transition: top 0.5s ease-out;
     /* 动画效果 */
 }

 /* 显示模态框时的样式 */
 .showFailedModal.show {
     top: 80px;
     /* 移动到视窗内 */
 }
 

 /* 模态框内容样式 */
 .Failecontent {
     background-color: #fff;
     width: 240px;
     height: 42px;
     line-height: 24px;
     margin: 0px auto;
     padding: 8px 30px;
     border-radius: 3px;
     position: relative;
     text-align: center;
     box-shadow: 0 0px 8px 2px rgba(0, 0, 0, 0.1);
     color: #f56c6c;
 }

 .Failecontent p ins {
     fill: #f56c6c;
     vertical-align: middle;
     margin-right: 5px;
 }

 .Failecontent p ins svg {
     margin-top: 2px;
 }

 /* 关闭按钮样式 */
 .showFailedModal .close-btn {
     right: 10px;
     top: 9px;
     display: flex;
     width: 20px; height: 20px; 
    align-items: center;
    justify-content: center;       
    }
    
 .showFailedModal .close-btn svg {
    fill: #999;
 }
  .showFailedModal .close-btn:hover svg {
     fill: #f56c6c;
 }
 /* 成功弹层样式 */
 .applytrialModal {
     /* 默认隐藏 */
     display: none;
     position: fixed;
     z-index: 1000;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.5);
 }

 /* 弹层内容样式 */
 .modal-content {
     background-color: #fff;
     width: 400px;
     margin: 150px auto;
     padding: 30px;
     border-radius: 8px;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
     position: relative;
 }

 /* 关闭按钮样式 */
 .close-btn {
     position: absolute;
     right: 15px;
     top: 15px;
     cursor: pointer;
     color: #999;
 }

 .close-btn:hover {
     color: #333;
 }

 /* 弹层内容样式 */
 .modal-body {
     text-align: center;
     margin: 20px 0;
 }

 .modalSucuss {
     margin-bottom: 20px;
 }

 .modalSucuss img {
     width: 150px;
 }

 .modal-body p {
     font-size: 16px; 
 }

 /* 弹层底部样式 */
 .modal-footer {
     text-align: center;
     margin-top: 20px;
 }

 .btn {
     padding: 8px 24px;
     border: none;
     border-radius: 4px;
     cursor: pointer;
     font-size: 14px;
 }

 .btn-primary {
     background-color: #ff5a00;
     color: white;
 }

 .btn-primary:hover {
     background-color: #ff5a00;
 }
 .toastmessage {
     position: fixed;
     top: 60px;
     left: 50%;
     transform: translateX(-50%);
     padding: 10px 20px 10px 30px;
     border-radius: 4px;
     color: #FF5F19;
     z-index: 9999;
     opacity: 0;
     background: #FFEFE8 url(../images/prompt.png) no-repeat 10px center;
     background-size: 16px 16px;
     border: 1px  solid  #FFCAB3;     
     transition: opacity 0.3s ease;
     box-shadow: 0 2px 8px rgba(255, 95, 25, 0.1);
      
 }

 /* 显示状态体验官 */
 .clawtest .checktest  {
      line-height: 24px; 
      padding-left: 24px;
      font-size: 14px;
    background: url(../images/check.png) no-repeat 0px 4px;
    cursor: pointer;
  }
.testerHide {
    display: none;
}
.clawtest .testerSelected { background-position: 0px -20px; }
.testerTip { font-size: 12px; color:#ff5a00;  padding-bottom: 20px; background: url(../images/prompt.png) no-repeat 0px 0px; background-size: 16px 16px; padding-left: 20px;} 
.hasTestApply { font-size: 12px; color:#ff5a00;  padding-bottom: 20px;   background: url(../images/prompt.png) no-repeat 0px 0px;  background-size: 16px 16px; padding-left: 20px;}
 

@media (prefers-color-scheme: dark) {
   /* @dark-bg: #262626; // 整体背景黑
    @dark-graybg: #191919; // 大检索框背景色
    @secondary-bg: #2b2b2b; // 次背景黑，弹层等，比背景稍微灰一点
    @hover-dark-bg: #3e3e3e; // 鼠标悬浮背景色
    @third-bg: #474747; // ！！！！ 暂时不用，浅深色，用于选中，网页暂时不需要
    @light-text: #e1e1e1; // 主体文字色
    @light-textgray: #A5A5A5; // 略灰色文字
    @hover-bg: #F2923D; // 橙色背景鼠标色
    @border-color: #424242; // 大块边框色,线条色
    @icon-fill: #C7C7C7; // 图标填充色 */

    body {
        background-color: #262626;
        color: #e1e1e1;
    }
            .feedbackHeader p { color: #A5A5A5;}
            .type-option { background-color: #2b2b2b; border-color: #424242; }
            .form-group textarea { background-color: #2b2b2b; border-color: #424242;}
             .upload-area { border-color:  #424242; background-color: #2b2b2b; }
            .file-item,.add-file-item { border-color: #424242; background-color: #2b2b2b; }
            .contact-item input { background-color: #2b2b2b; border-color: #424242;}  
}