/* 幻兽帕鲁图鉴 palworldzh.com —— 浅色游戏数据库主题
   参考 paldb.cn / op.gg 的信息架构 + 浅色清爽风格：白底 + 帕鲁橙主色 + 属性色标签。
   外部样式，全站共用，无内联。 */

:root {
  --bg: #f4f5f8;
  --bg-soft: #eef0f5;
  --card: #ffffff;
  --card-2: #f7f8fb;
  --line: #e3e7ef;
  --line-soft: #e9ecf2;
  --text: #232833;
  --text-soft: #5d6575;
  --muted: #8a93a5;
  --accent: #f0850c;
  --accent-2: #ff9f1c;
  --accent-deep: #d97706;
  --accent-soft: rgba(240, 133, 12, .10);
  --accent-line: rgba(240, 133, 12, .32);
  --link: #2e6fd8;
  --danger: #d64545;
  --ok: #2e9e5b;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 2px 10px rgba(28, 34, 50, .07);
  --shadow-hover: 0 8px 22px rgba(28, 34, 50, .12);
  --sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, -apple-system, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  background: var(--bg);
  background-image:
    radial-gradient(900px 480px at 12% -8%, rgba(240, 133, 12, .05) 0, transparent 60%),
    radial-gradient(800px 500px at 95% 4%, rgba(46, 111, 216, .04) 0, transparent 55%);
  color: var(--text);
  line-height: 1.75;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: 1240px; margin: 0 auto; padding: 0 20px; }

::selection { background: rgba(240, 133, 12, .25); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #ccd2de; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #b3bccd; }

/* ---------- 页头 ---------- */
.site-header {
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
}
.header-inner { display: flex; align-items: center; gap: 18px; padding: 10px 20px; max-width: 1120px; margin: 0 auto; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); font-size: 19px; font-weight: 700; letter-spacing: .5px; white-space: nowrap; }
.brand:hover { text-decoration: none; }
.brand-mark { display: inline-flex; align-items: center; line-height: 1; }
.brand-mark img { display: block; }
.brand small { display: block; font-size: 10.5px; font-weight: 400; letter-spacing: 2.5px; color: var(--muted); font-family: var(--sans); }

.main-nav { margin-left: auto; display: flex; gap: 2px; flex-wrap: wrap; justify-content: flex-end; }
.main-nav a {
  color: var(--text-soft); padding: 7px 11px; border-radius: var(--radius-sm); font-size: 14px;
  transition: color .15s, background .15s;
}
.main-nav a:hover { color: var(--text); background: var(--bg-soft); text-decoration: none; }
.main-nav a.active { color: var(--accent-deep); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); font-weight: 600; }
.nav-toggle { display: none; background: none; border: 0; color: var(--text); font-size: 22px; cursor: pointer; margin-left: auto; }

/* ---------- 工具条（第二行导航） ---------- */
.tool-bar {
  background: rgba(255, 255, 255, .92);
  border-bottom: 1px solid var(--line-soft);
  position: sticky; top: 57px; z-index: 40;
}
.tool-bar-inner { display: flex; align-items: center; gap: 12px; padding: 6px 20px; max-width: 1120px; margin: 0 auto; }
.tool-bar-label {
  font-size: 11px; color: var(--accent-deep); font-weight: 700; letter-spacing: 2px;
  background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 5px; padding: 2px 9px;
  white-space: nowrap;
}
.tool-nav { display: flex; gap: 2px; flex-wrap: wrap; }
.tool-nav a { font-size: 13px; color: var(--text-soft); padding: 4px 11px; border-radius: 5px; }
.tool-nav a:hover { background: var(--accent-soft); color: var(--accent-deep); text-decoration: none; }
.tool-nav a.active { background: var(--accent); color: #fff; font-weight: 600; }

/* ---------- 首页主视觉 ---------- */
.hero {
  background:
    radial-gradient(720px 340px at 50% -60%, rgba(240, 133, 12, .14) 0, transparent 65%),
    linear-gradient(180deg, #fdfbf7 0%, #f4f5f8 100%);
  border-bottom: 1px solid var(--line-soft);
  padding: 56px 20px 48px;
  text-align: center;
}
.hero h1 { font-size: 40px; letter-spacing: 2px; margin-bottom: 14px; color: var(--text); }
.hero h1 .accent { color: var(--accent-deep); }
.hero p { max-width: 720px; margin: 0 auto 24px; color: var(--text-soft); font-size: 16px; }
.hero-tags { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 30px; }
.hero-tags span { background: #fff; border: 1px solid var(--line); padding: 4px 14px; border-radius: 999px; font-size: 13px; color: var(--text-soft); }
.hero-cta { display: inline-block; background: linear-gradient(135deg, var(--accent-2), var(--accent-deep)); color: #fff; font-weight: 700; font-size: 15px; padding: 12px 30px; border-radius: 999px; box-shadow: 0 6px 20px rgba(240, 133, 12, .28); }
.hero-cta:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 8px 26px rgba(240, 133, 12, .36); }

/* 统计条 */
.hero-stats { display: flex; justify-content: center; flex-wrap: wrap; gap: 0; max-width: 860px; margin: 34px auto 0; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; overflow: hidden; box-shadow: var(--shadow); }
.stat-item { flex: 1 1 130px; padding: 18px 12px; text-align: center; border-left: 1px solid var(--line-soft); }
.stat-item:first-child { border-left: 0; }
.stat-num { font-size: 30px; font-weight: 800; color: var(--accent-deep); line-height: 1.2; letter-spacing: .5px; }
.stat-label { font-size: 12.5px; color: var(--muted); margin-top: 4px; }

/* ---------- 板块 ---------- */
.section { padding: 36px 0; }
.section h2 {
  font-size: 23px; color: var(--text);
  border-left: 4px solid var(--accent); padding-left: 13px; margin-bottom: 16px;
  letter-spacing: .5px;
}
.section h3 { font-size: 18px; color: var(--text); margin: 20px 0 8px; }
.section p { margin-bottom: 10px; }
.page-title { font-size: 27px; color: var(--text); margin-bottom: 10px; }
.page-title-xl { font-size: 31px; color: var(--text); margin-bottom: 12px; }
.section-subtitle { font-size: 27px; color: var(--text); margin-bottom: 6px; }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 18px; margin-bottom: 14px;
}
.card h3 { margin-top: 0; }

/* 首页栏目卡片 */
.column-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 14px; }
.column-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; box-shadow: var(--shadow); display: block; color: var(--text);
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.column-card:hover { transform: translateY(-3px); border-color: var(--accent-line); box-shadow: var(--shadow-hover); text-decoration: none; }
.column-card .cc-icon {
  font-size: 24px; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 12px; margin-bottom: 10px;
}
.column-card h3 { font-size: 16.5px; color: var(--text); margin-bottom: 6px; }
.column-card p { font-size: 13px; color: var(--text-soft); line-height: 1.65; }

/* 快捷工具入口（首页） */
.quick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.quick-card {
  display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 12px 14px; color: var(--text); font-size: 14px; font-weight: 600;
  transition: border-color .15s, background .15s;
}
.quick-card .qc-ico { font-size: 19px; }
.quick-card:hover { border-color: var(--accent-line); background: var(--card-2); text-decoration: none; }

/* ---------- 帕鲁卡片/图鉴 ---------- */
.pal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 12px; }
.pal-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 10px; text-align: center; box-shadow: var(--shadow); display: block; color: var(--text);
  transition: transform .15s, border-color .15s;
}
.pal-card:hover { transform: translateY(-3px); border-color: var(--accent-line); text-decoration: none; }
.pal-card img { width: 72px; height: 72px; object-fit: contain; margin-bottom: 6px; }
.pal-card .pno { font-size: 11px; color: var(--muted); }
.pal-card .pname { font-size: 14px; font-weight: 600; color: var(--text); }
.pal-card .pelems { margin-top: 5px; display: flex; justify-content: center; gap: 4px; flex-wrap: wrap; }

.elem-badge {
  display: inline-block; font-size: 11px; color: #fff; border-radius: 5px;
  padding: 1px 8px; line-height: 1.6; font-weight: 600; letter-spacing: .5px;
}
.elem-neutral { background: #7d879c; }
.elem-fire { background: #ef6a3a; }
.elem-water { background: #3d8fe0; }
.elem-grass { background: #43a853; }
.elem-electric { background: #d9a410; color: #2a2100; }
.elem-ice { background: #3fb6c8; color: #04222a; }
.elem-ground { background: #b97f42; }
.elem-dark { background: #8568e0; }
.elem-dragon { background: #3f8fa0; }

/* ---------- 帕鲁详情 ---------- */
.pal-detail { display: grid; grid-template-columns: 260px 1fr; gap: 24px; align-items: start; }
.pal-portrait {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 16px; text-align: center; position: sticky; top: 120px;
}
.pal-portrait img { width: 100%; max-width: 210px; height: auto; }
.pal-portrait-name { font-size: 25px; color: var(--text); margin-top: 10px; font-weight: 700; }
.pal-portrait-sub { color: var(--muted); font-size: 13px; }
.pal-main h1 { font-size: 26px; color: var(--text); margin-bottom: 8px; }
.pal-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.tag {
  display: inline-block; font-size: 12px; padding: 2px 11px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card-2); color: var(--text-soft);
}

table.data-table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 10px 0 16px; }
table.data-table th, table.data-table td { border: 1px solid var(--line); padding: 7px 11px; text-align: left; }
table.data-table th { background: var(--card-2); color: var(--text); font-weight: 600; white-space: nowrap; }
table.data-table tr:nth-child(even) td { background: rgba(28, 34, 50, .02); }
.table-scroll { overflow-x: auto; }

.stat-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 14px; }
.stat-chip { border: 1px solid var(--line); background: var(--card-2); border-radius: var(--radius-sm); padding: 6px 12px; font-size: 13px; color: var(--text-soft); }
.stat-chip b { color: var(--accent-deep); }

/* 工作适配条 */
.work-bars { margin: 8px 0 14px; }
.work-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font-size: 13px; }
.work-bar .wb-name { width: 70px; color: var(--text-soft); flex-shrink: 0; }
.work-bar .wb-track { flex: 1; background: var(--bg-soft); border-radius: 999px; height: 14px; overflow: hidden; }
.work-bar .wb-fill { height: 100%; background: linear-gradient(90deg, var(--accent-deep), var(--accent-2)); border-radius: 999px; }
.work-bar .wb-lv { width: 20px; text-align: right; font-weight: 700; color: var(--accent-deep); }

/* ---------- 面包屑 ---------- */
.crumb { font-size: 13px; color: var(--muted); margin: 14px 0 4px; }
.crumb a { color: var(--link); }
.crumb span { color: var(--text-soft); }

/* ---------- 提示框 ---------- */
.note { background: rgba(240, 133, 12, .07); border-left: 4px solid var(--accent); padding: 12px 16px; border-radius: 6px; margin: 14px 0; font-size: 14.5px; color: var(--text-soft); }
.note-green { background: rgba(46, 158, 91, .07); border-left-color: var(--ok); }
.note-red { background: rgba(214, 69, 69, .07); border-left-color: var(--danger); }

/* ---------- 页脚 ---------- */
.site-footer {
  background: #1c212b; color: #9aa3b5; margin-top: 44px;
  padding: 28px 0 22px; font-size: 13px;
}
.footer-inner { max-width: 1120px; margin: 0 auto; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.site-footer a { color: #c6cdda; }
.site-footer a:hover { color: #fff; }

/* ---------- 图鉴筛选 ---------- */
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; align-items: center; }
.filters input[type="search"] {
  padding: 8px 13px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; font-size: 14px; width: 220px; font-family: var(--sans); color: var(--text);
}
.filters input[type="search"]:focus, .filters select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.filters select {
  padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; font-size: 13px; font-family: var(--sans); color: var(--text);
}
.filter-btn {
  border: 1px solid var(--line); background: #fff; border-radius: 999px;
  padding: 6px 15px; font-size: 13px; cursor: pointer; color: var(--text-soft);
  font-family: var(--sans); transition: all .15s;
}
.filter-btn:hover { border-color: var(--accent-line); color: var(--text); }
.filter-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }

/* ---------- 排行榜 ---------- */
.rank-list { counter-reset: rank; }
.rank-item {
  display: flex; align-items: center; gap: 14px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 8px;
  transition: border-color .15s;
}
.rank-item:hover { border-color: var(--accent-line); }
.rank-item::before {
  counter-increment: rank; content: counter(rank); font-size: 21px; font-weight: 800; color: var(--accent);
  width: 34px; text-align: center;
}
.rank-item img { width: 48px; height: 48px; object-fit: contain; }
.rank-item .ri-name { font-weight: 600; color: var(--text); font-size: 15px; }
.rank-item .ri-sub { font-size: 12.5px; color: var(--muted); }
.rank-item .ri-lv { margin-left: auto; font-size: 13px; color: var(--accent-deep); font-weight: 700; white-space: nowrap; }

/* ---------- FAQ ---------- */
.faq-item { margin-bottom: 12px; }
.faq-item details { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; }
.faq-item summary { cursor: pointer; font-weight: 600; color: var(--text); font-size: 15.5px; }
.faq-item details[open] summary { margin-bottom: 10px; color: var(--accent-deep); }

/* ---------- 工具/导航 ---------- */
.tool-links { display: flex; gap: 12px; flex-wrap: wrap; margin: 16px 0; }
.tool-links a {
  background: linear-gradient(135deg, var(--accent-2), var(--accent-deep)); color: #fff; font-weight: 600;
  padding: 9px 20px; border-radius: 999px; font-size: 14px;
}
.tool-links a:hover { text-decoration: none; filter: brightness(1.05); }
.center-block { text-align: center; padding: 60px 0; }
.center-links { justify-content: center; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.item-cat { margin-bottom: 26px; }
.item-cat h2 { font-size: 19px; color: var(--text); margin-bottom: 8px; }
.empty-msg { display: none; text-align: center; padding: 30px 0; color: var(--muted); }
.small-muted { color: var(--muted); font-size: 12px; }

/* ---------- 工具页表单 ---------- */
.calc-controls { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 14px; }
.calc-field label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.calc-field select, .calc-field input {
  padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; font-size: 14px; font-family: var(--sans); color: var(--text);
}
.calc-field select:focus, .calc-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.calc-field select { min-width: 180px; }
.calc-result { margin-top: 16px; font-size: 15px; }
.calc-child { font-size: 18px; color: var(--accent-deep); font-weight: 700; }
.calc-muted { color: var(--muted); font-size: 13px; }
.calc-emph { font-size: 24px; font-weight: 800; color: var(--accent-deep); }
.calc-hint { color: var(--muted); }
.filters-tight { margin-top: -6px; }

/* ---------- 地图导览页 ---------- */
.map-figure { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; margin: 14px 0; }
.map-figure svg { width: 100%; height: auto; display: block; }

/* 交互地图 */
.map-toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.map-toolbar input[type="search"] { padding: 8px 13px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; font-size: 14px; width: 220px; font-family: var(--sans); color: var(--text); }
.map-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.map-filters .filter-btn { display: inline-flex; align-items: center; gap: 5px; }
.map-filters .filter-btn input { position: absolute; opacity: 0; pointer-events: none; }
.map-wrap { position: relative; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; }
.map-wrap svg { display: block; width: 100%; height: auto; }
#mapPins { position: absolute; inset: 0; pointer-events: none; }
.pin { position: absolute; transform: translate(-50%, -50%); pointer-events: auto; display: inline-flex; align-items: center; gap: 4px; background: rgba(255, 255, 255, .96); border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px 3px 6px; font-size: 11.5px; color: var(--text); cursor: pointer; box-shadow: 0 2px 8px rgba(28, 34, 50, .16); font-family: var(--sans); z-index: 2; transition: transform .12s, box-shadow .12s; white-space: nowrap; }
.pin:hover { transform: translate(-50%, -50%) scale(1.06); box-shadow: 0 4px 14px rgba(28, 34, 50, .24); z-index: 3; }
.pin-ico { font-size: 13px; line-height: 1; }
.pin-tower { border-color: rgba(214, 69, 69, .45); }
.pin-legend { border-color: rgba(240, 133, 12, .5); }
.pin-zone { border-color: rgba(61, 143, 224, .45); }
.pin-res { border-color: rgba(138, 109, 59, .45); }
.pin-egg { border-color: rgba(133, 104, 224, .45); }
.map-popup { position: absolute; width: 250px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: 0 10px 30px rgba(28, 34, 50, .25); padding: 12px 14px; font-size: 13px; z-index: 10; }
.popup-title { font-weight: 700; color: var(--text); margin-bottom: 6px; padding-right: 18px; }
.popup-body { color: var(--text-soft); margin-bottom: 8px; }
.popup-link { display: inline-block; font-weight: 700; color: var(--accent-deep); }
.popup-close { position: absolute; top: 6px; right: 8px; border: 0; background: none; font-size: 17px; line-height: 1; color: var(--muted); cursor: pointer; }
.popup-close:hover { color: var(--text); }
.map-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 10px 0 0; font-size: 12.5px; color: var(--text-soft); }
.map-legend span { display: inline-flex; align-items: center; gap: 5px; }
.map-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.map-legend .pin-dot-tower { background: #d64545; }
.map-legend .pin-dot-legend { background: #d97706; }
.map-legend .pin-dot-zone { background: #3d8fe0; }
.map-legend .pin-dot-res { background: #8a6d3b; }
.map-legend .pin-dot-egg { background: #8568e0; }
.map-legend .li-1 { background: #cfe8c2; }
.map-legend .li-2 { background: #e4ecd0; }
.map-legend .li-3 { background: #bcd9a6; }
.map-legend .li-4 { background: #ecd9a8; }
.map-legend .li-5 { background: #e8c2a8; }
.map-legend .li-6 { background: #d3e5f0; }
.map-legend .li-7 { background: #f7e3b0; }
.map-legend .li-8 { background: #c9d8b8; }
.zone-card { display: grid; grid-template-columns: 150px 1fr; gap: 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 10px; }
.zone-card .zc-name { font-weight: 700; color: var(--text); }
.zone-card .zc-meta { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.zone-card .zc-body { font-size: 13.5px; color: var(--text-soft); }

/* ---------- 科技树图页 ---------- */
.tree-controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.tree-controls input[type="search"] { padding: 8px 13px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; font-size: 14px; width: 240px; font-family: var(--sans); color: var(--text); }
.tree-controls select { padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; font-size: 13px; font-family: var(--sans); color: var(--text); }
.tree-controls .boss-toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px; color: var(--text-soft); border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 6px 15px; }
.tree-controls .boss-toggle input { accent-color: var(--accent); cursor: pointer; }
.tree-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.tree-chains { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; align-items: center; }
.tree-chains-title { font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: 1px; }
.chain-chip { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 5px 14px; font-size: 12.5px; color: var(--text-soft); cursor: pointer; font-family: var(--sans); transition: all .15s; }
.chain-chip:hover { border-color: var(--accent-line); color: var(--text); }
.chain-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.req-chip { border: 0; background: var(--accent-soft); color: var(--accent-deep); border-radius: 4px; padding: 1px 7px; font-size: 12px; cursor: pointer; font-family: var(--sans); font-weight: 600; }
.req-chip:hover { background: var(--accent); color: #fff; }
.tree-node { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; box-shadow: var(--shadow); }
.tree-node .tn-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.tree-node .tn-name { font-weight: 700; color: var(--text); font-size: 14.5px; }
.tree-node .tn-lv { background: var(--accent-soft); color: var(--accent-deep); border: 1px solid var(--accent-line); font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.tree-node .tn-lv.tn-boss { background: var(--bg-soft); color: var(--text-soft); border-color: var(--line); }
.tree-node .tn-cost { font-size: 11.5px; color: var(--muted); }
.tree-node .tn-desc { font-size: 12.5px; color: var(--text-soft); margin-bottom: 6px; }
.tree-node .tn-unlocks { font-size: 12px; color: var(--text-soft); }
.tree-node .tn-unlocks b { color: var(--ok); font-weight: 600; }
.tree-node .tn-req { font-size: 12px; color: var(--muted); }
.tree-node.boss { border-color: var(--accent-line); background: linear-gradient(180deg, #fff, rgba(240, 133, 12, .04)); }
.tree-node.in-chain { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft), var(--shadow); }
.tree-node.flash { animation: treeflash 1.2s ease; }
@keyframes treeflash { 0%, 60% { background: var(--accent-soft); } 100% { background: var(--card); } }
.tree-empty { display: none; text-align: center; padding: 40px 0; color: var(--muted); }

/* ---------- 响应式 ---------- */
@media (max-width: 900px) {
  .pal-detail { grid-template-columns: 1fr; }
  .pal-portrait { position: static; display: flex; align-items: center; gap: 16px; text-align: left; }
  .pal-portrait img { max-width: 110px; }
  .pal-portrait-name { margin-top: 0; }
  .two-col { grid-template-columns: 1fr; }
  .zone-card { grid-template-columns: 1fr; gap: 6px; }
}

@media (max-width: 820px) {
  .nav-toggle { display: block; }
  .main-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; flex-direction: column; padding: 10px 16px;
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    box-shadow: 0 14px 30px rgba(28, 34, 50, .12);
  }
  .main-nav.open { display: flex; }
  .hero h1 { font-size: 29px; }
  .hero { padding: 40px 20px 36px; }
  .filters input[type="search"] { width: 100%; }
  .stat-num { font-size: 24px; }
}

/* ---------- 打印 ---------- */
@media print {
  .site-header, .site-footer, .nav-toggle, .tool-bar, .hero-cta { display: none; }
  body { background: #fff; }
  .card, .column-card, .pal-card, .rank-item, .faq-item details, .tree-node { background: #fff; border-color: #ccc; box-shadow: none; }
  table.data-table th { background: #eee; }
}

/* ---------- 最新资讯页 ---------- */
.news-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px 24px; margin-bottom: 18px; }
.news-meta { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.news-date { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.news-tag { font-size: 11.5px; font-weight: 700; color: var(--accent-deep); background: var(--accent-soft); border: 1px solid var(--accent-line); padding: 2px 10px; border-radius: 999px; }
.news-title { font-size: 19px; font-weight: 800; color: var(--text); margin-bottom: 8px; line-height: 1.45; }
.news-summary { font-size: 14px; color: var(--text-soft); line-height: 1.7; margin-bottom: 10px; }
.news-body { font-size: 14px; color: var(--text); line-height: 1.8; }
.news-body p { margin-bottom: 10px; }
.news-note { background: var(--accent-soft); border: 1px dashed var(--accent-line); border-radius: var(--radius-sm); padding: 14px 18px; font-size: 13px; color: var(--text-soft); margin-top: 8px; }
@media (max-width: 640px) { .news-card { padding: 16px 16px; } .news-title { font-size: 16.5px; } }

/* ---------- 图鉴属性分区 ---------- */
.elem-anchor-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.elem-anchor { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--text); text-decoration: none; transition: all .15s; }
.elem-anchor:hover { border-color: var(--ec, var(--accent)); color: var(--ec, var(--accent)); transform: translateY(-1px); }
.elem-anchor b { font-size: 11px; color: var(--muted); font-weight: 600; }
.ea-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ec, #999); display: inline-block; }
.elem-section { scroll-margin-top: 90px; margin-bottom: 26px; }
.elem-section-title { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 800; color: var(--text); padding: 10px 0 12px; border-bottom: 2px solid var(--line); margin-bottom: 14px; }
.elem-section-title .elem-emoji { font-size: 18px; }
.elem-section-title .elem-count { font-size: 12px; font-weight: 600; color: var(--muted); background: var(--bg-soft); padding: 2px 10px; border-radius: 999px; }

/* ---------- 科技树图（游戏内面板风格） ---------- */
.tech-panel { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--card); box-shadow: var(--shadow); }
.tech-panel-head { display: flex; align-items: baseline; gap: 10px; padding: 14px 18px; background: linear-gradient(135deg, #2b2f36, #1d2126); color: #fff; }
.tech-panel-title { font-size: 16px; font-weight: 800; letter-spacing: 1px; }
.tech-panel-sub { font-size: 10.5px; color: rgba(255,255,255,.55); letter-spacing: 3px; }
.tech-panel-count { margin-left: auto; font-size: 12.5px; color: rgba(255,255,255,.75); }
.tech-panel-body { display: flex; min-height: 560px; }
.tech-level-rail { width: 44px; flex-shrink: 0; background: #f0f1f4; border-right: 1px solid var(--line); overflow-y: auto; max-height: 72vh; display: flex; flex-direction: column; padding: 8px 0; }
.rail-lv { border: 0; background: transparent; font-size: 11px; font-weight: 700; color: var(--muted); padding: 5px 0; cursor: pointer; border-left: 3px solid transparent; font-family: var(--sans); }
.rail-lv:hover { color: var(--accent); border-left-color: var(--accent); background: rgba(240,133,12,.06); }
.tech-content { flex: 1; padding: 16px 18px; min-width: 0; }
.tech-tracks { display: flex; flex-direction: column; gap: 10px; }
.tech-track { display: flex; gap: 12px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; scroll-margin-top: 90px; }
.track-lv-label { width: 40px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--accent); color: #fff; border-radius: 8px; height: 40px; align-self: center; }
.track-lv-label b { font-size: 16px; line-height: 1; }
.track-lv-label span { font-size: 8.5px; letter-spacing: 1px; opacity: .85; }
.track-nodes { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; min-width: 0; }
.track-empty { font-size: 12.5px; color: var(--muted); padding: 10px 4px; }
.tree-node { display: flex; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; cursor: pointer; box-shadow: var(--shadow); width: calc(50% - 4px); min-width: 240px; transition: all .15s; }
.tree-node:hover { border-color: var(--accent); transform: translateY(-1px); }
.tree-node.boss { border-color: var(--accent-line); background: linear-gradient(180deg, #fff, rgba(240,133,12,.04)); }
.tree-node.in-chain { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft), var(--shadow); }
.tree-node.flash { animation: nodeFlash 1.2s ease; }
@keyframes nodeFlash { 0%,100% { box-shadow: var(--shadow); } 30%,60% { box-shadow: 0 0 0 3px var(--accent), var(--shadow); } }
.tn-icon { width: 42px; height: 42px; flex-shrink: 0; border-radius: 10px; background: var(--ic, #636e72); display: flex; align-items: center; justify-content: center; font-size: 21px; }
.tn-main { min-width: 0; }
.tn-head { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; flex-wrap: wrap; }
.tn-name { font-weight: 700; color: var(--text); font-size: 13.5px; }
.tn-lv { background: var(--accent-soft); color: var(--accent-deep); border: 1px solid var(--accent-line); font-size: 10.5px; font-weight: 700; padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.tn-lv.tn-boss { background: var(--bg-soft); color: var(--text-soft); border-color: var(--line); }
.tn-cost { font-size: 11px; color: var(--muted); margin-bottom: 3px; }
.tn-desc { font-size: 12px; color: var(--text-soft); margin-bottom: 4px; }
.tn-unlocks { font-size: 11.5px; color: var(--text-soft); }
.tn-unlocks b { color: var(--ok); font-weight: 600; }
.tn-req { font-size: 11.5px; color: var(--muted); }
.req-chip { border: 0; background: none; color: var(--accent); cursor: pointer; font-size: 11.5px; padding: 0; text-decoration: underline; font-family: var(--sans); }
@media (max-width: 860px) { .tech-panel-body { flex-direction: column; } .tech-level-rail { width: 100%; flex-direction: row; overflow-x: auto; max-height: none; border-right: 0; border-bottom: 1px solid var(--line); padding: 6px 8px; } .rail-lv { padding: 4px 9px; border-left: 0; border-bottom: 2px solid transparent; white-space: nowrap; } .rail-lv:hover { border-left-color: transparent; border-bottom-color: var(--accent); } .tree-node { width: 100%; min-width: 0; } }

/* ---------- 科技树示意图 ---------- */
.tech-demo-fig { margin: 0 0 18px; }
.tech-demo-fig img { width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow); }
.tech-demo-fig figcaption { font-size: 12px; color: var(--muted); text-align: center; margin-top: 8px; }

/* ---------- 资讯博客样式（单帖页 + 列表链接） ---------- */
.news-card-link { transition: all .15s; }
.news-card-link:hover { border-color: var(--accent); box-shadow: 0 4px 16px rgba(240, 133, 12, .12); transform: translateY(-1px); }
.news-title a { color: var(--text); text-decoration: none; }
.news-title a:hover { color: var(--accent); }
.news-more { display: inline-block; margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; }
.news-more:hover { text-decoration: underline; }
.news-post { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 30px 34px; }
.news-post-title { font-size: 24px; font-weight: 800; color: var(--text); margin: 10px 0 12px; line-height: 1.45; }
.news-post-lead { font-size: 15px; color: var(--text-soft); line-height: 1.8; border-left: 3px solid var(--accent); padding-left: 14px; margin-bottom: 18px; }
.news-back { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line); }
.news-back a { font-size: 13.5px; color: var(--accent); text-decoration: none; font-weight: 600; }
.news-back a:hover { text-decoration: underline; }
@media (max-width: 640px) { .news-post { padding: 20px 18px; } .news-post-title { font-size: 19px; } }

/* ---------- 图鉴目录页（武器/材料/建筑/被动） ---------- */
.catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.catalog-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; box-shadow: var(--shadow); transition: all .15s; }
.catalog-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.cc-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.cc-icon { font-size: 17px; }
.cc-name { font-weight: 700; color: var(--text); font-size: 14.5px; }
.cc-rarity { font-size: 11px; font-weight: 700; padding: 1px 9px; border-radius: 999px; white-space: nowrap; }
.r-常见 { background: #eef0f3; color: #5b6570; }
.r-少见 { background: #e4f0e6; color: #2e7d4f; }
.r-稀有 { background: #e3ecfa; color: #2b5fd9; }
.r-史诗 { background: #f3e8fb; color: #8b3fd4; }
.r-传说 { background: #fdeeda; color: #c7741c; }
.r-素材 { background: #eef0f3; color: #5b6570; }
.r-食材 { background: #fdeeda; color: #c7741c; }
.cc-desc { font-size: 12.5px; color: var(--text-soft); line-height: 1.65; margin-bottom: 6px; }
.cc-meta { font-size: 11.5px; color: var(--muted); }
.ps-holders { font-size: 11.5px; color: var(--ok); }
.catalog-section { margin-bottom: 24px; }
.ramp-card .ramp-drops { font-size: 11px; color: var(--accent-deep); margin-top: 4px; font-weight: 600; }
@media (max-width: 640px) { .catalog-grid { grid-template-columns: 1fr; } }

/* ===== 互动地图 ===== */
.map-wrap{background:#0c1520}
.map-pin{background:transparent;border:none}
.map-pin span{display:block;width:14px;height:14px;border-radius:50%;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.5)}
.map-pin{filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
.leaflet-container{font-family:inherit}
.leaflet-popup-content-wrapper{border-radius:10px}
.leaflet-popup-content{margin:12px 16px;font-size:14px;line-height:1.6}
.map-popup-title{font-size:15px;font-weight:700;margin-bottom:2px}
.map-popup-sub{font-size:12px;color:#667085;margin-bottom:6px}
.map-popup-link{display:inline-block;margin-top:4px;font-size:13px;color:#1f6feb}
.map-toolbar{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.map-toolbar input[type=search]{flex:1;min-width:200px}
.btn-sm{padding:6px 14px;border:1px solid #d0d5dd;border-radius:8px;background:#fff;cursor:pointer;font-size:14px}
.btn-sm:hover{background:#f2f4f7}
.map-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;font-size:13px;color:#475467;align-items:center}
.pin-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:middle}
.leaflet-control-layers{font-size:13px}
@media (max-width:640px){
  .map-wrap{height:65vh !important;min-height:380px !important}
  .map-legend{gap:10px;font-size:12px}
}

/* ===== 全站搜索覆盖层 ===== */
.header-search{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;padding:6px 10px;font-size:13px;color:#475467;cursor:pointer;margin-left:auto}
.header-search kbd{background:#f2f4f7;border:1px solid #e4e7ec;border-radius:4px;padding:1px 5px;font-size:11px;color:#667085}
.header-search:hover{background:#f9fafb}
.global-search{position:fixed;inset:0;z-index:1000;display:none}
.global-search.open{display:block}
.gs-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.45)}
.gs-panel{position:relative;max-width:560px;margin:12vh auto 0;background:#fff;border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.25);overflow:hidden}
.gs-input-row{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid #eef0f4}
.gs-ico{color:#98a2b3;flex-shrink:0}
.gs-input-row input{flex:1;border:none;outline:none;font-size:16px;padding:4px 0}
.gs-esc{border:1px solid #e4e7ec;border-radius:6px;background:#fff;padding:3px 8px;font-size:12px;color:#667085;cursor:pointer}
.gs-results{max-height:56vh;overflow-y:auto;padding:6px 0}
.gs-group{padding:8px 16px 4px;font-size:12px;color:#98a2b3;font-weight:600}
.gs-item{display:flex;align-items:baseline;gap:10px;padding:9px 16px;text-decoration:none;color:#1f2933}
.gs-item.active{background:#f2f6ff}
.gs-item-name{font-weight:600;color:#1f2933;white-space:nowrap}
.gs-item-desc{font-size:12px;color:#98a2b3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gs-empty{padding:28px 20px;text-align:center;color:#98a2b3;font-size:14px;line-height:1.9}
@media (max-width:640px){
  .gs-panel{margin:6vh 12px 0}
  .header-search span{display:none}
  .header-search{background:transparent;border:none;padding:4px}
}

/* ===== 首页紧凑 hero ===== */
.hero-compact{background:#f6f7f5;padding:36px 0 28px;border-bottom:1px solid #eef0f4}
.hero-compact h1{font-size:34px;margin:0 0 6px}
.hero-compact .hero-sub{color:#667085;font-size:15px;margin:0 0 18px}
.home-search{display:flex;gap:8px;max-width:640px;margin-bottom:22px}
.home-search input{flex:1;padding:12px 16px;border:1.5px solid #d0d5dd;border-radius:10px;font-size:16px;outline:none}
.home-search input:focus{border-color:#3b82f6}
.home-search-btn{padding:0 22px;background:#3b82f6;color:#fff;border:none;border-radius:10px;font-size:15px;font-weight:600;cursor:pointer}
.home-search-btn:hover{background:#2f6fe0}
.core-tools{margin-bottom:14px}
.core-tools-label{display:block;font-size:12px;color:#98a2b3;margin-bottom:8px;font-weight:600}
.core-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.core-item{display:flex;flex-direction:column;gap:2px;background:#fff;border:1px solid #e4e7ec;border-radius:10px;padding:12px 14px;text-decoration:none;color:#1f2933;transition:border-color .15s}
.core-item:hover{border-color:#3b82f6}
.ci-ico{font-size:20px}
.ci-name{font-weight:700;font-size:15px}
.ci-desc{font-size:12px;color:#667085;line-height:1.5}
.sub-tools{display:flex;flex-wrap:wrap;gap:8px}
.sub-item{display:inline-flex;align-items:center;gap:5px;background:#fff;border:1px solid #e4e7ec;border-radius:999px;padding:5px 12px;font-size:13px;color:#475467;text-decoration:none}
.sub-item:hover{border-color:#3b82f6;color:#1f6feb}
@media (max-width:900px){.core-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.core-grid{grid-template-columns:1fr 1fr}.hero-compact h1{font-size:26px}}

/* 首页紧凑资料卡 */
.column-grid-sm .column-card{padding:10px 14px}
.column-grid-sm .cc-icon{font-size:18px}
.column-grid-sm h3{font-size:15px;margin:4px 0}
.column-grid-sm p{font-size:12px;color:#667085;margin:0;line-height:1.55}

/* ===== 帕鲁图鉴工作筛选 ===== */
.filter-toggle{background:#fff;border:1px solid #d0d5dd;border-radius:8px;padding:7px 12px;font-size:13px;color:#475467;cursor:pointer}
.filter-toggle:hover{background:#f2f4f7}
.work-panel{margin:10px 0;padding:12px;border:1px solid #e4e7ec;border-radius:10px;background:#fafbfc;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.work-panel-label{font-size:12px;color:#98a2b3;margin-right:4px}
.work-chip{border:1px solid #d0d5dd;background:#fff;border-radius:999px;padding:5px 12px;font-size:13px;color:#475467;cursor:pointer;transition:all .15s}
.work-chip:hover{border-color:#3b82f6;color:#1f6feb}
.work-chip.on{background:#3b82f6;border-color:#3b82f6;color:#fff}

/* ===== 页脚版本信息 ===== */
.footer-ver{font-size:12px;color:#98a2b3;margin-top:2px}