/* ============================================================
   代理商登录门禁 + 个人中心
   门禁：未登录整页黑科技登录；登录后原地切「个人中心」
   个人中心：等级徽章 + 成长进度 + 按等级解锁的福利 + 8 库入口
   ============================================================ */

/* 个人中心专属主题色（顶栏每页身份色跟随 body[data-tab]） */
body[data-tab="me"] { --id: #6366f1; }

/* ---------- 门禁整体 ---------- */
.gate {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow: hidden;
  /* 2026-09-30：底子由「不透明深色」换成「半透明遮罩 + 轻模糊」。
     原来是整页墙，不透明正好；降级成按需浮层之后，不透明背景会让它
     看起来仍是那堵墙 —— 用户以为门又关上了，其实背后内容一直在。
     留一条缝让人看见「东西还在，关掉这层就能接着看」，正是这次改动的全部意义。 */
  background:
    radial-gradient(1200px 600px at 12% -10%, rgba(56, 189, 248, .14), transparent 60%),
    radial-gradient(900px 520px at 112% 118%, rgba(139, 92, 246, .14), transparent 55%),
    rgba(7, 11, 24, .58);
  backdrop-filter: blur(7px) saturate(.92);
  -webkit-backdrop-filter: blur(7px) saturate(.92);
}
/* ============================================================
   两种状态（2026-09-30 改）
   ------------------------------------------------------------
   in     已登录：门禁卡永不出现，门户全可见。
   guest  游客：门户**全可见**（顶栏 / 底栏 / 八个库 / 内容都在），
          门禁卡从「整页墙」降级成**按需浮层** —— 只有游客真的要去
          复制 / 下载 / 提问 / 进工具时，才由 client.js 给它加上 .show。

   为什么改：产品决定是「不登录也能看见各个库，只是点不动」。
   一堵整页墙站在门口，客人连里面有什么都不知道，注册也就无从谈起。

   ⚠️ 可见度是服务端的事（/api/data 给游客摘掉动作型字段），
      这里只管「卡片什么时候出现」。别把两者搞混 ——
      用 CSS 藏内容挡不住任何人。
   ============================================================ */
.gate.show { display: flex; }
body[data-state="in"] .gate { display: none; }
/* 浮层打开时锁滚动，避免背后页面跟着滑 */
body.gate-open { overflow: hidden; }

/* 兜底：万一别处把状态写成了 gate，仍旧按「整页墙」处理，
   不让页面退化成一片空白。这条不该被走到。
   ★ 这一支要**恢复不透明**：整页墙那支把 appbar / main / tabbar 全藏了，
     背后根本没有内容可透，半透明遮罩会露出版面的灰底，像没加载完。 */
body[data-state="gate"] .gate {
  display: flex;
  background: linear-gradient(160deg, #070b18 0%, #0b1224 46%, #0a0f1f 100%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body[data-state="gate"] .appbar,
body[data-state="gate"] main.page,
body[data-state="gate"] .tabbar { display: none !important; }

/* ============================================================
   游客浮条：只有游客看得到（见 index.html 的 #guestBar）
   ------------------------------------------------------------
   ★ 为什么是 fixed 浮条而不是页面里的一条横幅：
     站内所有吸顶元素（卖点导航、各段 scroll-margin-top）都按
     --hdr-h 算。往文档流里插一条横幅，等于让顶栏高度在运行时变一次，
     吸顶元素就得全体重算 —— 那个坑上次在门禁撤除时已经踩过一回。
     浮条不占文档流，一个都不用动。
   ★ --gtab-h 由 client.js 量出底栏实际高度写进来（桌面端底栏 display:none，
     量到 0），这样浮条在手机上永远贴在底栏上方、在桌面上贴屏幕底。
   ============================================================ */
.gbar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--gtab-h, 0px) + 14px);
  z-index: 76;                 /* 低于底栏 78：手机上不会盖住导航 */
  display: none;
  align-items: center;
  gap: 10px;
  max-width: calc(100% - 24px);
  padding: 9px 10px 9px 14px;
  border-radius: 999px;
  background: var(--solid);
  border: 1px solid var(--line-2);
  box-shadow: 0 16px 38px -22px rgba(15, 23, 42, .7);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--txt-2);
  white-space: nowrap;
}
body[data-state="guest"] .gbar { display: flex; }
.gbar-t { overflow: hidden; text-overflow: ellipsis; }
.gbar-t em { font-style: normal; color: var(--txt-4); font-weight: 600; }
.gbar-btn {
  flex: 0 0 auto;
  height: 30px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 800;
  font-family: inherit;
  color: #fff;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
}
.gbar-btn:hover { filter: brightness(1.06); }
@media (max-width: 420px) {
  /* 窄屏上把「访客浏览」四个字收掉，只留后半句 —— 一行放得下最要紧 */
  .gbar-t em { display: none; }
}

/* 游客态：动作按钮上的小锁（复制 / 下载 / 提问…） */
.glock { display: inline-flex; align-items: center; margin-right: 5px; opacity: .85; }
.glock svg { width: 13px; height: 13px; }

/* 门禁卡上的关闭键：整页墙时代不需要它（无处可退），
   降级成浮层之后必须有 —— 否则游客点错一下就出不去了。 */
.gate-x {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(148, 163, 184, .35);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  color: #cbd5e1;
  font-size: 15px;
  line-height: 1;
  font-family: inherit;
}
.gate-x:hover { background: rgba(148, 163, 184, .16); color: #fff; }

/* 门禁卡底部的「还没有账号」一行 */
.gate-reg {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px dashed rgba(148, 163, 184, .3);
  font-size: 12.5px;
  line-height: 1.7;
  color: #94a3b8;
  text-align: center;
}
.gate-reg b { color: #cbd5e1; font-weight: 700; }

/* 教程内页：游客比登录后少两枚按钮（打开后台 / 下载整册），
   这里补一句「少了什么」—— 让按钮凭空消失，看着像手册没做完。 */
.tw-guesthint {
  display: inline-flex;
  align-items: center;
  align-self: center;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--txt-3);
}

/* 门禁背景：网格 + 浮动光球 */
.gate .g-grid {
  position: absolute;
  inset: -2px;
  background-image:
    linear-gradient(rgba(120, 160, 255, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 160, 255, .07) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(circle at 50% 38%, #000 0%, transparent 76%);
          mask-image: radial-gradient(circle at 50% 38%, #000 0%, transparent 76%);
}
.gate .g-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .55;
  animation: gateFloat 14s ease-in-out infinite;
}
.gate .go1 { width: 360px; height: 360px; left: -80px; top: -60px; background: #1d4ed8; }
.gate .go2 { width: 320px; height: 320px; right: -60px; bottom: -40px; background: #7c3aed; animation-delay: -5s; }
.gate .go3 { width: 240px; height: 240px; right: 28%; top: -50px; background: #06b6d4; animation-delay: -9s; }
@keyframes gateFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(26px); }
}

/* 登录卡 */
.gate-card {
  position: relative;
  z-index: 2;
  width: min(440px, 100%);
  padding: 36px 34px 28px;
  border-radius: 22px;
  background: rgba(13, 20, 40, .72);
  border: 1px solid rgba(120, 160, 255, .22);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .06);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  animation: gateIn .5s cubic-bezier(.2, .8, .2, 1);
}
@keyframes gateIn {
  from { opacity: 0; transform: translateY(16px) scale(.98); }
  to { opacity: 1; transform: none; }
}
.gate-brand { display: flex; align-items: center; gap: 12px; }
.gate-logo {
  width: 42px; height: 42px; border-radius: 12px; flex: none;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #2563eb, #60a5fa);
  color: #fff; font-weight: 800; font-size: 20px;
  box-shadow: 0 8px 24px rgba(37, 99, 235, .5);
}
.gate-brand b { color: #eaf2ff; font-size: 16px; letter-spacing: .5px; }
.gate-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 18px 0 7px;
  font-size: 12px; letter-spacing: 2px; color: #7dd3fc; text-transform: uppercase;
}
.gate-eyebrow::before { content: ""; width: 18px; height: 1px; background: #38bdf8; }
.gate-title { color: #f4f8ff; font-size: 25px; font-weight: 800; margin: 2px 0 6px; }
.gate-sub { color: #9fb3d1; font-size: 13.5px; line-height: 1.6; margin-bottom: 20px; }

.gate-field { margin-bottom: 14px; }
.gate-field label {
  display: block; color: #a9bce0; font-size: 12.5px; margin-bottom: 7px; letter-spacing: .5px;
}
.gate-input {
  width: 100%; height: 46px; padding: 0 14px;
  background: rgba(8, 13, 28, .7);
  border: 1px solid rgba(120, 160, 255, .2);
  border-radius: 12px;
  color: #eaf2ff; font-size: 15px;
  transition: border-color .2s, box-shadow .2s;
}
.gate-input::placeholder { color: #5e6f92; }
.gate-input:focus {
  outline: none;
  border-color: #38bdf8;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, .18), 0 0 22px rgba(56, 189, 248, .25);
}
.gate-btn {
  width: 100%; height: 48px; margin-top: 10px;
  border: none; border-radius: 12px; cursor: pointer;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: #fff; font-size: 16px; font-weight: 700; letter-spacing: 2px;
  box-shadow: 0 12px 30px rgba(37, 99, 235, .45);
  transition: transform .12s, box-shadow .2s, opacity .2s;
}
.gate-btn:hover { transform: translateY(-1px); box-shadow: 0 16px 42px rgba(37, 99, 235, .55); }
.gate-btn:active { transform: translateY(0); }
.gate-btn[disabled] { opacity: .6; cursor: default; transform: none; }
.gate-hint { min-height: 18px; margin-top: 12px; text-align: center; font-size: 13px; color: #fca5a5; }

/* ---------- 个人中心 ---------- */
#viewMe { padding-top: 8px; }
.me-hero {
  position: relative; overflow: hidden;
  border-radius: 20px; padding: 26px 28px;
  background:
    radial-gradient(600px 300px at 92% -40%, rgba(124, 58, 237, .35), transparent 60%),
    linear-gradient(135deg, #0b1430 0%, #111c3e 58%, #0b1430 100%);
  border: 1px solid rgba(120, 160, 255, .2);
  color: #eaf2ff;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
}
.me-hero .h-grid {
  position: absolute; inset: 0; opacity: .5;
  background-image:
    linear-gradient(rgba(120, 160, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 160, 255, .06) 1px, transparent 1px);
  background-size: 40px 40px;
}
.me-top { position: relative; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.me-avt {
  width: 64px; height: 64px; border-radius: 18px; flex: none;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #2563eb, #60a5fa);
  font-size: 28px; font-weight: 800; color: #fff;
  box-shadow: 0 10px 26px rgba(37, 99, 235, .5);
}
.me-id .me-name { font-size: 22px; font-weight: 800; }
.me-id .me-meta { margin-top: 7px; display: flex; gap: 10px; flex-wrap: wrap; }
.me-tag {
  font-size: 12px; padding: 3px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14);
  color: #cfe0ff;
}
.me-badge {
  margin-left: auto;
  display: flex; align-items: center; gap: 9px;
  padding: 9px 15px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(56, 189, 248, .22), rgba(124, 58, 237, .22));
  border: 1px solid rgba(125, 211, 252, .45);
}
.me-badge .b-lv { font-size: 15px; font-weight: 800; color: #bae6fd; }
.me-badge .b-name { font-size: 12.5px; color: #e0ecff; }

.me-grow { position: relative; margin-top: 22px; }
.me-grow .g-row { display: flex; justify-content: space-between; font-size: 12.5px; color: #a9bce0; margin-bottom: 8px; }
.me-grow .g-row b { color: #e0ecff; }
.me-grow .g-bar { height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.me-grow .g-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #38bdf8, #a78bfa);
  box-shadow: 0 0 18px rgba(56, 189, 248, .6);
  transition: width .7s cubic-bezier(.2, .8, .2, 1);
}

.me-sec { margin-top: 26px; }
.me-sec-h { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
/* 个人中心这一整段原先是写死的白底深字，夜里会变成几块刺眼的白补丁。
   全部换成变量（云锦下取值和原来一致，看不出变化）。 */
.me-sec-h h3 { font-size: 17px; font-weight: 800; color: var(--txt); }
.me-sec-h .h-tag { font-size: 12px; color: var(--acc-d); background: var(--acc-soft); padding: 2px 9px; border-radius: 999px; }


/* ---------- 等级权益小卡片（2026-10-08 · V1 竖排徽章卡）----------
   每条权益一张独立小卡，桌面一行 6 个，平板 4 个，手机 2 个。
   不再按等级分三张大卡：线上三档权益数是 9 / 6 / 5，分三张的话
   矮的那两张底下会空一大片，看着还是「清单换了个框」。

   渐变只用在三个地方：徽章底色、量词文字、等级胶囊边。
   卡底仍是主站卡片底色（--solid）—— 要的是渐变的贵气，不是把整块刷成深色。

   每档一个专属色（A 组：星蓝 / 星耀紫 / 紫金），挂在 .bc[data-lv] 上，
   换整套配色只改下面那几行变量，结构一行不用动。 */
.bc-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
@media(max-width:1100px){.bc-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:820px){.bc-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.bc-grid{grid-template-columns:repeat(2,1fr);gap:10px}}

.bc{position:relative;display:flex;flex-direction:column;align-items:center;gap:9px;
  padding:14px 10px 12px;border-radius:14px;background:var(--solid);
  border:1px solid var(--line);box-shadow:var(--sh-1);text-align:center;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.bc:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:var(--lv-m)}

/* 宝石徽章：渐变底 + 一条斜向亮带。纯色块只有「颜色」，加了斜切面才像宝石 */
.bc-ic{width:34px;height:34px;border-radius:11px;background:var(--lv-g);color:#fff;
  display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -3px 7px rgba(0,0,0,.18),0 3px 8px -3px var(--lv-sh)}
.bc-ic::after{content:"";position:absolute;left:-45%;top:-70%;width:60%;height:240%;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0));transform:rotate(24deg)}
.bc-ic svg{width:15px;height:15px}

/* 名字限两行：186px 一格，「独立OEM贴牌」这种短名一行就够，
   「专属课程 12 门」拆了量词也一行，留两行是给运营随手写长名的余量 */
.bc-nm{font-size:13.5px;font-weight:700;color:var(--txt);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bc-q{font-style:normal;font-size:12px;font-weight:800;color:var(--lv-t)}
/* margin-top:auto：把等级胶囊顶到卡片底部，20 张卡名字长短不一时底部对齐 */
.bc-lv{margin-top:auto;font-size:11px;font-weight:700;color:var(--lv-t);
  background:var(--lv-s);border:1px solid var(--lv-l);border-radius:999px;padding:2px 8px}

/* 未解锁：整卡压透明度 + 徽章去色 + 名字降级。
   不用灰到看不见 —— 权益清单的意义一半在「里面有啥」，另一半在「还没拿到啥」，
   后者要是看不清，这张卡就没有存在价值了。 */
.bc.off{opacity:.72}
.bc.off .bc-ic{background:var(--solid-2);color:var(--txt-4);box-shadow:none}
.bc.off .bc-ic::after{display:none}
.bc.off .bc-nm{color:var(--txt-3);font-weight:600}
.bc.off .bc-lv{color:var(--txt-3);background:var(--solid-2);border-color:transparent}

/* 每档专属渐变（渐变 / 文字 / 浅底 / 描边 / 中间色 / 投影） */
.bc[data-lv="L1"]{--lv-g:linear-gradient(135deg,#4f8cff,#7c5cff);--lv-t:#3f5bd6;--lv-s:#eef3ff;--lv-l:#c9d6ff;--lv-m:#7c5cff;--lv-sh:rgba(90,105,255,.40)}
.bc[data-lv="L2"]{--lv-g:linear-gradient(135deg,#8b5cf6,#c026d3);--lv-t:#7c2fb0;--lv-s:#f6efff;--lv-l:#e3cdfb;--lv-m:#a24bd8;--lv-sh:rgba(150,80,220,.40)}
.bc[data-lv="L3"]{--lv-g:linear-gradient(135deg,#a855f7,#f0a90b);--lv-t:#8a5a06;--lv-s:#fff7e8;--lv-l:#f5dcae;--lv-m:#c47ad0;--lv-sh:rgba(200,130,40,.38)}

/* 三套深色皮肤：上面那组的浅底和深字是按白底算的，
   夜里直接用浅底会自己发光、深字会糊进黑底，所以整套换成「半透明底 + 亮字」。 */
html:is([data-skin="abyss"],[data-skin="aurora"],[data-skin="obsidian"]) .bc[data-lv="L1"]{
  --lv-t:#a8c2ff;--lv-s:rgba(79,140,255,.14);--lv-l:rgba(79,140,255,.30)}
html:is([data-skin="abyss"],[data-skin="aurora"],[data-skin="obsidian"]) .bc[data-lv="L2"]{
  --lv-t:#d8b4fe;--lv-s:rgba(168,85,247,.14);--lv-l:rgba(168,85,247,.30)}
html:is([data-skin="abyss"],[data-skin="aurora"],[data-skin="obsidian"]) .bc[data-lv="L3"]{
  --lv-t:#fcd34d;--lv-s:rgba(240,169,11,.14);--lv-l:rgba(240,169,11,.30)}


.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.lib-card {
  cursor: pointer; padding: 18px 16px; border-radius: 16px;
  background: var(--solid); border: 1px solid var(--line); box-shadow: var(--sh-2);
  transition: transform .12s, box-shadow .2s, border-color .2s;
}
.lib-card:hover { transform: translateY(-3px); box-shadow: var(--sh-3); border-color: var(--acc-line); }
.lib-card .l-ico {
  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  color: var(--on-acc); margin-bottom: 12px; font-size: 18px; font-weight: 800;
}
.lib-card .l-name { font-size: 15px; font-weight: 800; color: var(--txt); }
.lib-card .l-desc { font-size: 12.5px; color: var(--txt-3); margin-top: 5px; line-height: 1.5; }
.lib-card .l-go { margin-top: 12px; font-size: 12.5px; color: var(--acc-d); font-weight: 700; }

/* ---------- 平台公告（2026-10-09 加）----------
   它顶掉的是原来那块「全部素材库」入口网格。
   版式选的是**折叠清单**：公告是「看一眼标题决定要不要读」的东西，
   清单让 5 条标题一屏全在；正文默认收起，展开才占地方。
   （当初在 N1 折叠清单 / N2 卡片流 / N3 时间轴 三版里挑的 N1。）

   状态只靠两处说：左侧那颗点（未读=红渐变 + 呼吸光圈）与标题字重。
   不再加第三处（比如「未读」文字徽章）—— 一行里塞三个状态标记就吵了。 */
.nc-list { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--solid); }
.nc-it + .nc-it { border-top: 1px solid var(--line); }

.nc-hd {
  width: 100%; border: 0; background: transparent; cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: 9px; padding: 12px 14px;
  font: inherit; color: inherit; transition: background .16s;
}
.nc-hd:hover { background: var(--solid-2); }
/* 手机上把「置顶 / 标签」挤掉一行太挤，标题优先 —— 标签让位给标题 */
.nc-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--txt-4); }
.nc-it.unread .nc-dot {
  background: linear-gradient(135deg, #ff6b6b, #e11d48);
  box-shadow: 0 0 0 3px rgba(225, 29, 72, .16);
}
.nc-it.unread .nc-dot.pulse { animation: ncPulse 1.8s ease-out infinite; }
@keyframes ncPulse {
  0%   { box-shadow: 0 0 0 0 rgba(225, 29, 72, .34); }
  70%  { box-shadow: 0 0 0 7px rgba(225, 29, 72, 0); }
  100% { box-shadow: 0 0 0 0 rgba(225, 29, 72, 0); }
}
.nc-ttl {
  flex: 1; min-width: 0; font-size: 14px; line-height: 1.45; color: var(--txt-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nc-it.unread .nc-ttl { color: var(--txt); font-weight: 700; }
.nc-at { flex: 0 0 auto; font-size: 12px; color: var(--txt-4); font-variant-numeric: tabular-nums; }
.nc-ar { flex: 0 0 auto; width: 14px; height: 14px; color: var(--txt-4); transition: transform .2s; }
.nc-it.open .nc-ar { transform: rotate(90deg); }
.nc-bd {
  display: none; padding: 0 14px 14px 31px;
  font-size: 13.5px; line-height: 1.75; color: var(--txt-2); white-space: pre-wrap;
}
.nc-it.open .nc-bd { display: block; }
.nc-empty {
  padding: 26px 14px; text-align: center; font-size: 13.5px; color: var(--txt-4);
  border: 1px dashed var(--line); border-radius: 14px; background: var(--solid);
}
/* 区块头右侧那颗「N 条未读」：有未读才红，全部读完退回中性灰 */
.h-tag.warn { color: #b42318; background: #fee4e2; border: 1px solid #fda29b; }
.h-tag.mute { color: var(--txt-3); background: var(--solid-2); border: 1px solid transparent; }
/* 深色皮肤：上面那组值是按白底配的，夜里那几块浅底会自己发光 */
html:is([data-skin="abyss"], [data-skin="aurora"], [data-skin="obsidian"]) .h-tag.warn {
  color: #fda29b; background: rgba(225, 29, 72, .16); border-color: rgba(225, 29, 72, .34);
}

/* 窄屏：置顶徽章与日期先让位，保证标题有地方显示 */
@media (max-width: 560px) {
  .nc-hd { padding: 11px 12px; gap: 7px; }
  .nc-at { display: none; }
  .nc-bd { padding-left: 27px; }
}

.me-out { margin-top: 28px; }
.me-out .btn-out {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 12px; cursor: pointer;
  background: var(--solid); border: 1px solid var(--line); color: var(--danger); font-weight: 700; font-size: 14px;
  box-shadow: var(--sh-2);
}
.me-out .btn-out:hover { background: var(--acc-soft); border-color: var(--acc-line); }

@media (max-width: 560px) {
  .gate-card { padding: 30px 22px 24px; }
  .me-hero { padding: 22px 18px; }
  .me-badge { margin-left: 0; }
  /* 权益区（.bn-*）在这里不压列数 —— 它自己带断点：已解锁大卡
     min-width:680px 才并成两列，待解锁窄条是 3 → 2 → 1 逐级收。
     在 max-width 里再压一次会跟那些断点打架。 */
  .lib-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}