/* =============================================================
   零度星锋PC装机助手ヅSVIP - Nvidia 驱动下载页样式 (css/nvidia.css)
   风格: 仿 IT 天空首页 —— 网格底 Hero + 白底卡片筛选/驱动列表 + 深色页脚
   说明: 与主页 index.css 配色统一(主色 #0077ff);
         保留 js/nvidia.js 依赖的 DOM/class(#typeBtns .f-btn #q
         #count #driverList .empty .driver-row .row-ver .tag 等);
         flex/grid 响应式, 断点 640 / 480px。
   ============================================================= */

:root{
  --primary:#0077ff;        /* 主蓝(与全站一致) */
  --primary-2:#1677ff;
  --line:#eceef1;
  --bg:#ffffff;
  --card:#ffffff;
  --text:#1f2937;
  --text-2:#4b5563;
  --text-3:#9ca3af;
  --light-bg:#f8faff;       /* 内容区背景 */
  --grid-line:#e8edf7;      /* Hero 网格线 */
  --font:Inter,system-ui,-apple-system,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --radius:10px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:16px}
body{
  font-family:var(--font);color:var(--text);background:var(--bg);
  line-height:1.7;font-size:15px;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px}
img,svg{display:block;max-width:100%}

/* 通用容器 */
.container{max-width:1120px;margin:0 auto;padding:0 20px}

/* ================================================================
   品牌头(sticky 白底, 书法 logo + 完整名)
   ================================================================ */
.site-brand{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:100}
.brand-inner{display:flex;align-items:center;gap:10px;max-width:1120px;margin:0 auto;padding:12px 20px;text-decoration:none}
.brand-logo{width:34px;height:34px;object-fit:contain;flex:none}
.brand-name{font-weight:800;font-size:18px;color:var(--text);letter-spacing:.5px;white-space:nowrap}

/* ================================================================
   Hero(网格底 + 居中标题, 同参考)
   ================================================================ */
.hero{
  background:
    linear-gradient(#e8edf7 1px,transparent 1px),
    linear-gradient(90deg,#e8edf7 1px,transparent 1px);
  background-size:24px 24px;
  padding:76px 20px 72px;
  text-align:center;
}
.pill{
  display:inline-flex;align-items:center;gap:10px;
  font-size:11px;letter-spacing:2px;text-transform:uppercase;
  color:var(--primary);background:rgba(0,119,255,.08);
  border:1px solid rgba(0,119,255,.18);
  padding:7px 16px;border-radius:999px;margin-bottom:22px;
}
.pill::before{
  content:'';width:7px;height:7px;border-radius:50%;background:#00c853;
}
.hero h1{
  font-size:clamp(1.8rem,4vw,2.5rem);
  font-weight:800;letter-spacing:.5px;line-height:1.25;margin-bottom:12px;
}
.hero .hero-sub{
  max-width:660px;margin:0 auto 30px;
  color:var(--text-2);font-size:.95rem;
}
.hero-actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.btn{padding:9px 24px;border-radius:6px;font-size:.92rem;font-weight:500;transition:all .15s;display:inline-block}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-2)}
.btn-outline{border:1px solid var(--primary);color:var(--primary);background:#fff}
.btn-outline:hover{background:rgba(0,119,255,.06)}

/* ================================================================
   内容区(白底卡片)
   ================================================================ */
.section-soft{background:var(--light-bg);padding:60px 0 72px}
.section-head{max-width:680px;margin:0 auto 32px;text-align:center}
.section-head h2{font-size:clamp(1.4rem,2.8vw,1.8rem);font-weight:800;margin-bottom:8px}
.section-head p{color:var(--text-2);font-size:.88rem}
.section-head b{color:var(--primary)}

/* 筛选栏 + 驱动列表所在白卡 */
.filter-bar{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 16px;margin:16px 0;
  box-shadow:0 1px 3px rgba(0,0,0,.08);
}
.filter-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.filter-label{font-size:.82rem;color:var(--text-2);font-weight:600;white-space:nowrap}
.filter-btns{display:flex;gap:6px;flex-wrap:wrap}
.f-btn{
  padding:6px 14px;font-size:.8rem;border:1px solid var(--line);
  border-radius:999px;background:#fff;color:var(--text-2);cursor:pointer;
  transition:all .15s;font-family:inherit;
}
.f-btn:hover{border-color:var(--primary);color:var(--primary)}
.f-btn.on{background:var(--primary);border-color:var(--primary);color:#fff}
.search-box{
  display:flex;align-items:center;gap:6px;height:32px;background:#fff;
  border:1px solid var(--line);border-radius:8px;padding:0 12px;
  transition:border-color .15s;min-width:160px;flex:1;max-width:260px;
}
.search-box:focus-within{border-color:var(--primary)}
.search-box svg{width:13px;height:13px;color:var(--text-3);flex-shrink:0}
.search-box input{flex:1;border:none;outline:none;font-size:13px;font-family:inherit;background:transparent;min-width:0}
.search-box input::placeholder{color:var(--text-3)}

/* 驱动列表(js/nvidia.js 渲染, class 不可改) */
.result-count{text-align:center;font-size:.78rem;color:var(--text-3);margin-bottom:12px;font-family:Consolas,monospace}
.driver-list{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.driver-row{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:12px;padding:11px 16px;transition:background .12s}
.driver-row+.driver-row{border-top:1px solid #f0f3f8}
.driver-row:hover{background:#f7f9fd}
.rank{text-align:center;font-family:Consolas,monospace;font-size:12px;color:var(--text-3)}
.rank.top3{color:var(--primary);font-weight:700}
.row-main{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.row-ver{font-family:Consolas,"JetBrains Mono",monospace;font-weight:700;font-size:13px;color:var(--text)}
.tag{display:inline-flex;align-items:center;font-size:.7rem;font-weight:600;padding:1px 9px;border-radius:999px;white-space:nowrap}
.tag-head{color:#1d4ed8;background:#dbeafe}
.tag-hotfix{color:#ea580c;background:#fff7ed}
.tag-pro{color:#15803d;background:#dcfce7}
.row-btns{display:flex;gap:8px;align-items:center}
.row-btns a{color:var(--text-2);font-size:.8rem;padding:5px 13px;border-radius:8px;border:1px solid var(--line);transition:all .15s;white-space:nowrap;font-weight:500}
.row-btns a:hover{background:var(--primary);border-color:var(--primary);color:#fff}
.empty{text-align:center;color:var(--text-3);padding:28px 0 20px;font-size:13px}

/* 补充说明 */
.notes{margin-top:20px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.notes h2{font-size:1.05rem;font-weight:700;margin-bottom:10px;color:var(--text)}
.notes .group-t{font-size:.88rem;font-weight:600;color:var(--text);margin:8px 0 4px}
.notes p{font-size:.84rem;color:var(--text-2);line-height:2}
.notes a{color:var(--primary)}
.notes a:hover{text-decoration:underline}
.notes .note{color:var(--text-3);font-size:.78rem;margin-top:4px}

/* ================================================================
   页脚(深色, 同主页 index.css)
   ================================================================ */
.site-foot{background:#1f2937;color:#a7adb5;text-align:center;font-size:.82rem;padding:34px 20px;line-height:1.9}
.site-foot a{color:#9ca3af;transition:color .15s}
.site-foot a:hover{color:#fff}

/* ================================================================
   响应式
   ================================================================ */
@media(max-width:640px){
  .hero{padding:52px 16px 48px}
  .section-soft{padding:44px 0 52px}
  .container{padding-left:16px;padding-right:16px}
  .brand-inner{padding:10px 16px}
  .brand-name{font-size:16px}
  .filter-bar{padding:12px}
  .driver-row{grid-template-columns:30px 1fr;padding:10px 12px}
  .row-btns{grid-column:2;justify-self:start;margin-top:2px}
  .search-box{max-width:none}
}
@media(max-width:480px){
  .hero h1{font-size:1.8rem}
  .btn{width:100%;max-width:300px}
  .driver-row{gap:8px;padding:10px 10px}
  .note,.notes p{font-size:.78rem}
}