/* ==================== 全局设计变量 ==================== */
:root {
  --ink: #161719; /* 页面主要文字颜色。 */
  --muted: #737780; /* 次要说明文字颜色。 */
  --line: #e8e9ec; /* 边框与分隔线颜色。 */
  --paper: #ffffff; /* 白色内容背景。 */
  --soft: #f5f6f8; /* 浅灰色分区背景。 */
  --accent: #eb3d5c; /* 网站主强调色。 */
  --accent-deep: #d72c4b; /* 强调色悬停状态。 */
  --dark: #101114; /* 深色面板和页脚背景。 */
  --shadow: 0 18px 55px rgba(19, 22, 31, 0.10); /* 通用悬浮阴影。 */
  --shell: 1180px; /* 页面主体最大宽度。 */
}

/* ==================== 浏览器基础重置 ==================== */
/* 所有元素使用 border-box，宽高计算更直观。 */
* { box-sizing: border-box; }
/* 点击锚点时使用平滑滚动。 */
html { scroll-behavior: smooth; }
/* 页面基础字体、颜色和最小宽度。 */
body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: var(--paper);
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
/* 打开搜索或登录弹层时禁止页面背景滚动。 */
body.overlay-open { overflow: hidden; }
/* 链接默认继承文字颜色并去掉下划线。 */
a { color: inherit; text-decoration: none; }
/* 表单控件继承页面字体。 */
button, input { font: inherit; }
/* 按钮继承父级文字颜色。 */
button { color: inherit; }
/* 图片与视频改为块级，去掉行内元素底部空隙。 */
img, video { display: block; }
/* 统一页面内容宽度与左右留白。 */
.shell { width: min(calc(100% - 40px), var(--shell)); margin-inline: auto; }
/* 仅供屏幕阅读器读取的隐藏文字。 */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ==================== 樱花画布 ==================== */
/* 固定在整个视口上方，不阻挡页面点击；单片樱花大小在 script.js 的 Petal.reset() 中调整。 */
canvas#sakura {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
}

/* ==================== 顶部导航 ==================== */
/* 页面顶部固定导航，初始使用半透明深色背景。 */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  border-bottom: 1px solid rgba(255,255,255,.14);
  background: rgba(11, 12, 15, .28);
  backdrop-filter: blur(14px);
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
/* 页面向下滚动后切换为白色导航。 */
.site-header.scrolled {
  background: rgba(255,255,255,.96);
  border-color: var(--line);
  box-shadow: 0 8px 28px rgba(20,22,30,.07);
}
/* 导航内部横向排列。 */
.header-inner { min-height: 76px; display: flex; align-items: center; gap: 42px; }
/* 文字品牌上下排列。 */
.text-brand { display: flex; flex-direction: column; flex: 0 0 auto; color: #fff; line-height: 1; }
/* 中文品牌名称。 */
.text-brand strong { font-size: 20px; letter-spacing: .08em; }
/* 英文品牌副标题。 */
.text-brand small { margin-top: 8px; font-size: 8px; letter-spacing: .26em; opacity: .68; }
/* 白色导航状态下把品牌改成深色。 */
.site-header.scrolled .text-brand { color: var(--ink); }
/* 桌面端主导航。 */
.desktop-nav { display: flex; align-items: center; gap: 32px; flex: 1; }
/* 带二级分页的顶层导航容器保持与原导航链接相同的纵向高度。 */
.desktop-nav > .nav-item { position: relative; display: flex; align-items: center; align-self: stretch; }
/* 只给顶层导航链接保留原有点击区域，避免二级分页继承过大的上下内边距。 */
.desktop-nav > a,
.desktop-nav > .nav-item > a { position: relative; padding: 29px 0 27px; color: rgba(255,255,255,.84); font-size: 14px; }
/* 顶层导航链接底部强调线。 */
.desktop-nav > a::after,
.desktop-nav > .nav-item > a::after { content: ""; position: absolute; left: 50%; right: 50%; bottom: 19px; height: 2px; background: var(--accent); transition: .22s ease; }
/* 鼠标悬停、键盘聚焦或当前项时展开顶层强调线。 */
.desktop-nav > a:hover::after,
.desktop-nav > a.active::after,
.desktop-nav > .nav-item:hover > a::after,
.desktop-nav > .nav-item:focus-within > a::after { left: 0; right: 0; }
/* 白色导航状态下的顶层链接颜色。 */
.site-header.scrolled .desktop-nav > a,
.site-header.scrolled .desktop-nav > .nav-item > a { color: #4f5259; }
/* 桌面端二级分页下拉面板：默认隐藏，不改变原主导航的静态样式。 */
.nav-submenu {
  position: absolute;
  top: calc(100% - 8px);
  left: 50%;
  z-index: 5;
  display: grid;
  min-width: 142px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 16px 36px rgba(20,22,30,.12);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -7px);
  transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
}
/* 鼠标悬停或键盘进入导航组时显示二级分页。 */
.nav-item-has-submenu:hover .nav-submenu,
.nav-item-has-submenu:focus-within .nav-submenu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
/* 二级分页链接沿用网站原有字体、边框与强调色体系。 */
.nav-submenu a { padding: 10px 12px; border-radius: 4px; color: #4f5259; font-size: 12px; white-space: nowrap; }
/* 二级分页链接悬停和键盘聚焦状态。 */
.nav-submenu a:hover,
.nav-submenu a:focus-visible { background: var(--soft); color: var(--accent); outline: 0; }
/* 导航右侧操作按钮容器。 */
.header-actions { display: flex; align-items: center; gap: 10px; }
/* 桌面端搜索按钮。 */
.header-search { height: 38px; padding: 0 18px; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; background: rgba(255,255,255,.08); color: #fff; cursor: pointer; }
/* 白色导航状态下的搜索按钮。 */
.site-header.scrolled .header-search { border-color: var(--line); background: #fff; color: var(--ink); }
/* 搜索按钮悬停状态。 */
.header-search:hover { border-color: var(--accent); color: var(--accent); }
/* 移动端菜单按钮，桌面端默认隐藏。 */
.menu-toggle { display: none; width: 42px; height: 42px; padding: 0; border: 0; background: transparent; cursor: pointer; }
/* 菜单按钮的三条横线。 */
.menu-toggle span { display: block; width: 21px; height: 2px; margin: 5px auto; background: #fff; }
/* 白色导航状态下菜单线条改为深色。 */
.site-header.scrolled .menu-toggle span { background: var(--ink); }
/* 移动端导航默认隐藏，媒体查询中再开启。 */
.mobile-nav { display: none; }

/* ==================== 首屏视频区域 ==================== */
/* 首屏容器高度已略微缩小；修改 max-height 可继续调整视频区域高度。 */
.hero { position: relative; max-height: 600px; overflow: hidden; background: #090a0d; }
/* 视频铺满首屏并保持裁切比例。 */
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* 视频上方的深色遮罩，保证文字可读。 */
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,8,12,.1) 0%, rgba(7,8,12,.1) 42%, rgba(7,8,12,.1) 72%, rgba(7,8,12,.1) 100%); }
/* 首屏底部渐变，用于衔接下一个区域。 */
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 135px; background: linear-gradient(to top, rgba(8,9,12,.68), transparent); }
/* 首屏两侧模糊光晕的通用样式。 */
.hero-glow { position: absolute; width: 430px; height: 430px; border-radius: 50%; filter: blur(100px); opacity: .22; }
/* 左侧红色光晕位置。 */
.hero-glow-left { left: -190px; top: 120px; background: #e7385a; }
/* 右侧紫色光晕位置。 */
.hero-glow-right { right: -220px; top: 65px; background: #735df1; }
/* 首屏文字内容容器，高度与 .hero 保持一致。 */
.hero-content { position: relative; z-index: 2; min-height: 630px; padding-top: 138px; padding-bottom: 76px; color: #fff; }
/* 首屏英文小标题。 */
.hero-kicker { margin: 0 0 18px; color: rgba(255,255,255,.65); font-size: 12px; letter-spacing: .34em; }
/* 首屏主标题。 */
.hero h1 { margin: 0; max-width: 760px; font-size: clamp(52px, 7vw, 94px); line-height: .98; letter-spacing: -.045em; font-weight: 800; }
/* 主标题描边文字。 */
.hero h1 span { color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.72); text-stroke: 1px rgba(255,255,255,.72); }
/* 首屏说明文字。 */
.hero-description { max-width: 650px; margin: 24px 0 28px; color: rgba(0, 0, 0, 0.55); font-size: 15px; line-height: 1.8; font-weight: bold;}
/* 首屏搜索框整体。 */
.hero-search-form { display: flex; width: min(640px, 100%); padding: 7px; border-radius: 8px; background: rgba(255,255,255,.96); box-shadow: 0 22px 70px rgba(0,0,0,.28); }
/* 首屏搜索输入框。 */
.hero-search-form input { flex: 1; min-width: 0; height: 50px; padding: 0 18px; border: 0; outline: 0; background: transparent; color: var(--ink); }
/* 首屏搜索提交按钮。 */
.hero-search-form button { min-width: 110px; border: 0; border-radius: 5px; background: var(--accent); color: #fff; cursor: pointer; font-weight: 700; }
/* 搜索按钮悬停颜色。 */
.hero-search-form button:hover { background: var(--accent-deep); }
/* 热门搜索关键词容器。 */
.hot-keywords { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; color: rgba(255,255,255,.55); font-size: 12px; }
/* 热门搜索关键词按钮。 */
.hot-keywords button { padding: 0; border: 0; background: none; color: rgba(255,255,255,.78); cursor: pointer; }
/* 热门关键词悬停状态。 */
.hot-keywords button:hover { color: #fff; }

/* ==================== 快捷入口 ==================== */
/* 快捷入口向上覆盖首屏底部。 */
.quick-links { position: relative; z-index: 4; margin-top: -42px; }
/* 四个快捷入口的网格容器。 */
.quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; border-radius: 8px; box-shadow: var(--shadow); overflow: hidden; }
/* 单个快捷入口卡片。 */
.quick-card { min-height: 126px; padding: 26px 24px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 17px; border-right: 1px solid var(--line); transition: background .2s ease; }
/* 最后一张快捷卡片取消右边框。 */
.quick-card:last-child { border-right: 0; }
/* 快捷卡片悬停背景。 */
.quick-card:hover { background: #fafafb; }
/* 快捷入口序号。 */
.quick-number { color: var(--accent); font-weight: 800; font-size: 13px; letter-spacing: .08em; }
/* 快捷入口文字容器。 */
.quick-copy { min-width: 0; }
/* 快捷入口标题。 */
.quick-copy strong { display: block; font-size: 16px; }
/* 快捷入口说明。 */
.quick-copy small { display: block; margin-top: 7px; color: var(--muted); font-size: 12px; }
/* 快捷入口右侧操作文字。 */
.quick-arrow { color: #9b9ea4; font-size: 12px; }

/* ==================== 通用分区标题 ==================== */
/* 精选和内容中心的上下留白。 */
.featured-section, .library-section { padding: 50px 0; }
/* 精选区域使用白色背景。 */
.featured-section { background: #fff; }
/* 分区标题左右布局。 */
.section-title-row { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 34px; }
/* 分区英文小标题。 */
.section-kicker { margin: 0 0 10px; color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .25em; }
/* 分区中文主标题。 */
.section-title-row h2 { margin: 0; font-size: clamp(30px, 4vw, 48px); letter-spacing: -.03em; }
/* 分区标题右侧链接。 */
.section-title-row > a { padding-bottom: 6px; border-bottom: 1px solid var(--ink); font-size: 13px; }

/* ==================== 精选轮播图与公告栏 ==================== */
/* 桌面端左侧轮播、右侧公告的两列布局。 */
.featured-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, .85fr); gap: 22px; align-items: stretch; }
/* 轮播外框，负责裁切超出内容。 */
.featured-carousel { position: relative; min-width: 0; height: 420px; overflow: hidden; border-radius: 7px; background: #111; color: #fff; box-shadow: var(--shadow); }
/* 所有轮播页横向排列，通过 transform 切换。 */
.featured-track { display: flex; width: 100%; height: 100%; transition: transform .55s cubic-bezier(.22,.61,.36,1); }
/* 单张轮播内容占满整个轮播区域。 */
.feature-slide { position: relative; flex: 0 0 100%; width: 100%; height: 100%; overflow: hidden; color: #fff; }
/* 轮播图片和可选视频都铺满容器，保持现有裁切比例。 */
.feature-slide img,
.feature-slide video { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
/* 动态轮播视频不接收鼠标事件，保证整张轮播卡片仍可点击。 */
.feature-slide video { pointer-events: none; }
/* 当前轮播页或悬停时轻微放大图片/视频。 */
.feature-slide:hover img,
.feature-slide:hover video { transform: scale(1.035); }
/* 图片下方渐变遮罩，保证标题可读。 */
.feature-slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,9,13,.88), rgba(8,9,13,.08) 68%); }
/* 轮播页文字内容。 */
.feature-card-content { position: absolute; z-index: 2; left: 34px; right: 80px; bottom: 34px; }
/* 轮播页内容类型标签。 */
.feature-card-content span { display: inline-flex; padding: 6px 9px; border-radius: 3px; background: var(--accent); font-size: 10px; }
/* 轮播页主标题。 */
.feature-card-content h3 { margin: 12px 0 8px; font-size: clamp(24px, 3vw, 34px); line-height: 1.3; }
/* 轮播页补充信息。 */
.feature-card-content small { color: rgba(255,255,255,.7); font-size: 12px; }
/* 轮播前后切换按钮。 */
.carousel-control { position: absolute; z-index: 4; top: 50%; width: 42px; height: 42px; padding: 0; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; background: rgba(8,9,13,.38); color: #fff; cursor: pointer; font-size: 28px; line-height: 1; transform: translateY(-50%); backdrop-filter: blur(8px); transition: background .2s ease, border-color .2s ease; }
/* 轮播按钮悬停状态。 */
.carousel-control:hover { border-color: rgba(255,255,255,.72); background: rgba(8,9,13,.62); }
/* 上一张按钮位置。 */
.carousel-control-prev { left: 18px; }
/* 下一张按钮位置。 */
.carousel-control-next { right: 18px; }
/* 轮播圆点导航。 */
.carousel-dots { position: absolute; z-index: 4; right: 28px; bottom: 31px; display: flex; align-items: center; gap: 7px; }
/* 单个轮播圆点。 */
.carousel-dot { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 999px; background: rgba(255,255,255,.46); cursor: pointer; transition: width .25s ease, background .25s ease; }
/* 当前轮播圆点。 */
.carousel-dot.active { width: 24px; background: #fff; }
/* 公告栏整体面板。 */
.notice-panel { min-width: 0; min-height: 420px; padding: 28px; border: 1px solid var(--line); border-radius: 7px; background: #fff; box-shadow: var(--shadow); }
/* 公告栏标题区域。 */
.notice-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; padding-bottom: 19px; border-bottom: 1px solid var(--line); }
/* 公告栏中文标题。 */
.notice-heading h3 { margin: 0; font-size: 27px; letter-spacing: -.02em; }
/* 公告栏右侧英文标识。 */
.notice-heading > span { color: #aaaeb5; font-size: 9px; letter-spacing: .17em; }
/* 公告列表垂直排列。 */
.notice-list { display: grid; }
/* 单条公告。 */
.notice-item { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 15px; padding: 18px 0; border-bottom: 1px solid var(--line); }
/* 最后一条公告取消底部分隔线。 */
.notice-item:last-child { border-bottom: 0; padding-bottom: 0; }
/* 公告类型标签。 */
.notice-label { display: inline-grid; place-items: center; align-self: start; min-height: 25px; padding: 4px 7px; border-radius: 3px; background: #fff0f3; color: var(--accent); font-size: 10px; font-weight: 800; }
/* 公告文字容器。 */
.notice-copy { min-width: 0; }
/* 公告标题。 */
.notice-copy strong { display: block; font-size: 14px; line-height: 1.45; }
/* 公告说明文字。 */
.notice-copy small { display: block; margin-top: 6px; color: var(--muted); font-size: 11px; line-height: 1.6; }
/* 可点击公告的悬停标题颜色。 */
a.notice-item:hover .notice-copy strong { color: var(--accent); }

/* ==================== 内容中心 ==================== */
/* 内容中心浅灰色背景。 */
.library-section { background: var(--soft); }
/* 内容中心顶部右侧仅供电脑端固定歌姬演出；手机端会在媒体查询中隐藏并取消预留空间。 */
.library-intro { position: relative; min-height: 250px; padding-right: 49%; }
/* 左侧标题和分类按钮保持原有排版。 */
.library-intro-copy { min-width: 0; }
/* 像素歌姬演出区域：仅覆盖内容中心顶部右侧空白处。 */
.singer-playground {
  position: absolute;
  top: -8px;
  right: 0;
  width: 46%;
  height: 230px;
  overflow: visible;
  user-select: none;
  touch-action: none;
}
/* 内容中心标题与左侧对齐。 */
.library-heading { align-items: end; }
/* 内容中心说明文字。 */
.section-description { margin: 12px 0 0; color: var(--muted); font-size: 14px; }
/* 一级分类按钮横向排列并允许换行。 */
.category-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
/* 单个一级分类按钮。 */
.category-tabs button { min-width: 88px; height: 42px; padding: 0 22px; border: 1px solid var(--line); border-radius: 4px; background: #fff; cursor: pointer; font-size: 13px; }
/* 一级分类按钮的悬停和选中状态。 */
.category-tabs button:hover, .category-tabs button.active { border-color: var(--accent); background: var(--accent); color: #fff; }
/* 图库和游戏的二级分页使用相同视觉语言，但尺寸略小以体现层级。 */
.subcategory-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: -12px 0 24px; padding-left: 2px; }
/* hidden 属性用于瓜料、资源和搜索模式，必须完全隐藏二级分页容器。 */
.subcategory-tabs[hidden] { display: none; }
/* 单个二级分页按钮。 */
.subcategory-tabs button { min-width: 72px; height: 34px; padding: 0 16px; border: 1px solid var(--line); border-radius: 4px; background: #fff; color: var(--muted); cursor: pointer; font-size: 12px; }
/* 二级分页按钮沿用主强调色作为悬停和选中反馈。 */
.subcategory-tabs button:hover,
.subcategory-tabs button.active { border-color: var(--accent); color: var(--accent); }
/* 内容列表与右侧栏布局。 */
.library-layout { display: grid; grid-template-columns: minmax(0, 1fr) 286px; gap: 28px; align-items: start; }
/* 当前筛选说明和清除搜索按钮。 */
.content-toolbar { min-height: 48px; margin-bottom: 16px; padding: 0 2px; display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 13px; }
/* 清除搜索按钮。 */
.content-toolbar button { padding: 0; border: 0; background: none; color: var(--accent); cursor: pointer; }
/* PC 端普通内容卡片保持原来的三列。 */
.article-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
/* 【手机壁纸电脑端】只调整网格列数为四列，不改变卡片颜色、边框、圆角和交互样式。 */
.article-grid[data-gallery-layout="mobile-wallpaper"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* 【头像/表情包电脑端】两类正方形内容均使用五列。 */
.article-grid[data-gallery-layout="avatar"],
.article-grid[data-gallery-layout="emoji"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* 单个内容卡片改为上图下文结构，适合多列和移动端布局。 */
.article-card { display: flex; min-width: 0; overflow: hidden; flex-direction: column; border: 1px solid var(--line); border-radius: 6px; background: #fff; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
/* 内容卡片悬停效果。 */
.article-card:hover { transform: translateY(-3px); border-color: #dadce2; box-shadow: 0 15px 35px rgba(24,26,35,.09); }
/* 内容卡片图片容器；电脑壁纸、平板壁纸及其他分类继续使用原来的 16:10。 */
.article-image { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: #e9e9eb; }
/* 【手机壁纸比例】当前分页中的图片和视频显示模块固定为 9:16 竖屏比例。 */
.article-grid[data-gallery-layout="mobile-wallpaper"] .article-image { aspect-ratio: 9 / 16; }
/* 【头像/表情包比例】当前两类分页中的图片显示模块固定为 1:1 正方形。 */
.article-grid[data-gallery-layout="avatar"] .article-image,
.article-grid[data-gallery-layout="emoji"] .article-image { aspect-ratio: 1 / 1; }
/* 内容卡片的静态图片和动态壁纸视频使用同一尺寸与裁切方式。 */
.article-image img,
.article-image video { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
/* 动态壁纸视频不拦截链接点击，并始终保持静音循环播放。 */
.article-image video { pointer-events: none; }
/* 内容卡片悬停时图片和视频都轻微放大。 */
.article-card:hover .article-image img,
.article-card:hover .article-image video { transform: scale(1.04); }
/* 图片左上角内容类型标签。 */
.article-badge { position: absolute; top: 10px; left: 10px; padding: 5px 8px; border-radius: 3px; background: rgba(13,14,18,.76); color: #fff; font-size: 10px; }
/* 图片右下角视频时长。 */
.article-duration { position: absolute; right: 9px; bottom: 9px; padding: 3px 6px; border-radius: 3px; background: rgba(0,0,0,.68); color: #fff; font-size: 10px; }
/* 卡片文字内容区域。 */
.article-body { min-width: 0; min-height: 142px; padding: 15px 14px 14px; display: flex; flex-direction: column; }
/* 卡片所属分类。 */
.article-category { color: var(--accent); font-size: 10px; font-weight: 700; }
/* 卡片标题，最多显示两行。 */
.article-body h3 { margin: 8px 0 12px; font-size: 15px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* 卡片底部数据与查看详情。 */
.article-meta { margin-top: auto; display: flex; justify-content: space-between; gap: 8px; color: #92959b; font-size: 10px; }

/* ==================== 图库与资源内容详情弹层 ==================== */
/* 半透明全屏遮罩：覆盖原页面但保留模糊可见的背景层次。 */
.resource-detail-overlay {
  position: fixed;
  inset: 0;
  z-index: 12100;
  display: grid;
  place-items: center;
  padding: 28px;
  overflow-y: auto;
  background: rgba(9, 10, 13, .72);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, visibility .22s ease;
}

/* 添加 open 类后显示详情遮罩。 */
.resource-detail-overlay.open { opacity: 1; visibility: visible; }

/* 半透明详情窗口：沿用网站现有圆角、边框、阴影和强调色。 */
.resource-detail-modal {
  position: relative;
  width: min(var(--detail-modal-width, 720px), 100%);
  max-height: calc(100dvh - 56px);
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, .48);
  border-radius: 10px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(18px);
  box-shadow: 0 32px 100px rgba(0, 0, 0, .34);
  transform: translateY(12px) scale(.985);
  transition: transform .22s ease;
}

/* 弹层显示时让窗口平滑回到正常位置。 */
.resource-detail-overlay.open .resource-detail-modal { transform: translateY(0) scale(1); }
/* “资源”分页使用更明显的半透明玻璃效果；图库原有弹窗样式保持不变。 */
.resource-detail-overlay[data-detail-kind="resource"] .resource-detail-modal {
  background: rgba(255, 255, 255, .80);
  backdrop-filter: blur(22px) saturate(115%);
}
/* 资源弹窗始终读取数据中的 popupRatio，小屏规则不会把它改成图库默认 4:3。 */
.resource-detail-overlay[data-detail-kind="resource"] .resource-detail-media {
  aspect-ratio: var(--detail-ratio, 16 / 10);
}

/* 详情关闭按钮固定在窗口右上角。 */
.resource-detail-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 4px;
  background: rgba(13, 14, 18, .68);
  color: #fff;
  cursor: pointer;
  font-size: 12px;
}

/* 关闭按钮的鼠标和键盘聚焦状态。 */
.resource-detail-close:hover,
.resource-detail-close:focus-visible { background: rgba(13, 14, 18, .88); outline: 0; }

/* 媒体区域默认沿用原内容卡片的 16:10 比例。 */
.resource-detail-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--detail-ratio, 16 / 10);
  border-radius: 9px 9px 0 0;
  background: #e9e9eb;
}

/*
 * 【手机壁纸弹窗】限制弹窗宽度并把媒体区域切换为 9:16 竖屏比例。
 * 仅改变尺寸与比例，现有背景、圆角、边框、阴影及按钮样式全部保持不变。
 */
.resource-detail-overlay[data-gallery-layout="mobile-wallpaper"] .resource-detail-modal {
  width: min(390px, 100%);
}
.resource-detail-overlay[data-gallery-layout="mobile-wallpaper"] .resource-detail-media {
  aspect-ratio: 2/3;
}

/*
 * 【头像/表情包弹窗】两类内容都采用 1:1 正方形媒体区域。
 * 弹窗仍使用原有详情主体，只适当收窄最大宽度以匹配正方形预览。
 */
.resource-detail-overlay[data-gallery-layout="avatar"] .resource-detail-modal,
.resource-detail-overlay[data-gallery-layout="emoji"] .resource-detail-modal {
  width: min(560px, 100%);
}
.resource-detail-overlay[data-gallery-layout="avatar"] .resource-detail-media,
.resource-detail-overlay[data-gallery-layout="emoji"] .resource-detail-media {
  aspect-ratio: 1 / 1;
}

/* 详情图片和视频完整覆盖媒体区域。 */
.resource-detail-media img,
.resource-detail-media video { width: 100%; height: 100%; object-fit: cover; }

/* 详情文字内容区域。 */
.resource-detail-body { padding: 24px; }

/* 详情分类文字复用网站强调色。 */
.resource-detail-category { color: var(--accent); font-size: 11px; font-weight: 700; }

/* 详情标题样式。 */
.resource-detail-body h2 { margin: 9px 0 16px; font-size: clamp(23px, 4vw, 34px); line-height: 1.35; }
/* 可编辑弹窗说明文字；内容由每条数据的 detailText 字段提供。 */
.resource-detail-description { margin: -4px 0 18px; color: #666a72; font-size: 13px; line-height: 1.8; }

/* 详情中的浏览信息和内容类型横向排列。 */
.resource-detail-meta {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding-top: 15px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}

/* 详情按钮：文字和跳转地址均由当前内容数据动态配置。 */
.resource-detail-download {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 50px;
  margin-top: 22px;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 12px 24px rgba(235, 61, 92, .20);
  transition: background .2s ease, transform .2s ease;
}

/* 下载按钮悬停和键盘聚焦状态。 */
.resource-detail-download:hover,
.resource-detail-download:focus-visible { background: var(--accent-deep); transform: translateY(-1px); outline: 0; }
/* 搜索无结果提示。 */
.empty-state { padding: 80px 20px; text-align: center; border: 1px dashed #d9dbe0; border-radius: 6px; background: #fff; }
/* 无结果标题。 */
.empty-state h3 { margin: 0 0 10px; }
/* 无结果说明。 */
.empty-state p { color: var(--muted); }
/* 无结果恢复按钮。 */
.empty-state button { height: 40px; padding: 0 20px; border: 0; border-radius: 4px; background: var(--accent); color: #fff; cursor: pointer; }
/* 分页按钮容器。 */
/* 数字分页容器始终保留最小高度，切换到内容较少的分类时页面底部不会突然收起。 */
.pagination { display: flex; justify-content: center; gap: 8px; min-height: 39px; margin-top: 30px; }
/* 单个分页按钮。 */
.pagination button { width: 39px; height: 39px; border: 1px solid var(--line); border-radius: 4px; background: #fff; cursor: pointer; }
/* 分页按钮悬停和当前页状态。 */
.pagination button:hover, .pagination button.active { border-color: var(--accent); background: var(--accent); color: #fff; }
/* 不可点击的分页按钮。 */
.pagination button:disabled { opacity: .35; cursor: not-allowed; }
/* 省略号占用与页码按钮接近的宽度，但不可点击。 */
.pagination-ellipsis { width: 24px; height: 39px; display: inline-grid; place-items: center; color: var(--muted); font-weight: 700; }

/* ==================== 内容中心右侧栏 ==================== */
/* 右侧栏在桌面端滚动时保持可见。 */
.sidebar { display: grid; gap: 22px; position: sticky; top: 100px; }
/* 右侧栏通用白色面板。 */
.sidebar-panel { padding: 22px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
/* 实时时钟面板：保留白色卡片体系，并增加与参考图相近的柔光圆角。 */
.clock-panel {
  position: relative;
  overflow: hidden;
  padding: 19px 12px 17px;
  border-radius: 14px;
  background: linear-gradient(145deg, #fff 0%, #fdfbff 100%);
  box-shadow: 0 12px 30px rgba(106, 70, 156, .10);
  text-align: center;
}
/* 大号数字时间：紫色主体配合青色与玫红偏移阴影，模拟参考图的彩色数码显示。 */
.clock-time {
  color: #cf1b57;
  font-family: "Arial Black", "Microsoft YaHei", sans-serif;
  font-size: clamp(35px, 3.2vw, 44px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -.075em;
  white-space: nowrap;
  text-shadow: 3px 0 0 #02b9e8, -2px 0 0 #d5008f;
}
/* 年月日与星期放在数字时钟下方，字号较小，避免抢占主视觉。 */
.clock-date { margin-top: 10px; color: var(--muted); font-size: 16px; letter-spacing: .04em; white-space: nowrap; }
/* 右侧栏面板标题。 */
.sidebar-title { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 17px; border-bottom: 1px solid var(--line); }
/* 右侧栏中文标题。 */
.sidebar-title span { font-size: 17px; font-weight: 800; }
/* 右侧栏英文小标题。 */
.sidebar-title small { color: #aaaeb5; font-size: 9px; letter-spacing: .15em; }
/* 热门排行列表。 */
.ranking-list { display: grid; }
/* 单条热门排行。 */
.ranking-item { display: grid; grid-template-columns: 30px 58px minmax(0, 1fr); gap: 10px; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--line); }
/* 最后一条排行取消底部分隔线。 */
.ranking-item:last-child { border-bottom: 0; padding-bottom: 0; }
/* 热门排行序号。 */
.ranking-index { color: var(--accent); font-size: 18px; font-weight: 800; font-style: italic; }
/* 热门排行缩略图。 */
.ranking-thumb { width: 58px; height: 48px; overflow: hidden; border-radius: 3px; background: #eee; }
/* 热门排行缩略图内容。 */
.ranking-thumb img { width: 100%; height: 100%; object-fit: cover; }
/* 热门排行文字容器。 */
.ranking-copy { min-width: 0; }
/* 热门排行标题，最多两行。 */
.ranking-copy strong { display: block; font-size: 12px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* 热门排行数据。 */
.ranking-copy small { display: block; margin-top: 6px; color: var(--muted); font-size: 10px; }
/* 分类标签云。 */
.tag-cloud { display: flex; flex-wrap: wrap; gap: 9px; padding-top: 18px; }
/* 单个分类标签按钮。 */
.tag-cloud button { padding: 7px 10px; border: 1px solid var(--line); border-radius: 3px; background: #fafafa; color: #656970; cursor: pointer; font-size: 11px; }
/* 标签按钮悬停状态。 */
.tag-cloud button:hover { border-color: var(--accent); color: var(--accent); }
/* 联系方式深色面板。 */
.sidebar-contact { background: var(--dark); color: #fff; }
/* 联系方式标题。 */
.sidebar-contact h3 { margin: 0 0 12px; font-size: 24px; }
/* 联系方式说明。 */
.sidebar-contact > p:not(.section-kicker) { color: rgba(255,255,255,.62); font-size: 12px; line-height: 1.8; }
/* 联系方式链接。 */
.sidebar-contact a { display: inline-flex; margin: 12px 14px 0 0; padding-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,.45); font-size: 12px; }

/* ==================== 页脚 ==================== */
/* 页脚内容左右排列。 */
.footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 30px; }
/* 页脚站点名称。 */
.footer-inner strong { font-size: 18px; }
/* 页脚说明文字。 */
.footer-inner p { margin: 9px 0 0; color: rgba(255,255,255,.5); font-size: 12px; }
/* 返回顶部链接。 */
.footer-inner > a { color: rgba(255,255,255,.65); font-size: 12px; }

/* ==================== 搜索弹层与提示 ==================== */
/* 全屏搜索遮罩，默认不可见。 */
.search-overlay { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; padding: 24px; background: rgba(9,10,13,.94); opacity: 0; visibility: hidden; transition: .22s ease; }
/* 打开搜索弹层。 */
.search-overlay.open { opacity: 1; visibility: visible; }
/* 搜索弹层关闭按钮。 */
.overlay-close { position: absolute; right: 28px; top: 25px; border: 0; background: none; color: rgba(255,255,255,.75); cursor: pointer; }
/* 搜索表单最大宽度。 */
.search-overlay form { width: min(760px, 100%); color: #fff; }
/* 搜索弹层大标题。 */
.search-overlay label { display: block; margin-bottom: 22px; font-size: clamp(30px, 6vw, 64px); font-weight: 800; }
/* 输入框与搜索按钮容器。 */
.search-overlay form > div { display: flex; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.4); }
/* 搜索弹层输入框。 */
.search-overlay input { flex: 1; min-width: 0; height: 55px; border: 0; outline: 0; background: transparent; color: #fff; font-size: 20px; }
/* 搜索弹层提交按钮。 */
.search-overlay form button { min-width: 100px; border: 0; border-radius: 4px; background: var(--accent); color: #fff; cursor: pointer; }
/* 页面底部轻提示。 */
.toast { position: fixed; left: 50%; bottom: 26px; z-index: 10000; padding: 12px 18px; border-radius: 4px; background: rgba(15,16,19,.92); color: #fff; font-size: 12px; opacity: 0; pointer-events: none; transform: translate(-50%, 14px); transition: .2s ease; }
/* 显示轻提示。 */
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ==================== 平板与窄屏桌面适配 ==================== */
/* 1080px 以下：内容区仍保持三列，侧边栏移到底部以保证卡片宽度。 */
@media (max-width: 1080px) {
  /* 缩小桌面导航间距。 */
  .desktop-nav { gap: 22px; }
  /* 快捷入口改为两列。 */
  .quick-grid { grid-template-columns: repeat(2, 1fr); }
  /* 第二个快捷卡片取消右边框。 */
  .quick-card:nth-child(2) { border-right: 0; }
  /* 前两张快捷卡片增加底部分隔线。 */
  .quick-card:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  /* 精选区域适当缩小公告栏宽度。 */
  .featured-layout { grid-template-columns: minmax(0, 1.45fr) minmax(270px, .85fr); }
  /* 内容列表与侧边栏改为上下排列。 */
  .library-layout { grid-template-columns: 1fr; }
  /* 侧边栏改为三列并取消吸顶。 */
  .sidebar { position: static; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* 三列侧边栏下压缩时钟数字，避免窄卡片出现横向溢出。 */
  .clock-time { font-size: 34px; }
  .clock-date { font-size: 10px; }
}

/* ==================== 移动端适配 ==================== */
/* 820px 以下视为移动端：内容中心固定显示两列。 */
@media (max-width: 820px) {
  /* 移动端导航使用较深背景。 */
  .site-header { background: rgba(11,12,15,.68); }
  /* 缩小移动端导航高度。 */
  .header-inner { min-height: 66px; }
  /* 隐藏桌面导航和桌面搜索按钮。 */
  .desktop-nav, .header-search { display: none; }
  /* 显示移动菜单按钮。 */
  .menu-toggle { display: block; margin-left: auto; }
  /* 移动端下拉导航基础样式。 */
  .mobile-nav { position: absolute; top: 100%; left: 0; right: 0; display: grid; padding: 10px 20px 18px; background: rgba(255,255,255,.98); border-bottom: 1px solid var(--line); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: .2s ease; }
  /* 打开移动端导航。 */
  .mobile-nav.open { opacity: 1; visibility: visible; transform: translateY(0); }
  /* 移动端导航链接。 */
  .mobile-nav a { padding: 13px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 14px; }
  /* 移动端带二级分页的导航组使用块级排列。 */
  .mobile-nav-group > a { display: block; }
  /* 移动端二级分页使用两列，减少菜单高度并保持触屏点击空间。 */
  .mobile-nav-subpages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 16px; padding: 5px 0 8px 14px; border-bottom: 1px solid var(--line); }
  /* 二级分页链接去掉重复分隔线，并用较小字号显示层级。 */
  .mobile-nav-subpages a { padding: 8px 0; border-bottom: 0; color: var(--muted); font-size: 12px; }
  /* 移动端二级分页点击或聚焦时使用网站强调色。 */
  .mobile-nav-subpages a:hover,
  .mobile-nav-subpages a:focus-visible { color: var(--accent); outline: 0; }
  /* 移动端首屏视频高度略微缩小。 */
  .hero, .hero-content { min-height: 570px; }
  /* 移动端首屏内容上边距。 */
  .hero-content { padding-top: 122px; padding-bottom: 68px; }
  /* 移动端首屏标题字号。 */
  .hero h1 { font-size: clamp(46px, 13vw, 68px); }
  /* 快捷入口覆盖首屏的距离减少。 */
  .quick-links { margin-top: -28px; }
  /* 移动端明确固定为两列两排；该规则不修改 PC 端四列或窄屏桌面的现有排列。 */
  .quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 移动端分区上下留白。 */
  .featured-section, .library-section { padding: 68px 0; }
  /*
   * 【本次修改：手机端隐藏互动小人】
   * 取消为小人预留的右侧空间，让内容中心标题和分类导航恢复整行宽度。
   */
  .library-intro { min-height: 0; padding-right: 0; }
  .singer-playground { display: none !important; }
  /* 精选轮播和公告栏改为上下排列。 */
  .featured-layout { grid-template-columns: 1fr; }
  /* 移动端轮播图高度。 */
  .featured-carousel { height: 340px; }
  /* 公告栏取消固定最小高度。 */
  .notice-panel { min-height: 0; }
  /* 内容中心普通分类在移动端保持原来的两列。 */
  .article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  /* 【手机壁纸手机端】固定为两列。 */
  .article-grid[data-gallery-layout="mobile-wallpaper"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 【头像/表情包手机端】两类正方形内容固定为三列。 */
  .article-grid[data-gallery-layout="avatar"],
  .article-grid[data-gallery-layout="emoji"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* 内容中心侧边栏改为两列。 */
  .sidebar { position: static; grid-template-columns: 1fr 1fr; }
  /* 时钟与联系方式面板横跨两列，保证数字和完整日期不被挤压。 */
  .clock-panel,
  .sidebar-contact { grid-column: 1 / -1; }
  /* 横跨两列后恢复更接近参考图的大号数字。 */
  .clock-time { font-size: 44px; }
}

/* ==================== 小屏手机适配 ==================== */
/* 560px 以下继续保留两列内容卡片，只压缩间距和字号。 */
@media (max-width: 560px) {
  /* 小屏手机上的详情弹层减少边距，并让窗口更贴合屏幕宽度。 */
  .resource-detail-overlay { padding: 12px; align-items: center; }
  /* 【本次修改】极窄屏同样完全隐藏互动小人，不再占用标题与分类导航空间。 */
  .library-intro { min-height: 0; padding-right: 0; }
  .singer-playground { display: none !important; }
  .resource-detail-modal { max-height: calc(100dvh - 24px); }

  /*
   * 【手机壁纸移动端弹窗缩小】仅在 560px 以下收窄手机壁纸详情窗口。
   * 保留原来的 9:16 比例、圆角、边框、阴影和内部布局，只让弹窗整体与屏幕四周留出更多空间。
   */
  .resource-detail-overlay[data-gallery-layout="mobile-wallpaper"] .resource-detail-modal {
    width: min(320px, 86vw);
    max-height: calc(100dvh - 48px);
  }

  .resource-detail-body { padding: 19px 18px 20px; }
  /* 普通图库弹窗在小屏沿用 4:3；上方更具体的 9:16 与 1:1 规则会继续优先生效。 */
  .resource-detail-media { aspect-ratio: 4 / 3; }
  .resource-detail-meta { font-size: 11px; }
  /* 缩小页面左右留白。 */
  .shell { width: min(calc(100% - 24px), var(--shell)); }
  /* 缩小移动端品牌字号。 */
  .text-brand strong { font-size: 17px; }
  /* 小屏首屏视频高度。 */
  .hero, .hero-content { min-height: 535px; }
  /* 小屏首屏内容间距。 */
  .hero-content { padding-top: 108px; padding-bottom: 60px; }
  /* 小屏说明文字。 */
  .hero-description { margin: 20px 0 24px; font-size: 13px; line-height: 1.7; }
  /* 小屏搜索框外层留白。 */
  .hero-search-form { padding: 5px; }
  /* 小屏搜索输入框。 */
  .hero-search-form input { height: 44px; padding: 0 12px; font-size: 13px; }
  /* 小屏搜索按钮。 */
  .hero-search-form button { min-width: 74px; }

  /* 小屏手机的四个快捷入口固定为两列两排，PC 端原有排列规则不受影响。 */
  .quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 压缩小屏快捷卡片的内边距和间距，保留原有序号、标题、说明与操作文字结构。 */
  .quick-card { min-width: 0; min-height: 102px; padding: 18px 12px; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; border-right: 1px solid var(--line); border-bottom: 0 !important; }
  /* 每一排右侧卡片取消右边框，形成完整的两列边界。 */
  .quick-card:nth-child(even) { border-right: 0; }
  /* 第一排两张卡片保留底部分隔线。 */
  .quick-card:nth-child(-n+2) { border-bottom: 1px solid var(--line) !important; }
  /* 第二排两张卡片不显示底线，避免与容器圆角边缘重复。 */
  .quick-card:nth-child(n+3) { border-bottom: 0 !important; }
  /* 小屏适当缩小快捷入口文字，防止两列布局下内容互相挤压。 */
  .quick-number { font-size: 11px; }
  .quick-copy strong { font-size: 14px; }
  .quick-copy small { margin-top: 5px; font-size: 10px; line-height: 1.45; }
  .quick-arrow { font-size: 10px; }
  /* 分区标题改为上下排列。 */
  .section-title-row { align-items: flex-start; flex-direction: column; }
  /* 小屏隐藏分区右侧“查看全部”链接。 */
  .section-title-row > a { display: none; }
  /* 小屏轮播高度。 */
  .featured-carousel { height: 260px; }
  /* 缩小轮播文字位置。 */
  .feature-card-content { left: 20px; right: 54px; bottom: 22px; }
  /* 缩小轮播标题。 */
  .feature-card-content h3 { font-size: 22px; }
  /* 缩小轮播控制按钮。 */
  .carousel-control { width: 36px; height: 36px; font-size: 24px; }
  /* 上一张按钮靠左。 */
  .carousel-control-prev { left: 10px; }
  /* 下一张按钮靠右。 */
  .carousel-control-next { right: 10px; }
  /* 轮播圆点位置。 */
  .carousel-dots { right: 18px; bottom: 20px; }
  /* 缩小公告栏内边距。 */
  .notice-panel { padding: 22px 20px; }
  /* 内容中心标题左对齐。 */
  .library-heading { align-items: flex-start; }
  /* 移动端一级分类和二级分页都允许横向滑动，避免小屏按钮被压缩。 */
  .category-tabs,
  .subcategory-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  /* 隐藏横向滚动条，但保留手指滑动能力。 */
  .category-tabs::-webkit-scrollbar,
  .subcategory-tabs::-webkit-scrollbar { display: none; }
  /* 一级分类和二级分页按钮都保持自然宽度。 */
  .category-tabs button,
  .subcategory-tabs button { flex: 0 0 auto; }
  /* 手机端普通内容卡片保持两列并缩小间距。 */
  .article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  /* 【手机壁纸小屏】继续保持两列，9:16 比例由上方更精确的属性选择器保留。 */
  .article-grid[data-gallery-layout="mobile-wallpaper"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 【头像/表情包小屏】继续保持三列。 */
  .article-grid[data-gallery-layout="avatar"],
  .article-grid[data-gallery-layout="emoji"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* 普通分类手机端卡片图片比例略高；图库特殊比例不会被此规则覆盖。 */
  .article-image { aspect-ratio: 4 / 3; }
  /* 手机端卡片文字区域。 */
  .article-body { min-height: 126px; padding: 12px 10px 11px; }
  /* 手机端卡片标题字号。 */
  .article-body h3 { margin: 7px 0 10px; font-size: 13px; }
  /* 手机端卡片底部信息改为上下排列，防止挤压。 */
  .article-meta { flex-direction: column; gap: 3px; font-size: 9px; }
  /* 手机端侧边栏改为单列。 */
  .sidebar { grid-template-columns: 1fr; }
  /* 时钟与联系方式面板恢复单列。 */
  .clock-panel,
  .sidebar-contact { grid-column: auto; }
  /* 小屏时钟保持醒目但不超出卡片。 */
  .clock-time { font-size: clamp(38px, 12vw, 48px); }
  /* 页脚改为上下排列。 */
  .footer-inner { align-items: flex-start; flex-direction: column; }
  /* 搜索弹层标题字号。 */
  .search-overlay label { font-size: 34px; }
}

/* ==================== 登录、注册与账号状态 ==================== */
/* 以下样式控制桌面/移动端账号入口、账号菜单和登录注册弹层。 */
/* hidden 属性统一强制隐藏元素。 */
[hidden] { display: none !important; }

/* 桌面端未登录状态的登录/注册按钮容器。 */
.desktop-auth {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* 登录和注册按钮的通用外观。 */
.auth-button {
  height: 38px;
  padding: 0 17px;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease;
}
.auth-button:hover { transform: translateY(-1px); }
/* 透明描边的次要账号按钮。 */
.auth-button-ghost {
  border-color: rgba(255,255,255,.38);
  background: rgba(255,255,255,.08);
  color: #fff;
}
/* 强调色的主要账号按钮。 */
.auth-button-primary {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}
.auth-button-primary:hover { border-color: var(--accent-deep); background: var(--accent-deep); }
.site-header.scrolled .auth-button-ghost {
  border-color: var(--line);
  background: #fff;
  color: var(--ink);
}
.site-header.scrolled .auth-button-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* 已登录用户入口及下拉菜单定位容器。 */
.account-wrap { position: relative; }
/* 已登录用户头像和用户名按钮。 */
.user-trigger {
  height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 12px 0 6px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 999px;
  background: rgba(255,255,255,.09);
  color: #fff;
  cursor: pointer;
}
.site-header.scrolled .user-trigger {
  border-color: var(--line);
  background: #fff;
  color: var(--ink);
}
/* 用户头像圆形占位符。 */
.user-avatar {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #8b5cf6);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}
.user-name {
  max-width: 92px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
}
.user-caret { font-size: 13px; opacity: .72; }
/* 桌面端用户信息下拉菜单。 */
.user-menu {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 220px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 18px 50px rgba(16,18,25,.18);
}
.user-menu::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 24px;
  width: 11px;
  height: 11px;
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
  background: #fff;
  transform: rotate(45deg);
}
.user-menu-summary { padding: 9px 9px 13px; border-bottom: 1px solid var(--line); }
.user-menu-summary strong,
.user-menu-summary small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu-summary strong { font-size: 14px; }
.user-menu-summary small { margin-top: 6px; color: var(--muted); font-size: 11px; }
.user-menu > button {
  width: 100%;
  margin-top: 7px;
  padding: 10px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  text-align: left;
  color: #c52d47;
  cursor: pointer;
}
.user-menu > button:hover { background: #fff1f4; }

/* 移动导航中的链接和账号模块。 */
.mobile-nav-links { display: grid; }
.mobile-search-button,
.mobile-auth,
.mobile-user { display: none; }

/* 提高搜索弹层层级，使其覆盖导航和樱花画布。 */
.search-overlay { z-index: 12000; }
/* 登录/注册页面遮罩，默认透明并不可见。 */
.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: grid;
  place-items: center;
  padding: 28px;
  overflow-y: auto;
  background: rgba(7,8,11,.82);
  backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, visibility .22s ease;
}
.auth-overlay.open { opacity: 1; visibility: visible; }
/* 登录/注册白色弹窗主体。 */
.auth-modal {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100dvh - 56px);
  overflow-y: auto;
  padding: 42px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: rgba(255,255,255,.985);
  box-shadow: 0 32px 100px rgba(0,0,0,.36);
  transform: translateY(12px) scale(.985);
  transition: transform .22s ease;
}
.auth-overlay.open .auth-modal { transform: translateY(0) scale(1); }
/* 登录/注册弹窗关闭按钮。 */
.auth-close {
  position: absolute;
  top: 17px;
  right: 18px;
  padding: 7px 9px;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
}
.auth-close:hover { color: var(--accent); }
/* 登录/注册弹窗标题区域。 */
.auth-heading { padding-right: 52px; }
.auth-heading .section-kicker { margin: 0 0 10px; }
.auth-heading h2 { margin: 0; font-size: 34px; letter-spacing: -.03em; }
.auth-heading > p:last-child { margin: 12px 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
/* 登录和注册两个页签。 */
.auth-tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  margin: 28px 0 24px;
  padding: 4px;
  border-radius: 8px;
  background: var(--soft);
}
.auth-tabs button {
  height: 42px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-weight: 700;
}
.auth-tabs button.active { background: #fff; color: var(--ink); box-shadow: 0 5px 17px rgba(20,22,30,.08); }
/* 登录/注册表单字段的垂直排列。 */
.auth-panel form { display: grid; gap: 17px; }
/* 注册表单中用户名与邮箱的双列布局。 */
.auth-field-row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 13px; }
/* 单个表单字段的标签与输入框布局。 */
.auth-field { display: grid; gap: 8px; min-width: 0; }
.auth-field > span:first-child { color: #494c53; font-size: 12px; font-weight: 700; }
.auth-field input {
  width: 100%;
  min-width: 0;
  height: 48px;
  padding: 0 14px;
  border: 1px solid #dfe1e6;
  border-radius: 7px;
  outline: 0;
  background: #fff;
  color: var(--ink);
  font-size: 14px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.auth-field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(235,61,92,.12); }
.auth-field input[aria-invalid="true"] { border-color: #d72846; box-shadow: 0 0 0 3px rgba(215,40,70,.09); }
/* 密码输入框与显示/隐藏按钮的定位容器。 */
.password-control { position: relative; display: block; }
.password-control input { padding-right: 60px; }
.password-control button {
  position: absolute;
  top: 50%;
  right: 7px;
  transform: translateY(-50%);
  height: 34px;
  padding: 0 9px;
  border: 0;
  border-radius: 5px;
  background: var(--soft);
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
}
/* 注册协议复选框与说明文字。 */
.auth-agreement { display: flex; align-items: flex-start; gap: 9px; color: var(--muted); font-size: 11px; line-height: 1.6; cursor: pointer; }
.auth-agreement input { margin-top: 3px; accent-color: var(--accent); }
/* 表单错误或成功提示文字。 */
.form-message { min-height: 18px; margin: -3px 0 0; color: #cb2945; font-size: 12px; line-height: 1.5; }
.form-message.success { color: #168653; }
/* 登录/注册表单主要提交按钮。 */
.auth-submit {
  height: 50px;
  border: 0;
  border-radius: 7px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  font-weight: 800;
  box-shadow: 0 12px 24px rgba(235,61,92,.2);
}
.auth-submit:hover { background: var(--accent-deep); }
.auth-submit:disabled { opacity: .58; cursor: wait; }
/* 登录与注册表单底部切换入口。 */
.auth-switch { margin: 0; text-align: center; color: var(--muted); font-size: 12px; }
.auth-switch button { padding: 0; border: 0; background: none; color: var(--accent); cursor: pointer; }
.toast { z-index: 13000; }

/* 中等宽度桌面端缩小导航操作区间距。 */
@media (max-width: 1120px) and (min-width: 821px) {
  .header-inner { gap: 24px; }
  .desktop-nav { gap: 18px; }
  /* 中等桌面端只缩小顶层导航字号，二级分页保持 12px。 */
  .desktop-nav > a,
  .desktop-nav > .nav-item > a { font-size: 13px; }
  .auth-button { padding-inline: 13px; }
  .header-search { padding-inline: 14px; }
}

/* 移动端账号入口与弹窗适配。 */
@media (max-width: 820px) {
  .header-actions { margin-left: auto; }
  .desktop-auth,
  .account-wrap { display: none !important; }
  .mobile-nav {
    max-height: calc(100dvh - 66px);
    overflow-y: auto;
    padding-bottom: max(18px, env(safe-area-inset-bottom));
  }
  .mobile-search-button {
    display: block;
    width: 100%;
    height: 44px;
    margin-top: 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--soft);
    color: var(--ink);
    cursor: pointer;
    text-align: center;
    font-size: 13px;
  }
  .mobile-auth {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px;
    margin-top: 12px;
  }
  .mobile-auth .auth-button { width: 100%; border-radius: 6px; }
  .mobile-auth .auth-button-ghost { border-color: var(--line); background: #fff; color: var(--ink); }
  .mobile-user {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-top: 13px;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--soft);
  }
  .mobile-user-summary { display: flex; align-items: center; gap: 11px; min-width: 0; }
  .mobile-user-summary > span:last-child { min-width: 0; }
  .mobile-user-summary strong,
  .mobile-user-summary small { display: block; max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-user-summary strong { font-size: 13px; }
  .mobile-user-summary small { margin-top: 4px; color: var(--muted); font-size: 10px; }
  .mobile-user > button { flex: 0 0 auto; border: 0; background: transparent; color: var(--accent); cursor: pointer; font-size: 12px; }
  .auth-modal { max-height: calc(100dvh - 32px); }
}

/* 小屏手机登录/注册弹窗改为底部抽屉样式。 */
@media (max-width: 560px) {
  .auth-overlay { padding: 12px; align-items: end; }
  .auth-modal {
    width: 100%;
    max-height: calc(100dvh - 12px);
    padding: 34px 22px max(26px, env(safe-area-inset-bottom));
    border-radius: 14px 14px 0 0;
  }
  .auth-heading { padding-right: 35px; }
  .auth-heading h2 { font-size: 29px; }
  .auth-field-row { grid-template-columns: 1fr; }
  .search-overlay { padding: 18px; }
  .search-overlay form > div { gap: 6px; }
  .search-overlay input { font-size: 16px; }
  .search-overlay form button { min-width: 78px; }
}

/* 430px 以下的极窄手机微调；内容卡片仍保持两列。 */
@media (max-width: 430px) {
  /* 极窄手机首屏标题字号。 */
  .hero h1 { font-size: clamp(40px, 13vw, 56px); }
  /* 极窄手机说明文字行高。 */
  .hero-description { line-height: 1.72; }
  /* 缩小热门关键词间距。 */
  .hot-keywords { gap: 7px; }
  /* 缩小热门关键词字号。 */
  .hot-keywords button { font-size: 11px; }
  /* 保证两列卡片的文字区域有足够高度。 */
  .article-body { min-height: 128px; }
  /* 分页按钮空间不足时允许换行。 */
  .pagination { flex-wrap: wrap; }
  /* 缩小侧边栏面板内边距。 */
  .sidebar-panel { padding: 20px; }
  /* 限制移动端用户信息宽度，超出时省略。 */
  .mobile-user-summary strong,
  .mobile-user-summary small { max-width: 155px; }
}

/* 用户选择“减少动态效果”时关闭平滑动画和过渡。 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}
/*主页页脚*/
 .site-footer { background: #fff; border-top: 1px solid #eef2f8; padding: 24px 0; margin-top: 50px; text-align: center; }
 .footer-links{display:flex;justify-content:center;gap:22px;flex-wrap:wrap;margin-bottom:12px}.footer-links a{font-size:13px;color:#667788;text-decoration:none}.footer-links a:hover{color:#5389eb}.content-card{border:1px solid rgba(83,137,235,.06)}
 .footer-copyright { color: #8899aa; font-size: 13px; }
/* ==================== 首页单排滚动提示 ==================== */
.rolling-notice-section {
  position: relative;
  z-index: 3;
  padding: 24px 0 0;
  background: #fff;
}

.rolling-notice {
  position: relative;
}

.rolling-notice-bar {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  min-height: 52px;
  padding: 0 14px 0 10px;
  overflow: hidden;
  border: 1px solid rgba(122, 162, 255, .22);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255,255,255,.68), rgba(245,249,255,.82));
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  box-shadow: 0 10px 30px rgba(106, 137, 184, .12), inset 0 1px 0 rgba(255,255,255,.6);
}

.rolling-notice-icon {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #86d7ff, #6f9dff);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  box-shadow: 0 6px 14px rgba(111, 157, 255, .24);
}

.rolling-notice-viewport {
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}

.rolling-notice-track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: rollingNoticeMarquee var(--notice-speed, 22s) linear infinite;
}

.rolling-notice-group {
  display: flex;
  flex: none;
  align-items: center;
  gap: 18px;
  min-width: max-content;
  padding: 0 34px 0 12px;
  white-space: nowrap;
}

.rolling-notice-link {
  color: #4a8dff;
  font-size: 14px;
  line-height: 52px;
  text-decoration: none;
  font-weight: 600;
  transition: color .2s ease, opacity .2s ease;
}

.rolling-notice-link:hover {
  color: #2f6fe8;
}

.rolling-notice-separator {
  color: rgba(125, 157, 211, .65);
  font-size: 12px;
}

.rolling-notice:hover .rolling-notice-track,
.rolling-notice:focus-within .rolling-notice-track {
  animation-play-state: paused;
}

@keyframes rollingNoticeMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (max-width: 820px) {
  .rolling-notice-section { padding-top: 18px; }
  .rolling-notice-bar {
    grid-template-columns: 36px minmax(0, 1fr);
    min-height: 46px;
    padding: 0 10px 0 8px;
    border-radius: 14px;
  }
  .rolling-notice-icon { width: 26px; height: 26px; font-size: 13px; }
  .rolling-notice-link { font-size: 12px; line-height: 46px; }
  .rolling-notice-group { gap: 14px; padding-right: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .rolling-notice-track {
    animation-duration: 60s;
  }
}

/* ==================== 受保护跳转访问验证 ==================== */
body.access-gate-open { overflow: hidden; }
.access-gate[hidden] { display: none !important; }
.access-gate {
  position: fixed;
  inset: 0;
  z-index: 12500;
  display: grid;
  place-items: center;
  overflow: auto;
  padding: 34px 18px;
  background:
    radial-gradient(circle at 9% 12%, rgba(126, 109, 255, .18), transparent 22%),
    radial-gradient(circle at 91% 17%, rgba(30, 198, 180, .17), transparent 22%),
    radial-gradient(circle at 82% 88%, rgba(255, 193, 103, .14), transparent 25%),
    linear-gradient(135deg, #eefcff 0%, #f4f2ff 52%, #fffdf5 100%);
}
.access-gate-grid {
  position: absolute;
  inset: 0;
  opacity: .36;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(96, 78, 150, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(96, 78, 150, .07) 1px, transparent 1px);
  background-size: 34px 34px;
}
.access-gate-orb { position: absolute; border-radius: 50%; pointer-events: none; }
.access-gate-orb.one { width: 82px; height: 82px; left: 5%; top: 8%; background: rgba(135, 92, 255, .18); }
.access-gate-orb.two { width: 66px; height: 66px; right: 7%; top: 15%; background: rgba(22, 189, 166, .20); }
.access-gate-orb.three { width: 42px; height: 42px; left: 8%; bottom: 10%; background: rgba(239, 93, 125, .18); }
.access-gate-close {
  position: fixed;
  top: 18px;
  right: 22px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(76, 63, 124, .13);
  border-radius: 50%;
  background: rgba(255, 255, 255, .76);
  color: #28223d;
  box-shadow: 0 10px 28px rgba(62, 48, 110, .12);
  cursor: pointer;
  font-size: 28px;
  line-height: 1;
  backdrop-filter: blur(12px);
}
.access-gate-close:hover { transform: translateY(-1px); background: #fff; }
.access-gate-card {
  position: relative;
  z-index: 1;
  width: min(450px, 100%);
  padding: 40px 34px 30px;
  border: 1px solid rgba(92, 75, 145, .15);
  border-radius: 30px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 30px 80px rgba(62, 48, 110, .18);
  text-align: center;
  backdrop-filter: blur(22px);
}
.access-gate-brand { display: inline-flex; align-items: center; gap: 9px; margin: 0 auto 18px; color: #2a2540; }
.access-gate-brand-icon {
  display: grid;
  place-items: center;
  width: 33px;
  height: 33px;
  border-radius: 12px;
  background: linear-gradient(135deg, #7a4cff, #18bfae);
  color: #fff;
  box-shadow: 0 8px 22px rgba(104, 71, 224, .22);
  font-size: 16px;
}
.access-gate-brand strong { font-size: 21px; letter-spacing: .02em; }
.access-gate-eyebrow { display: block; color: #0db3a5; font-size: 12px; font-weight: 900; letter-spacing: .15em; }
.access-gate-card h2 { margin: 10px 0 2px; color: #242038; font-size: 35px; line-height: 1.15; letter-spacing: -1px; }
.access-gate-subtitle { margin: 0 0 22px; color: #10a99d; font-weight: 850; }
.access-gate-note {
  margin: 0 0 18px;
  padding: 18px;
  border: 1px solid rgba(135, 92, 255, .16);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(135, 92, 255, .08), rgba(22, 189, 166, .07));
  color: #777187;
  text-align: left;
  line-height: 1.75;
}
.access-gate-note strong { display: block; margin-bottom: 5px; color: #2d2840; }
.access-gate-command {
  margin: 0 0 20px;
  padding: 12px;
  border: 1px solid rgba(22, 189, 166, .28);
  border-radius: 17px;
  background: linear-gradient(135deg, rgba(22, 189, 166, .07), rgba(135, 92, 255, .06));
}
.access-gate-command-row { display: grid; grid-template-columns: 1fr auto; gap: 9px; align-items: stretch; }
.access-gate-command-value {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid rgba(22, 189, 166, .30);
  border-radius: 13px;
  background: rgba(255, 255, 255, .78);
  color: #0eaa9d;
  font-weight: 850;
  text-align: left;
  overflow-wrap: anywhere;
}
.access-gate-command-copy {
  min-height: 48px;
  border: 0;
  border-radius: 13px;
  padding: 0 18px;
  background: #14bba9;
  color: #fff;
  font-weight: 850;
  white-space: nowrap;
  box-shadow: 0 9px 24px rgba(22, 189, 166, .20);
  cursor: pointer;
}
.access-gate-command-copy:hover { transform: translateY(-1px); filter: brightness(1.03); }
.access-gate-command-copy:disabled { opacity: .5; cursor: not-allowed; transform: none; filter: none; }
.access-gate-command-tip { margin: 10px 0 0; color: #827c91; font-size: 12px; }
.access-gate-field { display: block; margin: 0 0 8px; color: #625d70; font-size: 13px; font-weight: 750; text-align: left; }
.access-gate-password-wrap { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.access-gate-password-wrap input {
  width: 100%;
  min-width: 0;
  height: 52px;
  border: 1px solid #ddd8e8;
  border-radius: 14px;
  outline: none;
  padding: 0 15px;
  background: rgba(255, 255, 255, .88);
  color: #252139;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.access-gate-password-wrap input:focus { border-color: #8a5cff; box-shadow: 0 0 0 4px rgba(135, 92, 255, .10); }
.access-gate-password-toggle {
  min-width: 60px;
  border: 1px solid #ddd8e8;
  border-radius: 14px;
  background: #f3efff;
  color: #3c315d;
  font-weight: 800;
  cursor: pointer;
}
.access-gate-verify {
  width: 100%;
  min-height: 48px;
  margin-top: 18px;
  border: 0;
  border-radius: 13px;
  background: linear-gradient(135deg, #7a4cff, #6936e9);
  color: #fff;
  box-shadow: 0 14px 30px rgba(111, 67, 228, .24);
  font-weight: 900;
  cursor: pointer;
}
.access-gate-verify:hover { transform: translateY(-1px); filter: brightness(1.03); }
.access-gate-verify:disabled { opacity: .7; cursor: wait; transform: none; }
.access-gate-error { min-height: 22px; margin: 8px 0 0; color: #df365c; font-size: 13px; }
.access-gate-foot { margin: 14px 0 0; color: #918b9c; font-size: 12px; line-height: 1.6; }

@media (max-width: 560px) {
  .access-gate { padding: 20px 12px; align-items: start; }
  .access-gate-card { margin-top: 36px; padding: 28px 20px 24px; border-radius: 24px; }
  .access-gate-card h2 { font-size: 30px; }
  .access-gate-command-row { grid-template-columns: 1fr; }
  .access-gate-command-copy { min-height: 44px; }
  .access-gate-close { top: 10px; right: 12px; width: 40px; height: 40px; }
}