@charset "utf-8";
/* ============================================================
   酷玩社区 · 前台样式（逐模块重做）
   模块 1：顶部导航
   基调：白底 / 细边框 / 单色蓝 #2B6DE5 / 无渐变无光晕
   ============================================================ */

:root{
  --pri:#2B6DE5;
  --pri-d:#245CC4;
  --pri-soft:#EDF3FE;

  --bg:#F6F7FB;
  --panel:#FFFFFF;

  --t1:#1B2436;
  --t2:#3E4A5F;
  --t3:#69758A;
  --t4:#98A2B3;

  --bd:#E8EBF1;
  --bd-2:#DDE2EA;
  --fill:#F3F5F9;

  --r:8px;
  --r-sm:6px;

  --wrap:1240px;
  --top-h:60px;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--t2);
  font:14px/1.6 -apple-system,"Inter","Segoe UI","PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
input,button{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul,ol{list-style:none}

/* ============================================================
   顶部导航
   ============================================================ */
.topbar{
  position:sticky;top:0;z-index:200;
  background:#fff;
  border-bottom:1px solid var(--bd);
}
.topbar-in{
  width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px;
  height:var(--top-h);
  display:flex;align-items:center;gap:28px;
}

/* Logo */
.logo{display:flex;align-items:center;flex-shrink:0}
.logo img{height:26px;width:auto;object-fit:contain}

/* 主导航 */
.nav{display:flex;align-items:center;gap:4px;flex-shrink:0}
.nav a{
  position:relative;
  height:34px;padding:0 13px;
  display:flex;align-items:center;
  font-size:14px;color:var(--t2);
  border-radius:var(--r-sm);
  transition:color .15s,background .15s;
}
.nav a:hover{color:var(--pri);background:var(--pri-soft)}
.nav a.on{color:var(--pri);font-weight:600;background:transparent}
.nav a.on::after{
  content:"";position:absolute;left:13px;right:13px;bottom:-13px;
  height:2px;background:var(--pri);border-radius:1px;
}

/* 搜索 */
.search{
  display:flex;align-items:center;gap:7px;
  margin-left:auto;
  width:260px;height:34px;padding:0 11px;
  background:var(--fill);
  border:1px solid transparent;
  border-radius:var(--r-sm);
  transition:background .15s,border-color .15s;
}
.search:focus-within{background:#fff;border-color:var(--pri)}
.search>i{font-size:15px;color:var(--t4);flex-shrink:0}
.search input{
  flex:1;min-width:0;border:0;background:transparent;outline:0;
  font-size:13.5px;color:var(--t1);
}
.search input::placeholder{color:var(--t4)}

/* 右侧操作 */
.acts{display:flex;align-items:center;gap:8px;flex-shrink:0}
.act-ico{
  position:relative;
  width:34px;height:34px;display:grid;place-items:center;
  border-radius:var(--r-sm);color:var(--t3);font-size:17px;
  transition:background .15s,color .15s;
}
.act-ico:hover{background:var(--fill);color:var(--t1)}
.act-ico em{
  position:absolute;top:8px;right:9px;
  width:6px;height:6px;border-radius:50%;
  background:#E5484D;box-shadow:0 0 0 2px #fff;
}
.act-login,.act-reg{
  height:34px;padding:0 16px;display:inline-flex;align-items:center;
  font-size:13.5px;border-radius:var(--r-sm);
  transition:all .15s;
}
.act-login{color:var(--t2)}
.act-login:hover{color:var(--pri);background:var(--pri-soft)}
.act-reg{background:var(--pri);color:#fff;font-weight:500}
.act-reg:hover{background:var(--pri-d)}

.nav-toggle{display:none;width:34px;height:34px;place-items:center;border-radius:var(--r-sm);color:var(--t2);font-size:18px}

/* ============================================================
   占位区
   ============================================================ */
.stage{
  min-height:calc(100vh - var(--top-h) - 1px);
  display:grid;place-items:center;padding:40px 20px;
}
.stage-empty{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  color:var(--t4);text-align:center;
}
.stage-empty i{font-size:26px;color:var(--bd-2)}
.stage-empty p{font-size:14px;color:var(--t3);font-weight:500}
.stage-empty span{font-size:12.5px}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width:1080px){
  .topbar-in{gap:18px}
  .search{width:200px}
  .nav a{padding:0 10px}
}
@media (max-width:900px){
  .nav{display:none}
  .search{width:auto;flex:1;max-width:260px}
  .nav-toggle{display:grid}
}
@media (max-width:600px){
  :root{--top-h:56px}
  .topbar-in{gap:12px;padding:0 14px}
  .logo img{height:23px}
  .search{display:none}
  .act-ico{display:none}
  .act-login{padding:0 10px}
  .act-reg{padding:0 12px}
}