:root{--primary:#409EFF;--primary-light:#ecf5ff;--primary-2:#5B8EFF;--text:#303133;--text-regular:#606266;--muted:#909399;--border:#e4e7ed;--bg:#f5f7fa;--danger:#F56C6C;--warn:#E6A23C;--success:#67C23A}
*{box-sizing:border-box;margin:0;padding:0}
html,body{color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","PingFang SC","Microsoft YaHei",sans-serif;background:#fff;font-size:14px;line-height:1.5}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
img{max-width:100%;vertical-align:middle}
.container{max-width:1200px;margin:0 auto;padding:0 16px}
.header{background:#fff;border-bottom:1px solid var(--border);position:fixed;top:0;left:0;right:0;z-index:1000}
body{padding-top:70px}
@media (max-width:768px){body{padding-top:0}}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.logo{display:flex;align-items:center;gap:10px;cursor:pointer}
.logo img{width:44px;height:44px;border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,.1)}
.logo .name{display:flex;flex-direction:column}
.logo .name h1{margin:0;font-size:18px;font-weight:700;color:#303133}
.logo .name p{margin:0;color:var(--muted);font-size:11px;letter-spacing:.5px}
.nav{display:flex;gap:4px}
.nav .nav-item{display:flex;align-items:center;gap:6px;padding:10px 18px;border-radius:8px;color:#606266;cursor:pointer;transition:all .3s;font-weight:500;font-size:14px;position:relative}
.nav .nav-item::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:0;height:2px;background:var(--primary);transition:width .3s}
.nav .nav-item:hover{background:#f5f7fa;color:var(--primary)}
.nav .nav-item:hover::after{width:70%}
.nav .nav-item.active{background:var(--primary-light);color:var(--primary)}
.nav .nav-item.active::after{width:70%}
/* Element Plus SVG icon wrapper - matching el-icon */
.ep-icon{display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;font-size:inherit;color:inherit;fill:currentColor}
.ep-icon svg{width:1em;height:1em;fill:currentColor}
.nav .nav-item .ep-icon{font-size:18px}
.nav .nav-item.nav-report{background:linear-gradient(135deg,#ff6b6b 0%,#ee5a24 100%);color:#fff !important;border-radius:20px;padding:8px 20px;box-shadow:0 4px 12px rgba(238,90,36,.35);margin-left:8px}
.nav .nav-item.nav-report:hover{background:linear-gradient(135deg,#ff5252 0%,#d63031 100%);color:#fff !important;transform:translateY(-2px);box-shadow:0 6px 16px rgba(238,90,36,.45)}
.nav .nav-item.nav-report::after{display:none}
.nav .nav-item.nav-report .ep-icon{color:#fff}
.nav .nav-item.nav-report.active{background:linear-gradient(135deg,#d63031 0%,#c0392b 100%)}
.menu-btn{display:none;padding:8px 12px;border:1px solid var(--primary);background:transparent;cursor:pointer;font-size:20px;border-radius:6px;color:var(--primary)}
.menu-btn:hover{background:var(--primary-light)}
.mobile-drawer{display:none;position:fixed;inset:0;z-index:2000}
.drawer-mask{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.drawer-body{position:absolute;right:0;top:0;bottom:0;width:280px;background:#fff;display:flex;flex-direction:column}
.drawer-header{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid var(--border)}
.drawer-close{border:none;background:transparent;font-size:20px;cursor:pointer}
.drawer-nav{padding:12px 0}
.drawer-nav .drawer-item{display:flex;align-items:center;gap:16px;padding:16px 20px;cursor:pointer;transition:all .3s;border-left:3px solid transparent;margin-bottom:8px}
.drawer-nav .drawer-item:hover{background:#f5f7fa;border-left-color:var(--primary)}
.drawer-nav .drawer-item.active{background:var(--primary-light);border-left-color:var(--primary)}
.drawer-nav .drawer-item .ep-icon{font-size:22px;color:var(--primary)}
.drawer-nav .drawer-item-content{flex:1;display:flex;flex-direction:column;gap:4px}
.drawer-nav .drawer-item-title{font-size:16px;font-weight:600;color:#303133}
.drawer-nav .drawer-item-desc{font-size:13px;color:var(--muted)}
.drawer-nav .drawer-arrow{color:#c0c4cc;font-size:14px}
.footer{background:var(--bg);border-top:1px solid var(--border);margin-top:40px}
.footer-inner{max-width:1200px;margin:0 auto;padding:48px 32px 24px}
.footer-main{display:flex;justify-content:space-between;gap:80px;max-width:1000px;margin:0 auto 32px}
.footer-left{display:flex;flex-direction:column;gap:16px}
.footer-logo{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.footer-logo img{width:24px;height:24px}
.footer-desc{margin:0;color:var(--text-regular);font-size:14px;line-height:1.8;max-width:520px}
.footer-right{display:flex;gap:60px}
.footer-nav h4{font-size:15px;margin:0 0 16px;color:#303133;font-weight:600;padding-left:8px;border-left:3px solid var(--primary)}
.footer-nav-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.footer-nav-grid a{display:flex;align-items:center;gap:8px;padding:8px 12px;color:#606266;border-radius:6px;transition:all .3s;cursor:pointer;font-size:14px}
.footer-nav-grid a:hover{background:var(--primary-light);color:var(--primary)}
.footer-nav-grid a .ep-icon{font-size:16px}
.footer-section h4{font-size:14px;margin-bottom:12px;color:var(--text)}
.footer-links{display:flex;flex-direction:column;gap:8px}
.footer-links a{color:var(--text-regular);font-size:13px;transition:color .2s;display:flex;align-items:center;gap:6px}
.footer-links a:hover{color:var(--primary)}
.footer-links a i{font-size:14px}
.footer-contact{display:flex;flex-direction:column;gap:8px}
.contact-item{display:none;align-items:center;gap:8px;color:var(--text-regular);font-size:13px;cursor:pointer}
.contact-item:hover{color:var(--primary)}
.contact-item i{font-size:16px}
.footer-bottom{text-align:center;color:var(--muted);border-top:1px solid var(--border);padding:16px 0;margin-top:24px;font-size:13px}
.footer-bottom a{color:var(--muted)}
.footer-bottom a:hover{color:var(--primary)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 20px;border:1px solid var(--border);border-radius:8px;background:#fff;cursor:pointer;font-size:14px;transition:all .2s}
.btn:hover{opacity:.85}
.btn i{font-size:16px}
.btn-primary{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-2) 100%);color:#fff;border:none}
.btn-success{background:var(--success);color:#fff;border:none}
.btn-warning{background:var(--warn);color:#fff;border:none}
.btn-danger{background:var(--danger);color:#fff;border:none}
.btn-plain{background:transparent;border:1px solid var(--primary);color:var(--primary)}
.btn-text{background:transparent;border:none;color:var(--primary);padding:0}
.btn-lg{padding:14px 28px;font-size:16px}
.btn-sm{padding:6px 12px;font-size:12px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.input{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:6px;outline:none;font-size:14px;transition:border-color .2s}
.input:focus{border-color:var(--primary)}
.input-lg{padding:14px 16px;font-size:16px}
.textarea{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:6px;outline:none;font-size:14px;resize:vertical;min-height:100px}
.textarea:focus{border-color:var(--primary)}
.select{padding:10px 12px;border:1px solid var(--border);border-radius:6px;background:#fff;font-size:14px;outline:none}
.select:focus{border-color:var(--primary)}
.checkbox-wrap{display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.checkbox-wrap input[type="checkbox"]{width:16px;height:16px;accent-color:var(--primary)}
.form-item{margin-bottom:16px}
.form-label{display:block;color:var(--text-regular);font-size:14px;margin-bottom:6px}
.form-label .required{color:var(--danger);margin-left:2px}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.card{background:#fff;border:1px solid var(--border);border-radius:10px;margin:16px 0;overflow:hidden}
.card-header{padding:16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.card-header h3{margin:0;font-size:16px;display:flex;align-items:center;gap:8px;font-weight:600;color:#303133}
.card-header h3 i{font-size:20px;color:var(--danger)}
.card-body{padding:16px}
.card-shadow{box-shadow:0 2px 12px rgba(0,0,0,.1)}
.alert{padding:12px 16px;border-radius:6px;display:flex;align-items:flex-start;gap:10px;margin-bottom:16px}
.alert-icon{font-size:18px;flex-shrink:0}
.alert-content{flex:1;line-height:1.6}
.alert-info{background:#e6f4ff;border:1px solid #91caff;color:#0958d9}
.alert-success{background:#f6ffed;border:1px solid #b7eb8f;color:#389e0d}
.alert-warning{background:#fffbe6;border:1px solid #ffe58f;color:#d48806}
.alert-error{background:#fff2f0;border:1px solid #ffccc7;color:#cf1322}
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:4px;font-size:12px;white-space:nowrap}
.tag-primary{background:var(--primary-light);color:var(--primary)}
.tag-success{background:#f0f9eb;color:var(--success)}
.tag-warning{background:#fdf6ec;color:var(--warn)}
.tag-danger{background:#fef0f0;color:var(--danger)}
.tag-info{background:#f4f4f5;color:var(--muted)}
.tag-primary-solid{background:var(--primary);color:#fff}
.tag-success-solid{background:var(--success);color:#fff}
.tag-warning-solid{background:var(--warn);color:#fff}
.tag-danger-solid{background:var(--danger);color:#fff}
.level-tag{min-width:32px;text-align:center;padding:2px 8px;border-radius:4px;font-size:12px;font-weight:600}
.level-tag-A{background:#f0f9eb;color:#67C23A}
.level-tag-B{background:#fdf6ec;color:#E6A23C}
.level-tag-C,.level-tag-D{background:#fef0f0;color:#F56C6C}
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:3000;background:rgba(0,0,0,.5)}
.modal.show{display:flex}
.modal-dialog{background:#fff;border-radius:10px;min-width:300px;max-width:90vw;max-height:90vh;display:flex;flex-direction:column;overflow:hidden;animation:modalIn .2s}
@keyframes modalIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
.modal-header{padding:16px;border-bottom:1px solid var(--border);font-weight:600;display:flex;justify-content:space-between;align-items:center}
.modal-close{border:none;background:transparent;font-size:18px;cursor:pointer;color:var(--muted)}
.modal-close:hover{color:var(--text)}
.modal-body{padding:16px;overflow:auto;max-height:60vh}
.modal-footer{padding:12px 16px;border-top:1px solid var(--border);display:flex;gap:10px;justify-content:flex-end}
.toast-wrap{position:fixed;right:20px;top:20px;z-index:4000;display:flex;flex-direction:column;gap:10px}
.toast{padding:12px 16px;border-radius:6px;color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.15);display:flex;align-items:center;gap:8px;animation:toastIn .3s}
@keyframes toastIn{from{opacity:0;transform:translateX(100%)}to{opacity:1;transform:translateX(0)}}
.toast-success{background:var(--success)}
.toast-info{background:var(--primary)}
.toast-warning{background:var(--warn)}
.toast-error{background:var(--danger)}
.skel{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid #f0f2f5}
.skel-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(90deg,#eee 25%,#f5f5f5 50%,#eee 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}
.skel-lines{flex:1}
.skel-line{height:12px;border-radius:6px;margin:6px 0;background:linear-gradient(90deg,#eee 25%,#f5f5f5 50%,#eee 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}
.skel-line.short{width:40%}
.skel-line.long{width:80%}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
/* Search card - matching Vue HomeSearch.vue card style */
.search-card{margin-bottom:24px}
.search-card .card-header{text-align:center}
.search-card .card-header h2{margin:0 0 8px;color:#303133;font-size:28px;display:flex;align-items:center;justify-content:center;gap:12px}
.search-card .card-header h2 i{font-size:28px;color:#409EFF}
.search-card .tips{color:#909399;margin:0;font-size:14px}
.search-wrapper{max-width:800px;margin:20px auto}
.search-input-wrap{display:flex;border:1px solid #dcdfe6;border-radius:4px;overflow:hidden}
.search-input-wrap .input{border:none;padding:12px 16px;flex:1;font-size:16px}
.search-input-wrap .input:focus{outline:none}
.search-input-wrap .btn{border-radius:0;border:none;border-left:1px solid #dcdfe6}
/* Quick entries - matching Vue button style */
.quick-entries{display:flex;gap:12px;margin:20px 0;flex-wrap:wrap;justify-content:center}
.entry-btn{flex:1;min-width:140px;max-width:200px;padding:10px 16px;border-radius:4px;cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:14px}
.entry-btn.btn-primary-plain{background:#ecf5ff;color:#409EFF;border:1px solid #b3d8ff}
.entry-btn.btn-primary-plain:hover{background:#409EFF;color:#fff}
.entry-btn.btn-success-plain{background:#f0f9eb;color:#67C23A;border:1px solid #c2e7b0}
.entry-btn.btn-success-plain:hover{background:#67C23A;color:#fff}
.entry-btn.btn-warning-plain{background:#fdf6ec;color:#E6A23C;border:1px solid #f5dab1}
.entry-btn.btn-warning-plain:hover{background:#E6A23C;color:#fff}
.entry-btn i{font-size:18px}
.stats-row{display:flex;justify-content:center;gap:80px;margin:24px 0}
.stat-item{text-align:center;min-width:120px}
.stat-label{font-size:14px;color:var(--muted);margin-bottom:8px}
.stat-value{font-size:32px;font-weight:700;display:flex;align-items:center;justify-content:center}
.stat-value i{vertical-align:middle}
.search-result{margin:20px 0}
.result-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:20px;display:flex;align-items:center;gap:16px;cursor:pointer;transition:all .2s}
.result-card:hover{box-shadow:0 4px 12px rgba(0,0,0,.1);transform:translateY(-2px)}
.result-avatar{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;color:#fff;overflow:hidden;border:2px solid var(--primary);box-shadow:0 2px 8px rgba(64,158,255,.3)}
.result-avatar img{width:100%;height:100%;object-fit:cover}
.result-info{flex:1}
.result-account{font-size:18px;font-weight:600;font-family:"Courier New",monospace}
.result-meta{display:flex;align-items:center;gap:12px;margin-top:8px;color:var(--muted);font-size:13px}
.recorded-list{}
.recorded-item{padding:16px;border-bottom:1px solid #f0f2f5;display:flex;justify-content:space-between;align-items:center;transition:all .3s;cursor:pointer;background:#f5f7fa;border-radius:8px;margin-bottom:12px;border:1px solid transparent}
.recorded-item:last-child{margin-bottom:0}
.recorded-item:hover{background:#ecf5ff;border-color:var(--primary);transform:translateX(4px)}
.item-left{display:flex;align-items:center;gap:12px;flex:1}
.item-left>.tag{flex-shrink:0}
.account-avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--primary);color:#fff;font-weight:700;font-size:14px;overflow:hidden;border:2px solid var(--primary);box-shadow:0 2px 8px rgba(64,158,255,.3)}
.account-avatar img{width:100%;height:100%;object-fit:cover}
.item-info{display:flex;align-items:center;gap:10px}
.account-num{font-size:15px;font-weight:600;color:var(--text);font-family:"Courier New",monospace}
.item-type{font-size:12px;color:var(--muted)}
/* 斜角丝带状态标签 - 全新设计 */
.status-ribbon{position:relative;display:inline-flex;align-items:center;padding:6px 20px 6px 16px;font-size:12px;font-weight:700;color:#fff;white-space:nowrap;flex-shrink:0;letter-spacing:1px;clip-path:polygon(10px 0,100% 0,calc(100% - 6px) 100%,0 100%);text-shadow:1px 1px 2px rgba(0,0,0,.3);transition:all .25s ease;cursor:default}
.status-ribbon::before{content:"";position:absolute;left:0;top:0;bottom:0;width:10px;background:rgba(0,0,0,.15)}
.status-ribbon::after{content:"";position:absolute;right:0;top:0;width:12px;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2))}
.status-ribbon:hover{transform:translateX(3px);filter:brightness(1.1)}
/* A级 - 绿色认证 */
.status-ribbon-A{background:linear-gradient(135deg,#10b981 0%,#34d399 50%,#10b981 100%);box-shadow:2px 3px 10px rgba(16,185,129,.45),inset 0 1px 0 rgba(255,255,255,.3)}
/* B级 - 蓝色正常 */
.status-ribbon-B{background:linear-gradient(135deg,#3b82f6 0%,#60a5fa 50%,#3b82f6 100%);box-shadow:2px 3px 10px rgba(59,130,246,.45),inset 0 1px 0 rgba(255,255,255,.3)}
/* C级 - 橙色警告 */
.status-ribbon-C{background:linear-gradient(135deg,#f59e0b 0%,#fbbf24 50%,#f59e0b 100%);box-shadow:2px 3px 10px rgba(245,158,11,.45),inset 0 1px 0 rgba(255,255,255,.3)}
/* D级 - 红色危险 */
.status-ribbon-D{background:linear-gradient(135deg,#dc2626 0%,#ef4444 50%,#dc2626 100%);box-shadow:2px 3px 10px rgba(220,38,38,.5),inset 0 1px 0 rgba(255,255,255,.3);animation:ribbon-pulse 1.5s ease-in-out infinite}
@keyframes ribbon-pulse{0%,100%{box-shadow:2px 3px 10px rgba(220,38,38,.5),inset 0 1px 0 rgba(255,255,255,.3)}50%{box-shadow:2px 3px 20px rgba(220,38,38,.8),inset 0 1px 0 rgba(255,255,255,.3)}}
/* 标签图标 */
.status-ribbon i{margin-right:6px;font-style:normal;font-size:13px;text-shadow:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.2))}
.item-center{display:flex;align-items:center;margin:0 20px}
.item-right{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.amount{font-size:18px;font-weight:700;color:var(--danger)}
.date{font-size:12px;color:var(--muted)}
.tips-card{background:#E6F7FF;border:1px solid #91D5FF;border-radius:12px;padding:16px;margin:20px 0}
.tips-title{display:flex;align-items:center;gap:8px;font-weight:600;color:#0369a1;margin-bottom:12px}
.tips-title i{font-size:18px;color:var(--primary)}
.tips-list{color:#0c4a6e}
.tips-list li{padding:8px 0;display:flex;align-items:center;gap:8px;color:#606266;line-height:1.6}
.tips-list li i{font-size:16px;flex-shrink:0}
.filter-card{background:#fff;border:1px solid var(--border);border-radius:10px;padding:16px;margin-bottom:20px}
.filter-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.filter-row .input{max-width:240px}
.filter-row .select{min-width:120px}
.sort-bar{display:flex;justify-content:center;gap:8px;margin:16px 0}
.sort-btn{padding:8px 16px;border:1px solid var(--border);border-radius:6px;cursor:pointer;background:#fff;color:var(--text-regular);transition:all .2s;display:inline-flex;align-items:center;gap:6px}
.sort-btn i{font-size:14px}
.sort-btn.active{background:var(--primary-light);color:var(--primary);border-color:#a0cfff}
.sort-btn:hover{border-color:var(--primary)}
.records-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px}
.record-card{background:#fff;border:1px solid var(--border);border-radius:10px;padding:16px;cursor:pointer;transition:all .2s}
.record-card:hover{box-shadow:0 4px 12px rgba(0,0,0,.08);transform:translateY(-2px)}
.pagination{display:flex;justify-content:center;align-items:center;gap:6px;padding:20px 0}
.pagination button{min-width:36px;height:32px;border:1px solid var(--border);background:#fff;border-radius:6px;cursor:pointer;transition:all .2s}
.pagination button:hover{border-color:var(--primary);color:var(--primary)}
.pagination button.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.pagination button[disabled]{opacity:.5;cursor:not-allowed}
.pagination span{color:var(--muted);font-size:13px}
.page-header{display:flex;align-items:center;gap:16px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.back-btn{display:flex;align-items:center;gap:4px;color:var(--text-regular);cursor:pointer}
.back-btn:hover{color:var(--primary)}
.page-title{font-size:20px;font-weight:600}
.detail-header{display:flex;align-items:center;gap:20px;padding:20px;background:var(--bg);border-radius:12px;margin-bottom:20px}
.detail-avatar{width:80px;height:80px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:700;color:#fff;overflow:hidden}
.detail-avatar img{width:100%;height:100%;object-fit:cover}
.detail-info{flex:1}
.detail-account{font-size:24px;font-weight:700;font-family:"Courier New",monospace}
.detail-meta{display:flex;gap:16px;margin-top:8px;color:var(--muted)}
.detail-level{margin-left:auto}
.level-badge{padding:12px 24px;border-radius:8px;font-size:16px;font-weight:600;color:#fff}
.level-badge.level-A{background:linear-gradient(135deg,#67c23a,#85ce61)}
.level-badge.level-B{background:linear-gradient(135deg,#e6a23c,#ebb563)}
.level-badge.level-C{background:linear-gradient(135deg,#f56c6c,#f89898)}
.level-badge.level-D{background:linear-gradient(135deg,#c70000,#e53935)}
.desc-table{width:100%}
.desc-table tr{border-bottom:1px solid var(--border)}
.desc-table tr:last-child{border-bottom:none}
.desc-table th{width:100px;text-align:left;padding:12px 0;color:var(--muted);font-weight:normal}
.desc-table td{padding:12px 0;color:var(--text)}
.image-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin:16px 0}
.image-item{position:relative;background:var(--bg);border:1px solid var(--border);border-radius:6px;overflow:hidden;aspect-ratio:1}
.image-item img{width:100%;height:100%;object-fit:cover;cursor:pointer;transition:transform .2s}
.image-item img:hover{transform:scale(1.05)}
.action-bar{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0}
.timeline{position:relative;padding-left:24px}
.timeline::before{content:"";position:absolute;left:8px;top:0;bottom:0;width:2px;background:var(--border)}
.timeline-item{position:relative;padding-bottom:20px}
.timeline-item:last-child{padding-bottom:0}
.timeline-dot{position:absolute;left:-20px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--primary);border:2px solid #fff;box-shadow:0 0 0 2px var(--primary)}
.timeline-content{background:var(--bg);padding:12px;border-radius:8px}
.timeline-title{font-weight:600;margin-bottom:4px}
.timeline-desc{color:var(--muted);font-size:13px}
.upload-area{border:2px dashed var(--border);border-radius:8px;padding:40px;text-align:center;cursor:pointer;transition:border-color .2s}
.upload-area:hover{border-color:var(--primary)}
.upload-area.dragover{border-color:var(--primary);background:var(--primary-light)}
.upload-icon{font-size:40px;color:var(--muted);margin-bottom:12px}
.upload-text{color:var(--text-regular)}
.upload-hint{color:var(--muted);font-size:12px;margin-top:8px}
.upload-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px;margin-top:12px}
.upload-item{position:relative;aspect-ratio:1;border-radius:6px;overflow:hidden;background:var(--bg)}
.upload-item img{width:100%;height:100%;object-fit:cover}
.upload-item .remove-btn{position:absolute;top:4px;right:4px;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,.5);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px}
.steps{display:flex;justify-content:space-between;position:relative;margin:30px 0}
.steps::before{content:"";position:absolute;top:15px;left:60px;right:60px;height:2px;background:var(--border)}
.step-item{display:flex;flex-direction:column;align-items:center;position:relative;z-index:1;flex:1}
.step-icon{width:32px;height:32px;border-radius:50%;background:var(--border);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;margin-bottom:8px}
.step-item.active .step-icon{background:var(--primary)}
.step-item.done .step-icon{background:var(--success)}
.step-title{font-size:13px;color:var(--text-regular);text-align:center}
.step-desc{font-size:11px;color:var(--muted);text-align:center;margin-top:4px}
.step-item.active .step-title{color:var(--primary);font-weight:600}
.captcha-row{display:flex;gap:12px;align-items:center}
.captcha-row .input{flex:1;max-width:150px}
.captcha-img{height:40px;border-radius:4px;cursor:pointer;background:var(--bg);padding:4px 12px;font-size:18px;font-weight:bold;letter-spacing:4px;color:var(--primary)}
.merchant-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:20px}
.merchant-item{background:#f5f7fa;border-radius:12px;padding:20px;cursor:pointer;transition:all .3s;border:1px solid transparent}
.merchant-item:hover{background:#ecf5ff;border-color:var(--primary);transform:translateY(-2px);box-shadow:0 4px 16px rgba(64,158,255,.15)}
.merchant-header{display:flex;gap:15px;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid #e4e7ed}
.merchant-avatar{width:50px;height:50px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:20px}
.merchant-info{flex:1}
.merchant-info h3{margin:0 0 8px;font-size:18px;color:#303133}
.merchant-tags{display:flex;gap:8px;flex-wrap:wrap}
.merchant-body{margin-bottom:16px}
.merchant-body .info-row{display:flex;align-items:center;gap:8px;margin-bottom:10px;color:#606266;font-size:14px}
.merchant-body .info-row i{font-size:16px;color:var(--primary)}
.merchant-body .info-row .label{color:var(--muted)}
.merchant-body .info-row .value{flex:1;color:#303133}
.merchant-footer{display:flex;gap:10px;padding-top:16px;border-top:1px solid #e4e7ed}
.merchant-footer .btn{flex:1}
.merchant-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:20px;text-align:center;transition:all .2s}
.merchant-card:hover{box-shadow:0 4px 12px rgba(0,0,0,.08);transform:translateY(-2px)}
.merchant-card .merchant-avatar{width:80px;height:80px;border-radius:50%;margin:0 auto 12px;overflow:hidden;border:3px solid var(--success)}
.merchant-card .merchant-avatar img{width:100%;height:100%;object-fit:cover}
.merchant-name{font-size:18px;font-weight:600;margin-bottom:8px}
.merchant-qq{color:var(--muted);font-size:14px;margin-bottom:12px}
.merchant-badge{display:inline-flex;align-items:center;gap:4px;background:linear-gradient(135deg,#67c23a,#85ce61);color:#fff;padding:4px 12px;border-radius:20px;font-size:12px}
.benefit-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin:20px 0}
.benefit-item{background:var(--bg);border-radius:10px;padding:20px;text-align:center}
.benefit-icon{font-size:32px;margin-bottom:12px;color:var(--primary)}
.benefit-icon i{font-size:32px}
.benefit-title{font-weight:600;margin-bottom:8px}
.benefit-desc{color:var(--muted);font-size:13px}
.fee-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin:20px 0}
.fee-card{background:var(--bg);border-radius:12px;overflow:hidden}
.fee-header{background:var(--primary);color:#fff;padding:16px;font-size:18px;font-weight:600;text-align:center}
.fee-body{padding:20px}
.fee-item{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border)}
.fee-item:last-child{border-bottom:none}
.fee-item i{font-size:18px}
.fee-item strong{color:var(--primary)}
.process-timeline{margin:30px 0}
.process-step{display:flex;gap:20px;padding:20px 0;border-bottom:1px solid var(--border)}
.process-step:last-child{border-bottom:none}
.process-num{width:40px;height:40px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;flex-shrink:0}
.process-content h4{margin:0 0 8px;font-size:16px}
.process-content p{margin:0;color:var(--text-regular);line-height:1.6}
.level-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:20px 0}
@media (max-width:1200px){.level-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:768px){.level-grid{grid-template-columns:1fr}}
.level-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:20px;transition:all .3s}
.level-card:hover{transform:translateY(-8px);box-shadow:0 8px 24px rgba(0,0,0,.1)}
.level-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px;flex-wrap:wrap;gap:12px}
.level-header-left{display:flex;align-items:center;gap:12px}
.level-icon{font-size:40px}
.level-icon i{font-size:40px}
.level-title-group{display:flex;flex-direction:column;gap:6px}
.level-title-group h3{margin:0;font-size:22px;font-weight:600}
.level-badge-sm{padding:8px 16px;border-radius:6px;font-size:14px;font-weight:600;color:#fff;white-space:nowrap}
.badge-A{background:linear-gradient(135deg,#67c23a,#85ce61);box-shadow:0 2px 8px rgba(103,194,58,.4)}
.badge-B{background:linear-gradient(135deg,#e6a23c,#ebb563);box-shadow:0 2px 8px rgba(230,162,60,.4)}
.badge-C{background:linear-gradient(135deg,#f56c6c,#f89898);box-shadow:0 2px 8px rgba(245,108,108,.4)}
.badge-D{background:linear-gradient(135deg,#c70000,#e53935);box-shadow:0 2px 8px rgba(199,0,0,.4)}
.level-content h4{color:var(--text-regular);font-size:14px;margin:16px 0 8px}
.feature-list li{padding:6px 0;color:var(--text-regular);line-height:1.6}
.feature-list li::before{content:"✓ ";color:var(--success);font-weight:bold;margin-right:8px}
.risk-stars{display:flex;gap:4px}
.risk-star{color:#ddd;font-size:18px}
.risk-star.active{color:#ff9900}
.collapse-panel{border:1px solid var(--border);border-radius:8px;margin-bottom:12px}
.collapse-header{padding:16px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;background:var(--bg);border-radius:8px 8px 0 0}
.collapse-header:hover{background:#e9ecef}
.collapse-arrow{transition:transform .2s}
.collapse-panel.open .collapse-arrow{transform:rotate(180deg)}
.collapse-body{padding:16px;display:none;background:#fff;border-radius:0 0 8px 8px;line-height:1.8;color:#606266}
.collapse-panel.open .collapse-body{display:block}
.section{margin-bottom:40px}
.section-title{font-size:18px;color:#303133;margin-bottom:20px;padding-bottom:10px;border-bottom:2px solid var(--primary);display:flex;align-items:center;gap:8px}
.section-title i{font-size:20px}
.verify-card{background:#f0f9ff;border-radius:8px;padding:16px;margin-top:10px}
.verify-list{list-style:none;padding:0;margin:0}
.verify-list li{display:flex;align-items:flex-start;gap:10px;margin-bottom:15px;line-height:1.6;color:#606266}
.verify-list li:last-child{margin-bottom:0}
.verify-list li i{font-size:18px;flex-shrink:0;margin-top:2px}
.verify-list strong{color:var(--danger)}
.contact-section{text-align:center;padding-top:20px;border-top:1px solid var(--border)}
.notice-content{display:flex;flex-direction:column;gap:12px}
.notice-item{display:flex;align-items:center;gap:12px;padding:12px;background:var(--bg);border-radius:8px}
.notice-item i{font-size:20px;flex-shrink:0}
.image-preview{position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:5000;display:none;align-items:center;justify-content:center}
.image-preview.show{display:flex}
.image-preview img{max-width:90%;max-height:90%;object-fit:contain}
.image-preview .close-btn{position:absolute;top:20px;right:20px;color:#fff;font-size:30px;cursor:pointer}
/* Element Plus timeline - matching Vue EscrowService.vue */
.el-timeline{position:relative;padding-left:0;list-style:none}
.el-timeline-item{position:relative;padding-bottom:20px;padding-left:40px}
.el-timeline-item:last-child{padding-bottom:0}
.el-timeline-item__node{position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px}
.el-timeline-item__node i{font-size:14px}
.el-timeline-item__wrapper{padding-left:20px;position:relative}
.el-timeline-item__wrapper::before{content:'';position:absolute;left:-26px;top:28px;bottom:-20px;width:2px;background:#e4e7ed}
.el-timeline-item:last-child .el-timeline-item__wrapper::before{display:none}
.el-timeline-item__timestamp{color:#909399;font-weight:600;font-size:13px;margin-bottom:8px}
.el-timeline-item__content{background:#f5f7fa;border-radius:8px;padding:16px}
.el-timeline-item__content h4{margin:0 0 8px;font-size:16px;color:#303133}
.el-timeline-item__content p{margin:0;color:#606266;line-height:1.6}
/* Element Plus steps - matching Vue */
.el-steps{display:flex;justify-content:space-between;position:relative;margin:30px 0}
.el-steps::before{content:'';position:absolute;top:16px;left:60px;right:60px;height:2px;background:#e4e7ed}
.el-step{flex:1;display:flex;flex-direction:column;align-items:center;position:relative;z-index:1}
.el-step__icon{width:32px;height:32px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px}
.el-step__content{text-align:center;margin-top:12px}
.el-step__title{font-size:14px;font-weight:600;color:#303133;margin-bottom:4px}
.el-step__desc{font-size:12px;color:#909399;line-height:1.6}
/* Element Plus alert - matching Vue */
.el-alert{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:6px;margin-bottom:16px}
.el-alert--info{background:#e6f4ff;border:1px solid #91caff}
.el-alert--info i{color:#409EFF}
.el-alert--warning{background:#fffbe6;border:1px solid #ffe58f}
.el-alert--warning i{color:#E6A23C}
.el-alert--error{background:#fff2f0;border:1px solid #ffccc7}
.el-alert--error i{color:#F56C6C}
.el-alert--success{background:#f6ffed;border:1px solid #b7eb8f}
.el-alert--success i{color:#67C23A}
.el-alert__content{flex:1;line-height:1.6;color:#606266}
.el-alert__title{font-weight:600;margin-bottom:4px;color:#303133}
/* List header - matching Vue merchant-list-card */
.list-header{display:flex;align-items:center;justify-content:space-between}
/* Merchant stats - matching Vue TrustedMerchant.vue */
.merchant-stats{border-top:1px solid #e4e7ed;padding-top:24px;margin-top:24px}
.merchant-stats .stat-item{display:flex;flex-direction:column;align-items:center;gap:8px}
.merchant-stats .stat-icon{font-size:24px}
.merchant-stats .stat-value{font-size:24px;font-weight:700;color:#165DFF}
.merchant-stats .stat-label{font-size:13px;color:#909399}
/* Apply benefits - matching Vue guide-card */
.apply-benefits{margin:30px 0;text-align:center}
.apply-benefits h4{margin-bottom:20px;color:#303133;font-size:16px}
.apply-benefits .benefit-item p{margin:10px 0 0;color:#606266;font-size:14px}
.apply-action{text-align:center;padding-top:20px;border-top:1px solid #e4e7ed}
/* Radio group */
.radio-group{display:flex;gap:20px}
.radio-wrap{display:flex;align-items:center;gap:6px;cursor:pointer}
.radio-wrap input[type="radio"]{width:16px;height:16px;accent-color:var(--primary)}
/* Textarea */
.el-textarea{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:6px;outline:none;font-size:14px;resize:vertical;min-height:80px;font-family:inherit}
.el-textarea:focus{border-color:var(--primary)}
/* Page header for el-card style */
.el-page-header{display:flex;align-items:center;gap:16px;padding:16px 0;margin-bottom:20px;border-bottom:1px solid var(--border)}
.el-page-header .back-btn{display:flex;align-items:center;gap:4px;color:#606266;padding:8px 12px;border-radius:6px;transition:all .2s}
.el-page-header .back-btn:hover{background:#f5f7fa;color:var(--primary)}
.el-page-header .page-title{font-size:18px;font-weight:600;color:#303133}
/* Process detail */
.process-detail p{margin:5px 0;color:#606266}
/* Fee content */
.fee-content{padding:20px}
/* Archive detail page - matching Vue ArchiveDetail.vue */
.archive-page .detail-card{margin:20px 0}
.archive-page .certified-card{border:2px solid #67c23a}
.archive-page .certified-card .el-card__header{background:linear-gradient(135deg,#f0fff4 0%,#dcfce7 100%)}
.archive-page .certified-text{color:#67c23a !important;font-weight:600}
.archive-page .status-text{font-size:16px;color:#606266;font-weight:500;margin-left:12px}
/* El descriptions - matching Vue */
.el-descriptions{margin:16px 0}
.el-descriptions__title{font-size:16px;font-weight:600;color:#303133;margin-bottom:12px}
.el-descriptions__table{width:100%;border-collapse:collapse;border:1px solid #e4e7ed;border-radius:6px}
.el-descriptions__table th,.el-descriptions__table td{padding:12px 16px;border:1px solid #e4e7ed;font-size:14px}
.el-descriptions__table th{background:#fafafa;color:#909399;font-weight:normal;width:100px;text-align:left}
.el-descriptions__table td{color:#303133}
.el-descriptions__table td.amount{color:#F56C6C;font-weight:600;font-size:18px}
/* El divider - matching Vue */
.el-divider{display:flex;align-items:center;gap:8px;margin:24px 0 16px;color:#303133;font-size:15px;font-weight:500}
.el-divider::before,.el-divider::after{content:'';flex:1;height:1px;background:#e4e7ed}
.el-divider::before{max-width:20px}
/* Evidence grid - matching Vue image grid */
.evidence-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.evidence-image{position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;background:#f5f7fa;cursor:pointer;transition:transform .3s;box-shadow:0 2px 12px rgba(0,0,0,.1)}
.evidence-image:hover{transform:scale(1.02);box-shadow:0 4px 20px rgba(0,0,0,.15)}
.evidence-image img{width:100%;height:100%;object-fit:cover}
.evidence-image .image-slot{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:#909399;background:#f5f7fa}
.evidence-image .image-slot i{font-size:32px;margin-bottom:8px}
/* Tags section */
.tags-section{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
/* Detail text */
.detail-text{line-height:1.8;font-size:15px;margin:0;color:#606266;word-wrap:break-word;word-break:break-all;white-space:pre-wrap}
/* Action buttons - matching Vue */
.action-buttons{display:flex;gap:16px;margin-top:32px;padding-top:24px;border-top:1px solid #e4e7ed;flex-wrap:wrap}
.action-buttons .btn{flex:1;min-width:140px}
/* Timeline card in archive */
.timeline-card{background:#f5f7fa;padding:12px 16px;border-radius:8px;cursor:pointer;transition:all .2s}
.timeline-card:hover{background:#ecf5ff}
.timeline-card p{margin:0 0 8px}
.timeline-desc{color:#606266;font-size:14px}
/* Button plain variants */
.btn-primary-plain{background:#ecf5ff;color:#409EFF;border:1px solid #b3d8ff}
.btn-primary-plain:hover{background:#409EFF;color:#fff}
.btn-success-plain{background:#f0f9eb;color:#67C23A;border:1px solid #c2e7b0}
.btn-success-plain:hover{background:#67C23A;color:#fff}
.btn-warning-plain{background:#fdf6ec;color:#E6A23C;border:1px solid #f5dab1}
.btn-warning-plain:hover{background:#E6A23C;color:#fff}
.btn-info{background:#909399;color:#fff;border:none}
.btn-info:hover{background:#a6a9ad}
/* Element Plus Form styles - matching Vue ReportForm.vue */
.el-form{}
.el-form--large .el-form-item__label{font-size:14px}
.el-form-item{margin-bottom:22px;display:flex;align-items:flex-start}
.el-form-item__label{flex-shrink:0;font-size:14px;color:#606266;font-weight:500;line-height:40px}
.el-form-item.is-required .el-form-item__label::after{content:'*';color:#F56C6C;margin-left:4px}
.el-form-item__content{flex:1;min-width:0}
/* Element Plus Input */
.el-input{position:relative;display:flex;width:100%}
.el-input__wrapper{display:flex;align-items:center;width:100%;background:#fff;border:1px solid #dcdfe6;border-radius:4px;padding:0 12px;height:40px;box-sizing:border-box;transition:border-color .2s}
.el-input__wrapper:focus-within{border-color:#409EFF}
.el-input__prefix{display:flex;align-items:center;margin-right:8px}
.el-input__prefix-inner{display:flex;align-items:center}
.el-input__prefix-inner i{font-size:16px}
.el-input--prefix .el-input__inner{padding-left:0}
.el-input--suffix .el-input__inner{padding-right:50px}
.el-input__icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:16px;color:#909399;z-index:1}
.el-input__inner{flex:1;height:100%;padding:0;border:none;font-size:14px;color:#606266;outline:none;background:transparent}
.el-input__inner:focus{border-color:transparent}
.el-input__inner::placeholder{color:#c0c4cc}
.el-input__suffix{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:14px;color:#909399}
/* Input group append */
.el-input-group{display:flex}
.el-input-group .el-input__wrapper{border-radius:4px 0 0 4px}
.el-input-group__append{display:flex;align-items:center;padding:0 16px;background:#f5f7fa;border:1px solid #dcdfe6;border-left:none;border-radius:0 4px 4px 0;color:#909399;font-size:14px;white-space:nowrap}
/* Element Plus Select */
.el-select{width:100%;height:40px;padding:0 12px;border:1px solid #dcdfe6;border-radius:4px;font-size:14px;color:#606266;background:#fff;outline:none;cursor:pointer}
.el-select:focus{border-color:#409EFF}
/* Element Plus Textarea */
.el-textarea__inner{width:100%;padding:12px;border:1px solid #dcdfe6;border-radius:4px;font-size:14px;color:#606266;outline:none;resize:vertical;min-height:120px;font-family:inherit;line-height:1.6}
.el-textarea__inner:focus{border-color:#409EFF}
.el-textarea__inner::placeholder{color:#c0c4cc}
/* Element Plus Row/Col Grid */
.el-row{display:flex;flex-wrap:wrap;margin:0 -10px}
.el-col{padding:0 10px;box-sizing:border-box}
.el-col-24{width:100%}
@media (min-width:768px){.el-col-md-12{width:50%}}
/* Element Plus Checkbox */
.el-checkbox{display:inline-flex;align-items:center;cursor:pointer;font-size:14px;color:#606266}
.el-checkbox__input{display:inline-flex;align-items:center;margin-right:8px}
.el-checkbox__original{width:16px;height:16px;accent-color:#409EFF;cursor:pointer}
.el-checkbox__label{display:inline}
/* Element Plus Link */
.el-link{color:inherit;text-decoration:none}
.el-link--primary{color:#409EFF}
.el-link--primary:hover{color:#66b1ff}
/* Element Plus Button */
.el-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:40px;padding:0 20px;border:1px solid #dcdfe6;border-radius:4px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;background:#fff;color:#606266}
.el-button:hover{color:#409EFF;border-color:#c6e2ff;background:#ecf5ff}
.el-button--large{height:44px;padding:0 24px;font-size:16px}
.el-button--primary{background:#409EFF;border-color:#409EFF;color:#fff}
.el-button--primary:hover{background:#66b1ff;border-color:#66b1ff}
.el-button--info{background:#909399;border-color:#909399;color:#fff}
.el-button--info:hover{background:#a6a9ad;border-color:#a6a9ad}
.el-button i{font-size:16px}
/* Element Plus Upload */
.el-upload--picture-card{width:120px;height:120px;border:1px dashed #dcdfe6;border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .2s}
.el-upload--picture-card:hover{border-color:#409EFF}
.upload-list{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px}
.upload-list .upload-item{position:relative;width:120px;height:120px;border-radius:6px;overflow:hidden;border:1px solid #dcdfe6}
.upload-list .upload-item img{width:100%;height:100%;object-fit:cover}
.upload-list .upload-item .remove-btn{position:absolute;top:4px;right:4px;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,.5);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px}
/* Element Plus Divider with text */
.el-divider--left{display:flex;align-items:center;margin:24px 0 16px;color:#303133;font-size:14px;font-weight:600}
.el-divider--left::before{content:'';width:20px;height:1px;background:#dcdfe6;margin-right:12px}
.el-divider--left::after{content:'';flex:1;height:1px;background:#dcdfe6;margin-left:12px}
.el-divider__text{white-space:nowrap}
/* Notice alert list */
.notice-alert{margin-bottom:24px}
.notice-list{margin:8px 0 0;padding-left:20px;line-height:1.8;list-style:disc}
.notice-list li{color:#606266}
/* Form buttons */
.form-buttons{display:flex;gap:12px;flex-wrap:wrap}
/* Query section in modal */
.query-section{display:flex;gap:12px;align-items:center;margin-bottom:16px}
/* Reports list in modal */
.reports-list{display:flex;flex-direction:column;gap:16px;max-height:400px;overflow-y:auto}
.report-item{background:#f5f7fa;border-radius:8px;padding:16px}
.report-item .report-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid #e4e7ed}
.report-item .report-title{display:flex;align-items:center;gap:10px}
.report-item .account{font-size:16px;font-weight:600;color:#303133}
.report-item .info-row{display:flex;align-items:flex-start;font-size:14px;margin-bottom:8px}
.report-item .info-row .label{color:#909399;min-width:80px}
.report-item .info-row .amount{color:#F56C6C;font-weight:600}
.report-item .detail-text{flex:1;line-height:1.6;color:#606266}
/* ========== Mobile Report Page Styles - matching MobileReport.vue ========== */
.mobile-report-page{min-height:calc(100vh - 56px);background:#f5f7fa;padding-bottom:76px}
.mobile-report-page .page-header{background:url('/mobile/img/topback.02ede43f.png') no-repeat center top;background-size:cover;padding:40px 16px;text-align:center;color:white;width:100%;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center}
.mobile-report-page .header-title{text-align:center;width:100%}
.mobile-report-page .header-title h2{display:none}
.mobile-report-page .header-title p{display:none}
.mobile-report-page .page-content{padding:12px;padding-bottom:64px}
.mobile-report-page .notice-section{background:#ecf5ff;border-radius:8px;padding:16px;margin-bottom:12px;border-left:4px solid #409eff}
.mobile-report-page .notice-header{font-size:15px;font-weight:600;color:#409eff;margin-bottom:12px}
.mobile-report-page .notice-section .notice-list{list-style:none;padding:0;margin:0}
.mobile-report-page .notice-section .notice-list li{font-size:13px;color:#606266;padding:6px 0;padding-left:16px;position:relative}
.mobile-report-page .notice-section .notice-list li:before{content:'•';position:absolute;left:0;color:#409eff}
.mobile-report-page .form-section{background:white;border-radius:8px;padding:16px}
.mobile-report-page .section-title{font-size:16px;font-weight:600;color:#303133;margin:20px 0 16px;padding-left:8px;border-left:3px solid #409eff}
.mobile-report-page .section-title:first-child{margin-top:0}
.mobile-report-page .form-group{margin-bottom:16px}
.mobile-report-page .form-group label{display:block;font-size:14px;color:#606266;margin-bottom:8px}
.mobile-report-page .required{color:#f56c6c}
.mobile-report-page .form-group input,.mobile-report-page .form-group select,.mobile-report-page .form-group textarea{width:100%;padding:12px;border:1px solid #dcdfe6;border-radius:4px;font-size:14px;font-family:inherit;box-sizing:border-box}
.mobile-report-page .form-group input:focus,.mobile-report-page .form-group select:focus,.mobile-report-page .form-group textarea:focus{outline:none;border-color:#409eff}
.mobile-report-page .char-count{text-align:right;font-size:12px;color:#909399;margin-top:4px}
.mobile-report-page .checkbox-group{margin:20px 0}
.mobile-report-page .checkbox-label{display:flex;align-items:center;gap:8px;font-size:14px;color:#606266}
.mobile-report-page .checkbox-label input[type="checkbox"]{width:18px;height:18px}
.mobile-report-page .button-group{display:flex;gap:12px;margin-top:24px}
.mobile-report-page .btn-primary,.mobile-report-page .btn-default{flex:1;height:44px;border:none;border-radius:4px;font-size:15px;font-weight:500;cursor:pointer}
.mobile-report-page .btn-primary{background:#409eff;color:white}
.mobile-report-page .btn-primary:disabled{background:#c0c4cc;cursor:not-allowed}
.mobile-report-page .btn-default{background:#f5f7fa;color:#606266}
.mobile-report-page .upload-area{margin-top:8px}
.mobile-report-page .image-preview-list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.mobile-report-page .image-preview-item{position:relative;width:100%;padding-bottom:100%;background:#f5f7fa;border-radius:6px;overflow:hidden}
.mobile-report-page .image-preview-item img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}
.mobile-report-page .image-preview-item .remove-btn{position:absolute;top:4px;right:4px;width:24px;height:24px;background:rgba(0,0,0,0.6);color:white;border:none;border-radius:50%;font-size:18px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.mobile-report-page .upload-btn{width:100%;padding-bottom:100%;background:#f5f7fa;border:2px dashed #dcdfe6;border-radius:6px;cursor:pointer;position:relative;box-sizing:border-box}
.mobile-report-page .upload-btn .upload-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-70%);font-size:28px;color:#909399;line-height:1}
.mobile-report-page .upload-btn .upload-text{position:absolute;top:50%;left:50%;transform:translate(-50%,30%);font-size:12px;color:#909399;white-space:nowrap}
.mobile-report-page .upload-hint{font-size:12px;color:#909399;line-height:1.6;margin-top:12px;padding:8px 12px;background:#f5f7fa;border-radius:4px}
/* Mobile bottom navigation bar - matching MobileNavBar.vue */
.mobile-nav{position:fixed;bottom:0;left:0;right:0;height:56px;background:white;border-top:1px solid #e4e7ed;display:flex;z-index:1000;box-shadow:0 -2px 8px rgba(0,0,0,0.08)}
.mobile-nav .nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#909399;text-decoration:none;transition:all .3s;position:relative}
.mobile-nav .nav-item.active{color:#409eff}
.mobile-nav .nav-item.active::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:30px;height:3px;background:#409eff;border-radius:0 0 3px 3px}
.mobile-nav .nav-text{font-size:11px;font-weight:500;margin-top:2px}
.mobile-nav .nav-item:active{background:rgba(64,158,255,0.05)}
.mobile-nav .nav-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;transition:transform .3s}
.mobile-nav .nav-icon svg{width:20px;height:20px}
.mobile-nav .nav-item.active .nav-icon{transform:scale(1.1)}
.mobile-nav .nav-item.nav-report{color:#ee5a24;position:relative}
.mobile-nav .nav-item.nav-report .nav-icon{color:#ee5a24;animation:pulse 2s infinite}
.mobile-nav .nav-item.nav-report .nav-icon svg{fill:#ee5a24}
.mobile-nav .nav-item.nav-report .nav-text{color:#ee5a24;font-weight:600}
.mobile-nav .nav-item.nav-report::after{content:'';position:absolute;top:6px;right:50%;transform:translateX(14px);width:6px;height:6px;background:#ff4757;border-radius:50%;animation:blink 1.5s infinite}
.mobile-nav .nav-item.nav-report.active{color:#d63031}
.mobile-nav .nav-item.nav-report.active .nav-icon,.mobile-nav .nav-item.nav-report.active .nav-icon svg,.mobile-nav .nav-item.nav-report.active .nav-text{color:#d63031;fill:#d63031}
.mobile-nav .nav-item.nav-report.active::before{background:#ee5a24}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
/* Mobile footer - matching MobileLayout.vue */
.mobile-footer{background:#f8f9fa;padding:20px 16px 24px;text-align:center;border-top:1px solid #e4e7ed;margin-top:auto}
.mobile-footer .footer-logo{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:8px}
.mobile-footer .footer-logo img{width:20px;height:20px}
.mobile-footer .footer-logo span{font-size:14px;font-weight:600;color:#303133}
.mobile-footer .footer-desc{font-size:12px;color:#909399;margin:0 0 12px;line-height:1.5}
.mobile-footer .footer-copyright{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;font-size:11px;color:#909399}
.mobile-footer .footer-copyright a{color:#409eff;text-decoration:none}
.mobile-footer .footer-extra{font-size:11px;color:#c0c4cc;margin:8px 0 0}
/* Hide PC/Mobile content based on device */
.pc-only{display:block}
.mobile-only{display:none}
@media (max-width:768px){
.header-inner{padding:10px 0}
.nav{display:none}
.menu-btn{display:block}
.footer-main{flex-direction:column;gap:24px}
.footer-right{flex-direction:column;gap:24px}
.search-hero{padding:30px 16px}
.search-hero h2{font-size:22px}
/* PC端搜索框在移动端的样式，不影响移动端页面 */
.search-card .search-box{flex-direction:column;border-radius:12px}
.search-card .search-box .btn{border-radius:0 0 12px 12px}
.stats-row{gap:20px}
.stat-value{font-size:22px}
.recorded-item{flex-direction:column;align-items:flex-start;gap:10px}
.item-left{width:100%;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.item-center{display:none}
.item-right{width:100%;flex-direction:row;justify-content:space-between;padding-top:10px;border-top:1px solid #f0f2f5}
/* 移动端丝带标签样式 */
.status-ribbon{padding:4px 14px 4px 12px;font-size:11px;letter-spacing:.5px}
.status-ribbon::before{width:8px}
.status-ribbon i{margin-right:4px;font-size:11px}
.filter-row{flex-direction:column}
.filter-row .input,.filter-row .select{max-width:100%;width:100%}
.records-grid{grid-template-columns:1fr}
.detail-header{flex-direction:column;text-align:center}
.detail-level{margin:16px 0 0}
.form-grid{grid-template-columns:1fr}
.steps{flex-direction:column;gap:20px}
.steps::before{display:none}
.merchant-grid{grid-template-columns:1fr}
.fee-grid{grid-template-columns:1fr}
.level-grid{grid-template-columns:1fr}
.action-bar{flex-direction:column}
.action-bar .btn{width:100%}
.card-header h3{font-size:15px}
.search-hero h2 i{font-size:22px}
.benefit-grid{grid-template-columns:repeat(2,1fr)}
.result-table{width:100%;border-collapse:collapse}
.result-table th,.result-table td{padding:12px;text-align:left;border:1px solid #e4e7ed}
.result-table thead tr{background:#f5f7fa}
.result-table tbody tr:hover{background:#f5f7fa;cursor:pointer}
.result-item{border:1px solid #e4e7ed;border-radius:8px;padding:12px;background:#fff;margin-bottom:12px}
.result-item .item-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid #f0f2f5}
.result-item .account{font-size:16px;font-weight:600;color:#303133}
.result-item .item-info{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.result-item .info-row{display:flex;align-items:center;gap:8px;font-size:14px}
.result-item .info-row .label{color:#909399;min-width:40px}
.result-item .detail-btn{width:100%;justify-content:center}
.mobile-result-list{display:flex;flex-direction:column;gap:12px}
/* Report form mobile */
.report-page .el-card__header .card-header h2{font-size:22px}
.form-buttons{flex-direction:column}
.form-buttons .el-button{width:100%}
.query-section{flex-direction:column;align-items:stretch}
.query-section .el-input{max-width:100% !important}
.report-item .report-header{flex-direction:column;align-items:flex-start;gap:8px}
/* Mobile/PC visibility */
.pc-only{display:none}
.mobile-only{display:block}
}
/* Responsive visibility classes */
@media (min-width:769px){
.hidden-md-and-up{display:none !important}
.hidden-sm-and-down{display:block !important}
}
@media (max-width:768px){
.hidden-md-and-up{display:block !important}
.hidden-sm-and-down{display:none !important}
}
/* Main content area */
.main-content{min-height:calc(100vh - 200px);padding:24px 16px;background:linear-gradient(to bottom,#f5f7fa 0%,#fff 100%)}
/* Footer nav grid - matching Vue Layout.vue */
.footer-nav h4{margin:0 0 16px;font-size:15px;color:#303133;font-weight:600;padding-left:8px;border-left:3px solid var(--primary)}
.footer-nav-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.footer-nav-grid a{display:flex;align-items:center;gap:8px;padding:8px 12px;color:#606266;border-radius:6px;transition:all .3s;cursor:pointer;font-size:14px}
.footer-nav-grid a:hover{background:#ecf5ff;color:var(--primary)}
.footer-nav-grid i{font-size:16px}
/* Footer bottom - matching Vue Layout.vue */
.footer-bottom{text-align:center;padding:20px 0;margin-top:24px;border-top:1px solid var(--border);color:#909399;font-size:13px;display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;background:#fafafa;margin-left:-32px;margin-right:-32px;margin-bottom:-24px}
.footer-bottom a{color:#909399;text-decoration:none}
.footer-bottom a:hover{color:var(--primary)}
.footer-divider{color:#dcdfe6;font-weight:300}
/* Header left with icon for recorded section */
.header-left{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:600;color:#303133}
/* Recorded card footer */
.recorded-footer{text-align:center;margin-top:16px;padding-top:16px;border-top:1px solid #e4e7ed}
/* Footer contact links - matching Vue Layout.vue */
.footer-contact{display:flex;flex-direction:column;gap:10px}
.footer-contact a{display:flex;align-items:center;gap:8px;color:#606266;text-decoration:none;font-size:14px;transition:all .3s;width:fit-content;padding:6px 0}
.footer-contact a:hover{color:var(--primary);transform:translateX(4px)}
/* Footer logo styling */
.footer-logo{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.footer-logo img{width:24px;height:24px}
.footer-logo span{font-size:18px;font-weight:700;color:#303133}
/* Element Plus card style - matching Vue */
.el-card{background:#fff;border:1px solid var(--border);border-radius:10px;overflow:hidden;margin-bottom:20px;box-shadow:0 2px 12px rgba(0,0,0,.05)}
.el-card:hover{box-shadow:0 2px 16px rgba(0,0,0,.08)}
.el-card__header{padding:16px 20px;border-bottom:1px solid var(--border);background:#fafafa}
.el-card__header .card-header{display:flex;justify-content:space-between;align-items:center}
.el-card__header .card-header h2{margin:0;font-size:20px;font-weight:600;color:#303133;display:flex;align-items:center;gap:12px}
.el-card__header .card-header .tips{margin:8px 0 0;color:#909399;font-size:14px}
.el-card__body{padding:20px}
/* Records page specific styles */
.records-page .stats-info{display:flex;justify-content:space-around;padding:10px 0}
.records-page .stat-item{text-align:center}
.records-page .stat-label{font-size:13px;color:#909399;display:block;margin-bottom:4px}
.records-page .stat-value{font-size:24px;font-weight:700;color:#303133}
.records-page .stat-value.danger{color:#F56C6C}
.records-page .stat-value.warning{color:#E6A23C}
.records-page .stat-value.success{color:#67C23A}
.filter-header,.records-header{display:flex;align-items:center;justify-content:space-between}
.filter-form .filter-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.el-input{width:200px;padding:10px 12px;border:1px solid var(--border);border-radius:6px;outline:none;font-size:14px;transition:border-color .2s}
.el-input:focus{border-color:var(--primary)}
.el-select{padding:10px 12px;border:1px solid var(--border);border-radius:6px;background:#fff;font-size:14px;outline:none;min-width:140px}
.el-select:focus{border-color:var(--primary)}
.filter-buttons{display:flex;gap:8px}
.sort-buttons{display:flex;gap:8px}
.el-empty{text-align:center;padding:40px 0;color:#909399}
.el-empty__description{font-size:14px}
/* ========== Mobile Home Page Styles - matching MobileHome.vue ========== */
.mobile-home-page{min-height:calc(100vh - 56px);background:#f5f7fa;padding-bottom:76px;width:100% !important;max-width:100% !important;box-sizing:border-box !important}
.mobile-home-page .page-header{background:url('/mobile/img/sou.f16ccb55.png') no-repeat center top;background-size:cover;position:relative;width:100% !important;max-width:100% !important}
.mobile-home-page .header-card{padding:160px 16px 20px;position:relative;z-index:1;width:100% !important;max-width:100% !important;box-sizing:border-box !important}
.mobile-home-page .header-title{text-align:center;margin-bottom:20px;width:100% !important}
.mobile-home-page .header-title h2{display:none}
.mobile-home-page .header-title p{display:none}
.mobile-home-page .search-section{margin-bottom:16px;width:100% !important;max-width:100% !important;box-sizing:border-box !important}
.mobile-home-page .search-box{display:flex !important;flex-direction:row !important;gap:8px !important;margin-bottom:16px;width:100%}
.mobile-home-page .search-box input{flex:1 1 auto !important;height:44px !important;border:1px solid #dcdfe6 !important;border-radius:4px !important;padding:0 15px !important;font-size:14px !important;background:#fff !important;min-width:0 !important;max-width:none !important;box-sizing:border-box !important}
.mobile-home-page .search-box button{width:80px !important;min-width:80px !important;flex:0 0 80px !important;height:44px !important;background:#409eff !important;color:white !important;border:none !important;border-radius:4px !important;font-size:15px !important;font-weight:500 !important;cursor:pointer}
.mobile-home-page .type-buttons{display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;gap:8px !important;margin-bottom:16px !important;width:100%}
.mobile-home-page .type-btn{flex:1 1 0 !important;min-width:0 !important;height:40px !important;border:1px solid #dcdfe6 !important;background:white !important;border-radius:4px !important;display:flex !important;flex-direction:row !important;align-items:center !important;justify-content:center !important;gap:4px !important;font-size:12px !important;cursor:pointer !important;padding:0 4px !important;overflow:hidden !important}
.mobile-home-page .type-btn .nav-icon{display:none !important}
.mobile-home-page .type-btn i{font-size:14px !important;flex-shrink:0}
.mobile-home-page .type-btn svg{width:14px !important;height:14px !important;flex-shrink:0}
.mobile-home-page .type-btn span{white-space:nowrap !important;font-size:12px !important;overflow:hidden !important;text-overflow:ellipsis !important}
.mobile-home-page .type-btn.qq{color:#409eff !important;border-color:#b3d8ff !important}
.mobile-home-page .type-btn.qq svg,.mobile-home-page .type-btn.qq svg path{fill:#409eff !important;color:#409eff !important}
.mobile-home-page .type-btn.wechat{color:#67c23a !important;border-color:#c2e7b0 !important}
.mobile-home-page .type-btn.wechat svg,.mobile-home-page .type-btn.wechat svg path{fill:#67c23a !important;color:#67c23a !important}
.mobile-home-page .type-btn.phone{color:#e6a23c !important;border-color:#f5dab1 !important}
.mobile-home-page .type-btn.phone svg,.mobile-home-page .type-btn.phone svg path{fill:#e6a23c !important;color:#e6a23c !important}
.mobile-home-page .stats-section{display:flex !important;flex-direction:row !important;justify-content:center !important;align-items:center !important;padding:16px 12px !important;border-top:1px solid #e4e7ed !important;background:rgba(255,255,255,0.95) !important;border-radius:8px !important;margin-top:8px !important}
.mobile-home-page .stats-section .stat-item{flex:1 !important;text-align:center !important;display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important}
.mobile-home-page .stats-section .stat-value{font-size:24px !important;color:#165dff !important;font-weight:600 !important;margin-bottom:4px !important;line-height:1 !important}
.mobile-home-page .stats-section .stat-label{font-size:12px !important;color:#909399 !important;line-height:1 !important}
.mobile-home-page .page-content{padding:12px;padding-bottom:64px}
.mobile-home-page .result-section,.mobile-home-page .recent-section,.mobile-home-page .tips-section{background:white;border-radius:8px;margin-bottom:12px;padding:16px}
.mobile-home-page .section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;font-size:16px;font-weight:600;color:#303133}
.mobile-home-page .badge{font-size:12px;padding:2px 8px;border-radius:3px;font-weight:normal}
.mobile-home-page .badge.danger{background:#fef0f0;color:#f56c6c}
.mobile-home-page .badge.success{background:#f0f9ff;color:#67c23a}
.mobile-home-page .badge.update{background:#fef0f0;color:#f56c6c}
.mobile-home-page .result-card{border:1px solid #e4e7ed;border-radius:6px;padding:12px;margin-bottom:12px}
.mobile-home-page .result-card:last-child{margin-bottom:0}
.mobile-home-page .result-card .card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid #f0f2f5}
.mobile-home-page .result-card .card-header-left{display:flex;align-items:center;gap:8px}
.mobile-home-page .result-card .account{font-size:15px;font-weight:600;color:#303133}
.mobile-home-page .level-badge{padding:2px 10px;border-radius:3px;font-size:12px;font-weight:600}
.mobile-home-page .level-badge.small{padding:1px 6px;font-size:11px}
.mobile-home-page .level-badge.level-A,.mobile-home-page .level-A{background:#f0f9eb;color:#67c23a}
.mobile-home-page .level-badge.level-B,.mobile-home-page .level-B{background:#fdf6ec;color:#e6a23c}
.mobile-home-page .level-badge.level-C,.mobile-home-page .level-badge.level-D,.mobile-home-page .level-C,.mobile-home-page .level-D{background:#fef0f0;color:#f56c6c}
.mobile-home-page .type-badge{padding:2px 8px;border-radius:3px;font-size:12px}
.mobile-home-page .type-badge.small{padding:1px 6px;font-size:11px}
.mobile-home-page .type-qq{background:#ecf5ff;color:#409eff}
.mobile-home-page .type-wechat{background:#f0f9ff;color:#67c23a}
.mobile-home-page .type-phone{background:#fdf6ec;color:#e6a23c}
.mobile-home-page .info-line{display:flex;align-items:center;font-size:13px;margin-bottom:8px}
.mobile-home-page .info-line:last-child{margin-bottom:0}
.mobile-home-page .info-line .label{color:#909399;min-width:50px}
.mobile-home-page .info-line .amount{color:#f56c6c;font-weight:600}
.mobile-home-page .empty-result{text-align:center;padding:40px 20px}
.mobile-home-page .empty-icon{width:60px;height:60px;line-height:60px;margin:0 auto 16px;background:#f0f9ff;color:#67c23a;border-radius:50%;font-size:32px}
.mobile-home-page .safe-btn{margin-top:16px;padding:8px 24px;background:#67c23a;color:white;border:none;border-radius:4px;cursor:pointer}
.mobile-home-page .recent-item{display:flex;flex-direction:column;padding:12px;background:#f5f7fa;border-radius:8px;margin-bottom:10px;gap:8px}
.mobile-home-page .recent-item:last-child{margin-bottom:0}
.mobile-home-page .item-row-1{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.mobile-home-page .item-row-1 .account{font-size:14px;font-weight:600;color:#303133}
.mobile-home-page .item-row-1 .status-tag{margin-left:auto}
.mobile-home-page .item-row-1 .status-ribbon{margin-left:auto}
.mobile-home-page .item-row-2{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding-left:42px}
.mobile-home-page .avatar-wrapper{width:36px;height:36px;flex-shrink:0}
.mobile-home-page .avatar-img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:2px solid #409eff;box-shadow:0 2px 6px rgba(64,158,255,0.3)}
.mobile-home-page .avatar-icon{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;box-shadow:0 2px 6px rgba(0,0,0,0.1)}
.mobile-home-page .avatar-icon.wechat{background:linear-gradient(135deg,#67c23a,#5fb236);color:white;border:2px solid #67c23a}
.mobile-home-page .avatar-icon.phone{background:linear-gradient(135deg,#e6a23c,#d89a36);color:white;border:2px solid #e6a23c}
.mobile-home-page .avatar-icon.default{background:linear-gradient(135deg,#909399,#808389);color:white;border:2px solid #909399}
.mobile-home-page .amount{color:#f56c6c;font-weight:600;font-size:14px}
.mobile-home-page .date{font-size:12px;color:#909399}
.mobile-home-page .section-footer{text-align:center;margin-top:12px;padding-top:12px;border-top:1px solid #e4e7ed}
.mobile-home-page .more-btn{color:#409eff;background:none;border:none;font-size:14px;cursor:pointer}
.mobile-home-page .tips-header{font-size:14px;color:#409eff;margin-bottom:12px;font-weight:600}
.mobile-home-page .tips-section .tips-list{list-style:none;padding:0;margin:0;color:#606266;font-size:13px;line-height:2}
.mobile-home-page .tips-section .tips-list li:before{content:'• ';color:#409eff;margin-right:6px}
/* ========== Mobile Level Page Styles ========== */
.mobile-level-page{min-height:calc(100vh - 56px);background:#f5f7fa;padding-bottom:76px}
.mobile-level-page .page-header{background:url('/mobile/img/gradeback.236d2eb9.png') no-repeat center top;background-size:cover;padding:160px 16px 20px;text-align:center;color:white}
.mobile-level-page .page-header h2{display:none}
.mobile-level-page .page-header p{display:none}
.mobile-level-page .page-content{padding:12px;padding-bottom:64px}
.mobile-level-page .intro-section{background:#ecf5ff;border-radius:8px;padding:16px;margin-bottom:12px;display:flex;gap:12px;border-left:4px solid #409eff}
.mobile-level-page .intro-icon{font-size:24px;flex-shrink:0}
.mobile-level-page .intro-text{flex:1}
.mobile-level-page .intro-title{font-size:15px;font-weight:600;color:#409eff;margin-bottom:6px}
.mobile-level-page .intro-text p{font-size:13px;color:#606266;line-height:1.6;margin:0}
.mobile-level-page .level-card{background:white;border-radius:8px;padding:16px;margin-bottom:12px}
.mobile-level-page .level-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.mobile-level-page .level-info{display:flex;flex-direction:column;gap:6px}
.mobile-level-page .level-title{font-size:16px;font-weight:600;color:#303133}
.mobile-level-page .level-badge{display:inline-block;padding:4px 12px;border-radius:4px;font-size:14px;font-weight:600;color:white;width:fit-content}
.mobile-level-page .level-a .level-badge{background:#67c23a}
.mobile-level-page .level-b .level-badge{background:#e6a23c}
.mobile-level-page .level-c .level-badge{background:#f56c6c}
.mobile-level-page .level-d .level-badge{background:#c70000}
.mobile-level-page .level-status-tag{position:relative;padding:8px 16px 8px 12px;border-radius:4px 18px 18px 4px;font-size:13px;font-weight:600;white-space:nowrap;transform:rotate(-3deg);letter-spacing:0.5px;margin-left:8px}
.mobile-level-page .level-status-tag::before{content:'';position:absolute;left:-6px;top:50%;transform:translateY(-50%);width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-right:8px solid currentColor}
.mobile-level-page .status-good{background:linear-gradient(135deg,#67c23a 0%,#85ce61 100%);color:#fff;box-shadow:3px 4px 10px rgba(103,194,58,0.5)}
.mobile-level-page .status-good::before{border-right-color:#67c23a}
.mobile-level-page .status-normal{background:linear-gradient(135deg,#e6a23c 0%,#f0b961 100%);color:#fff;box-shadow:3px 4px 10px rgba(230,162,60,0.5)}
.mobile-level-page .status-normal::before{border-right-color:#e6a23c}
.mobile-level-page .status-warning{background:linear-gradient(135deg,#f56c6c 0%,#f89898 100%);color:#fff;box-shadow:3px 4px 10px rgba(245,108,108,0.5)}
.mobile-level-page .status-warning::before{border-right-color:#f56c6c}
.mobile-level-page .status-danger{background:linear-gradient(135deg,#c70000 0%,#e53935 100%);color:#fff;box-shadow:3px 4px 10px rgba(199,0,0,0.5)}
.mobile-level-page .status-danger::before{border-right-color:#c70000}
.mobile-level-page .risk-stars{margin:12px 0;font-size:20px}
.mobile-level-page .star{color:#dcdfe6;margin-right:4px}
.mobile-level-page .star.active{color:#ff9900}
.mobile-level-page .level-features{margin:16px 0}
.mobile-level-page .feature-item{padding:8px 0;font-size:14px;color:#606266;border-bottom:1px solid #f0f2f5}
.mobile-level-page .feature-item:last-child{border-bottom:none}
.mobile-level-page .level-suggestion{padding:12px;border-radius:6px;font-size:13px;line-height:1.6;margin-top:12px}
.mobile-level-page .level-suggestion.success{background:#f0f9ff;color:#67c23a;border-left:3px solid #67c23a}
.mobile-level-page .level-suggestion.warning{background:#fdf6ec;color:#e6a23c;border-left:3px solid #e6a23c}
.mobile-level-page .level-suggestion.danger{background:#fef0f0;color:#f56c6c;border-left:3px solid #f56c6c}
.mobile-level-page .faq-section{background:white;border-radius:8px;padding:16px}
.mobile-level-page .section-header{font-size:16px;font-weight:600;color:#303133;margin-bottom:16px;padding-left:8px;border-left:3px solid #409eff}
.mobile-level-page .faq-item{margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid #f0f2f5}
.mobile-level-page .faq-item:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}
.mobile-level-page .faq-question{font-size:15px;font-weight:600;color:#303133;margin-bottom:8px}
.mobile-level-page .faq-answer{font-size:13px;color:#606266;line-height:1.6}
/* ========== Mobile Records Page Styles ========== */
.mobile-records-page{min-height:calc(100vh - 56px);background:#f5f7fa;padding-bottom:76px}
.mobile-records-page .page-header{background:linear-gradient(135deg,#409EFF 0%,#5B8EFF 100%);padding:20px 16px;text-align:center;color:white}
.mobile-records-page .page-header h2{font-size:20px;margin:0 0 6px}
.mobile-records-page .page-header p{font-size:13px;opacity:0.9;margin:0}
.mobile-records-page .page-content{padding:12px;padding-bottom:64px}
.mobile-records-page .stats-section{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:12px}
.mobile-records-page .stat-card{background:white;border-radius:8px;padding:16px;text-align:center}
.mobile-records-page .stat-card .stat-value{font-size:24px;font-weight:700;color:#409eff;margin-bottom:4px}
.mobile-records-page .stat-card .stat-value.danger{color:#f56c6c}
.mobile-records-page .stat-card .stat-value.warning{color:#e6a23c}
.mobile-records-page .stat-card .stat-value.success{color:#67c23a}
.mobile-records-page .stat-card .stat-label{font-size:13px;color:#909399}
.mobile-records-page .filter-section,.mobile-records-page .records-section{background:white;border-radius:8px;padding:16px;margin-bottom:12px}
.mobile-records-page .section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;font-size:16px;font-weight:600;color:#303133}
.mobile-records-page .badge{font-size:12px;padding:2px 8px;border-radius:3px;font-weight:normal}
.mobile-records-page .badge.info{background:#ecf5ff;color:#409eff}
.mobile-records-page .badge.update{background:#fef0f0;color:#f56c6c}
.mobile-records-page .filter-form{display:flex;flex-direction:column;gap:12px}
.mobile-records-page .filter-input,.mobile-records-page .filter-select{width:100%;height:44px;border:1px solid #dcdfe6;border-radius:4px;padding:0 15px;font-size:14px;box-sizing:border-box}
.mobile-records-page .filter-buttons{display:grid;grid-template-columns:2fr 1fr;gap:8px}
.mobile-records-page .filter-buttons .btn-primary,.mobile-records-page .filter-buttons .btn-default{height:44px;border:none;border-radius:4px;font-size:15px;font-weight:500;cursor:pointer}
.mobile-records-page .filter-buttons .btn-primary{background:#409eff;color:white}
.mobile-records-page .filter-buttons .btn-default{background:#f5f7fa;color:#606266}
.mobile-records-page .sort-section{margin-bottom:12px}
.mobile-records-page .sort-buttons{display:flex;gap:8px}
.mobile-records-page .sort-btn{flex:1;height:40px;background:white;border:1px solid #dcdfe6;border-radius:4px;font-size:14px;color:#606266;cursor:pointer}
.mobile-records-page .sort-btn.active{background:#409eff;color:white;border-color:#409eff}
.mobile-records-page .records-list{display:flex;flex-direction:column;gap:8px}
.mobile-records-page .record-item{display:flex;flex-direction:column;padding:12px;background:#f5f7fa;border-radius:8px;gap:8px;cursor:pointer}
.mobile-records-page .item-row-1{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.mobile-records-page .item-row-1 .status-tag{margin-left:auto}
.mobile-records-page .item-row-1 .status-ribbon{margin-left:auto}
.mobile-records-page .item-row-2{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding-left:42px}
.mobile-records-page .avatar-wrapper{width:36px;height:36px;flex-shrink:0}
.mobile-records-page .avatar-img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:2px solid #409eff;box-shadow:0 2px 6px rgba(64,158,255,0.3)}
.mobile-records-page .avatar-icon{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;box-shadow:0 2px 6px rgba(0,0,0,0.1)}
.mobile-records-page .avatar-icon.wechat{background:linear-gradient(135deg,#67c23a,#5fb236);color:white;border:2px solid #67c23a}
.mobile-records-page .avatar-icon.phone{background:linear-gradient(135deg,#e6a23c,#d89a36);color:white;border:2px solid #e6a23c}
.mobile-records-page .avatar-icon.default{background:linear-gradient(135deg,#909399,#808389);color:white;border:2px solid #909399}
.mobile-records-page .level-badge{padding:2px 6px;border-radius:3px;font-size:11px;font-weight:600;flex-shrink:0}
.mobile-records-page .level-A{background:#f0f9ff;color:#67c23a}
.mobile-records-page .level-B{background:#fdf6ec;color:#e6a23c}
.mobile-records-page .level-C,.mobile-records-page .level-D{background:#fef0f0;color:#f56c6c}
.mobile-records-page .account{font-size:14px;font-weight:600;color:#303133}
.mobile-records-page .type-badge{padding:1px 6px;border-radius:3px;font-size:11px}
.mobile-records-page .type-qq{background:#ecf5ff;color:#409eff}
.mobile-records-page .type-wechat{background:#f0f9ff;color:#67c23a}
.mobile-records-page .type-phone{background:#fdf6ec;color:#e6a23c}
.mobile-records-page .amount{color:#f56c6c;font-weight:600;font-size:14px}
.mobile-records-page .date{font-size:12px;color:#909399}
.mobile-records-page .empty-result{text-align:center;padding:40px 20px}
.mobile-records-page .empty-icon{font-size:48px;margin-bottom:12px}
.mobile-records-page .pagination{display:flex;align-items:center;justify-content:center;gap:12px;padding:16px}
.mobile-records-page .page-btn{padding:8px 16px;background:#409eff;color:white;border:none;border-radius:4px;font-size:14px;cursor:pointer}
.mobile-records-page .page-btn:disabled{background:#c0c4cc;cursor:not-allowed}
.mobile-records-page .page-info{font-size:14px;color:#606266}
/* ========== Mobile Escrow Page Styles ========== */
.mobile-escrow-page{min-height:calc(100vh - 56px);background:#f5f7fa;padding-bottom:76px}
.mobile-escrow-page .page-header{background:linear-gradient(135deg,#409EFF 0%,#5B8EFF 100%);padding:24px 16px;text-align:center;color:white}
.mobile-escrow-page .page-header h2{font-size:20px;margin:0 0 6px;font-weight:600}
.mobile-escrow-page .page-header p{font-size:13px;opacity:0.9;margin:0}
.mobile-escrow-page .page-content{padding:12px;padding-bottom:64px}
.mobile-escrow-page .section-card{background:white;border-radius:8px;padding:16px;margin-bottom:12px}
.mobile-escrow-page .section-header{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:#303133;margin-bottom:12px}
.mobile-escrow-page .section-header.warning{color:#e6a23c}
.mobile-escrow-page .section-header .icon{font-size:18px}
.mobile-escrow-page .declaration-box{background:#fdf6ec;border-radius:6px;padding:12px;font-size:13px;color:#e6a23c;line-height:1.6;border-left:3px solid #e6a23c}
.mobile-escrow-page .fee-cards{display:flex;flex-direction:column;gap:12px}
.mobile-escrow-page .fee-card{background:#f5f7fa;border-radius:8px;padding:14px;border:1px solid #e4e7ed}
.mobile-escrow-page .fee-title{font-size:15px;font-weight:600;color:#303133;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid #e4e7ed}
.mobile-escrow-page .fee-items{display:flex;flex-direction:column;gap:8px}
.mobile-escrow-page .fee-item{display:flex;align-items:center;gap:8px;font-size:13px;color:#606266}
.mobile-escrow-page .fee-item strong{color:#409eff;font-weight:600}
.mobile-escrow-page .check-icon{color:#67c23a;font-weight:bold}
.mobile-escrow-page .warning-icon{color:#e6a23c;font-weight:bold}
.mobile-escrow-page .info-icon{color:#409eff;font-weight:bold}
.mobile-escrow-page .user-icon{font-size:14px}
.mobile-escrow-page .process-list{display:flex;flex-direction:column;gap:16px}
.mobile-escrow-page .process-item{display:flex;gap:12px}
.mobile-escrow-page .process-number{width:28px;height:28px;min-width:28px;background:#409eff;color:white;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600}
.mobile-escrow-page .process-content{flex:1}
.mobile-escrow-page .process-content h4{font-size:15px;font-weight:600;color:#303133;margin:0 0 6px}
.mobile-escrow-page .process-content p{font-size:13px;color:#606266;margin:0 0 4px;line-height:1.5}
.mobile-escrow-page .verify-box{background:#ecf5ff;border-radius:6px;padding:12px;margin-top:8px}
.mobile-escrow-page .verify-box ul{list-style:none;padding:0;margin:0}
.mobile-escrow-page .verify-box li{font-size:13px;color:#606266;line-height:1.8;padding-left:16px;position:relative}
.mobile-escrow-page .verify-box li:before{content:'•';position:absolute;left:0;color:#409eff}
.mobile-escrow-page .verify-box li strong{color:#f56c6c}
.mobile-escrow-page .tips-section{background:#ecf5ff;border-radius:8px;padding:16px;margin-bottom:16px}
.mobile-escrow-page .tips-header{font-size:15px;font-weight:600;color:#409eff;margin-bottom:10px}
.mobile-escrow-page .tips-content p{font-size:13px;color:#606266;margin:0 0 6px;line-height:1.6}
.mobile-escrow-page .tips-content p:last-child{margin-bottom:0}
.mobile-escrow-page .action-buttons{display:flex;flex-direction:column;gap:12px;margin-bottom:24px}
.mobile-escrow-page .btn-primary{background:#409eff;color:white;border:none;border-radius:8px;padding:14px;font-size:16px;font-weight:500;cursor:pointer}
.mobile-escrow-page .btn-default{background:#f5f7fa;color:#606266;border:1px solid #dcdfe6;border-radius:8px;padding:14px;font-size:16px;cursor:pointer}
/* ========== Mobile Merchant Page Styles ========== */
.mobile-merchant-page{min-height:calc(100vh - 56px);background:#f5f7fa;padding-bottom:76px}
.mobile-merchant-page .page-header{background:url('/mobile/img/chainback.ca4a0415.png') no-repeat center top;background-size:cover;padding:160px 16px 20px;text-align:center;color:white}
.mobile-merchant-page .page-header h2{display:none}
.mobile-merchant-page .page-header p{display:none}
.mobile-merchant-page .page-content{padding:12px;padding-bottom:64px}
.mobile-merchant-page .search-section{margin-bottom:12px}
.mobile-merchant-page .search-box{display:flex;gap:8px}
.mobile-merchant-page .search-box input{flex:1;height:44px;border:1px solid #dcdfe6;border-radius:4px;padding:0 15px;font-size:14px;background:white}
.mobile-merchant-page .search-box button{width:80px;height:44px;background:#409eff;color:white;border:none;border-radius:4px;font-size:15px;font-weight:500}
.mobile-merchant-page .stats-section{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:12px}
.mobile-merchant-page .stat-card{background:white;border-radius:8px;padding:16px;text-align:center}
.mobile-merchant-page .stat-value{font-size:22px;font-weight:700;color:#409eff;margin-bottom:4px}
.mobile-merchant-page .stat-label{font-size:13px;color:#909399}
.mobile-merchant-page .merchant-list-section,.mobile-merchant-page .guide-section{background:white;border-radius:8px;padding:16px;margin-bottom:12px}
.mobile-merchant-page .section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;font-size:16px;font-weight:600;color:#303133}
.mobile-merchant-page .badge{font-size:12px;padding:2px 8px;border-radius:3px;font-weight:normal}
.mobile-merchant-page .badge.success{background:#f0f9ff;color:#67c23a}
.mobile-merchant-page .merchant-list{display:flex;flex-direction:column;gap:16px}
.mobile-merchant-page .merchant-card{border-radius:12px;overflow:hidden;background:white;box-shadow:0 2px 12px rgba(0,0,0,0.08);cursor:pointer;transition:all 0.3s}
.mobile-merchant-page .merchant-card:active{transform:scale(0.98);box-shadow:0 4px 16px rgba(0,0,0,0.12)}
.mobile-merchant-page .card-image{position:relative;width:100%;height:160px;overflow:hidden}
.mobile-merchant-page .card-image img{width:100%;height:100%;object-fit:cover;display:block}
.mobile-merchant-page .image-placeholder{width:100%;height:100%;background:#409EFF;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;position:relative}
.mobile-merchant-page .placeholder-avatar{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,0.2);display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:700;color:#fff;border:3px solid rgba(255,255,255,0.5)}
.mobile-merchant-page .placeholder-icon{position:absolute;bottom:12px;right:12px;opacity:0.25}
.mobile-merchant-page .placeholder-icon svg{width:36px;height:36px}
.mobile-merchant-page .deposit-badge{position:absolute;top:12px;right:12px;background:#67c23a;color:white;padding:5px 10px;border-radius:4px;font-size:12px;font-weight:600;display:flex;align-items:center;gap:4px}
.mobile-merchant-page .deposit-badge svg{flex-shrink:0}
.mobile-merchant-page .card-footer{padding:12px 16px}
.mobile-merchant-page .merchant-title{font-size:16px;font-weight:600;color:#303133;margin-bottom:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mobile-merchant-page .merchant-meta{display:flex;align-items:center;justify-content:space-between;font-size:13px}
.mobile-merchant-page .verified{display:inline-flex;align-items:center;gap:4px;color:#67c23a;font-weight:500;background:#f0f9eb;padding:3px 10px;border-radius:12px;font-size:12px}
.mobile-merchant-page .verified svg{flex-shrink:0}
.mobile-merchant-page .merchant-type{color:#606266;padding:3px 10px;background:#f5f7fa;border-radius:12px;font-size:12px}
.mobile-merchant-page .empty-result{text-align:center;padding:60px 20px;background:white;border-radius:8px}
.mobile-merchant-page .empty-icon{font-size:48px;margin-bottom:12px}
.mobile-merchant-page .empty-result p{color:#909399;font-size:14px}
.mobile-merchant-page .steps{display:flex;flex-direction:column;gap:16px}
.mobile-merchant-page .step-item{display:flex;gap:12px}
.mobile-merchant-page .step-number{width:32px;height:32px;background:linear-gradient(135deg,#409EFF 0%,#5B8EFF 100%);color:white;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;flex-shrink:0}
.mobile-merchant-page .step-content{flex:1}
.mobile-merchant-page .step-title{font-size:15px;font-weight:600;color:#303133;margin-bottom:4px}
.mobile-merchant-page .step-desc{font-size:13px;color:#909399}
/* ========== Mobile Appeal Page Styles ========== */
.mobile-appeal-page{min-height:calc(100vh - 56px);background:#f5f7fa;padding-bottom:76px}
.mobile-appeal-page .page-header{background:linear-gradient(135deg,#409EFF 0%,#5B8EFF 100%);padding:20px 16px;text-align:center;color:white}
.mobile-appeal-page .page-header h2{font-size:20px;margin:0 0 6px}
.mobile-appeal-page .page-header p{font-size:13px;opacity:0.9;margin:0}
.mobile-appeal-page .page-content{padding:12px;padding-bottom:64px}
.mobile-appeal-page .form-section,.mobile-appeal-page .process-section{background:white;border-radius:8px;padding:16px;margin-bottom:12px}
.mobile-appeal-page .section-title,.mobile-appeal-page .section-header{font-size:16px;font-weight:600;color:#303133;margin-bottom:16px;padding-left:8px;border-left:3px solid #409eff}
.mobile-appeal-page .form-group{margin-bottom:16px}
.mobile-appeal-page .form-group label{display:block;font-size:14px;color:#606266;margin-bottom:8px}
.mobile-appeal-page .required{color:#f56c6c}
.mobile-appeal-page .form-group input,.mobile-appeal-page .form-group textarea{width:100%;padding:12px;border:1px solid #dcdfe6;border-radius:4px;font-size:14px;font-family:inherit;box-sizing:border-box}
.mobile-appeal-page .form-group input:focus,.mobile-appeal-page .form-group textarea:focus{outline:none;border-color:#409eff}
.mobile-appeal-page .input-with-button{display:flex;gap:8px}
.mobile-appeal-page .input-with-button input{flex:1}
.mobile-appeal-page .input-with-button button{padding:0 20px;background:#409eff;color:white;border:none;border-radius:4px;font-size:14px;white-space:nowrap}
.mobile-appeal-page .input-with-button button:disabled{background:#c0c4cc}
.mobile-appeal-page .archive-info{background:#fff3e0;border-radius:6px;padding:12px;margin-bottom:16px;border-left:3px solid #e6a23c}
.mobile-appeal-page .info-header{font-size:14px;font-weight:600;color:#e6a23c;margin-bottom:10px}
.mobile-appeal-page .info-row{display:flex;align-items:center;padding:6px 0;font-size:13px}
.mobile-appeal-page .info-row .label{color:#909399;min-width:80px}
.mobile-appeal-page .badge{padding:2px 8px;border-radius:3px;font-size:12px}
.mobile-appeal-page .badge.type-QQ{background:#ecf5ff;color:#409eff}
.mobile-appeal-page .badge.type-微信{background:#f0f9ff;color:#67c23a}
.mobile-appeal-page .badge.type-手机{background:#fdf6ec;color:#e6a23c}
.mobile-appeal-page .badge.level-A{background:#f0f9ff;color:#67c23a}
.mobile-appeal-page .badge.level-B{background:#fdf6ec;color:#e6a23c}
.mobile-appeal-page .badge.level-C,.mobile-appeal-page .badge.level-D{background:#fef0f0;color:#f56c6c}
.mobile-appeal-page .amount{color:#f56c6c;font-weight:600}
.mobile-appeal-page .char-count{text-align:right;font-size:12px;color:#909399;margin-top:4px}
.mobile-appeal-page .upload-section{margin-top:8px}
.mobile-appeal-page .upload-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mobile-appeal-page .upload-item,.mobile-appeal-page .upload-btn{position:relative;width:100%;padding-bottom:100%;border:1px solid #dcdfe6;border-radius:4px;overflow:hidden}
.mobile-appeal-page .upload-item img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}
.mobile-appeal-page .upload-item .remove-btn{position:absolute;top:2px;right:2px;width:20px;height:20px;background:rgba(0,0,0,0.5);color:white;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer}
.mobile-appeal-page .upload-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;background:#f5f7fa;cursor:pointer}
.mobile-appeal-page .upload-icon{position:absolute;top:35%;left:50%;transform:translate(-50%,-50%);font-size:24px;color:#909399}
.mobile-appeal-page .upload-text{position:absolute;bottom:20%;left:50%;transform:translateX(-50%);font-size:12px;color:#909399}
.mobile-appeal-page .upload-tip{font-size:12px;color:#909399;margin-top:8px}
.mobile-appeal-page .button-group{display:flex;gap:12px;margin-top:24px}
.mobile-appeal-page .btn-primary,.mobile-appeal-page .btn-default{flex:1;height:44px;border:none;border-radius:4px;font-size:15px;font-weight:500}
.mobile-appeal-page .btn-primary{background:#409eff;color:white}
.mobile-appeal-page .btn-primary:disabled{background:#c0c4cc;cursor:not-allowed}
.mobile-appeal-page .btn-default{background:#f5f7fa;color:#606266}
.mobile-appeal-page .process-steps{display:flex;flex-direction:column;gap:16px}
.mobile-appeal-page .step-item{display:flex;gap:12px}
.mobile-appeal-page .step-number{width:32px;height:32px;background:linear-gradient(135deg,#409EFF 0%,#5B8EFF 100%);color:white;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;flex-shrink:0}
.mobile-appeal-page .step-content{flex:1}
.mobile-appeal-page .step-title{font-size:15px;font-weight:600;color:#303133;margin-bottom:4px}
.mobile-appeal-page .step-desc{font-size:13px;color:#909399}
/* ========== Mobile Archive Page Styles - 匹配Vue MobileArchive.vue ========== */
.mobile-archive-page{min-height:calc(100vh - 56px);background:#f5f7fa;padding-bottom:76px}
.mobile-archive-page .page-header{background:linear-gradient(135deg,#409EFF 0%,#5B8EFF 100%);padding:12px 16px;color:white;display:flex;align-items:center;gap:12px;position:relative}
.mobile-archive-page .page-header.header-certified{background:linear-gradient(135deg,#67c23a 0%,#85ce61 100%) !important}
.mobile-archive-page .back-btn{background:transparent;border:none;color:white;font-size:18px;padding:4px;cursor:pointer;display:flex;align-items:center}
.mobile-archive-page .page-header h2{font-size:18px;margin:0;font-weight:500}
.mobile-archive-page .page-content{padding:12px;padding-bottom:64px}
.mobile-archive-page .loading{text-align:center;padding:60px 20px;color:#909399;font-size:14px}
/* 等级卡片 */
.mobile-archive-page .level-card{background:white;border-radius:8px;padding:20px;text-align:center;margin-bottom:12px}
.mobile-archive-page .level-badge{display:inline-block;padding:8px 24px;border-radius:20px;font-size:18px;font-weight:700;color:white;margin-bottom:8px}
.mobile-archive-page .level-A .level-badge{background:#67c23a}
.mobile-archive-page .level-B .level-badge{background:#e6a23c}
.mobile-archive-page .level-C .level-badge,.mobile-archive-page .level-D .level-badge{background:#f56c6c}
.mobile-archive-page .level-text{font-size:16px;color:#606266;font-weight:600}
/* A级认证商家样式 */
.mobile-archive-page .level-certified{background:linear-gradient(135deg,#f0fff4 0%,#dcfce7 100%);border:2px solid #67c23a}
.mobile-archive-page .level-certified .level-badge{background:linear-gradient(135deg,#67c23a,#85ce61);font-size:20px;padding:10px 28px}
.mobile-archive-page .level-certified .level-text{color:#67c23a;font-size:18px}
/* 各区块样式 */
.mobile-archive-page .info-section,.mobile-archive-page .detail-section,.mobile-archive-page .images-section,.mobile-archive-page .tags-section,.mobile-archive-page .action-section{background:white;border-radius:8px;padding:16px;margin-bottom:12px}
.mobile-archive-page .section-title{font-size:16px;font-weight:600;color:#303133;margin-bottom:16px;padding-left:8px;border-left:3px solid #409eff}
/* 信息网格 */
.mobile-archive-page .info-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.mobile-archive-page .info-item{display:flex;flex-direction:column;gap:6px}
.mobile-archive-page .info-label{font-size:13px;color:#909399}
.mobile-archive-page .info-value{font-size:15px;color:#303133;font-weight:600}
.mobile-archive-page .info-value.amount{color:#f56c6c;font-size:18px}
/* 类型标签 */
.mobile-archive-page .type-badge{display:inline-block;padding:2px 10px;border-radius:3px;font-size:12px}
.mobile-archive-page .type-qq{background:#ecf5ff;color:#409eff}
.mobile-archive-page .type-wechat{background:#f0f9ff;color:#67c23a}
.mobile-archive-page .type-phone{background:#fdf6ec;color:#e6a23c}
/* 详情文本 */
.mobile-archive-page .detail-text{font-size:14px;color:#606266;line-height:1.8;background:#fff3e0;padding:16px;border-radius:6px;border-left:3px solid #e6a23c}
.mobile-archive-page .detail-text.certified-detail{background:#f0fff4;border-left-color:#67c23a;color:#67c23a}
/* 图片网格 */
.mobile-archive-page .images-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mobile-archive-page .image-item{position:relative;width:100%;padding-bottom:100%;background:#f5f7fa;border-radius:6px;overflow:hidden;cursor:pointer}
.mobile-archive-page .image-item img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}
.mobile-archive-page .image-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.3s}
.mobile-archive-page .image-item:active{transform:scale(0.95);transition:transform 0.2s}
.mobile-archive-page .image-overlay span{color:white;font-size:12px;padding:4px 8px;background:rgba(0,0,0,0.7);border-radius:4px}
/* 标签列表 */
.mobile-archive-page .tags-section .section-title{display:block;width:100%;margin-bottom:12px}
.mobile-archive-page .tags-list{display:flex;flex-wrap:wrap;gap:8px}
.mobile-archive-page .tag{padding:6px 12px;background:#fef0f0;color:#f56c6c;border-radius:4px;font-size:13px}
/* 操作按钮 */
.mobile-archive-page .action-section{display:flex;gap:12px}
.mobile-archive-page .btn-primary,.mobile-archive-page .btn-warning,.mobile-archive-page .btn-share{flex:1;height:44px;border:none;border-radius:4px;font-size:15px;font-weight:500;cursor:pointer}
.mobile-archive-page .btn-primary{background:#409eff;color:white}
.mobile-archive-page .btn-warning{background:#e6a23c;color:white}
.mobile-archive-page .btn-share{background:#67c23a;color:white}
.mobile-archive-page .btn-full{width:100%;background:linear-gradient(135deg,#67c23a,#85ce61) !important;border:none !important}
/* ========== 强制移动端布局样式 ========== */
@media (max-width:768px){
#mobile-layout{display:block !important;width:100% !important;max-width:100% !important;margin:0 !important;padding:0 !important}
#mobile-layout.mobile-home-page{width:100% !important;max-width:100vw !important}
#mobile-layout .page-header{width:100% !important;max-width:100vw !important;left:0 !important;right:0 !important;margin:0 !important}
#mobile-layout .header-card{width:100% !important;max-width:100% !important;padding-left:16px !important;padding-right:16px !important;margin:0 !important;box-sizing:border-box !important}
#mobile-layout .search-section{width:100% !important;max-width:100% !important;margin:0 0 16px 0 !important;box-sizing:border-box !important}
#mobile-layout .search-box{width:100% !important;max-width:100% !important;display:flex !important;flex-direction:row !important;gap:8px !important}
#mobile-layout .search-box input{flex:1 !important;min-width:0 !important;width:auto !important;max-width:none !important}
#mobile-layout .search-box button{flex:0 0 80px !important;width:80px !important}
#mobile-layout .type-buttons{width:100% !important;max-width:100% !important;display:flex !important;flex-direction:row !important;gap:8px !important;justify-content:space-between !important}
#mobile-layout .type-btn{flex:1 !important;min-width:0 !important;max-width:33.33% !important}
#mobile-layout .stats-section{width:100% !important;max-width:100% !important}
#mobile-layout .stats-section .stat-item{flex:1 !important;text-align:center !important}
}
/* ========== Merchant Detail Modal Styles ========== */
.merchant-detail-dialog{width:420px;max-width:90vw;background:#fff;border-radius:16px;overflow:hidden;position:relative;box-shadow:0 20px 60px rgba(0,0,0,0.15)}
.modal-close-float{position:absolute;top:12px;right:12px;z-index:10;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,0.9);border:none;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#606266;transition:all 0.3s;box-shadow:0 2px 8px rgba(0,0,0,0.15)}
.modal-close-float:hover{background:#fff;color:#f56c6c;transform:rotate(90deg)}
.merchant-detail-dialog .modal-body{padding:0;max-height:85vh;overflow-y:auto}
.merchant-detail-content{}
/* Header section */
.merchant-detail-content .detail-header{position:relative;height:100px}
.merchant-detail-content .detail-banner{width:100%;height:100%;background-size:cover;background-position:center}
.merchant-detail-content .detail-banner-default{background:#409EFF}
.merchant-detail-content .detail-avatar{position:absolute;bottom:-40px;left:50%;transform:translateX(-50%);width:80px;height:80px;border-radius:50%;background:#409EFF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:32px;font-weight:700;border:4px solid #fff;box-shadow:0 4px 16px rgba(0,0,0,0.15)}
/* Info section */
.merchant-detail-content .detail-info{padding:50px 24px 20px;text-align:center}
.merchant-detail-content .detail-name{margin:0 0 12px;font-size:20px;font-weight:700;color:#303133}
.merchant-detail-content .detail-badges{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.merchant-detail-content .detail-badges .badge{display:inline-flex;align-items:center;gap:4px;padding:5px 12px;border-radius:20px;font-size:12px;font-weight:500}
.merchant-detail-content .detail-badges .badge-success{background:#f0f9eb;color:#67C23A}
.merchant-detail-content .detail-badges .badge-warning{background:#fdf6ec;color:#E6A23C;border:1px solid #faecd8}
/* Detail card */
.merchant-detail-content .detail-card{margin:0 20px 20px;background:#f8fafc;border-radius:12px;overflow:hidden}
.merchant-detail-content .detail-row{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #ebeef5}
.merchant-detail-content .detail-row:last-child{border-bottom:none}
.merchant-detail-content .detail-label{display:flex;align-items:center;gap:8px;color:#909399;font-size:14px}
.merchant-detail-content .detail-label svg{flex-shrink:0}
.merchant-detail-content .detail-value{color:#303133;font-weight:500;font-size:14px;text-align:right;max-width:60%;word-break:break-all}
.merchant-detail-content .detail-value.account-value{font-family:'Courier New',monospace;font-size:15px;color:#409EFF}
.merchant-detail-content .detail-value.expire-value{color:#67C23A}
.merchant-detail-content .detail-value.scope-value{font-size:13px;line-height:1.5}
/* Type tag */
.merchant-detail-content .type-tag{display:inline-block;padding:3px 10px;border-radius:4px;font-size:12px;font-weight:500}
.merchant-detail-content .type-tag.type-qq{background:#ecf5ff;color:#409EFF}
.merchant-detail-content .type-tag.type-微信{background:#f0f9eb;color:#67C23A}
.merchant-detail-content .type-tag.type-手机{background:#fdf6ec;color:#E6A23C}
/* Action buttons */
.merchant-detail-content .detail-actions{display:flex;gap:12px;padding:0 20px 24px}
.merchant-detail-content .action-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border:none;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:all 0.2s;text-decoration:none}
.merchant-detail-content .action-btn-primary{background:#409EFF;color:#fff}
.merchant-detail-content .action-btn-primary:hover{background:#66b1ff}
.merchant-detail-content .action-btn-success{background:#67C23A;color:#fff}
.merchant-detail-content .action-btn-success:hover{background:#85ce61}
/* Mobile responsive */
@media (max-width:480px){
#merchant-detail-modal{align-items:flex-end}
#merchant-detail-modal .merchant-detail-dialog{width:100%;max-width:100%;border-radius:16px 16px 0 0;margin:0;animation:slideUp 0.3s ease-out}
@keyframes slideUp{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}
.merchant-detail-content .detail-header{height:80px}
.merchant-detail-content .detail-avatar{width:70px;height:70px;font-size:28px;bottom:-35px}
.merchant-detail-content .detail-info{padding:45px 16px 16px}
.merchant-detail-content .detail-name{font-size:18px}
.merchant-detail-content .detail-card{margin:0 12px 16px}
.merchant-detail-content .detail-row{padding:12px 14px}
.merchant-detail-content .detail-actions{padding:0 12px 20px;gap:10px;padding-bottom:calc(20px + env(safe-area-inset-bottom))}
.merchant-detail-content .action-btn{padding:10px 16px;font-size:13px}
.modal-close-float{top:8px;right:8px;width:28px;height:28px;font-size:18px}
}