/* ============================================================
   GameKeysBuy v2.1  — site.css（首页样式 100% 还原旧版 base.css）
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0}

:root{
  /* Steam 主色系 */
  --sd:#1b2838;
  --sm:#2a475e;
  --sl:#c7d5e0;
  --sg:#4c6b22;
  --slm:#a4d007;

  /* 页面背景 */
  --bg:#f0f4f8;
  --bg2:#ffffff;
  --bg3:#e8eef4;
  --bg4:#dde5ed;

  /* 文字 */
  --text:#162230;
  --text2:#4a6070;
  --text3:#8ba3b0;

  /* 边框 */
  --border:#c8d6e0;
  --border2:#b0c2cf;

  /* 语义色 */
  --ok:#3b8c4e;--ok-bg:#eaf4ec;
  --warn:#9a6f0e;--warn-bg:#fdf5e0;
  --err:#b33030;--err-bg:#fdf0f0;
  --info:#1e5a9a;--info-bg:#eaf0fb;

  /* 圆角 */
  --r:6px;--rl:10px;--rxl:16px;
}

body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Noto Sans JP',sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
}

/* ===== NAV ===== */
.nav{background:var(--sd);padding:0 24px;height:54px;display:flex;align-items:center;gap:14px;position:sticky;top:0;z-index:100;box-shadow:0 1px 8px rgba(0,0,0,.3)}
.logo{display:flex;align-items:center;cursor:pointer}
.nav-auth{display:flex;align-items:center;gap:8px;margin-left:auto}
.nav-btn{padding:5px 14px;border-radius:var(--r);font-size:12px;cursor:pointer;border:none;transition:.15s;text-decoration:none;display:inline-block}
.nav-btn.ghost{background:rgba(255,255,255,.1);color:#c7d5e0;border:0.5px solid rgba(255,255,255,.2)}
.nav-btn.ghost:hover{background:rgba(255,255,255,.18)}
.nav-btn.solid{background:var(--sg);color:var(--slm);font-weight:600}
.nav-btn.solid:hover{background:#3d5a1c}
.nav-avatar{width:30px;height:30px;border-radius:50%;background:var(--sg);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:var(--slm);cursor:pointer;flex-shrink:0}
.nav-username{font-size:13px;color:#c7d5e0;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-cart{position:relative;color:#c7d5e0;text-decoration:none;font-size:18px;padding:6px 8px;cursor:pointer}
.nav-cart-badge{position:absolute;top:0;right:-2px;background:var(--sg);color:var(--slm);font-size:10px;font-weight:700;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 4px}

/* ===== FRONT ===== */
.front{display:none;padding:24px 20px;max-width:1100px;margin:0 auto}
.front.v{display:block}

/* HERO */
.hero{background:var(--sd);border-radius:var(--rxl) var(--rxl) 0 0;padding:20px 32px 18px;margin-bottom:0;color:var(--sl);position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;right:-60px;top:-60px;width:260px;height:260px;background:rgba(164,208,7,.04);border-radius:50%}
.hero h1{font-size:21px;font-weight:700;margin-bottom:10px;color:#fff;letter-spacing:.2px;position:relative}
.hero-badges{display:flex;gap:6px;flex-wrap:wrap;position:relative}
.hbadge{padding:3px 10px;background:rgba(164,208,7,.13);border:1px solid rgba(164,208,7,.22);border-radius:20px;font-size:11px;font-weight:500;color:var(--slm)}

/* SEARCH ROW */
.srow{margin-top:0;padding:20px 28px 24px;background:var(--bg2);border-radius:0 0 var(--rxl) var(--rxl);box-shadow:0 6px 24px rgba(27,40,56,.13);position:relative;margin-bottom:24px}
.search-wrap{position:relative;display:flex;align-items:center;max-width:760px;margin:0 auto}
.search-wrap::before{content:'🔍';position:absolute;left:20px;font-size:17px;z-index:1;pointer-events:none;opacity:.55}
.srow input{width:100%;padding:16px 56px 16px 54px;border-radius:50px;border:2px solid var(--border2);background:var(--bg3);color:var(--text);font-size:15px;outline:none;transition:.2s;font-weight:500;letter-spacing:.2px}
.srow input:focus{border-color:var(--sg);background:#fff;box-shadow:0 0 0 4px rgba(76,107,34,.15),0 4px 20px rgba(27,40,56,.12)}
.srow input::placeholder{color:var(--text3);font-weight:400;font-size:14px}
.search-clear{position:absolute;right:16px;background:none;border:none;color:var(--text3);font-size:18px;cursor:pointer;padding:4px;line-height:1;display:none}
.search-clear.show{display:block}
.search-clear:hover{color:var(--text)}
.search-hints{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:12px;flex-wrap:wrap}
.search-hint-label{font-size:11px;color:var(--text3)}
.search-hint-tag{font-size:11px;padding:3px 10px;border-radius:20px;background:var(--bg4);color:var(--text2);cursor:pointer;border:1px solid var(--border);transition:.12s}
.search-hint-tag:hover{background:var(--sd);color:var(--sl);border-color:var(--sd)}

/* STORE TABS */
.store-tabs{display:flex;gap:0;margin-bottom:20px;border-bottom:2px solid var(--bg4);position:relative}
.store-tab{padding:10px 24px;font-size:13px;font-weight:600;cursor:pointer;color:var(--text2);background:transparent;border:none;border-bottom:2px solid transparent;margin-bottom:-2px;transition:color .15s,border-color .15s;letter-spacing:.3px;display:flex;align-items:center;gap:7px}
.store-tab:hover{color:var(--text)}
.store-tab.on{color:var(--sd);border-bottom-color:var(--sg)}
.store-tab .tab-count{display:none}

/* TOOLBAR / SORT / PAGE-SIZE */
.store-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.store-info{font-size:12px;color:var(--text2)}
.store-info b{color:var(--text);font-weight:600}
.sort-bar{display:flex;align-items:center;gap:6px}
.sort-label{font-size:12px;color:var(--text2)}
.sort-btn{padding:4px 10px;border-radius:20px;font-size:11px;cursor:pointer;border:1px solid var(--border);background:transparent;color:var(--text2);transition:.12s;white-space:nowrap}
.sort-btn:hover{border-color:var(--border2);color:var(--text)}
.sort-btn.on{background:var(--sd);color:var(--sl);border-color:var(--sd);font-weight:600}
.page-size-bar{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text2)}
.page-size-btn{padding:3px 9px;border-radius:20px;font-size:11px;cursor:pointer;border:1px solid var(--border);background:transparent;color:var(--text2);transition:.12s}
.page-size-btn.on{background:var(--sd);color:var(--sl);border-color:var(--sd)}

/* GAMES GRID & CARDS */
.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.gcard{background:var(--bg2);border-radius:var(--rl);border:1px solid var(--border);overflow:hidden;cursor:pointer;transition:transform .18s,box-shadow .18s,border-color .18s}
.gcard:hover{border-color:var(--border2);box-shadow:0 4px 14px rgba(27,40,56,.1);transform:translateY(-2px)}
.gthumb{width:100%;height:108px;overflow:hidden;background:var(--sm);display:flex;align-items:center;justify-content:center;color:var(--sl);font-size:12px}
.gthumb img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.gcard:hover .gthumb img{transform:scale(1.04)}
.ginfo{padding:10px 12px}
.gtitle{font-size:13px;font-weight:600;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
.gtag{font-size:10px;padding:2px 7px;border-radius:20px;background:var(--bg4);color:var(--text2);display:inline-block;margin-bottom:8px;font-weight:500;letter-spacing:.2px}
.gregion{font-size:10px;color:var(--warn);background:var(--warn-bg);border:1px solid rgba(154,111,14,.2);border-radius:4px;padding:2px 6px;font-weight:600;display:inline-flex;align-items:center;gap:3px;margin-bottom:6px;white-space:nowrap}
.gdelivery{font-size:10px;font-weight:600;padding:2px 7px;border-radius:4px;display:inline-flex;align-items:center;gap:3px;margin-bottom:6px}
.gdelivery.instant{background:#eaf3de;color:#3b6d11;border:1px solid rgba(59,109,17,.2)}
.gdelivery.hours{background:#fef3c7;color:#92600a;border:1px solid rgba(146,96,10,.2)}
.gfoot{display:flex;align-items:center;justify-content:space-between}
.gprice{font-size:14px;font-weight:700;color:var(--sg)}
.gprice.free{color:var(--text2);font-size:12px;font-weight:500}
.bbuy{padding:4px 11px;background:var(--sg);color:var(--slm);border:none;border-radius:5px;font-size:11px;cursor:pointer;font-weight:600;transition:.15s;letter-spacing:.2px}
.bbuy:hover{background:#5a7d28}

/* PAGINATION */
.pagination{display:flex;align-items:center;justify-content:center;gap:4px;margin-top:24px;flex-wrap:wrap}
.page-btn{min-width:32px;height:32px;padding:0 8px;border-radius:var(--r);border:1px solid var(--border);background:var(--bg2);color:var(--text2);font-size:13px;cursor:pointer;transition:.12s;display:flex;align-items:center;justify-content:center}
.page-btn:hover:not(:disabled){border-color:var(--border2);color:var(--text);background:var(--bg3)}
.page-btn.on{background:var(--sd);color:var(--sl);border-color:var(--sd);font-weight:600;cursor:default}
.page-btn:disabled{opacity:.35;cursor:default}
.page-ellipsis{color:var(--text3);font-size:13px;padding:0 4px;line-height:32px}
.page-jump{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text2)}
.page-jump input{width:44px;padding:5px 6px;border-radius:var(--r);border:1px solid var(--border);font-size:12px;text-align:center;background:var(--bg3);color:var(--text);outline:none}
.page-jump input:focus{border-color:var(--sg)}

/* BACK TO TOP */
.back-to-top{position:fixed;bottom:96px;right:28px;width:36px;height:36px;border-radius:50%;background:var(--sd);color:var(--sl);border:1px solid rgba(199,213,224,.2);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;opacity:0;transition:opacity .2s;z-index:999;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.back-to-top.show{opacity:1}

/* EMPTY STATE */
.empty-state{text-align:center;padding:40px;color:var(--text2);font-size:13px}