:root {
  --bg-color: #f5f3ff;
  --card-bg: #ffffff;
  --text-color: #1f2937;
  --text-secondary: #6b7280;
  --border-color: #e5e7eb;
  --primary-color: #7c3aed;
  --primary-hover: #06b6d4;
  --shadow: 0 2px 10px rgba(0,0,0,0.06);
  --shadow-hover: 0 6px 22px rgba(0,0,0,0.12);
}
[data-theme="dark"] {
  --bg-color: #120822;
  --card-bg: #200f3a;
  --text-color: #f1f5f9;
  --text-secondary: #94a3b8;
  --border-color: #334155;
  --primary-color: #06b6d4;
  --primary-hover: #7c3aed;
  --shadow: 0 2px 10px rgba(0,0,0,0.4);
  --shadow-hover: 0 6px 22px rgba(0,0,0,0.55);
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--bg-color); color: var(--text-color);
  line-height: 1.65; transition: background 0.3s, color 0.3s;
}
.container { max-width: 1200px; margin:0 auto; padding:0 16px; }
.header {
  background: var(--card-bg); box-shadow: var(--shadow); position:sticky; top:0; z-index:100;
  border-bottom: 2px solid var(--primary-color);
}
.header-inner {
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 16px; flex-wrap:wrap; gap:12px;
}
.logo { font-size: 22px; font-weight: 800; color: var(--primary-color); }
.header-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.search-box { display:flex; border:1px solid var(--border-color); border-radius:10px; overflow:hidden; background:var(--bg-color); }
.search-box input {
  border:none; outline:none; padding: 10px 14px; font-size:14px;
  background: transparent; color:var(--text-color); width:220px;
}
.search-box button { border:none; background: var(--primary-color); color:#fff; padding:0 18px; cursor:pointer; transition: background 0.2s; }
.search-box button:hover { background: var(--primary-hover); }
.theme-btn {
  border:1px solid var(--border-color); background:var(--bg-color);
  width:42px; height:42px; border-radius:10px; cursor:pointer;
  font-size:18px; color:var(--text-color); transition: all 0.2s;
}
.theme-btn:hover { transform: scale(1.05); }
.nav { border-top: 1px solid var(--border-color); background: var(--card-bg); }
.nav-inner { display:flex; gap:8px; padding: 12px 16px; overflow-x:auto; scrollbar-width:none; }
.nav-inner::-webkit-scrollbar { display:none; }
.cat-btn {
  padding: 8px 16px; border:1px solid var(--border-color);
  background:var(--bg-color); color:var(--text-color);
  border-radius: 20px; cursor:pointer; white-space:nowrap;
  font-size:14px; transition: all 0.2s;
}
.cat-btn:hover { border-color: var(--primary-color); color: var(--primary-color); }
.cat-btn.active { background: var(--primary-color); color:#fff; border-color: var(--primary-color); font-weight: 600; }
.main { padding: 24px 16px; min-height: calc(100vh - 220px); }
.stats-bar {
  display:flex; justify-content:space-between; padding: 12px 18px;
  background: var(--card-bg); border-radius: 12px; margin-bottom: 20px;
  font-size:14px; color: var(--text-secondary); border:1px solid var(--border-color);
}
.card-grid {
  display:grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}
.data-card {
  background: var(--card-bg); border-radius:14px; padding: 20px;
  box-shadow: var(--shadow); transition: all 0.25s;
  border:1px solid var(--border-color); cursor:pointer;
  display:flex; flex-direction:column;
}
.data-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); border-color: var(--primary-color); }
.card-tag {
  display:inline-block; padding: 3px 12px; font-size: 12px; color:#fff;
  border-radius: 14px; margin-bottom: 12px; align-self:flex-start;
  background: linear-gradient(135deg, var(--primary-color), var(--primary-hover)); font-weight:600;
}
.card-title {
  font-size:17px; font-weight:700; line-height:1.45;
  margin-bottom:10px; color: var(--text-color);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.card-meta {
  display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px;
}
.meta-chip {
  display:inline-block; padding:2px 9px; border-radius: 10px; font-size:12px;
  background: var(--bg-color); color: var(--text-secondary); border:1px solid var(--border-color);
}
.card-desc {
  font-size:14px; color:var(--text-secondary); line-height:1.7;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  flex:1; margin-bottom:14px;
}
.card-footer {
  display:flex; justify-content:space-between; align-items:center;
  padding-top: 12px; border-top: 1px dashed var(--border-color);
  font-size:13px; color:var(--text-secondary);
}
.card-footer .highlight { color:var(--primary-color); font-weight:700; }
.empty-state, .loading-state {
  text-align:center; padding: 80px 20px; color:var(--text-secondary); font-size:16px;
}
.spinner {
  width:42px; height:42px; border:4px solid var(--border-color);
  border-top-color: var(--primary-color); border-radius:50%;
  margin:0 auto 16px; animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.modal { display:none; position:fixed; inset:0; z-index:200; align-items:center; justify-content:center; padding:20px; }
.modal.open { display:flex; }
.modal-mask { position:absolute; inset:0; background: rgba(0,0,0,0.65); backdrop-filter: blur(4px); }
.modal-content {
  position:relative; background: var(--card-bg); border-radius:16px;
  padding: 32px 30px; max-width: 720px; width:100%;
  max-height: 88vh; overflow-y:auto;
  box-shadow: 0 18px 60px rgba(0,0,0,0.5); border:1px solid var(--border-color);
}
.modal-close {
  position:absolute; top:12px; right:12px;
  background: var(--bg-color); color:var(--text-secondary); border:1px solid var(--border-color);
  font-size:18px; cursor:pointer; width:38px; height:38px; border-radius:50%;
  transition: all 0.2s;
}
.modal-close:hover { background: var(--primary-color); color:#fff; border-color:transparent; transform: rotate(90deg); }
.modal-tag { text-align:center; margin-bottom:14px; }
.modal-tag span {
  display:inline-block; padding: 4px 14px; font-size:13px; border-radius:14px;
  color:#fff; font-weight:600; background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
}
#modalTitle {
  font-size: 22px; font-weight:800; line-height:1.5; text-align:center; margin-bottom:22px;
  color: var(--text-color);
}
#modalBody { font-size:15px; line-height:1.9; color: var(--text-color); }
#modalBody h4 {
  margin: 18px 0 8px; font-size:15px; font-weight:700;
  color:var(--primary-color); border-left:3px solid var(--primary-color); padding-left:10px;
}
#modalBody ul { padding-left: 20px; }
#modalBody li { margin: 3px 0; }
#modalBody .kv-row {
  display:flex; padding: 6px 0; border-bottom:1px dashed var(--border-color);
}
#modalBody .kv-row:last-child { border-bottom:none; }
#modalBody .kv-k { min-width: 110px; color:var(--text-secondary); font-weight:600; }
#modalBody .kv-v { flex:1; color: var(--text-color); }
#modalBody .score-big {
  font-size: 48px; font-weight: 900;
  background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  display:inline-block;
}
@media (max-width: 720px) {
  .search-box input { width:150px; }
  .card-grid { grid-template-columns: 1fr; }
  .stats-bar { flex-direction:column; gap:6px; text-align:center; }
  .logo { font-size:18px; }
  .modal-content { padding: 24px 20px; }
  #modalTitle { font-size:19px; }
  #modalBody { font-size: 14.5px; line-height:1.8; }
}