/* ============================================================
   商标查询页专用样式（2026-10-29 同步小程序四模式重写）
   ============================================================ */
.page{padding-bottom:60px}

/* ===== 吸顶查询条 ===== */
.search-bar{position:sticky;top:var(--nav-h);z-index:80;background:var(--panel);border-bottom:1px solid var(--line);box-shadow:0 2px 14px rgba(61,58,53,.06);padding:12px 0}
.sb-modes{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.sb-mode{background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 18px;font-size:13.5px;color:var(--muted);cursor:pointer;white-space:nowrap;transition:.15s;font-family:inherit}
.sb-mode:hover{color:var(--ink);border-color:var(--ink)}
.sb-mode.on{background:var(--gold);border-color:var(--gold);color:#fff;font-weight:600}
.sb-row{display:flex;gap:10px}
.sb-row input{flex:1;min-width:0;height:44px;padding:0 16px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;outline:none;font-size:15px;font-family:inherit}
.sb-row input:focus{border-color:var(--gold)}
.sb-row .btn{flex-shrink:0;padding:0 28px}
.sb-tip{margin-top:8px;font-size:12.5px;color:var(--muted)}

/* ===== 结果头 ===== */
.res-head{display:flex;justify-content:space-between;align-items:center;padding:22px 0 10px;gap:14px;flex-wrap:wrap}
#resTitle{font-size:15px;color:var(--ink)}
#resTitle b{color:var(--gold);font-weight:600;font-size:17px}
.res-tools{display:flex;gap:8px}
.mini-sel{height:34px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;font-size:13px;outline:none;font-family:inherit;color:var(--ink)}

/* ===== 筛选条（chip + 下拉面板，同步小程序三筛选） ===== */
.filter-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.f-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 16px;font-size:13.5px;cursor:pointer;font-family:inherit;color:var(--ink);transition:.15s}
.f-chip:hover{border-color:var(--ink)}
.f-chip.on{border-color:var(--gold);color:var(--gold);font-weight:600;background:#fdf9f0}
.f-chip.disabled{opacity:.5;cursor:not-allowed}
.f-chip .arr{font-size:10px;color:var(--muted)}
.f-panel{display:none;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;box-shadow:var(--shadow);padding:10px;margin-top:6px;width:100%}
.f-panel.open{display:block}
.opt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:2px;max-height:320px;overflow:auto}
.opt-cell{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:7px 10px;border-radius:6px;cursor:pointer;font-size:13px;color:var(--ink)}
.opt-cell:hover{background:#f7f3ea}
.opt-cell.on{background:#fdf9f0;color:var(--gold);font-weight:600}
.opt-cell .cnt{color:var(--muted);font-size:12px;font-weight:400}
.opt-cell.on .cnt{color:var(--gold)}
.group-chips{display:flex;gap:6px;flex-wrap:wrap;max-height:260px;overflow:auto}
.g-chip{border:1px solid var(--line);border-radius:6px;padding:6px 12px;font-size:13px;cursor:pointer;background:#fff;font-family:inherit;color:var(--ink)}
.g-chip.on{border-color:var(--gold);background:#fdf9f0;color:var(--gold);font-weight:600}
.f-panel-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}
.f-panel-actions .btn{padding:7px 18px;font-size:13px}

/* ===== 状态行 / 提示条 ===== */
.status-row{display:flex;gap:18px;font-size:13px;color:var(--muted);margin:4px 0 10px;flex-wrap:wrap}
.status-row .remain{color:var(--gold)}
.hint-bar{display:none;font-size:13.5px;line-height:1.6;border-radius:var(--r-sm);padding:10px 14px;margin-bottom:12px}
.hint-bar.hint-blue{display:block;background:var(--st-green-bg,#eef4fb);border:1px solid #b9d0ec;color:#2b5c9a}
.hint-bar.hint-warn{display:block;background:var(--st-warn-bg,#fdf6e3);border:1px solid #ecd9a8;color:#8a6a1f}
.hint-bar.hint-err{display:block;background:var(--st-red-bg,#fbeeec);border:1px solid #e3b7b0;color:#A0392F}

/* ===== 结果卡（与小程序 result-card 同构：名/注册号·类/申请人 + 右上角状态徽章） ===== */
.rc{display:flex;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);padding:14px;margin-bottom:10px;cursor:pointer;position:relative;transition:.15s}
.rc:hover{border-color:var(--gold);box-shadow:0 4px 16px rgba(184,138,59,.12)}
.rc-img{width:84px;height:84px;flex-shrink:0;border:1px solid var(--line);border-radius:6px;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden}
.rc-img img{width:100%;height:100%;object-fit:contain;display:block}
.rc-img .ph{font-size:12px;color:var(--muted)}
.rc-info{flex:1;min-width:0;padding-right:70px}
.rc-name{font-size:17px;font-weight:700;color:#A0392F;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rc-name-fallback{color:var(--muted);font-weight:500;font-size:14px}
.rc-tip{font-size:12px;color:var(--muted);margin-left:4px}
.rc-line{margin-top:6px;font-size:13.5px}
.rc-reg{color:var(--ink)}
.rc-sep{margin:0 6px;color:var(--line)}
.rc-cls{color:var(--ink)}
.rc-applicant{color:#2b5c9a;display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rc-applicant-empty{color:var(--muted)}
.rc-badge{position:absolute;top:12px;right:12px;font-size:12px;padding:3px 10px;border-radius:999px;font-weight:600}
.badge-green{background:var(--st-green-bg,#e8f3e9);color:var(--st-green-fg,#386B3F)}
.badge-red{background:var(--st-red-bg,#fbeeec);color:var(--st-red-fg,#A0392F)}
.badge-gray{background:#f0efec;color:#6b675f}

/* ===== 申请人卡（展开式，同步小程序 applicant 页） ===== */
.apc{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);padding:14px 16px;margin-bottom:10px;cursor:pointer;transition:.15s}
.apc:hover{border-color:var(--gold)}
.apc.open{border-color:var(--gold)}
.apc-main{display:flex;justify-content:space-between;align-items:center;gap:10px}
.apc-name{font-size:15px;font-weight:600;color:var(--ink)}
.apc-sub{font-size:12.5px;color:var(--muted);margin-top:4px}
.apc-sub .idno{margin-left:8px}
.apc-arrow{color:var(--muted);font-size:18px;flex-shrink:0}
.apc-detail{display:none;margin-top:12px;border-top:1px dashed var(--line);padding-top:12px}
.apc.open .apc-detail{display:block}
.tm-sub-count{font-size:12.5px;color:var(--muted);margin:8px 0}
.tm-view-all{display:inline-block;margin:6px 0 2px;font-size:13.5px;color:var(--gold);cursor:pointer;font-weight:600}

/* ===== 分页 ===== */
.pager{display:flex;gap:8px;justify-content:center;align-items:center;margin:18px 0}
.pager button{border:1px solid var(--line);background:#fff;border-radius:var(--r-sm);padding:8px 16px;font-size:14px;cursor:pointer;font-family:inherit;color:var(--ink)}
.pager button:hover:not(:disabled){border-color:var(--gold);color:var(--gold)}
.pager button:disabled{opacity:.4;cursor:not-allowed}
.pager .pinfo{font-size:13.5px;color:var(--muted)}

/* ===== 空 / 加载 ===== */
.empty{text-align:center;padding:60px 0;color:var(--muted)}
.empty .empty-icon{font-size:40px;margin-bottom:10px}
.empty h3{color:var(--ink);margin:0 0 6px}
.sk{display:flex;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);padding:14px;margin-bottom:10px}
.sk-th{width:84px;height:84px;flex-shrink:0;border-radius:6px;background:linear-gradient(90deg,#f0efec 25%,#f7f6f3 50%,#f0efec 75%);background-size:200% 100%;animation:skshine 1.2s infinite}
.sk-b{flex:1;padding-top:6px}
.sk-l{height:14px;border-radius:4px;background:linear-gradient(90deg,#f0efec 25%,#f7f6f3 50%,#f0efec 75%);background-size:200% 100%;animation:skshine 1.2s infinite;margin-bottom:10px}
.sk-l.mid{width:70%}.sk-l.short{width:45%}
@keyframes skshine{to{background-position:-200% 0}}

/* ===== 详情弹层 ===== */
.mask{display:none;position:fixed;inset:0;background:rgba(30,28,24,.5);z-index:100;overflow:auto;padding:40px 14px}
.mask.on{display:block}
.modal.detail{background:var(--panel);max-width:680px;margin:0 auto;border-radius:var(--r-md);padding:26px 28px;position:relative;box-shadow:var(--shadow)}
.d-close{position:absolute;top:12px;right:14px;border:none;background:none;font-size:26px;cursor:pointer;color:var(--muted);line-height:1}
.d-head{display:flex;gap:18px;margin-bottom:18px}
.d-head-img{width:120px;height:120px;flex-shrink:0;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden}
.d-head-img img{width:100%;height:100%;object-fit:contain}
.d-head-img .ph{font-size:13px;color:var(--muted)}
.d-head-info{flex:1;min-width:0}
.d-head-info h2{margin:0 0 8px;font-size:20px}
.d-sub{font-size:13.5px;color:var(--muted);margin-bottom:6px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.d-kv{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px;margin:0}
.d-kv dt{font-size:12.5px;color:var(--muted)}
.d-kv dd{margin:2px 0 0;font-size:14px;color:var(--ink);word-break:break-all}
.d-sec{margin-top:18px}
.d-sec h4{margin:0 0 10px;font-size:15px;display:flex;align-items:center;gap:8px}
.d-sec h4 .cnt{font-size:12.5px;color:var(--muted);font-weight:400}
.d-applicant{background:#f7f5f0;border-radius:var(--r-sm);padding:12px 14px;margin-bottom:8px}
.d-applicant .row{display:flex;gap:8px;align-items:flex-start;font-size:14px;margin-bottom:6px}
.d-applicant .row:last-child{margin-bottom:0}
.d-applicant .lab{color:var(--muted);flex-shrink:0}
.d-applicant .val{color:var(--ink);word-break:break-all}
.reverse-btn{color:var(--gold);cursor:pointer;font-size:13px;white-space:nowrap}
.goods-flat{display:flex;flex-wrap:wrap;gap:8px}
.goods-item{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:6px;padding:5px 10px;font-size:13px;color:var(--ink)}
.goods-item .gcode{background:#f0e9db;border-radius:4px;padding:1px 6px;font-size:12px;color:#8a6a1f}
.goods-item.rejected{opacity:.65;text-decoration:line-through}
.goods-item .rtag{color:#A0392F;font-size:12px;text-decoration:none}
.goods-text{font-size:13.5px;color:var(--ink);line-height:1.8}
.time-row{display:flex;gap:12px;font-size:14px;padding:6px 0;border-bottom:1px dashed var(--line)}
.time-row:last-child{border-bottom:none}
.time-row .lab{color:var(--muted);width:88px;flex-shrink:0}
.time-row .val{color:var(--ink)}
.flow-list .flow-row{display:flex;gap:12px;padding:10px 0;border-bottom:1px dashed var(--line)}
.flow-list .flow-row:last-child{border-bottom:none}
.flow-dot{width:9px;height:9px;border-radius:50%;background:var(--gold);margin-top:6px;flex-shrink:0}
.flow-body{flex:1}
.flow-title{font-size:14px;color:var(--ink);font-weight:600}
.flow-detail{font-size:12.5px;color:var(--muted);margin-top:3px;word-break:break-all}
.flow-tip{font-size:12px;color:var(--gold);margin-top:3px;cursor:pointer}
.flow-date{font-size:12.5px;color:var(--muted);flex-shrink:0}
.d-act{display:flex;gap:12px;justify-content:flex-end;margin-top:22px}
.d-loading{text-align:center;padding:40px 0;color:var(--muted)}

@media(max-width:640px){
  .rc-info{padding-right:0;padding-top:44px}
  .d-kv{grid-template-columns:1fr}
  .d-head{flex-direction:column}
  .modal.detail{padding:22px 16px}
}