/* ============================================================
   前台首页 · 装机开荒软件库
   ============================================================ */
.main{min-height:100vh; padding:0 18px 20px}

/* ---------- 顶栏（液态玻璃 Title Bar） ---------- */
.titlebar{position:sticky; top:12px; z-index:60; display:flex; align-items:center; gap:14px;
  width:min(1180px, calc(100% - 36px)); margin:12px auto 18px; padding:10px 12px 10px 16px;
  background:var(--glass-2)}
.titlebar .brand .logo{flex:none}
.brand{display:flex; align-items:center; gap:11px; cursor:pointer; user-select:none; flex:none}
.brand .brand-link{display:flex; align-items:center; min-width:0}
.brand .logo{width:42px; height:42px; flex:none; border-radius:12px; display:grid; place-items:center; color:#fff;
  background:linear-gradient(155deg,#31a2ff,#0b62d8 58%,#0a54bd); position:relative; overflow:hidden;
  box-shadow:0 6px 16px rgba(20,110,220,.35), inset 0 1px 0 rgba(255,255,255,.4)}
.brand .logo .ic{width:21px; height:21px}
.brand .logo::after{content:""; position:absolute; left:10%; right:10%; top:0; height:45%;
  background:linear-gradient(180deg,rgba(255,255,255,.5),transparent)}
.brand .logo .logo-img{position:relative; width:100%; height:100%; object-fit:cover; border-radius:inherit; display:block}
/* 上传的自定义 Logo：按原图原始像素显示，不做缩放/裁切 */
.brand .logo.is-img{width:auto; height:auto; background:transparent; box-shadow:none; overflow:visible}
.brand .logo.is-img::after{display:none}
.brand .logo.is-img .logo-img{width:auto; height:auto; object-fit:contain; display:block}

/* 搜索框 */
.searchbox{flex:1; max-width:640px; margin:0 auto; display:flex; align-items:center; gap:8px;
  height:42px; padding:0 8px 0 14px; border-radius:13px;
  background:color-mix(in srgb,var(--glass-2) 62%,transparent);
  border:1px solid var(--line); backdrop-filter:blur(18px) saturate(1.5);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--line) 80%,transparent);
  transition:box-shadow .18s, border-color .18s}
.searchbox:focus-within{border-color:color-mix(in srgb,var(--accent) 60%,transparent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
.searchbox .ic{color:var(--tx-3); width:18px; height:18px}
.searchbox input{flex:1; border:0; outline:none; background:transparent; font-size:14px; min-width:0; color:var(--tx)}
.searchbox .kbd{flex:none; font-size:10.5px; font-weight:700; color:var(--tx-3);
  border:1px solid var(--line-2); border-radius:6px; padding:2px 7px; background:color-mix(in srgb,var(--tx) 4%,transparent)}
.searchbox .xbtn{display:none}
.searchbox.has input~.xbtn{display:inline-flex}

/* 右侧动作组 */
.actions{display:flex; align-items:center; gap:4px; flex:none}
.actions .icon-btn{border:1px solid var(--line); background:color-mix(in srgb,var(--glass-2) 55%,transparent);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px)}

/* ---------- 内容区 ---------- */
.stage{max-width:1180px; margin:0 auto; display:flex; flex-direction:column; gap:22px}
.hero-pad{padding-top:10px}

/* 分类条 */
.chips-panel{padding:12px 14px}
.chips-panel .chip-row{gap:8px}

/* 状态行（搜索/分类说明） */
.kicker{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--tx-3); padding:2px 6px 0}
.kicker b{color:var(--tx-2)}

/* ---------- 装机必备（横向卡片导轨） ---------- */
.panel{overflow:hidden}
.panel-body{padding:16px 18px 18px}
.sec-head{display:flex; align-items:center; gap:11px; margin-bottom:14px}
.sec-head .ttl{display:flex; align-items:center; gap:9px; font-size:16.5px; font-weight:750; letter-spacing:.2px}
.sec-head .ttl .glyph{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(155deg,var(--accent-g1),var(--accent-g2));
  box-shadow:0 5px 14px color-mix(in srgb,var(--accent) 34%,transparent)}
.sec-head .ttl .glyph .ic{width:16px;height:16px}
.sec-head .desc{color:var(--tx-3); font-size:12.5px; margin-top:1px}
.sec-head .right{margin-left:auto; display:flex; align-items:center; gap:8px}

.hrail{display:flex; gap:13px; overflow-x:auto; padding:6px 2px 12px; scroll-snap-type:x proximity;
  scrollbar-width:none}
.hrail::-webkit-scrollbar{display:none}
/* 必备导轨左右滑动按钮 */
.rail-nav{display:flex; gap:6px}
.nav-btn{width:30px; height:30px; border-radius:10px; display:grid; place-items:center; cursor:pointer;
  color:var(--tx-2); background:color-mix(in srgb,var(--glass-2) 65%,transparent);
  border:1px solid var(--line); transition:color .16s var(--ease), border-color .16s var(--ease),
  background .16s var(--ease), opacity .16s var(--ease)}
.nav-btn .ic{width:15px; height:15px}
.nav-btn:hover:not(:disabled){color:var(--accent); border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.nav-btn:active:not(:disabled){transform:scale(.94)}
.nav-btn:disabled{opacity:.32; cursor:default}
.rc-card{flex:none; width:172px; scroll-snap-align:start; cursor:pointer; user-select:none;
  border-radius:18px; padding:14px 12px 12px; text-align:center;
  background:color-mix(in srgb,var(--glass) 60%,transparent); border:1px solid var(--line);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s}
.rc-card:hover{transform:translateY(-4px); background:var(--glass-2);
  box-shadow:0 14px 30px rgba(20,30,70,.14), inset 0 1px 0 var(--line)}
.rc-card .ico{width:74px; height:74px; margin:2px auto 9px; border-radius:18px;
  box-shadow:0 8px 18px rgba(10,20,50,.18); transition:transform .2s var(--ease)}
.rc-card:hover .ico{transform:scale(1.06) rotate(-2deg)}
.rc-card b{display:block; font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rc-card .v{font-size:11px; color:var(--tx-3); margin-top:2px}
/* 所有软件图标统一按容器等比缩略显示，并带圆角 */
.ico img{width:100%;height:100%;object-fit:contain;display:block;border-radius:inherit}
.ico{position:relative; display:block; line-height:0}

/* ---------- 分类分区 ---------- */
.sections{display:flex; flex-direction:column; gap:20px}
.group .panel-body{padding-top:16px}
.group-head{display:flex; align-items:center; gap:10px; padding:0 2px 6px}
.group-head .f{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:var(--tx-2);
  background:color-mix(in srgb,var(--tx) 7%,transparent)}
.group-head .f .ic{width:16px;height:16px}
.group-head b{font-size:16px; font-weight:750; letter-spacing:.2px}
.group-head .n{font-size:11.5px; color:var(--tx-3); font-weight:600; padding-top:2px}
.applist{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 16px}
@media (max-width:900px){.applist{grid-template-columns:1fr}}

/* 软件行卡片 */
.app-row{position:relative; display:flex; align-items:center; gap:13px; padding:10px 12px; cursor:pointer;
  border-radius:16px; transition:background .16s var(--ease), transform .16s var(--ease);
  animation:fadeIn .45s var(--ease) both}
.app-row:hover{background:color-mix(in srgb,var(--tx) 6%,transparent)}
.app-row:active{transform:scale(.992)}
.app-row .ico{width:52px; height:52px; flex:none; border-radius:14px;
  box-shadow:0 6px 14px rgba(12,22,52,.14), inset 0 0 0 1px color-mix(in srgb,var(--tx) 4%,transparent);
  transition:transform .18s var(--ease)}
.app-row:hover .ico{transform:scale(1.07) rotate(-2deg)}
.app-row .info{flex:1; min-width:0; line-height:1.4}
.app-row .info b{display:flex; align-items:center; gap:7px; font-size:14.5px}
.app-row .info .nm{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.app-row .info .tl{color:var(--tx-2); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  overflow-wrap:anywhere}
.app-row .meta{display:flex; align-items:center; gap:7px; margin-top:3px; flex-wrap:wrap}
.app-row .ops{display:flex; align-items:center; gap:2px; flex:none; opacity:.45; transition:opacity .18s}
.app-row:hover .ops{opacity:1}
.app-row .dl{margin-left:2px}
.tag{display:inline-flex; align-items:center; font-size:10.5px; font-weight:700; color:var(--tx-3);
  padding:2.5px 8px; border-radius:7px; border:1px solid var(--line-2); background:color-mix(in srgb,var(--tx) 3%,transparent)}
.badge.rec .ic{width:11px;height:11px}

/* 结果空状态 */
.results-head{display:flex;align-items:center;gap:10px}
.results-head b{font-size:15.5px}
.results-head .ic{color:var(--accent)}

@media (max-width:640px){
  .titlebar{flex-wrap:wrap; gap:8px}
  .searchbox{order:3; flex-basis:100%; max-width:none}
  .actions{margin-left:auto}
  .rail-nav{display:none}
  /* 手机端一行简介：最多两行并断行，避免溢出玻璃卡片 */
  .app-row .info .tl{white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
  .detail-desc{overflow-wrap:anywhere}
}

/* ---------- 详情弹层 ---------- */
.detail-hero{display:flex; gap:18px; align-items:center; padding:6px 2px 16px;
  position:relative; border-radius:18px}
.detail-hero .ico{width:92px; height:92px; flex:none; border-radius:22px;
  box-shadow:0 14px 30px rgba(12,22,52,.22), inset 0 0 0 1px color-mix(in srgb,#fff 30%,transparent)}
.detail-hero .dh-info{flex:1; min-width:0}
.detail-hero h3{margin:0 0 2px; font-size:21px; font-weight:750; letter-spacing:.2px;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.detail-hero .tl{color:var(--tx-2); font-size:13.5px; overflow-wrap:anywhere; line-height:1.55}
.detail-hero .meta{display:flex; flex-wrap:wrap; gap:7px; margin-top:10px}
.detail-hero .meta .tag{gap:5px; padding:4.5px 10px; font-size:11.5px}
.detail-hero .meta .tag .ic{width:13px;height:13px; color:var(--tx-3)}
.detail-hero .acts{display:flex; gap:9px; margin-top:14px; flex-wrap:wrap}
.btn .ic{width:17px;height:17px}

.detail-desc{margin:2px 0 18px; padding:14px 16px; border-radius:16px; line-height:1.75; font-size:13.5px;
  color:var(--tx-2); background:color-mix(in srgb,var(--tx) 4%,transparent);
  border:1px solid var(--line-2)}
.links-ttl{font-size:13px; font-weight:700; color:var(--tx-2); margin:14px 0 9px; display:flex; align-items:center; gap:7px}
.links-ttl .ic{width:15px;height:15px}
.linkrows{display:flex; flex-direction:column; gap:8px}
.linkrow{display:flex; align-items:center; gap:12px; padding:10px 12px 10px 15px; border-radius:14px;
  background:color-mix(in srgb,var(--glass) 55%,transparent); border:1px solid var(--line);
  transition:background .16s var(--ease)}
.linkrow:hover{background:var(--glass-2)}
.linkrow .glyph{width:34px; height:34px; flex:none; border-radius:10px; display:grid; place-items:center; color:#fff;
  background:linear-gradient(150deg,var(--accent-g1),var(--accent-g2)); box-shadow:0 5px 12px color-mix(in srgb,var(--accent) 30%,transparent)}
.linkrow .glyph.green{background:linear-gradient(150deg,#35d07b,#0d9a52)}
.linkrow .glyph.amber{background:linear-gradient(150deg,#ffc24d,#f08a12)}
.linkrow .glyph.pink{background:linear-gradient(150deg,#ff7ab6,#e8427e)}
.linkrow .gx{flex:1; min-width:0}
.linkrow .gx b{display:block; font-size:13.5px}
.linkrow .gx span{display:block; font-size:11px; color:var(--tx-3);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; direction:ltr}
.linkrow .ops{display:flex; gap:2px}
.detail-foot{display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--tx-3); margin-top:14px}

/* ---------- 页脚声明 ---------- */
.site-foot{max-width:1180px; margin:26px auto 0; padding:0 18px 8px}
.decl-foot{display:flex; flex-direction:column; align-items:center; gap:7px;
  padding:14px 24px; text-align:center}
.decl-copy{color:var(--tx-3); font-size:12px}
.decl-text{color:var(--tx-3); font-size:12px; line-height:1.75; max-width:860px}
/* 页脚内友情链接行 */
.fl-row{display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:6px 18px; width:100%; padding-bottom:10px; margin-bottom:6px;
  border-bottom:1px dashed var(--line-2)}
.fl-title{color:var(--tx-2); font-size:12px; font-weight:700}
.fl-item{color:var(--tx-3); font-size:12px; transition:color .15s}
.fl-item:hover{color:var(--accent)}