@charset "utf-8";
/* ============================================================
 * Movie8 影视简介站主题 · 样式
 * 设计语言：影院夜幕（深色底）+ 琥珀金强调 + 硬朗直线条（小圆角）
 * 版式契約（改动前必读，防止页面割裂）：
 *   1. 所有内页共用同一套外壳： .m8-head （面包屑 + 唯一 H1）
 *      与 .m8-main （内容主体），两者都不带左右内距，内距由 .m8-wrap 承担。
 *   2. 区块间距一律只用 margin-top + 首块清零，绝不写 margin-bottom，
 *      否则接在分页 / 卡片网格 / 空态等非区块元素后面会变成 0 间距。
 *   3. 栅格列一律 minmax(0,1fr)，卡片一律 min-width:0，长片名必须截断。
 *   4. 海报全站一个比例 --m8-poster-ratio，任何位置不许写死高度。
 *   5. 颜色只走变量，禁止硬编码色值；手机端只改变量值。
 * ============================================================ */

:root{
  /* —— 影院夜幕—— */
  --m8-bg:        #0E0D0C;
  --m8-bg-deep:   #080706;
  --m8-surface:   #1A1815;
  --m8-surface-2: #221F1B;
  --m8-line:      #2E2A24;
  --m8-line-2:    #453F36;
  --m8-text:      #F5F1EA;
  --m8-text-2:    #ADA497;
  --m8-text-3:    #7C7568;

  /* —— 琥珀金强调 + 朱红点缀—— */
  --m8-gold:      #E3A857;
  --m8-gold-2:    #C2863A;
  /* 强调色的 13% 透明底（导航下拉 hover、hero 光晕等）：由主强调色派生，
     站主只需调 --m8-gold，这个底衬自动跟着变，不用单独配。
     🔑 同一变量写两遍：不认 color-mix() 的旧浏览器用第一行（固定 rgba），
        认的浏览器用第二行覆盖。不能只写 color-mix —— 变量失效不会回退，
        会让整个 background 声明跟着失效（导航下拉 hover 直接没底色）。 */
  --m8-gold-soft: rgba(227,168,87,.13);
  --m8-gold-soft: color-mix(in srgb, var(--m8-gold) 13%, transparent);
  --m8-red:       #D4553C;
  /* 金色底上用的深色字（金底必须换深色，用浅色看不清） */
  --m8-on-gold:   #241A0B;
  /* 图上半透明衬底（海报角标等）：同理写两遍，跟随深背景色派生 */
  --m8-scrim:     rgba(8,7,6,.78);
  --m8-scrim:     color-mix(in srgb, var(--m8-bg-deep) 78%, transparent);

  /* —— 尺寸—— */
  --m8-container: 1200px;
  --m8-pad:        28px;
  --m8-gap:        22px;
  --m8-gap-lg:     46px;
  --m8-radius:     6px;
  --m8-radius-sm:  4px;
  --m8-poster-ratio: 2 / 3;

  /* —— 字体：全本地系统字体栈，零 CDN—— */
  --m8-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
             "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC",
             "Noto Sans CJK SC", sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

/* overflow-wrap 全局，防止长英文片名撑破布局 */
html{ overflow-wrap:anywhere; }
body{
  margin:0;
  background:var(--m8-bg);
  color:var(--m8-text);
  font-family:var(--m8-font);
  font-size:15px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--m8-gold); text-decoration:none; transition:color .18s ease; }
a:hover{ color:var(--m8-gold-2); }
img{ max-width:100%; height:auto; display:block; border:0; }
h1,h2,h3,h4{ margin:0; font-weight:600; line-height:1.4; color:var(--m8-text); }
p{ margin:0; }
ul,ol,dl,dd{ margin:0; padding:0; list-style:none; }

/* ===== 通用容器：所有页面的左右内距与最大宽度都由它统一 ===== */
.m8-wrap{
  width:100%;
  max-width:var(--m8-container);
  margin:0 auto;
  padding-left:var(--m8-pad);
  padding-right:var(--m8-pad);
}

/* ===== 区块契约：只用 margin-top ===== */
.m8-sec{ margin-top:var(--m8-gap-lg); }
.m8-sec:first-child{ margin-top:0; }

.m8-sec-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  padding-bottom:14px;
  margin-bottom:20px;
  border-bottom:1px solid var(--m8-line);
}
.m8-sec-title{
  font-size:19px;
  letter-spacing:.02em;
  position:relative;
  padding-left:14px;
}
.m8-sec-title::before{
  content:"";
  position:absolute;
  left:0; top:.35em; bottom:.35em;
  width:4px;
  background:var(--m8-gold);
  border-radius:2px;
}
.m8-sec-more{ font-size:13px; color:var(--m8-text-3); }

/* ============================================================
 * 页头：纯深色顶栏
 * ============================================================ */
.m8-top{
  background:var(--m8-bg-deep);
  border-bottom:1px solid var(--m8-line);
}
.m8-top-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:66px;
}
.m8-logo{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:19px;
  font-weight:600;
  color:var(--m8-text);
  min-width:0;
}
.m8-logo:hover{ color:var(--m8-gold); }
.m8-logo-mark{
  flex:0 0 auto;
  width:28px; height:28px;
  border:2px solid var(--m8-gold);
  border-radius:50%;
  position:relative;
}
.m8-logo-mark::after{
  content:"";
  position:absolute;
  inset:6px;
  background:var(--m8-gold);
  border-radius:50%;
}
.m8-logo-text{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.m8-nav ul{
  display:flex;
  align-items:center;
  gap:26px;
}
.m8-nav a{
  color:var(--m8-text-2);
  font-size:14px;
  white-space:nowrap;
}
.m8-nav a:hover{ color:var(--m8-gold); }
/* 系统 navbar 模块输出的是 li 片段，可能带嵌套 ul：默认隐藏，桌面 hover 下拉 */
.m8-nav ul ul{
  display:none;
  position:absolute;
  z-index:60;
  min-width:170px;
  margin-top:10px;
  padding:8px 0;
  background:var(--m8-surface);
  border:1px solid var(--m8-line);
  border-radius:var(--m8-radius);
}
.m8-nav li{ position:relative; }
.m8-nav li:hover > ul{ display:block; }
.m8-nav ul ul ul{ left:100%; top:0; margin:0 0 0 8px; }
.m8-nav ul ul li{ padding:0; }
.m8-nav ul ul a{ display:block; padding:7px 18px; color:var(--m8-text-2); }
.m8-nav ul ul a:hover{ background:var(--m8-gold-soft); color:var(--m8-gold); }

/* 汉堡按钮：桌面默认隐藏，仅 ≤760px 出现（见下方媒体查询） */
.m8-burger{
  display:none;
  flex:0 0 auto;
  width:40px; height:40px;
  padding:0;
  border:1px solid var(--m8-line);
  border-radius:8px;
  background:transparent;
  cursor:pointer;
  position:relative;
}
.m8-burger span{
  display:block;
  position:absolute;
  left:50%; width:18px; height:2px;
  margin-left:-9px;
  background:var(--m8-text);
  border-radius:2px;
  transition:transform .22s ease, opacity .18s ease;
}
.m8-burger span:nth-child(1){ top:13px; }
.m8-burger span:nth-child(2){ top:19px; }
.m8-burger span:nth-child(3){ top:25px; }
/* 展开态：三道杠变叉 */
.m8-burger.is-active span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.m8-burger.is-active span:nth-child(2){ opacity:0; }
.m8-burger.is-active span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ============================================================
 * 页面外壳（契约核心）：每个内页都必须是「.m8-head + .m8-body」
 * ============================================================ */
.m8-main{ padding-top:var(--m8-gap-lg); padding-bottom:64px; }

.m8-head{
  background:linear-gradient(180deg, var(--m8-surface) 0%, var(--m8-bg) 100%);
  border-bottom:1px solid var(--m8-line);
  padding:38px 0 30px;
}
.m8-crumbs{
  font-size:13px;
  color:var(--m8-text-3);
  margin-bottom:14px;
}
.m8-crumbs a{ color:var(--m8-text-2); }
.m8-crumbs a:hover{ color:var(--m8-gold); }
.m8-crumbs span{ margin:0 8px; color:var(--m8-line-2); }
.m8-h1{
  font-size:30px;
  line-height:1.32;
  letter-spacing:.01em;
}
.m8-head-sub{
  margin-top:12px;
  color:var(--m8-text-2);
  font-size:14px;
}
.m8-head-count{
  margin-left:10px;
  padding:2px 10px;
  font-size:13px;
  color:var(--m8-gold);
  background:var(--m8-gold-soft);
  border-radius:999px;
}
/* 管理员快捷「编辑」入口（仅 root 权限可见，模板侧已判权）：
   轻量文字链，跟标题基线对齐，不抢视觉焦点。 */
.m8-edit{
  margin-left:10px;
  font-size:14px;
  font-weight:400;
  color:var(--m8-text-3);
  vertical-align:middle;
}
.m8-edit:hover{ color:var(--m8-gold); text-decoration:underline; }

/* ============================================================
 * 首页 · 今日推荐横幅
 * ============================================================ */
.m8-hero{
  border:1px solid var(--m8-line);
  border-radius:var(--m8-radius);
  background:
    radial-gradient(120% 140% at 100% 0%, var(--m8-gold-soft) 0%, transparent 55%),
    var(--m8-surface);
  padding:38px var(--m8-pad);
  text-align:center;
}
.m8-hero-title{
  font-size:30px;
  letter-spacing:.02em;
}
.m8-hero-desc{
  margin-top:14px;
  color:var(--m8-text-2);
  font-size:15px;
  max-width:720px;
  margin-left:auto;
  margin-right:auto;
}
.m8-search{
  margin-top:26px;
  display:flex;
  gap:10px;
  max-width:560px;
  margin-left:auto;
  margin-right:auto;
}
.m8-search input{
  flex:1 1 auto;
  min-width:0;
  height:46px;
  padding:0 16px;
  color:var(--m8-text);
  background:var(--m8-bg-deep);
  border:1px solid var(--m8-line-2);
  border-radius:var(--m8-radius);
  font-family:var(--m8-font);
  font-size:15px;
}
.m8-search input::placeholder{ color:var(--m8-text-3); }
.m8-search input:focus{
  outline:none;
  border-color:var(--m8-gold);
}
.m8-search button{
  flex:0 0 auto;
  height:46px;
  padding:0 26px;
  color:var(--m8-on-gold);
  background:var(--m8-gold);
  border:0;
  border-radius:var(--m8-radius);
  font-family:var(--m8-font);
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  transition:background .18s ease;
}
.m8-search button:hover{ background:var(--m8-gold-2); }

/* ============================================================
 * 类型入口（分类网格）
 * ============================================================ */
.m8-cates{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  gap:12px;
}
.m8-cate{
  display:block;
  padding:14px 16px;
  background:var(--m8-surface);
  border:1px solid var(--m8-line);
  border-radius:var(--m8-radius);
  transition:border-color .18s ease, transform .18s ease;
}
.m8-cate:hover{
  border-color:var(--m8-gold);
  transform:translateY(-2px);
}
.m8-cate-name{
  display:block;
  font-size:15px;
  color:var(--m8-text);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.m8-cate-num{
  display:block;
  margin-top:4px;
  font-size:12px;
  color:var(--m8-text-3);
  font-variant-numeric:tabular-nums;
}
.m8-cate:hover .m8-cate-name{ color:var(--m8-gold); }

/* ============================================================
 * 海报卡片网格（全站统一）
 * ============================================================ */
.m8-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
  gap:var(--m8-gap);
  grid-auto-rows:1fr;
}
.m8-card{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.m8-poster{
  position:relative;
  aspect-ratio:var(--m8-poster-ratio);
  overflow:hidden;
  border-radius:var(--m8-radius);
  background:var(--m8-surface-2);
  border:1px solid var(--m8-line);
}
.m8-poster img{
  width:100%; height:100%;
  object-fit:cover;
}
/* 没有图时的 CSS 占位：渐变 + 片名，零 GD、零字体依赖 */
.m8-poster-fallback{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%; height:100%;
  padding:14px;
  background:
    radial-gradient(90% 70% at 50% 0%, var(--m8-surface-2) 0%, var(--m8-bg-deep) 100%);
  color:var(--m8-text-3);
  font-size:14px;
  text-align:center;
  line-height:1.5;
  overflow:hidden;
}
.m8-poster-fallback span{
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.m8-card:hover .m8-poster{ border-color:var(--m8-gold); }
.m8-poster-score{
  position:absolute;
  top:0; right:0;
  padding:4px 9px;
  background:var(--m8-gold);
  color:var(--m8-on-gold);
  font-size:12px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  border-bottom-left-radius:var(--m8-radius-sm);
}
.m8-poster-type{
  position:absolute;
  bottom:0; left:0;
  padding:3px 8px;
  background:var(--m8-scrim);
  color:var(--m8-text-2);
  font-size:11px;
  border-top-right-radius:var(--m8-radius-sm);
}
.m8-card-body{ padding-top:10px; min-width:0; }
.m8-card-title{
  font-size:15px;
  font-weight:500;
  color:var(--m8-text);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.m8-card:hover .m8-card-title{ color:var(--m8-gold); }
.m8-card-sub{
  margin-top:5px;
  font-size:12px;
  color:var(--m8-text-3);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

/* ============================================================
 * 榜单 / 排行列表（数字编号醒目）
 * ============================================================ */
.m8-ranklink{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  gap:14px;
}
.m8-ranklink a{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 16px;
  background:var(--m8-surface);
  border:1px solid var(--m8-line);
  border-radius:var(--m8-radius);
  color:var(--m8-text);
  transition:border-color .18s ease;
}
.m8-ranklink a:hover{ border-color:var(--m8-gold); color:var(--m8-gold); }
.m8-ranklink em{
  flex:0 0 auto;
  font-style:normal;
  font-size:22px;
  font-weight:600;
  color:var(--m8-gold);
  font-variant-numeric:tabular-nums;
  min-width:34px;
}
.m8-ranklink span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:15px;
}

/* ============================================================
 * 影视详情页
 * ============================================================ */
.m8-movie{
  display:grid;
  grid-template-columns:240px minmax(0,1fr);
  gap:30px;
  align-items:start;
}
.m8-movie-poster{
  aspect-ratio:var(--m8-poster-ratio);
  overflow:hidden;
  border-radius:var(--m8-radius);
  border:1px solid var(--m8-line);
  background:var(--m8-surface-2);
}
.m8-movie-poster img{ width:100%; height:100%; object-fit:cover; }

/* 影视资料表：横向「标签：值」成对排列（对齐电影站常见版式）。
   两列网格 = 同一行放两项（地区｜类型、语言｜年份），窄屏自动收成一列。 */
.m8-facts{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px 28px;
  margin-bottom:18px;
}
.m8-facts > div{
  display:flex;
  align-items:baseline;
  gap:6px;
  min-width:0;
}
.m8-facts dt{
  flex:0 0 auto;
  font-size:12px;
  color:var(--m8-text-3);
  letter-spacing:.06em;
}
.m8-facts dt::after{ content:':'; }
.m8-facts dd{
  min-width:0;
  font-size:14.5px;
  color:var(--m8-text);
  overflow-wrap:anywhere;
}
.m8-facts dd a{ color:var(--m8-gold); }

.m8-score-big{
  display:inline-flex;
  align-items:baseline;
  gap:4px;
  padding:6px 14px;
  background:var(--m8-gold-soft);
  border:1px solid var(--m8-gold);
  border-radius:var(--m8-radius);
}
.m8-score-big strong{
  font-size:24px;
  color:var(--m8-gold);
  font-weight:600;
  font-variant-numeric:tabular-nums;
  line-height:1;
}
.m8-score-big small{ font-size:12px; color:var(--m8-text-3); }

/* 看点短评 */
.m8-points li{
  position:relative;
  padding-left:20px;
  margin-top:10px;
  color:var(--m8-text-2);
}
.m8-points li:first-child{ margin-top:0; }
.m8-points li::before{
  content:"";
  position:absolute;
  left:0; top:.72em;
  width:7px; height:7px;
  background:var(--m8-gold);
  border-radius:1px;
}

/* 正文排版 */
.m8-content{
  color:var(--m8-text-2);
  font-size:15.5px;
  line-height:1.85;
}
.m8-content p{ margin-top:16px; }
.m8-content p:first-child{ margin-top:0; }
.m8-content h2{
  margin-top:30px;
  padding-left:12px;
  border-left:3px solid var(--m8-gold);
  font-size:19px;
  color:var(--m8-text);
}
.m8-content h3{ margin-top:24px; font-size:16px; color:var(--m8-text); }
.m8-content img{
  margin:18px auto;
  border-radius:var(--m8-radius);
  border:1px solid var(--m8-line);
}
.m8-content a{ color:var(--m8-gold); text-decoration:underline; text-underline-offset:3px; }
.m8-content ul li{ margin-top:8px; padding-left:18px; position:relative; }
.m8-content ul li::before{
  content:"";
  position:absolute; left:0; top:.75em;
  width:5px; height:5px; background:var(--m8-text-3); border-radius:50%;
}

/* 榜单页片单 */
.m8-ranklist li{
  display:flex;
  gap:16px;
  padding:16px 0;
  border-top:1px dashed var(--m8-line);
}
.m8-ranklist li:first-child{ border-top:0; }
.m8-ranklist em{
  flex:0 0 auto;
  width:38px;
  font-style:normal;
  font-size:20px;
  font-weight:600;
  color:var(--m8-gold);
  font-variant-numeric:tabular-nums;
  line-height:1.4;
}
.m8-ranklist-body{ min-width:0; }
.m8-ranklist-title{
  font-size:16px;
  color:var(--m8-text);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  display:block;
}
.m8-ranklist-title:hover{ color:var(--m8-gold); }
.m8-ranklist-note{
  margin-top:4px;
  font-size:13px;
  color:var(--m8-text-3);
}

/* 相关推荐一行式文字链 */
.m8-links{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:10px 20px;
}
.m8-links a{
  display:block;
  padding:8px 0;
  border-bottom:1px dashed var(--m8-line);
  color:var(--m8-text-2);
  font-size:14px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.m8-links a:hover{ color:var(--m8-gold); }

/* 标签云 */
.m8-tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.m8-tags a{
  padding:5px 13px;
  font-size:13px;
  color:var(--m8-text-2);
  background:var(--m8-surface);
  border:1px solid var(--m8-line);
  border-radius:999px;
}
.m8-tags a:hover{ color:var(--m8-gold); border-color:var(--m8-gold); }

/* 上下篇 */
.m8-postnav{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:12px;
}
.m8-postnav a{
  display:block;
  padding:14px 16px;
  background:var(--m8-surface);
  border:1px solid var(--m8-line);
  border-radius:var(--m8-radius);
  font-size:14px;
  color:var(--m8-text-2);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.m8-postnav a:hover{ border-color:var(--m8-gold); color:var(--m8-gold); }
.m8-postnav .m8-postnav-to{
  text-align:right;
}

/* ============================================================
 * 分页
 * ============================================================ */
.m8-pager{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-top:var(--m8-gap-lg);
}
.m8-pager a,
.m8-pager .now{
  padding:7px 14px;
  font-size:14px;
  background:var(--m8-surface);
  border:1px solid var(--m8-line);
  border-radius:var(--m8-radius);
  color:var(--m8-text-2);
}
.m8-pager a:hover{ border-color:var(--m8-gold); color:var(--m8-gold); }
.m8-pager .now{
  background:var(--m8-gold);
  border-color:var(--m8-gold);
  color:var(--m8-on-gold);
  font-weight:600;
}

/* ============================================================
 * 空态 / 404
 * ============================================================ */
.m8-empty{
  padding:56px 24px;
  text-align:center;
  color:var(--m8-text-3);
  background:var(--m8-surface);
  border:1px dashed var(--m8-line-2);
  border-radius:var(--m8-radius);
  font-size:15px;
}
.m8-errnum{
  font-size:88px;
  font-weight:600;
  color:var(--m8-gold);
  line-height:1;
  font-variant-numeric:tabular-nums;
  text-align:center;
}
.m8-errtxt{
  margin-top:18px;
  text-align:center;
  color:var(--m8-text-2);
}
.m8-errbox{ padding:60px 0; max-width:640px; margin:0 auto; }

/* ============================================================
 * 页脚
 * ============================================================ */
.m8-foot{
  margin-top:70px;
  padding:36px 0 30px;
  background:var(--m8-bg-deep);
  border-top:1px solid var(--m8-line);
  color:var(--m8-text-3);
  font-size:13px;
}
.m8-foot-inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.m8-foot a{ color:var(--m8-text-2); }
.m8-foot a:hover{ color:var(--m8-gold); }
.m8-foot-copy{
  min-width:0;
  line-height:1.9;
}
/* 后台「版权说明」整段输出区：独立成块、宽度占满，长文案 / 多行 / 统计代码都能容纳 */
.m8-foot-extra{
  flex:1 0 100%;
  min-width:0;
  margin-top:4px;
  line-height:1.9;
  word-break:break-word;
  overflow-wrap:anywhere;
}
.m8-foot-extra img{ max-width:100%; height:auto; }
.m8-foot-nav{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
}

/* ============================================================
 * 评论区（文章页）
 * ============================================================ */
.m8-cmt-num{
  display:inline-block;
  margin-left:8px;
  padding:1px 9px;
  font-size:12px;
  font-weight:600;
  line-height:1.7;
  vertical-align:middle;
  color:var(--m8-on-gold);
  background:var(--m8-gold);
  border-radius:999px;
}

/* —— 列表 —— */
.m8-cmt-list,
.m8-cmt-children{
  list-style:none;
  margin:0;
  padding:0;
}
.m8-cmt-item{
  padding:18px 0;
  border-bottom:1px solid var(--m8-line);
}
.m8-cmt-item:last-child{ border-bottom:0; padding-bottom:0; }
.m8-cmt-head{
  display:flex;
  align-items:center;
  gap:12px;
}
.m8-cmt-avatar{
  flex:0 0 auto;
  width:40px;
  height:40px;
  border-radius:50%;
  background:var(--m8-surface-2);
  border:1px solid var(--m8-line);
  object-fit:cover;
}
.m8-cmt-meta{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.m8-cmt-name{
  font-size:14px;
  font-weight:600;
  color:var(--m8-text);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.m8-cmt-name:hover{ color:var(--m8-gold); }
.m8-cmt-time{
  font-size:12px;
  color:var(--m8-text-3);
}
.m8-cmt-reply{
  flex:0 0 auto;
  padding:4px 12px;
  font-size:12.5px;
  color:var(--m8-text-2);
  background:var(--m8-surface);
  border:1px solid var(--m8-line);
  border-radius:var(--m8-radius-sm);
}
.m8-cmt-reply:hover{
  color:var(--m8-gold);
  border-color:var(--m8-gold);
}
.m8-cmt-body{
  margin-top:10px;
  padding-left:52px;
  font-size:14.5px;
  line-height:1.85;
  color:var(--m8-text-2);
  word-wrap:break-word;
  overflow-wrap:break-word;
}
.m8-cmt-body p{ margin:0 0 8px; }
.m8-cmt-body p:last-child{ margin-bottom:0; }
.m8-cmt-body a{ color:var(--m8-gold); }
.m8-cmt-body img{ max-width:100%; height:auto; border-radius:var(--m8-radius-sm); }

/* 嵌套回复：左侧竖线 + 递进缩进 */
.m8-cmt-children{
  margin-top:16px;
  padding-left:22px;
  border-left:2px solid var(--m8-line);
}
.m8-cmt-children .m8-cmt-item{ padding:14px 0; }
.m8-cmt-children .m8-cmt-body{ padding-left:52px; }

.m8-cmt-empty{
  margin:0;
  padding:34px 20px;
  text-align:center;
  font-size:14px;
  color:var(--m8-text-3);
  background:var(--m8-surface);
  border:1px dashed var(--m8-line-2);
  border-radius:var(--m8-radius);
}
.m8-cmt-pager{ margin-top:26px; }

/* —— 发布框 —— */
.m8-cmt-form{
  margin-top:26px;
  padding:22px;
  background:var(--m8-surface);
  border:1px solid var(--m8-line);
  border-radius:var(--m8-radius);
}
.m8-cmt-formhead{
  margin:0 0 16px;
  font-size:15px;
  font-weight:600;
  color:var(--m8-text);
}
.m8-cmt-formhead a{ color:inherit; }
.m8-cmt-formhead small{ color:var(--m8-text-3); font-weight:400; }
.m8-cmt-fields{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:12px;
}
.m8-cmt-fields p,
.m8-cmt-verify{
  margin:0;
  display:flex;
  align-items:center;
  gap:10px;
}
.m8-cmt-fields label,
.m8-cmt-verify label{
  flex:0 0 auto;
  font-size:12.5px;
  color:var(--m8-text-3);
}
.m8-cmt-verify{
  margin-top:12px;
}
.m8-cmt-verify img{
  height:34px;
  cursor:pointer;
  border:1px solid var(--m8-line);
  border-radius:var(--m8-radius-sm);
}
.m8-cmt-textwrap{ margin:14px 0 0; }
.m8-cmt-submitwrap{ margin:14px 0 0; }

/* 表单控件（暗色化） */
.m8-cmt-form input[type=text],
.m8-cmt-form textarea{
  flex:1 1 auto;
  min-width:0;
  width:100%;
  padding:10px 13px;
  font-family:inherit;
  font-size:14px;
  color:var(--m8-text);
  background:var(--m8-bg);
  border:1px solid var(--m8-line);
  border-radius:var(--m8-radius-sm);
  transition:border-color .15s ease;
}
.m8-cmt-form input[type=text]::placeholder,
.m8-cmt-form textarea::placeholder{ color:var(--m8-text-3); }
.m8-cmt-form input[type=text]:focus,
.m8-cmt-form textarea:focus{
  outline:none;
  border-color:var(--m8-gold);
}
.m8-cmt-form textarea{
  display:block;
  resize:vertical;
  line-height:1.8;
}
.m8-cmt-form input[type=submit],
.m8-cmt-form .button{
  padding:10px 30px;
  font-family:inherit;
  font-size:14.5px;
  font-weight:600;
  color:var(--m8-on-gold);
  background:var(--m8-gold);
  border:0;
  border-radius:var(--m8-radius-sm);
  cursor:pointer;
  transition:background .15s ease;
}
.m8-cmt-form input[type=submit]:hover,
.m8-cmt-form .button:hover{ background:var(--m8-gold-2); }

/* ============================================================
 * 响应式：mobile-first，只在缩小断点做减法
 * ============================================================ */
@media (max-width:1020px){
  :root{ --m8-container:100%; }
}

@media (max-width:760px){
  :root{
    --m8-pad:18px;
    --m8-gap:14px;
    --m8-gap-lg:32px;
  }
  body{ font-size:14.5px; }

  .m8-top-inner{
    min-height:56px;
    flex-wrap:nowrap;
  }
  /* 手机：导航收成汉堡菜单，点按后从页头下方展开（默认隐藏，不占位） */
  .m8-burger{ display:block; }
  .m8-nav{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    z-index:80;
    display:none;
    max-height:calc(100vh - 56px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding:8px 0;
    background:var(--m8-bg-deep);
    border-bottom:1px solid var(--m8-line);
    box-shadow:0 12px 24px rgba(0,0,0,.32);
  }
  .m8-nav.is-open{ display:block; }
  /* 面板内导航改为竖向列表；系统 navbar 的嵌套 ul 一并展开（手机无 hover，不能靠悬停） */
  .m8-nav ul{
    display:block;
    gap:0;
  }
  .m8-nav li{ display:block; }
  .m8-nav a{ display:block; padding:11px 18px; font-size:15px; }
  .m8-nav ul ul{
    display:block !important;
    position:static;
    min-width:0;
    margin:0;
    padding:0;
    border:0;
    background:transparent;
    box-shadow:none;
  }
  .m8-nav ul ul a{ padding-left:36px; font-size:14px; }
  .m8-nav ul ul ul a{ padding-left:52px; }
  /* 保持相对定位，让绝对定位的导航面板以页头为参照 */
  .m8-top{ position:relative; }

  .m8-h1{ font-size:23px; }
  .m8-hero{ padding:26px 18px; }
  .m8-hero-title{ font-size:22px; }
  .m8-search{ flex-direction:column; }
  .m8-search button{ width:100%; }

  /* 详情页：海报转上方居中，避免右侧被压扁 */
  .m8-movie{
    grid-template-columns:minmax(0,1fr);
    gap:22px;
  }
  .m8-movie-poster{
    width:200px;
    margin:0 auto;
  }
  /* 手机：资料表收成一列（两列会把「主演」这种长值挤断行） */
  .m8-facts{
    grid-template-columns:minmax(0, 1fr);
    gap:8px;
  }

  /* 卡片网格：手机固定 3 列电影贴纸感；单列时等高失去意义 */
  .m8-grid{
    grid-template-columns:repeat(3, minmax(0,1fr));
    grid-auto-rows:auto;
  }
  .m8-card-title{ font-size:13.5px; }
  .m8-cates{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .m8-ranklink{ grid-template-columns:minmax(0,1fr); }
  .m8-links{ grid-template-columns:minmax(0,1fr); }
  .m8-postnav .m8-postnav-to{ text-align:left; }
  .m8-errnum{ font-size:64px; }
  .m8-main{ padding-bottom:44px; }

  /* 评论：手机缩进收紧，昵称与回复按钮不再挤在一行 */
  .m8-cmt-body{ padding-left:0; }
  .m8-cmt-children{ padding-left:14px; }
  .m8-cmt-children .m8-cmt-body{ padding-left:0; }
  .m8-cmt-form{ padding:16px; }
  .m8-cmt-fields{ grid-template-columns:minmax(0,1fr); }
  .m8-cmt-verify{ flex-wrap:wrap; }
  .m8-cmt-reply{ padding:4px 10px; }

  .m8-foot-inner{ flex-direction:column; align-items:flex-start; }
}

@media (max-width:400px){
  .m8-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}