/* Mikufans · 2009 复古桌面风
   借鉴 B 站 2009 复刻页的装饰性几何（圆角、阴影、灰白底、按压反馈、栅格），
   全部颜色用 Miku 蓝绿系；不重用任何来自 B 站的可识别元素（logo/文案/按钮图）。
   作用域：首页、分类页、详情页通用区块
   兼容：旧 dedecms.css 类名（header / nav / search / picnews / tbox / viewbox / dede_comment_post）
*/
:root {
  --mkf-line: #d8dde3;        /* 1px 描边 */
  --mkf-bg-soft: #f4f6f5;     /* 区块浅灰底 */
  --mkf-bg-card: #ffffff;
  --mkf-shadow: 0 1px 2px rgba(40, 60, 50, .06), 0 2px 8px rgba(40, 60, 50, .06);
  --mkf-shadow-hover: 0 2px 4px rgba(40, 60, 50, .10), 0 6px 16px rgba(40, 60, 50, .10);
  --mkf-radius: 6px;
  --mkf-radius-lg: 8px;
  --mkf-miku: #39c5bb;         /* Miku 蓝绿主色 */
  --mkf-miku-d: #2ba89f;       /* 深一档（hover/active） */
  --mkf-miku-l: #e6f8f7;       /* 浅一档（标签底） */
  --mkf-text: #2c3640;
  --mkf-text-soft: #6b7780;
}

/* ==== 顶 nav：圆角 + 描边 + 选中下划线 ==== */
.header .nav {
  background: var(--mkf-bg-soft);
  border-top: 1px solid var(--mkf-line);
  border-bottom: 1px solid var(--mkf-line);
  height: 38px;
  border-radius: 0;
}
.header .nav ul li a {
  height: 38px;
  line-height: 38px;
  color: var(--mkf-text);
  border-radius: 0;
  padding: 0 18px;
  font-size: 14px;
  position: relative;
  transition: color .12s ease, background .12s ease;
}
.header .nav ul li a:hover {
  color: var(--mkf-miku-d);
  background: rgba(57, 197, 187, .08);
}
.header .nav ul li.thisclass a,
.header .nav ul li a.thisclass {
  color: var(--mkf-miku-d);
  font-weight: 700;
  background: transparent;
}
.header .nav ul li.thisclass a::after,
.header .nav ul li a.thisclass::after {
  content: '';
  position: absolute;
  left: 14px; right: 14px; bottom: 4px;
  height: 2px;
  background: var(--mkf-miku);
  border-radius: 2px;
}

/* ==== 搜索条：圆角 + 浅灰底 + 蓝按钮 ==== */
.header .search {
  background: linear-gradient(180deg, #fafcfb 0%, #eef3f1 100%);
  border-bottom: 1px solid var(--mkf-line);
  padding: 14px 0 12px;
}
.header .search .form {
  background: var(--mkf-bg-card);
  border: 1px solid var(--mkf-line);
  border-radius: var(--mkf-radius);
  box-shadow: var(--mkf-shadow);
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.header .search h4 {
  font-size: 13px;
  color: var(--mkf-text-soft);
  margin: 0 6px 0 0;
}
.header .search .search-keyword {
  flex: 1 1 220px;
  height: 30px;
  border: 1px solid var(--mkf-line);
  border-radius: 4px;
  padding: 0 10px;
  background: #fff;
  outline: none;
  font-size: 13px;
  transition: border-color .12s, box-shadow .12s;
}
.header .search .search-keyword:focus {
  border-color: var(--mkf-miku);
  box-shadow: 0 0 0 3px rgba(57, 197, 187, .18);
}
.header .search .search-option {
  height: 30px;
  border: 1px solid var(--mkf-line);
  border-radius: 4px;
  background: #fff;
  padding: 0 6px;
  font-size: 13px;
  color: var(--mkf-text);
}
.header .search .search-submit,
.header .search button[type="submit"] {
  height: 30px;
  padding: 0 18px;
  background: var(--mkf-miku);
  color: #fff;
  border: 1px solid var(--mkf-miku);
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  transition: background .12s, box-shadow .12s;
}
.header .search .search-submit:hover,
.header .search button[type="submit"]:hover { background: var(--mkf-miku-d); border-color: var(--mkf-miku-d); }
.header .search .search-submit:active,
.header .search button[type="submit"]:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(0,0,0,.08); }

/* 热门标签：扁平胶囊 */
.header .search .tags { margin-top: 10px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.header .search .tags h4 { font-size: 13px; color: var(--mkf-text-soft); margin: 0 4px 0 0; }
.header .search .tags ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.header .search .tags li a {
  display: inline-block;
  padding: 3px 10px;
  background: var(--mkf-miku-l);
  color: var(--mkf-miku-d);
  border: 1px solid #cde9e6;
  border-radius: 999px;
  font-size: 12px;
  text-decoration: none;
  transition: background .12s, border-color .12s;
}
.header .search .tags li a:hover { background: #d3f1ee; border-color: var(--mkf-miku); }

/* ==== 通用容器 / 区块标题 ==== */
.w960.center { background: transparent; }
.mt1 { background: var(--mkf-bg-card); border: 1px solid var(--mkf-line); border-radius: var(--mkf-radius-lg); box-shadow: var(--mkf-shadow); padding: 14px; margin-top: 14px !important; }
/* 导航条本身是通栏，不能套用 .mt1 的内边距，否则 100% + padding 会撑出横向滚动条 */
.nav.mt1 { padding: 0; }
.pright .mtl { margin-top: 12px !important; }

/* 区块标题条（蓝绿主色 + 圆角） */
.dl.tbox,
.tbox {
  border: 1px solid var(--mkf-line);
  border-radius: var(--mkf-radius);
  background: var(--mkf-bg-card);
  box-shadow: var(--mkf-shadow);
  overflow: hidden;
}
.dl.tbox dt,
.tbox dt {
  height: 32px;
  line-height: 32px;
  background: linear-gradient(180deg, #f8fbfa 0%, #eef5f3 100%);
  border-bottom: 1px solid var(--mkf-line);
  padding: 0 10px;
  font-size: 13px;
  color: var(--mkf-text);
}
.dl.tbox dt strong,
.tbox dt strong {
  color: var(--mkf-miku-d);
  font-weight: 700;
  margin-right: 8px;
  position: relative;
  padding-left: 8px;
}
.dl.tbox dt strong::before,
.tbox dt strong::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 3px; height: 14px;
  background: var(--mkf-miku);
  border-radius: 2px;
  transform: translateY(-50%);
}
.dl.tbox dt .label,
.tbox dt .label {
  float: right;
  font-size: 12px;
  font-weight: 400;
  color: var(--mkf-text-soft);
}
.dl.tbox dt .label a,
.tbox dt .label a {
  color: var(--mkf-text-soft);
  text-decoration: none;
  padding: 0 6px;
}
.dl.tbox dt .label a:hover,
.tbox dt .label a:hover { color: var(--mkf-miku-d); }
.dl.tbox dt .label a.thisclass,
.tbox dt .label a.thisclass {
  color: var(--mkf-miku-d);
  font-weight: 700;
}
.dl.tbox dd,
.tbox dd { padding: 8px 10px; background: #fff; }
.dl.tbox dd + dd { border-top: 1px dashed var(--mkf-line); }

/* ==== 视频卡栅格：4 列（首页）/ 4 列（分类） ==== */
.picnews ul.e1,
ul.mkf-catlist,
.mkf-catlist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 1100px) {
  .picnews ul.e1, ul.mkf-catlist { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .picnews ul.e1, ul.mkf-catlist { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
.picnews ul.e1 li,
ul.mkf-catlist li {
  background: var(--mkf-bg-card);
  border: 1px solid var(--mkf-line);
  border-radius: var(--mkf-radius);
  overflow: hidden;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.picnews ul.e1 li:hover,
ul.mkf-catlist li:hover {
  transform: translateY(-2px);
  box-shadow: var(--mkf-shadow-hover);
  border-color: #b9d4d1;
}
.picnews ul.e1 li a,
ul.mkf-catlist li a {
  display: block;
  color: var(--mkf-text);
  text-decoration: none;
}
.picnews ul.e1 li img,
ul.mkf-catlist li img {
  width: 100%;
  height: 96px;
  object-fit: cover;
  display: block;
  background: #e9ecec;
}
.picnews ul.e1 li .title,
ul.mkf-catlist li span {
  display: block;
  padding: 6px 8px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--mkf-text);
  height: 36px;
  overflow: hidden;
}
@media (max-width: 720px) {
  .picnews ul.e1 li img, ul.mkf-catlist li img { height: 78px; }
  .picnews ul.e1 li .title, ul.mkf-catlist li span { font-size: 11px; height: 32px; }
}

/* ==== 「换一换」按钮（圆角蓝胶囊） ==== */
.mkf-refresh {
  display: inline-block;
  height: 26px;
  line-height: 24px;
  padding: 0 14px;
  background: #fff;
  color: var(--mkf-miku-d);
  border: 1px solid var(--mkf-miku);
  border-radius: 999px;
  font-size: 12px;
  cursor: pointer;
  transition: background .12s, color .12s, box-shadow .12s;
}
.mkf-refresh:hover { background: var(--mkf-miku); color: #fff; box-shadow: 0 2px 6px rgba(57,197,187,.35); }
.mkf-refresh:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(0,0,0,.08); }

/* ==== 排行/列表条目（圆角、悬浮反馈） ==== */
.f1, .f2, .d2, .e7 {
  list-style: none;
  padding: 0;
  margin: 0;
}
.f1 li, .d2 li, .f2 li {
  padding: 6px 4px;
  border-bottom: 1px dashed #eaeef0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--mkf-text-soft);
  transition: background .12s;
}
.f1 li:hover, .d2 li:hover, .f2 li:hover { background: #f8fbfa; }
.f1 li a, .d2 li a, .f2 li a { color: var(--mkf-text); text-decoration: none; }
.f1 li a:hover, .d2 li a:hover, .f2 li a:hover { color: var(--mkf-miku-d); }
.f1 li small, .f2 li small, .d2 li .date { color: #9aa3a8; font-size: 11px; margin-left: 6px; }
.f2 li p { margin: 2px 0 0; color: var(--mkf-text-soft); }

/* 最近登陆会员头像 */
.e7 li { display: inline-block; text-align: center; width: 60px; margin: 4px 4px 0 0; vertical-align: top; }
.e7 li img { width: 48px; height: 48px; border-radius: 6px; border: 1px solid var(--mkf-line); }
.e7 li a { display: block; color: var(--mkf-text-soft); font-size: 11px; line-height: 1.3; text-decoration: none; margin-top: 2px; }
.e7 li a:hover { color: var(--mkf-miku-d); }

/* ==== 登录表单（圆角输入） ==== */
.userlogin .fb { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.userlogin .fb span { width: 56px; color: var(--mkf-text-soft); font-size: 12px; }
.userlogin .ipt-txt {
  flex: 1 1 auto;
  height: 28px;
  border: 1px solid var(--mkf-line);
  border-radius: 4px;
  padding: 0 8px;
  font-size: 13px;
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.userlogin .ipt-txt:focus { border-color: var(--mkf-miku); box-shadow: 0 0 0 3px rgba(57,197,187,.18); }
.userlogin .submit { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.userlogin .btn-1,
.userlogin button[type="button"] {
  height: 28px;
  padding: 0 16px;
  background: var(--mkf-miku);
  color: #fff;
  border: 1px solid var(--mkf-miku);
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  transition: background .12s;
}
.userlogin .btn-1:hover { background: var(--mkf-miku-d); }
.userlogin .submit a { font-size: 12px; color: var(--mkf-text-soft); text-decoration: none; }
.userlogin .submit a:hover { color: var(--mkf-miku-d); }

/* ==== 详情页播放器区 ==== */
.viewbox { background: var(--mkf-bg-card); border: 1px solid var(--mkf-line); border-radius: var(--mkf-radius-lg); box-shadow: var(--mkf-shadow); padding: 14px; }
.viewbox h2 { font-size: 18px; color: var(--mkf-text); margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--mkf-line); }
.mkf-meta { color: var(--mkf-text-soft); font-size: 12px; margin: 0 0 10px; }
.mkf-meta a { color: var(--mkf-miku-d); text-decoration: none; }
.mkf-meta a:hover { text-decoration: underline; }
.mkf-player { background: #000; border-radius: var(--mkf-radius); overflow: hidden; }
.mkf-tip { margin: 8px 0 0; color: var(--mkf-text-soft); font-size: 12px; }
.intro { color: var(--mkf-text); font-size: 13px; line-height: 1.7; padding: 10px 0; border-top: 1px dashed var(--mkf-line); margin-top: 10px; }
.boxoff { color: var(--mkf-text-soft); font-size: 11px; text-align: center; margin: 8px 0; }

/* 互动按钮行（圆角胶囊） */
.actbox ul { list-style: none; padding: 0; margin: 10px 0 0; display: flex; gap: 8px; flex-wrap: wrap; }
.actbox li a {
  display: inline-block;
  height: 28px;
  line-height: 26px;
  padding: 0 14px;
  background: #fff;
  color: var(--mkf-miku-d);
  border: 1px solid var(--mkf-miku);
  border-radius: 999px;
  font-size: 12px;
  text-decoration: none;
  transition: background .12s, color .12s, box-shadow .12s;
}
.actbox li a:hover { background: var(--mkf-miku); color: #fff; box-shadow: 0 2px 6px rgba(57,197,187,.35); }
.actbox li a:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(0,0,0,.08); }

/* ==== 评论表单 ==== */
.dede_comment_post .dcmp-content textarea.ipt-txt {
  width: 100%;
  min-height: 80px;
  border: 1px solid var(--mkf-line);
  border-radius: var(--mkf-radius);
  padding: 8px 10px;
  font-size: 13px;
  outline: none;
  resize: vertical;
  background: #fafdfc;
  transition: border-color .12s, box-shadow .12s;
}
.dede_comment_post .dcmp-content textarea.ipt-txt:focus { border-color: var(--mkf-miku); box-shadow: 0 0 0 3px rgba(57,197,187,.18); background: #fff; }
.dede_comment_post .dcmp-submit { margin-top: 8px; }
.dede_comment_post .dcmp-submit button {
  height: 30px;
  padding: 0 18px;
  background: var(--mkf-miku);
  color: #fff;
  border: 1px solid var(--mkf-miku);
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  transition: background .12s;
}
.dede_comment_post .dcmp-submit button:hover { background: var(--mkf-miku-d); }
.dede_comment_post .dcmp-submit button:active { transform: translateY(1px); }

/* ==== 分类页标题 ==== */
.w960.center > h2 {
  background: linear-gradient(180deg, #f8fbfa 0%, #eef5f3 100%);
  border: 1px solid var(--mkf-line);
  border-radius: var(--mkf-radius);
  padding: 10px 14px;
  font-size: 16px;
  color: var(--mkf-text);
  margin: 0;
  position: relative;
  padding-left: 18px;
}
.w960.center > h2::before {
  content: '';
  position: absolute;
  left: 8px; top: 50%;
  width: 4px; height: 18px;
  background: var(--mkf-miku);
  border-radius: 2px;
  transform: translateY(-50%);
}
.w960.center > p.mkf-meta { padding: 8px 4px 0; }

/* ==== 页脚 ==== */
.footer {
  background: transparent;
  border-top: 1px solid var(--mkf-line);
  border-radius: 0;
  text-align: center;
  padding: 16px 10px;
  margin-top: 18px !important;
  color: var(--mkf-text-soft);
  font-size: 12px;
  box-sizing: border-box;
}
.footer .copyright { margin: 0; }

/* ==== 右上角快捷链接（圆角按钮替代旧贴图） ==== */
.header .rlink ul li {
  width: auto;
  height: 24px;
  background: transparent;
  float: none;
  display: inline-block;
  margin: 0 4px 4px 0;
  overflow: visible;
}
.header .rlink ul li a {
  display: inline-block;
  height: 24px;
  line-height: 22px;
  padding: 0 10px;
  color: var(--mkf-text-soft);
  background: #fff;
  border: 1px solid var(--mkf-line);
  border-radius: 999px;
  font-size: 12px;
  text-indent: 0;
  background-image: none;
  transition: color .12s, border-color .12s, background .12s;
}
.header .rlink ul li a:hover { color: var(--mkf-miku-d); border-color: var(--mkf-miku); background: #f0faf9; }
.header .rlink { width: auto; height: auto; float: left; margin-left: 24px; padding-top: 18px; }
.header .rlink ul { list-style: none; padding: 0; margin: 0; }

/* ==== 移动端适配（保留原 mkf-mobile.css 的底部 TabBar） ==== */
@media (max-width: 720px) {
  .header .rlink { display: none; }
  .header .title h1 a { width: 200px; height: 60px; background-size: contain; }
  .header .nav { height: 34px; }
  .header .nav ul li a { height: 34px; line-height: 34px; padding: 0 10px; font-size: 13px; }
  .header .search .form { flex-direction: column; align-items: stretch; }
  .header .search .search-keyword, .header .search .search-option, .header .search .search-submit { width: 100%; }
  .mt1 { padding: 10px; }
  .viewbox { padding: 10px; }
}

/* =====================================================================
   B站2009 复刻页素材应用（templets/images/b2009/）
   ===================================================================== */

/* 页头 rlink 区误入的 120x68 封面列表项：整体隐藏，只保留 4 个快捷链接 */
.header .rlink ul li img { display: none; }
.header .rlink ul li:has(> a img) { display: none; }

/* 首页顶部：B站 2009 纪念页原版分区图（动画/音乐/游戏…） */
.mkf-retro-strip {
  display: block;
  max-width: 684px;
  margin: 6px auto 0;
}
.mkf-retro-strip img { display: block; width: 100%; height: auto; }

/* 左侧视频区标题条：使用 2009「最新投稿 new」原图 */
.mkf-sec-header-art { display: block; margin: 0 0 8px; }
.mkf-sec-header-art img { display: block; width: 100%; height: auto; }

/* 页脚上方：留言板大按钮（链到会员中心/挑错反馈） */
.mkf-board-msg {
  display: block;
  width: 300px;
  max-width: 86%;
  margin: 16px auto 0;
  transition: opacity .12s ease, transform .12s ease;
}
.mkf-board-msg img { display: block; width: 100%; height: auto; }
.mkf-board-msg:hover { opacity: .88; }
.mkf-board-msg:active { transform: translateY(1px); }

/* 「换一换」按钮：与站内其他胶囊按钮同一套样式 */
.mkf-refresh {
  width: auto;
  height: auto;
  padding: 3px 14px;
  line-height: 20px;
  font-size: 12px;
  background: var(--mkf-miku-l);
  color: var(--mkf-miku-d);
  border: 1px solid #cde9e6;
  border-radius: 999px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.mkf-refresh:hover { background: #d3f1ee; border-color: var(--mkf-miku); }
.mkf-refresh:active { background: #c9ecea; }

/* 全站封面图统一：任何列表里的视频封面都裁切不拉伸 */
.picnews ul.e1 li img,
ul.mkf-catlist li img { object-fit: cover; object-position: center; }

/* ==== 封面拉伸修复：网格卡片下清除老模板的 li 定宽/响应式残留 ==== */
.picnews ul.e1 li,
.picnews ul.e1 li:first-child {
  width: 100%;
  float: none;
  padding: 0;
  height: auto;
}
.picnews ul.e1 li a img,
.picnews ul.e1 li img {
  display: block;
  width: 100% !important;
  height: 96px !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  object-position: center;
}
@media (max-width: 720px) {
  .picnews ul.e1 li a img,
  .picnews ul.e1 li img { height: 78px !important; }
}
/* 分类页列表封面同样兜底 */
ul.mkf-catlist li img {
  display: block;
  width: 100% !important;
  height: 96px !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  object-position: center;
}
@media (max-width: 720px) {
  ul.mkf-catlist li img { height: 78px !important; }
}

/* ==== 视频详情页 AV 号：标题最前面的红底白字小牌 ==== */
.mkf-detail2009 h2 .mkf-avno {
  display: inline-block;
  margin-right: 9px;
  padding: 1px 7px 2px;
  background: #c0392b;
  border: 1px solid #96271d;
  border-radius: 2px;
  color: #fff;
  font: 700 12px/18px Tahoma, Verdana, Arial, sans-serif;
  letter-spacing: .5px;
  vertical-align: 2px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .25);
}
@media (max-width: 720px) {
  .mkf-detail2009 h2 .mkf-avno {
    font-size: 11px;
    line-height: 16px;
    padding: 0 5px 1px;
    margin-right: 6px;
  }
}