/* ===== CSS Variables ===== */
:root {
  --primary: #f1404b;
  --primary-light: #ff6b6b;
  --bg: #f9f9f9;
  --bg-card: #ffffff;
  --bg-sidebar: #f0f2f4;
  --bg-header: #ffffff;
  --text: #333;
  --text-muted: #888;
  --text-light: #aaa;
  --border: #eee;
  --shadow: 0 4px 12px rgba(0,0,0,.08);
  --shadow-hover: 0 8px 24px rgba(0,0,0,.12);
  --radius: 8px;
  --radius-sm: 6px;
  --radius-lg: 12px;
  --sidebar-w: 60px;
  --sidebar-w-open: 180px;
  --header-h: 56px;
  --max-width: 1200px;
  --gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --gradient-purple: linear-gradient(135deg, #8618db, #d711ff, #460fdd);
  /* Brand colors driven by bg_color_1 / bg_color_2 settings */
  --brand-c1: #8618db;
  --brand-c2: #460fdd;
  --brand-gradient: linear-gradient(135deg, var(--brand-c1), var(--brand-c2));
  --brand-solid: var(--brand-c1);
}

/* Dark mode */
body.dark-mode {
  --bg: #1a1a2e;
  --bg-card: #16213e;
  --bg-sidebar: #0f0f23;
  --bg-header: #16213e;
  --text: #e0e0e0;
  --text-muted: #888;
  --text-light: #666;
  --border: #233;
  --shadow: 0 4px 12px rgba(0,0,0,.3);
  --shadow-hover: 0 8px 24px rgba(0,0,0,.4);
}

/* ===== Reset ===== */
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  transition: background .3s, color .3s;
}
a { color:inherit; text-decoration:none; transition:color .2s; }
a:hover { color: var(--primary); }
ul { list-style:none; }
img { max-width:100%; }
input,textarea,select { font-family:inherit; }

/* ===== Loading Animation ===== */
#loading {
  position: fixed; inset:0; z-index:9999;
  background: var(--bg);
  display: flex; flex-direction:column; align-items:center; justify-content:center;
  transition: opacity .5s;
}
#loading.hidden { opacity:0; pointer-events:none; }
.loader {
  width: 48px; height:48px;
  border: 4px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.loader-text { margin-top:16px; color:var(--text-muted); font-size:14px; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ===== Header ===== */
.header {
  position: sticky; top:0; z-index:100;
  height: var(--header-h);
  background: var(--bg-header);
  border-bottom: 1px solid var(--border);
  display: flex; align-items:center;
  padding: 0 20px;
  transition: background .3s;
}
.header-left { display:flex; align-items:center; gap:8px; }
.header-logo {
  font-size:20px; font-weight:700;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.header-nav {
  display:flex; align-items:center; gap:4px;
  margin-left:32px; flex:1;
  overflow-x:auto; scrollbar-width:none;
}
.header-nav::-webkit-scrollbar { display:none; }
.header-nav a {
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  font-size:14px; white-space:nowrap;
  color: var(--text); transition: all .2s;
}
.header-nav a:hover, .header-nav a.active {
  background: var(--primary);
  color: #fff;
}
.header-right { display:flex; align-items:center; gap:8px; }
.header-btn {
  width:36px; height:36px; border-radius:50%;
  border:none; background:transparent; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:16px; color:var(--text); transition:all .2s;
}
.header-btn:hover { background:var(--bg); color:var(--primary); }

/* ===== Mini Sidebar ===== */
.sidebar {
  position: fixed; left:0; top:var(--header-h); bottom:0;
  width: var(--sidebar-w); z-index:90;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  overflow-y:auto; overflow-x:hidden;
  transition: width .3s;
  scrollbar-width: none;
  display:flex; flex-direction:column;
}
.sidebar::-webkit-scrollbar { display:none; }
.sidebar:hover { width: var(--sidebar-w-open); }
.sidebar-nav { flex:1 1 auto; padding: 8px 0; overflow-y:auto; }
.sidebar-nav a {
  display:flex; align-items:center;
  padding: 10px 18px;
  gap: 12px;
  color: var(--text-muted);
  font-size:14px; white-space:nowrap;
  border-left: 3px solid transparent;
  transition: all .2s;
}
.sidebar-nav a:hover, .sidebar-nav a.active {
  color: var(--primary);
  border-left-color: var(--primary);
  background: rgba(241,64,75,.06);
}
.sidebar-nav a i { width:20px; text-align:center; font-size:16px; flex-shrink:0; }
.sidebar-nav a span { opacity:0; transition:opacity .2s; }
.sidebar:hover .sidebar-nav a span { opacity:1; }

/* sidebar footer items */
.sidebar-footer {
  margin-top:auto; padding:8px 0;
  border-top:1px solid var(--border);
}
.sidebar-return {
  display:flex; align-items:center;
  padding: 10px 18px;
  gap: 12px;
  color: var(--text-muted);
  font-size:14px; white-space:nowrap;
  border-left: 3px solid transparent;
  transition: all .2s;
}
.sidebar-return:hover {
  color: var(--primary);
  border-left-color: var(--primary);
  background: rgba(241,64,75,.06);
}
.sidebar-return i { width:20px; text-align:center; font-size:16px; flex-shrink:0; }
.sidebar-return span { opacity:0; transition:opacity .2s; }
.sidebar:hover .sidebar-return span { opacity:1; }

/* ===== Main Content ===== */
.main-content {
  margin-left: var(--sidebar-w);
  padding: 20px;
  min-height: calc(100vh - var(--header-h));
}

/* ===== Search Banner ===== */
.search-banner {
  background: var(--brand-gradient);
  background-size: 200% 200%;
  animation: gradientShift 8s ease infinite;
  border-radius: var(--radius-lg);
  padding: 40px 24px;
  margin-bottom: 24px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.search-banner.has-bg {
  animation: none;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.search-banner-overlay {
  position:absolute; inset:0;
  background: linear-gradient(135deg,
    var(--overlay-c1, #8618db),
    var(--overlay-c2, #460fdd));
  opacity:.55;
  border-radius: var(--radius-lg);
}
.search-banner-inner {
  position:relative; z-index:1;
}
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.search-banner h1 {
  color:#fff; font-size:28px; margin-bottom:8px; font-weight:700;
}
.search-banner p { color:rgba(255,255,255,.8); font-size:14px; margin-bottom:20px; }
.search-tabs {
  display:flex; justify-content:center; gap:4px; margin-bottom:16px; flex-wrap:wrap;
}
.search-tab {
  padding: 4px 16px; border-radius:20px;
  font-size:13px; color:rgba(255,255,255,.7); cursor:pointer;
  transition:all .2s; border:1px solid transparent;
}
.search-tab:hover { color:#fff; }
.search-tab.active {
  background:rgba(255,255,255,.2); color:#fff;
  border-color:rgba(255,255,255,.3);
}
.search-box {
  display:flex; max-width:560px; margin:0 auto;
  background:rgba(255,255,255,.15);
  border-radius:24px; padding:4px;
  backdrop-filter:blur(10px);
}
.search-box input {
  flex:1; border:none; background:transparent;
  padding:10px 20px; font-size:15px; color:#fff; outline:none;
}
.search-box input::placeholder { color:rgba(255,255,255,.5); }
.search-box select {
  border:none; background:transparent; color:#fff;
  padding:0 12px; outline:none; cursor:pointer;
  font-size:14px;
}
.search-box select option { color:#333; }
.search-box button {
  border:none; background:#fff; color:var(--primary);
  padding:8px 24px; border-radius:20px; font-size:14px; font-weight:600;
  cursor:pointer; transition:all .2s;
}
.search-box button:hover { opacity:.9; transform:scale(1.02); }

/* ===== Ad Banner ===== */
.ad-grid {
  display: grid;
  grid-template-columns: repeat(var(--ad-cols, 1), 1fr);
  gap: 16px;
  margin-bottom: 20px;
}
.ad-banner {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 12px 20px;
  display:flex; align-items:center; gap:16px;
  box-shadow: var(--shadow);
  border:1px solid var(--border);
}
.ad-banner .ad-label {
  font-size:11px; color:var(--text-light);
  background:var(--bg); padding:2px 8px; border-radius:4px;
  flex-shrink:0;
}
.ad-banner .ad-content {
  flex:1; font-size:14px; color:var(--text);
}
.ad-banner .ad-link {
  color:var(--primary); font-size:13px; font-weight:500;
}

/* ===== Category Section ===== */
.cat-section {
  margin-bottom: 32px;
}
.cat-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:16px;
}
.cat-title {
  display:flex; align-items:center; gap:8px;
  font-size:18px; font-weight:600;
}
.cat-title i { color:var(--primary); }
.cat-title small { font-size:12px; color:var(--text-light); font-weight:400; }
.cat-more {
  font-size:13px; color:var(--text-muted);
  display:flex; align-items:center; gap:4px;
  transition:color .2s;
}
.cat-more:hover { color:var(--primary); }

/* ===== Link Cards Grid ===== */
.link-grid {
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}
.link-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 16px;
  border: 1px solid var(--border);
  transition: all .25s;
  display:flex; align-items:flex-start; gap:12px;
  cursor:pointer;
}
.link-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: var(--primary);
}
.link-icon {
  width:40px; height:40px; border-radius:8px;
  background: var(--brand-gradient);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:18px; font-weight:700;
  flex-shrink:0;
}
.link-icon img { width:100%; height:100%; border-radius:8px; object-fit:cover; }
.link-body { flex:1; min-width:0; }
.link-title {
  font-size:14px; font-weight:600; margin-bottom:4px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.link-desc {
  font-size:12px; color:var(--text-muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ===== AI 渗透提示词卡 (渗透SKILL) ===== */
.prompt-card {
  flex-direction: column;
  align-items: stretch;
  cursor: default;
}
.prompt-card .link-body { width: 100%; }
.prompt-card .link-title { white-space: normal; display: flex; align-items: center; gap: 6px; }
.prompt-tag {
  font-size: 10px; font-weight: 600;
  background: var(--primary); color: #fff;
  padding: 1px 7px; border-radius: 10px; flex-shrink: 0;
}
.prompt-text {
  white-space: pre-wrap; word-break: break-word;
  max-height: 190px; overflow: auto;
  font-size: 12px; line-height: 1.55;
  background: var(--bg-soft, #f4f4f5);
  color: var(--text);
  padding: 10px; border-radius: 8px;
  margin: 8px 0;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
.dark-mode .prompt-text { background: #1e1e22; }
.copy-btn {
  align-self: flex-end;
  background: var(--primary); color: #fff;
  border: none; border-radius: 6px;
  padding: 5px 12px; font-size: 12px; cursor: pointer;
  transition: opacity .2s;
}
.copy-btn:hover { opacity: .85; }
.copy-btn.copied { background: #2e9e5b; }
.subcat-grid .prompt-card { grid-column: 1 / -1; }

/* ===== News Section ===== */
.news-section {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 24px;
  border:1px solid var(--border);
}
.news-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:16px;
}
.news-title {
  display:flex; align-items:center; gap:8px;
  font-size:18px; font-weight:600;
}
.news-title i { color: var(--primary); }
.news-list {
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 8px;
}
.news-item {
  display:flex; align-items:center; gap:8px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size:13px; transition:all .2s;
}
.news-item:hover { background:var(--bg); }
.news-rank {
  width:20px; height:20px; border-radius:4px;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; color:#fff;
  flex-shrink:0;
}
.news-rank:nth-child(1) { background:#f1404b; }
.news-rank.r1 { background:#f1404b; }
.news-rank.r2 { background:#ff6b6b; }
.news-rank.r3 { background:#ffa500; }
.news-rank.r4, .news-rank.r5 { background:#aaa; }
.news-item a {
  flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.news-hot { font-size:11px; color:var(--text-light); flex-shrink:0; }
.news-source-tag {
  font-size:10px; color:#fff; background:var(--brand-gradient);
  padding:1px 6px; border-radius:3px; flex-shrink:0; margin-right:4px;
  white-space:nowrap;
}

/* ===== Footer ===== */
.footer {
  text-align:center;
  padding: 24px 20px;
  color: var(--text-light);
  font-size:13px;
  border-top: 1px solid var(--border);
  margin-top: 40px;
}
.footer a { color:var(--text-muted); }
.footer a:hover { color:var(--primary); }

/* ===== Back to top / tools ===== */
.tools-bar {
  position:fixed; right:24px; bottom:24px;
  display:flex; flex-direction:column; gap:8px; z-index:80;
}
.tools-btn {
  width:40px; height:40px; border-radius:50%;
  background:var(--bg-card); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--text-muted); font-size:16px;
  box-shadow:var(--shadow); transition:all .2s;
}
.tools-btn:hover { color:var(--primary); border-color:var(--primary); }

/* ===== Category Page ===== */
.cat-page-header {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 24px;
  border:1px solid var(--border);
  display:flex; align-items:center; gap:16px;
}
.cat-page-header .cat-icon {
  width:56px; height:56px; border-radius:12px;
  background:var(--brand-gradient);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:24px;
}
.cat-page-header h1 { font-size:24px; margin-bottom:4px; }
.cat-page-header p { font-size:14px; color:var(--text-muted); }
.cat-page-count {
  margin-left:auto;
  background:var(--bg); padding:6px 16px; border-radius:20px;
  font-size:13px; color:var(--text-muted);
}

/* ===== Search overlay ===== */
.search-overlay {
  position:fixed; inset:0; z-index:200;
  background:rgba(0,0,0,.5);
  display:none; align-items:flex-start; justify-content:center;
  padding-top:120px;
}
.search-overlay.show { display:flex; }
.search-modal {
  background:var(--bg-card); border-radius:var(--radius-lg);
  width:90%; max-width:600px; padding:24px;
  box-shadow:0 20px 60px rgba(0,0,0,.2);
}
.search-modal input {
  width:100%; border:2px solid var(--primary); border-radius:var(--radius);
  padding:12px 20px; font-size:16px; outline:none;
}
.search-modal-results { margin-top:16px; max-height:400px; overflow-y:auto; }
.search-result-item {
  padding:10px 16px; border-radius:var(--radius-sm);
  cursor:pointer; transition:background .2s;
}
.search-result-item:hover { background:var(--bg); }
.search-result-item .sr-title { font-size:14px; font-weight:500; }
.search-result-item .sr-desc { font-size:12px; color:var(--text-muted); }

/* ===== Mobile sidebar toggle ===== */
.sidebar-toggle { display:none; }

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .header-nav { display:none; }
  .sidebar { transform:translateX(-100%); }
  .sidebar.open { transform:translateX(0); width:200px; }
  .sidebar.open .sidebar-nav a span { opacity:1; }
  .main-content { margin-left:0; padding:12px; }
  .sidebar-toggle { display:flex; }
  .search-banner { padding:24px 16px; }
  .search-banner h1 { font-size:22px; }
  .link-grid { grid-template-columns: 1fr; }
  .news-list { grid-template-columns: 1fr; }
  .ad-grid { grid-template-columns: 1fr !important; }
}

/* ========================================
   ADMIN PANEL STYLES
   ======================================== */

/* ===== Admin Base ===== */
.admin-body { background:var(--bg); }
.admin-layout {
  display:flex; min-height:100vh;
}
.admin-sidebar {
  width:220px; background:var(--bg-sidebar);
  border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  position:fixed; top:0; bottom:0; left:0; z-index:100;
}
.admin-sidebar-header {
  padding:20px; border-bottom:1px solid var(--border);
}
.admin-sidebar-header .logo {
  font-size:20px; font-weight:700;
  background:var(--gradient-purple);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.admin-sidebar-header .sub { font-size:12px; color:var(--text-light); margin-top:2px; }
.admin-sidebar-nav { flex:1; padding:12px 0; }
.admin-sidebar-nav a {
  display:flex; align-items:center; gap:10px;
  padding:10px 20px; font-size:14px;
  color:var(--text-muted); border-left:3px solid transparent;
  transition:all .2s;
}
.admin-sidebar-nav a:hover { background:rgba(0,0,0,.04); color:var(--text); }
.admin-sidebar-nav a.active { color:var(--primary); border-left-color:var(--primary); background:rgba(241,64,75,.06); }
.admin-sidebar-nav a i { width:18px; text-align:center; }
.admin-sidebar-footer { padding:12px 20px; border-top:1px solid var(--border); }
.admin-sidebar-footer a { font-size:13px; color:var(--text-muted); }

.admin-main {
  flex:1; margin-left:220px;
  display:flex; flex-direction:column; min-height:100vh;
}
.admin-topbar {
  height:56px; background:var(--bg-header);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 24px; position:sticky; top:0; z-index:50;
}
.admin-topbar h2 { font-size:18px; font-weight:600; }
.admin-topbar .user-info { font-size:13px; color:var(--text-muted); display:flex; align-items:center; gap:8px; }
.admin-content { padding:24px; flex:1; }

/* ===== Admin Cards ===== */
.admin-card {
  background:var(--bg-card); border-radius:var(--radius);
  border:1px solid var(--border); padding:20px;
  margin-bottom:20px; box-shadow:var(--shadow);
}
.admin-card-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:16px;
}
.admin-card-title { font-size:16px; font-weight:600; }

/* ===== Stat Cards ===== */
.stat-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:20px; margin-bottom:24px;
}
.stat-card {
  background:var(--bg-card); border-radius:var(--radius);
  border:1px solid var(--border); padding:24px;
  box-shadow:var(--shadow); transition:transform .2s;
}
.stat-card:hover { transform:translateY(-2px); }
.stat-card .stat-icon {
  width:48px; height:48px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; color:#fff; margin-bottom:12px;
}
.stat-card .stat-value { font-size:28px; font-weight:700; }
.stat-card .stat-label { font-size:13px; color:var(--text-muted); margin-top:4px; }

/* ===== Admin Table ===== */
.admin-table {
  width:100%; border-collapse:collapse; font-size:14px;
}
.admin-table th {
  text-align:left; padding:12px 16px;
  border-bottom:2px solid var(--border);
  font-weight:600; color:var(--text-muted); font-size:13px;
}
.admin-table td {
  padding:12px 16px; border-bottom:1px solid var(--border);
}
.admin-table tr:hover td { background:rgba(0,0,0,.02); }
.admin-table .actions { display:flex; gap:8px; }
.admin-table .actions a, .admin-table .actions button {
  font-size:12px; padding:4px 10px; border-radius:4px;
  border:none; cursor:pointer; transition:all .2s;
}

/* ===== Admin Buttons ===== */
.btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 18px; border-radius:var(--radius-sm);
  font-size:14px; font-weight:500; cursor:pointer;
  border:none; transition:all .2s;
}
.btn-primary { background:var(--primary); color:#fff; }
.btn-primary:hover { opacity:.9; }
.btn-secondary { background:var(--bg); color:var(--text); border:1px solid var(--border); }
.btn-secondary:hover { border-color:var(--primary); color:var(--primary); }
.btn-danger { background:#e74c3c; color:#fff; }
.btn-danger:hover { opacity:.9; }
.btn-sm { padding:4px 10px; font-size:12px; }
.btn-edit { background:#e8f4fd; color:#3498db; }
.btn-edit:hover { background:#d0e9fb; }
.btn-del { background:#fce8e8; color:#e74c3c; }
.btn-del:hover { background:#f8d0d0; }
.btn-warning { background:#fff3cd; color:#856404; border:1px solid #ffeaa7; }
.btn-warning:hover { background:#ffeba0; }

/* ===== Alerts ===== */
.alert { padding:12px 16px; border-radius:var(--radius); margin-bottom:16px; font-size:14px; display:flex; align-items:center; gap:8px; }
.alert-error { background:#fce8e8; color:#e74c3c; border:1px solid #f8d0d0; }
.alert-success { background:#e8f8e8; color:#27ae60; border:1px solid #d0eed0; }

/* ===== Admin Form ===== */
.form-group { margin-bottom:16px; }
.form-group label {
  display:block; font-size:13px; font-weight:500;
  margin-bottom:6px; color:var(--text);
}
.form-group label .req { color:var(--primary); }
.form-control {
  width:100%; padding:8px 12px;
  border:1px solid var(--border); border-radius:var(--radius-sm);
  font-size:14px; background:var(--bg-card); color:var(--text);
  outline:none; transition:border-color .2s;
}
.form-control:focus { border-color:var(--primary); }
textarea.form-control { min-height:80px; resize:vertical; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-actions { display:flex; gap:8px; margin-top:20px; }

/* ===== Badge ===== */
.badge {
  display:inline-block; padding:2px 8px;
  border-radius:10px; font-size:11px; font-weight:500;
}
.badge-active { background:#e8f8e8; color:#27ae60; }
.badge-inactive { background:#fce8e8; color:#e74c3c; }
.badge-parent { background:#f0e9fb; color:#8618db; }

/* ===== Modal ===== */
.modal-overlay {
  position:fixed; inset:0; z-index:300;
  background:rgba(0,0,0,.5);
  display:none; align-items:center; justify-content:center;
}
.modal-overlay.show { display:flex; }
.modal {
  background:var(--bg-card); border-radius:var(--radius-lg);
  width:90%; max-width:560px; max-height:90vh; overflow-y:auto;
  box-shadow:0 20px 60px rgba(0,0,0,.2);
}
.modal-header {
  padding:16px 24px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
}
.modal-header h3 { font-size:18px; font-weight:600; }
.modal-close { font-size:22px; cursor:pointer; color:var(--text-muted); }
.modal-body { padding:24px; }

/* ===== Login Page ===== */
.login-page {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:var(--gradient-purple); background-size:200% 200%;
  animation:gradientShift 8s ease infinite;
}
.login-card {
  background:var(--bg-card); border-radius:var(--radius-lg);
  padding:40px; width:90%; max-width:400px;
  box-shadow:0 20px 60px rgba(0,0,0,.3);
}
.login-card h1 {
  text-align:center; font-size:24px; margin-bottom:8px;
  background:var(--gradient-purple);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.login-card .subtitle { text-align:center; font-size:13px; color:var(--text-muted); margin-bottom:24px; }
.login-error { color:var(--primary); font-size:13px; text-align:center; margin-bottom:16px; }
.login-hint { text-align:center; font-size:12px; color:var(--text-light); margin-top:16px; }

/* ===== Admin Responsive ===== */
@media (max-width: 768px) {
  .admin-sidebar { transform:translateX(-100%); }
  .admin-main { margin-left:0; }
  .form-row { grid-template-columns:1fr; }
  .stat-grid { grid-template-columns:1fr; }
}

/* ========================================
   SUBCATEGORY TABS (渗透工具 等父级分类)
   ======================================== */
.subcat-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
  align-items: center;
}
.subcat-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  transition: color .2s, background .25s, border-color .2s, transform .15s;
  white-space: nowrap;
}
.subcat-tab:hover {
  color: var(--primary);
  border-color: var(--primary);
  transform: translateY(-1px);
}
.subcat-tab.active {
  color: #fff;
  background: var(--brand-gradient);
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(134,24,219,.25);
}
.sub-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: rgba(0,0,0,.08);
  font-size: 11px;
  font-weight: 600;
}
.subcat-tab.active .sub-count {
  background: rgba(255,255,255,.25);
  color: #fff;
}

/* Light fade/slide when switching subcategory tabs (no layout cost) */
.subcat-grid.tab-switching .link-card {
  animation: tabFade .35s ease both;
}
@keyframes tabFade {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ===== Search page ===== */
.search-page-head {
  margin: 8px 0 20px;
}
.search-page-head h1 { font-size: 22px; margin-bottom: 6px; }
.search-page-head .q { color: var(--primary); }
.search-result-meta { color: var(--text-muted); font-size: 14px; margin-bottom: 16px; }

/* ===== 404 Page ===== */
.notfound {
  text-align: center;
  padding: 80px 20px;
}
.notfound .code {
  font-size: 96px;
  font-weight: 800;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}
.notfound h2 { font-size: 22px; margin: 12px 0; }
.notfound p { color: var(--text-muted); margin-bottom: 24px; }

/* ===== Font Awesome 6 compatibility shim =====
   The site was originally built with FA 4.7 class names (fa fa-*). After
   upgrading to FA 6 we keep those class names working by mapping `.fa` to the
   Free solid font. Brand icons (e.g. github) are overridden to the Brands font. */
.fa, .fas, .fa-solid { font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; font-style: normal; }
.fa-brands, .fab { font-family: "Font Awesome 6 Brands" !important; font-weight: 400 !important; font-style: normal; }
.fa-github, .fa-gitlab, .fa-docker, .fa-linux, .fa-ubuntu, .fa-windows,
.fa-apple, .fa-twitter, .fa-weibo, .fa-baidu, .fa-google, .fa-discord,
.fa-telegram, .fa-youtube, .fa-stack-overflow, .fa-npm, .fa-python,
.fa-java, .fa-html5, .fa-css3, .fa-js, .fa-react, .fa-vuejs, .fa-node,
.fa-cloudflare, .fa-redhat {
  font-family: "Font Awesome 6 Brands" !important; font-weight: 400 !important; font-style: normal;
}

/* ===== Admin icon picker ===== */
.icon-picker-row { display:flex; align-items:center; gap:12px; }
.icon-preview {
  width:48px; height:48px; border-radius:10px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--brand-c1, #8618db), var(--brand-c2, #4515dd));
  color:#fff; font-size:22px;
}
.icon-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(78px, 1fr));
  gap:8px; max-height:360px; overflow-y:auto; padding:4px;
}
.icon-opt {
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:10px 4px; border:1px solid var(--border, #e5e7eb); border-radius:10px;
  background:#fff; cursor:pointer; transition:all .15s ease; color:var(--text, #333);
}
.icon-opt:hover { border-color:var(--brand-c1, #8618db); background:#f7f0ff; transform:translateY(-2px); }
.icon-opt.selected { border-color:var(--brand-c1, #8618db); background:#f0e9fb; box-shadow:0 0 0 2px rgba(134,24,219,.25); }
.icon-opt i { font-size:20px; }
.icon-opt span { font-size:10px; color:var(--text-muted, #888); word-break:break-all; text-align:center; }