/* =========================================================================
   网页学习制作 — style.css
   HTML 里不写任何 style=""，所有外观都在这里。
   想整体调「松紧」：只改 :root 里的 --gap / --pad / --radius 三个变量即可。
   ========================================================================= */

:root {
  --bg:       #0c0f15;
  --bg-2:     #141a24;
  --panel:    rgba(255, 255, 255, .045);
  --line:     rgba(255, 255, 255, .10);
  --text:     #e8ecf4;
  --muted:    #8b95a7;
  --accent:   #39d0ff;
  --accent-2: #7c5cff;
  --star:     #ffc107;
  --radius:   12px;
  --gap:      10px;   /* 区块之间的统一间距 */
  --pad:      12px;   /* 面板内边距 */
  --shadow:   0 10px 26px rgba(0, 0, 0, .42);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--text);
  font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  background:
    radial-gradient(900px 500px at 10% -8%, rgba(124, 92, 255, .18), transparent 60%),
    radial-gradient(800px 460px at 92% 0, rgba(57, 208, 255, .14), transparent 55%),
    var(--bg);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

/* 统一区块：间距靠 --gap 控制，整体更紧凑 */
.section {
  max-width: 1160px;
  margin: 0 auto var(--gap);
  padding: 0 10px;
}
section[id] { scroll-margin-top: 62px; }   /* 锚点跳转时避开吸顶栏 */

.panel {
  padding: var(--pad);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.sec-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.sec-title { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: .5px; }
.sec-tip { margin-left: auto; font-size: 12px; color: var(--muted); }
.sec-tip b { color: var(--accent); }
.sec-hint { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); }

/* ============================ 1. 顶部导航栏 ============================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--gap);
  padding: 8px 14px;
  background: rgba(12, 15, 21, .82);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.header-logo {
  position: relative;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--line);
}
.header-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.header-title {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: .5px;
  white-space: nowrap;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.header-nav { display: flex; gap: 2px; margin-left: auto; }
.header-nav a {
  padding: 5px 8px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  transition: background .15s, color .15s;
}
.header-nav a:hover { color: var(--text); background: rgba(255, 255, 255, .07); }

/* ============================= 2. 轮播图区 ============================= */
.carousel {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-2);
  box-shadow: var(--shadow);
}

/* 定死比例：图片尺寸不一时轮播才不会一跳一跳。
   素材原图是 2480×1147（约 2.16:1），按原比例显示，说明文字不会被裁掉。 */
.carousel-item img {
  width: 100%;
  aspect-ratio: 2480 / 1147;
  object-fit: cover;
  display: block;
}

.carousel-control-prev,
.carousel-control-next { width: 8%; opacity: .8; transition: opacity .2s; }
.carousel-control-prev:hover,
.carousel-control-next:hover { opacity: 1; }

/* Bootstrap 的 CSS 没加载出来时的兜底轮播（JS 会加 .no-bs） */
.carousel.no-bs .carousel-item { display: none; }
.carousel.no-bs .carousel-item.active { display: block; }

.carousel.no-bs .carousel-control-prev,
.carousel.no-bs .carousel-control-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .45);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.carousel.no-bs .carousel-control-prev { left: 10px; }
.carousel.no-bs .carousel-control-next { right: 10px; }

/* 没有 Bootstrap 图标时用 CSS 三角形画箭头 */
.carousel.no-bs .carousel-control-prev-icon,
.carousel.no-bs .carousel-control-next-icon {
  width: 0;
  height: 0;
  background: none;
  border-style: solid;
}
.carousel.no-bs .carousel-control-prev-icon { border-width: 7px 9px 7px 0; border-color: transparent #fff transparent transparent; }
.carousel.no-bs .carousel-control-next-icon { border-width: 7px 0 7px 9px; border-color: transparent transparent transparent #fff; }

/* ======================== 3. 浏览量（描边 + 填充） ======================== */
.counter-section { padding-top: 2px; padding-bottom: 2px; }   /* 这一行比别的区块略紧 */

.view-counter { position: relative; text-align: center; }

.text-stroke,
.text-fill {
  display: block;
  font-size: clamp(22px, 4.2vw, 36px);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: 1px;
  white-space: nowrap;
}

.text-stroke {
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(255, 255, 255, .40);
}

.text-fill {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  color: var(--accent);
  text-shadow: 0 0 16px rgba(57, 208, 255, .5);
  /* 用 clip-path 从左往右揭开：位置永远和描边层对齐（用 width 会错位） */
  clip-path: inset(0 100% 0 0);
  pointer-events: none;
}

/* ============================ 4. 浏览记录 ============================ */
.log-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 8px;
}
.stat {
  padding: 7px 4px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .04);
}
.stat b { display: block; font-size: 16px; line-height: 1.3; color: var(--accent); }
.stat span { font-size: 11px; color: var(--muted); }

.log-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 128px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}
.log-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .03);
  font-size: 12px;
  color: var(--muted);
}
.log-list .idx { flex: none; width: 34px; color: var(--accent); font-variant-numeric: tabular-nums; }
.log-list .when { color: var(--text); font-variant-numeric: tabular-nums; }
.log-list .ago { margin-left: auto; }
.log-list .empty-tip { justify-content: center; }

/* ==================== 4.5 管理员：密码锁 + 设置面板 ==================== */

/* 顶部那把锁：平时安静待着，鼠标移上去才亮 */
.lock-btn {
  flex: none;
  margin-left: 4px;
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 15px;
  line-height: 1;
  color: var(--muted);
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line);
  border-radius: 9px;
  cursor: pointer;
  transition: background .15s, color .15s, transform .15s;
}
.lock-btn:hover { color: #fff; background: rgba(255, 255, 255, .13); }
.lock-btn:active { transform: scale(.94); }
.lock-btn.on {                                   /* 已登录：描边发蓝光 */
  color: #06121a;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent;
  box-shadow: 0 0 0 3px rgba(57, 208, 255, .16);
}

/* 半透明遮罩：登录框和设置面板都住在里面 */
.admin-mask {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 14px 14px;
  background: rgba(4, 6, 10, .62);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.admin-mask[hidden] { display: none; }           /* hidden 要压过上面的 flex */

/* 小按钮：管理面板里的次要操作（取消 / 收起 / 数据操作）都用它 */
.mini-btn {
  padding: 5px 10px;
  font: inherit;
  font-size: 12px;
  color: var(--muted);
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.mini-btn:hover { color: #fff; background: rgba(255, 255, 255, .13); }

/* 登录卡片 */
.admin-login {
  width: 100%;
  max-width: 320px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-2);
  box-shadow: var(--shadow);
}
.admin-login[hidden] { display: none; }
.login-title { margin: 0 0 4px; font-size: 16px; }
.login-sub { margin: 0 0 12px; font-size: 12px; color: var(--muted); }
.login-err { margin: 6px 0 0; min-height: 16px; font-size: 12px; color: #ff8080; }
.login-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.login-row .mini-btn { margin-left: 0; }
.login-hint { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
.login-hint b { color: var(--accent); }

/* 设置面板：右侧滑入，比小弹框更好改东西 */
.admin-panel {
  width: 100%;
  max-width: 360px;
  max-height: 76vh;
  overflow: auto;
  padding: var(--pad);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-2);
  box-shadow: var(--shadow);
  animation: adminIn .22s ease-out;
}
.admin-panel[hidden] { display: none; }
@keyframes adminIn {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: none; }
}
.admin-body { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.admin-group {
  margin: 10px 0 2px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--accent);
}
.admin-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.admin-field input[type="color"] { height: 32px; padding: 2px 4px; cursor: pointer; }
.admin-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .03);
  font-size: 13px;
  cursor: pointer;
}
.admin-check input { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; }
.admin-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-acts .mini-btn { margin-left: 0; }
.mini-btn.danger { color: #ff9a9a; border-color: rgba(255, 120, 120, .35); }
.mini-btn.danger:hover { color: #fff; background: rgba(255, 90, 90, .22); }
.admin-foot { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.admin-foot .mini-btn { margin: 8px 0 0; }

/* 副标题：管理员填了才显示（默认 hidden） */
.site-slogan { margin: 0 0 0 4px; font-size: 12px; color: var(--muted); }
.site-slogan[hidden] { display: none; }

/* 浏览记录面板本身是只读的：普通访问者在这里找不到任何按钮，
   能改数据的入口全部收在 4.5 的密码锁后面 */

/* =========================== 5. 3D 翻转卡片 =========================== */
.card-wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  perspective: 1000px;   /* 景深，翻转才有立体感 */
}

.card-box {
  position: relative;
  aspect-ratio: 900 / 1273;   /* 和素材原图一致，卡片两边的字不会被裁 */
  transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.2, .75, .25, 1);
  cursor: pointer;
  outline: none;
}
.card-box:hover,
.card-box:focus-visible,
.card-box.flipped { transform: rotateY(180deg); }
.card-box:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius); }

.front,
.back {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-2);
  box-shadow: var(--shadow);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.back { transform: rotateY(180deg); }

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

/* 触屏没有 hover，交给 JS 的 .flipped */
@media (hover: none) {
  .card-box:hover { transform: none; }
  .card-box.flipped { transform: rotateY(180deg); }
}

/* ======================= 6. 视频 + 表情包 ======================= */
.content-row { display: flex; align-items: stretch; gap: var(--gap); }

/* 视频素材是竖屏 480×854，给一个 9:16 的画框，不再硬裁成 16:9 */
.video-wrap {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(57, 208, 255, .10), transparent 60%),
    var(--panel);
  box-shadow: var(--shadow);
}

.video-wrap video {
  display: block;
  width: auto;
  height: clamp(360px, 58vh, 600px);
  max-width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: calc(var(--radius) - 6px);
  background: #000;
}

/* 视频缺失时：把封面图垫在底下，由 JS 设置 --poster 变量 */
.video-wrap.missing {
  background-image: linear-gradient(rgba(0, 0, 0, .55), rgba(0, 0, 0, .55)), var(--poster, none);
  background-size: cover;
  background-position: center;
}

.emoji-panel {
  flex: 1 1 40%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--pad);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}
.panel-title { font-size: 13px; font-weight: 700; }
.panel-tip { margin-left: 6px; font-size: 11px; font-weight: 400; color: var(--muted); }

.emoji-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
  gap: 5px;
  flex: 1;                  /* 撑满面板剩余高度 */
  align-content: center;    /* 表情整体垂直居中，空白均匀分到上下，不会堆在底部 */
  overflow-y: auto;
}
.emoji-wrap button {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, .06);
  cursor: pointer;
  transition: transform .12s, background .15s;
}
.emoji-wrap button:hover { background: rgba(57, 208, 255, .18); transform: translateY(-2px); }
.emoji-wrap button:active { transform: scale(.9); }

/* 面板底部的小提示：把竖屏视频右侧的空白变成有用的说明 */
.emoji-tips {
  margin: 0;
  padding: 10px 0 0;
  list-style: none;
  border-top: 1px dashed var(--line);
  font-size: 12px;
  line-height: 1.9;
  color: var(--muted);
}
.emoji-tips li { position: relative; padding-left: 13px; }
.emoji-tips li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .8em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
}

/* 宽屏上排成 8×5 的键盘：正好 40 个表情，把竖屏视频旁边的高度填满 */
@media (min-width: 993px) {
  .emoji-wrap {
    grid-template-columns: repeat(8, 1fr);
    gap: 6px;
    align-content: center;
  }
  .emoji-wrap button { font-size: 30px; }
}

/* ======================= 7. 客户留言 · 评价 ======================= */
.review-form { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.form-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.grow { flex: 1; }

.field {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(0, 0, 0, .26);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color .15s;
}
.field:focus { border-color: var(--accent); }
.field::placeholder { color: var(--muted); }
.form-row .field { flex: 1; min-width: 130px; }
textarea.field { width: 100%; min-height: 54px; resize: vertical; }

.stars { display: flex; gap: 2px; }
.star-btn {
  padding: 0 2px;
  border: 0;
  background: none;
  font-size: 19px;
  line-height: 1;
  color: rgba(255, 255, 255, .22);
  cursor: pointer;
  transition: transform .12s, color .12s;
}
.star-btn.on { color: var(--star); }
.star-btn:hover { transform: scale(1.15); }

.img-slot {
  flex: none;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 11px;
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: 9px;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.img-slot:hover { border-color: var(--accent); color: var(--accent); }
.img-slot.is-hidden { display: none; }

.img-preview { display: flex; gap: 4px; flex-wrap: wrap; }
.img-preview .thumb {
  position: relative;
  width: 54px;
  height: 54px;
  border: 1px solid var(--line);
  border-radius: 9px;
  overflow: hidden;
}
.img-preview .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-preview .thumb button {
  position: absolute;
  top: 0;
  right: 0;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  border-radius: 0 0 0 6px;
  background: rgba(0, 0, 0, .66);
  color: #fff;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
}

.counter { font-size: 12px; color: var(--muted); }
.counter.full { color: #ff4757; }

.send-btn {
  flex: none;
  padding: 8px 18px;
  border: 0;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #06121a;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: filter .15s, transform .12s;
}
.send-btn:hover { filter: brightness(1.08); }
.send-btn:active { transform: scale(.97); }
.send-btn:disabled { background: #2c3038; color: #7b8494; cursor: not-allowed; }

.review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 8px;
}
.review-grid:empty { display: none; }        /* 没内容就不占位 */

.review {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .045);
  animation: popIn .25s ease;
}
.review-top { display: flex; align-items: center; gap: 8px; }

.avatar {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #06121a;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }

.review-name { font-size: 13px; }
.stars-static { font-size: 12px; letter-spacing: 1px; color: var(--star); }
.review-time { margin-left: auto; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.review-text { margin: 0; font-size: 13px; line-height: 1.6; color: #d5dbe6; word-break: break-word; white-space: pre-wrap; }

.review-imgs { display: flex; gap: 4px; flex-wrap: wrap; }
.review-imgs img {
  width: 62px;
  height: 62px;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.empty-tip {
  grid-column: 1 / -1;
  padding: 8px 0;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
}

/* 预留扩展区：后期把图片/代码写进去，外框和留白已经备好 */
.slot-box {
  margin-top: 10px;
  padding: 10px;
  border: 1px dashed rgba(57, 208, 255, .35);
  border-radius: 10px;
  background: rgba(57, 208, 255, .04);
}
.slot-title { margin-bottom: 8px; font-size: 12px; color: var(--accent); }
.slot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }

/* 预留区里的两张图：原比例缩略图，点开看大图，不裁掉画面里的字 */
.slot-grid { display: flex; flex-wrap: wrap; gap: 14px; }

.slot-pic { display: block; width: 190px; text-decoration: none; }
.slot-pic img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0a0e15;
  transition: border-color .15s, transform .15s;
}
.slot-pic:hover img { border-color: rgba(57, 208, 255, .6); transform: translateY(-2px); }
.slot-pic span { display: block; margin-top: 5px; font-size: 11px; color: var(--muted); }
.slot-pic:hover span { color: var(--text); }

/* ============ 9. 十二生肖：查年龄看生肖（写在预留扩展区里） ============ */
.zodiac {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid rgba(240, 214, 160, .26);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(240, 214, 160, .08), rgba(240, 214, 160, .02));
  scroll-margin-top: 62px;            /* 从导航点“生肖”跳过来时不被吸顶栏挡住 */
}
.zodiac .sec-title { color: #f0d9a8; }

/* 9.1 表单：年龄 / 年份 / 按钮排一行，窄屏自动折行 */
.zodiac-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.zodiac-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.zodiac-field input {
  width: 116px;
  padding: 7px 10px;
  font-size: 15px;
  /* 数字输入框去掉上下小箭头，看起来干净些 */
  -moz-appearance: textfield;
  appearance: textfield;
}
.zodiac-field input::-webkit-outer-spin-button,
.zodiac-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.zodiac-or { padding-bottom: 8px; font-size: 12px; color: var(--muted); }
.zodiac-msg { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
.zodiac-msg.is-err { color: #ff9b8a; }

/* 9.2 结果卡片：左边竖版生肖图谱，右边文字 */
.zodiac-card {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  margin-top: 12px;
}
.zodiac-card[hidden] { display: none; }
.zodiac-picbox { min-width: 0; }
.zodiac-pic {
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #0a0e15;
  box-shadow: var(--shadow);
}
.zodiac-pic img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1600 / 2263;    /* 海报原比例，图没到之前也不会跳版 */
  object-fit: cover;
}
.zodiac-pic:hover { border-color: rgba(240, 214, 160, .6); }
.zodiac-pic-tip { margin: 6px 0 0; text-align: center; font-size: 11px; color: var(--muted); }
.zodiac-pic.is-pop { animation: zodiac-pop .5s cubic-bezier(.2, .9, .3, 1.35); }
@keyframes zodiac-pop {
  from { opacity: 0; transform: scale(.68) rotate(-9deg); }
  to   { opacity: 1; transform: none; }
}

.zodiac-info { min-width: 0; }
.zodiac-name { margin: 2px 0 0; font-size: 22px; font-weight: 800; letter-spacing: 1px; color: #f6e2b4; }
.zodiac-desc { margin: 6px 0 0; font-size: 13px; line-height: 1.65; color: #cfd6e2; }

.zodiac-rows { margin-top: 8px; }
.zodiac-row { display: flex; gap: 8px; margin: 3px 0; font-size: 12px; line-height: 1.5; }
.zodiac-row span { flex: none; width: 82px; color: var(--muted); }
.zodiac-row b { font-weight: 600; color: #f0d9a8; }

.zodiac-years { margin-top: 10px; }
.zodiac-years-tip { display: block; margin-bottom: 5px; font-size: 12px; color: var(--muted); }
.zodiac-years-list { display: flex; flex-wrap: wrap; gap: 6px; }
.zodiac-year {
  padding: 3px 9px;
  font: inherit;
  font-size: 12px;
  color: var(--text);
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.zodiac-year:hover { color: #f0d9a8; border-color: rgba(240, 214, 160, .65); }
.zodiac-year.is-now { color: #f0d9a8; background: rgba(240, 214, 160, .16); border-color: #f0d9a8; }

.zodiac-note {
  margin: 10px 0 0;
  padding: 6px 10px;
  border-left: 2px solid rgba(240, 214, 160, .6);
  border-radius: 0 6px 6px 0;
  background: rgba(240, 214, 160, .07);
  font-size: 12px;
  line-height: 1.6;
  color: #e7dcc4;
}
.zodiac-note[hidden] { display: none; }
.zodiac-link {
  padding: 0;
  font: inherit;
  color: var(--accent);
  background: none;
  border: 0;
  border-bottom: 1px dashed rgba(57, 208, 255, .6);
  cursor: pointer;
}
.zodiac-link:hover { color: #fff; }

/* 9.3 十二生肖一览：竖版海报缩略图，桌面一行 6 张、两行正好十二个 */
.zodiac-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}
.zodiac-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 5px 5px 6px;
  font: inherit;
  font-size: 11px;
  color: var(--muted);
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s, transform .15s;
}
/* 竖版海报缩略图：按原比例裁切，一行 12 张也不挤 */
.zodiac-item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1600 / 2263;
  object-fit: cover;
  border-radius: 5px;
}
.zodiac-item:hover { color: var(--text); border-color: rgba(240, 214, 160, .6); transform: translateY(-2px); }
.zodiac-item.is-on { color: #f0d9a8; background: rgba(240, 214, 160, .14); border-color: #f0d9a8; }
.zodiac-hint { margin: 10px 0 0; font-size: 12px; line-height: 1.55; color: var(--muted); }

/* 9.4 查询记录：每次查生肖留一条，存在本机浏览器里 */
.zodiac-log {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed rgba(240, 214, 160, .3);
}
.zodiac-log-head { display: flex; align-items: center; gap: 8px; }
.zodiac-log-title { font-size: 13px; font-weight: 700; color: #f0d9a8; }
.zodiac-log-count { font-size: 12px; color: var(--muted); }
.zodiac-log-head .mini-btn { margin-left: auto; padding: 3px 8px; font-size: 11px; }

.zodiac-log-list { margin: 8px 0 0; padding: 0; list-style: none; }
.zodiac-log-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-size: 12px;
  border-bottom: 1px dotted rgba(255, 255, 255, .08);
}
.zodiac-log-item:last-child { border-bottom: 0; }
.zodiac-log-item img { flex: none; width: 24px; height: 34px; display: block; border-radius: 3px; object-fit: cover; }
.zodiac-log-what { color: var(--text); }
.zodiac-log-res { color: #f0d9a8; }
.zodiac-log-time {
  margin-left: auto;
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.zodiac-log-empty { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.zodiac-log-empty[hidden] { display: none; }
.zodiac-log-tip { margin: 8px 0 0; font-size: 12px; line-height: 1.55; color: var(--muted); }

/* ============================ 页脚 / 提示 ============================ */
.site-footer { padding: 4px 0 18px; text-align: center; font-size: 12px; color: var(--muted); }

.toast {
  position: fixed;
  left: 50%;
  bottom: 46px;
  z-index: 999;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .84);
  font-size: 13px;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 8px);
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ==================== 8. 素材缺失时的占位（JS 打标） ==================== */
.missing {
  position: relative;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(124, 92, 255, .22), rgba(57, 208, 255, .12));
}
.missing img,
.missing video { visibility: hidden; }

.missing::after {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
  color: #cfd6e2;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .8);
  background: rgba(8, 10, 14, .45);
  white-space: pre-line;
}
.carousel-item.missing { aspect-ratio: 2480 / 1147; }
.header-logo.missing::after { font-size: 9px; }

/* ============================== 响应式 ============================== */
@media (max-width: 992px) {
  .card-wrap { grid-template-columns: repeat(2, 1fr); }
  .content-row { flex-direction: column; }
  .video-wrap,
  .emoji-panel { flex: 1 1 auto; width: 100%; }
  .video-wrap video { height: clamp(320px, 52vh, 540px); }
}

@media (max-width: 768px) {
  .review-grid { grid-template-columns: 1fr; }
  .slot-pic { width: 46%; }

  /* 生肖结果：海报挪到上面居中，说明文字铺满 */
  .zodiac-card { grid-template-columns: 1fr; gap: 12px; }
  .zodiac-picbox { width: min(230px, 62%); margin: 0 auto; }
  .zodiac-row span { width: 76px; }
  /* 十二生肖一览：窄屏一行 4 张 */
  .zodiac-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .zodiac-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* 两个输入框 + “或” 摆成一行，按钮自动换到第二行，避免把页面撑宽 */
  .zodiac-form { display: flex; }
  .zodiac-form .zodiac-field { flex: 1 1 128px; min-width: 0; }
  .zodiac-field input { width: 100%; min-width: 0; }
  .zodiac-or { padding-bottom: 9px; }
}

@media (max-width: 640px) {
  .header-nav { display: none; }
}

@media (max-width: 520px) {
  .log-stats { grid-template-columns: repeat(2, 1fr); }
  .sec-title { font-size: 14px; }
}

/* ========================= 动画减弱偏好（无障碍） ========================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}