/* find.css — 由 style.css 第 175-318 行切分（模块化②，保持原顺序）。link 顺序即层叠顺序，勿乱序。 */
/* ── 内容视图（app 态）── */
.view{position:absolute; inset:0; left:420px; padding:54px 56px 40px;
  display:none; flex-direction:column; overflow:hidden;
  transition:left .55s cubic-bezier(.6,.05,.2,1); }
.view-head{display:flex; align-items:baseline; gap:16px; margin-bottom:6px}
.view-head h2{font-family:var(--serif); font-weight:700; font-size:var(--fs-30); letter-spacing:4px}
.view-head .accent{font-size:var(--fs-12); color:var(--muted); letter-spacing:2px}
.view-sub{font-size:var(--fs-14); color:var(--muted); margin-bottom:22px}
.panel{display:none; min-height:0; flex:1; flex-direction:column}
.panel.on{display:flex}

.find-page-head{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:28px; margin-bottom:18px}
[data-panel="find"] .view-head{margin-bottom:7px}
[data-panel="find"] .view-sub{max-width:760px; margin-bottom:0; line-height:1.65}

/* 控制条 */
.controls{display:grid; grid-template-columns:minmax(340px,1fr) auto; gap:12px 18px; align-items:center; margin-bottom:12px}
.filter-groups,.search-tools{display:flex; gap:10px; align-items:center}
.filter-groups{justify-self:end; flex-wrap:wrap}
.search-tools{min-width:0}
.seg{display:flex; border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden}
.seg[hidden]{display:none}
.seg button{background:none;border:0;color:var(--muted);font-family:var(--sans);font-size:var(--fs-14);
  padding:7px 16px;cursor:pointer;transition:.2s}
.seg button.on{background:rgba(214,207,191,.1);color:#fff}
.ipt{flex:1; min-width:160px; background:rgba(0,0,0,.25); border:1px solid var(--line);
  border-radius:var(--r-sm); color:var(--text); padding:8px 13px; font-size:var(--fs-14); font-family:var(--sans)}
.ipt::placeholder, .ipt2::placeholder{color:var(--muted)}
.ipt:focus{outline:none; border-color:rgba(63,169,245,.5)}
.chk{display:flex;align-items:center;gap:7px;font-size:var(--fs-14);color:var(--muted);cursor:pointer}
.chk input{accent-color:var(--blue)}
/* 按游戏切换的数据能力说明 */
.find-status{display:grid; gap:3px; margin-bottom:10px}
.game-note{display:none; font-size:var(--fs-12); color:var(--muted); margin:0; letter-spacing:.5px}
.game-note.on{display:block}
.collection-status{font-size:var(--fs-11); line-height:1.55; color:var(--muted-2); margin:0; letter-spacing:.2px}
.collection-status:empty{display:none}
.iconbtn{background:rgba(0,0,0,.25); border:1px solid var(--line); border-radius:var(--r-sm);
  color:var(--muted); width:34px; height:34px; cursor:pointer; font-size:var(--fs-16); transition:.2s;
  display:inline-flex; align-items:center; justify-content:center}
.iconbtn:hover{color:#fff; border-color:rgba(63,169,245,.4)}
.iconbtn:disabled{opacity:.5; cursor:default}
.iconbtn.spinning{animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* 表格 */
.result-bar{display:flex; flex-direction:column; align-items:flex-end; justify-content:flex-end; gap:5px; min-width:176px;
  color:var(--muted); font-size:var(--fs-11); letter-spacing:.4px; text-align:right}
.result-count{font-variant-numeric:tabular-nums}
.sort-hint{color:var(--muted-2)}
.tw{flex:1; overflow:auto; border:1px solid var(--line); border-radius:var(--r-md);
  background:rgba(6,12,15,.5)}
.tw table{width:100%; min-width:1080px; table-layout:fixed; border-collapse:collapse; font-size:var(--fs-14)}
.tw thead th{position:sticky; top:0; z-index:2; background:#0c181d; color:var(--muted); font-weight:600;
  text-align:left; padding:13px 16px; letter-spacing:1px; border-bottom:1px solid var(--line);
  font-size:var(--fs-12)}
.tw th.n,.tw td.n{text-align:right; font-variant-numeric:tabular-nums}
.tw tbody td{padding:12px 10px; border-bottom:1px solid rgba(214,207,191,.06)}
.tw tbody tr{transition:background .15s; cursor:pointer; animation:rowin .25s both}
.tw tbody tr:hover{background:rgba(63,169,245,.06)}
.tw tbody tr:focus{outline:1px solid rgba(63,169,245,.65); outline-offset:-2px; background:rgba(63,169,245,.07)}
.col-server{width:24%}.col-map{width:11%}.col-mode{width:6%}.col-mods{width:7%}.col-password{width:6%}
.col-real{width:11%}.col-claimed{width:9%}.col-suspicion{width:9%}.col-day{width:6%}.col-tags{width:11%}
.map-filter-wrap{position:relative; display:block; min-width:0}
.map-filter{width:100%; min-width:0; height:30px; padding:0 24px 0 7px; appearance:none;
  overflow:hidden; border:1px solid transparent; border-radius:var(--r-sm); background:transparent;
  color:var(--muted); font:inherit; letter-spacing:.4px; text-overflow:ellipsis; cursor:pointer;
  color-scheme:dark; transition:color .15s,border-color .15s,background .15s}
.map-filter option,.map-filter optgroup{background:#0c181d; color:var(--text)}
.map-filter optgroup{color:var(--blue); font-weight:600}
.map-filter optgroup option{color:var(--text); font-weight:400}
.map-filter:hover,.map-filter:focus-visible{outline:none; color:#fff; border-color:rgba(63,169,245,.35);
  background:rgba(63,169,245,.06)}
.map-filter[data-filtered="true"]{color:var(--blue); border-color:rgba(63,169,245,.35);
  background:rgba(63,169,245,.08)}
.map-filter:disabled{cursor:wait; opacity:.6}
.map-filter-icon{position:absolute; top:50%; right:7px; width:12px; height:12px; pointer-events:none;
  transform:translateY(-50%); color:var(--muted-2); fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.sort-head{display:inline-flex; align-items:center; gap:6px; width:100%; padding:0; border:0; background:none;
  color:inherit; font:inherit; letter-spacing:inherit; cursor:pointer; white-space:nowrap; transition:color .15s}
.tw th.n .sort-head{justify-content:flex-end}
.sort-head::after{content:"↕"; color:var(--muted-2); font-size:var(--fs-11); opacity:.7}
.sort-head:hover,.sort-head:focus-visible{color:#fff; outline:none}
.sort-head:focus-visible{text-decoration:underline; text-underline-offset:4px}
.sort-head.on{color:var(--blue)}
.sort-head.on::after{content:"↓"; color:var(--blue); opacity:1}
.sort-head.on[data-direction="asc"]::after{content:"↑"}
@keyframes rowin{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.sname{overflow:hidden; color:var(--blue); font-weight:600; text-overflow:ellipsis; white-space:nowrap}
.sv-ip{font-size:var(--fs-11); color:var(--muted); margin-top:2px; font-variant-numeric:tabular-nums}
.map-name{display:block; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.real{color:var(--green); font-weight:700} .real.zero{color:var(--red)}
.dim{color:var(--muted-2)}
.fake{color:var(--red); font-weight:600}.fake.zero{color:var(--muted-2)}
.susp-pct{margin-left:5px; color:var(--muted-2); font-size:var(--fs-11)}
.hl{background:rgba(224,179,65,.28); color:#fff; border-radius:2px; padding:0 1px}
.tag{display:inline-block; font-size:var(--fs-11); padding:2px 8px; border-radius:4px; margin-right:5px;
  font-weight:600; letter-spacing:.5px}
.tag.cn{background:rgba(111,207,79,.12); color:var(--green); border:1px solid rgba(111,207,79,.25)}
.tag.off{background:rgba(63,169,245,.12); color:var(--blue); border:1px solid rgba(63,169,245,.25)}
.tag.susp{background:rgba(232,71,59,.12); color:var(--red); border:1px solid rgba(232,71,59,.25)}
.mode-value{font-size:var(--fs-11); font-weight:700; letter-spacing:.5px}
.mode-value.pve{color:var(--green)}
.mode-value.pvp{color:#d8887f}
.mod-count{min-width:34px; padding:3px 6px; border:0; border-bottom:1px dotted rgba(214,207,191,.35);
  background:none; color:var(--muted); font:inherit; font-variant-numeric:tabular-nums; cursor:pointer}
.mod-count.has-mods{color:var(--blue); border-bottom-color:rgba(63,169,245,.55)}
.mod-count:hover,.mod-count:focus-visible{outline:none; color:#fff; border-bottom-style:solid}
.mod-popover{position:fixed; z-index:60; overflow:hidden; border:1px solid rgba(63,169,245,.28);
  border-radius:8px; background:rgba(8,17,21,.98); box-shadow:0 18px 48px rgba(0,0,0,.5); backdrop-filter:blur(16px)}
.mod-popover[hidden]{display:none}
.mod-pop-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:11px 13px;
  border-bottom:1px solid var(--line); background:rgba(63,169,245,.045)}
.mod-pop-head strong{color:#fff; font-size:var(--fs-12); letter-spacing:.5px}
.mod-pop-head span{color:var(--muted-2); font-size:var(--fs-11)}
.mod-pop-list{max-height:min(300px,48vh); overflow:auto; padding:4px}
.mod-pop-item{position:relative; display:flex; flex-direction:column; gap:2px; min-height:46px; padding:8px 30px 8px 9px;
  border-radius:5px; color:inherit; text-decoration:none}
.mod-pop-item:hover{background:rgba(63,169,245,.08)}
.mod-pop-name{overflow:hidden; color:var(--text); font-size:var(--fs-12); font-weight:600; text-overflow:ellipsis; white-space:nowrap}
.mod-pop-meta{overflow:hidden; color:var(--muted-2); font-size:var(--fs-11); font-variant-numeric:tabular-nums; text-overflow:ellipsis; white-space:nowrap}
.mod-pop-open{position:absolute; top:14px; right:10px; color:var(--blue); font-size:var(--fs-12)}
.mod-pop-empty{margin:0; padding:14px 13px; color:var(--muted); font-size:var(--fs-12)}
/* Steam 直连 / 复制地址 */
.connect{color:var(--blue); text-decoration:none; font-weight:600; margin-left:6px; padding:4px 6px; white-space:nowrap}
.connect:hover{text-decoration:underline}
.copyip{background:none; border:0; color:var(--muted); cursor:pointer; font-size:var(--fs-11); padding:4px 5px; margin-left:1px}
.copyip:hover{color:#fff}
.conn-row{display:flex; gap:10px; align-items:center; margin:-6px 0 16px}
.btn-connect{display:inline-flex; align-items:center; gap:4px; background:rgba(63,169,245,.14);
  color:var(--blue); border:1px solid rgba(63,169,245,.35); border-radius:6px; padding:7px 14px;
  font-size:var(--fs-14); font-weight:600; text-decoration:none; transition:background .15s}
.btn-connect:hover{background:rgba(63,169,245,.24)}
.conn-row .copyip{font-size:var(--fs-14); border:1px solid var(--line); border-radius:6px; padding:7px 12px}
/* 可疑度进度条 */
.susp-wrap{display:flex; flex-direction:column; align-items:flex-end; gap:3px}
.susp-bar{width:54px; height:3px; background:rgba(232,71,59,.15); border-radius:2px; overflow:hidden}
.susp-fill{height:100%; background:var(--red); border-radius:2px}

/* 分页 */
.pager{display:flex; align-items:center; justify-content:center; gap:10px; padding-top:12px;
  font-size:var(--fs-12); color:var(--muted)}
.pager button{background:rgba(0,0,0,.25); border:1px solid var(--line); border-radius:var(--r-sm);
  color:var(--text); padding:7px 14px; font-size:var(--fs-12); cursor:pointer; transition:.2s}
.pager button:hover:not(:disabled){border-color:rgba(63,169,245,.4)}
.pager button:disabled{opacity:.4; cursor:default}

/* 骨架屏 / spinner */
.skel-line{height:12px; border-radius:3px;
  background:linear-gradient(90deg,rgba(214,207,191,.06) 25%,rgba(214,207,191,.14) 37%,rgba(214,207,191,.06) 63%);
  background-size:400% 100%; animation:shimmer 1.4s ease infinite}
.skel-line.wide{width:70%} .skel-line.mid{width:45%}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
.spin-dot{width:18px;height:18px;border:2px solid var(--line);border-top-color:var(--blue);
  border-radius:50%; animation:spin .8s linear infinite}

/* 占位面板 */
.placeholder{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; color:var(--muted); gap:18px}
.placeholder .big{font-family:var(--serif); font-size:var(--fs-30); letter-spacing:6px; color:var(--stone-dim)}
.placeholder p{max-width:460px; line-height:1.9; font-size:var(--fs-14)}
.placeholder .soon{font-size:var(--fs-12);letter-spacing:3px;color:var(--gold);border:1px solid rgba(224,179,65,.4);
  padding:6px 16px;border-radius:4px}
/* ── 详情弹窗 ── */
.modal{position:fixed; inset:0; z-index:20; display:flex; align-items:center; justify-content:center;
  background:rgba(2,5,7,.72); backdrop-filter:blur(4px); animation:fadein .25s}
.modal[hidden]{display:none}
.modal-card{position:relative; width:min(760px,92vw); max-height:86vh; overflow:auto;
  background:var(--obsidian-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:30px 32px;
  box-shadow:0 30px 80px rgba(0,0,0,.6); animation:rise .3s}
.modal-card h2{font-family:var(--serif); font-size:var(--fs-24); letter-spacing:2px; color:#fff; margin-bottom:6px}
.modal-card .sub{font-size:var(--fs-12); color:var(--muted); margin-bottom:18px; font-variant-numeric:tabular-nums}
.modal .close{position:absolute; top:16px; right:16px; background:none; border:0; color:var(--muted);
  font-size:var(--fs-20); cursor:pointer; line-height:1; transition:.2s}
.modal .close:hover{color:#fff}
.mstats{display:flex; gap:22px; margin-bottom:16px}
.mstats div{text-align:center}
.mstats b{display:block; font-size:var(--fs-24); font-weight:700}
.mstats>div>span{font-size:var(--fs-11); color:var(--muted); letter-spacing:1px}
.mstats .reported-value{position:relative; display:inline-block; font:inherit; letter-spacing:normal}
.mstats .reported-value::after{content:""; position:absolute; z-index:1; top:50%; left:-12%; width:124%; height:3px; background:#e85b55; transform:translateY(-50%) rotate(-24deg); transform-origin:center}
.reason-box{background:rgba(232,71,59,.06); border:1px solid rgba(232,71,59,.2); border-radius:8px;
  padding:12px 16px; margin-bottom:16px}
.reason-title{display:flex; align-items:center; gap:7px; font-size:var(--fs-14); font-weight:600;
  color:var(--red); margin-bottom:8px}
.reason-icon{width:15px;height:15px}
.reason-box ul{margin:0; padding-left:18px}
.reason-box li{font-size:var(--fs-12); line-height:1.7; color:var(--muted)}
.pl-note{font-size:var(--fs-14); color:var(--muted); line-height:1.7; padding:8px 0}
.pl-time{margin:0 0 6px; color:var(--muted-2); font-size:var(--fs-11)}
.pl-table{width:100%; border-collapse:collapse; font-size:var(--fs-14)}
.pl-table th{text-align:left; color:var(--muted); font-size:var(--fs-11); font-weight:600; letter-spacing:1px;
  padding:8px 10px; border-bottom:1px solid var(--line)}
.pl-table td{padding:8px 10px; border-bottom:1px solid rgba(214,207,191,.06)}
.pl-row.bot{background:rgba(232,71,59,.05)}
.pl-name{color:#fff}
.pl-reason{color:var(--red); font-size:var(--fs-11)}

/* ── Toast ── */
#toastContainer{position:fixed; bottom:26px; left:50%; transform:translateX(-50%); z-index:30;
  display:flex; flex-direction:column; gap:8px; align-items:center}
.toast{background:var(--obsidian-2); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:10px 18px; font-size:var(--fs-14); color:var(--text); box-shadow:0 10px 30px rgba(0,0,0,.5);
  animation:rise .3s}
.toast.out{animation:fadeout .4s forwards}
@keyframes fadeout{to{opacity:0;transform:translateY(8px)}}