/* Toolkit page specific styles (academic / understated) */

.toolkit-heading {
  font-size: 2.4em;
  text-align: center;
  color: var(--accent);
  margin-bottom: 26px;
  font-family: "Georgia", serif;
  font-variant: small-caps;
  letter-spacing: 0.6px;
}

/* Category filter styling */
.toolkit-filter {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.filter-btn {
  padding: 8px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  font-size: 0.9em;
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

.filter-btn:hover {
  background: var(--surface-2);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.filter-btn.active {
  background: var(--accent-weak);
  color: var(--accent-strong);
  border-color: var(--accent);
  box-shadow: var(--shadow);
}

/* Search box styling */
.toolkit-search {
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
}

.search-container {
  position: relative;
  width: 100%;
  max-width: 520px;
}

.search-input {
  width: 100%;
  padding: 12px 20px;
  padding-left: 45px;
  border: 1px solid var(--border);
  border-radius: 30px;
  font-size: 1em;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  background: var(--surface);
  color: var(--text);
}

.search-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-weak);
  background: var(--surface);
}

.search-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
}

/* Category grid layout */
.category-section {
  margin-bottom: 36px;
}

.category-title {
  font-size: 1.55em;
  color: var(--accent);
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  font-family: "Georgia", serif;
  font-variant: small-caps;
}

.toolkit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.toolkit-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-align: center;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 180px;
  border: 1px solid var(--border);
}

.toolkit-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.toolkit-icon {
  font-size: 1.8rem;
  margin-bottom: 15px;
  color: white;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;

  /* Tone down very colorful brand gradients */
  filter: saturate(0.65) contrast(0.95) brightness(0.98);

  box-shadow: 0 4px 12px rgba(17, 24, 39, 0.10);
}

.toolkit-card:hover .toolkit-icon {
  transform: scale(1.06);
  box-shadow: 0 6px 16px rgba(17, 24, 39, 0.14);
}

.toolkit-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--text);
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toolkit-link {
  display: inline-block;
  padding: 8px 18px;
  background: var(--surface);
  color: var(--accent);
  border-radius: 30px;
  text-decoration: none;
  font-weight: 600;
  transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
  margin-top: auto;
  font-size: 0.9em;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.toolkit-link:hover {
  transform: translateY(-1px);
  background: var(--accent-weak);
  color: var(--accent-strong);
  box-shadow: var(--shadow);
}

.toolkit-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--accent-weak);
  transition: height 0.2s ease, background-color 0.2s ease;
}

.toolkit-card:hover::before {
  height: 6px;
  background: var(--accent);
}

/* Special icons colors - Light mode */
.toolkit-icon.github-icon { 
  background: linear-gradient(135deg, #252525, #5a5a5a);
}
.toolkit-icon.maple-icon { 
  background: linear-gradient(135deg, #e12f37, #c52229);
}
.toolkit-icon.deepseek-icon { 
  background: linear-gradient(135deg, #1d7df0, #0f6bd9);
}
.toolkit-icon.chatgpt-icon { 
  background: linear-gradient(135deg, #85b6a5, #6a9c8d);
}
.toolkit-icon.grok-icon { 
  background: linear-gradient(135deg, #f04a42, #e03a32);
}
.toolkit-icon.deepl-icon { 
  background: linear-gradient(135deg, #1f3d68, #142c4d);
}
.toolkit-icon.overleaf-icon { 
  background: linear-gradient(135deg, #58b152, #4a9c44);
}
.toolkit-icon.jupyter-icon { 
  background: linear-gradient(135deg, #f78a36, #e67a26);
}
.toolkit-icon.wolfram-icon { 
  background: linear-gradient(135deg, #f01d0c, #d01506);
}
.toolkit-icon.gitlab-icon { 
  background: linear-gradient(135deg, #e9573d, #6d4b41);
}
.toolkit-icon.codesandbox-icon { 
  background: linear-gradient(135deg, #1a1a1a, #4a4a4a);
}
.toolkit-icon.leetcode-icon { 
  background: linear-gradient(135deg, #ffb340, #ff9b20);
}
.toolkit-icon.tableau-icon { 
  background: linear-gradient(135deg, #6d7fd0, #4f61c0);
}
.toolkit-icon.colab-icon { 
  background: linear-gradient(135deg, #4cb85f, #3a9d4b);
}

/* Communication */
.toolkit-icon.gmail-icon { 
  background: linear-gradient(135deg, #f04a42, #e03a32);
}
.toolkit-icon.qqmail-icon { 
  background: linear-gradient(135deg, #1ac7ff, #0fb4e9);
}
.toolkit-icon.neteasemail-icon { 
  background: linear-gradient(135deg, #f0151f, #d00d17);
}
.toolkit-icon.quora-icon { 
  background: linear-gradient(135deg, #d02d29, #b02320);
}
.toolkit-icon.twitter-icon { 
  background: linear-gradient(135deg, #1a1a1a, #4a4a4a);
}

/* Media */
.toolkit-icon.youtube-icon { 
  background: linear-gradient(135deg, #ff1a1a, #e00a0a);
}
.toolkit-icon.tiktok-icon { 
  background: linear-gradient(135deg, #1a1a1a, #4a4a4a);
}
.toolkit-icon.rednote-icon { 
  background: linear-gradient(135deg, #ff3654, #e02644);
}
.toolkit-icon.bilibili-icon { 
  background: linear-gradient(135deg, #00b1e6, #0098cc);
}
.toolkit-icon.iqiyi-icon { 
  background: linear-gradient(135deg, #00c90d, #00b00b);
}
.toolkit-icon.tencent-icon { 
  background: linear-gradient(135deg, #1a9cff, #0d8ae9);
}

/* Music */
.toolkit-icon.qqmusic-icon { 
  background: linear-gradient(135deg, #3dcc7d, #2dbb6d);
}
.toolkit-icon.neteasemusic-icon { 
  background: linear-gradient(135deg, #f0151f, #d00d17);
}
.toolkit-icon.kugou-icon { 
  background: linear-gradient(135deg, #3f8fec, #2d7fdc);
}
.toolkit-icon.spotify-icon { 
  background: linear-gradient(135deg, #2dcc5d, #1dbb4d);
}

/* Knowledge */
.toolkit-icon.wikipedia-icon { 
  background: linear-gradient(135deg, #6d6e70, #56575a);
}
.toolkit-icon.scholar-icon { 
  background: linear-gradient(135deg, #5a8fed, #487fdd);
}
.toolkit-icon.zlib-icon { 
  background: linear-gradient(135deg, #2a8d97, #1a7d87);
}
.toolkit-icon.cnki-icon { 
  background: linear-gradient(135deg, #e01f32, #c00f22);
}
.toolkit-icon.sciencedirect-icon { 
  background: linear-gradient(135deg, #ff8c2c, #e97c1c);
}
.toolkit-icon.webofscience-icon { 
  background: linear-gradient(135deg, #1a7cbf, #0d6caf);
}
.toolkit-icon.mathoverflow-icon { 
  background: linear-gradient(135deg, #f5a623, #e59613);
}
.toolkit-icon.oeis-icon { 
  background: linear-gradient(135deg, #3dcc7d, #2dbb6d);
}

/* Productivity */
.toolkit-icon.notion-icon { 
  background: linear-gradient(135deg, #1a1a1a, #4a4a4a);
}
.toolkit-icon.obsidian-icon { 
  background: linear-gradient(135deg, #8d4df5, #7d3de5);
}
.toolkit-icon.tencentdocs-icon { 
  background: linear-gradient(135deg, #1a9cff, #0d8ae9);
}
.toolkit-icon.typora-icon { 
  background: linear-gradient(135deg, #9d9d9d, #7d7d7d);
}
.toolkit-icon.yuque-icon { 
  background: linear-gradient(135deg, #1ab0ff, #0da0e9);
}
.toolkit-icon.canva-icon { 
  background: linear-gradient(135deg, #1ac2ff, #0db2e9);
}
.toolkit-icon.removebg-icon { 
  background: linear-gradient(135deg, #6d7fd0, #4f61c0);
}
.toolkit-icon.tinypng-icon { 
  background: linear-gradient(135deg, #3dcc7d, #2dbb6d);
}

/* Reference */
.toolkit-icon.endnote-icon { 
  background: linear-gradient(135deg, #4a5c7d, #3a4c6d);
}
.toolkit-icon.zotero-icon { 
  background: linear-gradient(135deg, #6d7fd0, #4f61c0);
}
.toolkit-icon.mendeley-icon { 
  background: linear-gradient(135deg, #e9573d, #d9472d);
}
.toolkit-icon.academia-icon { 
  background: linear-gradient(135deg, #4a8fd6, #3a7fc6);
}

/* USTC Services */
.toolkit-icon.ustc-blackboard-icon { 
  background: linear-gradient(135deg, #d00a0a, #b00a0a);
}
.toolkit-icon.ustc-mail-icon { 
  background: linear-gradient(135deg, #1a7cbf, #0d6caf);
}
.toolkit-icon.ustc-flyer-icon { 
  background: linear-gradient(135deg, #5a8fed, #487fdd);
}
.toolkit-icon.ustc-website-icon { 
  background: linear-gradient(135deg, #e01f32, #c00f22);
}
.toolkit-icon.ustc-jw-icon { 
  background: linear-gradient(135deg, #4a8fd6, #3a7fc6);
}
.toolkit-icon.ustc-icourse-icon { 
  background: linear-gradient(135deg, #6dbb5a, #5dab4a);
}
.toolkit-icon.ustc-software-icon { 
  background: linear-gradient(135deg, #7d5dc9, #6d4db9);
}
.toolkit-icon.ustc-hanhai-icon { 
  background: linear-gradient(135deg, #1a8d97, #0d7d87);
}

/* No results message */
.no-results {
  text-align: center;
  padding: 40px;
  color: var(--muted);
  font-size: 1.2em;
  grid-column: 1 / -1;
}