/* ============================================================
   站点外壳 — Linear 设计系统
   深色画布 #08090a / 半透明白边框 / 唯一彩色靛蓝 var(--brand)
   首页与后台共用，改这里两边一起变
   ============================================================ */
:root{
  --bg:#08090a;
  --panel:#0f1011;
  --surface:#191a1b;
  --card:rgba(20,21,26,.64);
  --card-hi:rgba(30,32,38,.71);
  --line:rgba(255,255,255,.08);
  --line-soft:rgba(255,255,255,.05);
  --txt:#f7f8f8;
  --ink:#f7f8f8;
  --dim:#8a8f98;
  --muted:#8a8f98;
  --faint:#62666d;
  --accent:var(--brand);
  --acc:var(--brand);
  --acc-hi:var(--brand-hi);
  --ok:#10b981;
  --warn:#e2a03f;
  --ff:"Inter","SF Pro Display",-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --fm:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ---------------- Header ---------------- */
.sh{
  position:sticky; top:10px; z-index:60;
  transition:margin .2s ease, border-radius .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, top .2s ease;
  display:flex; align-items:center; gap:20px 18px; flex-wrap:wrap;
  min-height:56px; height:auto; padding:11px 20px 11px;
  margin:10px 0 0;
  /* --sh-a 由 JS 按滚动位置实时写（0=全透明 1=完全不透明），
     底色/边框/阴影/背景模糊都跟着它走，就是渐变而不是硬切。 */
  background:rgba(10,11,13,var(--sh-a,0));
  -webkit-backdrop-filter:blur(calc(var(--sh-a,0) * 20px)) saturate(1.35);
  backdrop-filter:blur(calc(var(--sh-a,0) * 20px)) saturate(1.35);
  border:1px solid rgba(255,255,255,calc(var(--sh-a,0) * .09));
  border-radius:18px;
  box-shadow:0 14px 34px -20px rgba(0,0,0,calc(var(--sh-a,0) * .95));
}
.sh-brand{display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--txt); flex:0 0 auto}
.sh-logo{
  width:24px; height:24px; border-radius:6px; display:grid; place-items:center;
  background:#141518; border:1px solid var(--line);
  color:#a5a8ff; flex:0 0 auto;
}
.sh-logo svg{width:13px; height:13px}
.sh-name{font-size:13.5px; font-weight:590; letter-spacing:-.1px}
.sh-name em{
  font-style:normal; font-size:11px; font-weight:400; color:var(--faint);
  margin-left:7px; letter-spacing:0;
}
.sh-nav{display:flex; align-items:center; gap:2px}
.sh-nav a{
  padding:5px 10px; border-radius:6px;
  font-size:13px; font-weight:510; color:#d0d6e0;
  text-decoration:none; transition:color .12s, background .12s;
  white-space:nowrap;
}
.sh-nav a:hover{color:var(--txt); background:rgba(255,255,255,.04)}
.sh-nav a.on{color:var(--txt); background:rgba(255,255,255,.06)}
.sh-right{margin-left:auto; display:flex; align-items:center; gap:8px}

/* 线路分段：Linear 用透明度分层，不用亮色块 */
.sh-seg{
  display:inline-flex; align-items:center; gap:1px;
  padding:2px; border-radius:7px;
  background:rgba(255,255,255,.03); border:1px solid var(--line-soft);
}
.sh-seg a{
  padding:5px 12px; border-radius:6px;
  font-size:12px; font-weight:510; color:#8b9199;
  text-decoration:none; transition:.12s; white-space:nowrap;
}
.sh-seg a:hover{color:#d0d6e0}
.sh-seg a.on{color:var(--txt); background:rgba(255,255,255,.08)}

.sh-back{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; font-weight:510; color:var(--dim);
  text-decoration:none; padding:5px 10px; border-radius:6px;
  border:1px solid var(--line-soft); transition:.12s;
}
.sh-back:hover{color:var(--txt); border-color:var(--line); background:rgba(255,255,255,.03)}
.sh-who{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; font-weight:510; color:#d0d6e0;
}
.sh-who .av{
  width:20px; height:20px; border-radius:50%; display:grid; place-items:center;
  font-size:10px; font-weight:590; color:#c9caff;
  background:color-mix(in srgb,var(--brand) 16%,transparent); border:1px solid color-mix(in srgb,var(--brand) 28%,transparent);
}

/* ---------------- 首页标题区 ---------------- */
.page-head{
  max-width:1200px; margin:44px auto 0; padding:0 24px;
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:18px; flex-wrap:wrap;
}
.page-head h2{
  font-size:26px; font-weight:590; letter-spacing:-.55px;
  line-height:1.15; color:var(--txt); margin:0;
}
.page-head p{
  margin:7px 0 0; font-size:13.5px; font-weight:400;
  color:var(--dim); letter-spacing:-.13px;
}
.ph-r{display:flex; gap:8px; align-items:center; justify-content:center; flex-wrap:wrap; flex:1 0 100%; margin-top:1px}
.ph-r .flt{
  padding:5px 13px; border-radius:9999px; cursor:pointer;
  font-size:12px; font-weight:510; color:#d0d6e0;
  background:transparent; border:1px solid #23252a;
  transition:.12s; font-family:inherit; line-height:1.5;
}
.ph-r .flt:hover{border-color:#3e3e44; color:var(--txt)}
.ph-r .flt.on{color:#08090a; background:#f7f8f8; border-color:#f7f8f8; font-weight:590}
.ph-r .flt b{font-weight:510; color:var(--faint); margin-left:5px}
.ph-r .flt.on b{color:#08090a; opacity:.5}

/* ---------------- Footer ---------------- */
.sf{
  margin-top:80px;
  border-top:1px solid var(--line-soft);
}
.sf-in{
  max-width:1076px; margin:0 auto; padding:22px 0;
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap;
  font-size:12px; font-weight:400; color:var(--faint);
}
.sf-in a{
  color:#8b9199; text-decoration:none; transition:color .12s;
  margin-left:18px;
}
.sf-in a:hover{color:#fff}
.sf-in span:first-child{color:#6f747c}

/* PC：窗口比内容窄时页脚补左右留白；≤760 由下面那个块自己给 18/16 */
@media (min-width:761px) and (max-width:1120px){ body>.sf .sf-in{padding:22px 22px} }

@media (max-width:760px){
  .sh{height:auto; padding:10px 12px; gap:9px 8px; flex-wrap:wrap; margin:8px 0 0; border-radius:15px; align-items:center}
  .sh-name em{display:none}
  .sh-nav{order:3; width:100%; gap:0; overflow-x:auto; padding-bottom:2px}
  .sh-nav a{padding:5px 8px; font-size:12.5px}
  .sh{flex-wrap:wrap; row-gap:10px}
  .sh-right{display:contents}
  .sh-brand{order:0}
  .sh-seg{order:1; margin-left:0}
  .userbox{order:2; margin-left:auto; display:flex; align-items:center}
  .search{order:3; flex:1 0 100%; width:100%; max-width:none; margin-top:4px}
  .sh-seg{padding:2px; height:30px; display:flex; align-items:center; gap:1px}
  .sh-seg a{padding:3px 6px; font-size:10.5px; line-height:1; border-radius:5px}
  .ubtn{gap:6px; padding:0 11px; font-size:12px; height:30px; line-height:1; align-items:center}
  .ubtn .av{width:19px; height:19px; font-size:10px}
  .page-head{margin-top:30px; padding:0 16px; gap:14px}
  .page-head h2{font-size:21px; letter-spacing:-.4px}
  .page-head p{font-size:12.5px; margin-top:6px}
  .ph-r{order:4; width:calc(100% + 26px); flex:1 0 100%; gap:7px 7px; margin:3px -13px 0; row-gap:7px}
  .ph-r .flt{font-size:11.5px; padding:4px 11px; line-height:1.4}
  .sf{margin-top:56px}
  .sf-in{padding:18px 16px; font-size:11.5px}
}

/* 筛选按钮跟下面卡片标签用同一套颜色 */
.ph-r .flt[data-flt="open"]{color:#5ee9a4;border-color:rgba(94,233,164,.30);background:rgba(94,233,164,.10)}
.ph-r .flt[data-flt="open"]:hover{background:rgba(94,233,164,.18)}
.ph-r .flt[data-flt="open"].on{background:#5ee9a4;color:#08090a;border-color:#5ee9a4}
.ph-r .flt[data-flt="login"]{color:#ffb454;border-color:rgba(255,180,84,.32);background:rgba(255,180,84,.10)}
.ph-r .flt[data-flt="login"]:hover{background:rgba(255,180,84,.18)}
.ph-r .flt[data-flt="login"].on{background:#ffb454;color:#08090a;border-color:#ffb454}
.ph-r .flt[data-flt="hidden"]{color:#a78bfa;border-color:rgba(167,139,250,.32);background:rgba(167,139,250,.10)}
.ph-r .flt[data-flt="hidden"]:hover{background:rgba(167,139,250,.18)}
.ph-r .flt[data-flt="hidden"].on{background:#a78bfa;color:#08090a;border-color:#a78bfa}
.ph-r .flt[data-flt="ext"]{color:#9ddcf5;border-color:rgba(124,227,255,.24);background:rgba(124,227,255,.10)}
.ph-r .flt[data-flt="ext"]:hover{background:rgba(124,227,255,.18)}
.ph-r .flt[data-flt="ext"].on{background:#9ddcf5;color:#08090a;border-color:#9ddcf5}
.ph-r .flt[data-flt$="n"] b, .ph-r .flt[data-flt="ext"] b{color:inherit;opacity:.62}
.ph-r .flt.on b{color:#08090a;opacity:.5}

/* “全部”是聚合项，不跟分类抢夺眼的实心色，也不再用纯白（纯白在深底上是最高亮度，最刺眼）。
   改成品牌靛蓝的半透明片：选中与未选的区别靠填充度和描边，亮度降下来但仍然一眼看得出被选中。
   这段在基础层 —— 手机和电脑共用同一套，不是只改 PC。 */
.ph-r .flt[data-flt="all"].on{
  background:rgba(165,168,255,.22);
  border-color:rgba(165,168,255,.55);
  color:#eff0ff;
}
.ph-r .flt[data-flt="all"].on:hover{
  background:rgba(165,168,255,.30);
  border-color:rgba(165,168,255,.68);
}
.ph-r .flt[data-flt="all"].on b{color:#c2c6ff;opacity:1}

/* 滚动后只挪 sticky 偏移（贴住视口顶），颜色全交给 --sh-a 渐变。
   不撑满屏幕：宽度始终跟卡片一致（margin 不动），圆角保留。 */
.sh.scrolled{top:0}


/* ==========================================================================
   PC 端品牌锁定（≥761px）  2026-11-02
   规则：桌面效果只写在本段内。本文件 L142 的 @media (max-width:760px) 及
   各页面的 max-width 断点一律不许动 —— 移动端靠"不进来"而非"覆盖"来保证。
   ========================================================================== */
@media (min-width:761px){
  .sh-brand{gap:11px}

  .sh-logo{
    width:30px; height:30px; border-radius:9px;
    background:linear-gradient(180deg,#1c1d24 0%,#101116 100%);
    border:1px solid rgba(165,168,255,.20);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 6px 18px -10px color-mix(in srgb,var(--brand) 65%,transparent);
    transition:border-color .16s ease, box-shadow .16s ease;
  }
  .sh-logo svg{width:16px; height:16px; color:#b3b6ff}

  /* 两行锁定：星图 / RUIBING.WANG —— 只在带 <b> 的品牌块上生效，后台的"站点管理"不受影响 */
  .sh-name:has(b){
    display:flex; flex-direction:column; align-items:flex-start; gap:3px;
    font-size:17.5px; line-height:1;
  }
  .sh-name:has(b) b{font-weight:650; letter-spacing:.01em; color:#f7f8f8}
  .sh-name:has(b) em{
    display:block; margin-left:0;
    font-size:9px; font-weight:510; letter-spacing:.2em;
    text-transform:uppercase; color:rgba(255,255,255,.34);
    transition:color .16s ease;
  }

  /* 后台那块没有 <b>（叫"站点管理"），只把字号配平，不上两行锁定 */
  .sh-brand:not(:has(b)) .sh-name{font-size:15px}

  .sh-brand:hover .sh-logo{border-color:rgba(165,168,255,.40);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.09), 0 8px 22px -10px color-mix(in srgb,var(--brand) 90%,transparent)}
  .sh-brand:hover .sh-name:has(b) em{color:rgba(255,255,255,.48)}
}


/* ==========================================================================
   PC 端页脚贴底（≥761px）  2026-11-02
   短内容：页脚停在视口底部；长内容：仍走"内容 → 80px → 页脚"的常规流。
   只挑"页脚在 .wrap 里面"的页面（首页），后台的页脚在 .wrap 外面、drop 的页脚没 .sf 类，都不受影响。
   不用 flex-grow 撑 .grid —— 那会让 grid 行被拉高、卡片变形，这里的空隙由 margin-top:auto 吃掉。
   ========================================================================== */
@media (min-width:761px){
  .wrap:has(> .sf){display:flex; flex-direction:column; min-height:100vh; padding-bottom:0}
  .wrap:has(> .sf) > main.grid{margin-bottom:80px}
  /* 页脚常驻视口底部：一屏放得下就贴底；放不下（窗口窄时 grid 变 3 列、多出一行）
     就浮在视口底部，滚到最底再归位——这样"要滚一下才看得见页脚"就不会再发生。 */
  .wrap:has(> .sf) > .sf{
    margin-top:auto; position:sticky; bottom:0; z-index:5;
    background:rgba(8,9,10,.9);
    -webkit-backdrop-filter:blur(14px) saturate(1.05);backdrop-filter:blur(14px) saturate(1.05);
  }
}