:root {
  --primary: #e60023;
  --primary-pressed: #cc001f;
  --on-primary: #ffffff;
  --ink: #000000;
  --body: #33332e;
  --mute: #62625b;
  --ash: #91918c;
  --hairline: #dadad3;
  --canvas: #ffffff;
  --surface-soft: #fbfbf9;
  --surface-card: #f6f6f3;
  --secondary-bg: #e5e5e0;
  --focus-outer: #435ee5;
  --error: #9e0a0a;
  --success-pale: #c7f0da;
  --radius-md: 16px;
  --radius-lg: 32px;
  --radius-full: 9999px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  background: var(--surface-soft);
  color: var(--body);
  min-height: 100vh;
  min-height: -webkit-fill-available;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
.nav{
  position: sticky; top: 0; z-index: 800;
  background: var(--canvas);
  height: 64px;
  display: flex; align-items: center;
  padding: 0 20px;
  border-bottom: 1px solid var(--hairline);
  gap: 12px;
}
.nav-brand{
  font-weight: 700; font-size: 20px; color: var(--primary);
  letter-spacing: -0.3px; display: flex; align-items: center; gap: 6px;
  flex-shrink: 0;
}
.nav-search-dummy{display:none;}
.nav-actions{
  display: flex; align-items: center; gap: 8px;
  flex-shrink: 0;
}
.btn-primary{
  background: var(--primary); color: var(--on-primary);
  font-weight: 700; font-size: 14px; line-height: 1;
  padding: 6px 14px; height: 38px;
  border-radius: var(--radius-md);
  border: none; cursor: pointer;
  transition: background 0.2s, transform 0.15s ease;
  display: inline-flex; align-items: center; gap: 6px;
}
.btn-primary:active{background: var(--primary-pressed); transform: scale(0.96);}
.btn-primary:disabled{background: var(--surface-card); color: var(--ash); cursor: not-allowed; transform: none;}
.btn-secondary{
  background: var(--secondary-bg); color: var(--ink);
  font-weight: 700; font-size: 14px; line-height: 1;
  padding: 6px 14px; height: 38px;
  border-radius: var(--radius-md);
  border: none; cursor: pointer;
  transition: background 0.2s, transform 0.15s ease;
}
.btn-secondary:active{background: #c8c8c1; transform: scale(0.96);}
.btn-ghost{
  background: transparent; color: var(--ink);
  font-weight: 600; font-size: 14px;
  padding: 6px 12px; height: 38px;
  border-radius: var(--radius-md);
  border: none; cursor: pointer;
  transition: background 0.2s;
}
.btn-ghost:hover{background: var(--surface-card);}
.container{
  max-width: 1060px; margin: 0 auto;
  padding: 24px 16px calc(var(--safe-bottom) + 40px);
}
.hero-search{
  display:flex; justify-content:center;
  padding:48px 16px 8px;
}
.hero-search-inner{
  width:100%; max-width:680px;
  display:flex; align-items:center; gap:8px;
  background:var(--surface-card);
  border:2px solid var(--hairline);
  border-radius:var(--radius-full);
  padding:6px 6px 6px 18px;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.hero-search-inner:focus-within{
  background:var(--canvas);
  border-color:var(--primary);
  box-shadow:0 0 0 4px rgba(230,0,35,.12);
}
.hero-search-inner i{color:var(--ash); font-size:18px;}
.hero-search-inner input{
  flex:1; border:none; background:transparent;
  font-family:inherit; font-size:16px; color:var(--ink); outline:none;
}
.hero-search-inner input::placeholder{color:var(--ash);}
.msg{
  padding: 12px 16px; border-radius: var(--radius-md);
  font-size: 14px; margin-bottom: 16px;
  display: none; animation: slideDown 0.3s ease;
}
.msg.show{display: block;}
.msg.err{background: rgba(158,10,10,0.08); color: var(--error); border: 1px solid rgba(158,10,10,0.15);}
.msg.ok{background: var(--success-pale); color: #103c25; border: 1px solid #a3d9b1;}
@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.profile{
  background: var(--canvas);
  border-radius: var(--radius-lg);
  padding: 32px;
  margin-bottom: 24px;
  display: none;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  animation: rise 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
}
.profile.show{display: block;}
@keyframes rise{from{opacity:0;transform:translateY(24px) scale(0.97)}to{opacity:1;transform:translateY(0) scale(1)}}
.profile-head{display: flex; align-items: center; gap: 24px; margin-bottom: 24px;}
.avatar{
  width: 88px; height: 88px; border-radius: var(--radius-full);
  object-fit: cover; border: 2px solid var(--surface-card);
}
.profile-meta h2{font-size: 22px; font-weight: 700; color: var(--ink); letter-spacing: -0.3px;}
.profile-meta .uid{font-size: 14px; color: var(--mute); margin-top: 2px;}
.profile-meta .sig{font-size: 14px; color: var(--body); margin-top: 8px; line-height: 1.4; max-width: 460px;}
.stats{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--hairline); border-radius: var(--radius-md); overflow: hidden;
  border: 1px solid var(--hairline);
}
.stat{
  background: var(--surface-soft); padding: 18px 8px; text-align: center;
}
.stat .num{font-size: 22px; font-weight: 700; color: var(--ink); letter-spacing: -0.3px;}
.stat .lbl{font-size: 12px; color: var(--mute); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.03em;}
.works{display: none; animation: rise 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.1s both;}
.works.show{display: block;}
.toolbar{
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0; margin-bottom: 12px;
  flex-wrap: wrap; gap: 12px;
}
.toolbar-left{display: flex; align-items: center; gap: 12px;}
.toolbar-left label{font-size: 15px; font-weight: 600; color: var(--ink);}
.toolbar-left .count{font-weight: 400; color: var(--mute); font-size: 14px;}
.toolbar-right{display: flex; align-items: center; gap: 8px;}
.sort-select{
  background: var(--canvas); border: 1px solid var(--hairline);
  border-radius: var(--radius-full); padding: 8px 16px;
  font-family: inherit; font-size: 14px; color: var(--ink);
  cursor: pointer; outline: none;
}
.sort-select:focus{box-shadow: 0 0 0 2px var(--focus-outer);}
.masonry{
  column-count: 4; column-gap: 8px;
}
@media (max-width: 960px){.masonry{column-count: 3;}}
@media (max-width: 660px){.masonry{column-count: 2;}}
@media (max-width: 430px){.masonry{column-count: 1;}}
.pin{
  break-inside: avoid; margin-bottom: 8px;
  background: var(--surface-card);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.33,1,0.68,1), box-shadow 0.25s ease;
  position: relative;
}
.pin:hover{transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.08);}
.pin:active{transform: scale(0.98);}
.pin-img{
  width: 100%; display: block; object-fit: cover;
  background: var(--stone);
}
.pin-body{
  padding: 12px 16px 16px;
}
.pin-desc{
  font-size: 14px; color: var(--body);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-bottom: 4px;
}
.pin-meta{
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--mute);
}
.pin-meta i{margin-right: 2px;}
.pin-type{
  position: absolute; top: 10px; right: 10px;
  background: var(--canvas); color: var(--ink);
  font-size: 11px; font-weight: 700;
  padding: 4px 10px; border-radius: var(--radius-full);
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.pin-check{
  position: absolute; top: 10px; left: 10px;
  width: 22px; height: 22px; border-radius: 6px;
  border: 2px solid #c8c8c1;
  background: var(--canvas);
  cursor: pointer; z-index: 2;
  appearance: none; display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.pin-check:checked{background: var(--primary); border-color: var(--primary);}
.pin-check:checked::after{content:'\f00c'; font-family:'Font Awesome 6 Free'; font-weight:900; font-size:12px; color:#fff;}
.empty{
  text-align: center; padding: 60px 20px; color: var(--mute);
  column-span: all;
}
.empty i{font-size: 42px; opacity: 0.4; margin-bottom: 12px;}
.batch{
  background: var(--canvas); border-radius: var(--radius-md);
  padding: 24px; margin-top: 24px;
  display: none; animation: rise 0.4s ease;
  border: 1px solid var(--hairline);
}
.batch.show{display: block;}
.batch-head{display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;}
.batch-head strong{font-size: 15px; color: var(--ink);}
.batch textarea{
  width: 100%; height: 130px;
  background: var(--surface-soft); border: 1px solid var(--hairline);
  border-radius: var(--radius-md); padding: 12px;
  font-family: 'Inter', monospace; font-size: 13px; resize: none; outline: none;
  color: var(--ink);
}
.batch textarea:focus{border-color: var(--primary); box-shadow: 0 0 0 2px rgba(230,0,35,0.15);}
.batch-tip{font-size: 12px; color: var(--mute); margin-top: 8px;}
.modal{
  position: fixed; inset: 0; z-index: 2000;
  display: none; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.modal.show{display: flex; animation: fadeIn 0.25s ease;}
.modal.hide{animation: fadeOut 0.25s ease;}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeOut{from{opacity:1}to{opacity:0}}
.modal-card{
  width: 100%; max-width: 650px; max-height: 85vh; overflow-y: auto;
  background: var(--canvas);
  border-radius: var(--radius-lg);
  padding: 32px;
  position: relative;
  animation: zoomIn 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.modal.hide .modal-card{animation: zoomOut 0.3s ease;}
@keyframes zoomIn{from{opacity:0;transform:scale(0.91) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes zoomOut{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0.95)}}
.modal-close{
  position: absolute; top: 16px; right: 16px;
  width: 38px; height: 38px; border-radius: var(--radius-full);
  background: var(--surface-card); border: none;
  color: var(--ink); font-size: 19px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.modal-close:hover{background: var(--secondary-bg);}
.modal-title{font-size: 21px; font-weight: 700; color: var(--ink); margin-bottom: 4px; padding-right: 44px;}
.modal-sub{font-size: 14px; color: var(--mute); margin-bottom: 24px;}
.video-frame{
  border-radius: var(--radius-md); overflow: hidden; margin-bottom: 24px;
  background: #000; border: 1px solid var(--hairline);
}
.video-frame video{width: 100%; display: block; max-height: 480px;}
.gallery{
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px; margin-bottom: 24px;
}
.gallery img{width: 100%; border-radius: var(--radius-md); cursor: pointer; transition: transform 0.2s;}
.gallery img:hover{transform: scale(1.04);}
.modal-foot{display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;}
.modal-stat{display: flex; gap: 16px; font-size: 14px; color: var(--mute);}
.modal-stat span{display: flex; align-items: center; gap: 4px;}
.dl-btn{
  height: 42px; padding: 0 26px; border-radius: var(--radius-md);
  background: var(--primary); color: var(--on-primary);
  border: none; display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700; cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}
.dl-btn:active{background: var(--primary-pressed); transform: scale(0.96);}
.footer{
  text-align: center; padding: 32px 0 16px;
  color: var(--mute); font-size: 13px;
  border-top: 1px solid var(--hairline);
  margin-top: 54px;
}
.footer i{color: var(--primary); margin: 0 4px;}
/* 全屏加载遮罩 */
.loader-overlay{
  position:fixed; inset:0; z-index:3000;
  background:#15140f;
  display:none; align-items:center; justify-content:center;
  flex-direction:column;
}
.loader-overlay.show{display:flex;}
#particleCanvas{position:absolute; inset:0; width:100%; height:100%;}
.loader-core{position:relative; z-index:2; text-align:center;}
.loader-ring{
  width:84px; height:84px; margin:0 auto 18px;
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(230,0,35,.22), rgba(230,0,35,0) 70%);
  animation:breathe 1.6s ease-in-out infinite;
  display:flex; align-items:center; justify-content:center;
}
.loader-ring::before{
  content:""; width:46px; height:46px; border-radius:50%;
  border:3px solid rgba(255,255,255,.15);
  border-top-color:var(--primary);
  animation:spin .9s linear infinite;
}
@keyframes breathe{
  0%,100%{transform:scale(.92); opacity:.7;}
  50%{transform:scale(1.08); opacity:1;}
}
@keyframes spin{to{transform:rotate(360deg);}}
.loader-title{
  color:#fff; font-size:13px; letter-spacing:6px;
  opacity:.65; font-weight:500; margin-bottom:14px;
}
.loader-track{
  width:240px; height:4px; border-radius:2px;
  background:rgba(255,255,255,.12); overflow:hidden;
}
.loader-bar{
  height:100%; width:0%;
  background:linear-gradient(90deg,#e60023,#ff7a7a);
  border-radius:2px; transition:width .25s ease;
}
.loader-tip{color:rgba(255,255,255,.45); font-size:12px; margin-top:12px; font-style:italic;}
@media(max-width:580px){
  .nav{padding:0 12px; gap:6px;}
  .nav-actions .btn-ghost{display:none;}
  .hero-search{padding:28px 12px 4px;}
  .hero-search-inner{padding-left:14px;}
  .hero-search-inner .btn-primary{padding:0 12px;}
  .stats{grid-template-columns:repeat(2, 1fr);}
  .profile{padding:20px;}
  .profile-head{flex-direction:column; text-align:center;}
  .modal-card{padding:24px; border-radius:var(--radius-lg) var(--radius-lg) 0 0; margin-top:auto;}
  .modal{align-items:flex-end; padding:0;}
}
@media(max-width:370px){
  .nav-brand span{display:none;}
}
/* 在文件末尾追加以下样式 */

/* 分页容器 */
.pagination {
  display: flex;
  justify-content: center;
  padding: 24px 0 8px;
  column-span: all;
}

/* 评论区域 */
.comments-section {
  margin-top: 24px;
  border-top: 1px solid var(--hairline);
  padding-top: 16px;
}
.comments-section h4 {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.comment-item {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hairline);
}
.comment-item:last-child { border-bottom: none; }
.comment-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--surface-card);
}
.comment-body {
  flex: 1;
  min-width: 0;
}
.comment-author {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
}
.comment-text {
  font-size: 14px;
  color: var(--body);
  line-height: 1.4;
  word-break: break-word;
}
.comment-time {
  font-size: 11px;
  color: var(--ash);
  margin-top: 4px;
}
.comments-empty {
  text-align: center;
  padding: 30px 0;
  color: var(--mute);
  font-size: 14px;
}