/* =============================================================
   零度星锋 · PC 装机助手 — 友情链接页样式（links.html）
   说明：本页使用独立主题（蓝 #1890ff、浅灰背景），
        左侧目录为“悬浮卡片式”，覆盖 base.css 中的默认变量。
   ============================================================= */

/* ---------- 覆盖主题变量（本页专用） ---------- */
:root{
  --blue:#1890ff;--blue-2:#40a9ff;--blue-deep:#096dd9;
  --bg:#f5f6fa;--border:#e8eaef;
  --text:#2b2f36;--text-2:#6b7280;--text-3:#9aa0aa;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}

/* ---------- 布局：左侧悬浮目录 ---------- */
.layout{max-width:1240px;margin:0 auto;display:flex;min-height:100vh;padding-left:248px}
.sidebar{width:208px;flex-shrink:0;position:fixed;top:16px;left:max(12px,calc((100vw - 1240px)/2 + 12px));height:calc(100vh - 32px);overflow-y:auto;background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:0 10px 28px rgba(24,60,110,.12);padding:20px 12px;z-index:90}
.side-menu a.active{background:var(--blue);color:#fff}

/* 内容区居中收窄 */
.content{flex:1;padding:30px 32px 56px;max-width:1000px;margin:0 auto;width:100%}
.page-title{margin-bottom:14px}
.page-desc{margin-bottom:24px}

/* ---------- 链接卡片 ---------- */
.card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:20px;display:flex;flex-direction:column;transition:box-shadow .2s,border-color .2s;text-decoration:none}
.divider{height:1px;background:#f0f2f6;margin-bottom:12px}
.row{display:flex;align-items:center;gap:7px;font-size:.85rem;color:var(--text-2);margin-bottom:8px}
.row:nth-last-of-type(2){margin-bottom:16px}
.row svg{flex:none;width:14px;height:14px;stroke:var(--blue);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.row b{color:#3d4350;font-weight:600;font-variant-numeric:tabular-nums}
.card-btn{margin-top:auto;background:var(--blue);color:#fff;padding:8px 0;border-radius:8px;font-size:.85rem;font-weight:500;text-align:center;transition:background .2s;display:block;text-decoration:none}
.card-btn:hover{background:var(--blue-2)}

/* ---------- 站点主题色（每站一色） ---------- */
.card.t-purple{--bc:#7c4dff;--bch:#9a70ff}
.card.t-violet{--bc:#8b5cf6;--bch:#a78bfa}
.card.t-cyan{--bc:#12a8b8;--bch:#2ec1d1}
.card.t-blue{--bc:var(--blue);--bch:var(--blue-2)}
.card.t-pink{--bc:#ec4899;--bch:#f472b6}
.card.t-amber{--bc:#f59e0b;--bch:#fbbf24}
.card.t-emerald{--bc:#10b981;--bch:#34d399}
.card.t-purple .ic,.card.t-purple .card-btn{background:var(--bc)}
.card.t-violet .ic,.card.t-violet .card-btn{background:var(--bc)}
.card.t-cyan .ic,.card.t-cyan .card-btn{background:var(--bc)}
.card.t-blue .ic,.card.t-blue .card-btn{background:var(--bc)}
.card.t-pink .ic,.card.t-pink .card-btn{background:var(--bc)}
.card.t-amber .ic,.card.t-amber .card-btn{background:var(--bc)}
.card.t-emerald .ic,.card.t-emerald .card-btn{background:var(--bc)}
.card.t-purple .card-btn:hover{background:var(--bch)}
.card.t-violet .card-btn:hover{background:var(--bch)}
.card.t-cyan .card-btn:hover{background:var(--bch)}
.card.t-blue .card-btn:hover{background:var(--bch)}
.card.t-pink .card-btn:hover{background:var(--bch)}
.card.t-amber .card-btn:hover{background:var(--bch)}
.card.t-emerald .card-btn:hover{background:var(--bch)}
.card.t-purple .row svg,.card.t-violet .row svg,.card.t-emerald .row svg,.card.t-pink .row svg,.card.t-amber .row svg,.card.t-cyan .row svg{stroke:var(--bc)}

/* ---------- 响应式适配 ---------- */
@media(max-width:860px){
  .layout{padding-left:0}
  .sidebar{position:fixed;top:0;left:0;width:min(80vw,260px);height:100vh;border-radius:0;border-right:1px solid var(--border);box-shadow:0 0 30px rgba(0,0,0,.2);transform:translateX(-110%);transition:transform .28s ease;z-index:300}
  body.drawer-open .sidebar{transform:translateX(0)}
  .content{padding:22px 16px 48px}
  .page-title{font-size:20px}
  .grid{grid-template-columns:1fr}
}
@media(max-width:480px){.content{padding:16px 12px 40px}.grid{gap:14px}}