﻿  :root{
    --bg:#dcedc8;
    --card:#ffffff;
    --line:#e8ecf2;
    --text:#1f2937;
    --muted:#7b8494;
    --brand:#3b82f6;
    --hover:#f7f9fc;
  }
  @media (prefers-color-scheme: dark){
    :root{
      --bg:#0f1319; --card:#171c24; --line:#252c37;
      --text:#e5e9f0; --muted:#8b95a5; --hover:#1d2430;
    }
  }

  *{ box-sizing:border-box; }
  html,body{ margin:0; padding:0; }
  body{
    background:var(--bg); color:var(--text);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
    font-size:14px; line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  
/* 半透明顶栏 */
.top-bar {/* position: fixed; background: #D5E8D4;top: 0;width: 100%;padding: 1rem;backdrop-filter: blur(8px);display: flex;justify-content: space-between;box-shadow: 0 4px 12px rgba(0,100,0,0.1);z-index: 1000*/;
	display: flex;
    justify-content: space-between;
    background: #2d3436;
	color:#fff;
	font-size: 1rem;
    padding: 1rem;
    position: sticky;
    top: 0;
    z-index: 100;
}.top-bar a{color:#fff;}
/* 动态时间样式 */
.time-display {font-size: 1rem;color: #fff;display: flex;gap: 1.5rem;}

/* 顶部LOGO + 搜索框 margin: 3rem 0 -1rem 0; font-size: 2.5rem;*/
.resources-container {max-width: 1200px;margin: 2rem auto;padding: 0 1rem;}
.header {text-align: center;}
.header h1 {var(--brand);margin: 0;}
.header h1 i {color: var(--highlight);}
.header h1 a{color: #008000;text-decoration: none;}
.header p {color: var(--subtext);}

/* 搜索框 */
.search-panel {
	/* background: white;width: min(90%, 1200px);
	box-shadow: 0 12px 40px rgba(0,0,0,0.08);padding: 2rem;*/
	border-radius: 16px;
	text-align:center;
}
#searchInput {
	width: 80%;
	padding: 1.2rem;
	border: 2px solid #e0e0e0;
	border-radius: 12px;
	font-size: 1.1rem;
	margin-bottom: 1rem;
	transition: border-color 0.3s;
}
#searchInput:focus {
	outline: none;
	border-color: var(--primary);
}
.engine-buttons {   
	/*display: flex;
	flex-wrap: wrap;*/
	
	margin-bottom: 20px;
	gap: 1rem;
	display: grid;
    grid-template-columns: repeat(6, 1fr);
}
.engine-btn {
	flex: 1;
	padding: 0.5rem 1.5rem;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.2s;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--muted);
    background: var(--card);
    font-weight: 700;
}
.engine-btn .img{width:20px;height:20px}

.engine-btn:hover {opacity: 0.9;transform: translateY(-2px); color:#FFF;background: var(--brand);border-color: var(--muted);}
.engine-btn.active{ background:var(--brand); border-color:var(--brand); color:#fff; }

/*
.engine-btn.baidu {background: #4285F4;color: white;}
.engine-btn.google {background: #4285F4;color: white;}
.engine-btn.bing {background: #4285F4;color: white;}
.engine-btn.sogou {background: #4285F4;color: white;}
.engine-btn.so {background: #4285F4;color: white;}
.engine-btn.toutiao {background: #4285F4;color: white;}

.engine-btn.taobao {background: #00809D;color: white;}
.engine-btn.jd {background: #00809D;color: white;}
.engine-btn.vip {background: #00809D;color: white;}
.engine-btn.kaola {background: #00809D;color: white;}
.engine-btn.nike {background: #00809D;color: white;}
.engine-btn.autohome {background: #00809D;color: white;}

.engine-btn.zhihu {background: #4285F4;color: white;}
.engine-btn.tieba {background: #4285F4;color: white;}
.engine-btn.zhidao {background: #4285F4;color: white;}
.engine-btn.xiaohongshu {background: #4285F4;color: white;}
.engine-btn.douban {background: #4285F4;color: white;}
.engine-btn.weibo {background: #4285F4;color: white;}

.engine-btn.translate {background: #00809D;color: white;}
.engine-btn.fanyi {background: #00809D;color: white;}
.engine-btn.wikipedia {background: #00809D;color: white;}
.engine-btn.pexels {background: #00809D;color: white;}
.engine-btn.douyin {background: #00809D;color: white;}
.engine-btn.github {background: #00809D;color: white;}
*/
/* 搜索框完 padding:28px 16px 60px;  */

  
/* Footer 样式 */
footer {background: #2d3436;color: #dfe6e9;padding: 3rem 1rem;margin-top: 1rem;}
.footer-content {max-width: 1200px;margin: 0 auto;display: grid;grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));gap: 2rem;}
.footer-section h3 {color: #a55eea;margin-bottom: 1rem;}
.footer-links a {color: #dfe6e9;text-decoration: none;display: block;margin-bottom: 0.5rem;}
.footer-links a:hover {color: #a55eea;}
  
  
 
  .page{ max-width:1180px; margin:0 auto; }
  .page-head h2{ font-size:20px; margin:0 0 6px; letter-spacing:.5px; }
  .page-head p{ margin:0; color:var(--muted); font-size:13px; }
  .page-head a{color: var(--text);text-decoration: none;}
  .page-head a:hover{ color:var(--brand); }

  /* ---------- 工具栏 ---------- */
  .toolbar{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:18px 0 14px; }
  .search{
    flex:1 1 240px; min-width:180px; height:38px; padding:0 14px;
    border:1px solid var(--line); border-radius:10px;
    background:var(--card); color:var(--text); font-size:14px; outline:none;
    transition:border-color .2s, box-shadow .2s;
  }
  .search:focus{ border-color:var(--brand); box-shadow:0 0 0 3px rgba(59,130,246,.15); }
  .chips{ display:flex; flex-wrap:wrap; gap:8px; }
  .chip{
    padding:6px 14px; border-radius:999px; font-size:13px;
    border:1px solid var(--line); background:var(--card);
    color:var(--muted); cursor:pointer; transition:.18s; white-space:nowrap;
  }
  .chip:hover{ color:var(--text); border-color:var(--muted); }
  .chip.active{ background:var(--brand); border-color:var(--brand); color:#fff; }

  /* ---------- 表格 ---------- */
  .table-wrap{
    background:var(--card); border:1px solid var(--line);
    border-radius:14px; overflow:hidden;
  }
  table{ width:100%; border-collapse:collapse; table-layout:fixed; }
  thead th{
    text-align:left; font-size:12px; font-weight:600; letter-spacing:.5px;
    color:var(--muted); padding:12px 14px; background:var(--hover);
    border-bottom:1px solid var(--line); white-space:nowrap;
  }
  tbody tr{ transition:background .15s; }
  tbody tr:hover{ background:var(--hover); }
  tbody td{
    padding:13px 14px; border-bottom:1px solid var(--line);
    vertical-align:middle; overflow:hidden;
  }
  tbody tr:last-child td{ border-bottom:none; }

  .idx-cell{
    text-align:center; color:var(--muted); font-size:13px;
    font-variant-numeric:tabular-nums;
  }

  /* 图标 */
  .icon-box{
    position:relative; display:inline-flex; vertical-align:middle;
    width:24px; height:24px; border-radius:6px; overflow:hidden;
    align-items:center; justify-content:center;
    background:var(--hover); font-size:12px; font-weight:600; color:var(--muted);
  }
  .icon-box img{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:contain; border-radius:inherit; background:var(--card);
  }
  .icon-box img.hide{ display:none; }

  /* 标题 */
  .title-cell a{
    display:block; color:var(--text); text-decoration:none; font-weight:600;
    overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  }
  .title-cell a:hover{ color:var(--brand); }

  /* 分类 */
  .cat-cell .tag{
    display:inline-block; padding:2px 10px; border-radius:999px;
    font-size:12px; color:var(--brand); background:rgba(59,130,246,.1);
    white-space:nowrap;
  }

  /* 简介：默认单行省略，点击展开 */
  .desc-cell{ color:var(--muted); font-size:13px; }
  .desc-inner{
    display:block; overflow:hidden; white-space:nowrap;
    text-overflow:ellipsis; border-radius:4px;
  }
  .desc-inner.is-clip{ cursor:pointer; }
  .desc-inner.is-clip:hover{ color:var(--text); }
  tr.expanded .desc-inner{
    white-space:normal; overflow:visible; text-overflow:clip;
    cursor:pointer; color:var(--text);
  }

  .date-cell{
    color:var(--muted); font-size:13px;
    white-space:nowrap; font-variant-numeric:tabular-nums;
  }

  .empty-row td{ text-align:center; color:var(--muted); padding:44px 0; }
 

  /* ---------- 移动端：表格转卡片 ---------- */
  @media (max-width:760px){
    .page{ padding:18px 12px 40px; }
    .table-wrap{ background:transparent; border:none; border-radius:0; }
    table{ display:block; table-layout:auto; }
    colgroup, thead{ display:none; }
    tbody{ display:grid; gap:10px; }
    tbody tr{
      display:grid;
      grid-template-columns:28px 26px minmax(0,1fr) auto;
      grid-template-areas:
        "idx  icon title title"
        "cat  cat  cat   date"
        "desc desc desc  desc";
      align-items:center; gap:4px 8px;
      padding:12px 14px; background:var(--card);
      border:1px solid var(--line); border-radius:12px;
    }
    tbody tr:hover{ background:var(--card); }
    tbody td{ padding:0; border:none; overflow:visible; }
    .idx-cell{ grid-area:idx; text-align:left; }
    .icon-cell{ grid-area:icon; }
    .title-cell{ grid-area:title; min-width:0; }
    .title-cell a{ white-space:normal; overflow:visible; text-overflow:clip; word-break:break-word; }
    .cat-cell{ grid-area:cat; }
    .date-cell{ grid-area:date; text-align:right; font-size:12px; }
    .desc-cell{ grid-area:desc; margin-top:2px; }
    .empty-row{ display:block; }
    .empty-row td{ display:block; }
	
	.footer-content {grid-template-columns: 1fr;}	
	.search-panel {padding: 0rem;}
	.engine-buttons {grid-template-columns: repeat(3, 1fr);}
	.engine-btn {padding: 0.5rem 0.5rem;}
	.top-bar,.cat-cell,.date-cell,.page-head p{display:none;}
  }
  
  

  