/* ==========================================================================
   AI创作社区 · 校园晴空插画风
   依据 ChatGPT 生成的设计图定稿:
   整站 = 白色大圆角壳浮在蓝天白云草地插画背景上;白顶栏蓝字导航;
   左栏一体化个人卡(天空头图+大头像+黄色算力点胶囊+圆角菜单);
   每条帖子独立圆角白卡;右栏模块无色块标题;主蓝 #2E7CE8 阳光黄点缀
   ========================================================================== */
:root {
  --blue: #2E7CE8;
  --blue-deep: #1D63C8;
  --blue-ink: #2B6CD9;
  --blue-soft: #E8F2FE;
  --banner-bg: #DCEDFD;
  --ink: #22303F;
  --ink-body: #45566A;
  --ink-mute: #8A99AB;
  --line: #E7EEF6;
  --line-deep: #D5E2F0;
  --page-bg: #EDF3FA;   /* 比白卡深一档，卡片才浮得起来 */
  --sun: #FFC028;
  --warm: #EF8600;
  --warm-bg: #FFF4DC;
  --warm-line: #FFE0A3;
  --hint-bg: #FFFBEA;
  --hint-line: #F3E4A8;
  --ok: #2E9E44;
  --ok-bg: #EAF8EC;
  --ok-line: #BFE7C6;
  --red: #F53F3F;
  --error-text: #D14343;
  --shadow: 0 2px 12px rgba(46, 108, 200, .10);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font: 14px/1.65 -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color: var(--ink-body);
  /* 校园背景插画: "Anime school background" by Homunculus,
     opengameart.org/content/anime-school-background, CC-BY 3.0 */
  background: #A5D6F7 url("school-bg.jpg") center / cover no-repeat fixed;
  min-height: 100vh;
}
a { color: var(--blue); }

/* ---------------- 大白壳 ---------------- */
.shell {
  max-width: 1280px; margin: 24px auto 34px;
  background: var(--page-bg);
  border-radius: 18px;
  box-shadow: 0 14px 44px rgba(25, 85, 165, .18);
}

/* ---------------- 顶栏(白底) ---------------- */
.topbar { background: #fff; border-bottom: 1px solid var(--line); border-radius: 18px 18px 0 0; }
.topbar-in { display: flex; align-items: center; height: 60px; padding: 0 26px; gap: 20px; }
.logo { font-size: 21px; font-weight: 800; color: var(--blue); text-decoration: none; white-space: nowrap; }
.mainnav { display: flex; gap: 4px; margin: 0 0 0 6px; height: 100%; }
.mainnav a {
  display: flex; align-items: center; padding: 0 16px; font-size: 15px;
  color: var(--ink); text-decoration: none;
  border-top: 3px solid transparent; border-bottom: 3px solid transparent;
}
.mainnav a:hover { color: var(--blue); }
.mainnav a.on { color: var(--blue); font-weight: 700; border-bottom-color: var(--blue); }
.topright { display: flex; align-items: center; gap: 16px; white-space: nowrap; }
.searchbox { flex: 1; display: flex; justify-content: flex-end; margin: 0 6px; min-width: 0; }
.searchbox input {
  width: 100%; max-width: 220px; min-width: 110px;
  border: 1px solid var(--line-deep); border-radius: 999px;
  padding: 6px 15px; font: inherit; font-size: 13px; background: #F6FAFE; color: var(--ink);
  transition: border-color .15s, background .15s;
}
.searchbox input:focus { outline: none; border-color: var(--blue); background: #fff; }
.msearch { display: none; text-decoration: none; }   /* 手机端的搜索入口，桌面有搜索框不重复 */
.bell { position: relative; font-size: 19px; text-decoration: none; line-height: 1; }
.reddot {
  position: absolute; top: -7px; right: -11px;
  background: var(--red); color: #fff; font-size: 11px; line-height: 1;
  padding: 2px 5px; border-radius: 9px; font-weight: 700;
}
.toplink { color: var(--ink-body); text-decoration: none; font-size: 14px; }
.toplink:hover { color: var(--blue); }
.userdrop { position: relative; }
.dropname { display: flex; align-items: center; gap: 8px; cursor: pointer; color: var(--ink); font-size: 14px; }
.dropmenu {
  display: none; position: absolute; right: 0; top: 100%; z-index: 40;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 6px 20px rgba(30, 80, 160, .13); min-width: 128px; padding: 6px;
}
.userdrop:hover .dropmenu, .userdrop.open .dropmenu, .userdrop:focus-within .dropmenu { display: block; }
.dropnick {
  max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: inline-block; vertical-align: bottom;
}
.dropmenu a { display: block; padding: 8px 12px; border-radius: 7px; color: var(--ink-body); text-decoration: none; font-size: 13px; }
.dropmenu a:hover { background: var(--blue-soft); color: var(--blue); }

/* ---------------- 三栏格子 ---------------- */
.layout {
  display: grid; grid-template-columns: 212px minmax(0, 1fr) 264px;
  /* row1=横幅(min-content不吸收左栏溢出高度),row2吸收剩余——否则短内容页(如通知)
     左栏很高会把横幅行撑高,主栏内容被挤到垂直居中,横幅下方留一大块空 */
  grid-template-rows: min-content 1fr;
  gap: 16px; padding: 16px 22px 6px; align-items: start;
}
.sky-banner {
  grid-column: 2 / 4; grid-row: 1;
  display: flex; align-items: center; justify-content: space-between;
  background:
    radial-gradient(ellipse 80px 24px at 14% 68%, rgba(255,255,255,.92) 55%, transparent 60%),
    radial-gradient(ellipse 100px 28px at 86% 30%, rgba(255,255,255,.8) 55%, transparent 60%),
    linear-gradient(90deg, #CFE7FC, #E6F3FF);
  border-radius: 12px; padding: 13px 22px;
}
.welcome { color: var(--blue-ink); font-size: 16px; font-weight: 700; }
.sky-banner .plane { font-size: 19px; opacity: .75; }
.side-l { grid-column: 1; grid-row: 1 / 3; }
.col-main { grid-column: 2; grid-row: 2; min-width: 0; }
.side-r { grid-column: 3; grid-row: 2; }
/* 右栏为空的页面(教程/公告/登录/详情等):两栏铺满,不留死区 */
.layout.no-r { grid-template-columns: 212px minmax(0, 1fr); }
.layout.no-r .sky-banner { grid-column: 2 / 3; }
/* 游客无欢迎横幅:主栏/右栏占满两行,和左栏顶部对齐 */
.layout.no-banner .col-main, .layout.no-banner .side-r { grid-row: 1 / 3; }

/* ---------------- 卡片 ---------------- */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  margin-bottom: 14px; box-shadow: var(--shadow);
  transition: border-color .15s;
}
.card:hover { border-color: var(--line-deep); }
.mtitle {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 13px 15px 6px; font-size: 15px; font-weight: 700; color: var(--ink);
}
.mtitle .more { font-size: 12px; font-weight: 400; color: var(--ink-mute); text-decoration: none; }
.mtitle .more:hover { color: var(--blue); }
.seclabel { font-size: 15px; font-weight: 700; color: var(--ink); margin: 2px 4px 12px; }
.card > h2, .card > h3, .card > form, .card > .post-head, .card > .post-body,
.card > .review-bar, .card > .meta, .card > .hint, .card > .tut-title, .card > .codes,
.card > .imgs { margin: 13px 15px; }
.card > .mtitle + .post-body, .card > .mtitle + .hint { margin-top: 4px; }

.flash, .notice {
  background: var(--hint-bg); border: 1px solid var(--hint-line);
  padding: 9px 14px; font-size: 13px; border-radius: 10px; color: #7d6512;
}
.flash { margin-bottom: 12px; }
.notice { margin: 10px 14px 14px; }
.empty { color: var(--ink-mute); text-align: center; padding: 28px 16px; font-size: 14px; }
.hint { color: var(--ink-mute); font-size: 13px; margin-top: 10px; }
.badge {
  background: var(--warm-bg); border: 1px solid var(--warm-line); color: var(--warm);
  font-size: 12px; border-radius: 8px; padding: 0 7px; margin-left: 6px; font-weight: 400;
}
.badge.rej { background: #FFEBE8; border-color: #F3BBB4; color: var(--error-text); }

/* ---------------- 按钮 ---------------- */
.btn {
  display: inline-block; background: var(--blue); color: #fff;
  border: 0; border-radius: 9px; padding: 8px 24px;
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  text-decoration: none; line-height: 1.5; text-align: center;
  transition: background .12s, transform .1s;
}
.btn:hover { background: var(--blue-deep); }
.btn:active { transform: scale(.96); }
.btn.small { padding: 5px 14px; font-size: 13px; }
.btn.tiny { padding: 6px 16px; font-size: 13px; }
.btn.wide { width: 100%; padding: 10px; font-size: 15px; }
.btn.danger { background: #E5484D; }
.btn.danger:hover { background: #C93A3F; }
.btn.ghost, .btn.warm {
  background: #fff; color: var(--blue); border: 1px solid #A9CDF3;
}
.btn.ghost:hover, .btn.warm:hover { background: var(--blue-soft); border-color: var(--blue); }

/* ---------------- 头像(十款卡通学生插画,按 id%10 轮换) ---------------- */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  color: transparent; font-size: 0; text-decoration: none;
  background: #BFE0F9 center / cover no-repeat;
  border: 2px solid #fff; box-shadow: 0 1px 5px rgba(25, 80, 160, .2);
}
.avatar.tiny { width: 28px; height: 28px; border-width: 1.5px; }
.avatar.xs { width: 26px; height: 26px; border-width: 1.5px; }
.avatar.f { width: 46px; height: 46px; }
.avatar.sq { width: 46px; height: 46px; }
.avatar.big { width: 96px; height: 96px; border-width: 4px; }
.avatar.xl { width: 90px; height: 90px; border-width: 4px; }
.avatar.mini { width: 48px; height: 48px; }
.av-0 { background-image: url("av/av0.png"); }
.av-1 { background-image: url("av/av1.png"); }
.av-2 { background-image: url("av/av2.png"); }
.av-3 { background-image: url("av/av3.png"); }
.av-4 { background-image: url("av/av4.png"); }
.av-5 { background-image: url("av/av5.png"); }
.av-6 { background-image: url("av/av6.png"); }
.av-7 { background-image: url("av/av7.png"); }
.av-8 { background-image: url("av/av8.png"); }
.av-9 { background-image: url("av/av9.png"); }
.avatar.starred { position: relative; box-shadow: 0 0 0 2px var(--sun), 0 1px 5px rgba(25,80,160,.2); }
.avatar.starred::after { content: '👑'; position: absolute; top: -13px; right: -7px; font-size: 13px; }

/* ---------------- 身份标 / 成就尾坠 ---------------- */
.offtag {
  display: inline-block; background: var(--blue); color: #fff;
  font-size: 11px; line-height: 1.7; border-radius: 6px; padding: 0 6px;
  margin-left: 6px; font-weight: 600; vertical-align: 1px; white-space: nowrap;
}
.offtag.sm { font-size: 10.5px; margin-left: 4px; }
.utitle {
  display: inline-block; background: #F6EFFF; border: 1px solid #DFCCF7; color: #7C4DC4;
  font-size: 11.5px; line-height: 1.7; border-radius: 8px; padding: 0 7px;
  margin-left: 6px; white-space: nowrap; vertical-align: 1px; font-weight: 600;
}

/* ---------------- 左栏一体化个人卡 ---------------- */
.sidecard { overflow: hidden; text-align: center; }
.skyhead { height: 72px; position: relative; }
/* 装扮渐变(th-*)打底,云朵统一叠在上层 */
.skyhead::after, .pcover::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70px 22px at 22% 62%, rgba(255,255,255,.85) 55%, transparent 60%),
    radial-gradient(ellipse 90px 26px at 80% 34%, rgba(255,255,255,.7) 55%, transparent 60%);
}
/* 头像上叠半张进天空头图。必须是块级+position:relative：
   inline-flex 挂负 margin 在非 Chrome 内核里可能不生效(头像整个掉到头图下面)，
   relative 同时保证头像画在带定位的 skyhead 云朵之上 */
.sidecard .avatar.big { display: flex; position: relative; margin: -48px auto 0; }
.sname-big { font-size: 17px; font-weight: 700; color: var(--ink); margin-top: 7px; }
.sstats { font-size: 12.5px; color: var(--ink-mute); margin: 3px 0 11px; }
.points-pill {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin: 0 14px 10px;
  background: linear-gradient(180deg, #FFF3C7, #FFE79B);
  border: 1px solid var(--warm-line); border-radius: 12px;
  padding: 9px 12px; text-decoration: none;
  color: #7A5800; font-weight: 700; font-size: 14px;
}
.points-pill b { font-size: 16px; }
.points-pill .chev { color: #C89B2A; font-weight: 400; }
.points-pill:hover { filter: brightness(1.04); }
.sbio {
  font-size: 12px; color: var(--ink-mute); margin: 1px 16px 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.checkin-btn {
  display: block; width: calc(100% - 28px); margin: 0 14px 10px;
  background: linear-gradient(180deg, #EAF6FF, #D9EEFF);
  border: 1px solid #B5DBF7; color: var(--blue-ink); border-radius: 12px;
  padding: 8px 10px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.checkin-btn:hover { filter: brightness(1.03); }
.checkin-done {
  margin: 0 14px 10px; background: var(--ok-bg); border: 1px solid var(--ok-line);
  color: var(--ok); border-radius: 12px; padding: 8px 10px; font-size: 12.5px; font-weight: 600;
}
.checkin-btn.inwallet, .checkin-done.inwallet { display: inline-block; width: auto; margin: 12px auto 0; padding: 8px 22px; }
.navmenu { padding: 8px 10px 10px; text-align: left; }
.navmenu a {
  position: relative; display: flex; align-items: center; gap: 11px;
  padding: 10px 13px; border-radius: 10px;
  color: var(--ink-body); text-decoration: none; font-size: 14.5px;
}
.navmenu a i { font-style: normal; width: 20px; text-align: center; font-size: 15px; }
.navmenu a:hover { background: #F1F7FE; color: var(--blue); }
.navmenu a.on { background: var(--blue-soft); color: var(--blue); font-weight: 700; }
.navmenu a.on::before {
  content: ''; position: absolute; left: 0; top: 9px; bottom: 9px;
  width: 3px; border-radius: 2px; background: var(--blue);
}
.sidetag { text-align: center; color: #7FA6CB; font-size: 12px; margin-top: 8px; }

/* ---------------- 发帖框 ---------------- */
.card.compose > form { margin: 0; padding: 15px 15px 13px; }
.compose textarea {
  width: 100%; border: 1px solid var(--line-deep); border-radius: 11px;
  padding: 12px 14px; font: inherit; resize: vertical; background: #FBFDFF; color: var(--ink);
}
.compose textarea:focus { outline: none; border-color: var(--blue); background: #fff; }
/* flex-wrap:wrap 全宽度生效：管理员发帖框有两个下拉(身份+连载)，桌面窄宽(1100-1280)不换行会挤成一坨 */
.compose-bar { display: flex; align-items: center; justify-content: space-between; margin-top: 11px; gap: 8px; flex-wrap: wrap; }
.asel {
  margin-right: auto;   /* 有身份下拉时把配图/发布挤到右侧；普通用户无此元素，维持原布局 */
  border: 1px solid var(--line-deep); border-radius: 9px; padding: 7px 8px;
  font: inherit; font-size: 13px; color: var(--ink-body); background: #FBFDFF; max-width: 46%;
}
.asel:focus { outline: none; border-color: var(--blue); }
.imgpick { cursor: pointer; }
.imgpick input[type="file"] { display: none; }
.imgcount { font-size: 12px; margin-left: 4px; }
.compose-hint { display: block; font-size: 12px; color: var(--ink-mute); margin-top: 9px; }

/* 游客首屏 hero：一张有气势的卡替代横幅+小卡的重复 */
.guestcard {
  padding: 30px 28px;
  background:
    radial-gradient(ellipse 90px 26px at 82% 22%, rgba(255,255,255,.9) 55%, transparent 60%),
    radial-gradient(ellipse 70px 20px at 12% 78%, rgba(255,255,255,.7) 55%, transparent 60%),
    linear-gradient(180deg, #E8F4FF, #fff 65%);
}
.guestcard b { font-size: 24px; font-weight: 800; color: var(--blue-deep); }
.guestcard p { margin: 10px 0 18px; color: var(--ink-body); font-size: 15px; max-width: 560px; }
.guestcard .btn { padding: 11px 34px; font-size: 15px; border-radius: 12px; }

/* ---------------- 信息流:每帖一张卡 ---------------- */
.feedcard { background: transparent; border: 0; box-shadow: none; margin: 0; }
.feedcard:hover { border: 0; }
.feedcard > .mtitle { padding: 2px 4px 12px; }
.feedcard > .empty, .feedcard > .article {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow); margin-bottom: 14px;
}
.feeditem {
  display: flex; gap: 12px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow); padding: 16px; margin-bottom: 14px;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.feeditem:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(46, 108, 200, .14);
  border-color: var(--line-deep);
}
.fbody { flex: 1; min-width: 0; }
.fhead { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; font-size: 15px; line-height: 1.6; padding-top: 2px; }
.fhead .ftime { margin-left: auto; padding-left: 8px; }
.fname { font-weight: 700; color: var(--ink); text-decoration: none; }
.fname:hover { color: var(--blue); }
.fact { color: var(--ink-mute); font-size: 13px; }
.fcontent { font-size: 15px; line-height: 1.8; color: #2F3D4F; overflow-wrap: break-word; }
.fcontent.block { margin: 7px 0 2px; }
/* 长文折叠：JS 加 clamp,超高才显示"展开全文" */
.fcontent.clamp {
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 6; overflow: hidden;
}
.fexpand { display: inline-block; margin-top: 4px; font-size: 13px; color: var(--blue); cursor: pointer; }
.fexpand:hover { text-decoration: underline; }
.topiclink { color: var(--blue-ink); font-weight: 600; text-decoration: none; }
.topiclink:hover { text-decoration: underline; }
.mentionlink { color: var(--warm); font-weight: 600; text-decoration: none; }
.mentionlink:hover { text-decoration: underline; }
.mentionhint { font-size: 12px; color: var(--ink-mute); margin: 2px 2px 0; }
/* @提及自动补全下拉：body 挂载、绝对定位到输入框下方 */
.mentiondd {
  position: absolute; z-index: 3000; max-height: 246px; overflow-y: auto;
  background: #fff; border: 1px solid var(--line-deep); border-radius: 11px;
  box-shadow: 0 8px 24px rgba(31, 74, 130, .16); padding: 4px;
}
.mentiondd[hidden] { display: none; }
.mi { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 8px; cursor: pointer; }
.mi.on, .mi:hover { background: var(--blue-soft); }
.mi-av { width: 26px; height: 26px; border-radius: 50%; background-size: cover; background-position: center; flex: 0 0 auto; background-color: var(--line); }
.mi-nm { font-size: 14px; color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; max-width: 480px; }
.imgs a { display: block; }
.imgs img {
  width: 100%; aspect-ratio: 1; object-fit: cover; display: block;
  border-radius: 10px; border: 1px solid var(--line);
}
.imgs.n1 { grid-template-columns: minmax(0, 340px); }
.imgs.n1 img { aspect-ratio: auto; max-height: 420px; }
.imgs.n2, .imgs.n4 { grid-template-columns: repeat(2, 1fr); max-width: 330px; }
.fmeta { display: flex; align-items: center; gap: 8px; margin-top: 9px; flex-wrap: wrap; }
.ftime { color: var(--ink-mute); font-size: 12.5px; font-weight: 400; }
.factions { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.inline { display: inline; }
.tlink {
  background: #F5F9FD; border: 0; font: inherit; font-size: 13.5px; cursor: pointer;
  color: var(--ink-mute); text-decoration: none;
  padding: 5px 14px; border-radius: 999px;
  transition: background .12s, color .12s;
}
.tlink:hover { color: var(--blue); background: var(--blue-soft); }
.tlink.done { color: var(--blue); font-weight: 700; background: var(--blue-soft); }
.tlink.dim { color: #AEBACA; }
span.tlink.dim { cursor: default; }
span.tlink.dim:hover { background: #F5F9FD; color: #AEBACA; }
.sep { color: #D8E1EB; }
@keyframes popbtn { 30% { transform: scale(1.25); } }
.tlink.pop { animation: popbtn .32s ease; }
.likedrow { margin-top: 7px; font-size: 12.5px; color: var(--ink-mute); }
.crows { background: #F3F8FC; border-radius: 11px; padding: 10px 13px; margin-top: 10px; }
.crow { font-size: 14px; padding: 3px 0; overflow-wrap: break-word; }
.cname { color: var(--blue-ink); font-weight: 600; text-decoration: none; }
.cname:hover { text-decoration: underline; }
.ctime { color: #A9B5C4; font-size: 12px; margin-left: 7px; }
.creport { color: #C4CEDA; font-size: 12px; margin-left: 6px; cursor: pointer; }
.creport:hover { color: var(--error-text); }
.cmore { display: inline-block; margin-top: 5px; font-size: 12.5px; color: var(--blue); text-decoration: none; }
.cmore:hover { text-decoration: underline; }
.cform { display: flex; gap: 8px; margin-top: 10px; }
.cform input {
  flex: 1; min-width: 0; border: 1px solid var(--line-deep); border-radius: 9px;
  padding: 8px 13px; font: inherit; background: #FBFDFF; color: var(--ink);
}
.cform input:focus { outline: none; border-color: var(--blue); background: #fff; }
.card > .cform { margin: 13px 15px; }
.card > .crows { margin: 0 15px 14px; }

.pager { display: flex; justify-content: space-between; margin: 4px 2px 14px; font-size: 13px; }
.pager a { text-decoration: none; }
.pager a:hover { text-decoration: underline; }

/* ---------------- 右栏模块 ---------------- */
.module { padding-bottom: 8px; }
.annlist, .tasklist { list-style: none; padding: 2px 15px 6px; font-size: 13px; line-height: 2.05; }
.annlist a { color: var(--ink-body); text-decoration: none; }
.annlist a:hover { color: var(--blue); }
.newtag { color: var(--red); font-size: 11px; margin-left: 5px; font-weight: 700; }
.dimline { color: var(--ink-mute); text-align: center; padding: 8px 0; }
.tasklist li { display: flex; align-items: center; gap: 6px; }
.tasklist a {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--ink-body); text-decoration: none;
}
.tasklist a:hover { color: var(--blue); }
.treward { color: var(--warm); font-weight: 700; font-size: 12.5px; white-space: nowrap; }
.treward.big { font-size: 16px; }
.peoplegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 4px; padding: 8px 12px 12px; }
.person { display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; min-width: 0; }
.pname {
  font-size: 12px; color: var(--ink-body); max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.person:hover .pname { color: var(--blue); }
.mfoot { padding: 0 15px 10px; font-size: 12px; color: var(--ink-mute); }
.starlist { list-style: none; padding: 4px 15px 10px; }
.starlist li { display: flex; align-items: center; gap: 9px; padding: 5px 0; }
.rank { width: 20px; text-align: center; font-size: 13px; font-weight: 400; color: var(--ink-mute); flex: none; }
.starlist li:nth-child(1) .rank { font-size: 0; }
.starlist li:nth-child(1) .rank::before { content: '👑'; font-size: 15px; }
.starlist li:nth-child(2) .rank { font-size: 0; }
.starlist li:nth-child(2) .rank::before { content: '🥈'; font-size: 14px; }
.starlist li:nth-child(3) .rank { font-size: 0; }
.starlist li:nth-child(3) .rank::before { content: '🥉'; font-size: 14px; }
.sname {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--ink-body); text-decoration: none;
}
.sname:hover { color: var(--blue); }
.scount { font-size: 12px; color: var(--ink-mute); white-space: nowrap; }
.statgrid { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; padding: 8px 8px 14px; }
.statgrid b { display: block; font-size: 21px; color: var(--ink); line-height: 1.3; }
.statgrid span { font-size: 12px; color: var(--ink-mute); }
.statlines { padding: 4px 15px 12px; font-size: 13px; line-height: 2; color: var(--ink-body); }
.statlines b { color: var(--ink); }
.achfeed { list-style: none; padding: 2px 15px 10px; font-size: 13px; line-height: 2.05; }
.achfeed a { color: var(--blue-ink); text-decoration: none; font-weight: 600; }
.achfeed a:hover { text-decoration: underline; }
.achfeed b { color: var(--warm); font-weight: 700; }

/* ---------------- 个人主页(装扮封面 + 信息行) ---------------- */
.profilecard { padding: 0; overflow: hidden; }
.pcover { height: 96px; position: relative; }
.prow { display: flex; gap: 18px; padding: 0 20px 18px; align-items: flex-start; }
/* 头像半张叠进封面：必须块级 flex + relative，inline-flex 挂负 margin 会整个掉到封面下面
   (和左栏 .sidecard .avatar.big 同款修法，之前漏了主页这张) */
.prow .avatar.xl { display: flex; position: relative; margin-top: -34px; background-color: #fff; }
.pinfo { flex: 1; min-width: 0; padding-top: 12px; }
.pacts { display: flex; gap: 8px; padding-top: 14px; flex-wrap: wrap; }
.pname-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pbig { font-size: 21px; font-weight: 700; color: var(--ink); }
.ptag { color: var(--ink-mute); font-size: 13px; }
.padmin { color: var(--warm); font-size: 13px; }
.pstats { margin-top: 7px; font-size: 13.5px; }
.pstats b { color: var(--blue); font-size: 15px; }
.pmeta { margin-top: 3px; font-size: 12.5px; color: var(--ink-mute); }
.pbio { margin-top: 5px; font-size: 13px; color: var(--ink-body); }
.pbio.dim a { color: var(--ink-mute); text-decoration: none; font-size: 12.5px; }
.pbio.dim a:hover { color: var(--blue); }

/* ---------------- 成就墙 ---------------- */
.achwall {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px; padding: 4px 15px 15px;   /* 140px 保证 375px 手机也能排两列 */
}
.achv {
  border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px 11px;
  background: #FDFEFF;
}
.achv.locked { opacity: .52; background: #F5F8FB; filter: grayscale(.6); }
.achv.worn { border-color: var(--sun); box-shadow: 0 0 0 1px var(--sun); background: #FFFDF4; }
.achv .aicon { font-size: 21px; line-height: 1; }
.achv .aname { font-weight: 700; color: var(--ink); font-size: 13.5px; margin-top: 4px; }
.achv .adesc { font-size: 12px; color: var(--ink-mute); line-height: 1.5; margin-top: 2px; }
.achv .aget { font-size: 11.5px; color: var(--ok); margin-top: 4px; }
.achv form { margin-top: 7px; }
.wearbtn {
  background: #fff; border: 1px solid #A9CDF3; color: var(--blue);
  border-radius: 7px; font: inherit; font-size: 12px; padding: 3px 11px; cursor: pointer;
}
.wearbtn:hover { background: var(--blue-soft); }
.achv.worn .wearbtn { border-color: var(--warm-line); color: var(--warm); }

/* ---------------- 登录注册 ---------------- */
.authcard { max-width: 420px; margin: 24px auto; padding: 8px 12px 16px; }
.authcard label { display: block; margin: 12px 0; }
label { font-size: 14px; color: var(--ink-body); }
label input, label textarea {
  width: 100%; border: 1px solid var(--line-deep); border-radius: 9px;
  padding: 9px 12px; font: inherit; margin-top: 4px; background: #FBFDFF; color: var(--ink);
}
label input:focus, label textarea:focus { outline: none; border-color: var(--blue); background: #fff; }
label textarea { resize: vertical; }
label.check { display: flex; align-items: center; gap: 8px; }
label.check input { width: auto; margin: 0; }

/* ---------------- 任务广场 / 算力点 ---------------- */
.taskcard { padding-bottom: 2px; }
.task-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 15px 0; }
.task-title { font-size: 15.5px; font-weight: 700; color: var(--ink); }
.task-done, .task-wait, .task-rej { margin: 0 15px 14px; font-size: 13px; border-radius: 9px; padding: 8px 12px; }
.task-done { background: var(--ok-bg); border: 1px solid var(--ok-line); color: var(--ok); }
.task-wait { background: var(--hint-bg); border: 1px solid var(--hint-line); color: #7d6512; }
.task-rej { background: #FFEBE8; border: 1px solid #F3BBB4; color: var(--error-text); }
.card > .task-form { display: flex; gap: 8px; margin: 0 15px 15px; }
.task-form input[type="text"] {
  flex: 1; min-width: 0; border: 1px solid var(--line-deep); border-radius: 9px;
  padding: 8px 12px; font: inherit; background: #FBFDFF;
}
.task-form input:focus { outline: none; border-color: var(--blue); background: #fff; }

.walletcard { text-align: center; padding: 24px 14px 20px; }
.wb-num { display: block; font-size: 42px; font-weight: 800; color: var(--warm); line-height: 1.2; }
.wb-label { display: block; font-size: 13px; color: var(--ink-mute); margin-top: 3px; }
.wallet-earn { margin-top: 15px; font-size: 13px; color: var(--ink-body); }
td.plus { color: var(--ok); font-weight: 700; }
td.minus { color: var(--error-text); font-weight: 700; }
.rulebox { background: var(--hint-bg); border-color: var(--hint-line); }
.rulebox .statlines { color: #7d6512; }
.rulebox .statlines b { color: #6b5300; }

/* ---------------- 个人设置 ---------------- */
.card > .setform { margin: 13px 15px 15px; }
.setcur { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.setcur-hint { font-size: 12.5px; color: var(--ink-mute); }
.setlabel { font-size: 13.5px; color: var(--ink); font-weight: 600; margin: 14px 0 8px; }
.avgrid { display: flex; flex-wrap: wrap; gap: 12px; }
.avopt input { display: none; }
.avopt .avatar { width: 54px; height: 54px; cursor: pointer; transition: box-shadow .12s; }
.avopt .avatar:hover { box-shadow: 0 0 0 2px #A9CDF3; }
.avopt input:checked + .avatar { box-shadow: 0 0 0 3px var(--blue); }
.setbtn { margin-top: 14px; }

/* ---------------- 人才漏斗 ---------------- */
.funnel { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 15px 10px; }
.fchip {
  font-size: 12px; border-radius: 10px; padding: 2px 10px; white-space: nowrap;
  background: #F0F4F8; border: 1px solid #DAE4EE; color: var(--ink-mute);
}
.fchip.lv2 { background: var(--blue-soft); border-color: #BBD8F5; color: var(--blue); }
.fchip.lv3 { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); }
.fchip.lv4 { background: var(--warm-bg); border-color: var(--warm-line); color: var(--warm); }
.fchip.lv5 { background: #FFF3D1; border-color: var(--sun); color: #8a6a00; font-weight: 700; }

/* ---------------- 管理后台 ---------------- */
.tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 13px 13px; }
.tabs a {
  padding: 7px 14px; border-radius: 9px; text-decoration: none;
  color: var(--ink-body); font-size: 13.5px;
}
.tabs a:hover { background: #F1F7FE; color: var(--blue); }
.tabs a.on { background: var(--blue-soft); color: var(--blue); font-weight: 700; }
.tabs b { color: var(--red); }
.post-head { display: flex; align-items: center; gap: 10px; }
.nickname { font-weight: 700; color: var(--ink); }
.meta { font-size: 12.5px; color: var(--ink-mute); }
.post-body { color: var(--ink-body); overflow-wrap: break-word; }
.review-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.review-bar input[type="text"] {
  flex: 1; min-width: 140px; border: 1px solid var(--line-deep); border-radius: 9px;
  padding: 7px 11px; font: inherit; background: #FBFDFF;
}
.review-bar input:focus { outline: none; border-color: var(--blue); }
.tut-title { font-size: 15px; font-weight: 700; color: var(--ink); }
.tut-title a { color: var(--ink); text-decoration: none; }
.tut-title a:hover { color: var(--blue); }
.codes { display: flex; flex-wrap: wrap; gap: 8px; }
.codes code {
  background: #F3F8FC; border: 1px solid var(--line); border-radius: 7px;
  padding: 3px 11px; color: var(--blue-ink); font-size: 13px;
}
input.mini {
  width: 68px; border: 1px solid var(--line-deep); border-radius: 7px;
  padding: 4px 7px; font: inherit; background: #FBFDFF;
}
.tablewrap { overflow-x: auto; padding: 6px 12px 14px; }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th { text-align: left; color: var(--ink-mute); font-weight: 600; padding: 8px 8px; border-bottom: 1px solid var(--line-deep); white-space: nowrap; }
td { padding: 8px; border-bottom: 1px solid var(--line); }
td input[type="text"] { width: 100%; min-width: 120px; border: 1px solid var(--line-deep); border-radius: 7px; padding: 4px 7px; font: inherit; background: #FBFDFF; }

/* ---------------- 教程/公告/文章 ---------------- */
.feeditem.tutrow, .feeditem.annitem { display: block; text-decoration: none; }
.feeditem.tutrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tutrow:hover .tut-title { color: var(--blue); }
.anntitle { font-size: 15.5px; font-weight: 700; color: var(--ink); }
.article { padding: 20px 22px; }
.article h1 { font-size: 21px; color: var(--ink); margin-bottom: 4px; }
.md-body { margin-top: 14px; color: var(--ink-body); }
.md-body h2 { font-size: 17px; color: var(--ink); margin: 18px 0 8px; }
.md-body h3 { font-size: 15px; color: var(--ink); margin: 14px 0 6px; }
.md-body p, .md-body ul, .md-body ol { margin: 8px 0; }
.md-body li { margin-left: 22px; }
.md-body code { background: #F3F8FC; border-radius: 4px; padding: 1px 6px; font-size: 13px; color: var(--blue-ink); }
.md-body pre { background: #F3F8FC; border: 1px solid var(--line); border-radius: 10px; padding: 12px; overflow-x: auto; margin: 10px 0; }
.md-body { overflow-x: auto; }
.md-body table { margin: 10px 0; }
.md-body th { white-space: normal; }
.md-body th, .md-body td { border: 1px solid var(--line-deep); padding: 6px 10px; }

/* ---------------- 装扮主题渐变(个人卡头图/主页封面/设置页色卡共用) ---------------- */
.th-sky    { background: linear-gradient(180deg, #8FCDF5, #C9E6FA); }
.th-sunset { background: linear-gradient(180deg, #FFB98A, #FFE3C7); }
.th-mint   { background: linear-gradient(180deg, #8FE0B5, #DCF7E9); }
.th-sakura { background: linear-gradient(180deg, #FFB3CE, #FFE4EF); }
.th-lemon  { background: linear-gradient(180deg, #FFDF7E, #FFF6D2); }
.th-ocean  { background: linear-gradient(180deg, #6FC7D6, #CEF0F4); }
.th-grape  { background: linear-gradient(180deg, #BBA0EC, #EAE2FA); }
.th-night  {
  background:
    radial-gradient(circle 1.5px at 18% 32%, #fff 100%, transparent),
    radial-gradient(circle 1px at 42% 18%, #FFF6C9 100%, transparent),
    radial-gradient(circle 1.5px at 68% 42%, #fff 100%, transparent),
    radial-gradient(circle 1px at 86% 24%, #FFF6C9 100%, transparent),
    radial-gradient(circle 1px at 30% 60%, #fff 100%, transparent),
    linear-gradient(180deg, #5D6FA8, #A9B7DC);
}
.thgrid { display: flex; flex-wrap: wrap; gap: 12px; }
.thopt { width: 86px; cursor: pointer; text-align: center; }
.thopt input { display: none; }
.thsw { display: block; height: 46px; border-radius: 10px; border: 1px solid var(--line); transition: box-shadow .12s; }
.thopt:hover .thsw { box-shadow: 0 0 0 2px #A9CDF3; }
.thopt input:checked + .thsw { box-shadow: 0 0 0 3px var(--blue); }
.thname { display: block; font-size: 12px; color: var(--ink-body); margin-top: 4px; }

/* ---------------- 等级徽章(B站味,官方号不参与) ---------------- */
.lv {
  display: inline-block; font-size: 10.5px; font-weight: 800; line-height: 1.6;
  border-radius: 6px; padding: 0 5px; margin-left: 6px; color: #fff;
  vertical-align: 1px; white-space: nowrap;
}
.lv1 { background: #A5B2C2; } .lv2 { background: #5FBF7C; } .lv3 { background: #3FB6D4; }
.lv4 { background: #2E7CE8; } .lv5 { background: #F09300; } .lv6 { background: #F25B5B; }
.lv7 { background: #9159E8; }

/* ---------------- 今日话题卡 ---------------- */
.card.dailycard {
  display: flex; align-items: center; gap: 10px; padding: 13px 16px;
  text-decoration: none;
  background: linear-gradient(90deg, #FFF7DE, #FFFDF4);
  border-color: var(--warm-line);
}
.card.dailycard:hover { border-color: var(--sun); }
.dailytag { background: var(--sun); color: #6b4d00; font-weight: 800; border-radius: 8px; padding: 2px 9px; font-size: 12.5px; white-space: nowrap; }
.dailyq { flex: 1; min-width: 0; color: var(--ink); font-weight: 600; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dailymeta { color: var(--warm); font-size: 12.5px; white-space: nowrap; }

/* ---------------- 信息流 tab(全部/我关注的) ---------------- */
.feedtabs { display: flex; gap: 6px; margin: 0 2px 12px; }
.feedtabs a {
  padding: 6px 18px; border-radius: 999px; background: #fff; border: 1px solid var(--line);
  color: var(--ink-body); text-decoration: none; font-size: 13.5px; box-shadow: var(--shadow);
  transition: background .12s, color .12s;
}
.feedtabs a:hover { color: var(--blue); }
.feedtabs a.on { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 700; }

/* ---------------- 热帖榜 ---------------- */
.hotlist { list-style: none; padding: 4px 15px 12px; }
.hotlist li { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px; }
.hrank {
  width: 18px; height: 18px; border-radius: 5px; background: #EEF2F7; color: var(--ink-mute);
  font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex: none;
}
.hrank.r1 { background: #FF6B57; color: #fff; }
.hrank.r2 { background: #FF9F43; color: #fff; }
.hrank.r3 { background: #FFC94D; color: #fff; }
.htext { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-body); text-decoration: none; }
.htext:hover { color: var(--blue); }
.hheat { font-size: 12px; color: var(--warm); white-space: nowrap; }

/* ---------------- 话题 ---------------- */
.topicchips { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 15px 14px; }
.tchip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--blue-soft); border: 1px solid #C4DDF8; color: var(--blue-ink);
  border-radius: 999px; padding: 3px 12px; font-size: 12.5px; text-decoration: none; font-weight: 600;
  transition: background .12s;
}
.tchip b { font-weight: 700; color: #7FA6CB; font-size: 11.5px; }
.tchip:hover { background: #D8EAFD; }
.tchip.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.tchip.on b { color: #CFE3FA; }
.topichead { padding: 18px 20px; }
.topicname { font-size: 21px; font-weight: 800; color: var(--blue-ink); }
.topicsub { margin-top: 4px; font-size: 13px; color: var(--ink-mute); }

/* ---------------- 通知中心 ---------------- */
.notilist { padding: 2px 8px 10px; }
.notirow { display: flex; gap: 11px; align-items: flex-start; padding: 11px 10px; border-radius: 10px; text-decoration: none; }
.notirow:hover { background: #F4F9FE; }
.notirow.unread { background: #F3F9FF; box-shadow: inset 3px 0 0 var(--blue); }
.nicon { font-size: 19px; line-height: 1.4; }
.nbody { flex: 1; min-width: 0; color: var(--ink-body); font-size: 13.5px; line-height: 1.6; }
.nbody b { color: var(--ink); }
.nsnip { color: var(--ink-mute); }
.ntime { display: block; color: #A9B5C4; font-size: 12px; margin-top: 1px; }
.navdot { margin-left: auto; background: var(--red); color: #fff; font-size: 11px; border-radius: 9px; padding: 1px 6px; font-weight: 700; }
.tabdot { display: inline-block; width: 7px; height: 7px; background: var(--red); border-radius: 50%; margin-left: 3px; vertical-align: 6px; }

/* ---------------- 神秘成就 / 搜索页 ---------------- */
.achv.mystery { border-style: dashed; background: #F8FAFD; opacity: .8; filter: none; }
.searchhead { padding: 14px 15px; }
.bigsearch { display: flex; gap: 8px; }
.bigsearch input { flex: 1; min-width: 0; border: 1px solid var(--line-deep); border-radius: 999px; padding: 9px 18px; font: inherit; background: #FBFDFF; color: var(--ink); }
.bigsearch input:focus { outline: none; border-color: var(--blue); background: #fff; }
.peoplegrid.wide { grid-template-columns: repeat(6, 1fr); }

/* ---------------- 评论回复 / 评论点赞 ---------------- */
.creplyto { color: var(--ink-mute); font-size: 13px; }
.clike {
  background: none; border: 0; font: inherit; font-size: 12px; cursor: pointer;
  color: #A9B5C4; margin-left: 7px; padding: 0 2px; vertical-align: baseline;
}
.clike:hover { color: var(--blue); }
.clike.done { color: var(--blue); font-weight: 700; }
span.clike.dim { cursor: default; }
span.clike.dim:hover { color: #A9B5C4; }
.creply { color: #8FA3BA; font-size: 12px; margin-left: 6px; cursor: pointer; }
.creply:hover { color: var(--blue); }
.rcancel {
  flex: none; width: 34px; border: 1px solid var(--line-deep); border-radius: 9px;
  background: #F5F9FD; color: var(--ink-mute); font: inherit; font-size: 15px; cursor: pointer;
}
.rcancel:hover { color: var(--error-text); border-color: #F3BBB4; }

/* ---------------- 投票帖(微博/B站味) ---------------- */
.pollbox { margin: 10px 0 2px; max-width: 480px; }
.pollform { margin-bottom: 7px; }
.pollopt {
  display: block; width: 100%; text-align: center; cursor: pointer;
  background: #F7FBFF; border: 1px solid #BBD8F5; color: var(--blue-ink);
  border-radius: 10px; padding: 8px 14px; font: inherit; font-size: 14px; font-weight: 600;
  transition: background .12s, border-color .12s;
}
.pollopt:hover { background: var(--blue-soft); border-color: var(--blue); }
.pollres {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px; margin-bottom: 7px;
  background: #FBFDFF;
}
.pollres .pollbar {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--blue-soft); border-radius: 0;
}
.pollres.mine { border-color: var(--blue); }
.pollres.mine .pollbar { background: #D3E7FC; }
.polltext { position: relative; flex: 1; min-width: 0; font-size: 14px; color: var(--ink); overflow-wrap: break-word; }
.pollres.mine .polltext { font-weight: 700; color: var(--blue-deep); }
.pollpct { position: relative; font-size: 12.5px; color: var(--ink-mute); white-space: nowrap; }
.pollmeta { font-size: 12.5px; color: var(--ink-mute); margin-top: 2px; }
.pollarea textarea {
  width: 100%; border: 1px dashed #BBD8F5; border-radius: 11px; margin-top: 9px;
  padding: 10px 13px; font: inherit; font-size: 13px; resize: vertical;
  background: #F9FCFF; color: var(--ink);
}
.pollarea textarea:focus { outline: none; border-color: var(--blue); background: #fff; }
#polltoggle.on { background: var(--blue-soft); border-color: var(--blue); }

/* ---------------- 阅读数 / 表情栏 ---------------- */
.fviews { margin-left: auto; color: #AEBACA; font-size: 12.5px; white-space: nowrap; }
.emojibar { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 7px; }
.emo {
  background: none; border: 0; font-size: 17px; line-height: 1;
  padding: 4px 5px; cursor: pointer; border-radius: 7px; transition: background .1s, transform .1s;
}
.emo:hover { background: var(--blue-soft); transform: scale(1.18); }

/* ---------------- 新手之路(主线任务链) ---------------- */
.journeycard { padding: 13px 16px 14px; }
.jhead { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--ink); }
.jprog { color: var(--blue); }
.jreward { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--warm); white-space: nowrap; }
.jbar {
  height: 8px; background: #EAF1F9; border-radius: 999px; margin: 9px 0 11px; overflow: hidden;
}
.jbar i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #6FB1F5, var(--blue));
  transition: width .3s;
}
.jsteps { display: flex; flex-wrap: wrap; gap: 7px; }
.jstep {
  font-size: 12.5px; border-radius: 999px; padding: 4px 12px; text-decoration: none;
  background: #F5F9FD; border: 1px solid var(--line-deep); color: var(--ink-body);
  transition: background .12s, color .12s;
}
.jstep:hover { border-color: var(--blue); color: var(--blue); }
.jstep.done {
  background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok);
  text-decoration: line-through; opacity: .78;
}

/* ---------------- 连载 / 追更 ---------------- */
.serialtag {
  /* inline-block(不是 inline-flex)：ellipsis 只对块容器的行内文本生效，
     flex 容器里的匿名文本 item 不出省略号、长标题会被硬切半个字 */
  display: inline-block; vertical-align: middle; margin: 5px 0 2px;
  font-size: 12.5px; font-weight: 600; color: #8A6D1B; text-decoration: none;
  background: #FFF7E0; border: 1px solid #F2E3B3; border-radius: 999px; padding: 3px 11px;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.serialtag:hover { background: #FFF1C9; border-color: #E8D291; }
.serialarea input {
  width: 100%; border: 1px dashed #F2E3B3; border-radius: 11px; margin-top: 9px;
  padding: 10px 13px; font: inherit; font-size: 13px; background: #FFFDF4; color: var(--ink);
}
.serialarea input:focus { outline: none; border-color: #E0B94F; background: #fff; }
.serialhint { font-size: 12px; color: var(--ink-mute); margin-top: 5px; padding-left: 3px; }
.serieshead { padding: 18px 20px; }
.serieshead .stag {
  display: inline-block; font-size: 12px; font-weight: 700; color: #8A6D1B;
  background: #FFF7E0; border: 1px solid #F2E3B3; border-radius: 999px; padding: 2px 11px;
}
.serieshead .stitle { margin: 8px 0 6px; font-size: 21px; color: var(--ink); }
.serieshead .smeta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.serieshead .sauthor { font-weight: 600; color: var(--blue-deep); text-decoration: none; }
.serieshead .sauthor:hover { text-decoration: underline; }
.sdim, .sldim { font-size: 12.5px; color: var(--ink-mute); }
.sfollowform { margin-top: 11px; }
.serieshead .hint { margin-top: 11px; font-size: 13px; color: var(--ink-mute); }
.seriallist { list-style: none; margin: 0; padding: 0; }
.seriallist li { padding: 5px 0; border-bottom: 1px dashed var(--line); }
.seriallist li:last-child { border-bottom: 0; }
.seriallist .sltitle {
  display: block; font-size: 13.5px; font-weight: 600; color: var(--ink-body);
  text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.seriallist .sltitle:hover { color: var(--blue); }
.seriallist .sldim { display: block; margin-top: 1px; }
.serialrows { display: flex; flex-direction: column; }
.serialrow {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 9px 4px; text-decoration: none; color: var(--ink);
  border-bottom: 1px dashed var(--line); border-radius: 8px;
}
.serialrow:last-child { border-bottom: 0; }
.serialrow:hover { background: var(--blue-soft); }
.serialrow b { font-size: 14.5px; }

/* ---------------- 转发/引用 ---------------- */
.reposttag { font-size: 12.5px; font-weight: 600; color: var(--ink-mute); margin: 2px 0 5px; }
.quotecard {
  display: block; margin: 8px 0 4px; padding: 11px 13px; border-radius: 12px;
  background: #F6F9FC; border: 1px solid var(--line); text-decoration: none;
}
a.quotecard:hover { border-color: var(--blue); background: #F0F6FD; }
.quotecard.static { cursor: default; margin-top: 10px; }
.quotecard.dead {
  color: var(--ink-mute); font-size: 13px; background: #F4F5F7; border-style: dashed;
}
.quotecard .qhead { display: flex; align-items: center; gap: 7px; }
.quotecard .qname { font-size: 13px; font-weight: 600; color: var(--ink-body); }
.quotecard .qtext {
  margin-top: 6px; font-size: 13.5px; line-height: 1.55; color: var(--ink);
  overflow-wrap: break-word; word-break: break-word;
}
.quotecard .qimg { position: relative; margin-top: 8px; display: inline-block; }
.quotecard .qimg img {
  max-width: 100%; max-height: 160px; border-radius: 9px; display: block; object-fit: cover;
}
.quotecard .qimgmore {
  position: absolute; right: 6px; bottom: 6px; background: rgba(0,0,0,.55); color: #fff;
  font-size: 12px; padding: 1px 8px; border-radius: 999px;
}

/* ---------------- 本周成绩单晒卡 ---------------- */
.avatar.lg { width: 64px; height: 64px; border-width: 3px; }
.reportcard {
  padding: 20px; background: linear-gradient(150deg, #F3F9FF 0%, #FBFDFF 45%, #FFF7EC 100%);
  border: 1px solid #E3EEFA;
}
.rc-top { display: flex; align-items: center; justify-content: space-between; }
.rc-badge {
  font-size: 13px; font-weight: 800; color: #fff; padding: 4px 13px; border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), #6FB1F5); letter-spacing: .5px;
}
.rc-span { font-size: 12px; color: var(--ink-mute); }
.rc-who { display: flex; align-items: center; gap: 13px; margin: 15px 0 4px; }
.rc-who .avatar.lg { display: flex; }
.rc-name { font-size: 17px; font-weight: 800; color: var(--ink); display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.rc-headline { font-size: 13px; color: var(--ink-body); margin-top: 3px; }
.rc-levelup {
  margin: 12px 0 2px; padding: 9px 14px; border-radius: 12px; font-size: 13.5px; font-weight: 600;
  color: #8A5A00; background: #FFF3D6; border: 1px solid #F3E1AE;
}
.rc-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 16px 0 4px;
}
.rc-cell {
  background: #fff; border: 1px solid #EAF1F9; border-radius: 13px; padding: 12px 6px; text-align: center;
}
.rc-cell b { display: block; font-size: 22px; font-weight: 800; color: var(--blue-deep); line-height: 1.1; }
.rc-cell span { font-size: 11.5px; color: var(--ink-mute); }
.rc-cell.pt b { color: var(--warm); }
.rc-ach { margin-top: 14px; font-size: 12.5px; color: var(--ink-body); display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.rc-achv { background: #FFF7E0; border: 1px solid #F2E3B3; border-radius: 999px; padding: 3px 10px; font-weight: 600; color: #8A6D1B; }
.rc-best {
  display: flex; align-items: center; gap: 9px; margin-top: 14px; padding: 11px 14px;
  background: #fff; border: 1px solid #EAF1F9; border-radius: 13px; text-decoration: none;
}
.rc-best:hover { border-color: var(--blue); }
.rc-best-tag { font-size: 12px; font-weight: 700; color: var(--warm); white-space: nowrap; }
.rc-best-txt { flex: 1; min-width: 0; font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-foot { margin-top: 16px; text-align: center; font-size: 11.5px; color: var(--ink-mute); }
.rc-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 14px 2px 0; }
.rc-tip { font-size: 12.5px; color: var(--ink-mute); }
.wallet-report {
  display: block; margin-top: 12px; padding: 10px 14px; border-radius: 12px; text-decoration: none;
  font-size: 13px; font-weight: 600; color: var(--blue-deep);
  background: var(--blue-soft); border: 1px solid #D6E8FB;
}
.wallet-report:hover { background: #E4F0FD; }
.reportentry {
  display: flex; align-items: center; gap: 12px; text-decoration: none;
  background: linear-gradient(120deg, #EEF6FF, #FFF7EC);
}
.re-ico { font-size: 26px; }
.re-txt { display: flex; flex-direction: column; gap: 2px; }
.re-txt b { font-size: 14px; color: var(--ink); }
.re-txt span { font-size: 12px; color: var(--ink-mute); }
.reportentry:hover { border-color: var(--blue); }

/* ---------------- 页脚 ---------------- */
.footer { text-align: center; color: var(--ink-mute); font-size: 12.5px; padding: 14px 16px 20px; }
.footer a { color: var(--ink-mute); text-decoration: none; }
.footer a:hover { color: var(--blue); }

/* ---------------- 移动横幅/标签栏(默认隐藏) ---------------- */
.mobilebanner { display: none; }
.mobiletabs { display: none; }

/* ================ 平板(768–1099px):两栏,右栏隐藏 ================ */
@media (max-width: 1099px) {
  .shell { margin: 12px; }
  .layout { grid-template-columns: 196px minmax(0, 1fr); padding: 14px 14px 4px; }
  .sky-banner { grid-column: 2 / 3; }
  .side-r { display: none; }
  .dropnick { max-width: 88px; }
  .searchbox input { max-width: 150px; }
  .mainnav a { padding: 0 10px; font-size: 14px; }
  .topbar-in { gap: 10px; padding: 0 18px; }
  .mobilebanner {
    display: block; background: var(--hint-bg);
    border-bottom: 1px solid var(--hint-line);
    padding: 8px 16px; font-size: 13px; color: #7d6512; text-decoration: none;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  }
}

/* ================ 手机(<768px):单栏+标签行 ================ */
@media (max-width: 767px) {
  body { background: linear-gradient(180deg, #7FC2F1, #D6ECFB 40%, #F5F9FD 70%) fixed; }
  .shell { margin: 0; border-radius: 0; box-shadow: none; min-height: 100vh; }
  .topbar { position: sticky; top: 0; z-index: 30; border-radius: 0; }
  .topbar-in { padding: 0 14px; height: 52px; gap: 10px; }
  .logo { font-size: 18px; }
  .mainnav { display: none; }
  .topright { margin-left: auto; }
  .dropnick { max-width: 64px; }
  .mobiletabs {
    display: flex; background: #fff; border-bottom: 1px solid var(--line);
    height: 46px; position: sticky; top: 52px; z-index: 29;
  }
  .mobiletabs a {
    flex: 1; text-align: center; line-height: 43px; font-size: 15px;
    color: var(--ink-body); text-decoration: none; border-bottom: 3px solid transparent;
  }
  .mobiletabs a.on { color: var(--blue); font-weight: 700; border-bottom-color: var(--blue); }
  .layout { display: block; padding: 12px 10px 4px; }
  .sky-banner { display: none; }
  .side-l { display: none; }
  .side-r { display: none; }
  .feeditem { padding: 13px; }
  .imgs { max-width: none; }
  .factions { flex-wrap: wrap; }
  /* 发帖操作排三个按钮(投票/配图/发布)在窄屏放不下会把整页撑宽：收窄+允许换行 */
  .compose-bar { flex-wrap: wrap; }
  .compose-bar .btn { padding: 7px 13px; font-size: 13px; }
  .searchbox { display: none; }
  .msearch { display: inline; font-size: 17px; }
  .mobiletabs a { font-size: 14.5px; }
  .prow { flex-direction: column; align-items: center; text-align: center; }
  .prow .avatar.xl { margin-top: -40px; }
  .pinfo { width: 100%; }
  .pname-row { justify-content: center; }
  .pacts { justify-content: center; padding-top: 6px; }
  .peoplegrid.wide { grid-template-columns: repeat(4, 1fr); }
  .authcard { margin: 12px auto; }
  .rc-grid { grid-template-columns: repeat(3, 1fr); }   /* 成绩单窄屏 4→3 列，数字不挤 */
  .rc-cell b { font-size: 20px; }
}

/* ---------------- 扭蛋抽宠物 ---------------- */
.petbadge { display: inline-block; margin-left: 3px; font-size: 15px; vertical-align: middle; line-height: 1; }
.gacha-head { text-align: center; }
.gacha-title { font-size: 21px; font-weight: 800; color: var(--ink); }
.gacha-coins { margin-top: 6px; font-size: 16px; color: var(--warm); font-weight: 700; }
.gacha-coins b { font-size: 20px; }
.gacha-sub { margin-top: 4px; font-size: 13px; color: var(--ink-mute); }
.gacha-note { margin: 10px auto 0; max-width: 460px; font-size: 12.5px; color: var(--ink-mute); line-height: 1.6; }
.gacha-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.gacha-btn { border: none; border-radius: 12px; padding: 13px 22px; font-size: 15px; font-weight: 700;
  color: #fff; background: var(--blue); cursor: pointer; box-shadow: 0 4px 12px rgba(46,124,232,.28);
  transition: transform .08s; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.gacha-btn:hover:not(:disabled) { transform: translateY(-2px); }
.gacha-btn:disabled { background: var(--line-deep); color: var(--ink-mute); box-shadow: none; cursor: not-allowed; }
.gacha-btn.free { background: linear-gradient(135deg, #FF9F43, #EF8600); box-shadow: 0 4px 12px rgba(239,134,0,.32); }
.gacha-btn.ten { background: linear-gradient(135deg, #8b5cf6, #6d28d9); box-shadow: 0 4px 12px rgba(139,92,246,.32); }
.ten-hint { font-size: 11px; font-weight: 600; opacity: .92; }
.gacha-poor { margin-top: 12px; font-size: 13px; color: var(--ink-mute); }
.gacha-poor a { color: var(--blue); }

/* 稀有度配色 */
.r-n   { --rc: #9AA7B6; }
.r-r   { --rc: #2E7CE8; }
.r-sr  { --rc: #8b5cf6; }
.r-ssr { --rc: #F0A500; }

.reveal-card { text-align: center; border: 2px solid var(--warm-line); background: var(--hint-bg); }
.reveal-h { font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 12px; }
.reveal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 10px; max-width: 560px; margin: 0 auto; }
.petflip { position: relative; border: 2px solid var(--rc); border-radius: 14px; padding: 14px 6px 10px; background: #fff;
  opacity: 0; transform: scale(.6) rotateY(90deg); animation: pop-in .5s cubic-bezier(.2,1.3,.4,1) forwards; }
.petflip.r-ssr, .petflip.r-sr { box-shadow: 0 0 0 3px color-mix(in srgb, var(--rc) 22%, transparent), 0 6px 16px color-mix(in srgb, var(--rc) 30%, transparent); }
@keyframes pop-in { to { opacity: 1; transform: scale(1) rotateY(0); } }
.pf-emoji { font-size: 40px; line-height: 1; }
.pf-name { margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--ink); }
.pf-rar { font-size: 11px; font-weight: 700; color: var(--rc); }
.pf-new { position: absolute; top: -8px; right: -8px; background: var(--red); color: #fff; font-size: 10px;
  font-weight: 800; padding: 2px 6px; border-radius: 8px; transform: rotate(8deg); }
.reveal-refund { margin-top: 12px; font-size: 13px; color: var(--warm); font-weight: 600; }

.dex-count { font-size: 13px; color: var(--ink-mute); font-weight: 600; }
.dex-rar { margin: 16px 0 8px; font-size: 13px; font-weight: 800; color: var(--rc); letter-spacing: .5px; }
.dex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.petcard { border: 1.5px solid var(--rc); border-radius: 14px; padding: 12px 10px; text-align: center;
  background: color-mix(in srgb, var(--rc) 6%, #fff); display: flex; flex-direction: column; }
.petcard.locked { border-color: var(--line); background: var(--page-bg); filter: grayscale(1); opacity: .82; }
.petcard.worn { box-shadow: 0 0 0 2px var(--rc) inset; }
.pc-emoji { font-size: 38px; line-height: 1; }
.pc-name { margin-top: 6px; font-size: 14px; font-weight: 700; color: var(--ink); }
.pc-flavor { margin-top: 4px; font-size: 11.5px; color: var(--ink-mute); line-height: 1.5; flex: 1; min-height: 30px; }
.pc-foot { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; }
.pc-cnt { font-size: 12px; font-weight: 700; color: var(--rc); }
.pc-equip { border: 1px solid var(--rc); background: #fff; color: var(--rc); border-radius: 999px;
  padding: 4px 14px; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.pc-equip.on { background: var(--rc); color: #fff; }

.odds-card .odds-list { list-style: none; display: flex; gap: 18px; flex-wrap: wrap; padding: 0; margin: 4px 0 12px; }
.odds-r { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
  color: #fff; background: var(--rc); }
.odds-note { font-size: 12.5px; color: var(--ink-mute); line-height: 1.8; }

/* ============ 新手路径 / 任务卡增强 / 学习路线 / 搜索空态 ============ */

/* 游客首页三步走 */
.startsteps { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; }
.sstep {
  flex: 1; min-width: 132px; text-decoration: none; text-align: center;
  background: #F6FAFF; border: 1px solid var(--line-deep); border-radius: 12px;
  padding: 12px 10px; transition: border-color .12s, box-shadow .12s;
}
.sstep:hover { border-color: var(--blue); box-shadow: 0 3px 10px rgba(46,124,232,.12); }
.sstep .ss-n {
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  border-radius: 50%; background: var(--blue); color: #fff; font-weight: 800; font-size: 13px; margin-bottom: 6px;
}
.sstep b { display: block; font-size: 14.5px; color: var(--ink); }
.sstep span:not(.ss-n) { display: block; font-size: 12px; color: var(--ink-mute); margin-top: 2px; }
.ss-arrow { align-self: center; color: #A9CDF3; font-weight: 800; font-size: 18px; }
/* 平板两栏(≤1099px)主列会被压窄,三步一行放不下会换行、留个指向空处的悬空箭头——
   所以从两栏断点起就藏箭头,只在三栏宽屏保留;窄屏再把步骤卡收窄免溢出 */
@media (max-width: 1099px) { .ss-arrow { display: none; } }
@media (max-width: 560px) { .sstep { min-width: 90px; } }

/* 游客左栏「三步开始」+ 规则摘要 */
.guidehead { padding: 12px 12px 2px; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.navmenu.steps a { font-weight: 600; }
.navmenu.steps a i { font-size: 14px; }
.guiderules {
  margin: 6px 12px 12px; padding: 9px 11px; font-size: 11.5px; line-height: 1.7;
  color: var(--ink-mute); background: #F6FAFF; border: 1px solid var(--line); border-radius: 9px;
}

/* 任务卡：难度 / 耗时 / 验收 / 示例 */
.task-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 15px 0; }
.difftag { font-size: 12px; font-weight: 700; border-radius: 999px; padding: 2px 11px; }
.difftag.d-easy { background: var(--ok-bg); border: 1px solid var(--ok-line); color: var(--ok); }
.difftag.d-mid  { background: var(--blue-soft); border: 1px solid #BFDBFB; color: var(--blue-deep); }
.difftag.d-hard { background: var(--warm-bg); border: 1px solid var(--warm-line); color: var(--warm); }
.metachip { font-size: 12px; color: var(--ink-mute); }
.task-line {
  margin: 8px 15px 0; font-size: 13px; line-height: 1.7; color: var(--ink-body);
  background: #F6FAFF; border: 1px solid var(--line); border-radius: 9px; padding: 8px 12px;
  overflow-wrap: anywhere;                 /* 管理员可能贴长链接：无空格长串强制断行，别撑破卡片 */
}
.task-line.dim { background: #FBFCFE; color: var(--ink-mute); }
.task-line b { display: inline-block; margin-right: 6px; color: var(--ink); font-weight: 700; }
.task-line.dim b { color: var(--ink-body); }
.taskcard .task-line:last-of-type { margin-bottom: 14px; }
.tmin { font-size: 11.5px; color: var(--ink-mute); white-space: nowrap; }

/* 教程学习路线 */
.trackcard { padding-bottom: 6px; }
.track-head { padding: 13px 15px 4px; font-size: 15.5px; font-weight: 700; color: var(--ink); }
.track-n { font-size: 12px; font-weight: 400; color: var(--ink-mute); margin-left: 6px; }
.track-list { padding: 4px 8px 6px; }
.trackrow {
  display: flex; align-items: center; gap: 12px; text-decoration: none;
  padding: 10px 10px; border-radius: 10px; transition: background .12s;
}
.trackrow:hover { background: #F1F7FE; }
.trk-no {
  flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--blue-soft);
  color: var(--blue-deep); font-weight: 800; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center;
}
.trk-main { flex: 1; min-width: 0; }
.trk-title { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.trackrow:hover .trk-title { color: var(--blue); }
.trk-sum { display: block; font-size: 12.5px; color: var(--ink-mute); margin-top: 2px; overflow-wrap: anywhere; }
.trk-go { flex: none; font-size: 12.5px; color: var(--blue); font-weight: 600; }

/* 搜索推荐词 */
.tchip.plain { background: #F6FAFF; }
.tchip.plain:hover { background: #D8EAFD; }

/* 后台表单：一行多个字段 */
.rowfields { display: flex; gap: 14px; flex-wrap: wrap; }
.rowfields > label { flex: 1; min-width: 120px; }

/* 内联评论:提交后的即时提示(待审/去重/解锁成就) */
.cform-tip { font-size: 12px; color: var(--ink-mute); margin: 3px 2px 0; }
/* 无限滚动到底/失败提示 */
.feedend { text-align: center; color: var(--ink-mute); font-size: 13px; padding: 14px 0 4px; }

/* 悬浮按钮:返回 + 回到顶部(蓝白药丸,大厂移动端标配) */
.floatbtns { position: fixed; right: 22px; bottom: 26px; z-index: 40; display: flex; flex-direction: column; gap: 10px; }
.fbtn {
  border: 1px solid var(--line-deep); background: #fff; color: var(--blue);
  border-radius: 999px; padding: 9px 15px; font-size: 13px; font-weight: 700; cursor: pointer;
  box-shadow: 0 5px 16px rgba(30, 80, 160, .16); transition: transform .12s, box-shadow .12s, color .12s;
  white-space: nowrap; line-height: 1.2;
}
.fbtn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(30, 80, 160, .24);
  color: var(--blue-deep); border-color: #A9CDF3; }
@media (max-width: 767px) { .floatbtns { right: 12px; bottom: 14px; gap: 8px; } .fbtn { padding: 8px 13px; font-size: 12.5px; } }