/* ═══════════════════════════════════════════════════════
   铭泽资源系统站 —— 样式 v4
   借鉴 zzyrj.top 的紫色渐变语言（#667eea → #764ba2）
   在此基础上收紧排版、柔和阴影、保留图标与动效
   ═══════════════════════════════════════════════════════ */

* { box-sizing: border-box; }

:root {
  --p1:        #667eea;
  --p2:        #764ba2;
  --p1-soft:   rgba(102, 126, 234, .10);
  --p1-line:   rgba(102, 126, 234, .18);

  --ink:       #2c3345;
  --ink-2:     #5b6478;
  --muted:     #939cb0;
  --line:      #eef0f7;

  --card:      #ffffff;

  --sh-card:   0 10px 34px rgba(52, 38, 96, .14);
  --sh-soft:   0 2px 10px rgba(52, 38, 96, .06);
  --sh-press:  0 6px 18px rgba(102, 126, 234, .42);

  --r-sm: 9px;
  --r:    12px;
  --r-lg: 18px;
}

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
               "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  background-attachment: fixed;
  color: var(--ink);
  font-size: 14.5px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.wrap { max-width: 1140px; margin: 0 auto; padding: 0 22px; }

/* ═══════════ 顶栏（透明压在渐变上）═══════════ */
.top {
  padding: 26px 0 18px;
  position: sticky;
  top: 0;
  z-index: 30;
  background: linear-gradient(180deg, rgba(102, 126, 234, .96) 0%, rgba(102, 126, 234, .72) 70%, rgba(102, 126, 234, 0) 100%);
  backdrop-filter: blur(10px);
}

.top-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 46px;
}

.brand {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  text-shadow: 0 2px 10px rgba(45, 30, 90, .3);
}
.brand::before {
  content: "";
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .9);
  box-shadow: inset 0 -2px 6px rgba(102, 126, 234, .5);
  flex-shrink: 0;
}

.top-nav {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-item {
  display: inline-block;
  padding: 9px 30px;
  border-radius: 10px;
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-align: center;
  white-space: nowrap;
  background: rgba(28, 18, 62, .34);
  border: 1.5px solid rgba(255, 255, 255, .55);
  box-shadow: 0 3px 10px rgba(20, 10, 50, .18);
  backdrop-filter: blur(8px);
  transition: all .18s ease;
}
.nav-item:hover {
  background: rgba(28, 18, 62, .52);
  border-color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 5px 16px rgba(20, 10, 50, .26);
}
.nav-item.active {
  background: #fff;
  color: var(--p1);
  border-color: #fff;
  box-shadow: 0 6px 18px rgba(45, 30, 90, .22);
}

/* 搜索 */
.search-row { position: relative; margin-top: 12px; }
.search-row::before {
  content: "⌕";
  position: absolute;
  left: 17px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: #a9b2c8;
  pointer-events: none;
}
.search-row input {
  width: 100%;
  padding: 12px 118px 12px 42px;
  border: 0;
  border-radius: 12px;
  font-size: 14px;
  outline: none;
  color: var(--ink);
  background: #fff;
  box-shadow: 0 8px 26px rgba(45, 30, 90, .16);
  transition: box-shadow .18s;
}
.search-row input::placeholder { color: #a9b2c8; }
.search-row input:focus { box-shadow: 0 8px 26px rgba(45, 30, 90, .2), 0 0 0 3px rgba(255, 255, 255, .45); }
.search-hint {
  position: absolute;
  right: 17px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: #a9b2c8;
  pointer-events: none;
}

/* ═══════════ 主体 ═══════════ */
.main { padding: 12px 22px 60px; }

.section-title {
  display: flex;
  align-items: center;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 14px;
  padding-left: 12px;
  position: relative;
  text-shadow: 0 1px 6px rgba(45, 30, 90, .25);
}
.section-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .8);
}
.section-title small {
  font-size: 12.5px;
  font-weight: 400;
  color: rgba(255, 255, 255, .72);
  margin-left: 9px;
}
.expand-all {
  margin-left: auto;
  border: 1px solid rgba(255, 255, 255, .42);
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 12px;
  padding: 5px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  backdrop-filter: blur(6px);
  transition: all .16s;
}
.expand-all:hover { background: rgba(255, 255, 255, .3); }

/* ═══════════ 白色大卡片 ═══════════ */
.card {
  background: var(--card);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-card);
  overflow: hidden;
}

/* ═══════════ 首页：折叠分组 ═══════════ */
.groups {
  background: var(--card);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-card);
  padding: 10px 14px;
}
.group { border-radius: var(--r); margin-bottom: 2px; }
.group:last-child { margin-bottom: 2px; }

.group-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 14px;
  cursor: pointer;
  user-select: none;
  font-weight: 600;
  font-size: 14px;
  color: var(--p1);
  border-radius: var(--r);
  background: linear-gradient(135deg, rgba(102, 126, 234, .07), rgba(118, 75, 162, .07));
  transition: background .16s;
  margin-bottom: 2px;
}
.group-head:hover { background: linear-gradient(135deg, rgba(102, 126, 234, .14), rgba(118, 75, 162, .14)); }
.group-head .arrow {
  color: var(--p1);
  display: inline-block;
  transition: transform .22s ease;
  font-size: 11px;
  width: 12px;
  opacity: .8;
}
.group.open .group-head .arrow { transform: rotate(90deg); }
.group-count {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--p1);
  background: rgba(102, 126, 234, .12);
  padding: 1px 10px;
  border-radius: 999px;
  min-width: 24px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.group-body { display: none; padding: 6px 6px 10px; }
.group.open .group-body { display: block; }

/* ═══════════ 分类页布局 ═══════════ */
.cat-layout {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

/* 左侧：紫色渐变按钮列表 */
.cat-side {
  width: 232px;
  flex: 0 0 232px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: sticky;
  top: 132px;
  max-height: calc(100vh - 152px);
  overflow-y: auto;
  padding-right: 2px;
}
.cat-side::-webkit-scrollbar { width: 0; }

.cat-side-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.5px;
  color: rgba(255, 255, 255, .72);
  padding: 2px 4px 4px;
}

.cat-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: var(--r);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  line-height: 1.4;
  background: linear-gradient(135deg, rgba(64, 46, 128, .94), rgba(96, 52, 138, .94));
  border: 1px solid rgba(255, 255, 255, .24);
  box-shadow: 0 3px 10px rgba(24, 12, 56, .22);
  transition: all .17s ease;
  white-space: nowrap;
}
.cat-item:hover {
  background: linear-gradient(135deg, rgba(84, 62, 158, .98), rgba(120, 66, 168, .98));
  border-color: rgba(255, 255, 255, .45);
  transform: translateX(3px);
  box-shadow: 0 6px 18px rgba(24, 12, 56, .3);
}
.cat-item.active {
  background: #ffffff;
  color: var(--p1);
  border-color: #fff;
  box-shadow: 0 6px 20px rgba(24, 12, 56, .3);
}
.cat-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cat-num {
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, .8);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.cat-item.active .cat-num { color: var(--p1); }

/* 右侧内容 */
.cat-main {
  flex: 1;
  min-width: 0;
  background: var(--card);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-card);
  padding: 24px 26px 28px;
  min-height: 440px;
}
.cat-panel[hidden] { display: none; }

/* ═══════════ 资源条目 ═══════════ */
.res { margin-bottom: 22px; }
.res:last-child { margin-bottom: 2px; }

.res-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-bottom: 9px;
}

.res-tag {
  font-size: 11.5px;
  font-weight: 500;
  padding: 2px 9px;
  border-radius: 5px;
  background: linear-gradient(135deg, rgba(102, 126, 234, .09), rgba(118, 75, 162, .09));
  color: #6b74a8;
  white-space: nowrap;
  line-height: 1.55;
}
.res-tag.bit      { background: rgba(102, 126, 234, .13); color: #4f5bbd; }
.res-tag.edition  { background: rgba(16, 163, 127, .10);  color: #1a7f68; }
.res-tag.activate { background: rgba(217, 119, 6, .10);   color: #a05a12; }
.res-tag.date     { background: rgba(148, 163, 184, .13); color: #7c8798; }
.res-tag.size     { background: rgba(118, 75, 162, .09);  color: #6b5a99; }

.res-code {
  font-size: 12px;
  color: var(--muted);
  margin-left: auto;
  white-space: nowrap;
}
.res-code b {
  color: #d94a4a;
  letter-spacing: 1.2px;
  font-weight: 700;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12.5px;
}

.copy-btn {
  margin-left: 8px;
  border: 1px solid var(--p1-line);
  background: transparent;
  color: var(--p1);
  border-radius: 5px;
  font-size: 11px;
  padding: 1px 8px;
  cursor: pointer;
  font-family: inherit;
  transition: all .14s;
}
.copy-btn:hover { background: var(--p1-soft); }
.copy-btn.done { border-color: #10a37f; color: #10a37f; background: rgba(16, 163, 127, .07); }

/* 条目横条（借鉴 zzyrj 的左侧蓝线 + 浅色底） */
.res-file {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #fafbff 0%, #f6f7fd 100%);
  border-left: 3px solid var(--p1);
  border-radius: 10px;
  text-decoration: none;
  color: #3f4a75;
  font-size: 14px;
  line-height: 1.55;
  word-break: break-all;
  transition: all .17s ease;
}
.res-file:hover {
  background: linear-gradient(135deg, #f2f5ff 0%, #eef0fc 100%);
  border-left-color: var(--p2);
  color: #2a3a7a;
  box-shadow: 0 4px 16px rgba(102, 126, 234, .14);
  transform: translateX(2px);
}
.res-file:active { transform: translateX(0); }
.res-file.disabled { opacity: .5; cursor: default; }
.res-file.disabled:hover {
  background: linear-gradient(135deg, #fafbff 0%, #f6f7fd 100%);
  border-left-color: var(--p1);
  box-shadow: none;
  transform: none;
}

.file-ico {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(52, 38, 96, .1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.file-ico img { width: 18px; height: 18px; object-fit: contain; display: block; }
.file-ico.letter { color: #fff; }
.file-ico.letter b { font-size: 12.5px; font-weight: 700; }
.file-name { flex: 1; min-width: 0; }

/* 搜索空态 */
.res.hide { display: none; }
.group.hide { display: none; }
.empty {
  display: none;
  text-align: center;
  color: var(--muted);
  padding: 70px 20px;
  font-size: 13.5px;
}
.empty.show { display: block; }

/* ═══════════ 页脚 ═══════════ */
.foot {
  color: rgba(255, 255, 255, .62);
  padding: 26px 0 40px;
  font-size: 12px;
  line-height: 2;
}
.foot p { margin: 4px 0; }
.foot a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.foot a:hover { text-decoration: underline; }
.foot .copy { margin-top: 16px; color: rgba(255, 255, 255, .42); }

/* ═══════════ 动效 ═══════════ */
@keyframes mzUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes mzFade { from { opacity: 0; } to { opacity: 1; } }

.group { animation: mzUp .34s cubic-bezier(.22,.61,.36,1) backwards; }
.group:nth-child(1) { animation-delay: .02s; }
.group:nth-child(2) { animation-delay: .05s; }
.group:nth-child(3) { animation-delay: .08s; }
.group:nth-child(4) { animation-delay: .11s; }
.group:nth-child(5) { animation-delay: .14s; }
.group:nth-child(6) { animation-delay: .17s; }
.group:nth-child(7) { animation-delay: .20s; }
.group:nth-child(8) { animation-delay: .23s; }

.res { animation: mzUp .3s cubic-bezier(.22,.61,.36,1) backwards; }
.res:nth-child(1) { animation-delay: .02s; }
.res:nth-child(2) { animation-delay: .06s; }
.res:nth-child(3) { animation-delay: .10s; }
.res:nth-child(4) { animation-delay: .14s; }
.res:nth-child(5) { animation-delay: .18s; }
.res:nth-child(6) { animation-delay: .22s; }

.cat-panel:not([hidden]) { animation: mzFade .22s ease; }

.cat-item { animation: mzUp .3s cubic-bezier(.22,.61,.36,1) backwards; }
.cat-item:nth-child(2) { animation-delay: .02s; }
.cat-item:nth-child(3) { animation-delay: .04s; }
.cat-item:nth-child(4) { animation-delay: .06s; }
.cat-item:nth-child(5) { animation-delay: .08s; }
.cat-item:nth-child(6) { animation-delay: .10s; }

@media (prefers-reduced-motion: reduce) {
  .group, .res, .cat-item, .cat-panel:not([hidden]) { animation: none !important; }
  * { transition-duration: .01ms !important; }
}

/* ═══════════ 移动端 ═══════════ */
@media (max-width: 760px) {
  .wrap { padding: 0 14px; }
  .top { padding: 18px 0 14px; }
  .top-row { grid-template-columns: 1fr; gap: 10px; height: auto; }
  .brand { font-size: 16.5px; justify-self: start; }
  .top-nav { justify-self: start; gap: 7px; }
  .nav-item { padding: 7px 18px; font-size: 14px; letter-spacing: .8px; }
  .search-row input { padding: 10px 96px 10px 38px; font-size: 13px; }
  .main { padding: 8px 14px 44px; }
  .groups { padding: 8px 8px; border-radius: var(--r); }
  .cat-layout { flex-direction: column; gap: 12px; }
  .cat-side {
    width: 100%;
    flex: none;
    position: static;
    max-height: none;
    flex-direction: row;
    overflow-x: auto;
    gap: 7px;
    padding-bottom: 2px;
    scrollbar-width: none;
  }
  .cat-side::-webkit-scrollbar { display: none; }
  .cat-side-title { display: none; }
  .cat-item { flex: 0 0 auto; padding: 9px 16px; font-size: 13px; }
  .cat-num { display: none; }
  .cat-main { padding: 16px 14px 20px; border-radius: var(--r); }
  .res-file { padding: 12px 13px; font-size: 13px; }
  .res-code { margin-left: 0; width: 100%; }
}

/* ═══════════ 页面切换过渡（消除跳转白屏抖动）═══════════ */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: mzOut .13s ease both;
}
::view-transition-new(root) {
  animation: mzIn .18s ease both;
}

@keyframes mzOut {
  from { opacity: 1; }
  to   { opacity: .72; }
}
@keyframes mzIn {
  from { opacity: .72; }
  to   { opacity: 1; }
}

/* 防止切换时页面高度跳动 */
html { min-height: 100%; }
body { min-height: 100vh; }

/* 顶栏固定高度，切换时导航不会跳 */
.top { contain: layout paint; }
.top-row { height: 62px; }

/* 不支持 View Transitions 的浏览器：至少让跳转更顺 */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none !important; }
}

/* ═══════════ 空分类提示 ═══════════ */
.empty-cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 420px;
  color: var(--muted);
  font-size: 14px;
}
.empty-cat .empty-icon {
  font-size: 42px;
  color: #d6dbef;
  margin-bottom: 14px;
  line-height: 1;
}
.empty-cat p { margin: 0; }