@charset "UTF-8";
/* 表单导航 基于GET参数切换 */
.form-nav {display: flex;flex-wrap:nowrap;gap:40px;height:41px; justify-content: left;margin:0 0 20px 0;padding:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;position: relative;}
.form-nav::before{content: "";position: absolute;top:40px;left:0;right:0; z-index: 1;height:1px;border-bottom:.01rem solid #ededed;display: block;}
.form-nav::-webkit-scrollbar{display:none;}
.form-nav li{line-height:40px;font-size: 16px; position: relative;flex-shrink:0;}
article .form-nav li{list-style:none;}
.form-nav li a{display: block;}
.form-nav li::before{content: "";position: absolute;top:39px;left:50%; z-index: 1;width:0;height:2px;border-radius: 2px;background: #0069cc;display: inline-block;transition: all .2s;}
.form-nav li.active::before , .form-nav li:hover::before{left:0; width:100%;}
.fui-dark .form-nav::before{border-bottom:.01rem solid #444;}
.fui-dark .form-nav li a{color:#e6e6e6;}
.fui-dark .form-nav li a:hover{color:#2b90ee;}
@media screen and (max-width:480px){
.form-nav {gap:20px;}
}
/* 表单*/
.form-group {display:block;width:100%;position:relative;margin:20px 0;}
.form-group div{margin:0;}
.form-group label.form-title{display:flex;align-items:flex-end;margin-bottom:10px;line-height:1.5;font-size:14px;font-weight:bold;color:#333;gap:4px;}
.form-group label.form-title span{line-height:1.5;font-size:12px;font-weight:normal;color:#999;margin:0 0 0 5px;}
.form-group label.form-title .required{color:#ff4d4f;font-style:normal;}
.form-group>small{margin-top:6px;font-size:12px;color:#999;line-height:1.5;display:flex;align-items:flex-start;gap:3px;}
.form-group>small::before{content:"\f51a";color:#999;vertical-align: top;}
.form-group>input[type="text"],
.form-group>input[type="email"],
.form-group>input[type="password"],
.form-group>input[type="url"],
.form-group>input[type="tel"]{width:100%;padding:0 12px;border:1px solid #ededed;border-radius:3px;line-height:38px;height:38px;font-size:14px;color:#333;background:#fff;transition:border-color 0.3s, box-shadow 0.3s;}
.form-group>select{width:auto;max-width:100%;padding:0 12px;border:1px solid #ededed;border-radius:3px;line-height:38px;height:38px;font-size:14px;color:#333;background:#fff;transition:border-color 0.3s, box-shadow 0.3s;cursor:pointer;}
.form-group>input[type="number"]{width:100%;padding:0 12px;border:1px solid #ededed;border-radius:3px;line-height:38px;height:38px;font-size:14px;color:#333;background:#fff;transition:border-color 0.3s, box-shadow 0.3s;}
.form-group>input[type="date"],
.form-group>input[type="time"],
.form-group>input[type="datetime-local"],
.form-group>input[type="month"],
.form-group>input[type="week"]{width:100%;padding:0 12px;border:1px solid #ededed;border-radius:3px;line-height:38px;height:38px;font-size:14px;color:#333;background:#fff;transition:border-color 0.3s, box-shadow 0.3s;cursor:pointer;}
.form-group>input[type="date"]:hover,
.form-group>input[type="time"]:hover,
.form-group>input[type="datetime-local"]:hover,
.form-group>input[type="month"]:hover,
.form-group>input[type="week"]:hover{border-color:#0069cc;}
/* 隐藏日期时间输入框原生图标（仅针对自定义选择器） */
.form-group>input[type="date"]::-webkit-calendar-picker-indicator,
.form-group>input[type="time"]::-webkit-calendar-picker-indicator,
.form-group>input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.form-group>input[type="month"]::-webkit-calendar-picker-indicator{display:none;}
.form-group>input:focus,
.form-group>select:focus{outline:none;border-color:#0069cc;box-shadow:0 0 0 3px rgba(0,105,204,0.1);}
.form-group>textarea{width:100%;padding:10px 12px;border:1px solid #ededed;border-radius:3px;font-size:14px;color:#333;background:#fff;resize:vertical;min-height:120px;line-height:1.6;transition:border-color 0.3s, box-shadow 0.3s;}
.form-group>textarea:focus{outline:none;border-color:#0069cc;box-shadow:0 0 0 3px rgba(0,105,204,0.1);}
.form-group>input[type="file"]{width:100%;padding:8px 12px;border:1px solid #ededed;border-radius:3px;font-size:14px;background:#fff;cursor:pointer;transition:border-color 0.3s;}
.form-group>input[type="file"]:hover{border-color:#0069cc;}
.form-group>input[type="range"]{width:100%;height:6px;border-radius:3px;background:#ededed;outline:none;-webkit-appearance:none;}
.form-group>input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#0069cc;cursor:pointer;transition:all 0.3s;}
.form-group>input[type="range"]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#0069cc;cursor:pointer;border:0;transition:all 0.3s;}
.form-group>input[type="range"]:hover::-webkit-slider-thumb,
.form-group>input[type="range"]:hover::-moz-range-thumb{background:#0077e6;transform:scale(1.1);}
.form-group>input[type="color"]{width:100%;max-width:80px;height:38px;border:1px solid #ededed;border-radius:3px;padding:3px;cursor:pointer;background:#fff;}

.form-group .option{display:flex;flex-wrap:wrap;gap:15px 20px;margin-top:8px;}
.form-group .option label{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:#666;font-weight:normal;cursor:pointer;line-height:1.5;}
.form-group .option input[type="radio"],
.form-group .option input[type="checkbox"]{width:16px;height:16px;cursor:pointer;margin:0;}
.form-group .btn-submit,
.form-group .btn-reset{display:inline-block;padding:0 24px;line-height:38px;font-size:14px;border:0;border-radius:3px;cursor:pointer;transition:all 0.3s;margin-right:15px;}
.form-group .btn-submit{background:#0069cc;color:#fff;}
.form-group .btn-submit:hover{background:#0077e6;transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,105,204,0.3);}
.form-group .btn-reset{background:#f5f5f5;color:#666;}
.form-group .btn-reset:hover{background:#e6e6e6;}

/* 移动端适配：user-card 内的按钮也全宽显示 */
@media screen and (max-width:768px){
.user-card .form-group .btn-submit,
.user-card .form-group .btn-reset{width:100%;margin:8px 0;}
}
.form-group #submit{display:inline-block;padding:0 20px;background:#0069cc;color:#fff;line-height:36px;font-size:14px;border-radius:3px;cursor:pointer;}
.form-group #submit::after{margin:0 0 0 3px;content:"\f130";vertical-align:top;}
.form-group #submit:hover{background:#0077e6;}
.input-verify{display:flex;align-items:center;gap:10px;}
.input-verify input{flex:1;}
.input-verify img{width:108px;height:36px;cursor:pointer;}
.verfiycode{display:flex;align-items:center;gap:10px;}
.verfiycode input{flex:1;padding:0 12px;border:1px solid #ededed;border-radius:3px;line-height:38px;height:38px;font-size:14px;color:#333;background:#fff;transition:border-color 0.3s, box-shadow 0.3s;}
.verfiycode img{width:120px;height:38px;cursor:pointer;border-radius:3px;border:1px solid #ededed;Box-sizing:border-box;}
article .verfiycode img{height: 38px !important;;}
.input-range-group{display:flex;align-items:center;gap:10px;width:50%;}
.input-range-group input[type="number"]{width:calc(50% - 15px);flex:1;padding:0 12px;border:1px solid #ededed;border-radius:3px;line-height:38px;height:38px;font-size:14px;color:#333;background:#fff;transition:border-color 0.3s, box-shadow 0.3s;}
.input-range-group input[type="number"]:hover{border-color:#0069cc;}
.input-range-group input[type="number"]:focus{outline:none;border-color:#0069cc;box-shadow:0 0 0 3px rgba(0,105,204,0.1);}
.input-range-group .separator{color:#999;font-size:16px;flex:0 0 auto;}
/* 文件上传组件 */
.upload-field{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px;}
.upload-field>input.read{flex:1;min-width:200px;padding:0 12px;border:1px solid #ededed;border-radius:3px;line-height:38px;height:38px;font-size:14px;color:#333;background:#fff;transition:border-color 0.3s, box-shadow 0.3s;}
.upload-field>input.read:focus{outline:none;border-color:#0069cc;box-shadow:0 0 0 3px rgba(0,105,204,0.1);}
.upload-field .upload-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:0 20px;height:38px;background:#fff;color:#333;border:1px solid #ededed;border-radius:3px;cursor:pointer;font-size:14px;overflow:hidden;transition:border-color 0.3s, box-shadow 0.3s;font-weight:normal;}
.upload-field .upload-btn:hover{border-color:#0069cc;box-shadow:0 0 0 3px rgba(0,105,204,0.1);}
.upload-field .upload-btn input[type="file"]{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:0;}
.upload-field .file-info{flex:1 1 100%;margin-top:5px;font-size:12px;color:#666;}
/* 多图上传预览列表 */
.expo-photo-list{list-style:none;padding:0;margin:8px 0 0 0;}
.expo-photo-list li{display:flex;align-items:center;margin:8px 0;padding:8px;gap:10px;border:1px solid #ededed;border-radius:4px;background:#fafafa;transition:all 0.3s;}
.expo-photo-list li:hover{background:#f5f5f5;border-color:#ddd;}
.expo-photo-list li.dragging{opacity:0.4;}
.expo-photo-list li img{width:80px;height:60px;object-fit:cover;border-radius:3px;border:1px solid #ddd;}
.expo-photo-list .expo-photo-url{flex:1;font-size:12px;color:#666;word-break:break-all;line-height:1.4;}
.expo-photo-list .expo-photo-del{padding:4px 12px;background:#f5f5f5;color:#666;border:1px solid #ddd;border-radius:3px;cursor:pointer;font-size:12px;white-space:nowrap;transition:all 0.3s;}
.expo-photo-list .expo-photo-del:hover{background:#fff;border-color:#ff4d4f;color:#ff4d4f;}
.expo-photo-list .expo-photo-drag{cursor:move;color:#999;font-size:18px;-webkit-user-select:none;user-select:none;line-height:1;}
/* 单图上传预览 */
.upload-field .file-info .remove-single-img{position:absolute;top:4px;right:4px;width:24px;height:24px;background:rgba(0,0,0,0.6);color:#fff;border:none;border-radius:50%;cursor:pointer;font-size:16px;line-height:1;transition:all 0.3s;}
.upload-field .file-info .remove-single-img:hover{background:rgba(255,77,79,0.9);}
/* 网址元数据获取组件 */
.url-meta-field{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px;}
.url-meta-field .url-input{flex:1;min-width:200px;padding:0 12px;border:1px solid #ededed;border-radius:3px;line-height:38px;height:38px;font-size:14px;color:#333;background:#fff;transition:border-color 0.3s, box-shadow 0.3s;}
.url-meta-field .url-input:focus{outline:none;border-color:#0069cc;box-shadow:0 0 0 3px rgba(0,105,204,0.1);}
.url-meta-field .meta-btn{display:inline-flex;align-items:center;justify-content:center;padding:0 20px;height:38px;background:#fff;color:#333;border:1px solid #ededed;border-radius:3px;cursor:pointer;font-size:14px;transition:border-color 0.3s, box-shadow 0.3s;font-weight:normal;}
.url-meta-field .meta-btn:hover{border-color:#0069cc;box-shadow:0 0 0 3px rgba(0,105,204,0.1);}
/* 验证码发送组件（通用，可用于手机/邮箱验证码） */
.verify-code-group{display:flex;align-items:flex-start;gap:10px;}
.verify-code-group input{flex:1;min-width:200px;padding:0 12px;border:1px solid #ededed;border-radius:3px;line-height:38px;height:38px;font-size:14px;color:#333;background:#fff;transition:border-color 0.3s, box-shadow 0.3s;}
.verify-code-group input:focus{outline:none;border-color:#0069cc;box-shadow:0 0 0 3px rgba(0,105,204,0.1);}
.verify-code-group .send-code-btn{display:inline-flex;align-items:center;justify-content:center;padding:0 20px;height:38px;background:#fff;color:#333;border:1px solid #ededed;border-radius:3px;cursor:pointer;font-size:14px;white-space:nowrap;transition:border-color 0.3s, box-shadow 0.3s;font-weight:normal;}
.verify-code-group .send-code-btn:hover:not(:disabled){border-color:#0069cc;box-shadow:0 0 0 3px rgba(0,105,204,0.1);}
.verify-code-group .send-code-btn:disabled{cursor:not-allowed;opacity:0.6;color:#999;}
/* 半宽输入框类 */
.form-group .input-half,
.form-group>select.input-half,
.form-group>input.input-half{width:50%;}
/* 多列下拉选择框布局 */
.select-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:20px;}
.select-row select{width:100%;padding:0 12px;border:1px solid #ededed;border-radius:3px;line-height:38px;height:38px;font-size:14px;color:#333;background:#fff;transition:border-color 0.3s, box-shadow 0.3s;cursor:pointer;}
.select-row select:focus{outline:none;border-color:#0069cc;box-shadow:0 0 0 3px rgba(0,105,204,0.1);}
/* 移动端适配 */
@media screen and (max-width:768px){
.form-group label.form-title{flex-wrap:wrap;}
.form-group label.form-title span{margin:2px 0 0 0;flex:1 1 100%;}
.form-group .input-half,
.form-group>select.input-half,
.form-group>input.input-half{width:100%;}
.input-range-group{width:100%;}
}

/* 深色模式 */
.fui-dark .form-group .form-title{color:#e6e6e6;}
.fui-dark .form-group>label{color:#999;}
.fui-dark .form-group>input[type="text"],
.fui-dark .form-group>input[type="email"],
.fui-dark .form-group>input[type="password"],
.fui-dark .form-group>input[type="url"],
.fui-dark .form-group>input[type="tel"]{background:#333;border:1px solid #444;color:#e6e6e6;}
.fui-dark .form-group>select{background:#333;border:1px solid #444;color:#e6e6e6;}
.fui-dark .select-row select{background:#333;border:1px solid #444;color:#e6e6e6;}
.fui-dark .select-row select:focus{outline:none;border-color:#0069cc;box-shadow:0 0 0 3px rgba(0,105,204,0.2);}
.fui-dark .form-group>input[type="number"]{background:#333;border:1px solid #444;color:#e6e6e6;color-scheme:dark;}
.fui-dark .form-group>input[type="date"],
.fui-dark .form-group>input[type="time"],
.fui-dark .form-group>input[type="datetime-local"],
.fui-dark .form-group>input[type="month"],
.fui-dark .form-group>input[type="week"]{background:#333;border:1px solid #444;color:#e6e6e6;}
.fui-dark .form-group>input:focus,
.fui-dark .form-group>select:focus{border-color:#0069cc;box-shadow:0 0 0 3px rgba(0,105,204,0.2);}
.fui-dark .form-group>textarea{background:#333;border:1px solid #444;color:#e6e6e6;}
.fui-dark .form-group>textarea:focus{border-color:#0069cc;box-shadow:0 0 0 3px rgba(0,105,204,0.2);}
.fui-dark .form-group>input[type="file"]{background:#333;border:1px solid #444;color:#e6e6e6;}
.fui-dark .form-group>input[type="file"]:hover{border-color:#0069cc;}
.fui-dark .form-group>input[type="range"]{background:#444;}
.fui-dark .form-group>input[type="color"]{background:#333;border:1px solid #444;}
.fui-dark .form-group>small{color:#999;}
.fui-dark .form-group .option label{color:#999;}
.fui-dark .form-group .btn-submit{background:#0069cc;color:#fff;}
.fui-dark .form-group .btn-submit:hover{background:#0077e6;}
.fui-dark .form-group .btn-reset{background:#3d3d3d;color:#999;}
.fui-dark .form-group .btn-reset:hover{background:#444;}
.fui-dark .verfiycode input{background:#333;border:1px solid #444;color:#e6e6e6;}
.fui-dark .verfiycode img{border-color:#444;}
.fui-dark .upload-field>input.read{background:#333;border:1px solid #444;color:#e6e6e6;}
.fui-dark .upload-field>input.read:focus{border-color:#0069cc;box-shadow:0 0 0 3px rgba(0,105,204,0.2);}
.fui-dark .upload-field .upload-btn{background:#333;color:#e6e6e6;border:1px solid #444;}
.fui-dark .upload-field .upload-btn:hover{border-color:#0069cc;box-shadow:0 0 0 3px rgba(0,105,204,0.2);}
.fui-dark .upload-field .file-info{color:#999;}
.fui-dark .expo-photo-list li{background:#2a2a2a;border-color:#444;}
.fui-dark .expo-photo-list li:hover{background:#333;border-color:#555;}
.fui-dark .expo-photo-list li img{border-color:#555;}
.fui-dark .expo-photo-list .expo-photo-url{color:#999;}
.fui-dark .expo-photo-list .expo-photo-del{background:#3d3d3d;color:#999;border-color:#555;}
.fui-dark .expo-photo-list .expo-photo-del:hover{background:#444;border-color:#ff4d4f;color:#ff4d4f;}
.fui-dark .expo-photo-list .expo-photo-drag{color:#666;}
.fui-dark .url-meta-field .url-input{background:#333;border:1px solid #444;color:#e6e6e6;}
.fui-dark .url-meta-field .url-input:focus{border-color:#0069cc;box-shadow:0 0 0 3px rgba(0,105,204,0.2);}
.fui-dark .url-meta-field .meta-btn{background:#333;color:#e6e6e6;border:1px solid #444;}
.fui-dark .url-meta-field .meta-btn:hover{border-color:#0069cc;box-shadow:0 0 0 3px rgba(0,105,204,0.2);}
.fui-dark .verify-code-group input{background:#333;border:1px solid #444;color:#e6e6e6;}
.fui-dark .verify-code-group input:focus{border-color:#0069cc;box-shadow:0 0 0 3px rgba(0,105,204,0.2);}
.fui-dark .verify-code-group .send-code-btn{background:#333;color:#e6e6e6;border:1px solid #444;}
.fui-dark .verify-code-group .send-code-btn:hover:not(:disabled){border-color:#0069cc;box-shadow:0 0 0 3px rgba(0,105,204,0.2);}
.fui-dark .verify-code-group .send-code-btn:disabled{color:#666;}
.fui-dark .input-range-group input[type="number"]{background:#333;border:1px solid #444;color:#e6e6e6;color-scheme:dark;}
.fui-dark .input-range-group input[type="number"]:focus{border-color:#0069cc;box-shadow:0 0 0 3px rgba(0,105,204,0.2);}

/* 封面图上传区域样式 */
.upload-area {position: relative;border: 2px dashed #ededed;border-radius: 8px;cursor: pointer;overflow: hidden;transition: all 0.3s;}
.upload-area:hover {border-color: #0069cc;}
.upload-placeholder {text-align: center;padding: 40px 20px;color: #999;}
.upload-placeholder i {font-size: 48px;display: block;margin-bottom: 10px;color: #ccc;}
.upload-placeholder p {margin: 5px 0;font-size: 16px;color: #666;}
.upload-placeholder span {font-size: 12px;color: #999;}
.upload-preview {position: relative;width: 100%;}
.upload-preview img {width: 100%;height: auto;display: block;}
.upload-preview .remove-image {position: absolute;top: 10px;right: 10px;width: 30px;height: 30px;background: rgba(0,0,0,0.6);color: #fff;border: none;border-radius: 50%;font-size: 20px;cursor: pointer;line-height: 1;transition: all 0.3s;}
.upload-preview .remove-image:hover {background: rgba(255,0,0,0.8);}
/* 暗色模式 */
.fui-dark .upload-area {border-color: #444;}
.fui-dark .upload-area:hover {border-color: #0069cc;}
.fui-dark .upload-placeholder {color: #999;}
.fui-dark .upload-placeholder i {color: #666;}
.fui-dark .upload-placeholder p {color: #ccc;}
.fui-dark .upload-placeholder span {color: #999;}