/* ============================================================
   WorldObjects 路 Apple Liquid Glass 瑙嗚灞?V2
   渚濇嵁 emilkowalski/skills锛?   - apple-design 搂15 Typography锛氱郴缁熷瓧浣撱€侀殢瀛楀彿鍙樺寲鐨?tracking/leading銆佸眰绾ч潬瀛楅噸
   - apple-design 搂12 Materials锛氭潗鏂欏垎绾э紙缁撴瀯閲?浜や簰杞伙級銆佸ぇ琛ㄩ潰鏇村帤銆?     妯℃€佺敤閬僵+鑳屾櫙鍚庢帹銆乿ibrancy 璁╃幓鐠冧笂鐨勬枃瀛椾繚鎸佸姣?   - apple-design 搂7 Spatial consistency銆伮?6 璁捐鍏師鍒?   - emil-design-eng锛氬厠鍒躲€佺粏鑺傚鍚堛€佹寜鍘嬪繀鍙嶉
   V1 鐨勭幓鐠?鍦嗚/鑻规灉钃濅繚鐣欙紝閲嶅仛鎺掔増銆佺増寮忎笌灞傜骇銆?   ============================================================ */

:root {
  --bg: #000308;
  --text: #f5f5f7;
  --text-2: #a1a1aa;
  --text-3: #6e6e78;
  --accent: #8b5cf6;
  --accent-strong: #7c3aed;
  --accent-soft: rgba(139, 92, 246, 0.16);
  --accent-line: rgba(139, 92, 246, 0.6);
  --danger: #ff453a;
  --ok: #30d158;

  /* 鏉愭枡鍒嗙骇锛氱粨鏋勭敤"閲?锛屼氦浜掔敤"杞? */
  --material-heavy: rgba(10, 10, 14, 0.52);
  --material-medium: rgba(24, 24, 31, 0.55);
  --material-light: rgba(255, 255, 255, 0.07);
  --hairline: rgba(255, 255, 255, 0.1);
  --hairline-strong: rgba(255, 255, 255, 0.16);

  --glass-xl: blur(48px) saturate(190%);
  --glass-lg: blur(34px) saturate(185%);
  --glass-md: blur(22px) saturate(175%);
  --glass: var(--glass-lg);

  --radius-panel: 26px;
  --radius-card: 22px;
  --radius-btn: 980px;

  --shadow-panel: 0 40px 90px -30px rgba(0, 0, 0, 0.85);
  --shadow-card: 0 20px 44px -22px rgba(0, 0, 0, 0.75);
  --glow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(0, 0, 0, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.06);

  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue",
    "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-mono: "SF Mono", ui-monospace, "JetBrains Mono", "Cascadia Code", monospace;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
}

* { -webkit-tap-highlight-color: transparent; }

/* ---------- 鍩虹鎺掔増锛坅pple-design 搂15锛?---------- */
html { font-size: 15px; }

body {
  font-family: var(--font-sans) !important;
  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--text);
  background-color: var(--bg);
  background-image:
    radial-gradient(1100px 760px at 8% -14%, rgba(139, 92, 246, 0.20), transparent 60%),
    radial-gradient(980px 700px at 94% 4%, rgba(168, 85, 247, 0.15), transparent 62%),
    radial-gradient(900px 680px at 46% 120%, rgba(139, 92, 246, 0.12), transparent 62%),
    radial-gradient(720px 520px at 82% 96%, rgba(255, 105, 180, 0.09), transparent 66%);
  background-attachment: fixed;
  animation: glowDrift 34s ease-in-out infinite alternate;
  padding: 16px 20px 60px;
}

main {
  max-width: 1320px;
  margin: 0 auto;
  /* 鍙姩 transform / opacity锛氬悎鎴愬眰鍔ㄧ敾锛屼笉瑙﹀彂閲嶇粯锛坒ilter 杩囨浮浼氭瘡甯ч噸鏍呮牸鍖栨暣椤?鈫?鎶栧姩锛?*/
  transition:
    transform 200ms var(--ease-out),
    opacity 200ms var(--ease-out);
  will-change: transform, opacity;
}

/* 妯℃€佹墦寮€鏃惰儗鏅悗鎺紙apple-design锛歞im to focus锛宻eparate to keep flow锛?*/
body.has-overlay main {
  transform: scale(0.985);
  opacity: 0.55;
  pointer-events: none;
  /* 杩涘満鎱竴鐐圭紦鍑猴紙涓庡脊绐?320ms 瀵归綈锛夛紱閫€鍦虹敱涓婇潰鐨?200ms 缂撳叆璐熻矗 */
  transition:
    transform 320ms var(--ease-out),
    opacity 320ms var(--ease-out);
}

::selection { background: rgba(139, 92, 246, 0.4); color: #fff; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); background-clip: padding-box; border: 2px solid transparent; }
::-webkit-scrollbar-track { background: transparent; }

a { color: inherit; text-decoration: none; }

/* ---------- Hero锛堝搧鐗屽尯锛屽彧鍦ㄩ椤碉級 ---------- */
.hero { padding: 1.6rem 0.4rem 1.4rem; }
.hero-title {
  font-size: clamp(1.9rem, 4.2vw, 2.7rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.032em;           /* 澶у瓧鍙疯礋 tracking */
  color: #fff;
  margin-bottom: 0.45rem;
}
.hero-sub {
  font-size: 0.98rem;
  font-weight: 400;
  color: var(--text-2);
  letter-spacing: 0.005em;
}
.hero-sub .stat-num {
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ---------- 椤舵爮锛氭诞鍔ㄧ幓鐠冨伐鍏锋爮 ---------- */
header {
  position: sticky;
  top: 12px;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 0.7rem 1.3rem;
  margin: 0 0 1.5rem;
  background: var(--material-medium) !important;
  backdrop-filter: var(--glass-lg) !important;
  -webkit-backdrop-filter: var(--glass-lg) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: 22px !important;
  box-shadow: var(--glow), 0 26px 60px -28px rgba(0, 0, 0, 0.9) !important;
  flex-wrap: wrap;   /* 绐勫睆鍏佽鎹㈣锛涙闈㈠湪涓嬮潰鐨勫獟浣撴煡璇㈤噷寮哄埗涓€琛?*/
}
/* 婊氬姩杈圭紭锛氬唴瀹逛粠鐜荤拑涓嬫柟婊戣繃鏃剁殑鏌斿拰杩囨浮锛屾浛浠ｇ‖鍒嗗壊绾?*/
header::after {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: -16px;
  height: 16px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.38), transparent);
  filter: blur(6px);
  pointer-events: none;
  opacity: 0.9;
}

header h1 {
  font-family: var(--font-sans) !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.018em !important;
  color: #fff;
  white-space: nowrap;
  /* 涓よ锛氫笂琛岀増鏈彿锛屼笅琛屾洿鏂版椂闂达紱宸︿晶绱偣璺ㄤ袱琛屽瀭鐩村眳涓?*/
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 0.55rem;
  row-gap: 0;
}
header h1::before {
  grid-row: 1 / span 2;
  grid-column: 1;
}
header h1 .ver {
  grid-row: 1;
  grid-column: 2;
  display: block;
  line-height: 1.05;
}
header h1 .ver-time {
  grid-row: 2;
  grid-column: 2;
  display: block;
  margin-top: 2px;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.05;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
header h1::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: linear-gradient(135deg, var(--accent), #a78bfa);
  box-shadow: 0 0 14px rgba(139, 92, 246, 0.6);
  flex: 0 0 auto;
}

nav { display: flex; gap: 0.15rem; align-items: center; flex-wrap: wrap; }
nav a {
  border-radius: 980px !important;
  padding: 0.42rem 0.95rem !important;
  font-size: 0.88rem !important;
  font-weight: 500;
  color: var(--text-2);
  white-space: nowrap;
}
nav a:hover { background: rgba(255, 255, 255, 0.1) !important; color: #fff !important; }

/* 銆屽叧浜庛€嶄笌瀵艰埅閾炬帴鍚屽昂瀵稿悓褰㈡€侊紙楂樺害/瀹藉害/鍐呰竟璺?瀛楀彿涓€鑷达級 */
.about-btn, .auth-area button {
  border-radius: 980px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  backdrop-filter: none !important;
  font-size: 0.88rem !important;
  font-weight: 500;
  padding: 0.42rem 0.95rem !important;
  color: var(--text-2) !important;
  cursor: pointer;
  font-family: inherit;
}
.about-btn:hover, .auth-area button:hover { background: rgba(255, 255, 255, 0.1) !important; color: #fff !important; }

/* 椤舵爮鎻愮ず锛氬父椹诲湪銆屽叧浜庛€嶅彸渚?   闀挎彁绀猴紙灏ゅ叾寰?娉?闊╄瘧锛夊厑璁告崲鎴?2~3 琛岋紝缁濅笉鎶婅瑷€鎸夐挳绛夋尋鍒板埆鐨勮 */
.site-tip {
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--text-3);
  padding: 0.18rem 0.55rem;
  border-radius: 8px;
  flex: 1 1 auto;
  min-width: 12ch;
  max-width: min(58ch, 44vw);
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;      /* 鏈€澶?3 琛岋紝鍐嶅鐢ㄧ渷鐣ュ彿 */
  overflow: hidden;
  align-self: center;
}
/* 鍏跺畠鎺т欢淇濇寔鍘熶綅锛屼笉琚彁绀烘尋鍘?*/
header h1,
header nav,
header > .about-btn,
header > .lang-switch,
header > .auth-area { flex: 0 0 auto; white-space: nowrap; }
.site-tip.editable { cursor: pointer; }
.site-tip.editable:hover { color: #d8ccff; background: rgba(139, 92, 246, 0.14); }

/* 鎻愮ず绠＄悊寮圭獥 */
.tip-mgr { width: 640px !important; }
.tip-mgr-hint { font-size: 0.8rem; color: var(--text-3); margin: -0.3rem 0 0.8rem; }
.tip-mgr-form { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.tip-mgr-form input { flex: 1; }
.tip-mgr-list { display: flex; flex-direction: column; gap: 0.5rem; max-height: 40vh; overflow-y: auto; }
.tip-mgr-row {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--hairline); border-radius: 12px;
}
.tip-mgr-text { flex: 1; font-size: 0.86rem; color: var(--text-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 鎼滅储妗嗭細甯︽斁澶ч暅锛岃仛鐒︽湁鍏夋檿 ---------- */
.search-box { position: relative; flex: 1 1 320px; min-width: 240px; }
#search-input, .filter-modal-search, .folder-new input {
  width: 100%;
  background: var(--material-light) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: 980px !important;
  backdrop-filter: var(--glass-md) !important;
  padding: 0.66rem 1.15rem 0.66rem 2.55rem !important;
  color: var(--text) !important;
  font-family: var(--font-sans) !important;
  font-size: 0.92rem !important;
  letter-spacing: 0.002em;
}
#search-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238e8e98' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.2-3.2'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: 0.95rem center !important;
  background-size: 16px 16px !important;
}
#search-input:focus, .filter-modal-search:focus, .folder-new input:focus {
  outline: none !important;
  border-color: rgba(139, 92, 246, 0.7) !important;
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
}
#search-input::placeholder, .filter-modal-search::placeholder, .folder-new input::placeholder {
  color: var(--text-3) !important;
  letter-spacing: 0.005em;
}

/* 鎼滅储寤鸿 */
#search-suggest, .search-suggest {
  background: rgba(20, 20, 26, 0.78) !important;
  backdrop-filter: var(--glass-xl) !important;
  -webkit-backdrop-filter: var(--glass-xl) !important;
  border: 1px solid var(--hairline-strong) !important;
  border-radius: 18px !important;
  box-shadow: var(--shadow-panel), var(--glow) !important;
  overflow: hidden !important;
  padding: 6px !important;
}
.suggest-item {
  padding: 0.55rem 0.85rem !important;
  border-radius: 12px !important;
  font-size: 0.87rem !important;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.suggest-item:hover, .suggest-item.active { background: rgba(139, 92, 246, 0.22) !important; color: #fff; }

/* ---------- 鎺т欢鍖?---------- */
/* 涓庡師鐗堜竴鑷达細鎼滅储妗嗕笌绛涢€夋寜閽悓涓€琛岋紙鎼滅储鍦ㄥ乏銆佹寜閽湪鍙筹級锛岀┖闂翠笉瓒虫墠鎹㈣ */
.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-bottom: 1.5rem;
  align-items: center;
  padding: 0 0.2rem;
}
.filter-buttons { display: flex; gap: 0.45rem; flex-wrap: wrap; flex: 0 0 auto; }
.filter-btn, .sort-btn {
  border-radius: 980px !important;
  background: var(--material-light) !important;
  border: 1px solid var(--hairline) !important;
  backdrop-filter: var(--glass-md) !important;
  padding: 0.44rem 1rem !important;
  font-family: var(--font-sans) !important;
  font-size: 0.84rem !important;
  font-weight: 500;
  color: var(--text-2) !important;
}
.filter-btn:hover, .sort-btn:hover { background: rgba(255, 255, 255, 0.13) !important; color: #fff !important; }
.filter-btn.active, .sort-btn.active {
  background: var(--accent) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 8px 22px -6px rgba(139, 92, 246, 0.6) !important;
}

/* 宸查€夌瓫閫夐」锛氳壊鍧楃粺涓€锛屽瓧閲嶇◢閲嶏紙vibrancy锛?*/
.selected-tags { display: flex; gap: 0.45rem; flex-wrap: wrap; align-items: center; }
.selected-tag {
  border-radius: 980px !important;
  background: rgba(139, 92, 246, 0.16) !important;
  border: 1px solid rgba(139, 92, 246, 0.38) !important;
  color: #c9e2ff !important;
  font-size: 0.82rem !important;
  font-weight: 500;
  padding: 0.3rem 0.75rem !important;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.selected-tag .remove {
  cursor: pointer;
  opacity: 0.7;
  font-size: 0.95rem;
  line-height: 1;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.selected-tag .remove:hover { opacity: 1; background: rgba(255, 255, 255, 0.14); }
.clear-filters-btn {
  border-radius: 980px !important;
  background: rgba(255, 69, 58, 0.14) !important;
  border: 1px solid rgba(255, 69, 58, 0.4) !important;
  color: #ff8078 !important;
  font-size: 0.82rem !important;
  font-weight: 500;
  padding: 0.3rem 0.85rem !important;
}

/* ---------- 鍗＄墖缃戞牸 ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 16px;
  padding: 0.2rem;
}

.card {
  border-radius: var(--radius-card) !important;
  background: rgba(255, 255, 255, 0.045) !important;
  border: 1px solid var(--hairline) !important;
  box-shadow: var(--shadow-card) !important;
  overflow: hidden;
  position: relative;
  padding: 0;               /* 鍥剧墖鐩存帴璐村埌鍗＄墖杈圭紭锛屽幓鎺変笅鏂归偅鏉＄┖榛戣竟锛堟弿杈逛粛鐢?border + 鍦嗚缁欏嚭锛?*/
  line-height: 0;           /* 鍘绘帀琛屽唴 img 鐨勫熀绾跨紳闅?*/
}
.card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: 0 !important;
  background: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.055), transparent 62%);
  transition: transform 0.55s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .card:hover img { transform: scale(1.045); }
}
/* 鍗＄墖涓嶅仛浠讳綍闄勫姞鍏夋晥锛涙偓鍋滃彧淇濈暀鏋佽交鐨勬姮鍗囦笌鎻忚竟鍙樺寲 */
@media (hover: hover) and (pointer: fine) {
  .card:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, 0.16) !important;
    box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.85) !important;
  }
}

/* 鍗＄墖涓夊眰淇℃伅锛堝眰绾э細涓讳俊鎭寒銆佹淇℃伅鐏般€佸垎绫荤潃鑹诧級 */
.card-l1 {
  font-size: 0.7rem !important;
  font-weight: 500;
  letter-spacing: 0.015em;
  color: var(--text-3) !important;
  padding: 0.45rem 0.7rem 0 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-l2 {
  font-size: 0.84rem !important;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: #ededf2 !important;
  padding: 0.12rem 0.7rem 0 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-l3 {
  font-size: 0.7rem !important;
  font-weight: 500;
  color: var(--accent) !important;
  opacity: 0.9;
  padding: 0.1rem 0.7rem 0 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-info { display: none; }

.fav-btn, .folder-btn {
  border-radius: 980px !important;
  backdrop-filter: var(--glass-md) !important;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
}

/* ---------- 鍒嗛〉 ---------- */
.pagination { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; padding: 0.9rem 0.2rem; }
.pagination button, .page-size-select select {
  border-radius: 980px !important;
  background: var(--material-light) !important;
  border: 1px solid var(--hairline) !important;
  font-family: var(--font-sans) !important;
  font-size: 0.82rem !important;
  font-weight: 500;
  color: var(--text-2);
  min-width: 34px;
  min-height: 34px;
  padding: 0 0.7rem;
}
.pagination button:hover:not(:disabled) { background: rgba(255, 255, 255, 0.14) !important; color: #fff; }
.pagination button.current-page {
  background: var(--accent) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 6px 18px -6px rgba(139, 92, 246, 0.65) !important;
}
.pagination button:disabled { opacity: 0.32; cursor: default; }
.pagination > span { font-size: 0.8rem; color: var(--text-3); font-variant-numeric: tabular-nums; }

/* ---------- 寮圭獥锛堟ā鎬侊級锛氬ぇ闈㈡澘 + 閬僵 ---------- */
.modal-overlay, .filter-modal-overlay {
  background: rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}
.modal-content, .filter-modal-content {
  background: var(--material-medium) !important;
  backdrop-filter: var(--glass-xl) !important;
  -webkit-backdrop-filter: var(--glass-xl) !important;
  border: 1px solid var(--hairline-strong) !important;
  border-radius: 30px !important;
  box-shadow: 0 60px 130px -40px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
  padding: 1.5rem !important;
  max-height: 92vh;
}
.modal-content img, .modal-img-wrap img { border-radius: 20px !important; background: transparent; }

/* 璇︽儏闈㈡澘鎺掔増锛歭abel 寮辫壊 + 鍊奸珮瀵规瘮锛坴ibrancy锛?*/
.modal-info { font-size: 0.92rem; }
.modal-info > div, .modal-bottom > div {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  min-width: 0;
}
.modal-info strong, .modal-bottom strong {
  color: var(--text-3) !important;
  font-weight: 600 !important;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  flex: 0 0 auto;
  white-space: nowrap;
}
.modal-info span, .modal-bottom span { color: #ededf2; word-break: break-word; }
#modal-path, #modal-task { color: #fff; }

.path-box {
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--hairline) !important;
  padding: 0.6rem 0.8rem !important;
}
.path-text { font-family: var(--font-mono) !important; font-size: 0.78rem !important; color: var(--text-2) !important; }

.copy-btn, .btn-ghost, #modal-fav-btn {
  border-radius: 980px !important;
  background: var(--material-light) !important;
  border: 1px solid var(--hairline) !important;
  color: var(--text-2) !important;
  font-family: var(--font-sans) !important;
  font-size: 0.82rem !important;
  font-weight: 500;
  padding: 0.42rem 0.95rem !important;
}
.copy-btn:hover, .btn-ghost:hover, #modal-fav-btn:hover { background: rgba(255, 255, 255, 0.15) !important; color: #fff !important; }
#modal-fav-btn.faved {
  background: rgba(255, 69, 58, 0.18) !important;
  border-color: rgba(255, 69, 58, 0.5) !important;
  color: #ff8a84 !important;
}
.close-modal {
  color: var(--text-3) !important;
  font-size: 1.4rem !important;
  width: 32px;
  height: 32px;
  border-radius: 980px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  float: right;
}
.close-modal:hover { color: #fff !important; background: rgba(255, 255, 255, 0.12); }

/* ---------- 鏍囩鑺墖 / 绛涢€夐€夐」 ---------- */
.tag-chip {
  border-radius: 980px !important;
  background: rgba(139, 92, 246, 0.14) !important;
  border: 1px solid rgba(139, 92, 246, 0.36) !important;
  color: #cfe4ff !important;
  font-size: 0.8rem !important;
  font-weight: 500;
  padding: 0.22rem 0.7rem !important;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.tag-chip-x { cursor: pointer; opacity: 0.65; font-size: 0.9rem; }
.tag-chip-x:hover { opacity: 1; }

.filter-modal-content { width: 560px; }
.filter-modal-header h3 {
  font-family: var(--font-sans) !important;
  font-size: 1.02rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: #fff;
}
.filter-option-tag {
  border-radius: 980px !important;
  background: var(--material-light) !important;
  border: 1px solid var(--hairline) !important;
  color: var(--text-2) !important;
  font-size: 0.83rem !important;
  font-weight: 500;
  padding: 0.36rem 0.85rem !important;
  font-family: var(--font-sans) !important;
}
.filter-option-tag:hover { background: rgba(255, 255, 255, 0.14) !important; color: #fff !important; }
.filter-option-tag.selected {
  background: var(--accent) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 6px 16px -6px rgba(139, 92, 246, 0.6) !important;
}

/* ---------- 鍦板浘琛ㄦ牸 ---------- */
.map-cat-row { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.8rem; }
.map-cat-btn {
  border-radius: 980px !important;
  background: var(--material-light) !important;
  border: 1px solid var(--hairline) !important;
  color: var(--text-2) !important;
  font-size: 0.8rem !important;
  font-weight: 500;
  padding: 0.34rem 0.8rem !important;
  font-family: var(--font-sans) !important;
}
.map-cat-btn:hover { background: rgba(255, 255, 255, 0.14) !important; color: #fff !important; }
.map-cat-btn.active {
  background: var(--accent) !important;
  border-color: transparent !important;
  color: #fff !important;
}
.map-cat-count { opacity: 0.6 !important; margin-left: 0.15rem; font-variant-numeric: tabular-nums; }

.map-table-wrap {
  border-radius: 18px !important;
  border: 1px solid var(--hairline) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  backdrop-filter: var(--glass-md) !important;
}
.map-table {
  font-family: var(--font-sans) !important;
  font-size: 0.82rem !important;
}
.map-table thead th {
  background: rgba(16, 16, 22, 0.94) !important;
  color: var(--text-3) !important;
  font-weight: 600 !important;
  font-size: 0.74rem !important;
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--hairline-strong) !important;
  padding: 0.55rem 0.7rem !important;
}
.map-table tbody td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  padding: 0.5rem 0.7rem !important;
  color: var(--text-2);
  vertical-align: top;
}
.map-table tbody tr:hover td { background: rgba(255, 255, 255, 0.055) !important; color: #fff; }
.map-table tbody tr.selected td { background: rgba(139, 92, 246, 0.14) !important; }
.map-td-id { color: var(--text-3) !important; font-variant-numeric: tabular-nums; }
.map-td-name { color: #ededf2 !important; font-weight: 500; }
.map-td-cat { color: var(--accent) !important; }
.map-table tbody td.map-td-multi { white-space: normal; overflow: visible; text-overflow: clip; word-break: break-word; line-height: 1.45; }

/* ---------- 鏀惰棌澶癸細渚ф爮锛堢粨鏋勯噸鏉愭枡锛?---------- */
.fav-layout { display: flex; gap: 18px; align-items: flex-start; }
.folder-sidebar {
  border-radius: var(--radius-panel) !important;
  background: var(--material-heavy) !important;
  border: 1px solid var(--hairline) !important;
  backdrop-filter: var(--glass-xl) !important;
  box-shadow: var(--shadow-panel) !important;
  padding: 0.9rem !important;
}
.folder-item {
  border-radius: 14px !important;
  padding: 0.55rem 0.7rem !important;
  font-size: 0.87rem !important;
  font-weight: 500;
  color: var(--text-2);
}
.folder-item:hover { background: rgba(255, 255, 255, 0.07) !important; color: #fff; }
.folder-item.active { background: rgba(139, 92, 246, 0.18) !important; color: #fff; }
.folder-count { color: var(--text-3) !important; font-size: 0.76rem; font-variant-numeric: tabular-nums; }
.folder-new { margin-top: 0.6rem; display: flex; gap: 0.4rem; }
.folder-new input { flex: 1; padding: 0.5rem 0.9rem !important; font-size: 0.84rem !important; }
.folder-new button {
  border-radius: 980px !important;
  background: var(--material-light) !important;
  border: 1px solid var(--hairline) !important;
  color: var(--text-2);
  width: 34px;
  height: 34px;
}
.fav-main { flex: 1; min-width: 0; }
.fav-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* ---------- 鎺掕姒滐紙缁堟湯鍦板紡璁板綍琛岋細鏃犲渾瑙?/ 鏃犳姇褰?/ 缁嗙嚎鍒嗛殧锛?---------- */
.rank-list {
  display: flex; flex-direction: column; gap: 0;
  border-top: 1px solid var(--hairline);
}
.rank-item {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.55rem 0.9rem 0.55rem 1.1rem;
  border-radius: 0 !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--hairline) !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  position: relative;
  transition: transform 0.12s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.12s;
}
/* 鎸囧埌/鎸変笅锛氬乏渚ц惤涓嬪綋鍓嶄綅缃壊鏉?+ 鏁磋鍙崇Щ 6px锛堢粓鏈湴璁板綍琛岃鍒欙級 */
.rank-item::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.12s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (hover: hover) and (pointer: fine) {
  .rank-item:hover { background: rgba(255, 255, 255, 0.035) !important; transform: translateX(6px); }
  .rank-item:hover::before { transform: scaleY(1); }
}
.rank-item:active { transform: translateX(6px) scale(0.995); }

.rank-num {
  font-family: var(--font-sans) !important;
  font-size: 1.65rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text-3) !important;
  font-variant-numeric: tabular-nums;
  min-width: 2.4ch;
  text-align: right;
  font-stretch: 112%;
}
.rank-item:nth-child(1) .rank-num { color: var(--accent) !important; }
.rank-item:nth-child(2) .rank-num { color: #d7d7de !important; }
.rank-item:nth-child(3) .rank-num { color: #d99a5b !important; }

.rank-item { cursor: pointer; }
.rank-item img {
  width: 72px; height: 72px;
  object-fit: contain;
  border-radius: 0 !important;
  background: rgba(255, 255, 255, 0.04);
  flex-shrink: 0;
}

.rank-info { flex: 1; min-width: 0; }
.rank-path {
  font-family: var(--font-mono) !important;
  font-size: 0.77rem !important;
  color: #ededf2 !important;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rank-details {
  font-size: 0.75rem !important;
  color: var(--text-3) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 璁℃暟锛氬彇娑堣竟妗嗭紝鏀规垚鎺ヨ繎鏉＄洰楂樺害鐨勫ぇ瀛楋紝鏁伴噺鎹㈣壊锛堢传鑹诧級 */
.rank-count {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  white-space: nowrap;
}
.rank-count b {
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: -0.045em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  font-stretch: 112%;
}
.rank-count i {
  font-style: normal;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-3);
  letter-spacing: 0.08em;
}

/* 鎺掑簭鍒嗘 */
.sort-group { display: flex; gap: 0.4rem; padding: 0.2rem 0; }

/* 缁堟湯鍦扮湁鏍囷細// RANKINGS 鈹?鎺掕姒?*/
.ef-eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 0.1rem 0.2rem 0.7rem;
}
.ef-eyebrow .zh {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0;
  margin-left: 0.65rem;
  text-transform: none;
}

/* ---------- 娴眰 ---------- */
.about-card, .auth-panel {
  border-radius: 24px !important;
  background: var(--material-medium) !important;
  backdrop-filter: var(--glass-xl) !important;
  border: 1px solid var(--hairline-strong) !important;
  box-shadow: var(--shadow-panel) !important;
}

/* ---------- 绌虹姸鎬?---------- */
.card-grid > p, .rank-list > p {
  color: var(--text-3) !important;
  font-size: 0.9rem;
  padding: 3rem 0;
  text-align: center;
}

/* ---------- 鍑忓皯閫忔槑搴?/ 鏇撮珮瀵规瘮锛坅pple-design 搂14锛?---------- */
@media (prefers-reduced-transparency: reduce) {
  header, .modal-content, .filter-modal-content, .folder-sidebar, .rank-item,
  #search-suggest, .search-suggest, .map-table-wrap {
    background: rgba(16, 16, 20, 0.97) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}
@media (prefers-contrast: more) {
  :root { --hairline: rgba(255, 255, 255, 0.3); --hairline-strong: rgba(255, 255, 255, 0.45); }
  .card-l1, .card-l3, .rank-details { color: #c9c9d1 !important; }
}

/* ---------- 鍝嶅簲寮?---------- */
@media (max-width: 900px) {
  body { padding: 12px 12px 48px; }
  .fav-layout { flex-direction: column; }
  .folder-sidebar { width: 100%; }
  header { top: 8px; padding: 0.6rem 1rem !important; }
}
@media (max-width: 640px) {
  .hero-title { font-size: 1.75rem; }
  .card-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
  .modal-content { border-radius: 22px !important; padding: 1.1rem !important; }
}

/* ---------- 鎺掑簭寮圭獥 ---------- */
.sort-modal { width: 560px; }
.sort-list { display: flex; flex-direction: column; gap: 8px; }
.sort-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: flex-start;
  text-align: left;
  width: 100%;
  padding: 0.7rem 0.9rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--hairline);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s, border-color 0.2s, transform 0.2s var(--ease);
}
.sort-row:hover { background: rgba(255, 255, 255, 0.09); border-color: var(--hairline-strong); transform: translateX(2px); }
.sort-row.active {
  background: rgba(139, 92, 246, 0.18);
  border-color: rgba(139, 92, 246, 0.55);
  box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.25);
}
.sort-row-name {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.sort-row.active .sort-row-name { color: #fff; }
.sort-row-dir {
  font-style: normal;
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.02em;
}
.sort-row-desc { font-size: 0.78rem; color: var(--text-3); line-height: 1.5; }
.sort-row.active .sort-row-desc { color: rgba(216, 204, 255, 0.85); }
/* ---------- 鎺掑簭鍏紡璇存槑 ---------- */
.sort-formula {
  margin-top: 0.9rem;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  background: rgba(139, 92, 246, 0.07);
  border: 1px solid rgba(139, 92, 246, 0.22);
}
.sort-formula-title {
  font-size: 0.86rem;
  font-weight: 700;
  color: #d8ccff;
  margin-bottom: 0.5rem;
  letter-spacing: 0.01em;
}
.sort-formula-row {
  font-size: 0.8rem;
  color: var(--text-2);
  line-height: 1.65;
  font-family: var(--font-mono);
}
.sort-formula-row b { color: var(--text); font-weight: 600; font-family: var(--font-sans); }
.sort-formula-note {
  margin-top: 0.45rem;
  font-size: 0.76rem;
  color: var(--text-3);
  border-top: 1px solid rgba(139, 92, 246, 0.18);
  padding-top: 0.45rem;
}
/* ---------- 鏁版嵁闈㈡澘锛堟姌鍙?+ 鐧惧垎浣嶅浘琛級 ---------- */
.data-panel-toggle {
  margin-top: 0.35rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  width: 100%;
  padding: 0.55rem 0.9rem;
  border-radius: 12px;
  border: 1px solid rgba(139, 92, 246, 0.3);
  background: rgba(139, 92, 246, 0.1);
  color: #d8ccff;
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.data-panel-toggle:hover { background: rgba(139, 92, 246, 0.18); border-color: rgba(139, 92, 246, 0.5); }
.data-panel-arrow { font-size: 0.9rem; opacity: 0.8; }

.data-panel-body {
  margin-top: 0.55rem;
  padding: 0.8rem 0.9rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--hairline);
}
.data-rows { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.85rem; }
.data-rows > div { display: flex; align-items: baseline; gap: 0.4rem; min-height: 1.5rem; white-space: nowrap; }
.data-rows strong { flex: 0 0 5.4em; text-align: right; color: var(--text-3); font-weight: 600; font-size: 0.8rem; }
.data-rows span { flex: 0 0 auto; color: #ededf2; }

/* 鍥捐〃 */
.data-charts { display: flex; flex-direction: column; gap: 0.6rem; border-top: 1px solid var(--hairline); padding-top: 0.75rem; }
.data-chart { display: flex; flex-direction: column; gap: 0.28rem; }
.data-chart-head { display: flex; align-items: baseline; gap: 0.55rem; font-size: 0.78rem; }
.data-chart-name { color: var(--text-2); min-width: 5.5em; }
.data-chart-value { color: var(--text); font-family: var(--font-mono); font-size: 0.76rem; }
.data-chart-rank { margin-left: auto; color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; }
.data-chart-bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.data-chart-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(139, 92, 246, 0.55), rgba(167, 139, 250, 0.95));
  transition: width 0.5s var(--ease);
}
/* 鏃ф暟鎹潰鏉挎牱寮忓凡绉婚櫎 */
/* ---------- 鏁版嵁闈㈡澘锛氬彸渚х嫭绔嬬獥鍙ｏ紙涓嶉伄鎸¤鎯呭崱鐗囷紝鏃犳粴杞紝鍏ㄩ儴鍙锛?---------- */
.data-panel-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;                 /* 蹇呴』楂樹簬 modal-overlay(1000) 涓?filter-modal(2000) */
  pointer-events: none;          /* 涓嶆尅涓嬫柟鎿嶄綔 */
  background: transparent;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.data-panel-window {
  position: absolute;
  right: 2vw;
  top: 50%;
  transform: translateY(-50%);
  width: 430px;
  max-width: 46vw;
  height: 380px;                  /* 涓庡浘鐗囬珮搴︿竴鑷?*/
  pointer-events: auto;
  background: rgba(24, 24, 31, 0.96);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  padding: 0.65rem 0.85rem;
  overflow: hidden;               /* 涓嶆粴鍔細鍏ㄩ儴鍐呭鍘嬬缉鍦?380px 鍐?*/
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.data-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.4rem;
}
.data-panel-title { font-size: 0.88rem; font-weight: 700; color: #fff; }
.data-panel-close {
  background: none;
  border: none;
  color: var(--text-3);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.2rem;
}
.data-panel-close:hover { color: #fff; }

/* 闈㈡澘鍐呭帇缂╂帓鐗堬紙淇濊瘉 380px 鍐呭叏閮ㄥ彲瑙侊級 */
.data-panel-window .data-rows { gap: 0.1rem; margin-bottom: 0.5rem; }
.data-panel-window .data-rows > div { min-height: 1.15rem; font-size: 0.76rem; }
.data-panel-window .data-rows strong { font-size: 0.72rem; flex: 0 0 5.6em; }
.data-panel-window .data-charts { gap: 0.3rem; padding-top: 0.45rem; }
.data-panel-window .data-chart { gap: 0.12rem; }
.data-panel-window .data-chart-head { font-size: 0.72rem; gap: 0.4rem; }
.data-panel-window .data-chart-name { min-width: 4.6em; }
.data-panel-window .data-chart-value { font-size: 0.7rem; }
.data-panel-window .data-chart-rank { font-size: 0.72rem; }
.data-panel-window .data-chart-bar { height: 4px; }

/* 淇℃伅鍒楅珮搴︿笌鍥剧墖涓€鑷达紙鐢?min-height锛氬唴瀹规洿闀挎椂鑷姩鎾戦珮锛屼换浣曡瑷€閮戒笉瑁佸垏锛?*/
.modal-info { min-height: 380px; justify-content: space-between; }

/* 鍦板浘琛ㄦ牸搴曢儴锛氬姞杞芥洿澶?/ 缁熻 */
.map-more-row { display: flex; justify-content: center; align-items: center; gap: 0.5rem; padding: 0.6rem 0 0.2rem; }
.map-more-row .btn-ghost { padding: 0.4rem 0.9rem; border-radius: 10px; font-size: 0.82rem; }
.map-more-hint { color: var(--text-3); font-size: 0.8rem; }

/* 鍒楄〃鍒囨崲鍔ㄦ晥锛氭贰鍑轰笅娌?鈫?棰勮浇鍥剧墖 鈫?娣″叆涓婃诞锛堜笌寮圭獥閫€鍦哄悓涓€濂楄姹囷級 */
#card-grid.list-out, #rank-list.list-out {
  opacity: 0;
  transform: translateY(12px) scale(0.995);
  transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out);
  pointer-events: none;
  will-change: opacity, transform;
}
@keyframes listSwapIn {
  from { opacity: 0; transform: translateY(12px) scale(0.995); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
#card-grid.list-in, #rank-list.list-in {
  animation: listSwapIn 220ms var(--ease-out) both;
}
@media (prefers-reduced-motion: reduce) {
  #card-grid.list-out, #rank-list.list-out { transition-duration: 1ms !important; }
  #card-grid.list-in, #rank-list.list-in { animation: none !important; }
}

/* 鍦板浘琛ㄦ牸琛岋細瑙嗗彛澶栫殑琛岃烦杩囧竷灞€涓庣粯鍒讹紙鍏ㄩ噺娓叉煋涔熶笉鍗★級 */
.map-table tbody tr {
  content-visibility: auto;
  contain-intrinsic-size: auto 30px;
}

/* ---------- 璇█鍒囨崲鍣?---------- */
.lang-switch {
  position: relative;
  flex: 0 0 auto;
  order: 5;
}
.lang-btn {
  display: flex;
  align-items: center;
  gap: 0.34rem;
  padding: 0.42rem 0.8rem !important;
  border-radius: 980px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.045) !important;
  backdrop-filter: blur(10px) !important;
  color: var(--text-2) !important;
  font-size: 0.84rem !important;
  font-weight: 500 !important;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
  white-space: nowrap;
}
.lang-btn:hover,
.lang-switch.open .lang-btn {
  background: rgba(139, 92, 246, 0.18) !important;
  border-color: rgba(167, 139, 250, 0.45) !important;
  color: #fff !important;
}
.lang-globe { font-size: 0.86rem; line-height: 1; opacity: 0.85; }
.lang-caret { font-size: 0.62rem; opacity: 0.6; }
.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 132px;
  padding: 0.34rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(24, 18, 34, 0.94);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(18px) saturate(1.2);
  display: none;
  flex-direction: column;
  gap: 0.14rem;
  z-index: 400;
}
.lang-switch.open .lang-menu { display: flex; }
.lang-item {
  padding: 0.42rem 0.62rem !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: var(--text-2) !important;
  font-size: 0.84rem !important;
  font-weight: 500 !important;
  text-align: left;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}
.lang-item:hover { background: rgba(255, 255, 255, 0.1) !important; color: #fff !important; }
.lang-item.active {
  background: rgba(139, 92, 246, 0.26) !important;
  color: #fff !important;
}
@media (max-width: 768px) {
  .lang-btn .lang-cur { display: none; }
  .lang-btn { padding: 0.42rem 0.6rem !important; }
}

/* ===================== 璇︽儏闈㈡澘 v4锛堢粺涓€鐜荤拑 / 鍐掑彿瀵归綈 / 鑸炲彴甯冨眬 / 绔栨潯鍒囨崲锛?===================== */

/* ---------- 鈶?缁熶竴鏉愯川锛氫笌椤舵爮 header 鍚屼竴缁勫彉閲?---------- */
:root {
  --panel-surface: var(--material-medium);   /* rgba(24,24,31,.55) */
  --panel-blur: var(--glass-lg);             /* blur(34px) saturate(185%) */
  --panel-hairline: var(--hairline);
  --panel-radius: 22px;
  --panel-shadow: var(--glow), 0 26px 60px -28px rgba(0, 0, 0, 0.9);
  --panel-w: 430px;                          /* 鏁版嵁闈㈡澘瀹藉害 */
  --panel-gap: 18px;                         /* 涓ら潰鏉块棿璺?*/
  --stage-shift: calc(-1 * (var(--panel-w) + var(--panel-gap)) / 2);
}

.modal-content,
.detail-stage .data-panel-window,
.detail-nav {
  background: var(--panel-surface) !important;
  backdrop-filter: var(--panel-blur) !important;
  -webkit-backdrop-filter: var(--panel-blur) !important;
  border: 1px solid var(--panel-hairline) !important;
  box-shadow: var(--panel-shadow) !important;
  border-radius: var(--panel-radius) !important;
}

/* ---------- 鈶?鍐掑彿瀵归綈锛氫袱涓潰鏉垮叡鐢ㄥ悓涓€濂椾袱鍒楃綉鏍?---------- */
.modal-info,
.data-rows {
  display: grid !important;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: baseline;
  column-gap: 0.5rem;
}
.modal-info > div,
.data-rows > div { display: contents; }
/* 需要整块隐藏的数据行（SGB 场景块与模型行互斥）：用 !important 覆盖 .data-rows 的 display:grid !important */
.data-rows.is-row-hidden { display: none !important; }   /* 不加 !important：让 JS 的 style.display:none 能隐藏整行 */

.modal-info strong,
.data-rows strong,
.modal-bottom strong {
  flex: none !important;
  width: auto !important;
  text-align: right !important;
  padding-right: 0 !important;
  margin-right: 0 !important;
  white-space: nowrap;
  color: var(--text-3);
  font-weight: 600;
}
.modal-info span,
.data-rows span {
  flex: none !important;
  min-width: 0;
  text-align: left;
  white-space: nowrap;
}
.modal-info {
  height: auto !important;
  min-height: 380px;
  align-content: space-between;
  row-gap: 0.42rem;
}
.data-rows { row-gap: 0.14rem; }
.modal-info .data-panel-toggle { grid-column: 1 / -1; justify-self: stretch; }
.modal-info .modal-tags-wrap { display: inline-flex; align-items: center; gap: 0.5rem; min-width: 0; }
.modal-info .modal-tags-wrap > #modal-tag-add { flex: 0 0 auto; }

.modal-bottom > div {
  display: grid !important;
  grid-template-columns: max-content minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.5rem;
}
.modal-bottom .path-box { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 0.5rem; }

/* ---------- 鈶?鑸炲彴锛氳鎯呴潰鏉垮眳涓紱鏁版嵁闈㈡澘缁濆瀹氫綅鍦ㄥ彸渚с€佷笌璇︽儏闈㈡澘绛夐珮 ---------- */
.modal-overlay { align-items: center; justify-content: center; }
.detail-stage {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  left: 0;
  transition: left 300ms var(--ease-out);
  will-change: left;
}
/* 闈㈡澘鎵撳紑鏃舵暣鍧楄垶鍙板乏绉诲崐涓€滈潰鏉?闂磋窛鈥濓紝瑙嗚涓婄粍鍚堜粛鐒跺眳涓紙JS 鍐欏唴鑱?left锛歵ransform 鍦ㄨ鍏冪礌涓婁細琚紩鎿庡拷鐣ワ級 */

.detail-stage .modal-content {
  flex: 0 1 auto;
  max-width: min(calc(100vw - 560px), 1100px);   /* 濮嬬粓缁欐暟鎹潰鏉跨暀浣嶏紝寮€鍏抽潰鏉夸笉鍐嶆敼瀹藉害 */
}

.detail-stage .data-panel-window {
  position: absolute !important;
  top: 0 !important;                  /* 椤惰竟涓庤鎯呴潰鏉垮榻?*/
  bottom: 0 !important;               /* 搴曡竟涔熷榻?鈫?楂樺害涓庤鎯呴潰鏉夸竴鑷?*/
  left: calc(100% + var(--panel-gap));
  right: auto !important;
  width: var(--panel-w);
  height: auto !important;
  transform: none;                    /* 娓呮帀鏃х増 translateY(-50%)锛岄潬 top/bottom 瀵归綈 */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0.85rem 1rem 0.95rem !important;
}

/* ---------- 鈶?鏁版嵁闈㈡澘鍐呴儴鎸夋柊楂樻帓鐗堬細鏁版嵁琛屽湪涓娿€佸浘琛ㄩ摵婊′笅鍗婂尯 ---------- */
.detail-stage .data-panel-window .data-panel-head {
  justify-content: flex-end !important;
  padding: 0 !important;
  margin: -0.35rem -0.4rem 0.3rem 0 !important;
  min-height: 1.1rem;
}
.detail-stage .data-panel-window .data-rows {
  flex: 0 0 auto;
  margin-bottom: 0.7rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  row-gap: 0.45rem;
}
.detail-stage .data-panel-window .data-rows > div { min-height: 1.9rem; font-size: 0.98rem; }
.detail-stage .data-panel-window .data-rows strong { font-size: 0.95rem; }
.detail-stage .data-panel-window .data-rows span { font-size: 0.98rem; }
.detail-stage .data-panel-window .data-charts {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  row-gap: 0.7rem;
  padding-top: 0.45rem;
}
.detail-stage .data-panel-window .data-chart { gap: 0.34rem; }
.detail-stage .data-panel-window .data-chart-head { font-size: 0.95rem; }
.detail-stage .data-panel-window .data-chart-name { min-width: 5.6em; font-weight: 600; }
.detail-stage .data-panel-window .data-chart-value { font-size: 0.92rem; }
.detail-stage .data-panel-window .data-chart-rank { font-size: 0.9rem; }
.detail-stage .data-panel-window .data-chart-bar { height: 8px; border-radius: 6px; }
.detail-stage .data-panel-window .data-chart-fill { border-radius: 6px; }

/* ---------- 鈶?5 搴曢儴鎷栨嫿鍏夋爣锛坰crubber锛?---------- */
.detail-scrub {
  /* 妯法鏁翠釜鐢婚潰锛氫袱绔搫鍔涙潯涓€鐩村欢浼稿埌灞忓箷杈圭紭 */
  position: absolute;
  left: 8px;
  right: 8px;
  top: 0;
  height: 20px;
  display: flex;
  align-items: center;
  gap: 0;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 240ms var(--ease-out) 80ms, transform 240ms var(--ease-out) 80ms;
}
/* 鏁版嵁闈㈡澘鎵撳紑 鈫?杞ㄩ亾寤朵几鍒版暣鍧楃粍鍚堝搴?*/
.modal-overlay.is-open .detail-scrub { opacity: 1; transform: translateY(0); }

.scrub-track {
  position: relative;
  flex: 1 1 auto;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  pointer-events: auto;
  cursor: pointer;
  touch-action: none;
  transition: flex-basis 300ms var(--ease-out);   /* 闈㈡澘寮€鍚堟椂涓庤垶鍙?left 浣嶇Щ鍚屾鐢熼暱 */
}
/* 鐐瑰嚮鐑尯锛氳瑙変粛鏄?3px 缁嗙嚎锛涘悜涓婂欢浼稿埌璇︽儏闈㈡澘涓嬬紭锛堥潰鏉夸笌杩涘害鏉′箣闂寸殑绌虹櫧涔熺畻鍒ゅ畾鍖猴級锛屽悜涓嬪 7px */
.scrub-track::before {
  content: '';
  position: absolute;
  top: var(--scrub-hit-up, -11px);   /* 鐢?JS 鎸夊疄娴嬮棿璺濆～锛屽厹搴?-11px */
  right: 0;
  bottom: -7px;
  left: 0;
  background: transparent;
}
/* 宸茶蛋杩囩殑閮ㄥ垎 */
.scrub-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(139, 92, 246, 0.85), rgba(196, 181, 253, 0.95));
  transition: width 120ms var(--ease-out);
  will-change: width;
}
.detail-scrub.is-dragging .scrub-fill { transition: none; }
.detail-scrub.is-dragging .scrub-fill { transition: none; }

/* 绔栧厜鏍?*/
.scrub-cursor {
  position: absolute;
  top: 50%;
  left: 0;
  width: 2px;
  height: 14px;
  margin-top: -7px;
  margin-left: -1px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 0 9px rgba(196, 181, 253, 0.45);
  transition: height 140ms var(--ease-out), box-shadow 140ms ease;
  will-change: left;
}
/* 蹇€熸嫋鍔細鍏夋爣鍙橀暱鍙戝厜锛坈lass 椹卞姩锛屼笉閫愬抚鏀?transform锛?*/
.detail-scrub.is-fast .scrub-cursor {
  height: 22px;
  margin-top: -11px;
  box-shadow: 0 0 16px rgba(196, 181, 253, 0.95);
}

/* 涓ょ钃勫姏鍖猴紙娣¤壊锛?*/
.scrub-zone {
  position: relative;
  flex: 0 0 60px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  pointer-events: auto;   /* 涓嶈兘 overflow:hidden锛屽惁鍒欎笅闈㈠姞楂樼殑鐐瑰嚮鐑尯浼氳瑁佹帀 */
  transition: background 160ms ease, box-shadow 160ms ease, flex-basis 300ms var(--ease-out);
}
/* 钃勫姏鏉＄殑涓嶅彲瑙佺儹鍖猴細瑙嗚浠嶆槸 3px锛屽彲鐐归珮搴?17px */
.scrub-zone::before {
  content: '';
  position: absolute;
  top: -7px;
  right: 0;
  bottom: -7px;
  left: 0;
  background: transparent;
}
.scrub-zone.is-hot { background: rgba(255, 255, 255, 0.16); box-shadow: 0 0 10px rgba(167, 139, 250, 0.45); }
.scrub-zone > i {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 999px;   /* 娌℃湁 overflow:hidden 浜嗭紝鍦嗚鑷繁鏉?*/
  background: linear-gradient(90deg, rgba(167, 139, 250, 0.95), rgba(139, 92, 246, 0.6));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 60ms linear;
  will-change: transform;
}
#scrub-zone-right > i {
  background: linear-gradient(270deg, rgba(167, 139, 250, 0.95), rgba(139, 92, 246, 0.6));
  transform-origin: 100% 50%;
}
.scrub-zone.is-hot {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(196, 181, 253, 0.5);
}

.scrub-label {
  position: absolute;
  top: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.98rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  color: #f1ecff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75), 0 0 18px rgba(167, 139, 250, 0.4);
  pointer-events: none;
  white-space: nowrap;
  transition: color 120ms ease, transform 120ms var(--ease-out);
}
/* 鎱㈤€熸嫋鍔細姣忔璺ㄨ繃涓€寮狅紝鏍囩杞昏交涓€璺筹紙鏈?鍒诲害"鐨勬墜鎰燂級 */
.scrub-label.tick { color: #ffffff; transform: translateX(-50%) scale(1.1); }
/* 蹇€熸嫋鍔細鍏夋爣鎷夐暱鍙戝厜锛屾爣绛句篃涓嶅仛灏忓姩浣?*/
.detail-scrub.is-fast .scrub-label { transition: none; }

/* 缈婚〉鐬棿锛氳建閬撻棯涓€涓嬶紝璁?璺抽〉"鏈変氦浠?*/
@keyframes scrubPageFlip {
  0% { box-shadow: 0 0 0 0 rgba(167, 139, 250, 0.5); }
  40% { box-shadow: 0 0 0 6px rgba(167, 139, 250, 0.18); }
  100% { box-shadow: 0 0 0 0 rgba(167, 139, 250, 0); }
}
.detail-scrub.page-flip .scrub-track { animation: scrubPageFlip 420ms var(--ease-out) both; }

/* 宸﹀彸鍒囨崲鏂规锛氭寜浣忚搫鍔?*/
.detail-nav .nav-charge {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(167, 139, 250, 0.42), rgba(167, 139, 250, 0.08));
  transform: scaleY(var(--charge, 0));
  transform-origin: 50% 100%;
  transition: transform 90ms linear;
  pointer-events: none;
}
#detail-next .nav-charge { transform-origin: 50% 0%; background: linear-gradient(0deg, rgba(167, 139, 250, 0.42), rgba(167, 139, 250, 0.08)); }
.detail-nav.is-charging { transform: translateY(-50%) scale(0.97); }

/* 鍥炰綅鍚庣煭鏆傞珮浜洰鏍囧崱鐗?*/
.card.card-focus, .rank-item.card-focus {
  animation: cardFocusPulse 1.3s var(--ease-out) both;
  border-color: rgba(167, 139, 250, 0.65) !important;
}
@keyframes cardFocusPulse {
  0% { box-shadow: 0 0 0 0 rgba(167, 139, 250, 0.55); }
  30% { box-shadow: 0 0 0 6px rgba(167, 139, 250, 0.22); }
  100% { box-shadow: 0 0 0 0 rgba(167, 139, 250, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .scrub-fill, .scrub-cursor, .detail-scrub, .scrub-label { transition-duration: 1ms !important; }
  .detail-scrub.page-flip .scrub-track, .card.card-focus { animation: none !important; }
}

/* ---------- 鈶?宸﹀彸鍒囨崲锛氶粍妗嗛偅鏍风殑绔栭暱鏂瑰舰鍧楋紝璐村睆骞曞乏鍙宠竟缂樸€佺珫鐩村眳涓?---------- */
.detail-nav {
  position: fixed;
  top: 50%;
  left: auto;
  right: auto;
  bottom: auto;
  width: 64px;
  height: 200px;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px !important;
  color: #ffffff;
  cursor: pointer;
  z-index: 1200;
  opacity: 0;
  transform: translateY(-50%) translateX(var(--nav-x, 22px));
  transition:
    opacity 260ms var(--ease-out),
    transform 320ms var(--ease-out),
    background-color 160ms ease;
}
#detail-prev { left: 14px; --nav-x: -22px; }
#detail-next { right: 14px; --nav-x: 22px; }
.modal-overlay.is-open .detail-nav { opacity: 1; transform: translateY(-50%) translateX(0); }
.detail-nav svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
  opacity: 0.85;
  transition: transform 220ms var(--ease-out), opacity 160ms ease;
}
.detail-nav:hover { background: rgba(255, 255, 255, 0.12) !important; }
.detail-nav:hover svg { opacity: 1; transform: scale(1.12); }
#detail-prev:hover svg { transform: translateX(-3px) scale(1.12); }
#detail-next:hover svg { transform: translateX(3px) scale(1.12); }
.detail-nav:active { transform: translateY(-50%) scale(0.96); }
.detail-nav[disabled] { opacity: 0.3 !important; cursor: default; }

/* ---------- 鈶?绐勫睆閫傞厤 ---------- */
@media (max-width: 1300px) {
  :root { --panel-w: 360px; --panel-gap: 14px; }
  .detail-nav { width: 52px; height: 168px; border-radius: 18px !important; }
  #detail-prev { left: 8px; }
  #detail-next { right: 8px; }
}
@media (max-width: 1040px) {
  :root { --panel-w: 300px; --panel-gap: 12px; }
  .detail-stage .modal-content { max-width: calc(100vw - 360px); }
  .detail-nav { width: 44px; height: 132px; }
  .detail-nav svg { width: 20px; height: 20px; }
}
@media (max-width: 820px) {
  :root { --stage-shift: 0px; }
  .detail-stage .modal-content { max-width: calc(100vw - 120px); }
  .detail-stage .data-panel-window { display: none !important; }   /* 瓒呯獎灞忎笉骞舵帓鏄剧ず */
  #detail-prev { left: 6px; }
  #detail-next { right: 6px; }
}


/* ---------- 椤舵爮锛氭闈㈠己鍒朵竴琛岋紝鎻愮ず鑷繁鎹㈣锛堟渶澶?3 琛岋級 ---------- */
@media (min-width: 901px) {
  header { flex-wrap: nowrap !important; }
}
/* 绐勫睆锛氶偖绠遍檺瀹斤紙鐪佺暐鍙凤級锛屾妸绌洪棿璁╃粰鎻愮ず锛涙彁绀轰粛鏈€澶?3 琛?*/
@media (max-width: 1200px) {
  header { gap: 0.65rem; }
  header .auth-user { max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .site-tip { max-width: min(52ch, 46vw); }
}

/* ---------- 鏁版嵁闈㈡澘锛氳创鍥惧垎甯冩渶澶?7 琛岋紙瓒呭嚭鐪佺暐锛夛紝鍏跺畠琛屽竷灞€涓嶅彉 ---------- */
#modal-texdist-row { align-items: flex-start !important; }
#modal-texdist-row > span,
#modal-texdist {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
  overflow: hidden;
  white-space: normal !important;
  word-break: break-word;
  line-height: 1.35;
  max-height: calc(7 * 1.35em);
}

/* ===== 详情面板：特效 / 音效 / 灯光 三色标签 ===== */
.modal-info > .fx-chips {
  display: flex !important;
  grid-column: 1 / -1;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0 0 .35rem;
}
.modal-info > .fx-chips .fx-chip {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .05em;
  padding: .18rem .6rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  color: #6f6f80;
  background: rgba(255,255,255,.035);
  transition: color .18s var(--ease-out), border-color .18s var(--ease-out), background .18s var(--ease-out);
  cursor: default;
}
.modal-info > .fx-chips .fx-chip.is-on {
  color: #4ade80;
  border-color: rgba(74,222,128,.45);
  background: rgba(74,222,128,.12);
  box-shadow: 0 0 14px -6px rgba(74,222,128,.75);
}
@media (prefers-reduced-motion: reduce) { .modal-info > .fx-chips .fx-chip { transition-duration: 1ms; } }

/* ===== 筛选弹窗：文件特性分组标题 ===== */
.feature-group-title {
  width: 100%;
  margin: .45rem 0 .1rem;
  padding: 0 0 .2rem;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--text-3);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.feature-group-title:first-child { margin-top: 0; }

/* ===== 详情面板第一行：材质特性 ===== */
.fx-chips .fx-label {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--text-3);
  margin-right: .25rem;
}
.fx-chips .fx-list { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.modal-info > .fx-chips .fx-chip.none {
  color: #6f6f80;
  border-color: rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}