/* ============================================================
 * Nuegas — 1:1 对齐 Pixso 设计稿
 * 主蓝 #546FFF · 墨黑 #141522 · 灰字 #8E92BC · 浅灰底 #F5F5F7
 * ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --primary: #546FFF;
  --ink: #141522;
  --gray: #8E92BC;
  --line: #ECECF4;
  --bg: #F5F5F7;
}
[v-cloak] { display: none; }
html, body { height: 100%; }
body {
  font-family: "Plus Jakarta Sans", "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  color: var(--ink);
  background: #fff;
  font-size: 14px;
}
button { font-family: inherit; border: none; background: none; cursor: pointer; }
input { font-family: inherit; outline: none; }
img { display: block; }

/* ---------------- 图标 ---------------- */
.i-logo       { background: url('../img/vuesaxboldbooksquare1.svg') no-repeat center / contain; }
.i-overview-gray { background: url('../img/vuesaxlinearcategory21-gray.svg') no-repeat center / contain; }
.i-overview-blue { background: url('../img/vuesaxlinearcategory21-blue.svg') no-repeat center / contain; }
.i-task-gray  { background: url('../img/vuesaxlinearbook1-gray.svg') no-repeat center / contain; }
.i-task-blue  { background: url('../img/vuesaxlinearbook1-blue.svg') no-repeat center / contain; }
.i-mentors-gray { background: url('../img/vuesaxlinearuseroctagon1-gray.svg') no-repeat center / contain; }
.i-mentors-blue { background: url('../img/vuesaxlinearuseroctagon1-blue.svg') no-repeat center / contain; }
.i-message-gray { background: url('../img/vuesaxlinearmessage1-gray.svg') no-repeat center / contain; }
.i-message-blue { background: url('../img/vuesaxlinearmessage1-blue.svg') no-repeat center / contain; }
.i-settings-gray { background: url('../img/vuesaxlinearsetting21-gray.svg') no-repeat center / contain; }
.i-settings-blue { background: url('../img/vuesaxlinearsetting21-blue.svg') no-repeat center / contain; }
.i-bell    { background: url('../img/notif2-ink.svg') no-repeat center / contain; }
.i-search  { background: url('../img/searchnormal0.svg') no-repeat center / contain; }
.i-burger  { background: url('../img/vuesaxlinearmenu-ink.svg') no-repeat center / contain; }
.i-video   { background: url('../img/chatvideo-ink.svg') no-repeat center / contain; }
.i-call    { background: url('../img/chatcall-ink.svg') no-repeat center / contain; }
.i-arrow-left { background: url('../img/chatarrowleft.svg') no-repeat center / contain; }
.i-send    { background: url('../img/chatsend.svg') no-repeat center / contain; }
.i-book    { background: url('../img/vuesaxlinearbook1-gray.svg') no-repeat center / contain; }
.i-cat     { background: url('../img/vuesaxlinearcategory21-gray.svg') no-repeat center / contain; }

.i-clock   { background: url('../img/icons/clock-gray.svg') no-repeat center / contain; }
.i-star    { background: url('../img/icons/star.svg') no-repeat center / contain; }
.i-chev-left  { background: url('../img/icons/chev-left.svg') no-repeat center / contain; }
.i-chev-right { background: url('../img/icons/chev-right.svg') no-repeat center / contain; }
.i-chev-down  { background: url('../img/icons/chev-down.svg') no-repeat center / contain; }
.i-users   { background: url('../img/icons/users-gray.svg') no-repeat center / contain; }
.i-check   { background: url('../img/icons/check-white.svg') no-repeat center / contain; }
.i-folder  { background: url('../img/icons/folder-gray.svg') no-repeat center / contain; }
.i-pause   { background: url('../img/icons/pause-ink.svg') no-repeat center / contain; }
.i-ext     { background: url('../img/icons/ext-ink.svg') no-repeat center / contain; }
.i-pip     { background: url('../img/icons/pip-ink.svg') no-repeat center / contain; }
.i-sound   { background: url('../img/icons/sound-ink.svg') no-repeat center / contain; }
.i-sort    { background: url('../img/icons/sort-gray.svg') no-repeat center / contain; }
.i-at      { background: url('../img/icons/at-gray.svg') no-repeat center / contain; }
.i-dblcheck { background: url('../img/icons/dblcheck-blue.svg') no-repeat center / contain; }
.i-more    { background: url('../img/icons/more-gray.svg') no-repeat center / contain; }

/* ---------------- 布局骨架 ---------------- */
.sidebar {
  position: fixed; left: 0; top: 0; bottom: 0; width: 250px;
  padding: 32px 24px; display: flex; flex-direction: column;
  background: #fff; z-index: 30;
}
.logo {
  display: flex; align-items: center; gap: 12px;
  font-size: 24px; font-weight: 700; color: var(--ink);
  cursor: pointer; padding-left: 8px;
}
.logo .i-logo { width: 30px; height: 30px; }

.nav { margin-top: 48px; display: flex; flex-direction: column; gap: 8px; }
.nav-item {
  display: flex; align-items: center; gap: 14px;
  height: 46px; padding: 0 14px; border-radius: 12px;
  font-size: 15px; color: var(--gray); cursor: pointer; user-select: none;
}
.nav-item i { width: 22px; height: 22px; flex-shrink: 0; }
.nav-item.active { background: var(--bg); color: var(--ink); font-weight: 600; }

.help-card {
  margin-top: auto; position: relative;
  background: var(--ink); border-radius: 20px;
  padding: 36px 20px 20px; text-align: center;
}
.help-q {
  position: absolute; top: -22px; left: 50%; transform: translateX(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--ink); color: #fff; font-weight: 700; font-size: 17px;
  display: flex; align-items: center; justify-content: center;
  border: 3px solid #fff;
}
.help-title { color: #fff; font-size: 15px; font-weight: 600; }
.help-text { color: #8E92BC; font-size: 11.5px; line-height: 1.6; margin-top: 10px; }
.help-btn {
  margin-top: 16px; width: 100%; height: 40px;
  background: #fff; color: var(--ink); border-radius: 999px;
  font-size: 13px; font-weight: 600;
}

.main { margin-left: 250px; padding: 0 32px 40px; min-width: 0; }
.burger { display: none; }

/* ---------------- 页头 ---------------- */
.page-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 28px 0 24px;
}
.page-head h1 { font-size: 24px; font-weight: 700; }
.dash-hi h1 { font-size: 22px; font-weight: 700; }
.dash-hi p { color: var(--gray); font-size: 14px; margin-top: 6px; }
.head-actions { display: flex; align-items: center; gap: 16px; }
.bell {
  position: relative; width: 48px; height: 48px; border-radius: 50%;
  background: #fff; border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
}
.bell i { width: 20px; height: 20px; }
.bell-dot {
  position: absolute; top: 11px; right: 13px;
  width: 7px; height: 7px; border-radius: 50%; background: #FF4D5E;
  border: 1.5px solid #fff;
}
.head-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }

/* ---------------- 总览 ---------------- */
.dash-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 372px;
  gap: 48px; align-items: start;
}
.dash-left { min-width: 0; }
.duo { display: grid; grid-template-columns: 29fr 71fr; gap: 32px; }
.duo-even { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.dash-right { display: flex; flex-direction: column; gap: 24px; }

.run-card {
  background: var(--ink); border-radius: 24px; color: #fff;
  padding: 24px; display: flex; flex-direction: column;
}
.run-label { font-size: 15px; font-weight: 500; }
.run-num { font-size: 40px; font-weight: 700; margin: 10px 0 18px; }
.run-foot { display: flex; align-items: center; gap: 16px; margin-top: auto; }
.ring { position: relative; width: 64px; height: 64px; }
.ring svg { width: 64px; height: 64px; transform: rotate(-90deg); }
.ring-track { fill: none; stroke: rgba(255,255,255,.14); stroke-width: 5; }
.ring-fill { fill: none; stroke: var(--primary); stroke-width: 5; stroke-linecap: round; }
.ring-txt {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600;
}
.run-side b { font-size: 18px; display: block; }
.run-side span { font-size: 13px; color: var(--gray); }

.act-card { border: 1px solid var(--line); border-radius: 24px; padding: 22px 24px; min-width: 0; }
.act-head { display: flex; align-items: center; justify-content: space-between; }
.act-head b { font-size: 16px; }
.act-week { font-size: 13px; color: var(--gray); display: flex; align-items: center; gap: 6px; }
.act-week .i-chev-down { width: 14px; height: 14px; }
.act-plot { position: relative; height: 120px; margin-top: 16px; margin-left: 20px; }
.act-y {
  position: absolute; left: -20px; font-size: 12px; color: var(--gray);
  transform: translateY(-50%);
}
.act-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.act-tip {
  position: absolute; top: -14px; left: 20%; transform: translateX(-50%);
  background: var(--ink); color: #fff; font-size: 12px; font-weight: 600;
  padding: 7px 12px; border-radius: 8px; white-space: nowrap;
}
.act-x { display: flex; justify-content: space-between; margin: 10px 0 0 20px; }
.act-x span { font-size: 12px; color: var(--gray); width: 20px; text-align: center; }

.sec-head {
  display: flex; align-items: center; justify-content: space-between;
  margin: 36px 0 16px;
}
.sec-head h2 { font-size: 20px; font-weight: 700; }
.arrows { display: flex; gap: 18px; }
.arrows i { width: 20px; height: 20px; cursor: pointer; }

.mentor-card, .mentor-sm, .mentor-lg {
  border: 1px solid var(--line); border-radius: 16px; padding: 18px; background: #fff;
}
.mc-top { display: flex; align-items: center; gap: 12px; }
.mc-top img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.mc-info { min-width: 0; }
.mc-info b { display: block; font-size: 14.5px; }
.mc-info span { display: block; font-size: 12px; color: var(--gray); margin-top: 3px; }
.follow { margin-left: auto; color: var(--primary); font-size: 13px; font-weight: 600; white-space: nowrap; }
.follow.on { color: var(--gray); font-weight: 500; }
.mc-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; flex-wrap: wrap; gap: 8px; }
.mc-stat, .mc-rate { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.mc-stat i { width: 17px; height: 17px; }
.mc-rate i { width: 17px; height: 17px; }

.up-card, .task-card {
  border: 1px solid var(--line); border-radius: 16px; padding: 14px; background: #fff;
  cursor: pointer;
}
.up-cover, .tk-cover {
  width: 100%; height: 128px; object-fit: cover; border-radius: 12px;
}
.up-title, .tk-title { display: block; font-size: 15px; font-weight: 600; margin-top: 14px; padding: 0 6px; }
.up-tag, .tk-tag { display: block; font-size: 12px; color: var(--gray); margin-top: 5px; padding: 0 6px; }
.prog-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; margin-top: 14px; padding: 0 6px;
}
.pct { color: var(--primary); font-weight: 600; }
.bar { position: relative; height: 6px; background: #EDEDF5; border-radius: 3px; margin: 10px 6px 0; }
.bar i { position: relative; display: block; height: 6px; background: var(--primary); border-radius: 3px; }
.bar i::after {
  content: ''; position: absolute; right: -2px; top: 50%; transform: translateY(-50%);
  width: 11px; height: 11px; border-radius: 50%; background: var(--primary);
  border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(84,111,255,.35);
}
.up-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding: 0 6px 4px; }
.up-left { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--gray); white-space: nowrap; }
.up-left i { width: 17px; height: 17px; }
.stack { display: flex; }
.stack img {
  width: 26px; height: 26px; border-radius: 50%; object-fit: cover;
  border: 2px solid #fff; margin-left: -9px;
}
.stack img:first-child { margin-left: 0; }

.cal-card { border: 1px solid var(--line); border-radius: 16px; padding: 20px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; }
.cal-head b { font-size: 15px; }
.cal-head i { width: 18px; height: 18px; cursor: pointer; }
.cal-week, .cal-days { display: grid; grid-template-columns: repeat(7, 1fr); justify-items: center; }
.cal-week { margin-top: 18px; }
.cal-week span { font-size: 12px; color: var(--gray); }
.cal-days { margin-top: 10px; }
.cal-days span {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; cursor: pointer;
}
.cal-days span.on { background: var(--ink); color: #fff; font-weight: 600; }

.today-card { border: 1px solid var(--line); border-radius: 16px; padding: 18px; }
.tc-head { display: flex; align-items: center; justify-content: space-between; }
.tc-head b { font-size: 15px; }
.tc-head .i-more { width: 20px; height: 20px; }
.tc-cover { width: 100%; height: 112px; object-fit: cover; border-radius: 12px; margin-top: 14px; }
.tc-title { display: block; font-size: 14.5px; font-weight: 600; margin-top: 14px; }
.tc-tag { display: block; font-size: 12px; color: var(--gray); margin-top: 5px; }

.dtl-card { border: 1px solid var(--line); border-radius: 16px; padding: 20px; }
.dtl-head { display: flex; align-items: center; justify-content: space-between; }
.dtl-head b { font-size: 15px; }
.dtl-head span { font-size: 12px; color: var(--gray); }
.dtl-row { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.dtl-num {
  width: 27px; height: 27px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid var(--line); color: var(--gray); font-size: 12px;
  display: flex; align-items: center; justify-content: center;
}
.dtl-txt { font-size: 13px; }

.btn-primary {
  background: var(--primary); color: #fff; font-size: 14px; font-weight: 600;
  border-radius: 12px; height: 48px; padding: 0 28px; margin-top: 20px;
}
.btn-primary.w100 { width: 100%; }
.mt32 { margin-top: 32px; }

/* ---------------- 工具栏 / 灰色区块 ---------------- */
.toolbar { display: flex; gap: 16px; margin-bottom: 24px; }
.search { position: relative; flex: 1; min-width: 0; }
.search input {
  width: 100%; height: 48px; border: 1px solid var(--line); border-radius: 12px;
  padding: 0 48px 0 16px; font-size: 14px; color: var(--ink);
}
.search input::placeholder { color: var(--gray); }
.search .i-search {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px;
}
.tool-btn {
  height: 48px; border: 1px solid var(--line); border-radius: 12px;
  padding: 0 20px; display: flex; align-items: center; gap: 9px;
  font-size: 14px; color: var(--ink); background: #fff; white-space: nowrap;
}
.tool-btn i { width: 19px; height: 19px; }

.gray-zone {
  background: var(--bg); border-radius: 24px; padding: 28px 32px 32px;
  margin: 0 -32px;
}
.gray-zone .sec-head:first-child { margin-top: 4px; }
.hscroll { display: flex; gap: 28px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.hscroll::-webkit-scrollbar { display: none; }

.task-card { width: 330px; flex-shrink: 0; }
.task-card .tk-cover { height: 150px; }

.mentor-sm { width: 300px; flex-shrink: 0; }
.mentor-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.mentor-lg { padding: 22px; }
.mg-bio { font-size: 13px; color: var(--gray); line-height: 1.8; margin-top: 16px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------------- 任务详情 ---------------- */
.detail-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 380px;
  gap: 32px; align-items: start; padding-bottom: 12px;
}
.card { background: #fff; border: 1px solid var(--line); border-radius: 20px; }
.detail-main { padding: 28px; }
.video { border-radius: 16px; overflow: hidden; border: 1px solid var(--line); }
.video-cover { width: 100%; height: 340px; object-fit: cover; }
.player { display: flex; align-items: center; gap: 14px; padding: 12px 18px; background: #fff; }
.pp { width: 24px; height: 24px; }
.ptrack { flex: 1; height: 4px; background: #E5E6EF; border-radius: 2px; overflow: hidden; }
.ptrack i { display: block; height: 100%; background: var(--ink); border-radius: 2px; }
.ptime { font-size: 13px; color: var(--gray); white-space: nowrap; }
.p-ic { width: 19px; height: 19px; flex-shrink: 0; }

.d-title { font-size: 26px; font-weight: 700; margin-top: 26px; }
.d-tags { font-size: 13px; color: var(--gray); margin-top: 10px; }
.blue-link { color: var(--primary); font-weight: 600; margin-left: 16px; cursor: pointer; }
.d-meta { display: flex; gap: 28px; margin-top: 18px; font-size: 13px; color: var(--gray); }
.d-meta span { display: flex; align-items: center; gap: 8px; }
.d-meta i { width: 17px; height: 17px; }
.d-h3 { font-size: 18px; font-weight: 700; margin: 30px 0 14px; }
.d-desc { font-size: 14px; color: #6E7191; line-height: 1.9; }
.d-check { display: flex; align-items: center; gap: 13px; margin-top: 14px; font-size: 14px; }
.chk {
  width: 21px; height: 21px; border-radius: 50%; background: var(--primary);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.chk i { width: 11px; height: 11px; }

.detail-side { padding: 26px; }
.side-label { font-size: 14px; font-weight: 600; }
.ds-title { font-size: 21px; font-weight: 700; margin-top: 14px; line-height: 1.4; }
.ds-h3 { font-size: 16px; font-weight: 700; margin: 26px 0 4px; }
.kv { display: flex; justify-content: space-between; align-items: center; margin-top: 15px; font-size: 13px; }
.kv span { color: var(--gray); }
.kv b { font-weight: 600; }
.side-label2 { font-size: 13px; color: var(--gray); margin-top: 22px; }
.dropzone {
  margin-top: 10px; height: 120px; border: 1.6px dashed #D9DBE9; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
}
.dropzone .i-folder { width: 40px; height: 40px; }
.drop-note { font-size: 12px; color: var(--gray); margin-top: 10px; }

/* ---------------- 设置 ---------------- */
.set-card { padding: 0 32px 32px; border-radius: 16px; }
.set-tabs { display: flex; gap: 36px; border-bottom: 1px solid var(--line); }
.set-tabs button {
  padding: 24px 2px 14px; font-size: 15px; color: var(--gray);
  position: relative;
}
.set-tabs button.on { color: var(--ink); font-weight: 600; }
.set-tabs button.on::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 3px; border-radius: 3px; background: var(--primary);
}
.set-form { max-width: 480px; }
.f-label { display: block; font-size: 14px; font-weight: 600; margin: 28px 0 12px; }
.set-form .f-label:first-child { margin-top: 32px; }
.select {
  width: 300px; height: 48px; border: 1px solid var(--line); border-radius: 10px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px; font-size: 13.5px;
}
.select .i-chev-down { width: 16px; height: 16px; }
.fmt-row { display: flex; gap: 16px; }
.fmt {
  width: 150px; height: 48px; border: 1px solid var(--line); border-radius: 10px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px 0 16px; font-size: 13px; color: var(--ink); background: #fff;
}
.fmt .radio { width: 19px; height: 19px; border-radius: 50%; border: 2px solid #E1E2EC; }
.fmt.on { border-color: var(--primary); }
.fmt.on .radio { border: 6px solid var(--primary); }

.switch-row { display: flex; align-items: center; gap: 16px; margin-top: 26px; }
.set-form .switch-row:first-child { margin-top: 36px; }
.switch-row span { font-size: 14px; }
.switch {
  position: relative; width: 46px; height: 27px; border-radius: 14px;
  background: #fff; border: 1px solid var(--line);
}
.switch i {
  position: absolute; top: 3px; left: 4px; width: 19px; height: 19px;
  border-radius: 50%; background: #CBCEDD; transition: all .2s;
}
.switch.on i { left: 21px; background: var(--primary); }

/* ---------------- 消息 ---------------- */
.msg-head { border-bottom: 1px solid var(--line); padding-bottom: 0; }
.msg-head h1 { padding-bottom: 24px; }
.msg-grid { display: flex; height: calc(100vh - 90px); min-height: 540px; }
.chat-list {
  width: 400px; flex-shrink: 0; border-right: 1px solid var(--line);
  padding: 24px 24px 24px 0; overflow-y: auto;
}
.search.sm { flex: none; margin-bottom: 8px; }
.chat-item {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 12px; border-radius: 12px; cursor: pointer;
}
.chat-item:hover { background: #FAFAFC; }
.chat-item.active { background: var(--bg); }
.chat-item img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.ci-mid { flex: 1; min-width: 0; }
.ci-mid b { display: block; font-size: 14.5px; }
.ci-mid span {
  display: block; font-size: 12.5px; color: var(--gray); margin-top: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ci-right { text-align: right; flex-shrink: 0; }
.ci-time { display: block; font-size: 11.5px; color: var(--gray); margin-bottom: 7px; }
.unread-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #FF4D5E; }
.i-dblcheck { display: inline-block; width: 17px; height: 17px; }

.chat-pane { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cp-head {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 32px; border-bottom: 1px solid var(--line);
}
.cp-head img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.cp-who b { display: block; font-size: 14.5px; }
.online { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--gray); margin-top: 3px; }
.online i { width: 8px; height: 8px; border-radius: 50%; background: #25C78B; }
.cp-actions { margin-left: auto; display: flex; gap: 14px; }
.cp-btn {
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
}
.cp-btn i { width: 21px; height: 21px; }
.cp-back { display: none; }

.cp-body { flex: 1; overflow-y: auto; padding: 24px 32px; scrollbar-width: none; }
.cp-body::-webkit-scrollbar { display: none; }
.day-pill {
  width: fit-content; margin: 0 auto 26px;
  background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 600;
  padding: 8px 14px; border-radius: 9px;
}
.bubble {
  max-width: 440px; margin-bottom: 18px; padding: 13px 17px;
  font-size: 14px; line-height: 1.6; border-radius: 13px;
}
.bubble.me { background: var(--primary); color: #fff; margin-left: auto; border-bottom-right-radius: 4px; }
.bubble.other { background: #fff; color: var(--ink); border: 1px solid var(--line); margin-right: auto; border-bottom-left-radius: 4px; }
.bub-img { width: 100%; border-radius: 9px; margin-bottom: 9px; }
.bub-time { display: block; font-size: 11px; opacity: .65; text-align: right; margin-top: 7px; }

.cp-input {
  display: flex; align-items: center; gap: 14px;
  border-top: 1px solid var(--line); padding: 15px 32px;
}
.cp-input input { flex: 1; height: 48px; border: none; font-size: 14px; color: var(--ink); }
.cp-input input::placeholder { color: var(--gray); }
.at-btn { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
.at-btn .i-at { width: 20px; height: 20px; }
.send {
  width: 48px; height: 48px; border-radius: 50%; background: var(--primary);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.send i { width: 21px; height: 21px; }

/* ---------------- 响应式 ---------------- */
@media (max-width: 1280px) {
  .dash-grid { grid-template-columns: minmax(0, 1fr) 330px; gap: 32px; }
  .task-card { width: 300px; }
  .mentor-grid { grid-template-columns: repeat(2, 1fr); }
  .detail-grid { grid-template-columns: minmax(0, 1fr) 340px; }
}

@media (max-width: 1024px) {
  .sidebar {
    transform: translateX(-100%); transition: transform .25s;
    box-shadow: 0 0 40px rgba(20,21,34,.15); width: 260px;
  }
  .sidebar.open { transform: translateX(0); }
  .backdrop { position: fixed; inset: 0; background: rgba(20,21,34,.4); z-index: 25; }
  .main { margin-left: 0; padding: 0 20px 32px; }
  .burger {
    display: flex; align-items: center; justify-content: center;
    position: fixed; left: 16px; top: 20px; z-index: 20;
    width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line); background: #fff;
  }
  .burger i { width: 20px; height: 20px; }
  .page-head { padding-left: 54px; }
  .dash-grid, .detail-grid { grid-template-columns: 1fr; }
  .dash-right { margin-top: 8px; }
  .gray-zone { margin: 0 -20px; padding: 24px 20px 28px; border-radius: 0; }
  .toolbar { flex-wrap: wrap; padding-left: 54px; }
  .search { flex: 1 1 100%; }
  .tool-btn { flex: 1; }
  .msg-grid { height: calc(100vh - 120px); }
  .chat-list { width: 320px; padding-right: 16px; }
}

@media (max-width: 720px) {
  .duo, .duo-even { grid-template-columns: 1fr; }
  .mentor-grid { grid-template-columns: 1fr; }
  .task-card { width: 280px; }
  .mentor-sm { width: 280px; }
  .video-cover { height: 220px; }
  .detail-main, .detail-side { padding: 20px; }
  .set-card { padding: 0 20px 24px; }
  .select { width: 100%; }
  .fmt { width: 50%; }
  .cal-days span { width: 30px; height: 30px; font-size: 12px; }
  /* 消息：列表/会话切换 */
  .msg-grid .chat-pane { display: none; }
  .msg-grid.chatting .chat-list { display: none; }
  .msg-grid.chatting .chat-pane { display: flex; }
  .chat-list { width: 100%; padding-right: 0; border-right: none; }
  .cp-back {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line);
  }
  .cp-back i { width: 18px; height: 18px; }
  .cp-head, .cp-body, .cp-input { padding-left: 18px; padding-right: 18px; }
  .bubble { max-width: 85%; }
  .page-head h1, .dash-hi h1 { font-size: 20px; }
}

/* ---------------- 企宣 · 二级菜单（新增，未改动以上任何规则） ---------------- */
.i-video-blue { background: url('../img/chatvideo-blue.svg') no-repeat center / contain; }
.i-video-gray { background: url('../img/chatvideo-gray.svg') no-repeat center / contain; }
.i-sort-blue  { background: url('../img/icons/sort-blue.svg') no-repeat center / contain; }

/* 二级菜单项：缩进 + 小一号字 */
.nav-sub { padding-left: 34px; font-size: 14px; }
.nav-sub i { width: 18px; height: 18px; }

/* ---------------- 新增③：项目 × 月份 格子表（复用原版视觉变量） ---------------- */
.gt-tbl { margin-top: 16px; }
.gt-row {
  display: grid; gap: 8px; align-items: center;
  border-radius: 10px; padding: 4px 6px;
  cursor: pointer; transition: background .15s;
}
.gt-row + .gt-row { margin-top: 2px; }
.gt-head { cursor: default; }
.gt-head span {
  font-size: 12px; color: var(--gray); text-align: center;
}
.gt-head span.cur { color: var(--primary); font-weight: 600; }
.gt-head .gt-proj { text-align: left; }
.gt-proj {
  font-size: 13px; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gt-cell {
  height: 34px; border-radius: 8px; background: #F5F5F4;
  display: flex; align-items: center; justify-content: center;
}
.gt-cell b { font-size: 13px; font-weight: 600; color: var(--ink); }
.gt-cell.on { background: var(--primary); }
.gt-cell.on b { color: #fff; }
/* 本月未交：跟其他未交格子一样灰底，只多一个右侧居中的红点 */
.gt-cell.miss { position: relative; }
.gt-cell.miss::after {
  content: ''; position: absolute; top: 50%; right: 5px;
  margin-top: -2.5px;
  width: 5px; height: 5px; border-radius: 50%; background: #E24B4A;
}
.gt-legend {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  font-size: 12px; color: var(--gray); margin-top: 18px;
}
.gt-legend span { display: flex; align-items: center; gap: 7px; }
.gt-legend .dot {
  width: 12px; height: 12px; border-radius: 4px; background: #F5F5F4;
}
.gt-legend .dot.on { background: var(--primary); }
.gt-legend .dot.miss { position: relative; background: #F5F5F4; }
.gt-legend .dot.miss::after {
  content: ''; position: absolute; top: 50%; right: 3px;
  margin-top: -2px;
  width: 4px; height: 4px; border-radius: 50%; background: #E24B4A;
}

/* ---------------- 第4份：点格子看素材（右侧抽屉） ---------------- */
.gt-cell.clickable { cursor: pointer; }
.gt-cell.clickable:hover { filter: brightness(.94); }

.mb-mask {
  position: fixed; inset: 0; background: rgba(20,21,34,.4); z-index: 40;
}
.mb-drawer {
  position: fixed; right: 0; top: 0; bottom: 0; width: 420px;
  background: #fff; z-index: 41; display: flex; flex-direction: column;
  box-shadow: -8px 0 32px rgba(20,21,34,.12);
  transform: translateX(100%); transition: transform .22s ease;
}
.mb-drawer.open { transform: translateX(0); }
.mb-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 22px 24px 16px; border-bottom: 1px solid var(--line);
}
.mb-head b { font-size: 15px; }
.mb-head span { display: block; font-size: 12px; color: var(--gray); margin-top: 4px; }
.mb-x {
  border: 0; background: transparent; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--gray); padding: 0 2px;
}
.mb-body { flex: 1; overflow-y: auto; padding: 20px 24px 32px; }
.mb-grp + .mb-grp { margin-top: 24px; }
.mb-grp-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 12px;
}
.mb-grp-head b { font-size: 14px; }
.mb-grp-head span { font-size: 12px; color: var(--gray); }
.mb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mb-item {
  position: relative; display: block; aspect-ratio: 1;
  border-radius: 10px; overflow: hidden; background: var(--bg);
}
.mb-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mb-tag {
  position: absolute; left: 6px; bottom: 6px;
  background: rgba(20,21,34,.65); color: #fff;
  font-size: 11px; padding: 2px 7px; border-radius: 6px;
}

@media (max-width: 900px) {
  .mb-drawer { width: 100%; }
}

/* ---------------- 素材管理：只读浏览本机目录 ---------------- */
.fs-layout {
  display: grid; grid-template-columns: 220px minmax(0, 1fr);
  gap: 24px; margin-top: 18px;
}
.fs-tree {
  border-right: 1px solid var(--line); padding-right: 16px;
  max-height: 640px; overflow-y: auto;
}
.fs-tree-h {
  font-size: 13px; color: var(--ink); padding: 7px 8px; border-radius: 8px;
  cursor: pointer; transition: background .15s;
}
.fs-tree-h:hover { background: var(--bg); }
.fs-row {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--ink);
  padding: 7px 8px; border-radius: 8px; cursor: pointer;
  transition: background .15s;
}
.fs-row:hover { background: var(--bg); }
.fs-row.on { background: var(--bg); color: var(--primary); font-weight: 500; }
.fs-row.lv { padding-left: 22px; }
.fs-row.lv2 { padding-left: 40px; }
.fs-caret {
  width: 0; height: 0; flex: none;
  border-left: 5px solid var(--gray);
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transition: transform .18s;
}
.fs-caret.open { transform: rotate(90deg); }
/* 空目录没有子级，箭头藏掉，缩进对齐 */
.fs-caret.hide { visibility: hidden; }
.fs-name {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fs-num { font-size: 12px; color: var(--gray); flex: none; }

.fs-main { min-width: 0; }
.fs-crumb {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 13px; margin-bottom: 16px;
}
.fs-crumb span { color: var(--gray); cursor: pointer; }
.fs-crumb span:hover { color: var(--primary); }
.fs-crumb span.cur { color: var(--ink); cursor: default; }
.fs-crumb em { color: var(--gray); font-style: normal; }

.fs-wall {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 14px;
}
.fs-tile {
  border-radius: 10px; overflow: hidden; background: var(--bg);
  cursor: pointer; transition: transform .15s;
}
.fs-tile:hover { transform: translateY(-2px); }
/* 画面区：照片直出原图，视频走后端抽的首帧 */
.fs-thumb {
  position: relative; width: 100%; aspect-ratio: 4 / 3;
  background: var(--bg); overflow: hidden;
}
.fs-thumb img {
  width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
}
.fs-vid {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.fs-vid .i-video { width: 30px; height: 30px; opacity: .8; }
/* 视频播放角标：半透明圆 + 三角，压在首帧上 */
.fs-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(20, 21, 34, .42); pointer-events: none;
}
.fs-play::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  transform: translate(-46%, -50%);
  border-left: 11px solid #fff;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}
/* 文件名 + 尺寸两行 */
.fs-cap {
  display: block; padding: 8px 10px 9px; overflow: hidden;
}
.fs-cap-name {
  display: block; font-size: 12px; font-weight: 500; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fs-cap-sub {
  display: block; margin-top: 3px; font-size: 11px; color: var(--gray);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fs-empty { padding: 56px 0; text-align: center; }
.fs-empty p { font-size: 14px; color: var(--ink); margin: 0 0 8px; }
.fs-empty span { font-size: 12px; color: var(--gray); }

/* 大图查看 */
/* 弹层层级唯一规范（2026-10-15 定）：
   页面内容 < .fs-mask 遮罩 80 < .fs-lightbox 灯箱 81 < .fs-dialog 确认框 82。
   .fs-mask 只许保留这一处定义，二次定义会静默改掉所有旧用法。 */
.fs-mask { position: fixed; inset: 0; background: rgba(20,21,34,.4); z-index: 80; }
.fs-lightbox {
  position: fixed; inset: 0; z-index: 81;
  display: flex; align-items: center; justify-content: center;
}
.fs-lb-body { max-width: 84vw; max-height: 88vh; text-align: center; }
.fs-lb-body img { max-width: 84vw; max-height: 78vh; object-fit: contain; display: block; }
.fs-lb-body video { max-width: 84vw; max-height: 78vh; }
.fs-lb-meta {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  flex-wrap: wrap; margin-top: 14px; font-size: 12px; color: #fff;
}
.fs-lb-meta b { font-weight: 500; }
.fs-lb-meta span { opacity: .7; }
.fs-lb-x {
  position: absolute; top: 20px; right: 26px;
  border: 0; background: transparent; color: #fff;
  font-size: 30px; line-height: 1; cursor: pointer;
}
.fs-lb-nav {
  position: absolute; top: 50%; margin-top: -24px;
  width: 44px; height: 48px; border: 0; border-radius: 10px;
  background: rgba(255,255,255,.14); color: #fff;
  font-size: 26px; line-height: 1; cursor: pointer;
}
.fs-lb-nav:hover { background: rgba(255,255,255,.24); }
.fs-lb-nav.prev { left: 20px; }
.fs-lb-nav.next { right: 20px; }

@media (max-width: 900px) {
  .fs-layout { grid-template-columns: 1fr; }
  .fs-tree { border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 12px; max-height: 200px; }
}

/* 子分类卡片 */
.fs-subdirs {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px; margin-bottom: 22px;
}
.fs-subdir {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-radius: 10px; background: var(--bg);
  cursor: pointer; transition: background .15s;
}
.fs-subdir:hover { background: #EDEDF5; }
.fs-subdir .i-folder { width: 22px; height: 22px; flex: none; }
.fs-sd-name {
  flex: 1; min-width: 0; font-size: 13px; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fs-sd-num { font-size: 12px; color: var(--gray); flex: none; }

/* ---------------- 素材管理 · 右键菜单 / 多选 / 弹窗 ---------------- */
/* 选中态：蓝底，和原版 tab 的选中语言一致 */
.fs-tile.sel, .fs-subdir.sel { outline: 2px solid var(--primary); outline-offset: -2px; }

/* 右键菜单 */
.ctx-menu {
  position: fixed; z-index: 70; min-width: 168px; padding: 6px;
  background: #fff; border-radius: 12px;
  box-shadow: 0 8px 28px rgba(20, 21, 34, .14), 0 0 0 1px var(--line);
}
.ctx-menu button {
  display: block; width: 100%; text-align: left;
  border: 0; background: transparent; cursor: pointer;
  font-size: 13px; color: var(--ink);
  padding: 9px 12px; border-radius: 8px;
}
.ctx-menu button:hover { background: var(--bg); }
.ctx-menu button.danger { color: #E24B4A; }
.ctx-menu button.danger:hover { background: #FDF0EF; }

/* 多选浮动条 */
.fs-selbar {
  position: fixed; left: 50%; bottom: 28px; margin-left: -160px;
  z-index: 65; width: 320px;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: 12px;
  background: #141522; color: #fff;
  box-shadow: 0 10px 30px rgba(20, 21, 34, .28);
}
.fs-selbar span { font-size: 13px; margin-right: auto; }
.fs-selbar button {
  border: 0; background: rgba(255, 255, 255, .14); color: #fff;
  font-size: 12px; padding: 6px 10px; border-radius: 7px; cursor: pointer;
}
.fs-selbar button:hover { background: rgba(255, 255, 255, .26); }
.fs-selbar button.danger { background: rgba(226, 75, 74, .9); }

/* 弹窗通用 */
.fs-dialog {
  position: fixed; left: 50%; top: 50%; margin: -140px 0 0 -190px;
  z-index: 82; width: 380px; padding: 24px;
  background: #fff; border-radius: 14px;
  box-shadow: 0 20px 50px rgba(20, 21, 34, .2);
}
.fs-dialog.wide { width: 460px; margin-left: -230px; margin-top: -220px; }
.fs-dialog b { font-size: 15px; }
.fs-input {
  width: 100%; margin-top: 14px;
  border: 1px solid var(--line); border-radius: 9px;
  padding: 10px 12px; font-size: 13px; color: var(--ink);
  outline: none; background: #fff;
}
.fs-input:focus { border-color: var(--primary); }
.fs-dlg-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.fs-btn {
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  font-size: 13px; padding: 8px 16px; border-radius: 8px; cursor: pointer;
}
.fs-btn:hover { background: var(--bg); }
.fs-btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.fs-btn.primary:hover { filter: brightness(.94); }

/* 移动目标树 */
.fs-mv-tree {
  margin-top: 16px; max-height: 320px; overflow-y: auto;
  border: 1px solid var(--line); border-radius: 10px; padding: 6px;
}
.fs-mv-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--ink);
  padding: 8px 10px; border-radius: 7px; cursor: pointer;
  border-left: 2px solid transparent;
}
.fs-mv-row:hover { background: var(--bg); }
/* 已选中的目标目录 */
.fs-mv-row.cur {
  background: var(--primary); color: #fff; border-left-color: var(--primary);
}
/* 当前所在目录：灰掉 */
.fs-mv-row.self { opacity: .45; }
/* 非法目标：自己或自己的子目录，置灰不可选 */
.fs-mv-row.dis { opacity: .32; cursor: not-allowed; }
.fs-mv-row.dis:hover { background: transparent; }
.fs-mv-row .i-folder { width: 18px; height: 18px; flex: none; }
.fs-mv-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 回收站 */
.fs-bin { max-height: 340px; overflow-y: auto; margin-top: 4px; }
.fs-bin-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.fs-bin-row:last-child { border-bottom: 0; }
.fs-bin-row b { display: block; font-size: 13px; font-weight: 500; }
.fs-bin-row span {
  display: block; font-size: 12px; color: var(--gray); margin-top: 3px;
  max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 操作反馈 */
.fs-toast {
  position: fixed; left: 50%; top: 28px; margin-left: -150px;
  z-index: 90; width: 300px; text-align: center;
  background: #141522; color: #fff; font-size: 13px;
  padding: 11px 16px; border-radius: 10px;
  box-shadow: 0 10px 26px rgba(20, 21, 34, .24);
}

@media (max-width: 900px) {
  .ctx-menu { min-width: 148px; }
  .fs-dialog, .fs-dialog.wide { width: calc(100vw - 32px); left: 16px; margin-left: 0; }
}

/* 删除确认：待删清单 + 危险按钮 */
.fs-ask-list {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 14px; max-height: 132px; overflow-y: auto;
}
.fs-ask-list span {
  font-size: 12px; color: var(--gray);
  background: var(--bg); border-radius: 6px; padding: 5px 9px;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fs-btn.danger { background: #E24B4A; border-color: #E24B4A; color: #fff; }
.fs-btn.danger:hover { filter: brightness(.94); }

/* ---------------- 数据发布（播放量 + 凭证） ---------------- */
/* 顶部工具条：月份切换 + 保存 */
.pb-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding-bottom: 18px; border-bottom: 1px solid var(--line);
}
.pb-month {
  position: relative;
  display: flex; align-items: center; gap: 2px;
  background: #fff; border: 1px solid var(--line);
  border-radius: 12px; padding: 4px;
}
.pb-month button {
  height: 32px; min-width: 32px; padding: 0 8px; border-radius: 8px;
  cursor: pointer; color: var(--gray); font-size: 17px; line-height: 1;
}
.pb-month button:hover { background: var(--bg); color: var(--ink); }
/* 中间的月份文字也可点，弹月份列表 */
.pb-month button.pb-cur {
  font-size: 14px; font-weight: 600; color: var(--ink);
  padding: 0 12px; min-width: 108px;
}
.pb-mpop {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 40;
  display: flex; flex-wrap: wrap; gap: 6px;
  width: 268px; padding: 10px;
  background: #fff; border: 1px solid var(--line);
  border-radius: 14px; box-shadow: 0 8px 28px rgba(20,21,34,.12);
}
.pb-mpop button {
  display: flex; align-items: baseline; gap: 5px;
  height: 34px; padding: 0 11px; border-radius: 9px;
  font-size: 13px; color: var(--ink); cursor: pointer;
}
.pb-mpop button:hover { background: var(--bg); }
.pb-mpop button.on { background: var(--primary); color: #fff; font-weight: 500; }
.pb-mpop button em {
  font-style: normal; font-size: 11px; color: var(--gray);
}
.pb-mpop button.on em { color: rgba(255,255,255,.75); }
.pb-sp { flex: 1; }
.pb-sum { font-size: 13px; color: var(--gray); }
.pb-sum b { color: var(--ink); font-weight: 600; }
.pb-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; padding: 0 20px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  font-size: 14px; font-weight: 500;
}
.pb-btn:hover { background: var(--bg); }
.pb-btn.primary {
  background: var(--primary); border-color: var(--primary);
  color: #fff; font-weight: 600;
}
.pb-btn.primary:hover { filter: brightness(1.05); }
.pb-btn.primary.done { background: #18B566; border-color: #18B566; }  /* 已发布 */
.pb-btn:disabled { opacity: .5; cursor: not-allowed; }
.pb-btn.sm { height: 34px; padding: 0 13px; font-size: 13px; border-radius: 10px; }
.pb-btn.sm.ghost { color: var(--gray); }

/* 卡片网格：一个项目一张卡，横向铺满 */
.pb-grid {
  margin-top: 20px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 13px;
}
.pb-card {
  background: #fff; border: 1px solid var(--line);
  border-radius: 14px; padding: 12px;
}
.pb-card-h {
  display: flex; align-items: center; gap: 6px; margin-bottom: 8px;
}
/* 项目名后的状态点：三项（视频名/播放量/凭证）填全=蓝，缺=红，全空=不显示 */
.pb-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary); flex: none;
}
.pb-dot.bad { background: #E24B4A; }
.pb-name { font-size: 13px; font-weight: 500; color: var(--ink); }

/* 一行三件套：视频名（弹性）+ 播放量（定宽右对齐）+ 凭证缩略图 */
.pb-line { display: flex; gap: 6px; align-items: center; margin-top: 8px; }
.pb-line .pb-title { flex: 1; min-width: 0; }
.pb-line .pb-in { flex: none; width: 72px; }

.pb-in {
  width: 100%; height: 30px; text-align: right;
  border: 1px solid var(--line); border-radius: 10px; background: #fff;
  font-size: 13px; font-weight: 600; color: var(--ink); padding: 0 12px;
}
.pb-in:focus { border-color: var(--primary); }
.pb-in::placeholder { color: #C0C3D5; font-weight: 400; }
.pb-in.empty { font-weight: 400; }

/* 凭证缩略图：没图时是「＋」上传位，有图时点击看大图 */
.pb-thumb {
  width: 46px; height: 30px; border-radius: 10px; overflow: hidden;
  background: var(--bg); flex: none; cursor: zoom-in;
  display: flex; align-items: center; justify-content: center;
}
.pb-thumb.none {
  border: 1px dashed #DDDDE8; cursor: pointer; background: #fff;
}
.pb-thumb.none:hover { border-color: var(--primary); background: #FAFAFF; }
.pb-thumb.none i {
  font-style: normal; font-size: 17px; color: #C0C3D5; line-height: 1;
}
.pb-thumb.none:hover i { color: var(--primary); }
.pb-thumb img { width: 100%; height: 100%; object-fit: cover; }
img.pb-thumb { object-fit: cover; }

/* 灯箱里的更换/删除按钮 */
.pb-lb-btns { display: inline-flex; gap: 8px; }
.fs-lb-meta span.pb-lb-btns { opacity: 1; }

/* 凭证灯箱：层级与背景全走公共 .fs-mask / .fs-lightbox（跟素材管理完全一致），
   .pb-lb 只管深底上的按钮配色。 */
.pb-lb .pb-btn.sm.ghost {
  background: transparent; border-color: rgba(255,255,255,.4); color: #fff;
}
.pb-lb .pb-btn.sm.ghost:hover { background: rgba(255,255,255,.14); }

/* 底部汇总 */
.pb-foot {
  display: flex; align-items: center; gap: 20px;
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 12px; color: var(--gray);
}
.pb-foot b { color: var(--ink); font-weight: 600; }
.fs-ask-p { font-size: 13px; color: var(--gray); margin-top: 10px; line-height: 1.7; }

/* ---------------- 报表（月报 / 年报） ---------------- */
.rp-actions { display: flex; gap: 10px; }
.rp-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding-bottom: 18px; border-bottom: 1px solid var(--line);
  position: relative;
}
.rp-tabs {
  display: flex; background: #fff; border: 1px solid var(--line);
  border-radius: 12px; padding: 4px;
}
.rp-tabs button {
  height: 32px; padding: 0 16px; border-radius: 8px; cursor: pointer;
  font-size: 13px; color: var(--gray);
}
.rp-tabs button.on { background: var(--primary); color: #fff; font-weight: 600; }
.rp-mpop {
  position: absolute; left: 96px; top: 54px; z-index: 30;
}
.rp-mpop button.cur { background: var(--primary); color: #fff; }

/* 报表卡 */
.rp-card {
  margin-top: 20px; background: #fff; border: 1px solid var(--line);
  border-radius: 16px; padding: 8px 20px;
}
.rp-card.rp-scroll { overflow-x: auto; }
.rp-empty { padding: 48px 0; text-align: center; font-size: 13px; color: var(--gray); }

.rp-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.rp-tbl th {
  text-align: left; font-weight: 500; color: var(--gray); font-size: 12px;
  padding: 12px 10px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.rp-tbl td {
  padding: 11px 10px; border-bottom: 1px solid #F4F4F8; color: var(--ink);
}
.rp-tbl tbody tr:hover { background: #FAFAFC; }
.rp-tbl .c-rank { width: 64px; text-align: center; }
.rp-tbl .c-name { min-width: 96px; white-space: nowrap; }
.rp-tbl .c-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rp-tbl .c-bar { width: 38%; min-width: 160px; }
.rp-tbl .c-mon { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 名次徽标：前三名朱红，其余灰 */
.rp-rank {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 8px;
  font-size: 12px; color: var(--gray); background: var(--bg);
}
.rp-rank.top { background: var(--primary); color: #fff; font-weight: 600; }

/* 占比条形图（纯 CSS，无图表库） */
.rp-bar-i {
  display: block; height: 14px; border-radius: 4px 7px 7px 4px;
  background: var(--primary); opacity: .82; min-width: 2px;
  transition: width .3s;
}

/* 年报矩阵：有数据的格子加粗，合计行整行加重 */
.rp-tbl td.c-mon.has { font-weight: 600; }
.rp-tbl tr.rp-total td {
  border-top: 1px solid var(--line); border-bottom: none;
  background: #FAFAFC; font-weight: 500;
}

/* ---------------- 打印 / 存 PDF：只印报表区 ---------------- */
/* 打印专用标题：屏幕隐藏 */
.rp-print-title { display: none; }
@media print {
  .sidebar, .page-head, .no-print, .fs-toast, .fs-mask, .fs-lightbox,
  .fs-dialog, .burger, .backdrop { display: none !important; }
  .rp-print-title { display: block; margin: 4px 0 14px; }
  .rp-print-title h2 { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
  .rp-print-title span { font-size: 12px; color: #666; }
  .main { padding: 0 !important; }
  body { background: #fff !important; }
  .rp-card { border: none; padding: 0; margin-top: 12px; }
  .rp-tbl tbody tr:hover { background: none; }
  .rp-bar-i { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .rp-rank.top { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* 视频名输入框：比播放量轻一档，左对齐 */
.pb-title {
  width: 100%; height: 30px;
  border: 1px solid var(--line); border-radius: 10px; background: #fff;
  font-size: 13px; color: var(--ink); padding: 0 12px;
}
.pb-title:focus { border-color: var(--primary); }
.pb-title::placeholder { color: #C0C3D5; }

/* ---------------- 密码门 ---------------- */
.gate-mask { position: fixed; inset: 0; background: var(--bg); display: flex; align-items: center; justify-content: center; z-index: 300; }
.gate-card { width: 320px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 34px 28px 28px; text-align: center; box-shadow: 0 8px 30px rgba(20,21,34,.06); }
.gate-title { font-size: 20px; font-weight: 700; color: var(--ink); }
.gate-sub { font-size: 13px; color: var(--gray); margin: 6px 0 22px; }
.gate-in { width: 100%; height: 42px; border: 1px solid var(--line); border-radius: 10px; padding: 0 14px; font-size: 14px; }
.gate-in:focus { border-color: var(--primary); }
.gate-btn { width: 100%; height: 42px; margin-top: 12px; border-radius: 10px; background: var(--primary); color: #fff; font-size: 14px; font-weight: 600; }
.gate-btn:disabled { opacity: .6; }
.gate-err { margin-top: 12px; font-size: 12px; color: #E24B4A; }