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



body {

  background: #0f0f0f;

  color: #e0e0e0;

  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  min-height: 100vh;

}



/* 顶部导航 */

.navbar {

  position: sticky;

  top: 0;

  z-index: 100;

  background: rgba(15,15,15,0.92);

  backdrop-filter: blur(10px);

  border-bottom: 1px solid #222;

  padding: 0 24px;

  height: 56px;

  display: flex;

  align-items: center;

  justify-content: space-between;

}

.navbar .logo { font-size: 18px; font-weight: 600; color: #fff; }

.navbar .nav-right { display: flex; align-items: center; gap: 16px; }

.navbar .username { font-size: 14px; color: #aaa; }

.navbar a { color: #aaa; text-decoration: none; font-size: 14px; }

.navbar a:hover { color: #fff; }



/* 主体 */

.main { padding: 24px; }



/* 瀑布流 */

.masonry {

  columns: 7 140px;

  column-gap: 12px;

}

.masonry-item {

  break-inside: avoid;

  margin-bottom: 12px;

  cursor: pointer;

  border-radius: 8px;

  overflow: hidden;

  background: #1a1a1a;

  transition: transform 0.2s;

}

.masonry-item:hover { transform: scale(1.02); }

.masonry-item img {

  width: 100%;

  display: block;

  border-radius: 8px;

}




/* 加载更多 */

.load-more {

  text-align: center;

  padding: 32px;

}

.load-more button {

  background: #222;

  color: #e0e0e0;

  border: 1px solid #333;

  padding: 10px 32px;

  border-radius: 6px;

  cursor: pointer;

  font-size: 14px;

  transition: background 0.2s;

}

.load-more button:hover { background: #333; }

.load-more button:disabled { opacity: 0.4; cursor: not-allowed; }



/* 弹窗遮罩 */

.modal-overlay {

  display: none;

  position: fixed;

  inset: 0;

  background: rgba(0,0,0,0.85);

  z-index: 200;

  align-items: center;

  justify-content: center;

}

.modal-overlay.active { display: flex; }



/* 弹窗内容 */

.modal {

  background: #1a1a1a;

  border-radius: 12px;

  max-width: 900px;

  width: 95vw;

  max-height: 90vh;

  overflow-y: auto;

  display: flex;

  flex-direction: column;

  gap: 0;

}

.modal-img-wrap {

  background: #111;

  display: flex;

  align-items: center;

  justify-content: center;

  min-height: 300px;

  border-radius: 12px 12px 0 0;

  overflow: hidden;

}

.modal-img-wrap img {

  max-width: 100%;

  max-height: 60vh;

  object-fit: contain;

  display: block;

}

.modal-info {

  padding: 20px 24px;

  display: flex;

  flex-direction: column;

  gap: 12px;

}

.modal-prompt {

  font-size: 14px;

  color: #ccc;

  line-height: 1.6;

  word-break: break-all;

}

.modal-meta {

  display: flex;

  flex-wrap: wrap;

  gap: 16px;

  font-size: 13px;

  color: #888;

}

.modal-actions {

  display: flex;

  gap: 12px;

  padding: 0 24px 20px;

}

.btn {

  padding: 8px 20px;

  border-radius: 6px;

  font-size: 14px;

  cursor: pointer;

  border: none;

  transition: background 0.2s;

}

.btn-primary { background: #4f6ef7; color: #fff; }

.btn-primary:hover { background: #3a5be0; }

.btn-ghost { background: #2a2a2a; color: #ccc; border: 1px solid #333; }

.btn-ghost:hover { background: #333; }



/* 空状态 */

.empty { text-align: center; padding: 80px 0; color: #555; font-size: 15px; }



/* 登录页 */

.login-wrap {

  display: flex;

  align-items: center;

  justify-content: center;

  min-height: 100vh;

}

.login-box {

  background: #1a1a1a;

  border: 1px solid #2a2a2a;

  border-radius: 12px;

  padding: 40px;

  width: 360px;

}

.login-box h2 { font-size: 20px; margin-bottom: 24px; color: #fff; }

.form-group { margin-bottom: 16px; }

.form-group label { display: block; font-size: 13px; color: #aaa; margin-bottom: 6px; }

.form-group input {

  width: 100%;

  background: #111;

  border: 1px solid #333;

  border-radius: 6px;

  padding: 10px 12px;

  color: #e0e0e0;

  font-size: 14px;

  outline: none;

}

.form-group input:focus { border-color: #4f6ef7; }

.login-btn {

  width: 100%;

  background: #4f6ef7;

  color: #fff;

  border: none;

  border-radius: 6px;

  padding: 11px;

  font-size: 15px;

  cursor: pointer;

  margin-top: 8px;

}

.login-btn:hover { background: #3a5be0; }

.error-msg { color: #f87171; font-size: 13px; margin-top: 12px; text-align: center; }



@media (max-width: 600px) {

  .masonry { columns: 2 120px; }

  .modal { width: 100vw; border-radius: 12px 12px 0 0; }

}




/* 搜索栏 */

.search-bar {

  background: #1a1a1a;

  border-bottom: 1px solid #222;

  padding: 16px 24px;

}

.search-row {

  display: flex;

  flex-wrap: wrap;

  gap: 12px;

  align-items: flex-end;

}

.search-item {

  display: flex;

  flex-direction: column;

  gap: 4px;

}

.search-item label {

  font-size: 12px;

  color: #888;

}

.search-item input,

.search-item select {

  background: #111;

  border: 1px solid #333;

  border-radius: 6px;

  padding: 7px 10px;

  color: #e0e0e0;

  font-size: 13px;

  outline: none;

  min-width: 130px;

}

.search-item input:focus,

.search-item select:focus { border-color: #4f6ef7; }

.search-actions {

  display: flex;

  gap: 8px;

  align-items: flex-end;

  padding-bottom: 1px;

}

.search-actions button {

  padding: 7px 20px;

  border-radius: 6px;

  font-size: 13px;

  cursor: pointer;

  border: none;

}

.search-actions button:first-child {

  background: #4f6ef7;

  color: #fff;

}

.search-actions button:first-child:hover { background: #3a5be0; }

.search-actions button:last-child {

  background: #2a2a2a;

  color: #aaa;

  border: 1px solid #333;

}

.search-actions button:last-child:hover { background: #333; }



.btn-show-prompt {
  background: none;
  border: none;
  color: #4f6ef7;
  font-size: 13px;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

.btn-show-prompt:hover { color: #7a9bff; }


  font-size: 13px;

  color: #666;

  padding: 12px 0 4px;

}