/* ============================================
   濂跺潡浜ゆ槗骞冲?- 绉诲姩绔?H5 App 鏍峰?
   璁捐鍩哄噯?75px - 430px
   ============================================ */

*{margin:0;padding:0;box-sizing:border-box}
[data-app="nkhc"] #__version_badge{display:none!important}
#__version_badge{display:none}
html,body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;font-size:14px;color:#333;background:#f5f5f5;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}

.app-container{max-width:430px;min-height:100vh;min-height:100dvh;margin:0 auto;background:#f5f5f5;position:relative;overflow-x:hidden;box-shadow:0 0 20px rgba(0,0,0,.08)}
@media(max-width:430px){.app-container{max-width:100%;box-shadow:none}}

.app-header{position:sticky;top:0;z-index:100;background:linear-gradient(135deg,#1677ff,#4096ff);color:#fff;padding:0 16px;height:50px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 2px 8px rgba(22,119,255,.2)}
.app-header .header-left{display:flex;align-items:center;gap:8px}
.app-header .header-title{font-size:18px;font-weight:700;letter-spacing:1px}
.app-header .header-right{display:flex;align-items:center;gap:12px}
.app-header .header-btn{color:#fff;font-size:14px;background:rgba(255,255,255,.15);border:none;padding:5px 12px;border-radius:16px;cursor:pointer}

.app-content{padding-bottom:68px;padding-bottom:calc(68px + env(safe-area-inset-bottom, 0px));min-height:calc(100vh - 50px - 58px);min-height:calc(100dvh - 50px - 58px)}
.is-app-client .app-content{padding-bottom:calc(72px + env(safe-area-inset-bottom, 0px))}
.escort-page .app-content{padding-bottom:0;min-height:100vh;min-height:100dvh}

.app-tabbar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;height:58px;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:flex;align-items:center;z-index:100;padding-bottom:env(safe-area-inset-bottom);padding-bottom:constant(safe-area-inset-bottom);border-top:1px solid rgba(0,0,0,.06);box-shadow:0 -4px 14px rgba(0,0,0,.04)}
.app-tabbar .tab-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;color:#8a9099;transition:all .16s ease;padding:4px 0 4px;position:relative;min-height:52px;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
.app-tabbar .tab-item:active{transform:scale(.96);opacity:.85}.app-tabbar .tab-item.active{color:#1E90FF;font-weight:600}.is-app-client .app-tabbar{height:62px;background:#fff;box-shadow:0 -4px 16px rgba(0,0,0,.06)}.is-app-client .app-tabbar .tab-item{padding:6px 0 2px;gap:4px}.is-app-client .app-content{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
  .app-tabbar .tab-item .tab-icon{position:relative;display:flex;align-items:center;justify-content:center;width:24px;height:24px;transition:transform .2s}
.app-tabbar .tab-item:active{transform:scale(.96);opacity:.85}.app-tabbar .tab-item.active .tab-icon{transform:scale(1.08)}
.app-tabbar .tab-item .tab-label{font-size:11px;line-height:1;font-weight:500;letter-spacing:.2px}

/* ========== 鎼滅储鏍?========== */
.home-search-bar{background:#fff;padding:10px 16px;position:sticky;top:50px;z-index:50;border-bottom:1px solid #f0f0f0}
.home-search-bar input{width:100%;height:38px;border-radius:19px;background:#f5f5f5;border:none;padding:0 16px;font-size:14px;outline:none}
.home-search-bar input:focus{background:#eee}
/* ========== ????? Banner ========== */
.home-banner { position: relative; overflow: hidden; margin: 10px 12px 0; border-radius: 14px; }
.banner-slide { display: none; }
.banner-slide.active { display: block; animation: bannerFadeIn .5s ease; }
@keyframes bannerFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.banner-bg { padding: 28px 20px 24px; color: #fff; display: flex; align-items: center; gap: 14px; min-height: 0; }
.banner-icon { font-size: 38px; flex-shrink: 0; }
.banner-text { flex: 1; min-width: 0; }
.banner-title { font-size: 18px; font-weight: 800; letter-spacing: .5px; margin-bottom: 4px; }
.banner-subtitle { font-size: 13px; opacity: .88; }
.banner-dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 2; }
.banner-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.5); transition: all .2s; }
.banner-dot.active { background: #fff; width: 18px; border-radius: 3px; }


/* ========== 绛涢€夋寜閽爮?涓叆鍙ｏ級 ========== */
.home-filter-bar{background:#fff;padding:8px 16px 0;display:flex;gap:0;position:sticky;top:calc(50px + 49px);z-index:49;border-bottom:1px solid #f0f0f0}
.home-filter-bar .fbar-btn{flex:1;display:flex;align-items:center;justify-content:center;padding:10px 4px 8px;font-size:15px;color:#222;font-weight:800;cursor:pointer;border-bottom:2px solid transparent;transition:all .2s;position:relative;letter-spacing:.5px;white-space:nowrap}
.home-filter-bar .fbar-btn.open{color:#1E90FF;font-weight:600;border-bottom-color:#1E90FF;font-weight:600;font-weight:600}
.home-filter-bar .fbar-btn .fbar-dot{position:absolute;top:4px;right:4px;width:6px;height:6px;border-radius:50%;background:#ff4d4f}
.home-filter-bar .fbar-btn .fbar-arrow{font-size:12px;margin-left:3px}

/* ========== 绛涢€夊脊灞?========== */
.filter-overlay{position:fixed;top:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;height:100%;background:rgba(0,0,0,.4);z-index:200;display:flex;flex-direction:column;justify-content:flex-end}
.filter-panel{background:#fff;border-radius:16px 16px 0 0;max-height:72vh;overflow-y:auto;display:flex;flex-direction:column}
.filter-panel .fp-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #f0f0f0;flex-shrink:0}
.filter-panel .fp-title{font-size:16px;font-weight:600}
.filter-panel .fp-body{flex:1;overflow-y:auto;padding:14px 16px}
.filter-panel .fp-footer{display:flex;gap:12px;padding:12px 16px;border-top:1px solid #f0f0f0;flex-shrink:0}
.filter-panel .fp-footer button{flex:1;height:42px;border-radius:21px;border:none;font-size:15px;cursor:pointer}
.filter-panel .fp-footer .reset-btn{background:#f5f5f5;color:#666}
.filter-panel .fp-footer .confirm-btn{background:#1677ff;color:#fff}

/* ========== 配置筛选弹?========== */
.filter-panel.equip-panel{border-radius:24px 24px 0 0;max-height:80vh}

/* 左侧分类?*/
.equip-sidebar{flex-shrink:0;width:80px;background:#f5f7fa;display:flex;flex-direction:column;padding:8px 0;overflow-y:auto}
.equip-sidebar-item{padding:14px 10px;font-size:13px;color:#444;cursor:pointer;text-align:center;font-weight:500;transition:all .15s;position:relative;white-space:nowrap}
.equip-sidebar-item.active{color:#1A73E8;background:#e8f0fe;font-weight:700}
.equip-sidebar-item.active::before{content:'';position:absolute;left:0;top:12px;bottom:12px;width:3px;background:#1A73E8;border-radius:0 2px 2px 0}

/* 右侧内容?*/
.equip-content{flex:1;overflow-y:auto;padding:14px 16px;min-width:0}

/* 底部操作?*/
.equip-footer{padding:10px 16px;gap:10px}
.equip-reset-btn{flex:1;height:42px;border-radius:21px;border:none;font-size:14px;font-weight:600;cursor:pointer;background:#f1f3f4;color:#444}
.equip-confirm-btn{flex:1;height:42px;border-radius:21px;border:none;font-size:14px;font-weight:600;cursor:pointer;background:#1A73E8;color:#fff}

/* 阶级Tab - 下划线风?*/
.pub3-tiertab{padding:8px 16px;font-size:13px;font-weight:500;cursor:pointer;color:#555;position:relative;transition:all .15s;border:none;background:none;border-radius:0;border-bottom:3px solid transparent}
.pub3-tiertab.active{color:#1A73E8;border-bottom-color:#1A73E8;font-weight:700}
.pub3-tiertab.configured{color:#333}

/* 绛涢€夐潰鏉垮唴?- 鏍囩閫夋嫨 */
.filter-panel .tag-grid{display:flex;flex-wrap:wrap;gap:10px}
.filter-panel .tag-item{padding:8px 18px;border-radius:20px;font-size:14px;font-weight:500;background:#F1F3F4;color:#3C4043;cursor:pointer;border:1px solid transparent;transition:all .15s;white-space:nowrap}
.filter-panel .tag-item.selected{background:#d8e2ff;color:#1A73E8;border-color:#adc7ff}
.filter-panel .tag-item.col2{flex:0 0 calc(50% - 5px);text-align:center}
.filter-panel .tag-item.col3{flex:0 0 calc(33.33% - 7px);text-align:center}

/* 绛涢€夐潰鏉垮唴?- 鍒嗗尯鏍囬 */
.filter-panel .sect-title{font-size:13px;color:#999;margin:14px 0 8px;padding-left:2px}
.filter-panel .sect-title:first-child{margin-top:0}

/* 绛涢€夐潰鏉垮唴?- Tabs */
.filter-panel .fp-tabs{display:flex;border-bottom:1px solid #f0f0f0;padding:0 16px;flex-shrink:0;overflow-x:auto;scrollbar-width:none;gap:0}
.filter-panel .fp-tabs::-webkit-scrollbar{display:none}
.filter-panel .fp-tab{flex-shrink:0;padding:10px 16px;font-size:13px;color:#666;cursor:pointer;border-bottom:2px solid transparent;transition:all .2s}
.filter-panel .fp-tab.active{color:#1E90FF;font-weight:600;border-bottom-color:#1E90FF;font-weight:600;font-weight:600}

/* 浠锋牸鍖洪棿杈撳?*/
.filter-panel .price-row{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.filter-panel .price-row input{flex:1;height:42px;border-radius:8px;border:1px solid #e8e8e8;padding:0 12px;font-size:15px;outline:none;text-align:center}
.filter-panel .price-row input:focus{border-color:#1E90FF;font-weight:600}
.filter-panel .price-row span{color:#999;font-size:14px}

/* 缁煎悎鎺掑簭 - 鍒楄?*/
.filter-panel .sort-list{display:flex;flex-direction:column}
.filter-panel .sort-item{padding:14px 12px;font-size:15px;cursor:pointer;border-radius:8px;margin-bottom:2px;display:flex;align-items:center;justify-content:space-between;transition:background .15s}
.filter-panel .sort-item:hover{background:#fafafa}
.filter-panel .sort-item.selected{color:#1E90FF;font-weight:600;font-weight:600;background:#f0f7ff}
.filter-panel .sort-item .check{color:#1E90FF;font-weight:600;font-size:16px}

/* ========== 鍟嗗搧鍒楄?- 鍗曞垪宸﹀浘鍙虫枃 ========== */
.product-list{padding:10px 12px 20px}
/* ========== ?????? - ???? ========== */
.product-card { background: #fff; border-radius: 14px; margin-bottom: 14px; overflow: hidden; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.06); transition: all .2s; }
.product-card:active { transform: scale(.98); }
.pc-img { width: 100%; aspect-ratio: 16/9; background: #f0f0f0; overflow: hidden; position: relative; }
.pc-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-img-empty { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 56px; color: #ccc; }
.pc-body { padding: 12px 14px 14px; }
.pc-title { font-size: 16px; font-weight: 700; color: #222; line-height: 1.4; margin-bottom: 8px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pc-meta-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.pc-server { font-size: 12px; color: #666; background: #f5f5f5; padding: 3px 10px; border-radius: 10px; font-weight: 500; }
.pc-unlock-tag { font-size: 11px; color: #1677ff; background: #e6f4ff; padding: 3px 10px; border-radius: 10px; font-weight: 600; white-space: nowrap; }
.pc-config-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.pc-leg-tag { font-size: 14px; font-weight: 800; letter-spacing: .2px; font-family: 'SF Mono','Menlo','Consolas',monospace; background: linear-gradient(135deg,#f0f5ff,#e6f4ff); padding: 4px 10px; border-radius: 6px; display: inline-flex; align-items: center; gap: 2px; border: 1px solid #d6e4ff; }
.pc-mount-tag { font-size: 12px; font-weight: 700; background: linear-gradient(135deg,#f6ffed,#fcffe6); padding: 4px 10px; border-radius: 6px; display: inline-flex; align-items: center; gap: 3px; border: 1px solid #d9f7be; white-space: nowrap; }
.pc-icon { width: 18px; height: 18px; vertical-align: middle; flex-shrink: 0; }
.pc-bottom-row { display: flex; align-items: center; justify-content: space-between; }
.pc-price { font-size: 22px; font-weight: 800; color: #ff4d4f; }
.pc-views { font-size: 12px; color: #bbb; display: flex; align-items: center; gap: 3px; }

.product-item{background:#fff;border-radius:14px;margin-bottom:10px;display:flex;overflow:hidden;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.06);transition:all .2s}
.product-item:active{transform:scale(.98)}
.product-item .pi-img{width:130px;min-width:130px;height:130px;background:#f0f0f0;display:flex;align-items:center;justify-content:center;font-size:44px;overflow:hidden;border-radius:8px;margin:10px}
.product-item .pi-img img{width:100%;height:100%;object-fit:cover;border-radius:8px}
.product-item .pi-info{flex:1;padding:12px 12px 12px 4px;display:flex;flex-direction:column;justify-content:space-between;min-width:0}
.product-item .pi-title{font-size:15px;font-weight:700;color:#222;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:4px;letter-spacing:.3px}
.product-item .pi-subtitle{font-size:12px;color:#999;margin-bottom:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.product-item .pi-price{font-size:19px;font-weight:800;color:#ff4d4f;margin-bottom:4px}
.product-item .pi-tags{display:flex;flex-wrap:wrap;gap:4px}
.product-item .pi-tag{font-size:10px;padding:2px 7px;border-radius:8px;background:#f0f5ff;color:#2f54eb}
.product-item .pi-meta{font-size:11px;color:#bbb;margin-top:auto}

/* ========== 鐧诲?娉ㄥ?========== */
.auth-page{padding:40px 24px 24px}
.auth-page .alogo{text-align:center;margin-bottom:32px}
.auth-page .alogo .aicon{font-size:56px;margin-bottom:8px}
.auth-page .alogo h2{font-size:20px;color:#1E90FF;font-weight:600;font-weight:700}
.auth-page .alogo p{font-size:13px;color:#999;margin-top:4px}

/* ========== 鍟嗗搧璇︽儏 ========== */
.detail-page{padding-bottom:70px}
.detail-page .dimg{width:100%;aspect-ratio:4/3;object-fit:cover;background:#f0f0f0;display:flex;align-items:center;justify-content:center;font-size:64px}
.detail-page .dbody{padding:16px}
.detail-page .dtitle{font-size:20px;font-weight:700;margin-bottom:8px}
.detail-page .dprice{font-size:28px;font-weight:700;color:#ff4d4f;margin-bottom:12px}
.detail-page .dprice .orig{font-size:14px;color:#999;text-decoration:line-through;margin-left:8px;font-weight:400}
.detail-page .dtags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.detail-page .dtag{font-size:12px;padding:4px 10px;border-radius:12px;background:#f0f5ff;color:#2f54eb}
.detail-page .ddesc{font-size:14px;color:#666;line-height:1.7;margin-bottom:16px;white-space:pre-wrap}
.detail-page .dsec{margin-bottom:16px}
.detail-page .dsec h3{font-size:15px;font-weight:600;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid #f0f0f0}
.detail-page .seller{display:flex;align-items:center;gap:12px}
.detail-page .savatar{width:44px;height:44px;border-radius:50%;background:#1677ff;color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:600}
.detail-page .sname{font-size:15px;font-weight:600}
.detail-page .slabel{font-size:11px;color:#999}

.detail-bottom-bar{position:fixed;bottom:55px;left:50%;transform:translateX(-50%);width:100%;max-width:430px;background:#fff;padding:10px 16px;display:flex;gap:12px;align-items:center;border-top:1px solid #eee;z-index:50;box-shadow:0 -2px 8px rgba(0,0,0,.04)}
.detail-bottom-bar .buy-btn{flex:1;height:44px;border-radius:22px;background:linear-gradient(135deg,#ff4d4f,#ff7875);color:#fff;border:none;font-size:16px;font-weight:600;cursor:pointer}
.detail-bottom-bar .icon-btn{width:44px;height:44px;border-radius:50%;background:#f5f5f5;border:none;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center}

.back-header{position:sticky;top:50px;z-index:40;background:#fff;padding:0 16px;height:44px;display:flex;align-items:center;gap:12px;border-bottom:1px solid #f0f0f0}
.back-header .bbtn{width:32px;height:32px;border-radius:50%;background:#f5f5f5;border:none;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1}
.back-header .btitle{font-size:16px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ========== 閫氱?========== */
.empty-state{text-align:center;padding:60px 24px;color:#999}
.empty-state .eicon{font-size:56px;margin-bottom:12px}

.placeholder-page{display:flex;flex-direction:column;align-items:center;justify-content:center;height:calc(100vh - 50px - 55px - 80px);height:calc(100dvh - 50px - 55px - 80px);color:#999}
.placeholder-page .phicon{font-size:64px;margin-bottom:16px}
.placeholder-page .phtext{font-size:15px}

.page-loading{text-align:center;padding:80px 0}
.spinner{width:36px;height:36px;border:3px solid #e8e8e8;border-top-color:#1E90FF;font-weight:600;border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 12px}
@keyframes spin{to{transform:rotate(360deg)}}

.mobile-toast{position:fixed;top:60px;left:50%;transform:translateX(-50%);z-index:999;max-width:400px;width:90%}

/* ========== 绉诲姩绔脊?========== */
.modal-overlay{position:fixed;top:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;height:100%;background:rgba(0,0,0,.45);z-index:300;display:flex;align-items:center;justify-content:center;animation:fadeIn .2s}
.modal-box{background:#fff;border-radius:14px;width:85%;max-width:340px;overflow:hidden;animation:slideUp .25s}
.modal-box .modal-header{padding:18px 20px 12px;text-align:center;border-bottom:1px solid #f5f5f5}
.modal-box .modal-title{font-size:17px;font-weight:600}
.modal-box .modal-body{padding:16px 20px}
.modal-box .modal-body .info-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;font-size:14px}
.modal-box .modal-body .info-row .label{color:#999}
.modal-box .modal-body .info-row .value{color:#333;font-weight:500;text-align:right;max-width:60%}
.modal-box .modal-body .info-row .value.price{color:#ff4d4f;font-size:18px;font-weight:700}
.modal-box .modal-body .modal-tip{background:#fffbe6;border-radius:8px;padding:10px 14px;font-size:13px;color:#ad8b00;margin-top:12px;line-height:1.5}
.modal-box .modal-footer{display:flex;border-top:1px solid #f0f0f0}
.modal-box .modal-footer button{flex:1;height:48px;border:none;font-size:16px;cursor:pointer;background:#fff}
.modal-box .modal-footer .btn-cancel{color:#999;border-right:1px solid #f0f0f0}
.modal-box .modal-footer .btn-confirm{color:#1E90FF;font-weight:600;font-weight:600}
.modal-box .modal-footer .btn-danger{color:#ff4d4f;font-weight:600}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}

/* ========== 浜ゆ槗鎴块棿鍗犱?========== */
.trade-room{padding:16px}
.trade-room .tr-card{background:#fff;border-radius:12px;padding:20px;margin-bottom:14px;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.trade-room .tr-card .tr-label{font-size:12px;color:#999;margin-bottom:4px}
.trade-room .tr-card .tr-value{font-size:16px;font-weight:600;color:#333}
.trade-room .tr-card .tr-status{display:inline-block;padding:4px 12px;border-radius:12px;font-size:13px;font-weight:600}
.trade-room .tr-card .tr-status.s10{background:#fff7e6;color:#d46b08}
.trade-room .tr-card .tr-status.s20{background:#e6f4ff;color:#1E90FF;font-weight:600}
.trade-room .tr-card .tr-status.s30{background:#f0f5ff;color:#2f54eb}
.trade-room .tr-card .tr-status.s40{background:#fff0f6;color:#c41d7f}
.trade-room .tr-card .tr-status.s50{background:#fff2e8;color:#d4380d}
.trade-room .tr-card .tr-status.s80{background:#f6ffed;color:#389e0d}
.trade-room .tr-card .tr-status.s90{background:#fff1f0;color:#cf1322}
.trade-room .tr-card .tr-status.s110{background:#f5f5f5;color:#999}
.trade-room .tr-coming{text-align:center;padding:40px 20px;color:#999}
.trade-room .tr-coming .tr-icon{font-size:56px;margin-bottom:12px}

/* ========== 浜ゆ槗鎴块棿娑堟伅娴?========== */
.tr-messages{padding:12px 16px;display:flex;flex-direction:column;gap:8px}
.tr-msg{display:flex;gap:10px;animation:fadeIn .3s}
.tr-msg .msg-avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;background:#f0f0f0}
.tr-msg .msg-bubble{background:#fff;border-radius:12px;padding:10px 14px;font-size:13px;line-height:1.5;max-width:85%;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.tr-msg .msg-bubble.system{background:#f0f7ff;color:#1E90FF;font-weight:600;font-size:12px;text-align:center;max-width:100%;width:100%}
.tr-msg .msg-bubble .msg-time{font-size:10px;color:#bbb;margin-top:4px}

/* ========== 鎿嶄綔鍗＄墖 ========== */
.tr-action-area{padding:0 16px 16px}
.tr-card-action{background:#fff;border-radius:12px;padding:16px;margin-bottom:10px;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.tr-card-action .card-title{font-size:15px;font-weight:600;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.tr-card-action .card-body{font-size:13px;color:#666;line-height:1.6;margin-bottom:12px}
.tr-card-action .card-input{width:100%;height:42px;border-radius:10px;border:1px solid #e8e8e8;padding:0 14px;font-size:15px;outline:none;margin-bottom:8px}
.tr-card-action .card-input:focus{border-color:#1E90FF;font-weight:600}
.tr-card-action .card-btn{width:100%;height:42px;border-radius:21px;border:none;font-size:15px;font-weight:600;cursor:pointer;margin-top:4px}
.tr-card-action .card-btn.primary{background:linear-gradient(135deg,#1677ff,#4096ff);color:#fff}
.tr-card-action .card-btn.warning{background:linear-gradient(135deg,#fa8c16,#ffa940);color:#fff}
.tr-card-action .card-btn.danger{background:linear-gradient(135deg,#ff4d4f,#ff7875);color:#fff}
.tr-card-action .card-btn.success{background:linear-gradient(135deg,#52c41a,#73d13d);color:#fff}
.tr-card-action .card-btn.outline{background:#fff;color:#1E90FF;font-weight:600;border:1.5px solid #1677ff}
.tr-card-action .card-btn:disabled{opacity:.5;cursor:not-allowed}
.tr-card-action .card-hint{font-size:12px;color:#999;margin-top:6px;text-align:center}

/* 璀︾ず鍗＄?*/
.tr-card-action.danger-zone{border:1px solid #ffccc7;background:#fff2f0}
.tr-card-action.warn-zone{border:1px solid #ffe58f;background:#fffbe6}

/* 鍑嵁灞曠ず?*/
.tr-credential{background:#fafafa;border-radius:8px;padding:12px;margin:8px 0}
.tr-credential .cred-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;font-size:14px}
.tr-credential .cred-label{color:#999}
.tr-credential .cred-value{font-family:monospace;font-weight:600;color:#333;max-width:60%;overflow:hidden;text-overflow:ellipsis}
.tr-credential .cred-actions{display:flex;gap:6px;margin-top:8px}
.tr-credential .cred-btn{padding:5px 12px;border-radius:14px;border:1px solid #d9d9d9;background:#fff;font-size:12px;cursor:pointer;color:#666}
.tr-credential .cred-btn:active{background:#f0f0f0}

/* --- unified credential card --- */
.cred-field-group{display:flex;align-items:center;gap:4px;flex:1;justify-content:flex-end;max-width:70%}
.cred-readonly-input{flex:1;min-width:0;padding:6px 8px;border:1px solid #e8e8e8;border-radius:6px;font-size:13px;font-family:monospace;color:#333;background:#fff;outline:none;cursor:text}
.cred-readonly-input:focus{border-color:#1890ff}
.cred-has-eye{padding-right:48px}
.cred-input-wrap{position:relative;flex:1;min-width:0;display:flex;align-items:center}
.cred-input-wrap .cred-readonly-input{width:100%}
.cred-eye-toggle{position:absolute;right:8px;font-size:11px;color:#999;cursor:pointer;user-select:none;white-space:nowrap}
.cred-eye-toggle:hover{color:#333}
.cred-copy-icon{flex-shrink:0;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:6px;color:#999;cursor:pointer;transition:color .15s,background .15s}
.cred-copy-icon:hover{color:#1890ff;background:#e6f7ff}
.cred-copy-icon:active{color:#096dd9;background:#bae7ff}
.cred-copy-icon.disabled{color:#d9d9d9;cursor:not-allowed;pointer-events:none}
.cred-btn-primary{background:#1890ff!important;color:#fff!important;border-color:#1890ff!important;border-radius:10px;height:42px;font-weight:600;border:none}
.cred-btn-primary:active{background:#096dd9!important}
.cred-btn-primary:disabled{background:#d9d9d9!important;border-color:#d9d9d9!important;color:#999!important;cursor:not-allowed}
.cred-btn-block{display:block;width:100%;text-align:center;margin-top:4px;padding:8px 16px;font-size:14px;font-weight:500}
.cred-reject-link{display:block;text-align:center;font-size:12px;color:#ff4d4f;cursor:pointer;padding:8px 0;margin-top:2px;user-select:none}
.cred-reject-link:hover{color:#ff7875;text-decoration:underline}
.cred-reject-link.disabled{color:#d9d9d9;cursor:not-allowed;pointer-events:none;text-decoration:none}

/* 绾犵悍琛ㄥ崟 */
.dispute-form .df-row{margin-bottom:12px}
.dispute-form .df-label{font-size:13px;color:#666;margin-bottom:4px}
.dispute-form .df-select{width:100%;height:40px;border-radius:10px;border:1px solid #e8e8e8;padding:0 12px;font-size:14px;outline:none;background:#fff}
.dispute-form .df-textarea{width:100%;min-height:80px;border-radius:10px;border:1px solid #e8e8e8;padding:10px 12px;font-size:14px;outline:none;resize:vertical;font-family:inherit}

/* 纭鏂囨湰 */
.confirm-text{background:#fffbe6;border-radius:8px;padding:10px 14px;font-size:13px;color:#ad6800;line-height:1.6;margin-bottom:12px}

/* 鏍囩鎻愮ず */
.tr-inline-badge{display:inline-block;padding:3px 10px;border-radius:10px;font-size:12px;font-weight:600}
.tr-inline-badge.info{background:#e6f4ff;color:#1E90FF;font-weight:600}
.tr-inline-badge.warn{background:#fff7e6;color:#d46b08}

/* ========== 璁㈠崟鍗＄墖 ========== */
.order-item{background:#fff;border-radius:12px;margin-bottom:10px;display:flex;overflow:hidden;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.04)}
.order-item:active{transform:scale(.98)}
.order-item .oi-img{width:90px;min-width:90px;height:90px;background:#f0f0f0;display:flex;align-items:center;justify-content:center;font-size:32px;overflow:hidden}
.order-item .oi-img img{width:100%;height:100%;object-fit:cover}
.order-item .oi-info{flex:1;padding:10px 12px;display:flex;flex-direction:column;justify-content:space-between;min-width:0}
.order-item .oi-title{font-size:14px;font-weight:600;color:#333;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:4px}
.order-item .oi-row{display:flex;justify-content:space-between;align-items:center;margin:4px 0}
.order-item .oi-price{font-size:17px;font-weight:700;color:#ff4d4f}
.order-item .oi-sub{font-size:11px;color:#999;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.order-item .oi-btn{display:inline-block;padding:4px 12px;border-radius:12px;border:1px solid #1677ff;background:#fff;color:#1E90FF;font-weight:600;font-size:12px;cursor:pointer;align-self:flex-end;margin-top:2px}
.order-item .oi-btn:active{background:#e6f4ff}



/* ========== 鍙戝竷椤?v3 ========== */
.pub3-header{position:sticky;top:50px;z-index:40;background:#fff;padding:0 16px;height:44px;display:flex;align-items:center;border-bottom:1px solid #F1F5F9}
.pub3-header .bbtn{width:36px;height:36px;min-width:36px;border:none;font-size:22px;color:#334155;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pub3-header .btitle{position:absolute;left:50%;transform:translateX(-50%);font-size:15px;font-weight:600;color:#333;white-space:nowrap}
.pub3-card{background:#fff;margin:10px 12px;border-radius:12px;padding:16px 14px;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.pub3-card .sect-title{font-size:15px;font-weight:600;color:#333;margin-bottom:10px}
.pub3-ctitle{font-size:16px;font-weight:700;color:#333;margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid #f5f5f5}
.pub3-row{margin-bottom:14px}
.pub3-row:last-child{margin-bottom:0}
.pub3-label{font-size:15px;color:#333;margin-bottom:10px;font-weight:600}
.pub3-input{width:100%;height:44px;border-radius:10px;border:1px solid #e8e8e8;padding:0 14px;font-size:15px;outline:none;background:#fff}
.pub3-input:focus{border-color:#3B82F6}
.pub3-textarea{width:100%;border-radius:10px;border:1px solid #e8e8e8;padding:10px 14px;font-size:15px;outline:none;resize:vertical;font-family:inherit}
.pub3-textarea:focus{border-color:#3B82F6}
.pub3-picker{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-radius:10px;border:1px solid #e8e8e8;background:#fff;cursor:pointer;min-height:44px}
.pub3-picker.has-val{background:#EFF6FF;border-color:#BFDBFE}
.pub3-tag{display:inline-block;margin-top:6px;padding:3px 12px;border-radius:999px;background:#EFF6FF;color:#3B82F6;font-size:12px;font-weight:500}
.pub3-img-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.pub3-img-row .pub3-input{flex:1}
.pub3-img-del{width:28px;height:28px;border-radius:50%;background:#ff4d4f;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;cursor:pointer;flex-shrink:0}
.pub3-add-btn{display:block;width:100%;padding:10px;border-radius:8px;border:1px dashed #CBD5E1;background:#F8FAFC;color:#3B82F6;font-size:13px;cursor:pointer;text-align:center;margin-top:4px}
.pub3-bottom-bar{width:100%;max-width:430px;margin:24px 0 0 0;padding:16px 16px calc(24px + env(safe-area-inset-bottom, 16px));background:transparent}
.pub3-btn{width:100%;height:50px;border-radius:16px;border:none;font-size:17px;font-weight:600;cursor:pointer;transition:transform .15s,opacity .15s,box-shadow .2s}
.pub3-btn.primary{background:linear-gradient(135deg,#1E90FF,#3B82F6);color:#fff;box-shadow:0 8px 18px rgba(30,144,255,.18)}
.pub3-btn:disabled{opacity:.55;cursor:not-allowed;transform:none}

/* T ?Tab ?*/
.pub3-tiertabs{display:flex;gap:8px;margin-bottom:8px;overflow-x:auto;scrollbar-width:none}
.pub3-tiertabs::-webkit-scrollbar{display:none}
.pub3-tiertab{flex-shrink:0;padding:8px 16px;border-radius:20px;font-size:13px;font-weight:600;cursor:pointer;background:#f5f5f5;color:#999;position:relative;transition:all .15s}
.pub3-tiertab.active{background:#1677ff;color:#fff}
.pub3-tiertab.configured{color:#333}
.pub3-tiertab.configured:not(.active){background:#e6f4ff}
.pub3-tierdot{position:absolute;top:4px;right:6px;width:6px;height:6px;border-radius:50%;background:#ff4d4f}
.pub3-tiertab.active .pub3-tierdot{background:#fff}

/* ========== 涓汉涓績 ========== */
.profile-card{background:linear-gradient(135deg,#1677ff,#4096ff);margin:10px 12px;border-radius:14px;padding:20px 18px;color:#fff;display:flex;align-items:center;justify-content:space-between}
.profile-avatar{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;color:#fff;flex-shrink:0}
.profile-logout{background:rgba(255,255,255,.2);color:#fff;border:1px solid rgba(255,255,255,.3);padding:6px 14px;border-radius:16px;font-size:13px;cursor:pointer;flex-shrink:0}
.profile-menu{background:#fff;margin:10px 12px;border-radius:14px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.04)}
.profile-menu-item{display:flex;align-items:center;padding:14px 16px;cursor:pointer;border-bottom:1px solid #f5f5f5}
.profile-menu-item:last-child{border-bottom:none}
.profile-menu-item:active{background:#fafafa}

/* ========== 鎴戠殑鍟嗗搧?Tab ========== */
.myp-tabs{display:flex;gap:0;overflow-x:auto;background:#fff;padding:0 8px;border-bottom:1px solid #f0f0f0;scrollbar-width:none;position:sticky;top:50px;z-index:40}
.myp-tabs::-webkit-scrollbar{display:none}
.myp-tab{flex-shrink:0;padding:10px 14px;font-size:13px;color:#666;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;transition:all .15s}
.myp-tab.active{color:#1E90FF;font-weight:600;border-bottom-color:#1E90FF;font-weight:600;font-weight:600}

/* ===== 閰嶇疆鎽樿灞曠?===== */
.dconfig { display: flex; flex-direction: column; gap: 6px; }
.dconfig-item { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.dconfig-label { color: #999; flex-shrink: 0; }
.dconfig-val { color: #333; font-weight: 500; text-align: right; }
.legend-digits { font-size: 16px; font-weight: 700; color: #1677ff; letter-spacing: .3px; font-family: monospace; }
.dsec h3 { font-size: 14px; color: #999; margin-bottom: 8px; font-weight: 500; }







/* ===== 鎴戠殑鍟嗗搧 Tab ===== */
.myp-tabs { display: flex; gap: 4px; overflow-x: auto; padding: 8px 12px; background: #fff; position: sticky; top: 44px; z-index: 10; }
.myp-tab { padding: 6px 14px; border-radius: 16px; font-size: 12px; white-space: nowrap; background: #f5f5f5; color: #666; cursor: pointer; }
.myp-tab.active { background: #1677ff; color: #fff; }
/* ===== 棣栭〉閰嶇疆鎽樿?===== */
.pi-config { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; align-items: center; }
.pi-config-digit { font-size: 13px; font-weight: 800; letter-spacing: .3px; font-family: 'SF Mono','Menlo','Consolas',monospace; background: linear-gradient(135deg,#e6f4ff,#f0f5ff); padding: 3px 9px; border-radius: 6px; display: inline-flex; align-items: center; gap: 2px; border: 1px solid #d6e4ff; }
.pi-config-tag { font-size: 11px; color: #389e0d; background: linear-gradient(135deg,#f6ffed,#fcffe6); padding: 3px 9px; border-radius: 6px; white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; border: 1px solid #d9f7be; font-weight: 600; }


/* ===== 鎽樿鍥炬爣 ===== */
.pi-icon { width: 16px; height: 16px; vertical-align: middle; flex-shrink: 0; }
/* ===== 閫氱敤鏍囩 ===== */
.tag-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; background: #f0f0f0; color: #666; }
/* ===== 缁煎悎绛涢€夊崟閫夊垪琛?===== */
.sort-radio-list { display: flex; flex-direction: column; }
.sort-radio-item { display: flex; align-items: center; padding: 15px 12px; cursor: pointer; border-bottom: 1px solid #f5f5f5; transition: background 0.15s; }
.sort-radio-item:last-child { border-bottom: none; }
.sort-radio-item:active { background: #fafafa; }
.sort-radio-item.sel { background: #e6f4ff; }
.sort-radio-circle { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #d9d9d9; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-right: 12px; }
.sort-radio-item.sel .sort-radio-circle { border-color: #1677ff; }
.sort-radio-dot { width: 10px; height: 10px; border-radius: 50%; background: #1677ff; }
.sort-radio-label { font-size: 16px; color: #333; }
.sort-radio-item.sel .sort-radio-label { color: #1677ff; font-weight: 600; }
/* ========== 鍟嗗搧璇︽儏 v2 ========== */
/* 灏侀潰鍥?*/
.dt-gallery{position:relative;background:#f0f0f0;min-height:280px}
.dt-gallery-view{width:100%;height:320px;overflow:hidden;cursor:pointer}
.dt-gallery-img{width:100%;height:100%;object-fit:cover}
.dt-gallery-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:260px;background:#f5f5f5}
.dt-gallery-counter{position:absolute;bottom:28px;right:12px;background:rgba(0,0,0,.55);color:#fff;font-size:11px;padding:3px 10px;border-radius:10px}
.dt-gallery-dots{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:6px}
.dt-gallery-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.5);transition:all .2s}
.dt-gallery-dot.active{background:#fff;width:16px;border-radius:3px}

/* 浠锋牸琛?*/
.dt-price-row{display:flex;justify-content:space-between;align-items:baseline;padding:14px 16px 4px}
.dt-price{font-size:26px;font-weight:800;color:#ff4d4f;font-family:-apple-system,BlinkMacSystemFont,sans-serif}
.dt-views{font-size:12px;color:#bbb}

/* 鏍囬?*/
.dt-title{font-size:17px;font-weight:700;color:#222;padding:4px 16px 10px;line-height:1.4;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}

/* 閰嶇疆鎽樿鏍囩?*/
.dt-config-tags{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 6px}
.dt-config-leg{font-size:14px;font-weight:800;color:#1E90FF;font-weight:600;letter-spacing:.3px;font-family:monospace;background:#e6f4ff;padding:3px 10px;border-radius:6px}
.dt-config-mount{font-size:12px;font-weight:600;color:#389e0d;background:#f6ffed;padding:4px 10px;border-radius:6px}
.dt-config-unlock{font-size:12px;color:#666;background:#f5f5f5;padding:3px 10px;border-radius:6px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 鍒嗗?*/
.dt-section{padding:0 16px;margin-top:8px}
.dt-section-title{font-size:14px;font-weight:600;color:#333;margin-bottom:10px;display:flex;align-items:center;gap:6px}
.dt-section-title::before{content:'';display:inline-block;width:3px;height:14px;background:#1677ff;border-radius:2px}

/* 璐﹀彿灞炴€т袱鍒楀鏍?*/
.dt-attr-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dt-attr-item{background:#f8f9fa;border-radius:10px;padding:12px 14px}
.dt-attr-wide{grid-column:span 2}
.dt-attr-label{font-size:11px;color:#999;margin-bottom:4px}
.dt-attr-val{font-size:14px;color:#333;font-weight:600;word-break:break-all;white-space:pre-line}

/* 鍟嗗搧鎻忚堪 */
.dt-desc{font-size:14px;color:#555;line-height:1.8;white-space:pre-wrap;word-break:break-word;background:#fafafa;border-radius:10px;padding:14px 16px}

/* 璇︾粏鎴浘 */
.dt-detail-imgs{display:flex;flex-direction:column;gap:8px}
.dt-detail-img{width:100%;border-radius:10px;background:#f0f0f0}
.dt-hint{padding:10px 16px;font-size:12px;color:#d46b08;background:#fff7e6;border-bottom:1px solid #ffd591}
/* ===== 娑堟伅椤甸潰 ===== */
.msg-tabs { display: flex; background: #fff; border-bottom: 1px solid #f0f0f0; position: sticky; top: 44px; z-index: 40; }
.msg-tab { flex: 1; text-align: center; padding: 13px 0; font-size: 15px; font-weight: 600; cursor: pointer; color: #666; border-bottom: 2px solid transparent; transition: all .2s; }
.msg-tab.active { color: #1677ff; border-bottom-color: #1677ff; }
.msg-item { display: flex; align-items: center; padding: 14px 16px; cursor: pointer; border-bottom: 1px solid #f5f5f5; background: #fff; transition: background .15s; }
.msg-item:active { background: #fafafa; }
.msg-avatar { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; margin-right: 12px; }
.msg-avatar.trade { background: #e6f4ff; }
.msg-avatar.system { width: 42px; height: 42px; background: #f0f0f0; font-size: 16px; font-weight: 700; color: #999; }
.msg-body { flex: 1; overflow: hidden; min-width: 0; }
.msg-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.msg-name { font-size: 15px; font-weight: 600; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-time { font-size: 11px; color: #bbb; flex-shrink: 0; margin-left: 8px; }
.msg-preview { font-size: 13px; color: #999; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-sub { font-size: 11px; color: #bbb; margin-top: 2px; }
.msg-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff4d4f; flex-shrink: 0; margin-left: 8px; }
/* ===== 涓汉涓績 v2 ===== */
.pf-header {
  background: linear-gradient(135deg, #1677ff 0%, #4096ff 100%);
  padding: 24px 20px 28px;
  color: #fff;
  position: relative;
}
.pf-user { display: flex; align-items: center; gap: 14px; }
.pf-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(255,255,255,.25); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 700; flex-shrink: 0;
  border: 2px solid rgba(255,255,255,.4);
}
.pf-info { flex: 1; overflow: hidden; }
.pf-nick { font-size: 18px; font-weight: 700; color: #1a1a2e; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-id { font-size: 12px; color: #888; margin-top: 2px; }
.pf-header-actions { position: absolute; top: 16px; right: 16px; display: flex; gap: 8px; align-items: center; }
.pf-setting { font-size: 18px; cursor: pointer; opacity: .6; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(0,0,0,.04); }
.pf-logout { font-size: 11px; cursor: pointer; color: #999; padding: 5px 12px; border-radius: 14px; border: 1px solid #e0e0e0; background: #fff; }
.pf-login-btn {
  display: block; margin: 14px auto 0;
  padding: 8px 32px; border-radius: 20px; border: 1px solid rgba(255,255,255,.6);
  background: rgba(255,255,255,.15); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer;
}

/* 鍗＄?*/
.pf-card {
  background: #fff; margin: 10px 12px; border-radius: 14px;
  padding: 16px; box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.pf-card-title { font-size: 15px; font-weight: 700; color: #1a1a2e; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.pf-card-title::before { content: ''; width: 3px; height: 16px; border-radius: 2px; background: #1677ff; flex-shrink: 0; }

/* 鎴戠殑浜ゆ槗缃戞?*/
.pf-trade-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.pf-trade-item {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 12px 4px; cursor: pointer; border-radius: 10px; transition: background .15s;
}
.pf-trade-item:active { background: #e8f0fe; transform: scale(.98); }

/* pf-dot icon indicators */
.pf-dot { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; font-size: 16px; font-weight: 700; flex-shrink: 0; }
.pf-dot-blue { background: #e6f7ff; color: #1677ff; }
.pf-dot-green { background: #f6ffed; color: #52c41a; }
.pf-dot-orange { background: #fff7e6; color: #fa8c16; }
.pf-dot-red { background: #fff2f0; color: #ff4d4f; }
.pf-dot-purple { background: #f9f0ff; color: #722ed1; }
.pf-dot-teal { background: #e6fffb; color: #13c2c2; }
.pf-dot-gray { background: #f5f5f5; color: #999; }
.pf-dot-indigo { background: #f0f0ff; color: #6366f1; }
.pf-dot-pink { background: #fff0f5; color: #ff6a88; }
.pf-trade-icon { font-size: 26px; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: #fff; flex-shrink: 0; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.pf-trade-label { font-size: 13px; color: #333; font-weight: 600; }
.pf-trade-desc { font-size: 11px; color: #999; margin-top: 2px; }

/* 鍔熻兘鍒楄?*/
.pf-func-item {
  display: flex; align-items: center; padding: 15px 0; cursor: pointer;
  border-bottom: 1px solid #f5f5f5; transition: background .1s;
}
.pf-func-item:last-child { border-bottom: none; }
.pf-func-item:active { background: #fafafa; margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
.pf-func-icon { font-size: 18px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: #f5f7fa; flex-shrink: 0; margin-right: 12px; }
.pf-func-label { flex: 1; font-size: 14px; color: #333; }
.pf-func-sub { font-size: 11px; color: #bbb; margin-top: 1px; }
.pf-func-arrow { font-size: 18px; color: #ccc; }
/* ===== 绠＄悊鍚庡彴 ===== */
.admin-top-card {
  background: linear-gradient(135deg, #1677ff 0%, #0958d9 100%);
  padding: 12px 16px 16px;
  color: #fff;
}
.admin-top-row {
  display: flex; align-items: center; justify-content: space-between;
}
.admin-top-left {
  display: flex; align-items: center; cursor: pointer; color: #fff; font-weight: 600;
}
.admin-top-right {
  display: flex; align-items: center; gap: 12px;
}
.admin-top-logout {
  font-size: 13px; background: rgba(255,255,255,.15); padding: 5px 14px;
  border-radius: 14px; cursor: pointer; color: #fff; transition: background .15s;
}
.admin-top-logout:active { background: rgba(255,255,255,.3); }
.admin-info-row {
  display: flex; align-items: center; gap: 8px; margin-top: 12px;
}
.admin-icon { font-size: 18px; }
.admin-name { font-size: 15px; font-weight: 600; opacity: .95; }
.admin-role {
  font-size: 11px; background: rgba(255,255,255,.2); padding: 2px 8px;
  border-radius: 10px; opacity: .85;
}
/* Tab Bar */
.admin-tab-bar {
  display: flex; background: #fff; border-bottom: 1px solid #f0f0f0;
  position: sticky; top: 0; z-index: 40;
}
.admin-tab-item {
  flex: 1; text-align: center; padding: 14px 0; font-size: 15px; font-weight: 600;
  cursor: pointer; color: #888; border-bottom: 2px solid transparent;
  transition: all .2s; position: relative;
}
.admin-tab-item.active { color: #1677ff; border-bottom-color: #1677ff; }
.admin-tab-badge {
  display: inline-block; min-width: 18px; height: 18px; line-height: 18px;
  border-radius: 9px; background: #ff4d4f; color: #fff; font-size: 11px;
  text-align: center; margin-left: 6px; padding: 0 5px; font-weight: 500;
}
/* Error bar */
.admin-error-bar {
  padding: 8px 12px; color: #ff4d4f; font-size: 13px; background: #fff2f0;
  border-bottom: 1px solid #ffccc7;
}
/* Empty state */
.admin-empty {
  padding: 60px 20px; text-align: center;
}
.admin-empty-icon { font-size: 48px; margin-bottom: 12px; }
.admin-empty-title { font-size: 16px; font-weight: 600; color: #333; margin-bottom: 6px; }
.admin-empty-sub { font-size: 13px; color: #999; }

/* Product card (audit) */
.admin-product-card {
  background: #fff; margin: 10px 12px; border-radius: 12px;
  overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.apc-top { display: flex; padding: 12px; }
.apc-cover {
  width: 80px; height: 80px; border-radius: 8px; object-fit: cover;
  flex-shrink: 0; margin-right: 12px; background: #f0f0f0;
}
.apc-cover-placeholder {
  width: 80px; height: 80px; border-radius: 8px; flex-shrink: 0;
  margin-right: 12px; background: #f0f0f0; display: flex;
  align-items: center; justify-content: center; font-size: 32px; color: #bbb;
}
.apc-info { flex: 1; overflow: hidden; }
.apc-title { font-size: 15px; font-weight: 700; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apc-sub { font-size: 12px; color: #999; margin-top: 4px; }
.apc-price { font-size: 17px; font-weight: 700; color: #ff4d4f; margin-top: 4px; }
.apc-config { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.apc-digit {
  display: inline-block; background: #fff7e6; color: #d46b08; font-size: 11px;
  font-weight: 700; padding: 1px 5px; border-radius: 3px; letter-spacing: 1px;
}
.apc-tag {
  display: inline-block; background: #e6f4ff; color: #1677ff; font-size: 11px;
  font-weight: 600; padding: 1px 6px; border-radius: 3px;
}
.apc-time { font-size: 11px; color: #bbb; margin-top: 4px; }
.apc-actions {
  display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid #f5f5f5;
}
.apc-btn {
  flex: 1; height: 38px; border-radius: 19px; border: none; font-size: 14px;
  font-weight: 600; cursor: pointer; transition: all .15s;
}
.apc-btn:disabled { opacity: .5; cursor: not-allowed; }
.apc-btn-approve { background: #1677ff; color: #fff; }
.apc-btn-approve:active:not(:disabled) { background: #0958d9; }
.apc-btn-reject { background: #fff; color: #ff4d4f; border: 1px solid #ff4d4f; }
.apc-btn-reject:active:not(:disabled) { background: #fff2f0; }
.apc-loadmore {
  padding: 8px 32px; border-radius: 20px; border: 1px solid #d9d9d9;
  background: #fff; color: #666; font-size: 14px; cursor: pointer;
}

/* Dispute card */
.admin-dispute-card {
  background: #fff; margin: 10px 12px; border-radius: 12px;
  overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.adc-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 12px 0;
}
.adc-title { font-size: 15px; font-weight: 700; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; margin-right: 8px; }
.adc-status {
  display: inline-block; padding: 3px 10px; border-radius: 10px; font-size: 11px;
  font-weight: 600; flex-shrink: 0;
}
.adc-body { padding: 8px 12px 4px; }
.adc-row { display: flex; padding: 4px 0; font-size: 13px; }
.adc-label { color: #999; width: 60px; flex-shrink: 0; }
.adc-val { color: #333; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adc-actions {
  display: flex; gap: 6px; padding: 10px 12px; border-top: 1px solid #f5f5f5;
  flex-wrap: wrap;
}
.adc-btn {
  flex: 1 1 auto; min-width: 0; height: 34px; border-radius: 17px; border: none;
  font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s;
  white-space: nowrap; padding: 0 8px;
}
.adc-btn:active:not(:disabled) { opacity: .85; }
.adc-btn-detail { background: #1677ff; color: #fff; }
.adc-btn-record { background: #f5f5f5; color: #333; }
.adc-btn-reject { background: #fff7e6; color: #fa8c16; border: 1px solid #ffd591; }
.adc-btn-refund { background: #fff2f0; color: #ff4d4f; border: 1px solid #ffccc7; }

/* ===== 鍥剧墖涓婁紶缁勪?===== */
.upload-grid {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.upload-thumb {
  width: 80px; height: 80px; border-radius: 8px; overflow: hidden;
  position: relative; background: #f5f5f5; flex-shrink: 0;
  border: 1px solid #e8e8e8;
}
.upload-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.upload-thumb-del {
  position: absolute; top: -4px; right: -4px;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(0,0,0,.55); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; cursor: pointer; line-height: 1;
}
.upload-thumb-del:active { background: rgba(0,0,0,.8); }
.upload-add-btn {
  width: 80px; height: 80px; border-radius: 8px;
  border: 1px dashed #d9d9d9; background: #fafafa;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; color: #bbb; cursor: pointer; flex-shrink: 0;
  transition: all .15s;
}
.upload-add-btn:active { border-color: #1677ff; color: #1677ff; background: #e6f4ff; }
.upload-loading {
  width: 80px; height: 80px; border-radius: 8px;
  background: #f5f5f5; display: flex; align-items: center;
  justify-content: center; flex-shrink: 0;
}
.upload-spinner {
  width: 24px; height: 24px; border: 3px solid #e8e8e8;
  border-top-color: #1677ff; border-radius: 50%;
  animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ========== 閽卞?========== */
.wallet-card { background: linear-gradient(135deg,#1e40af,#3B82F6); border-radius:16px; padding:18px 16px; margin:0 0 12px; color:#fff; box-shadow:0 4px 12px rgba(30,64,175,.12); }
.wallet-balance-label { font-size:12px; opacity:.75; margin-bottom:2px; letter-spacing:.5px; }
.wallet-balance { font-size:24px; font-weight:700; margin-bottom:12px; letter-spacing:.3px; }
.wallet-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; }
.wallet-item { background:rgba(255,255,255,.08); border-radius:10px; padding:8px 4px; text-align:center; }
.wallet-item-label { font-size:10px; opacity:.7; }
.wallet-item-val { font-size:13px; font-weight:600; margin-top:2px; }

/* ========== 閽卞寘椤甸潰 ========== */
.wallet-actions-row { display: flex; gap: 10px; margin: 12px 0; }
.wallet-btn { flex: 1; height: 40px; border-radius: 12px; border: none; font-size: 14px; font-weight: 600; cursor: pointer; transition: all .2s; display:flex; align-items:center; justify-content:center; gap:4px; }
.wallet-btn.primary { background: #3B82F6; color: #fff; box-shadow:0 2px 8px rgba(59,130,246,.12); }
.wallet-btn.outline { background: #EFF6FF; color: #3B82F6; border: 1px solid #BFDBFE; }
.wallet-btn:active { transform:scale(.97); }
.wallet-records { background: #fff; border-radius: 12px; padding: 16px; margin-top: 12px; box-shadow: 0 1px 4px rgba(0,0,0,.03); }
.wallet-records-title { font-size: 15px; font-weight: 700; color: #1a1a2e; margin-bottom: 12px; }
.wallet-tabs { display: flex; gap: 6px; margin-bottom: 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.wallet-tab { flex-shrink: 0; padding: 6px 14px; border-radius: 14px; font-size: 12px; color: #999; background: #f5f5f5; cursor: pointer; transition: all .2s; }
.wallet-tab.active { background: #3B82F6; color: #fff; }
.wallet-empty { text-align: center; padding: 32px 0; }

.wallet-actions { padding:0; display:flex; flex-direction:column; gap:0; }

/* 璧勯噾娴佹按 */
.tx-list { display:flex; flex-direction:column; gap:1px; background:#f0f0f0; border-radius:12px; overflow:hidden; }
.tx-item { background:#fff; padding:14px 16px; display:flex; justify-content:space-between; align-items:flex-start; }
.tx-left { flex:1; min-width:0; }
.tx-type { font-size:14px; font-weight:600; color:#333; }
.tx-time { font-size:11px; color:#bbb; margin-top:2px; }
.tx-order { font-size:11px; color:#1E90FF;font-weight:600; margin-top:2px; }

/* ========== 售后页面 ========== */
.appeal-intro{background:#fff;margin:10px 12px;border-radius:12px;padding:14px 16px;box-shadow:0 1px 3px rgba(0,0,0,.03);}
.appeal-intro-title{font-size:15px;font-weight:600;color:#1F2937;margin-bottom:4px;}
.appeal-intro-sub{font-size:12px;color:#94A3B8;}
.appeal-tabs{display:flex;gap:0;margin:0 12px;overflow-x:auto;-webkit-overflow-scrolling:touch;border-bottom:1px solid #F1F5F9;}
.appeal-tab{flex-shrink:0;padding:10px 14px;font-size:13px;font-weight:500;color:#64748B;cursor:pointer;position:relative;transition:color .15s;white-space:nowrap;}
.appeal-tab.active{color:#3B82F6;font-weight:600;}
.appeal-tab.active::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:20px;height:2px;border-radius:1px;background:#3B82F6;}
.appeal-card{background:#fff;margin:10px 12px;border-radius:12px;padding:14px;box-shadow:0 1px 3px rgba(0,0,0,.03);}
.appeal-card-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px;}
.appeal-card-title{font-size:15px;font-weight:600;color:#1F2937;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-right:8px;}
.appeal-card-tag{flex-shrink:0;display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;}
.appeal-card-order{font-size:11px;color:#94A3B8;margin-bottom:6px;}
.appeal-card-meta{font-size:12px;color:#64748B;margin-bottom:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.appeal-card-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:8px;border-top:1px solid #F8FAFC;}
.appeal-card-time{font-size:11px;color:#94A3B8;}
.appeal-card-amount{font-size:13px;font-weight:600;color:#1F2937;}
.appeal-card-btn{flex-shrink:0;padding:5px 12px;border-radius:8px;border:1px solid #CBD5E1;background:#fff;color:#3B82F6;font-size:12px;font-weight:500;cursor:pointer;margin-left:10px;transition:all .15s;}
.appeal-card-btn:active{background:#EFF6FF;}
.appeal-empty{padding:60px 24px;text-align:center;}
.appeal-empty-icon{margin-bottom:12px;display:inline-flex;}
.appeal-empty-title{font-size:15px;font-weight:600;color:#64748B;margin-bottom:6px;}
.appeal-empty-sub{font-size:12px;color:#94A3B8;}

.tx-remark { font-size:11px; color:#999; margin-top:2px; }
.tx-right { text-align:right; flex-shrink:0; margin-left:12px; }
.tx-amount { font-size:16px; font-weight:700; }
.tx-balance { font-size:11px; color:#bbb; margin-top:2px; }

/* ========== 娌夋蹈寮忓竷灞€锛堟棤鍏ㄥ眬 header 鐨勯〉闈級========== */
.no-app-header .back-header { top: 0; }
.no-app-header .pub3-header { top: 0; }


/* === detail polish === */
.dt-gallery-view{position:relative}
.dt-gallery-nav{position:absolute;top:0;bottom:0;z-index:5;display:flex;align-items:center;justify-content:center}
.dt-gallery-prev{left:0;width:20%}
.dt-gallery-center{left:20%;width:60%}
.dt-gallery-next{right:0;width:20%}
.dt-gallery-arrow{color:#fff;font-size:36px;font-weight:300;text-shadow:0 1px 3px rgba(0,0,0,.4);opacity:.7;line-height:1;pointer-events:none}
.dt-zoom-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.92);z-index:999;display:flex;align-items:center;justify-content:center}
.dt-zoom-img{max-width:95vw;max-height:90vh;object-fit:contain}
.dt-zoom-close{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.2);color:#fff;font-size:20px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.dt-server-tag{font-size:14px;color:#555;background:#f0f0f0;padding:6px 14px;border-radius:12px;font-weight:600}
.dt-config-unlock{font-size:14px;color:#555;background:#f0f0f0;padding:6px 14px;border-radius:12px;font-weight:600}

/* 鎴浘棰勮 */
.dt-shot-overlay{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center}
.dt-shot-img{max-width:96vw;max-height:90vh;object-fit:contain;cursor:pointer}
.dt-shot-nav{position:absolute;top:0;bottom:0;z-index:6;display:flex;align-items:center;justify-content:center;cursor:pointer}
.dt-shot-prev{left:0;width:20%}
.dt-shot-next{right:0;width:20%}
.dt-shot-arrow{color:#fff;font-size:36px;font-weight:300;text-shadow:0 1px 3px rgba(0,0,0,.4);opacity:.7;line-height:1;pointer-events:none}
.dt-shot-close{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.2);color:#fff;font-size:20px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:7}
.dt-shot-count{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);color:#fff;font-size:13px;background:rgba(0,0,0,.5);padding:4px 14px;border-radius:12px}
/* 鍙戝竷绫诲瀷閫夋嫨 */
.pub3-type-card{background:#fff;border-radius:14px;padding:20px;margin-bottom:14px;box-shadow:0 2px 12px rgba(0,0,0,.06);text-align:left;cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);border:2px solid transparent}
.pub3-type-card.active{border-color:#1E90FF;font-weight:600}
.pub3-type-card.active:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(22,119,255,.15)}
.pub3-type-card.disabled{opacity:.5;cursor:not-allowed;pointer-events:none}
.pub3-type-icon{font-size:32px;margin-bottom:10px;line-height:1}
.pub3-type-name{font-size:17px;font-weight:700;color:#222;margin-bottom:6px}
.pub3-type-desc{font-size:12px;color:#999;line-height:1.6}
.pub3-type-badge{display:inline-block;margin-top:10px;font-size:11px;color:#999;background:#f0f0f0;padding:4px 12px;border-radius:10px}
.pub3-acc-type{display:flex;align-items:center;padding:10px 0}
.pub3-acc-type .label{font-size:13px;color:#666;width:70px;flex-shrink:0}
.pub3-acc-type .value{font-size:14px;font-weight:600;color:#333;background:#f0f0f0;padding:4px 14px;border-radius:12px}
/* 鍙戝竷椤典袱鍒楃綉鏍?*/
.pub3-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.pub3-grid-2 .pub3-row{margin-bottom:14px}
/* 瀛楁暟缁熻 */
.pub3-char-count{font-size:11px;color:#bbb;text-align:right;margin-top:4px;padding-right:4px}
.pub3-char-count.over{color:#ff4d4f}
/* 鍙戝竷椤靛唴鑱旇?*/
.pub3-inrow{display:flex;align-items:center;background:#fff;border:1px solid #e8e8e8;border-radius:10px;padding:0 14px;height:44px;margin-bottom:10px;gap:10px}
.pub3-inrow.readonly{background:#f8f9fa}
.pub3-inrow .pub3-ilabel{font-size:14px;font-weight:600;color:#333;white-space:nowrap;flex-shrink:0}
.pub3-inrow .pub3-ilabel .req{color:#ff4d4f;margin-right:2px}
.pub3-inrow input{flex:1;border:none;outline:none;font-size:14px;color:#333;text-align:right;background:transparent;min-width:0}
.pub3-inrow input::placeholder{color:#bbb}
/* 浠锋牸杈撳叆 */
.pub3-price-wrap{position:relative}
.pub3-price-wrap .pub3-input{padding-right:36px}
.pub3-price-yen{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:16px;font-weight:700;color:#ff4d4f;pointer-events:none;line-height:1}
/* 鍙戝竷绫诲瀷閫夋嫨鍔ㄧ?*/
@keyframes pub3FadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.pub3-type-anim{animation:pub3FadeUp .45s ease-out both}
/* 绫诲瀷閫夋嫨椤垫诞鍔ㄨ繑?*/
.pub3-back-float{position:absolute;top:12px;left:16px;z-index:10;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.85);backdrop-filter:blur(4px);box-shadow:0 2px 8px rgba(0,0,0,.08);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;color:#333;cursor:pointer;border:none}

/* ========== TradeRoom v3 ========== */
.trade-room-v3 { background: #f5f7fa; height: 100vh; height: 100dvh; max-height: 100dvh; display: flex; flex-direction: column; overflow: hidden; overscroll-behavior: none; }

/* Override .detail-page padding-bottom on trade room to prevent bottom scroll */
.trade-room-v3.detail-page {
  padding-bottom: 0;
}

/* v3 Header */
/* v3 Top Fixed Area */
.tr3-top-fixed { flex-shrink: 0; position: sticky; top: 50px; z-index: 50; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.no-app-header .tr3-top-fixed { top: 0; }

.tr3-header { background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; }
.tr3-header-top { display: flex; align-items: center; padding: 0 16px; height: 46px; gap: 10px; }
.tr3-header-top .bbtn { width: 30px; height: 30px; border-radius: 50%; background: #f5f5f5; border: none; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tr3-title { font-size: 17px; font-weight: 700; flex: 1; }
.tr3-badge { display: inline-block; padding: 3px 12px; border-radius: 12px; font-size: 12px; font-weight: 600; background: #e6f4ff; color: #1677ff; white-space: nowrap; }
.tr3-badge.done { background: #f6ffed; color: #52c41a; }
.tr3-badge.alert { background: #fff2f0; color: #ff4d4f; }
.tr3-header-sub { display: flex; align-items: center; gap: 12px; padding: 8px 16px 10px; font-size: 12px; }
.tr3-role { color: #1677ff; font-weight: 600; background: #e6f4ff; padding: 2px 10px; border-radius: 10px; }
.tr3-order-no { color: #999; }
.tr3-step-tag { display: inline-flex; align-items: center; gap: 5px; color: #fa8c16; background: #fff7e6; padding: 2px 10px; border-radius: 10px; font-weight: 500; }
.tr3-step-dot { width: 6px; height: 6px; border-radius: 50%; background: #fa8c16; animation: pulse-dot 1.5s infinite; }
@keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:.4} }

/* v3 Messages */
/* v3 Scrollable Content Area */
.tr3-scroll-area { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; min-height: 0; overscroll-behavior: contain; }
.tr3-messages { padding: 12px 16px; display: flex; flex-direction: column; gap: 6px; }
.tr3-empty { text-align: center; padding: 40px 0; }
.tr3-action-area { padding: 0 12px 16px; display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }
.tr3-safe-note { text-align: center; padding: 0 16px 20px; color: #bbb; font-size: 11px; flex-shrink: 0; padding-bottom: max(20px, env(safe-area-inset-bottom)); }

/* ========== System Message Card ========== */
.sys-msg-card { display: flex; justify-content: center; padding: 4px 0; animation: msgFadeIn .3s ease; }
.sys-msg-card-inner { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid #f0f0f0; border-radius: 10px; padding: 8px 14px; max-width: 92%; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.sys-msg-card-icon { flex-shrink: 0; display: flex; align-items: center; color: #1677ff; opacity: .7; }
.sys-msg-card-text { font-size: 12.5px; color: #555; line-height: 1.5; word-break: break-word; }
.sys-msg-card-time { flex-shrink: 0; font-size: 10px; color: #ccc; margin-left: 2px; }
@keyframes msgFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ========== Trade Action Card ========== */
.trade-action-card { background: #fff; border-radius: 12px; padding: 16px; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.trade-action-card .tac-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.trade-action-card .tac-icon { display: flex; align-items: center; color: #1677ff; flex-shrink: 0; }
.trade-action-card .tac-title { font-size: 15px; font-weight: 600; color: #222; }
.trade-action-card .tac-body { margin-bottom: 10px; }
.trade-action-card .tac-list { font-size: 13px; color: #666; line-height: 1.8; }
.trade-action-card .tac-hint { font-size: 12px; color: #999; line-height: 1.6; margin-bottom: 10px; }
.trade-action-card .tac-actions { display: flex; flex-direction: column; gap: 8px; }
.trade-action-card .tac-btn { width: 100%; height: 42px; border-radius: 10px; border: none; font-size: 14px; font-weight: 600; cursor: pointer; transition: opacity .2s; }
.trade-action-card .tac-btn.primary { background: #1677ff; color: #fff; }
.trade-action-card .tac-btn.success { background: #52c41a; color: #fff; }
.trade-action-card .tac-btn.warning { background: #fa8c16; color: #fff; }
.trade-action-card .tac-btn.danger { background: #ff4d4f; color: #fff; }
.trade-action-card .tac-btn.outline { background: #fff; color: #1677ff; border: 1.5px solid #1677ff; }
.trade-action-card .tac-btn:disabled { opacity: .5; cursor: not-allowed; }
.trade-action-card .tac-btn:not(:disabled):active { opacity: .8; }
.trade-action-card.danger-zone { border: 1px solid #ffccc7; background: #fff2f0; }
.trade-action-card.warn-zone { border: 1px solid #ffe58f; background: #fffbe6; }

/* Card input */
.card-input { width: 100%; height: 42px; border-radius: 10px; border: 1px solid #e8e8e8; padding: 0 14px; font-size: 14px; outline: none; background: #fafafa; margin-bottom: 8px; box-sizing: border-box; }
.card-input:focus { border-color: #1677ff; background: #fff; }

/* Input eye toggle */
.input-eye { position: absolute; right: 12px; top: 11px; cursor: pointer; font-size: 16px; user-select: none; z-index: 2; }

/* Dispute form (shared from old styles, keep) */
.df-row { margin-bottom: 12px; }
.df-label { font-size: 13px; font-weight: 600; color: #333; margin-bottom: 6px; }
.df-select { width: 100%; height: 42px; border-radius: 10px; border: 1px solid #e8e8e8; padding: 0 12px; font-size: 14px; background: #fff; outline: none; }
.df-textarea { width: 100%; min-height: 80px; border-radius: 10px; border: 1px solid #e8e8e8; padding: 10px 14px; font-size: 14px; resize: vertical; outline: none; font-family: inherit; }
.df-textarea:focus, .df-select:focus { border-color: #1677ff; }

.confirm-text { font-size: 14px; color: #555; line-height: 1.7; text-align: center; }

/* no-app-header override for trade room */
/* no-app-header moved to .tr3-top-fixed */


/* ========== Trade Progress Steps ========== */
.tr3-progress { display: flex; align-items: flex-start; justify-content: space-between; padding: 14px 12px 10px; border-bottom: 1px solid #f5f5f5; }
.tr3-progress-item { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; min-width: 0; }
.tr3-progress-line-wrap { position: absolute; top: 11px; left: 0; right: 50%; height: 2px; z-index: 0; }
.tr3-progress-item:first-child .tr3-progress-line-wrap { display: none; }
.tr3-progress-line { display: block; height: 100%; width: 100%; background: #e8e8e8; border-radius: 1px; transition: background .3s; }
.tr3-progress-line.done { background: #1677ff; }
.tr3-progress-dot-wrap { position: relative; z-index: 1; margin-bottom: 6px; }
.tr3-progress-dot { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; transition: all .25s; }
.tr3-progress-dot.pending { background: #f0f0f0; color: #bbb; border: 2px solid #e8e8e8; }
.tr3-progress-dot.active { background: #1677ff; color: #fff; border: 2px solid #1677ff; box-shadow: 0 0 0 3px rgba(22,119,255,.15); }
.tr3-progress-dot.done { background: #1677ff; color: #fff; border: 2px solid #1677ff; }
.tr3-progress-num { line-height: 1; }
.tr3-progress-label { font-size: 11px; font-weight: 500; text-align: center; line-height: 1.3; transition: color .25s; white-space: nowrap; }
.tr3-progress-label.pending { color: #bbb; }
.tr3-progress-label.active { color: #1677ff; font-weight: 700; }
.tr3-progress-label.done { color: #1677ff; }

/* 鍞悗寮圭獥 - 鍗曢€夌?*/
.df-radio-group { display: flex; flex-direction: column; gap: 4px; }
.df-radio-label { display: flex; align-items: center; padding: 8px 12px; border-radius: 8px; border: 1px solid #e8e8e8; cursor: pointer; font-size: 14px; color: #333; transition: all 0.2s; }
.df-radio-label:hover { border-color: #1677ff; background: #f0f7ff; }
.df-radio-label input[type="radio"] { accent-color: #1677ff; width: 16px; height: 16px; }

/* 鍞悗寮圭獥 - 鍥剧墖棰勮 */
.df-image-previews { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.df-image-preview-item { position: relative; display: inline-block; }
.df-image-remove:hover { transform: scale(1.1); }
.df-upload-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border: 1px dashed #d9d9d9; border-radius: 8px; cursor: pointer; color: #666; font-size: 13px; transition: all 0.2s; }
.df-upload-btn:hover { border-color: #1677ff; color: #1677ff; background: #f0f7ff; }
/* ========== 鏀惰棌椤甸?========== */
.fav-card { display: flex; gap: 12px; background: #fff; border-radius: 14px; padding: 12px; box-shadow: 0 1px 6px rgba(0,0,0,.04); cursor: pointer; transition: transform .15s; }
.fav-card:active { transform: scale(.98); background: #fafafa; }
.fav-img { width: 80px; height: 80px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: #f5f5f5; }
.fav-img-placeholder { display: flex; align-items: center; justify-content: center; font-size: 28px; color: #ccc; }
.fav-info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.fav-title { font-size: 14px; font-weight: 600; color: #1a1a2e; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 4px; }
.fav-meta { font-size: 12px; color: #999; margin-bottom: 2px; }
.fav-price-row { display: flex; align-items: center; justify-content: space-between; }

/* Order / Pay modal overlay - refined iOS-style */
.dt-overlay {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.38);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: dt-fade-in 180ms ease-out;
}
.dt-modal {
  width: calc(100% - 48px);
  max-width: 340px;
  background: #fff;
  border-radius: 24px;
  padding: 22px 20px 18px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
  animation: dt-scale-in 180ms ease-out;
}
.dt-modal-title {
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  color: #111827;
}
.dt-modal-body {
  text-align: center;
}
.dt-modal-price {
  font-size: 28px;
  font-weight: 800;
  color: #ff4d5a;
  margin-top: 12px;
  text-align: center;
}
.dt-modal-info-card {
  background: #f8fafc;
  border-radius: 14px;
  padding: 12px;
  margin-top: 14px;
  text-align: left;
}
.dt-modal-info-label {
  font-size: 12px;
  color: #94a3b8;
}
.dt-modal-info-value {
  font-size: 14px;
  color: #111827;
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dt-modal-hint {
  font-size: 12px;
  color: #94a3b8;
  text-align: center;
  margin-top: 10px;
}
.dt-modal-actions {
  display: flex;
  gap: 12px;
  margin-top: 18px;
}
.dt-btn-cancel {
  flex: 1;
  height: 44px;
  border-radius: 999px;
  border: none;
  background: #f3f4f6;
  color: #374151;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.dt-btn-confirm {
  flex: 1;
  height: 44px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(135deg, #ff5a66, #ff3f55);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(255, 79, 96, 0.28);
}
.dt-btn-confirm:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
@keyframes dt-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes dt-scale-in {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.home-publish-fab {
  position: fixed;
  z-index: 9999;
  width: 56px;
  height: 56px;
  border-radius: 20px;
  right: auto;
  left: calc(50% + 215px - 72px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 76px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ffb300 0%, #ff8a00 55%, #ff6a00 100%);
  color: #fff;
  box-shadow: 0 10px 24px rgba(255, 138, 0, 0.34);
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.45);
  transition: transform 0.2s, box-shadow 0.2s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.home-publish-fab:active {
  transform: scale(0.96);
  box-shadow: 0 6px 16px rgba(255, 138, 0, 0.28);
}
.home-publish-fab svg {
  flex-shrink: 0;
}

@media (max-width: 430px) {
  .home-publish-fab {
    left: auto;
    right: 16px;
  }
}

@media (max-width: 430px) {
  .home-publish-fab {
    left: auto;
    right: 16px;
  }
}

/* ===== Dynamics Comments ===== */
.dynamics-comment-item:hover { background: #f9f9f9; }
.dynamics-comment-reply-bar { display: flex; align-items: center; padding: 4px 0; font-size: 12px; }

/* ===== Dynamics Page ===== */
.dynamics-page {
  padding-bottom: 70px;
}

/* ========== 统一图片选择网格 ========== */
.image-picker-grid{display:flex;flex-wrap:wrap;gap:8px}
.image-picker-item{position:relative;width:80px;height:80px;border-radius:10px;overflow:hidden;flex-shrink:0}
.image-picker-item img{width:100%;height:100%;object-fit:cover}
.image-picker-remove{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;border:none;padding:0}
.image-picker-remove svg{width:12px;height:12px}
.image-picker-add{width:80px;height:80px;border-radius:10px;border:1px dashed #dcdfe6;background:#f5f7fa;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:all .16s ease;-webkit-tap-highlight-color:transparent}
.image-picker-add:active{transform:scale(.96);opacity:.85}
.image-picker-add .add-icon{font-size:24px;color:#c0c4cc;line-height:1;margin-bottom:2px}
.image-picker-add .add-text{font-size:10px;color:#c0c4cc;line-height:1}
.image-picker-add input[type=file]{display:none}
.is-app-client .image-picker-add:active{background:rgba(30,144,255,.06);border-color:#1E90FF}
.is-app-client .image-picker-item{width:84px;height:84px;border-radius:12px}
.is-app-client .image-picker-add{width:84px;height:84px;border-radius:12px}

/* ========== 全屏图片预览 ========== */
.image-preview-mask{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.94);z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
.image-preview-mask img{max-width:100%;max-height:75vh;object-fit:contain;-webkit-user-select:none;user-select:none}
.image-preview-close{position:absolute;top:max(16px,env(safe-area-inset-top));right:16px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;z-index:1}
.image-preview-close svg{width:20px;height:20px;stroke:#fff}
.image-preview-index{position:absolute;bottom:max(24px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);color:#fff;font-size:14px;opacity:.7}
.image-preview-nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;cursor:pointer;border:none}
.image-preview-prev{left:12px}.image-preview-next{right:12px}
.image-preview-nav svg{width:24px;height:24px;stroke:#fff}

/* ========== 上传状态遮?========== */
.upload-state-mask{position:absolute;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;border-radius:inherit}
.upload-state-mask .upload-spinner{width:20px;height:20px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.upload-state-error{position:absolute;inset:0;background:rgba(255,77,79,.12);display:flex;align-items:center;justify-content:center;border-radius:inherit;font-size:10px;color:#ff4d4f;text-align:center;padding:4px}
.pub3-btn:not(:disabled):active{transform:scale(.98);opacity:.9;box-shadow:0 4px 10px rgba(30,144,255,.12)}



/* ========== IM 卡片消息样式 ========== */
/* 用户端卡片 */
.im-card-msg {
  max-width: 280px;
  width: 100%;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  border: 1px solid #f0f0f0;
  transition: box-shadow 0.2s;
}
.im-card-msg:active { box-shadow: 0 2px 4px rgba(0,0,0,0.04); }
.im-card-msg.im-card-msg-self { max-width: 280px; }

.im-card-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.im-card-badge-account { background: #f0f9ff; color: #0284c7; }
.im-card-badge-escort { background: #fdf2f8; color: #db2777; }
.im-card-badge-order { background: #eef2ff; color: #4338ca; }

.im-card-body {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
}
.im-card-cover {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: #f5f5f5;
}
.im-card-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.im-card-title {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.im-card-subtype {
  font-size: 11px;
  font-weight: 500;
  color: #6366f1;
  margin-bottom: 1px;
}
.im-card-price {
  font-size: 15px;
  font-weight: 700;
  color: #f97316;
  line-height: 1.3;
}
.im-card-meta {
  font-size: 12px;
  color: #64748b;
  line-height: 1.4;
}
.im-card-meta-item {
  display: inline;
}
.im-card-meta-divider {
  margin: 0 4px;
  color: #d1d5db;
}
.im-card-order-no {
  font-size: 11px;
  color: #94a3b8;
  line-height: 1.3;
}
.im-card-action {
  border-top: 1px solid #f0f0f0;
  padding: 6px 12px;
  display: flex;
  justify-content: flex-end;
}
.im-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 500;
  color: #1677ff;
  background: #f5f9ff;
  border: 1px solid #d6e4ff;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
}
.im-card-btn:hover { background: #e6f0ff; border-color: #1677ff; }
.im-card-btn:active { background: #d6e4ff; }

/* 后台卡片 */
.admin-im-card-msg {
  min-width: 360px;
  max-width: 460px;
  width: auto;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  border: 1px solid #e8e8e8;
  transition: box-shadow 0.2s;
}
.admin-im-card-msg:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }

.admin-im-card-badge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.admin-im-card-badge-account { background: #f0f9ff; color: #0284c7; }
.admin-im-card-badge-escort { background: #fdf2f8; color: #db2777; }
.admin-im-card-badge-order { background: #eef2ff; color: #4338ca; }
.admin-im-card-badge-tag {
  font-size: 11px;
  font-weight: 400;
  opacity: 0.7;
}

.admin-im-card-body {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
}
.admin-im-card-cover {
  width: 72px;
  height: 72px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: #f5f5f5;
}
.admin-im-card-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.admin-im-card-title {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.admin-im-card-subtype {
  font-size: 11px;
  font-weight: 500;
  color: #6366f1;
}
.admin-im-card-price {
  font-size: 15px;
  font-weight: 700;
  color: #f97316;
  line-height: 1.3;
}
.admin-im-card-meta {
  font-size: 12px;
  color: #64748b;
  line-height: 1.5;
}
.admin-im-card-meta-divider {
  margin: 0 4px;
  color: #d1d5db;
}
.admin-im-card-action {
  border-top: 1px solid #f0f0f0;
  padding: 8px 14px;
  display: flex;
  justify-content: flex-end;
}
.admin-im-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 18px;
  font-size: 12px;
  font-weight: 500;
  color: #1677ff;
  background: #f5f9ff;
  border: 1px solid #d6e4ff;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.15s;

/* ===== IM conversation list layout (user-side) ===== */

/* ===== Admin IM conversation list ===== */
.admin-conv-item {
  display: flex;
  align-items: flex-start;
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.15s;
}
.admin-conv-item:hover { background: #f8f9ff; }
.admin-conv-item.selected { background: #e6f4ff; }

.admin-conv-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.admin-conv-top {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.admin-conv-name {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 150px;
}
.admin-conv-role-tag {
  font-size: 11px;
  color: #8b5cf6;
  background: #f5f3ff;
  border-radius: 10px;
  padding: 1px 8px;
  white-space: nowrap;
  flex-shrink: 0;
}
.admin-conv-lastmsg {
  font-size: 12px;
  color: #999;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-conv-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
  margin-left: 8px;
  gap: 4px;
}
.admin-conv-time {
  font-size: 11px;
  color: #adb5bd;
  white-space: nowrap;
}
.admin-conv-badge {
  background: #ff4d4f;
  color: #fff;
  border-radius: 10px;
  padding: 1px 8px;
  font-size: 11px;
  min-width: 18px;
  text-align: center;
}

}