/* ===== 睿和瑞后台共享样式（上传页 admin.html / 各管理页共用） ===== */
:root {
  /* ===== 圆角设计令牌（对齐 WorkBuddy 规范） ===== */
  --wb-radius-none: 0;        /* 直角：全屏态 / 贴边容器 */
  --wb-radius-xs: 2px;        /* 微元素：分隔线、指示条 */
  --wb-radius-sm: 4px;        /* 小标签、徽标 */
  --wb-radius-md: 6px;        /* 小控件：图标按钮、次级按钮 */
  --wb-radius-lg: 8px;        /* 基准：输入框、按钮、缩略图 */
  --wb-radius-xl: 12px;       /* 卡片内块、媒体容器 */
  --wb-radius-2xl: 16px;      /* 卡片容器、弹窗 */
  --wb-radius-3xl: 20px;      /* 大浮层、详情面板 */
  --wb-radius-4xl: 24px;      /* 特大容器 */
  --wb-radius-full: 9999px;   /* 正圆 / 胶囊（替代 50%） */
  --ease-wb: cubic-bezier(0.38, 0, 0.24, 1);   /* WorkBuddy 招牌缓动 */

  --pink: #d60078;
  --ink: #16161a;
  --muted: #666;
  --border: rgba(128,128,128,0.4);
  --bg: #f4f4f7;
  --card: rgba(255,255,255,0.55);
  --field: rgba(255,255,255,0.75);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: linear-gradient(135deg, #f7f7fb 0%, #eceaf1 100%);
  color: var(--ink);
  padding: 28px 18px 60px;
  min-height: 100vh;
}
.wrap { max-width: 1024px; margin: 0 auto; }

/* ===== 顶部 Logo 区 ===== */
.brand { display: flex; align-items: center; gap: 13px; padding: 6px 2px 18px; }
.brand svg { display: block; filter: drop-shadow(0 2px 6px rgba(214,0,120,.25)); }
.brand-name { font-size: 20px; font-weight: 800; letter-spacing: .06em; color: var(--pink); }
.brand-sub { font-size: 12px; color: var(--muted); margin-top: 2px; letter-spacing: .02em; }

h1 { font-size: 18px; margin: 0 0 4px; }
.sub { color: var(--muted); font-size: 13px; margin-bottom: 22px; }
a.back { color: var(--pink); font-size: 12px; text-decoration: none; font-weight: 600; }
.back:hover { text-decoration: underline; }

/* ===== 四个模块互通按钮 ===== */
.modnav { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 10px 0 18px; }
.modnav a {
  flex: 1; min-width: 120px; text-align: center; padding: 10px 12px;
  border-radius: var(--wb-radius-lg);
  /* 统一按钮特效：亮浅灰底 → 悬浮粉红底白字（与 .btn 一致） */
  background: #e9e9ef; color: var(--ink); font-size: 13px; font-weight: 600;
  text-decoration: none; border: 1px solid var(--border);
  transition: all .15s;
}
.modnav a:hover { background: var(--pink); color: #fff; border-color: var(--pink); box-shadow: 0 6px 18px rgba(214,0,120,.18); transform: translateY(-1px); border-radius: var(--wb-radius-xl); }
.modnav a.active { background: var(--pink); color: #fff; border-color: var(--pink); box-shadow: 0 6px 18px rgba(214,0,120,.18); }
/* 退出：底色仍走统一规范，仅字色保留危险语义 */
.modnav a.lo { flex: 0 0 auto; min-width: auto; margin-left: auto; background: #e9e9ef; color: #a3001f; border: 1px solid var(--border); }
.modnav a.lo:hover { background: var(--pink); color: #fff; border-color: var(--pink); box-shadow: 0 6px 18px rgba(214,0,120,.18); transform: translateY(-1px); }

/* ===== 磨砂卡片 ===== */
.card {
  background: var(--card);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border); border-radius: var(--wb-radius-2xl);
  padding: 18px 18px 20px; margin-bottom: 16px;
}
.card h2 { font-size: 14px; margin: 0 0 14px; color: #333; letter-spacing: .04em; }
.card h2 .num { color: var(--pink); font-weight: 800; margin-right: 4px; }
.card h2.h2-bar {
  background: var(--pink); color: #fff; font-weight: 700;
  padding: 9px 12px; border-radius: var(--wb-radius-lg);
  letter-spacing: .04em; margin: 0 0 14px;
  display: flex; align-items: center;
}
.card h2.h2-bar .num { color: #fff; font-weight: 800; margin-right: 4px; }
/* 标题条右侧操作按钮（如「清空回收站」） */
.card h2.h2-bar .h2-act {
  margin-left: auto; padding: 5px 11px; font-size: 12px; font-weight: 600;
  border: 1px solid rgba(255,255,255,.55); border-radius: var(--wb-radius-md);
  background: rgba(255,255,255,.16); color: #fff; cursor: pointer;
  transition: background .18s var(--ease-wb), border-radius .28s var(--ease-wb);
}
.card h2.h2-bar .h2-act:hover { background: rgba(255,255,255,.32); border-radius: var(--wb-radius-lg); }
.card h2.h2-bar .h2-act:disabled { opacity: .5; cursor: wait; }

/* ===== 数量计数徽标（上传页实时校验：图片 15–25 / 视频 ≤5 / 正文 600–900） =====
   放在标题栏内、按钮左侧；默认灰、达标绿、偏少橙、超限红。 */
.card h2.h2-bar .h2-cnt {
  margin-left: auto; font-size: 11.5px; font-weight: 500;
  padding: 3px 9px; border-radius: var(--wb-radius-full);
  background: rgba(255,255,255,.16); color: rgba(255,255,255,.88);
  border: 1px solid rgba(255,255,255,.38); white-space: nowrap;
}
.card h2.h2-bar .h2-cnt + .h2-act { margin-left: 8px; }
.card h2.h2-bar .h2-cnt b { font-weight: 700; }
.card h2.h2-bar .h2-cnt.ok   { background: rgba(255,255,255,.92); color: #0a7a4a; border-color: rgba(255,255,255,.92); }
.card h2.h2-bar .h2-cnt.warn { background: #fff3d6; color: #8a5a00; border-color: #fff3d6; }
.card h2.h2-bar .h2-cnt.bad  { background: #ffe3e8; color: #b00030; border-color: #ffe3e8; }
/* 正文计数不在标题栏内（白底），单独一套配色 */
.h2-cnt { font-size: 11.5px; font-weight: 500; margin: 5px 0 0; color: var(--muted); }
.h2-cnt b { font-weight: 700; color: var(--ink); }
.h2-cnt.ok b { color: #0a7a4a; }
.h2-cnt.warn b { color: #8a5a00; }
.h2-cnt.bad b { color: #b00030; }

/* ===== 表单控件 ===== */
label { display: block; font-size: 12px; color: var(--muted); margin: 12px 0 5px; }
input, textarea, select { width: 100%; background: var(--field); border: 1px solid var(--border); color: var(--ink); border-radius: var(--wb-radius-lg); padding: 10px 11px; font-size: 14px; font-family: inherit; transition: border-radius .28s var(--ease-wb), border-color .18s, box-shadow .18s; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--pink); box-shadow: 0 0 0 3px rgba(214,0,120,.12); border-radius: var(--wb-radius-xl); }
textarea { resize: vertical; min-height: 84px; line-height: 1.6; }
.row { display: flex; gap: 12px; }
.row > div { flex: 1; }

/* ===== 媒体素材双栏 ===== */
.media-split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 6px; align-items: start; }
.media-col {
  border: 1px solid var(--border); border-radius: var(--wb-radius-xl);
  padding: 14px; background: rgba(255,255,255,.45); min-height: 220px;
}
.media-head { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 12px; border-radius: var(--wb-radius-lg); font-size: 13px; font-weight: 700; margin-bottom: 12px; transition: background .18s var(--ease-wb), color .18s var(--ease-wb), border-color .18s var(--ease-wb), box-shadow .18s var(--ease-wb), transform .18s var(--ease-wb); cursor: pointer; }

.media-head.active { background: var(--pink); color: #fff; border: 1px solid var(--pink); }
.media-head.inactive { background: #e9e9ef; color: var(--ink); border: 1px solid var(--border); }
.media-head.inactive:hover { background: var(--pink); color: #fff; border-color: var(--pink); box-shadow: 0 6px 18px rgba(214,0,120,.18); transform: translateY(-1px); }
.media-head .dot { width: 8px; height: 8px; border-radius: var(--wb-radius-full); background: currentColor; opacity: .35; }
.media-head.active .dot { opacity: 1; }
.media-col .drop { margin-bottom: 8px; }
.media-col .hint { margin-top: 6px; }

/* ===== 拖拽区 ===== */
.drop {
  border: 1.5px dashed var(--border); border-radius: var(--wb-radius-xl);
  padding: 18px; text-align: center; color: #777; font-size: 13px;
  /* 统一按钮特效：亮浅灰底 → 悬浮粉红底白字 */
  cursor: pointer; transition: .15s; background: #e9e9ef;
}
.drop:hover { background: var(--pink); border-color: var(--pink); color: #fff; box-shadow: 0 8px 22px rgba(214,0,120,.18); transform: translateY(-2px); border-radius: var(--wb-radius-2xl); }
/* 拖入时（.hot）同 hover，但用实线让「可松手」更明确 */
.drop.hot { background: var(--pink); border-style: solid; border-color: var(--pink); color: #fff; box-shadow: 0 8px 22px rgba(214,0,120,.18); transform: translateY(-2px); }

.thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.thumbs img, .thumbs video {
  width: 74px; height: 74px; object-fit: cover;
  border-radius: var(--wb-radius-lg); border: 1px solid var(--border);
}
.hint { font-size: 11px; color: #8a8a8a; margin-top: 6px; }

/* ===== 粘贴 / 本机路径导入条 ===== */
.paste-bar { display: flex; gap: 8px; align-items: stretch; margin-top: 14px; }
.pb-input {
  flex: 1 1 auto; min-width: 0;
  border: 1px solid var(--border); border-radius: var(--wb-radius-lg);
  background: rgba(255,255,255,.7); color: var(--ink);
  padding: 10px 12px; font-size: 13px; font-family: inherit; outline: none;
  transition: .15s;
}
.pb-input:focus { border-color: var(--ink); background: #fff; }
.pb-input::placeholder { color: #aaa; }
.paste-bar .btn { flex: 0 0 auto; }
.paste-hint { font-size: 11px; color: #8a8a8a; margin-top: 6px; line-height: 1.7; }
.paste-hint.bad { color: #a3001f; }

/* ===== 发布按钮行（预览 + 发布并排） ===== */
.pub-row { display: flex; gap: 10px; align-items: stretch; }
.pub-row .btn.ghost { flex: 0 0 auto; padding: 16px 22px; font-size: 15px; }
.pub-row .btn.publish { flex: 1 1 auto; margin-top: 20px; }
@media (max-width: 560px) {
  .pub-row { flex-direction: column-reverse; }
  .pub-row .btn.ghost { padding: 13px; font-size: 14px; }

  /* 窄屏：媒体区「图片 | 视频」双栏塌成单列，避免横向溢出 */
  .media-split { grid-template-columns: 1fr; }
}

/* ===== 排序缩略图 ===== */
.thumb {
  position: relative; width: 74px; height: 74px;
  border-radius: var(--wb-radius-lg); overflow: hidden;
  border: 1px solid var(--border); background: #fff;
}
.thumb img, .thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb.dragging { opacity: .4; }
.thumb .thumb-cnt {
  position: absolute; top: 2px; left: 2px; background: rgba(0,0,0,.6);
  color: #fff; font-size: 10px; padding: 1px 5px;
  border-radius: var(--wb-radius-lg); z-index: 2;
}
.thumb .thumb-x {
  position: absolute; top: 2px; right: 2px; width: 18px; height: 18px;
  border: none; border-radius: var(--wb-radius-full);
  background: rgba(180,0,40,.85); color: #fff; font-size: 12px;
  line-height: 1; cursor: pointer; z-index: 2;
}
.thumb .thumb-post {
  position: absolute; bottom: 2px; right: 2px; border: none;
  border-radius: var(--wb-radius-md); background: rgba(214,0,120,.9);
  color: #fff; font-size: 10px; padding: 2px 5px; cursor: pointer; z-index: 2;
}
.thumb .thumb-ud { position: absolute; bottom: 2px; left: 2px; display: flex; flex-direction: column; z-index: 2; }
.thumb .thumb-ud button {
  width: 16px; height: 14px; border: none; border-radius: var(--wb-radius-xs);
  background: rgba(0,0,0,.55); color: #fff; font-size: 9px; line-height: 1;
  cursor: pointer; padding: 0;
}
.thumb .thumb-tag {
  position: absolute; bottom: 2px; right: 2px; background: rgba(0,0,0,.62);
  color: #fff; font-size: 9px; padding: 1px 4px;
  border-radius: var(--wb-radius-sm); z-index: 3;
}
.thumb.uploading { opacity: .5; }
.chip.uploading { opacity: .5; }
.chip {
  display: flex; align-items: center; gap: 6px; padding: 8px 11px;
  border: 1px solid var(--border); border-radius: var(--wb-radius-lg);
  font-size: 12px; color: #333; background: #fff; max-width: 220px;
}
.chip .nm {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
}
.chip .nm svg { width: 14px; height: 14px; flex: 0 0 auto; }

.linkrow { display: flex; gap: 8px; margin-bottom: 8px; }
.linkrow input { flex: 1; }
.linkrow button {
  width: 38px; background: #e9e9ef; border: 1px solid var(--border);
  color: var(--ink); border-radius: var(--wb-radius-lg);
  cursor: pointer; font-size: 16px;
  transition: background .2s var(--ease-wb), color .2s var(--ease-wb), border-color .2s var(--ease-wb),
              box-shadow .2s var(--ease-wb), transform .2s var(--ease-wb);
}
.linkrow button:hover { background: var(--pink); color: #fff; border-color: var(--pink); box-shadow: 0 4px 12px rgba(214,0,120,.22); transform: translateY(-1px); }

/* ===== 按钮 ===== */
.btn {
  display: block; width: 100%; margin-top: 8px; padding: 14px;
  border: 1px solid var(--border); border-radius: var(--wb-radius-xl);
  background: #e9e9ef; color: var(--ink); font-size: 15px; font-weight: 700;
  cursor: pointer;
  transition: background .18s var(--ease-wb), color .18s var(--ease-wb), border-color .18s var(--ease-wb),
              box-shadow .18s var(--ease-wb), transform .18s var(--ease-wb);
}
.btn:hover { background: var(--pink); color: #fff; border-color: var(--pink); box-shadow: 0 6px 18px rgba(214,0,120,.20); transform: translateY(-1px); border-radius: var(--wb-radius-xl); }
/* .btn 自带 display:block（作者样式），优先级高于浏览器默认的 [hidden]{display:none}，
   若不显式覆盖，按钮上的 hidden 属性会完全失效。 */
.btn[hidden] { display: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: wait; }
.btn.ghost { background: #e9e9ef; font-weight: 600; }
.btn.ghost:hover { background: var(--pink); color: #fff; box-shadow: 0 6px 18px rgba(214,0,120,.20); transform: translateY(-1px); }
.btn.ok { background: rgba(214,0,120,.12); color: var(--pink); border-color: rgba(214,0,120,.4); }
.btn.ok:hover { background: var(--pink); color: #fff; box-shadow: 0 6px 18px rgba(214,0,120,.20); transform: translateY(-1px); }
.btn.danger { background: rgba(180,0,40,.08); color: #a3001f; border-color: rgba(180,0,40,.3); }
.btn.danger:hover { background: #a3001f; color: #fff; border-color: #a3001f; box-shadow: 0 6px 18px rgba(180,0,40,.22); transform: translateY(-1px); }
.btn.sm {
  display: inline-flex; align-items: center; justify-content: center;
  width: auto; padding: 6px 12px; font-size: 12px; margin-top: 0;
}

/* ===== 发布按钮：字号 +2（15→17px），文字呼吸动效 ===== */
.btn.publish { margin-top: 20px; padding: 16px; font-size: 17px; letter-spacing: .04em; }
.btn.publish > span { display: inline-block; animation: rr-breathe 2.8s var(--ease-wb) infinite; }
.btn.publish:disabled > span { animation: none; }
@keyframes rr-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) { .btn.publish > span { animation: none; } }
.publish-tip { margin-top: 8px; text-align: center; font-size: 11.5px; color: #999; letter-spacing: .02em; }

/* ===== 上传进度条（rr-upload.js 动态注入 .upl-prog） ===== */
.upl-prog { margin-top: 8px; display: flex; align-items: center; gap: 9px; }
.upl-prog[hidden] { display: none; }
.upl-bar {
  flex: 1; height: 6px; min-width: 60px; overflow: hidden;
  background: rgba(128,128,128,.18); border-radius: var(--wb-radius-full);
}
.upl-bar > i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--pink), #ff5aa8);
  border-radius: var(--wb-radius-full);
  transition: width .22s var(--ease-wb);
}
.upl-txt { flex: 0 0 auto; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.upl-prog.done .upl-bar > i { background: #2f9e63; }
.upl-prog.done .upl-txt { color: #2f9e63; }
.upl-prog.err .upl-bar > i { background: #a3001f; }
.upl-prog.err .upl-txt { color: #a3001f; }

/* ===== 消息条 ===== */
.msg { margin-top: 14px; font-size: 13px; padding: 11px 13px; border-radius: var(--wb-radius-lg); display: none; }
.msg.ok { display: block; background: rgba(214,0,120,.10); color: #a3005c; border: 1px solid rgba(214,0,120,.35); }
.msg.err { display: block; background: rgba(180,0,40,.08); color: #a3001f; border: 1px solid rgba(180,0,40,.3); }

/* ===== 案例前端显示管理 ===== */
.disp-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 8px; }
.disp-col {
  border: 1px solid var(--border); border-radius: var(--wb-radius-xl);
  padding: 10px; background: rgba(255,255,255,.45);
}
.disp-col-hd {
  display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px;
  padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.disp-col-hd .dn { font-size: 13px; font-weight: 800; color: #222; }
.disp-col-hd .dst { font-size: 11px; color: var(--pink); font-weight: 600; letter-spacing: .02em; }
.disp-list { display: flex; flex-direction: column; gap: 8px; max-height: 340px; overflow: auto; }
.disp-item {
  display: flex; align-items: flex-start; gap: 9px; padding: 8px;
  border: 1px solid var(--border); border-radius: var(--wb-radius-lg);
  /* 统一按钮特效：亮浅灰底 → 悬浮粉红底 */
  background: #e9e9ef;
  transition: background .2s var(--ease-wb), border-color .2s var(--ease-wb),
              border-radius .34s var(--ease-wb), box-shadow .2s var(--ease-wb);
}
.disp-item:hover { background: var(--pink); border-color: var(--pink); box-shadow: 0 8px 22px rgba(214,0,120,.18); transform: translateY(-2px); }
.disp-item:hover .disp-meta .dt { color: #fff; }
.disp-item:hover .disp-meta .dd { color: rgba(255,255,255,.8); }
/* 行内链接：常态粉红字，行悬浮时转白字 + 下划线 */
.disp-item:hover .case-link { color: #fff; }
/* 行内开关：粉红底上保持可辨（关=深色槽+白滑块，开=白槽+粉红滑块） */
.disp-item:hover .sw .sw-box { background: rgba(0,0,0,.25); }
.disp-item:hover .sw input:checked + .sw-box { background: #fff; }
.disp-item:hover .sw input:checked + .sw-box::after { background: var(--pink); }
/* 行内小按钮：行已粉红时，内层按钮悬浮转白底粉字，避免同色糊成一片 */
.disp-item:hover .btn.sm:hover { background: #fff; color: var(--pink); border-color: #fff; box-shadow: 0 4px 12px rgba(214,0,120,.18); transform: translateY(-1px); }
.disp-item.off { opacity: .5; }
.disp-meta { flex: 1; min-width: 0; }
.disp-meta .dt { font-size: 12.5px; color: #222; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .2s var(--ease-wb); }
.disp-meta .dd { font-size: 10.5px; color: #999; margin-top: 3px; transition: color .2s var(--ease-wb); }
.disp-empty { font-size: 11px; color: #aaa; padding: 8px 2px; }
.disp-actions { display: flex; gap: 6px; margin-top: 6px; }
/* 竖向分类排列：一个板块一整行（案例上传页用 .disp-grid.vertical） */
.disp-grid.vertical { grid-template-columns: 1fr; }
.disp-grid.vertical .disp-col { padding: 12px 14px; }
.disp-grid.vertical .disp-col-hd { flex-direction: row; align-items: baseline; justify-content: space-between; }
.disp-grid.vertical .disp-list { max-height: none; }
.disp-grid.vertical .disp-item { align-items: center; padding: 10px 12px; }
.case-link { color: var(--pink); font-size: 12px; text-decoration: none; font-weight: 600; transition: color .2s var(--ease-wb); }
.case-link:hover { text-decoration: underline; }
.case-link.danger { color: #a3001f; }

/* ===== 展示开关 ===== */
.sw { position: relative; width: 38px; height: 21px; flex: 0 0 auto; cursor: pointer; margin-top: 1px; }
.sw input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.sw .sw-box { display: block; width: 38px; height: 21px; border-radius: var(--wb-radius-full); background: #cfcfd6; transition: .2s; }
.sw .sw-box::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px;
  border-radius: var(--wb-radius-full); background: #fff; transition: .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.sw input:checked + .sw-box { background: var(--pink); }
.sw input:checked + .sw-box::after { transform: translateX(17px); }

@media (max-width: 900px){ .disp-grid { grid-template-columns: repeat(2, 1fr); } }
/* 手机窄屏必须放在 900px 规则之后才生效：5 列 / 2 列都会把页面撑宽，统一塌成 1 列 */
@media (max-width: 560px){ .disp-grid, .disp-grid.vertical { grid-template-columns: 1fr; } }

/* ===== 图标：SVG 统一由 RR.icon 注入，尺寸交给样式归一 ===== */
.card h2.h2-bar .num svg { width: 18px; height: 18px; }
.btn svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; }
.hint svg { width: 12px; height: 12px; vertical-align: -1px; }
a.back svg { width: 14px; height: 14px; vertical-align: -2px; margin-left: 2px; }

/* ===== 圆角动效：交互升档（WorkBuddy 缓动） ===== */
.btn, .modnav a, .card, .chip, .drop, .disp-item, .thumb, .media-col {
  transition: border-radius .34s var(--ease-wb), background .2s var(--ease-wb), color .2s var(--ease-wb),
              border-color .2s var(--ease-wb), transform .2s var(--ease-wb), box-shadow .2s var(--ease-wb);
}


.card:hover { border-radius: var(--wb-radius-3xl); }
.chip:hover { border-radius: var(--wb-radius-xl); }

.disp-item:hover { border-radius: var(--wb-radius-xl); }
.thumb:hover { border-radius: var(--wb-radius-xl); }
.media-col:hover { border-radius: var(--wb-radius-2xl); }