/* ==========================================================
   平台总后台 · 视觉皮肤层（仅 platform.html 引入）
   原则：不动共享 app.css 与业务 JS，只做观感升级 ——
   层次（阴影/描边）、降噪（表格内按钮软色化）、细节（滚动条/聚焦/数字对齐）
   ========================================================== */

/* ---------- 全局底色与滚动条 ---------- */
.app-pc body,
body.app-pc {
  background: linear-gradient(180deg, #f7f9fc 0%, #f3f5f9 320px, #f3f5f9 100%);
  background-attachment: fixed;
}
.app-pc ::-webkit-scrollbar { width: 9px; height: 9px; }
.app-pc ::-webkit-scrollbar-thumb { background: #cdd5e0; border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
.app-pc ::-webkit-scrollbar-thumb:hover { background-color: #b6c1d0; }
.app-pc ::-webkit-scrollbar-track { background: transparent; }

/* 品牌识别：侧栏 logo / 顶栏头像统一为品牌蓝紫渐变（原为内联紫粉渐变） */
.app-pc .logo-mark,
.app-pc .user-chip .avatar {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 60%, #a855f7 100%) !important;
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.35);
}

/* ---------- 侧栏 ---------- */
.app-pc .sidebar { border-right-color: #eceff5; }
.app-pc .sidebar .logo { padding: 18px 18px 15px; }
.app-pc .nav { padding: 10px 12px; }
.app-pc .nav-group {
  font-size: 11px; color: #9aa4b5; padding: 16px 10px 7px; font-weight: 700;
  letter-spacing: 0.12em;
}
.app-pc .nav-item {
  position: relative; padding: 9px 12px; border-radius: 9px; margin-bottom: 2px;
  color: #5c6575; transition: background 0.15s, color 0.15s;
}
.app-pc .nav-item:hover { background: #f1f4f9; color: var(--text); }
.app-pc .nav-item.active {
  background: linear-gradient(90deg, #eef2ff 0%, #f5f3ff 100%);
  color: #4338ca; font-weight: 650;
}
/* 激活项左侧圆头短标 */
.app-pc .nav-item.active::before {
  content: ''; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
  width: 4px; height: 18px; border-radius: 0 4px 4px 0; background: linear-gradient(180deg, #6366f1, #8b5cf6);
}
.app-pc .nav-item .ico { color: inherit; }
.app-pc .sidebar-foot { border-top-color: #eceff5; padding: 12px 14px; }
.app-pc .sidebar-foot a { color: var(--text-2); font-weight: 500; }
.app-pc .sidebar-foot a:hover { color: var(--brand); }

/* ---------- 顶栏 ---------- */
.app-pc .topbar {
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid #e8ecf2;
  height: 60px;
}
.app-pc .topbar h2 { font-size: 15.5px; font-weight: 700; letter-spacing: -0.01em; }
.app-pc .topbar h2 .sub { color: #9aa4b5; font-weight: 400; margin-left: 10px; }
.app-pc .user-chip { background: #f3f5f9; border: 1px solid #e8ecf2; }

/* ---------- 内容区 ---------- */
.app-pc .content { padding: 22px 24px 48px; max-width: 1480px; width: 100%; margin: 0 auto; }

/* ---------- 卡片 ---------- */
.app-pc .card {
  border: 1px solid #e9edf3;
  border-radius: var(--r-lg);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03), 0 2px 8px rgba(16, 24, 40, 0.04);
}
.app-pc .card-head { padding: 16px 20px 12px; }
.app-pc .card-head h3 { font-size: 15px; }
.app-pc .card-body { padding: 18px 20px; }

/* ---------- 统计卡 ---------- */
.app-pc .stat {
  border: 1px solid #e9edf3; border-top: none; border-radius: var(--r-md);
  padding: 15px 16px 13px; position: relative; overflow: hidden;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
}
/* 顶部彩条改为渐变短标，弱化生硬分割 */
.app-pc .stat::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: #cbd5e1; opacity: 0.85; /* 未标注色相的统计卡回落灰色短标 */
}
.app-pc .stat.b-blue::before   { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
.app-pc .stat.b-green::before  { background: linear-gradient(90deg, #10b981, #34d399); }
.app-pc .stat.b-purple::before { background: linear-gradient(90deg, #7c3aed, #a78bfa); }
.app-pc .stat.b-orange::before { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.app-pc .stat.b-red::before    { background: linear-gradient(90deg, #ef4444, #f87171); }
.app-pc .stat.b-cyan::before   { background: linear-gradient(90deg, #0891b2, #22d3ee); }
.app-pc .stat .label { font-weight: 500; }
.app-pc .stat .value {
  font-size: 26px; font-weight: 750; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; margin-top: 6px;
}
.app-pc .stat .foot { margin-top: 5px; }

/* ---------- 表格 ---------- */
.app-pc table.tbl { font-size: 13px; }
.app-pc table.tbl th {
  background: #f8fafc; color: #6b7484; font-size: 12px; font-weight: 650;
  letter-spacing: 0.02em; padding: 11px 16px; border-bottom: 1px solid #e9edf3;
}
.app-pc table.tbl td { padding: 13px 16px; border-bottom: 1px solid #f1f4f8; }
.app-pc table.tbl tbody tr { transition: background 0.12s; }
.app-pc table.tbl tbody tr:hover { background: #f7faff; }
.app-pc table.tbl td:first-child { font-weight: 500; color: var(--text); }

/* 表格内操作按钮降噪：实心色块 → 同色系浅底描边，hover 加深 */
.app-pc table.tbl .btn {
  padding: 4px 12px; font-size: 12px; border-radius: 7px; font-weight: 550;
  border: 1px solid #dde3ec; background: #fff; color: #5c6575;
  box-shadow: none; transition: all 0.14s;
}
.app-pc table.tbl .btn:hover { border-color: #c6cfdc; background: #f6f8fb; color: var(--text); }
.app-pc table.tbl .btn-primary {
  background: #eef4ff; border-color: #c9dcfd; color: #1d4ed8;
}
.app-pc table.tbl .btn-primary:hover { background: #dfeafe; border-color: #a8c8fb; }
.app-pc table.tbl .btn-green { background: #e9fbf1; border-color: #b8ecd0; color: #047d3f; }
.app-pc table.tbl .btn-green:hover { background: #d9f6e7; border-color: #93dfb8; }
.app-pc table.tbl .btn-danger { background: #fef1f0; border-color: #fbcfc9; color: #bb2420; }
.app-pc table.tbl .btn-danger:hover { background: #fde5e3; border-color: #f5aca4; }

/* ---------- 按钮 ---------- */
.app-pc .btn { border-radius: var(--r-sm); font-weight: 550; transition: all 0.15s; }
.app-pc .btn-primary {
  background: linear-gradient(180deg, #3b82f6, #2563eb);
  border-color: #2563eb; box-shadow: 0 1px 2px rgba(37, 99, 235, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.app-pc .btn-primary:hover { background: linear-gradient(180deg, #4287f7, #2b66e8); border-color: #2b66e8; transform: translateY(-1px); box-shadow: 0 3px 8px rgba(37, 99, 235, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.18); }
.app-pc .btn-primary:active { transform: translateY(0); }
.app-pc .btn-green {
  background: linear-gradient(180deg, #12c96a, #07b95d); border-color: #07b95d;
  box-shadow: 0 1px 2px rgba(7, 193, 96, 0.28);
}
.app-pc .btn-danger { box-shadow: 0 1px 2px rgba(239, 68, 68, 0.25); }
.app-pc .btn-sm { border-radius: 8px; }

/* ---------- 输入控件 ---------- */
.app-pc .input, .app-pc .select, .app-pc .textarea { border-color: #e2e7ef; border-radius: var(--r-sm); }
.app-pc .input:hover, .app-pc .select:hover, .app-pc .textarea:hover { border-color: #ccd5e2; }
.app-pc .select { cursor: pointer; }

/* ---------- 标签 ---------- */
.app-pc .tag { font-weight: 600; border: 1px solid transparent; }
.app-pc .tag-blue   { border-color: #d3e3fd; }
.app-pc .tag-green  { border-color: #c4ecd7; }
.app-pc .tag-orange { border-color: #fbe3b8; }
.app-pc .tag-red    { border-color: #f9cdc9; }
.app-pc .tag-gray   { border-color: #e6e9ef; }
.app-pc .tag-purple { border-color: #e2d9fc; }
.app-pc .tag-cyan   { border-color: #c7ecf3; }

/* ---------- 分页 ---------- */
.app-pc .btn.btn-sm.round, .app-pc [class*="pager"] .btn, .app-pc [class*="pagebar"] .btn { border-radius: 8px; }

/* ---------- 弹层 ---------- */
.app-pc .modal-mask, .app-pc [class*="mask"] { backdrop-filter: blur(2px); }

/* ---------- 选中态文字 ---------- */
.app-pc ::selection { background: rgba(99, 102, 241, 0.18); }

/* ---------- 论坛「新建文章 / 视频」弹窗分区 ---------- */
.app-pc .fp-sec {
  border: 1px solid var(--gray-100);
  border-radius: 12px;
  padding: 16px 18px 18px;
  margin-top: 14px;
  background: linear-gradient(180deg, #fbfcff, #ffffff);
}
.app-pc .fp-sec:first-child { margin-top: 0; }
.app-pc .fp-sec-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.app-pc .fp-sec-no {
  width: 20px; height: 20px; border-radius: 6px; flex: 0 0 20px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  box-shadow: 0 2px 6px rgba(99, 102, 241, .35);
}
.app-pc .fp-sec-title { font-size: 13.5px; font-weight: 650; color: var(--text-1); }
.app-pc .fp-sec-tip {
  font-size: 11px; color: var(--text-3);
  background: var(--gray-100); border-radius: 999px; padding: 2px 9px;
}
.app-pc .fp-tip {
  display: flex; gap: 6px; align-items: flex-start;
  background: #f6f7fe; border-left: 3px solid #c7cbfa;
  border-radius: 6px; padding: 7px 10px; margin-top: 8px; line-height: 1.6;
}

/* 富文本工具栏升级 */
.app-pc .rte-toolbar {
  position: sticky; top: 58px; z-index: 2;
  display: flex; align-items: center; flex-wrap: wrap; gap: 3px;
  background: #f7f8fc; border: 1px solid var(--gray-100); border-bottom: none;
  border-radius: 10px 10px 0 0; padding: 7px 9px;
}
/* 吸底按钮栏必须压过吸顶工具栏（z2）：弹窗滚到底时二者相遇，否则工具栏盖住「保存/取消」 */
.app-pc .modal-foot { z-index: 3; }
.app-pc .rte-btn {
  height: 28px; min-width: 30px; padding: 0 8px; border-radius: 7px;
  font-size: 12.5px; background: #fff; border: 1px solid var(--gray-100);
  color: var(--text-1); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s, color .15s, transform .1s;
}
.app-pc .rte-btn:hover { background: #eef0ff; border-color: #c7cbfa; color: #5457e8; }
.app-pc .rte-btn:active { transform: scale(.95); }
.app-pc .rte-btn.on { background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; border-color: transparent; }
.app-pc .rte-sep { width: 1px; height: 16px; background: var(--gray-100); margin: 0 5px; }
.app-pc .rte-hint {
  margin-left: auto; font-size: 11px; color: var(--text-3);
  min-width: 0; flex: 0 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.app-pc .rte-body {
  border-radius: 0 0 10px 10px; min-height: 220px; line-height: 1.75;
  background: #fff; font-size: 13.5px;
}
.app-pc .rte-body:focus { border-color: #b4b8f8; box-shadow: 0 0 0 3px rgba(99, 102, 241, .1); }
.app-pc .modal .field label { font-weight: 550; }

/* 富文本工具栏 SVG 图标 */
.app-pc .rte-btn svg { width: 15px; height: 15px; flex: 0 0 15px; }
.app-pc .rte-btn label, .app-pc label.rte-btn { gap: 4px; }
.app-pc label.rte-btn { cursor: pointer; }