/* ==================== 基础重置 ==================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  font-size: 14px;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background: #f4f6fa;
  color: #333;
  text-align: center;
}

input,
button {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  outline: none;
  font-family: inherit;
}

/* ==================== 顶部 Banner ==================== */
.banner {
  width: 100%;
  height: 25vh;
  overflow: hidden;
  position: relative;
  background: #e8e8e8 center/cover no-repeat;
}

.banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ==================== 搜索栏（单行模式） ==================== */
.search-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
  padding: 12px;
  display: flex;
  align-items: center;      /* 单行垂直居中 */
  gap: 8px;
  background: #fff;
}

/* 单行输入框 - 关键：使用 input 替代 textarea */
.search-input,
#keyword {
  flex: 1;
  height: 48px;             /* 固定高度 */
  line-height: 48px;        /* 垂直居中 */
  padding: 0 16px;          /* 水平内边距，垂直为0 */
  background: #9e9ea0;
  color: #fff;
  caret-color: #07c160;
  border-radius: 22px;
  font-size: 15px;
  overflow: hidden;         /* 防止出现滚动条 */
  white-space: nowrap;      /* 禁止换行 */
  text-overflow: ellipsis;  /* 溢出显示省略号 */
}
#searchBtn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: #ccc;
}
.search-input::placeholder {
  color: #ccc;
}

/* 搜索按钮 */
.search-btn,
.search-bar button {
  width: 100px;
  height: 48px;             /* 与输入框同高 */
  border-radius: 20px;
  background: #07c160;
  color: #fff;
  font-size: 15px;
  flex-shrink: 0;           /* 防止被压缩 */
  cursor: pointer;
}

.search-btn:active,
.search-bar button:active {
  opacity: .8;
}

/* ==================== 九宫格 ==================== */
/* 网格容器 */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px; /* 图片间距 */
  padding: 16px;
  align-items: start; /* 顶部对齐，避免拉伸 */
}

/* 图片自适应 - 修改为完整显示 */
.grid img,grid video {
  width: 100%;      /* 填满容器宽度 */
  height: auto;     /* 高度自适应，保持原始比例 */
  max-height: 300px; /* 最大高度限制，防止过长 */
  object-fit: contain; /* 完整显示图片，保持比例，可能有留白 */
  border-radius: 8px; /* 圆角（可选） */
  cursor: pointer;   /* 可点击手势 */
  transition: transform 0.2s; /* 悬停动画 */
  background: #f0f0f0; /* 背景色填充可能的空白区域 */
  display: block;   /* 消除图片底部间隙 */
}

.grid img:hover {
  transform: scale(1.02); /* 悬停轻微放大 */
}

/* 如果希望所有单元格高度一致，使用以下替代方案 */
.grid-item {
  width: 100%;
  aspect-ratio: 1; /* 正方形比例，或改为 4/3 等 */
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f0f0;
  border-radius: 8px;
  overflow: hidden;
}

.grid-item img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  cursor: pointer;
  transition: transform 0.2s;
}
.grid-item video {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  cursor: pointer;
  transition: transform 0.2s;
}
.grid-item img:hover {
  transform: scale(1.05);
}
/* ==================== 全屏预览蒙层 ==================== */
.overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(0, 0, 0, .85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.overlay img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 90%;
  transform: translate(-50%, -50%);
  border-radius: 8px;
  pointer-events: none;
  user-select: none;
}

.overlay .close {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 32px;
  height: 32px;
  background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE4IDZMNiAxOE02IDZMMTggMTIiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+') center/60% no-repeat;
}

.overlay .save-btn {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  height: 40px;
  padding: 0 24px;
  border-radius: 20px;
  background: #07c160;
  color: #fff;
  font-size: 16px;
  display: none;
}

/* ==================== 提示与错误 ==================== */
.tips {
  text-align: center;
  padding: 40px 16px;
  font-size: 15px;
  color: #999;
}

.err-mask {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  z-index: 2000;
}

.err-toast {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 14px 24px;
  border-radius: 8px;
  background: #fff;
  font-size: 15px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
}