:root{
  --gold-1:#B89F7D;
  --gold-2:#9C8568;
  --gold-3:#7A6851;

  --text:#1F1F1F;
  --bg:#F6F6F6;

  --blue:#5A8B9E;
  --green:#6D8C7D;
  --purple:#8A7A8E;
  --orange:#E67E22;
  --teal:#1ABC9C;
  --pink:#E84393;

  --font-head:'Orbitron', sans-serif;
  --font-sub:'Exo 2', sans-serif;
  --font-body:'Noto Sans SC', sans-serif;

  --transition:all .3s ease;
  --footer-h: 78px;
  --sidebar-w: 260px;

  --icon-size: 1.65rem;
  --title-icon-size: 1.65rem;
  --sidebar-icon-size: 1.65rem;

  --item-title-size: 0.92rem;
}

*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;overflow-x:hidden;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.6;
  position:relative;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

body::before{
  content:'';
  position:fixed;inset:0;
  background:
    radial-gradient(1100px 760px at 18% 80%, rgba(184,159,125,.16) 0%, transparent 62%),
    radial-gradient(900px 700px at 82% 24%, rgba(90,139,158,.12) 0%, transparent 62%),
    radial-gradient(880px 680px at 52% 30%, rgba(138,122,142,.10) 0%, transparent 64%);
    linear-gradient(180deg, #FFFFFF 0%, #F6F6F6 55%, #FFFFFF 100%);
  pointer-events:none;
  z-index:-3;
}
body::after{
  content:'';
  position:fixed;inset:0;
  background-image:
    linear-gradient(rgba(184,159,125,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(184,159,125,.04) 1px, transparent 1px);
  background-size:64px 64px;
  pointer-events:none;
  z-index:-2;
  opacity:.22;
}

.container{width:100%;max-width:1400px;margin:0 auto;padding:0 22px;}

/* ===== 顶部导航 ===== */
.main-nav{
  position:fixed;
  top:0;left:0;right:0;
  height:68px;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(31,31,31,.08);
  z-index:1000;
  display:flex;
  align-items:center;
  padding:0 22px;
  box-shadow:0 5px 20px rgba(18,18,18,.05);
}
.nav-inner{
  width:100%;
  max-width:1400px;
  margin:0 auto;
  position:relative;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.nav-brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:inherit;
  min-width:0;
}
.nav-logo{
  width:40px;height:40px;border-radius:10px;
  background:linear-gradient(135deg, var(--gold-2), var(--gold-3));
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-head);
  font-weight:800;
  font-size:1.2rem;
  color:white;
  box-shadow:0 10px 22px rgba(18,18,18,.10);
  flex-shrink:0;
}
.nav-title{
  font-family:var(--font-head);
  font-weight:900;
  font-size:1.45rem;
  background:linear-gradient(90deg, var(--gold-1), var(--gold-2), var(--gold-3));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:520px;
}

.mobile-title{
  display:none;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  font-family:var(--font-head);
  font-weight:900;
  font-size:1.05rem;
  background:linear-gradient(90deg, var(--gold-1), var(--gold-2), var(--gold-3));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:70vw;
  pointer-events:none;
}

/* 返回首页：只图标，始终在右侧 */
.back-home{
  width:46px;height:46px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg, rgba(184,159,125,.15), rgba(156,133,104,.1));
  border:1px solid rgba(184,159,125,.2);
  color:var(--gold-3);
  text-decoration:none;
  transition:var(--transition);
  box-shadow:0 8px 20px rgba(184,159,125,.1);
  font-size:1.05rem;
  flex-shrink:0;
  margin-left:auto;
}
.back-home:hover{transform:translateY(-2px);}

/* 手机端：菜单按钮在顶栏左上角 */
.sidebar-toggle{
  display:none;
  width:46px;
  height:46px;
  border-radius:14px;
  background:linear-gradient(135deg, var(--gold-2), var(--gold-3));
  color:white;
  border:none;
  cursor:pointer;
  font-size:1.05rem;
  box-shadow:0 10px 25px rgba(184,159,125,.2);
  flex-shrink:0;
}

/* ===== 侧边栏 ===== */
.sidebar-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.3);
  z-index:1998;
}
.sidebar{
  position:fixed;
  top:68px;
  left:0;
  bottom:0;
  width:var(--sidebar-w);
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  border-right:1px solid rgba(31,31,31,.08);
  z-index:1999;
  overflow-y:auto;
  padding:25px 0;
  transition:var(--transition);
  box-shadow:5px 0 20px rgba(18,18,18,.05);
}
.sidebar-header{
  padding:0 25px 20px;
  border-bottom:1px solid rgba(31,31,31,.08);
  margin-bottom:15px;
}
.sidebar-title{
  font-family:var(--font-head);
  font-weight:900;
  font-size:1.2rem;
  color:var(--text);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:5px;
}
.sidebar-subtitle{font-size:.82rem;color:rgba(31,31,31,.6);}
.sidebar-nav{
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:0 15px;
}
.sidebar-link{
  display:flex;
  align-items:center;
  gap:15px;
  padding:16px 20px;
  border-radius:12px;
  color:rgba(31,31,31,.8);
  text-decoration:none;
  font-weight:800;
  font-family:var(--font-sub);
  transition:var(--transition);
  position:relative;
}
.sidebar-link:hover{
  background:rgba(184,159,125,.1);
  color:var(--gold-3);
  transform:translateX(5px);
}
.sidebar-link.active{
  background:linear-gradient(135deg, rgba(184,159,125,.15), rgba(156,133,104,.1));
  color:var(--gold-3);
  box-shadow:0 5px 15px rgba(184,159,125,.1);
}
.sidebar-link.active::before{
  content:'';
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:4px;
  height:60%;
  background:linear-gradient(to bottom, var(--gold-2), var(--gold-3));
  border-radius:0 4px 4px 0;
}
.sidebar-icon{
  width:auto;height:auto;border-radius:0;
  display:flex;align-items:center;justify-content:center;
  color:white;flex-shrink:0;
  font-size:var(--sidebar-icon-size);
  background:none;
}
.sidebar-text{flex:1;font-size:.98rem;}

/* ===== 主内容 ===== */
.resources-main{
  flex:1;
  padding-top:98px;
  padding-bottom:60px;
  margin-left:var(--sidebar-w);
  transition:var(--transition);
}

/* ===== 搜索栏 ===== */
.search-section{margin-bottom:1.2rem;padding:0 30px;}
.search-box{max-width:900px;margin:0 auto;position:relative;}
.search-input{
  width:100%;
  padding:16px 22px;
  border-radius:18px;
  border:2px solid rgba(184,159,125,.2);
  background:rgba(255,255,255,.9);
  font-size:1rem;
  font-weight:800;
  color:var(--text);
  outline:none;
  transition:var(--transition);
  box-shadow:0 12px 30px rgba(18,18,18,.08);
}
.search-btn{
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  width:50px;height:50px;
  border-radius:14px;
  border:none;
  background:linear-gradient(135deg, var(--gold-2), var(--gold-3));
  color:white;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:1.05rem;
  transition:var(--transition);
}

/* ===== 分类标题 ===== */
.resources-container{padding:0 30px;}
.category-section{margin-bottom:30px;}
.category-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:14px;
  padding-bottom:10px;
  border-bottom:2px solid rgba(31,31,31,.08);
}
.category-title{
  font-family:var(--font-head);
  font-weight:900;
  font-size:calc(var(--item-title-size) + 0.18rem);
  color:var(--text);
  display:flex;
  align-items:center;
  gap:12px;
}
.category-icon{
  width:auto;height:auto;border-radius:0;
  display:flex;align-items:center;justify-content:center;
  font-size:var(--title-icon-size);
  color:white;
  background:none;
}

/* ===== 图标网格（无背景框） ===== */
.icon-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
  gap:16px;
}
.icon-link{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 6px;
  border-radius:12px;
  text-decoration:none;
  color:rgba(31,31,31,.85);
  background:transparent;
  border:none;
  box-shadow:none;
  transition:var(--transition);
  text-align:center;
}
.icon-link:hover{transform:translateY(-2px);color:var(--gold-3);}
.icon-badge{
  width:auto;height:auto;border-radius:0;
  display:flex;align-items:center;justify-content:center;
  color:inherit;
  font-size:var(--icon-size);
  box-shadow:none;background:none;
}
.icon-name{
  font-weight:400;
  font-size:var(--item-title-size);
  line-height:1.2;
  max-width:100%;
  color:rgba(31,31,31,.72);
}

/* 推荐合集：与其它图标一致间距 */
.recommend-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
  gap:16px;
}
.recommend-btn{
  width:100%;
  cursor:pointer;
  border:none;
  background:transparent;
  padding:0;
}

/* ===== 底部三按钮（小、一行三个，纯文字） ===== */
.cta-section{
  text-align:center;
  padding:22px 18px;
  background:linear-gradient(135deg, rgba(138,122,142,.10), rgba(90,139,158,.10));
  border-radius:18px;
  margin:10px 30px 3rem;
}
.cta-buttons{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
  max-width:720px;
  margin:0 auto;
}
.action-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 10px;
  background:linear-gradient(135deg, var(--gold-2), var(--gold-3));
  color:white;
  border:none;
  border-radius:12px;
  font-weight:800;
  font-family:var(--font-sub);
  cursor:pointer;
  transition:var(--transition);
  text-decoration:none;
  font-size:.92rem;
  box-shadow:0 10px 22px rgba(184,159,125,.12);
  white-space:nowrap;
}
.action-btn:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(184,159,125,.18);}
.action-btn.work{background:linear-gradient(135deg, var(--blue), #54A0FF);}
.action-btn.land{background:linear-gradient(135deg, var(--green), var(--teal));}
.action-btn.fun{background:linear-gradient(135deg, var(--purple), #9C6DC7);}

/* ===== 页脚 ===== */
.site-footer{
  height:var(--footer-h);
  width:100%;
  margin-top:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-family:var(--font-sub);
  font-size:0.9rem;
  color:rgba(31,31,31,0.55);
}
.site-footer a{
  color:rgba(31,31,31,0.65);
  text-decoration:none;
  padding:0.35rem 0.9rem;
  border-radius:999px;
  background:rgba(0,0,0,0.03);
  transition:var(--transition);
}
.site-footer a:hover{background:rgba(0,0,0,0.06);color:rgba(31,31,31,0.85);}
.copyright{font-size:.78rem;color:rgba(31,31,31,.40);letter-spacing:.2px;}

/* ===== 模态框 ===== */
.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(3px);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:3000;
  padding:18px;
}
.modal-overlay.active{display:flex;}
.modal{
  width:min(920px, 100%);
  background:rgba(255,255,255,.96);
  border:1px solid rgba(31,31,31,.10);
  border-radius:18px;
  box-shadow:0 30px 70px rgba(0,0,0,.22);
  overflow:hidden;
}
.modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 18px;
  border-bottom:1px solid rgba(31,31,31,.08);
  background:linear-gradient(135deg, rgba(184,159,125,.12), rgba(90,139,158,.10));
}
.modal-title{
  font-family:var(--font-head);
  font-weight:900;
  font-size:1.05rem;
  color:rgba(31,31,31,.88);
  display:flex;
  align-items:center;
  gap:10px;
}
.modal-close{
  width:42px;height:42px;
  border-radius:12px;
  border:1px solid rgba(31,31,31,.10);
  background:rgba(255,255,255,.9);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:var(--transition);
}
.modal-close:hover{transform:scale(1.05);}
.modal-body{padding:16px 18px 18px;}

.modal-list{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
}
.modal-item{
  background:rgba(255,255,255,.9);
  border:1px solid rgba(31,31,31,.08);
  border-radius:14px;
  padding:12px 12px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.modal-item strong{font-weight:900;}
.modal-item span{color:rgba(31,31,31,.65);font-size:.9rem;line-height:1.45;}
.modal-item a{
  color:rgba(31,31,31,.86);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:12px;
  background:rgba(0,0,0,.03);
  border:1px solid rgba(0,0,0,.05);
  width:max-content;
  max-width:100%;
  transition:var(--transition);
}
.modal-item a:hover{
  transform:translateY(-1px);
  background:rgba(0,0,0,.06);
}

.modal-screenshot{
  width:100%;
  max-height:200px;
  object-fit:contain;
  border-radius:8px;
  margin-top:10px;
}

@media (max-width:640px){
  .modal-list{grid-template-columns:1fr;}
}

/* ===== 响应式 ===== */
@media (max-width:1200px){
  .sidebar{width:220px;}
  .resources-main{margin-left:220px;}
}
@media (max-width:992px){
  .sidebar{transform:translateX(-100%);}
  .sidebar.active{transform:translateX(0);}
  .sidebar-overlay.active{display:block;}
  .resources-main{margin-left:0;}
}
@media (max-width:768px){
  .main-nav{height:60px;padding:0 12px;}
  .nav-logo{display:none;}
  .nav-brand{display:none;}
  .mobile-title{display:block;}

  .sidebar-toggle{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:14px;}
  .back-home{width:44px;height:44px;border-radius:14px;}

  .resources-main{padding-top:78px;padding-bottom:40px;}
  .search-section, .resources-container{padding:0 16px;}
  .search-input{padding:14px 16px;font-size:.96rem;}
  .search-btn{width:44px;height:44px;font-size:1rem;}

  /* 手机端：每行4个 */
  .icon-grid{
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:10px;
  }
  .recommend-grid{
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:10px;
  }

  :root{
    --icon-size: 1.35rem;
    --title-icon-size: 1.35rem;
    --sidebar-icon-size: 1.35rem;
    --item-title-size: 0.80rem;
  }

  .icon-name{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    width:100%;
    max-width:100%;
  }

  .cta-section{padding:16px 14px;margin:10px 16px 2rem;border-radius:16px;}
  .cta-buttons{gap:8px;}
  .action-btn{padding:9px 8px;font-size:.88rem;border-radius:11px;}
}