/* ============================================================
   style.css - 资源共享平台样式
   主题：清爽淡蓝 + 白色，全程无紫色
   图标：Font Awesome 线性图标（fa-regular）
   包含丰富动画：入场淡入上移、卡片hover上浮、按钮缩放过渡、
   图标浮动、列表依次滑入、输入框聚焦光晕、弹窗淡入、消息弹出
   ============================================================ */

/* ---------- 主题变量（现代仪表盘配色：藏青 + 天蓝 + 青绿，无紫色） ---------- */
:root {
  --primary: #3b82f6;          /* 主蓝 */
  --primary-hover: #2563eb;
  --primary-dark: #1d4ed8;
  --primary-light: #e8f0fe;    /* 极浅蓝 */
  --primary-bg: #f4f8ff;
  --accent: #0fb5c9;           /* 青绿点缀 */
  --accent-2: #f59e0b;         /* 琥珀点缀 */
  --text: #16233a;             /* 主文字 */
  --text-2: #40506b;
  --text-blue: #123a6b;        /* 深蓝标题 */
  --muted: #74849c;
  --border: #e2eaf6;
  --card-bg: rgba(255, 255, 255, .82);
  --card-solid: #ffffff;
  --bg: #eef4fd;
  --sidebar-bg: linear-gradient(185deg, #0f2547 0%, #123363 48%, #0d2a52 100%);
  --shadow: 0 6px 20px rgba(23, 62, 120, .08);
  --shadow-lg: 0 20px 46px rgba(23, 62, 120, .18);
  --danger: #ef4444;
  --success: #10b981;
  --warning: #f59e0b;
  --radius: 18px;
  --radius-sm: 12px;
  --sidebar-w: 258px;
}

/* 浅色主题（默认） */
body.theme-light { --bg: #eef4fd; --card-bg: rgba(255, 255, 255, .82); }

/* 淡蓝主题（浅蓝渐变底） */
body.theme-blue {
  --bg: linear-gradient(155deg, #dceafc 0%, #eef6ff 42%, #f7fbff 100%);
  --card-bg: rgba(255, 255, 255, .78);
}

/* ---------- 字体大小 ---------- */
body { font-size: 15px; }
body.font-small { font-size: 13.5px; }
body.font-large { font-size: 17px; }
body.family-default { font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif; }
body.family-serif   { font-family: "SimSun", "宋体", "Songti SC", serif; }
body.family-kai     { font-family: "KaiTi", "楷体", serif; }
body.family-hei     { font-family: "SimHei", "黑体", "Heiti SC", sans-serif; }
body.family-fangsong { font-family: "FangSong", "仿宋", "STFangsong", serif; }
body.family-yuan    { font-family: "Yuanti SC", "圆体-简", "PingFang SC", "Microsoft YaHei", sans-serif; }
body.font-xlarge { font-size: 19px; }

/* ---------- 更多主题（用户可选） ---------- */
body.theme-green { --bg: #e9f5ec; --card-bg: rgba(255,255,255,.82); }
body.theme-warm  { --bg: linear-gradient(160deg, #fff3e6 0%, #fff9f2 60%, #fffdf9 100%); --card-bg: rgba(255,255,255,.82); }
/* 手机 · 黑色 */
body.theme-night {
  --bg: #0f172a;
  --card-bg: rgba(30,41,59,.86);
  --card-solid: #1e293b;
  --text: #e2e8f0;
  --text-2: #cbd5e1;
  --text-blue: #bfdbfe;
  --muted: #94a3b8;
  --border: #334155;
  --primary-light: #1e3a5f;
  --primary-bg: #0f172a;
  --shadow: 0 6px 20px rgba(0,0,0,.4);
  --shadow-lg: 0 20px 46px rgba(0,0,0,.5);
}
body.theme-night .card,
body.theme-night .portal-btn { border-color: rgba(148,163,184,.18); }
body.theme-night .input { background: #0b1220; color: var(--text); }
body.theme-night .topbar { background: rgba(15,23,42,.82); border-bottom-color: #334155; }
body.theme-night .mobile-topbar { background: rgba(15,23,42,.86); border-bottom-color: #334155; }
body.theme-night .crumbs a, body.theme-night .crumbs .current { color: var(--text-2); }
body.theme-night .file-picker { background: rgba(255,255,255,.04); }
body.theme-night .auth-wrap { background: rgba(15,23,42,.7); }

/* ---------- 基础重置 ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  background-attachment: fixed;
  color: var(--text);
  line-height: 1.7;
  min-height: 100vh;
}
a { color: var(--primary-dark); text-decoration: none; transition: color .2s; }
a:hover { color: var(--primary-hover); }
img { max-width: 100%; }
hr { border: none; border-top: 1px solid var(--border); margin: 18px 0; }
.muted { color: var(--muted); font-size: .88em; }

/* ---------- 页面整体入场：淡入 + 上移 ---------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.topbar { animation: fadeUp .55s ease both; }

/* ============================================================
   布局骨架：左侧固定侧边栏 + 顶栏面包屑 + 玻璃拟态内容区
   ============================================================ */
/* 背景极光装饰（纯装饰，不参与交互） */
.aurora { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.aurora span {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5;
  animation: auroraFloat 18s ease-in-out infinite alternate;
}
.aurora span:nth-child(1) { width: 460px; height: 460px; top: -140px; left: 12%; background: rgba(59,130,246,.30); }
.aurora span:nth-child(2) { width: 380px; height: 380px; top: 22%; right: -120px; background: rgba(15,181,201,.24); animation-delay: -6s; }
.aurora span:nth-child(3) { width: 420px; height: 420px; bottom: -160px; left: 34%; background: rgba(245,158,11,.16); animation-delay: -11s; }
@keyframes auroraFloat {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(30px, -26px, 0) scale(1.12); }
}

/* ---------- 左侧固定侧边栏 ---------- */
.sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-w);
  background: var(--sidebar-bg);
  color: #d7e5fa; z-index: 120;
  display: flex; flex-direction: column;
  border-right: 1px solid rgba(255,255,255,.06);
  box-shadow: 8px 0 34px rgba(11, 34, 66, .18);
  /* 侧边栏是导航区域：禁止拖蓝选中，避免出现文本光标（I 型指针） */
  user-select: none; -webkit-user-select: none; -ms-user-select: none;
}
.side-brand {
  display: flex; align-items: center; gap: 12px;
  padding: 20px 20px 16px; color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.side-brand:hover { color: #fff; }
.brand-mark {
  width: 42px; height: 42px; border-radius: 13px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.15em; color: #fff;
  background: linear-gradient(135deg, #4f8ef7, #0fb5c9);
  box-shadow: 0 8px 20px rgba(20, 90, 190, .45);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.brand-text b { font-size: 1.02em; letter-spacing: .5px; }
.brand-text small { color: rgba(215,229,250,.62); font-size: .72em; }

.side-scroll { flex: 1; overflow-y: auto; padding: 16px 12px; }
.side-scroll::-webkit-scrollbar { width: 6px; }
.side-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 999px; }
/* ---------- 侧边栏分组下拉菜单（默认收起） ---------- */
.side-group { margin-bottom: 6px; }
.side-group-head {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 12px; border-radius: 11px; cursor: pointer;
  font-size: .78em; font-weight: 700; letter-spacing: .6px;
  color: rgba(203,217,240,.72);
  list-style: none;                       /* 去掉默认三角标记 */
  transition: background .22s, color .22s;
}
.side-group-head::-webkit-details-marker { display: none; }
.side-group-head:hover { background: rgba(255,255,255,.07); color: #fff; }
.side-group-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-group-count {
  font-size: .82em; font-weight: 700; color: rgba(203,217,240,.62);
  background: rgba(255,255,255,.10); border-radius: 999px; padding: 1px 8px; min-width: 22px; text-align: center;
}
.side-group-head .caret { font-size: .82em; color: rgba(203,217,240,.6); transition: transform .28s ease; }
.side-group[open] > .side-group-head { color: #fff; }
.side-group[open] > .side-group-head .caret { transform: rotate(180deg); color: #8fc0ff; }
.side-group-body { padding: 4px 2px 8px 2px; animation: groupOpen .26s ease both; }
@keyframes groupOpen {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* 当前分组里的高亮项：左侧竖条贴住分组面板 */
.side-group-body .side-link.active::before { left: -2px; }

/* ---------- 侧边栏二级子分组（如「小游戏」/「对局管理」） ---------- */
.side-subgroup { margin: 2px 0 5px; }
.side-subgroup-head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px 8px 16px; border-radius: 10px; cursor: pointer;
  font-size: .74em; font-weight: 700; letter-spacing: .5px;
  color: rgba(203,217,240,.62); list-style: none;
  transition: background .22s, color .22s;
}
.side-subgroup-head::-webkit-details-marker { display: none; }
.side-subgroup-head:hover { background: rgba(255,255,255,.06); color: #fff; }
.side-subgroup-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-subgroup-head .caret { font-size: .8em; color: rgba(203,217,240,.55); transition: transform .28s ease; }
.side-subgroup[open] > .side-subgroup-head { color: #fff; }
.side-subgroup[open] > .side-subgroup-head .caret { transform: rotate(180deg); color: #8fc0ff; }
.side-subgroup-body { padding: 2px 0 2px 10px; animation: groupOpen .26s ease both; }
.side-subgroup .side-link { padding: 9px 12px; font-size: .9em; }

.side-link {
  position: relative; display: flex; align-items: center; gap: 11px;
  padding: 11px 13px; border-radius: 12px; margin-bottom: 3px;
  color: #cbd9f0; font-size: .93em; font-weight: 500;
  cursor: pointer;                 /* 明确指示可点击 */
  transition: background .22s, color .22s, transform .22s;
}
.side-link span, .side-link i { pointer-events: none; }
.side-link i { width: 20px; text-align: center; font-size: 1.02em; color: rgba(199,216,242,.8); transition: color .22s; }
.side-link:hover { background: rgba(255,255,255,.08); color: #fff; transform: translateX(3px); }
.side-link:hover i { color: #8fc0ff; }
.side-link.active {
  background: linear-gradient(100deg, rgba(79,142,247,.34), rgba(15,181,201,.20));
  color: #fff; box-shadow: inset 0 0 0 1px rgba(143,192,255,.28);
}
.side-link.active i { color: #ffffff; }
.side-link.active::before {
  content: ''; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
  width: 4px; height: 22px; border-radius: 0 6px 6px 0; background: #4f8ef7;
}
.side-link .dot {
  margin-left: auto; font-style: normal; font-size: .72em; font-weight: 700;
  background: var(--danger); color: #fff; border-radius: 999px; padding: 0 7px; min-width: 19px; text-align: center;
}

.side-foot { padding: 14px; border-top: 1px solid rgba(255,255,255,.08); }
.side-foot .btn { margin-bottom: 8px; }
.side-foot .btn-ghost { color: #cbd9f0; }
.side-foot .btn-ghost:hover { background: rgba(255,255,255,.10); color: #fff; }
.side-user {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px; padding: 9px 11px;
}
.side-user img { width: 38px; height: 38px; border-radius: 11px; object-fit: cover; }
.side-user-info { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.side-user-info b { color: #fff; font-size: .92em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-user-info .role-tag { align-self: flex-start; margin-top: 2px; }
.side-logout { color: rgba(215,229,250,.7); font-size: 1.05em; padding: 6px; border-radius: 9px; transition: all .2s; }
.side-logout:hover { color: #fff; background: rgba(239,68,68,.32); }
.sidebar-mask {
  position: fixed; inset: 0; background: rgba(10, 26, 48, .5);
  opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 110;
}

/* 以下组件只服务手机端布局，默认（平板/电脑）隐藏，由手机媒体查询打开 */
.mobile-topbar { display: none; }
.side-close { display: none; }
.side-bottom { display: none; }
.side-bottom-title {
  font-size: .7em; letter-spacing: 1.6px; text-transform: uppercase;
  color: rgba(198,216,242,.45); font-weight: 700; padding: 10px 12px 6px;
}
.side-bottom-link {
  display: flex; align-items: center; gap: 11px; padding: 10px 13px;
  border-radius: 11px; color: #cbd9f0; font-size: .92em; margin-bottom: 2px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.side-bottom-link:first-of-type { border-top: none; }
.side-bottom-link i { width: 20px; text-align: center; }
.side-bottom-link.active { background: rgba(79,142,247,.28); color: #fff; }

/* ---------- 顶栏（玻璃拟态） ---------- */
.topbar {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid rgba(226, 234, 246, .9);
  box-shadow: 0 4px 18px rgba(23, 62, 120, .05);
}
.topbar-inner {
  display: flex; align-items: center; gap: 16px;
  padding: 11px 26px; min-height: 64px;
}
.crumbs { display: flex; align-items: center; gap: 8px; font-size: .9em; min-width: 0; flex-wrap: wrap; }
.crumbs .sep { font-size: .72em; color: #b9c6da; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--primary-dark); }
.crumbs .current { color: var(--text-blue); font-weight: 700; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }

/* 移动端汉堡按钮（桌面隐藏） */
.nav-toggle {
  display: none;
  background: var(--primary-light); border: none; border-radius: 11px;
  color: var(--primary-dark); cursor: pointer;
  padding: 8px 12px; align-items: center; justify-content: center;
  transition: all .2s;
}
.nav-toggle:hover { background: var(--primary); color: #fff; }

.icon-btn { position: relative; color: var(--text-2); font-size: 1.1em; padding: 8px; border-radius: 11px; transition: all .2s; }
.icon-btn:hover { color: var(--primary-dark); background: var(--primary-light); }
.badge {
  position: absolute; top: 0; right: 0;
  background: var(--danger); color: #fff; font-size: .66em;
  min-width: 16px; height: 16px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 4px;
}
.user-chip {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 13px 5px 5px; border-radius: 999px;
  background: rgba(255,255,255,.92); border: 1px solid var(--border);
  color: var(--text); font-size: .9em; font-weight: 600;
  transition: box-shadow .25s, transform .25s;
}
.user-chip:hover { color: var(--text-blue); box-shadow: var(--shadow); transform: translateY(-1px); }
.user-chip img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.user-chip .logout { color: var(--muted); }
.user-chip .logout:hover { color: var(--danger); }

/* 角色标签 */
.role-tag {
  font-size: .68em; padding: 2px 9px; border-radius: 999px;
  background: var(--primary-light); color: var(--primary-dark); font-weight: 700;
}
.role-vip { background: #fef3c7; color: #a16207; }
.role-moderator { background: #d7f7e7; color: #12784f; }
.role-admin { background: #fee2e2; color: #b91c1c; }

/* ---------- 主容器 ---------- */
.app-shell .container {
  margin-left: var(--sidebar-w);
  max-width: none;
  padding: 24px 26px 46px;
  position: relative; z-index: 1;
  animation: fadeUp .6s ease both;
}
body.is-auth { display: flex; align-items: center; justify-content: center; padding: 26px 16px; }
body.is-auth .container { width: 100%; max-width: 1120px; margin: 0; padding: 0; position: relative; z-index: 1; animation: fadeUp .6s ease both; }
body.is-auth .aurora span:nth-child(1) { left: 4%; }
body.is-auth .aurora span:nth-child(3) { left: 52%; }
/* 登录/注册是独立整页，隐藏应用侧边栏与遮罩，避免遮挡表单 */
body.is-auth .sidebar,
body.is-auth .sidebar-mask { display: none; }

/* ---------- 卡片（玻璃拟态） ---------- */
.card {
  background: var(--card-bg);
  backdrop-filter: blur(14px) saturate(1.25);
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: var(--radius); padding: 22px; margin-bottom: 20px;
  box-shadow: var(--shadow);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(59, 130, 246, .35); }
.card h3 { margin-bottom: 12px; color: var(--text-blue); font-size: 1.05em; }
.card h3 i { color: var(--primary); margin-right: 6px; }
/* 密集列表卡片不做上浮，避免阅读时晃动 */
.card.table-wrap:hover, .chat-box:hover, .rank-card:hover, .form-card:hover { transform: none; }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 20px; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; font-size: .92em; font-weight: 600; font-family: inherit;
  transition: all .25s ease; background: var(--primary-light); color: var(--primary-dark);
  white-space: nowrap;
}
/* 按钮 hover：变色 + 缩放过渡 */
.btn:hover { transform: scale(1.06); filter: brightness(1.03); }
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-hover); color: #fff; }
.btn-outline { background: transparent; border-color: var(--primary); color: var(--primary-dark); }
.btn-outline:hover { background: var(--primary-light); color: var(--primary-dark); }
.btn-ghost { background: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--primary-light); color: var(--primary-dark); }
.btn-ghost.liked, .btn-ghost.liked i { color: #ef4444; }
.btn-danger { background: #fef2f2; color: #dc2626; }
.btn-danger:hover { background: #fee2e2; color: #b91c1c; }
.btn-sm { padding: 7px 14px; font-size: .84em; }
.btn-xs { padding: 4px 11px; font-size: .78em; }
.btn-block { width: 100%; justify-content: center; }

/* ---------- 表单输入 ---------- */
.input {
  width: 100%; padding: 11px 14px; border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); font-size: .95em; font-family: inherit;
  color: var(--text); background: #fff; outline: none;
  transition: border-color .25s, box-shadow .25s;
}
/* 输入框聚焦光晕动画 */
.input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(56, 189, 248, .18), 0 0 18px rgba(56, 189, 248, .25);
  animation: inputGlow 1.4s ease infinite alternate;
}
@keyframes inputGlow {
  from { box-shadow: 0 0 0 4px rgba(56, 189, 248, .16); }
  to   { box-shadow: 0 0 0 6px rgba(56, 189, 248, .26); }
}
.input-xs { padding: 5px 9px; font-size: .8em; width: auto; }
.field { margin-bottom: 14px; }
.field label { display: block; margin-bottom: 6px; color: var(--text-2); font-weight: 600; font-size: .9em; }
.form textarea { resize: vertical; }
.form-card { max-width: 720px; }
.inline-form { display: inline-flex; align-items: center; gap: 8px; }
.inline-search { max-width: 400px; margin-bottom: 16px; }
.check { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-size: .9em; }
.range { width: 100%; accent-color: var(--primary); }

/* ============================================================
   首页顶部横幅：大色块 + 数据条 + 悬浮搜索
   ============================================================ */
.hero {
  position: relative; overflow: hidden;
  border-radius: 22px; padding: 38px 34px 30px; margin-bottom: 22px;
  background: linear-gradient(135deg, #0f2547 0%, #16407c 52%, #0e5f7a 100%);
  box-shadow: 0 26px 56px rgba(15, 42, 84, .28);
  color: #eaf3ff;
}
.hero::before {
  content: ''; position: absolute; width: 420px; height: 420px; right: -130px; top: -170px;
  background: radial-gradient(circle, rgba(79,142,247,.55), transparent 65%); border-radius: 50%;
}
.hero::after {
  content: ''; position: absolute; width: 340px; height: 340px; left: -120px; bottom: -190px;
  background: radial-gradient(circle, rgba(15,181,201,.45), transparent 65%); border-radius: 50%;
}
.hero > * { position: relative; z-index: 1; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.2);
  padding: 5px 14px; border-radius: 999px; font-size: .8em; color: #cfe4ff; margin-bottom: 14px;
}
.hero h1 { font-size: 2.08em; color: #fff; line-height: 1.35; margin-bottom: 8px; letter-spacing: .5px; }
.hero h1 em { font-style: normal; color: #7fd8ff; }
.hero p { color: rgba(224, 237, 255, .82); margin-bottom: 22px; font-size: .96em; }
.hero-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.hero-tags a {
  font-size: .8em; color: #d3e6ff; background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.16); padding: 4px 12px; border-radius: 999px; transition: all .22s;
}
.hero-tags a:hover { background: rgba(255,255,255,.22); color: #fff; transform: translateY(-2px); }
.search-box { display: flex; gap: 10px; }
.search-box .input { flex: 1; }

/* 平台数据条 */
.stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 24px; }
.strip-item {
  display: flex; align-items: center; gap: 13px; padding: 15px 18px;
  background: var(--card-bg); backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.75); border-radius: 16px; box-shadow: var(--shadow);
  transition: transform .26s, box-shadow .26s;
}
.strip-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.strip-item i {
  width: 42px; height: 42px; border-radius: 13px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.1em;
  background: var(--primary-light); color: var(--primary-dark);
}
.strip-item:nth-child(2) i { background: #dcf5f8; color: #0d7f8f; }
.strip-item:nth-child(3) i { background: #fdf0d9; color: #b06a08; }
.strip-item:nth-child(4) i { background: #e2f7ea; color: #12784f; }
.strip-item b { display: block; font-size: 1.32em; color: var(--text-blue); line-height: 1.25; }
.strip-item span { color: var(--muted); font-size: .82em; }

/* 页面标题条 */
.page-head { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.page-head .page-title { margin-bottom: 0; }
.page-head .page-sub { color: var(--muted); font-size: .88em; margin-left: auto; }

/* 图标缓慢浮动微动效 */
.float-ico { display: inline-block; color: #7fd8ff; animation: floatY 3.2s ease-in-out infinite; }
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

/* ---------- 区块标题 ---------- */
.section { margin-bottom: 26px; }
.section-title { color: var(--text-blue); margin-bottom: 12px; font-size: 1.2em; }
.section-title i { color: var(--primary); margin-right: 6px; }

/* 公告列表 */
.announce-list { display: flex; flex-direction: column; gap: 10px; }
.announce-item {
  display: flex; align-items: center; gap: 12px; padding: 13px 16px;
  cursor: pointer; margin-bottom: 0;
}
.announce-item i { color: var(--primary); font-size: 1.2em; }
.announce-title { flex: 1; font-weight: 600; color: var(--text); }

/* ---------- 主布局 ---------- */
.main-grid { display: grid; grid-template-columns: 1fr 320px; gap: 22px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 900px) { .main-grid, .grid-2 { grid-template-columns: 1fr; } }

/* ---------- 选项卡 ---------- */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.tab {
  padding: 9px 18px; border-radius: 999px; background: #fff;
  border: 1px solid var(--border); color: var(--text-2); font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px; transition: all .25s;
}
.tab:hover { border-color: var(--primary); color: var(--primary-dark); transform: translateY(-2px); }
.tab.active { background: var(--primary); color: #fff; border-color: var(--primary); }

.filter-hint { margin-bottom: 14px; color: var(--text-2); font-size: .92em; }

/* ---------- 内容卡片网格 ---------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.content-card { margin-bottom: 0; display: flex; flex-direction: column; }
.card-icon { font-size: 2em; color: var(--primary); margin-bottom: 8px; }
.content-card h3 { font-size: 1em; margin-bottom: 6px; }
.content-card h3 a { color: var(--text); }
.content-card h3 a:hover { color: var(--primary-dark); }
.card-img { width: 100%; height: 150px; object-fit: cover; border-radius: var(--radius-sm); margin: 8px 0; }
.card-video { width: 100%; height: 140px; object-fit: cover; border-radius: var(--radius-sm); margin: 8px 0; background: #000; }
/* ===== 短视频：快手风格竖版封面流（手机双列，平板/电脑多列小卡） ===== */
.card-grid.video-feed { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.video-card { padding: 0 !important; overflow: hidden; border-radius: 14px; position: relative; background: #000; }
.video-card:hover { transform: translateY(-3px); }
.video-cover { position: relative; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; background: #000; }
.video-cover-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.video-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 46px; height: 46px; border-radius: 50%; background: rgba(0, 0, 0, .42); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; pointer-events: none; }
.video-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 10px 10px; background: linear-gradient(to top, rgba(0, 0, 0, .78), rgba(0, 0, 0, 0)); color: #fff; pointer-events: none; }
.video-title { font-size: .92em; font-weight: 600; line-height: 1.3; margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.video-meta { display: flex; align-items: center; gap: 12px; font-size: .8em; opacity: .95; }
.video-meta a { color: #fff; pointer-events: auto; text-decoration: none; max-width: 62%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.video-meta span { white-space: nowrap; }
.video-card .flag-badge { position: absolute; top: 8px; left: 8px; z-index: 2; }
/* ===== 短视频详情页：快手「精选」全屏竖滑播放器 ===== */
.vfeed { position: fixed; inset: 0; z-index: 9990; background: #000; overflow-y: scroll; scroll-snap-type: y mandatory; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.vslide { position: relative; height: 100vh; height: 100dvh; scroll-snap-align: start; scroll-snap-stop: always; display: flex; align-items: center; justify-content: center; background: #000; }
.vslide-video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.vslide-playbtn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .4); color: #fff; font-size: 26px; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity .2s; pointer-events: none; }
.vslide:not(.playing) .vslide-playbtn { opacity: 1; pointer-events: auto; }
.vslide-back { position: absolute; top: 14px; left: 14px; z-index: 4; color: #fff; background: rgba(0, 0, 0, .35); padding: 6px 12px; border-radius: 999px; text-decoration: none; font-size: .85em; }
.vslide-side { position: absolute; right: 12px; bottom: 120px; display: flex; flex-direction: column; align-items: center; gap: 18px; color: #fff; z-index: 3; }
.vslide-side-btn { text-decoration: none; }
.vslide-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; border: 2px solid #fff; }
.vslide-side-item { display: flex; flex-direction: column; align-items: center; font-size: .8em; gap: 2px; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.vslide-side-item i { font-size: 1.5em; }
.vslide-bottom { position: absolute; left: 14px; right: 76px; bottom: 24px; color: #fff; z-index: 3; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
.vslide-author { font-weight: 700; margin-bottom: 6px; }
.vslide-title { font-size: .95em; margin-bottom: 4px; }
.vslide-desc { font-size: .82em; opacity: .9; }
@media (max-width: 767px) { .vslide-side { bottom: 100px; right: 8px; } .vslide-playbtn { width: 56px; height: 56px; } }
@media (max-width: 767px) {
  .card-grid.video-feed { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}
/* 平板/电脑：内容区铺满整宽，预览卡缩小为多列小卡（参考快手平板首页） */
@media (min-width: 768px) {
  .card-grid.video-feed { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .video-play { width: 38px; height: 38px; font-size: 15px; }
  .video-info { padding: 22px 9px 9px; }
  .video-title { font-size: .86em; }
  .video-meta { gap: 8px; font-size: .74em; }
}
@media (min-width: 1100px) {
  .card-grid.video-feed { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1400px) {
  .card-grid.video-feed { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
}
@media (min-width: 1800px) {
  .card-grid.video-feed { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.card-foot {
  margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border);
  display: flex; gap: 12px; flex-wrap: wrap; font-size: .82em; color: var(--text-2);
}
.card-foot a { color: var(--text-2); }
.card-foot i { margin-right: 3px; color: var(--primary); }

/* 标签 */
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tag {
  font-size: .76em; padding: 3px 10px; border-radius: 999px;
  background: var(--primary-light); color: var(--primary-dark); transition: all .22s;
}
.tag:hover { background: var(--primary); color: #fff; transform: translateY(-2px); }
.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }

.empty { text-align: center; color: var(--muted); padding: 40px 0; grid-column: 1 / -1; }
.empty i { font-size: 2.4em; display: block; margin-bottom: 10px; color: var(--border); }

/* ---------- 排行榜 ---------- */
.rank-card { padding: 16px; }
.rank-title { color: var(--text-blue); margin-bottom: 10px; }
.rank-item {
  display: flex; align-items: center; gap: 8px; padding: 7px 4px;
  border-radius: 8px; transition: background .2s; color: var(--text);
}
.rank-item:hover { background: var(--primary-light); }
.rank-no {
  width: 22px; height: 22px; border-radius: 6px; background: var(--primary-light);
  color: var(--primary-dark); font-size: .78em; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.rank-no.top { background: var(--primary); color: #fff; }
.rank-text { flex: 1; font-size: .88em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.avatar-sm { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }

/* ---------- 列表条目依次滑入动画 ---------- */
@keyframes slideIn {
  from { opacity: 0; transform: translateY(16px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.slide-item { animation: slideIn .55s cubic-bezier(.22,.7,.25,1) both; }
/* 尊重系统「减弱动效」设置 */
@media (prefers-reduced-motion: reduce) {
  .slide-item, .topbar, .aurora span, .side-group-body, .side-subgroup-body { animation: none !important; }
}

/* ---------- 详情页 ---------- */
.detail { max-width: 820px; margin: 0 auto 30px; }
.detail-head h2 { color: var(--text-blue); margin-bottom: 10px; }
.detail-meta { display: flex; align-items: center; gap: 10px; color: var(--text-2); font-size: .9em; margin-bottom: 10px; }
.detail-desc { color: var(--text-2); margin: 14px 0; white-space: pre-wrap; }
.detail-img { max-width: 100%; max-height: 420px; border-radius: var(--radius-sm); margin: 10px 0; }
.detail-actions { display: flex; gap: 10px; margin: 16px 0; }
.product-price { font-size: 1.6em; font-weight: 800; color: #e11d48; margin: 8px 0; }
.price { color: #e11d48; font-weight: 700; }
.perm-badge { font-size: .78em; background: #fef9c3; color: #a16207; padding: 2px 9px; border-radius: 999px; }
.file-box {
  display: flex; align-items: center; gap: 14px; background: var(--primary-light);
  padding: 16px; border-radius: var(--radius-sm); margin: 14px 0; flex-wrap: wrap;
}
.file-box i { font-size: 2em; color: var(--primary); }
.video-player { width: 100%; border-radius: var(--radius-sm); background: #000; margin: 10px 0; }

/* 评论 */
.comment-form { display: flex; gap: 10px; margin: 12px 0; align-items: flex-start; }
.comment-form textarea { flex: 1; }
.comment-list { margin-top: 14px; }
.comment { display: flex; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--border); align-items: flex-start; }
.comment-body { flex: 1; }
.comment-body p { color: var(--text-2); margin-top: 2px; }

/* ============================================================
   首页「功能板块」入口（紧凑按钮式，一两行）
   ============================================================ */
.portal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-bottom: 22px; }
.portal-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: var(--radius-sm);
  background: var(--card-bg); border: 1px solid rgba(255,255,255,.7);
  box-shadow: var(--shadow); text-decoration: none;
  transition: transform .22s, box-shadow .22s, border-color .22s;
}
.portal-btn:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: rgba(59,130,246,.35); }
.portal-btn .portal-ico {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .95em; color: #fff;
  background: linear-gradient(135deg, #4f8ef7, #0fb5c9);
}
.portal-btn:nth-child(2) .portal-ico { background: linear-gradient(135deg, #0fb5c9, #14b8a6); }
.portal-btn:nth-child(3) .portal-ico { background: linear-gradient(135deg, #f59e0b, #f97316); }
.portal-btn:nth-child(4) .portal-ico { background: linear-gradient(135deg, #2563eb, #4f8ef7); }
.portal-btn:nth-child(5) .portal-ico { background: linear-gradient(135deg, #0ea5e9, #0284c7); }
.portal-name { flex: 1; font-weight: 700; color: var(--text-blue); }
.portal-count { font-size: .8em; color: var(--muted); background: var(--primary-light); border-radius: 999px; padding: 1px 9px; }
.portal-arrow { color: var(--muted); font-size: .82em; }
.portal-btn:hover .portal-arrow { color: var(--primary); }
/* 排行榜三栏并排 */
.rank-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }
.rank-grid .rank-card { margin-bottom: 0; }

/* 首页热门标签卡片 */
.tags-card { margin-bottom: 22px; }
.home-tags { gap: 8px; }
.home-tags .tag { font-size: .82em; padding: 5px 14px; }
/* 作业图片预览 */
.detail-img-link { display: inline-block; }

/* ============================================================
   板块页：工具条 / 筛选 chip / 分页 / 发布卡片
   ============================================================ */
.section-desc { margin: -8px 0 16px; }
.toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.toolbar-search {
  display: flex; align-items: center; gap: 9px; flex: 1; min-width: 240px;
  background: rgba(255,255,255,.9); border: 1px solid var(--border);
  border-radius: 999px; padding: 6px 8px 6px 16px;
  transition: border-color .25s, box-shadow .25s;
}
.toolbar-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(59,130,246,.12); }
.toolbar-search > i { color: var(--muted); }
.toolbar-search input {
  flex: 1; border: none; outline: none; background: transparent;
  font-family: inherit; font-size: .92em; color: var(--text); min-width: 80px;
}
.toolbar-sort { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 15px; border-radius: 999px; font-size: .85em; font-weight: 600;
  background: rgba(255,255,255,.86); border: 1px solid var(--border); color: var(--text-2);
  transition: all .22s;
}
.chip:hover { border-color: var(--primary); color: var(--primary-dark); transform: translateY(-1px); }
.chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.chip.disabled { opacity: .45; pointer-events: none; }
.pager { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 24px 0 8px; }

/* 发布卡片：默认折叠，点击展开 */
.publish-card { padding: 0; overflow: hidden; }
.publish-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 16px 22px; background: transparent; border: none; cursor: pointer;
  font-family: inherit; font-size: .98em; font-weight: 700; color: var(--text-blue);
}
.publish-toggle:hover { background: rgba(59,130,246,.06); }
.publish-toggle .caret { transition: transform .28s; color: var(--primary); }
.publish-card.open .publish-toggle .caret { transform: rotate(180deg); }
.publish-body { display: none; padding: 0 22px 20px; border-top: 1px solid var(--border); }
.publish-card.open .publish-body { display: block; animation: fadeUp .32s ease both; }
/* 用 <details> 实现：即使 JS 未加载，点击标题也能展开/收起 */
details.publish-card .publish-body { display: none; padding: 0 22px 20px; border-top: 1px solid var(--border); }
details.publish-card[open] .publish-body { display: block; animation: fadeUp .32s ease both; }
details.publish-card .publish-toggle .caret { transition: transform .28s; }
details.publish-card[open] .publish-toggle .caret { transform: rotate(180deg); }
details.publish-card > summary { list-style: none; }
details.publish-card > summary::-webkit-details-marker { display: none; }
details.publish-card > summary::marker { content: ''; }
.publish-hint { display: flex; align-items: center; gap: 12px; color: var(--text-2); font-size: .92em; }
.publish-hint > i { color: var(--primary); font-size: 1.2em; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 720px) { .row-2 { grid-template-columns: 1fr; } }

/* 全站搜索结果 */
.search-panel { padding: 18px 20px; }
.search-list { display: flex; flex-direction: column; gap: 12px; }
.search-item {
  display: flex; align-items: center; gap: 14px; margin-bottom: 0;
  padding: 14px 18px; color: var(--text);
}
.search-ico {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary-light); color: var(--primary-dark); font-size: 1.05em;
}
.search-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.search-main b { color: var(--text-blue); }
.search-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }

/* 详情页返回行 */
.detail-back { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }

/* 用户主页操作区 */
.profile-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }

/* ============================================================
   登录 / 注册：左侧品牌故事 + 右侧玻璃表单（两栏）
   ============================================================ */
.auth-wrap {
  display: grid; grid-template-columns: 1.05fr .95fr;
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(18px) saturate(1.35);
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 26px; overflow: hidden;
  box-shadow: 0 30px 70px rgba(18, 56, 110, .20);
}
.auth-visual {
  position: relative; padding: 46px 40px; color: #eaf3ff;
  background: linear-gradient(165deg, #0f2547 0%, #143a72 55%, #0d2c58 100%);
  display: flex; flex-direction: column; justify-content: center; overflow: hidden;
}
.auth-visual::after {
  content: ''; position: absolute; width: 320px; height: 320px; right: -120px; bottom: -140px;
  background: radial-gradient(circle, rgba(15,181,201,.55), transparent 68%);
}
.auth-visual::before {
  content: ''; position: absolute; width: 260px; height: 260px; left: -110px; top: -80px;
  background: radial-gradient(circle, rgba(79,142,247,.55), transparent 68%);
}
.auth-visual > * { position: relative; z-index: 1; }
.auth-visual .av-mark {
  width: 54px; height: 54px; border-radius: 16px; display: inline-flex;
  align-items: center; justify-content: center; font-size: 1.4em; color: #fff;
  background: linear-gradient(135deg, #4f8ef7, #0fb5c9);
  box-shadow: 0 12px 28px rgba(20, 90, 190, .5); margin-bottom: 20px;
}
.auth-visual h1 { font-size: 1.72em; line-height: 1.35; margin-bottom: 10px; color: #fff; }
.auth-visual p { color: rgba(224, 237, 255, .78); font-size: .94em; max-width: 380px; }
.auth-points { list-style: none; margin-top: 26px; display: grid; gap: 12px; }
.auth-points li { display: flex; align-items: center; gap: 11px; font-size: .92em; color: rgba(228, 240, 255, .92); }
.auth-points i {
  width: 30px; height: 30px; border-radius: 10px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.12); color: #9fd8ff;
}
.auth-visual .av-foot { margin-top: 30px; font-size: .78em; color: rgba(198,216,242,.55); }

.auth-card { padding: 42px 40px; background: rgba(255,255,255,.55); }
.auth-logo {
  width: 54px; height: 54px; border-radius: 16px; margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4em; color: #fff;
  background: linear-gradient(135deg, #4f8ef7, #0fb5c9);
  box-shadow: 0 12px 26px rgba(59, 130, 246, .34);
  animation: floatY 3.2s ease-in-out infinite;
}
.auth-card h2 { text-align: center; color: var(--text-blue); font-size: 1.34em; }
.auth-card > p { text-align: center; margin-bottom: 20px; }
.auth-alt { text-align: center; margin-top: 16px; }
.auth-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 20px 0 14px; color: var(--muted); font-size: .8em;
}
.auth-divider::before, .auth-divider::after {
  content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--border), transparent);
}

/* 邮箱验证码一行：输入框 + 获取按钮 */
.code-row { display: flex; gap: 10px; }
.code-row .input { flex: 1; }
.code-btn {
  flex-shrink: 0; min-width: 122px; justify-content: center;
  border: 1.5px solid var(--primary); background: rgba(255,255,255,.9); color: var(--primary-dark);
}
.code-btn:disabled { opacity: .6; cursor: not-allowed; border-color: var(--border); color: var(--muted); }
.field-hint { font-size: .78em; color: var(--muted); margin-top: 5px; }

/* 社交登录按钮组 */
.social-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; }
.social-btn {
  display: flex; align-items: center; gap: 9px; padding: 10px 13px;
  border-radius: 13px; background: rgba(255,255,255,.92);
  border: 1px solid var(--border); color: var(--text-2);
  font-size: .88em; font-weight: 600; transition: all .24s;
}
.social-btn i { font-size: 1.15em; }
.social-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); color: var(--text-blue); border-color: rgba(59,130,246,.4); }
.social-btn.disabled { opacity: .55; }
.social-hint { font-size: .78em; color: var(--muted); margin-top: 8px; }

/* 已绑定账号列表 */
.bind-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 4px;
  border-bottom: 1px dashed var(--border); flex-wrap: wrap;
}
.bind-row:last-child { border-bottom: none; }
.bind-ico {
  width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary-light); color: var(--primary-dark); font-size: 1.1em;
}
.bind-main { flex: 1; min-width: 140px; display: flex; flex-direction: column; line-height: 1.35; }
.bind-main b { color: var(--text); font-size: .95em; }
.bind-main small { color: var(--muted); }

/* 登录成功后的绑定引导弹窗 */
.bind-modal-head { text-align: center; }
.bind-modal-ico {
  width: 62px; height: 62px; border-radius: 20px; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center; font-size: 1.5em; color: #fff;
  background: linear-gradient(135deg, #4f8ef7, #0fb5c9);
  box-shadow: 0 14px 30px rgba(59, 130, 246, .34);
}
.bind-modal-head h3 { justify-content: center; }
.modal-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.modal-actions .btn { flex: 1; justify-content: center; min-width: 120px; }

/* ---------- 用户主页 ---------- */
.profile-hero { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.profile-avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 4px solid var(--primary-light); }
.profile-info h2 { color: var(--text-blue); }
.profile-bio { color: var(--text-2); margin: 8px 0; }
.profile-stats { display: flex; gap: 18px; color: var(--text-2); font-size: .9em; }
.profile-stats i { color: var(--primary); }
.mini-item { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--border); font-size: .92em; }

/* ---------- 面板内容区（左侧导航已由全局侧边栏承担） ---------- */
.dash-layout { display: block; }

.page-title { color: var(--text-blue); margin-bottom: 18px; font-size: 1.32em; }
.page-title i { color: var(--primary); margin-right: 8px; }

/* 统计卡片 */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 16px; margin-bottom: 22px; }
.stat-card {
  position: relative; overflow: hidden;
  background: var(--card-bg); backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.75); border-radius: var(--radius);
  padding: 20px; text-align: center; box-shadow: var(--shadow);
  transition: transform .28s, box-shadow .28s;
}
.stat-card::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--accent)); opacity: 0; transition: opacity .28s;
}
.stat-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.stat-card:hover::after { opacity: 1; }
.stat-card i { font-size: 1.8em; color: var(--primary); display: block; margin-bottom: 6px; animation: floatY 3s ease-in-out infinite; }
.stat-card b { font-size: 1.7em; color: var(--text-blue); display: block; }
.stat-card span { color: var(--muted); font-size: .85em; }
.quick-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* 管理行 */
.manage-row {
  display: flex; align-items: center; gap: 12px; padding: 11px 6px;
  border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.manage-row:last-child { border-bottom: none; }
.manage-title { flex: 1; color: var(--text); font-weight: 600; min-width: 120px; }
.manage-title a { color: var(--text); }

/* 私信 */
.chat-box { max-width: 720px; }
.chat-list { max-height: 460px; overflow-y: auto; margin-bottom: 14px; }
.chat-msg { margin-bottom: 12px; display: flex; flex-direction: column; align-items: flex-start; }
.chat-msg span {
  background: var(--primary-light); padding: 10px 14px; border-radius: 14px;
  border-bottom-left-radius: 4px; max-width: 78%; color: var(--text);
}
.chat-msg.me { align-items: flex-end; }
.chat-msg.me span { background: var(--primary); color: #fff; border-radius: 14px; border-bottom-right-radius: 4px; }
.chat-msg small { margin-top: 3px; }

/* 关注行 */
.follow-row { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--border); }
.follow-row a { flex: 1; color: var(--text); font-weight: 600; }

/* 工单 */
.ticket-item { border-bottom: 1px solid var(--border); padding: 14px 0; }
.ticket-item:last-child { border-bottom: none; }
.ticket-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.ticket-head b { color: var(--text-blue); }
.ticket-reply { background: var(--primary-light); padding: 8px 12px; border-radius: 8px; margin: 6px 0; font-size: .9em; }
.ticket-reply.admin { background: #f0fdf4; border-left: 3px solid var(--success); }

/* 状态标签 */
.status-tag { font-size: .76em; padding: 2px 9px; border-radius: 999px; font-weight: 600; }
.status-open, .status-pending { background: #fef9c3; color: #a16207; }
.status-replied, .status-paid { background: #dbeafe; color: #1d4ed8; }
.status-closed, .status-completed { background: #dcfce7; color: #15803d; }
.status-shipped { background: var(--primary-light); color: var(--primary-dark); }
.status-cancelled { background: #fecaca; color: #b91c1c; }

/* 日志 */
.log-row { display: flex; gap: 14px; padding: 8px 0; border-bottom: 1px dashed var(--border); font-size: .9em; align-items: center; flex-wrap: wrap; }
.log-row:last-child { border-bottom: none; }
.log-action { background: var(--primary-light); color: var(--primary-dark); padding: 2px 10px; border-radius: 6px; font-weight: 600; font-size: .85em; }

/* 表格 */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .9em; }
.table th { text-align: left; padding: 10px; color: var(--text-blue); border-bottom: 2px solid var(--border); white-space: nowrap; }
.table td { padding: 10px; border-bottom: 1px solid var(--border); }

/* ---------- 两列字段行 ---------- */
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .row-2 { grid-template-columns: 1fr; } }

/* ---------- 自定义文件选择器（替代原生 input[type=file]） ---------- */
.file-picker {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; border: 1px dashed var(--border); border-radius: var(--radius-sm);
  background: rgba(255,255,255,.55); cursor: pointer; transition: border-color .2s, background .2s;
}
.file-picker:hover { border-color: var(--primary); background: var(--primary-light); }
.file-picker-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px; font-weight: 600; font-size: .86em;
  background: var(--primary); color: #fff; box-shadow: 0 6px 14px rgba(59,130,246,.28);
}
.file-picker-name { color: var(--muted); font-size: .88em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-picker-name.has-file { color: var(--text-blue); font-weight: 600; }

/* ---------- 标签编辑器 ---------- */
.tag-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.tag-chips:empty { display: none; }
.tag-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--primary-light); color: var(--primary-dark); border-radius: 999px; padding: 3px 6px 3px 12px; font-size: .82em; font-weight: 600; }
.tag-chip-del { border: none; background: transparent; color: var(--primary-dark); font-size: 1.05em; line-height: 1; cursor: pointer; padding: 0 2px; }
.tag-chip-del:hover { color: var(--danger); }
.tag-editor-row { display: flex; gap: 8px; }
.tag-editor-row .input { flex: 1; }
.check-group { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- 页脚 ---------- */
.site-footer { text-align: center; color: var(--muted); font-size: .82em; padding: 6px 0 26px; line-height: 1.7; }
/* 登录/注册页 body 为居中 flex，页脚固定到底部，避免跑到卡片右侧 */
body.is-auth .site-footer { position: fixed; left: 0; right: 0; bottom: 10px; padding: 0; }

/* ---------- 内容卡片整块可点 ---------- */
.content-card[data-href] { cursor: pointer; }

/* ---------- 头像编辑器 ---------- */
.avatar-editor { display: flex; gap: 26px; flex-wrap: wrap; align-items: flex-start; }
.avatar-preview-box { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.avatar-preview-box img { width: 128px; height: 128px; border-radius: 50%; object-fit: cover; border: 4px solid var(--primary-light); }
.avatar-controls { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 12px; }
.avatar-canvas {
  width: 176px; height: 176px; border-radius: 50%; border: 4px solid var(--primary-light);
  background: #eef4fd; cursor: grab; touch-action: none; align-self: center;
}
.avatar-canvas:active { cursor: grabbing; }

/* ---------- 弹窗（淡入淡出） ---------- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(15, 40, 60, .45);
  display: flex; align-items: center; justify-content: center; z-index: 200;
  opacity: 0; pointer-events: none; transition: opacity .28s ease;
}
.modal-backdrop.show { opacity: 1; pointer-events: auto; }
.modal {
  background: #fff; border-radius: var(--radius); max-width: 560px; width: 92%;
  max-height: 84vh; overflow-y: auto; padding: 26px; position: relative;
  transform: translateY(30px) scale(.96); transition: transform .28s ease;
}
.modal-backdrop.show .modal { transform: translateY(0) scale(1); }
.modal-close {
  position: absolute; top: 12px; right: 12px; background: none; border: none;
  font-size: 1.3em; color: var(--muted); cursor: pointer; transition: transform .2s, color .2s;
}
.modal-close:hover { transform: rotate(90deg); color: var(--danger); }
.modal-body h3 { color: var(--text-blue); margin-bottom: 12px; }

/* ---------- 后台上传指示 + 浮动进度窗 ---------- */
.upload-fab {
  position: fixed; right: 16px; bottom: calc(92px + env(safe-area-inset-bottom));
  z-index: 420; display: none; align-items: center; gap: 8px;
  padding: 10px 14px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--card-bg); backdrop-filter: blur(14px) saturate(1.3);
  color: var(--text-blue); font: inherit; font-size: .85em; font-weight: 600;
  box-shadow: var(--shadow-lg); cursor: pointer; transition: transform .18s, box-shadow .18s;
}
.upload-fab.show { display: inline-flex; }
.upload-fab:hover { transform: translateY(-2px); }
.upload-fab-pct { color: var(--primary-dark); }
.upload-spin {
  width: 14px; height: 14px; flex: 0 0 auto; border-radius: 50%;
  border: 2px solid var(--primary-light); border-top-color: var(--primary);
  animation: uploadSpin .8s linear infinite;
}
@keyframes uploadSpin { to { transform: rotate(360deg); } }

.upload-panel {
  position: fixed; right: 16px; bottom: calc(150px + env(safe-area-inset-bottom));
  z-index: 421; width: 300px; max-width: calc(100vw - 32px);
  background: var(--card-bg); backdrop-filter: blur(16px) saturate(1.35);
  border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px 12px;
  box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(12px) scale(.97);
  pointer-events: none; transition: opacity .2s, transform .2s;
}
.upload-panel.show { opacity: 1; transform: none; pointer-events: auto; }
.upload-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.upload-panel-title { display: inline-flex; align-items: center; gap: 8px; color: var(--text-blue); font-weight: 700; font-size: .95em; }
.upload-panel-min { border: 0; background: none; padding: 2px 4px; color: var(--muted); font: inherit; font-size: .82em; cursor: pointer; }
.upload-panel-min:hover { color: var(--primary); }
.upload-panel-file { margin-bottom: 8px; color: var(--muted); font-size: .82em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-panel-file:empty { display: none; }
.upload-panel-track { height: 10px; border-radius: 999px; background: var(--primary-light); overflow: hidden; }
.upload-panel-fill { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--primary), var(--accent)); transition: width .15s; }
.upload-panel-pct { text-align: right; margin-top: 6px; color: var(--muted); font-size: .82em; }
.upload-panel-tip { margin-top: 6px; color: var(--muted); font-size: .76em; }
.upload-panel-fill.indeterminate { width: 35% !important; animation: aiIndeterminate 1.1s ease-in-out infinite; }

.upload-warn {
  position: fixed; inset: 0; z-index: 600;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 26, 48, .42); opacity: 0; pointer-events: none; transition: opacity .2s;
}
.upload-warn.show { opacity: 1; pointer-events: auto; }
.upload-warn-box { width: 340px; max-width: 86%; background: #fff; border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-lg); }
.upload-warn-title { color: var(--text-blue); font-weight: 700; margin-bottom: 10px; }
.upload-warn-text { margin-bottom: 14px; color: var(--text-2); font-size: .9em; line-height: 1.7; }
.upload-warn-skip { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; color: var(--muted); font-size: .85em; cursor: pointer; }
.upload-warn-skip input { width: 16px; height: 16px; accent-color: var(--primary); }
.upload-warn-actions { display: flex; justify-content: flex-end; gap: 10px; }

/* ---------- 消息提示弹出动画 ---------- */
.toast {
  padding: 12px 18px; border-radius: var(--radius-sm); margin-bottom: 12px;
  background: #d1fae5; color: #065f46; border-left: 4px solid var(--success);
  animation: toastIn .4s cubic-bezier(.2, .9, .3, 1.2) both; font-weight: 500;
}
.toast-error { background: #fee2e2; color: #991b1b; border-left-color: var(--danger); }
.toast-success { background: #d1fae5; color: #065f46; border-left-color: var(--success); }
@keyframes toastIn {
  0% { opacity: 0; transform: translateY(-14px) scale(.92); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.toast-container { position: fixed; top: 80px; right: 20px; z-index: 300; display: flex; flex-direction: column; gap: 10px; }
.toast-container .toast { margin-bottom: 0; box-shadow: var(--shadow-lg); animation: toastIn .4s ease both; }
.toast.hide { opacity: 0; transform: translateX(30px); transition: all .3s; }

/* ---------- 响应式：手机 / 平板 / 电脑 ---------- */
/* 小笔记本：收窄侧边栏与内容间距 */
@media (max-width: 1180px) {
  :root { --sidebar-w: 226px; }
  .app-shell .container { padding: 20px 18px 40px; }
}

/* 平板竖屏：内容区分栏收成单列 */
@media (max-width: 1024px) {
  .main-grid { grid-template-columns: 1fr; }
  .portal-grid { grid-template-columns: repeat(2, 1fr); }
  .portal-card.wide { grid-column: auto; }
}

/* ============================================================
   手机端独立布局（< 768px）
   与平板/电脑完全不同：顶部紧凑栏 + 抽屉菜单 + 底部导航条
   ============================================================ */
@media (max-width: 767px) {
  :root { --radius: 15px; }

  /* 顶栏：只留品牌 + 通知/头像 */
  .mobile-topbar {
    display: flex; align-items: center; gap: 10px;
    position: sticky; top: 0; z-index: 100;
    padding: 9px 12px;
    background: rgba(255,255,255,.86);
    backdrop-filter: blur(14px) saturate(1.3);
    border-bottom: 1px solid rgba(226, 234, 246, .9);
  }
  .mobile-brand { display: flex; align-items: center; gap: 8px; color: var(--text-blue); }
  .mobile-brand b { font-size: .98em; }
  .brand-mark.sm { width: 30px; height: 30px; border-radius: 10px; font-size: .85em; }
  .mobile-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
  .mobile-avatar img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 2px solid var(--primary-light); }
  .mobile-topbar .icon-btn { font-size: 1.05em; padding: 6px; }

  /* 桌面顶栏（面包屑 + 搜索）在手机上完全隐藏 */
  .topbar { display: none; }

  /* 侧边栏改为从左侧滑出的抽屉，并带关闭按钮与底部快捷条 */
  .sidebar { transform: translateX(-105%); width: 84vw; max-width: 320px; z-index: 380; }
  body.nav-open .sidebar { transform: translateX(0); }
  /* 抽屉与遮罩要盖住底部导航条（z-index 340）和音乐悬浮件（350），否则菜单底部被遮 */
  .sidebar-mask { z-index: 370; }
  body.nav-open .sidebar-mask { opacity: 1; pointer-events: auto; }
  .side-close { display: inline-flex; margin-left: auto; background: rgba(255,255,255,.12); border: none; color: #dbe8fb;
                width: 30px; height: 30px; border-radius: 9px; align-items: center; justify-content: center; cursor: pointer; }
  .side-bottom { display: block; }
  .side-scroll { padding-bottom: 4px; }

  /* 内容区：占满宽度，底部留出导航条高度 */
  .app-shell .container { margin-left: 0; padding: 14px 12px 66px; }

  /* 首页横幅与卡片：竖向更紧凑 */
  .hero { padding: 24px 16px 20px; border-radius: 18px; }
  .hero h1 { font-size: 1.38em; }
  .hero p { font-size: .88em; margin-bottom: 16px; }
  .hero-tags { gap: 6px; }
  .search-box { flex-direction: column; }
  .search-box .btn { width: 100%; justify-content: center; }
  .stat-strip { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .strip-item { padding: 12px; gap: 10px; }
  .strip-item i { width: 36px; height: 36px; }
  .portal-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .portal-btn { flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 12px; }
  .portal-btn .portal-ico { width: 30px; height: 30px; font-size: .85em; }
  .portal-name { font-size: .9em; line-height: 1.25; }
  .portal-arrow { display: none !important; }
  .rank-grid { grid-template-columns: 1fr; }
  .card { padding: 15px; }
  .card-grid { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stat-card { padding: 14px; }
  .tabs { gap: 6px; }
  .tab { padding: 8px 13px; font-size: .86em; }
  .detail-meta { flex-wrap: wrap; gap: 6px; }
  .detail-actions { flex-direction: column; }
  .detail-actions .btn { width: 100%; justify-content: center; }
  .comment-form { flex-direction: column; }
  .comment-form .btn { width: 100%; justify-content: center; }
  .file-box { flex-direction: column; align-items: flex-start; }
  .profile-hero { flex-direction: column; text-align: center; align-items: center; }
  .profile-stats, .profile-actions { justify-content: center; flex-wrap: wrap; }
  .toolbar { flex-direction: column; align-items: stretch; }
  .toolbar-search { width: 100%; }
  .table { font-size: .8em; }
  .auth-wrap { grid-template-columns: 1fr; border-radius: 20px; }
  .auth-visual { display: none; }
  .auth-card { padding: 26px 20px; }
  .code-row { flex-direction: column; }
  .code-btn { width: 100%; }
  .social-grid { grid-template-columns: 1fr 1fr; }
  .avatar-editor { flex-direction: column; align-items: center; }
  .toast-container { left: 12px; right: 12px; top: 62px; bottom: auto; }
  .search-item { flex-wrap: wrap; }
  .search-meta { align-items: flex-start; }
}


/* ============================================================
   高级化：详情页 / 评论回复 / 私信媒体 / 细节
   ============================================================ */
.link-btn { background: none; border: none; color: var(--primary-dark); cursor: pointer; font-size: .85em; padding: 2px 4px; }
.link-btn:hover { color: var(--primary); text-decoration: underline; }
.link-btn.danger { color: var(--danger); }
.center { text-align: center; }

/* 详情页 */
.detail { max-width: 880px; margin: 0 auto 34px; padding: 0; overflow: hidden; }
.detail:hover { transform: none; }
.detail-hero { padding: 26px 28px 18px; background: linear-gradient(160deg, rgba(79,142,247,.10), rgba(15,181,201,.06)); border-bottom: 1px solid var(--border); }
.detail-hero-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.detail-type { display: inline-flex; align-items: center; gap: 6px; font-size: .78em; font-weight: 700; color: var(--primary-dark); background: var(--primary-light); padding: 3px 12px; border-radius: 999px; }
.detail-title { color: var(--text-blue); font-size: 1.5em; line-height: 1.35; margin-bottom: 12px; }
.detail-meta { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: .9em; flex-wrap: wrap; }
.dot-sep { color: var(--border); }
.detail-tags { margin-top: 12px; }
.detail-body { padding: 20px 28px; }
.detail-img { border-radius: var(--radius-sm); box-shadow: var(--shadow); width: auto; max-width: 100%; }
.detail .file-box { margin-top: 16px; }
.file-box-name { flex: 1; min-width: 120px; font-weight: 600; color: var(--text-blue); }
.detail-actions { display: flex; gap: 10px; padding: 6px 28px 16px; flex-wrap: wrap; }
.btn-danger-ghost { color: var(--danger); }
.btn-danger-ghost:hover { background: #fef2f2; color: #b91c1c; }

/* 评论 */
.comments-section { padding: 8px 28px 24px; border-top: 1px solid var(--border); }
.comments-title { color: var(--text-blue); margin: 16px 0 12px; }
.comment-form { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 16px; }
.comment-input-wrap { flex: 1; }
.comment-reply-hint { font-size: .82em; color: var(--muted); margin-bottom: 6px; }
.comment-reply-hint b { color: var(--primary-dark); }
.comment-list { margin-top: 6px; }
.comment { display: flex; gap: 11px; padding: 12px 0; border-bottom: 1px dashed var(--border); align-items: flex-start; }
.comment:last-child { border-bottom: none; }
.comment-reply { margin-left: 34px; border-left: 2px solid var(--primary-light); padding-left: 12px; }
.comment-body { flex: 1; min-width: 0; }
.comment-head { display: flex; align-items: center; gap: 8px; }
.comment-head b { color: var(--text); }
.comment-body p { color: var(--text-2); margin-top: 3px; }
.comment-tools { margin-top: 5px; display: flex; gap: 10px; }

/* 私信 */
.msg-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 18px; }
.msg-sec-title { color: var(--text-blue); margin-bottom: 10px; }
.chat-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.chat-head b { color: var(--text-blue); font-size: 1.05em; }
.chat-back { color: var(--muted); font-size: 1.1em; padding: 6px; border-radius: 9px; }
.chat-back:hover { background: var(--primary-light); color: var(--primary-dark); }
.chat-box { max-width: 780px; margin: 0 auto; }
.chat-list { max-height: 52vh; overflow-y: auto; margin-bottom: 14px; padding-right: 4px; }
.chat-msg { margin-bottom: 14px; display: flex; flex-direction: column; align-items: flex-start; }
.chat-bubble { background: var(--primary-light); padding: 10px 14px; border-radius: 16px 16px 16px 4px; max-width: 78%; color: var(--text); word-break: break-word; }
.chat-msg.me { align-items: flex-end; }
.chat-msg.me .chat-bubble { background: linear-gradient(135deg, var(--primary), #4f8ef7); color: #fff; border-radius: 16px 16px 4px 16px; }
.chat-bubble.chat-image, .chat-bubble.chat-video { background: transparent; padding: 0; }
.chat-media-img { max-width: 220px; max-height: 260px; border-radius: 14px; display: block; box-shadow: var(--shadow); }
.chat-media-video { max-width: 260px; border-radius: 14px; display: block; background: #000; }
.chat-voice-wrap { display: inline-flex; align-items: center; gap: 8px; }
.chat-voice-wrap audio { height: 34px; max-width: 220px; }
.chat-msg small { margin-top: 4px; }
.chat-send { border-top: 1px solid var(--border); padding-top: 12px; }
.chat-send-bar { display: flex; align-items: center; gap: 8px; }
.chat-send-bar .chat-input { flex: 1; resize: none; }
.chat-tool { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 12px; border: 1px solid var(--border); background: #fff; color: var(--text-2); cursor: pointer; font-size: 1.05em; transition: all .2s; }
.chat-tool:hover { border-color: var(--primary); color: var(--primary-dark); background: var(--primary-light); }
.chat-tool.recording { background: var(--danger); color: #fff; border-color: var(--danger); animation: recPulse 1s infinite; }
@keyframes recPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,.5); } 50% { box-shadow: 0 0 0 8px rgba(239,68,68,0); } }
.chat-attach { margin-top: 8px; font-size: .85em; color: var(--text-2); }
.chat-recording { margin-top: 8px; color: var(--danger); font-size: .85em; display: flex; align-items: center; gap: 6px; }
.rec-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--danger); animation: recPulse 1s infinite; }

@media (max-width: 767px) {
  .msg-layout { grid-template-columns: 1fr; }
  .detail-hero, .detail-body, .comments-section, .detail-actions { padding-left: 16px; padding-right: 16px; }
  .comment-form { flex-direction: column; }
  .comment-form .btn { width: 100%; justify-content: center; }
  .comment-reply { margin-left: 18px; }
}

/* ---------- 自定义下拉（替代原生 select） ---------- */
.cselect { position: relative; display: block; }
.cselect > select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.cselect-btn { width: 100%; text-align: left; padding: 11px 14px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: #fff; color: var(--text); font-family: inherit; font-size: .95em; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cselect-btn::after { content: '▾'; color: var(--muted); font-size: .85em; margin-left: auto; }
.cselect-btn:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(56,189,248,.18); }
.cselect-btn.placeholder { color: var(--muted); }
.cselect.disabled .cselect-btn { opacity: .6; cursor: not-allowed; }
.cselect-btn.input-xs { padding: 5px 9px; font-size: .8em; }
.cselect-list { position: fixed; z-index: 500; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; max-height: 260px; overflow: auto; display: none; }
.cselect-list.show { display: block; }
.cselect-item { padding: 9px 12px; border-radius: 9px; cursor: pointer; color: var(--text); white-space: nowrap; }
.cselect-item:hover { background: var(--primary-light); color: var(--primary-dark); }
.cselect-item.active { background: var(--primary); color: #fff; }
body.theme-night .cselect-btn, body.theme-night .cselect-list { background: #0b1220; color: var(--text); }

/* 身份管理权限网格 */
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 14px; }

/* ============================================================
   更多字体（10+）
   ============================================================ */
body.family-yahei     { font-family: "Microsoft YaHei", "微软雅黑", "PingFang SC", sans-serif; }
body.family-pingfang  { font-family: "PingFang SC", "苹方-简", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; }
body.family-heiti     { font-family: "Heiti SC", "黑体", "SimHei", "Microsoft YaHei", sans-serif; }
body.family-songti    { font-family: "Songti SC", "宋体", "SimSun", serif; }
body.family-yuanti    { font-family: "Yuanti SC", "圆体-简", "PingFang SC", "Microsoft YaHei", sans-serif; }
body.family-youyuan   { font-family: "YouYuan", "幼圆", "Microsoft YaHei", sans-serif; }
body.family-lisu      { font-family: "LiSu", "隶书", "STLiti", "KaiTi", cursive; }
body.family-zhongsong { font-family: "STZhongsong", "华文中宋", "SimSun", serif; }
body.family-noto      { font-family: "Noto Sans SC", "Source Han Sans SC", "思源黑体", "Microsoft YaHei", sans-serif; }
body.family-mono      { font-family: "JetBrains Mono", "Cascadia Code", Consolas, Menlo, "Courier New", monospace; }

/* ============================================================
   更多配色（10+）
   ============================================================ */
body.theme-cyan   { --bg: linear-gradient(160deg, #e6fbff 0%, #f2fdff 60%, #fbffff 100%); --card-bg: rgba(255,255,255,.82); }
body.theme-rose   { --bg: linear-gradient(160deg, #fff0f5 0%, #fff6fa 60%, #fffdfe 100%); --card-bg: rgba(255,255,255,.84); }
body.theme-indigo { --bg: linear-gradient(160deg, #eef1ff 0%, #f5f7ff 60%, #fbfcff 100%); --card-bg: rgba(255,255,255,.82); }
body.theme-sand   { --bg: linear-gradient(160deg, #fbf3e7 0%, #fdf8f0 60%, #fffdf9 100%); --card-bg: rgba(255,255,255,.85); }
body.theme-mint   { --bg: linear-gradient(160deg, #e9fbf3 0%, #f3fdf8 60%, #fbfffd 100%); --card-bg: rgba(255,255,255,.84); }
body.theme-slate {
  --bg: #1e293b; --card-bg: rgba(51,65,85,.85); --card-solid: #334155;
  --text: #e2e8f0; --text-2: #cbd5e1; --text-blue: #cbd5e1; --muted: #94a3b8;
  --border: #475569; --primary-light: #334155; --primary-bg: #1e293b;
  --shadow: 0 6px 20px rgba(0,0,0,.4); --shadow-lg: 0 20px 46px rgba(0,0,0,.5);
}
body.theme-midnight {
  --bg: #0b1020; --card-bg: rgba(24,33,60,.86); --card-solid: #182140;
  --text: #dbe4ff; --text-2: #c3cdf0; --text-blue: #a9c2ff; --muted: #8b97c4;
  --border: #2a3760; --primary-light: #1c2a52; --primary-bg: #0b1020;
  --shadow: 0 6px 20px rgba(0,0,0,.45); --shadow-lg: 0 20px 46px rgba(0,0,0,.55);
}
/* 深色系共用组件覆盖（夜黑 / 石墨 / 午夜） */
body.theme-night .card, body.theme-slate .card, body.theme-midnight .card,
body.theme-night .portal-btn, body.theme-slate .portal-btn, body.theme-midnight .portal-btn { border-color: rgba(148,163,184,.18); }
body.theme-night .input, body.theme-slate .input, body.theme-midnight .input,
body.theme-night .cselect-btn, body.theme-slate .cselect-btn, body.theme-midnight .cselect-btn,
body.theme-night .cselect-list, body.theme-slate .cselect-list, body.theme-midnight .cselect-list { background: #0b1220; color: var(--text); }
body.theme-night .topbar, body.theme-slate .topbar, body.theme-midnight .topbar { background: rgba(15,23,42,.82); border-bottom-color: var(--border); }
body.theme-night .mobile-topbar, body.theme-slate .mobile-topbar, body.theme-midnight .mobile-topbar { background: rgba(15,23,42,.86); border-bottom-color: var(--border); }
body.theme-night .crumbs a, body.theme-slate .crumbs a, body.theme-midnight .crumbs a,
body.theme-night .crumbs .current, body.theme-slate .crumbs .current, body.theme-midnight .crumbs .current { color: var(--text-2); }
body.theme-night .file-picker, body.theme-slate .file-picker, body.theme-midnight .file-picker { background: rgba(255,255,255,.04); }
body.theme-night .auth-wrap, body.theme-slate .auth-wrap, body.theme-midnight .auth-wrap { background: rgba(15,23,42,.7); }
body.theme-night .chat-tool, body.theme-slate .chat-tool, body.theme-midnight .chat-tool { background: #0b1220; border-color: var(--border); color: var(--text-2); }
body.theme-night .modal, body.theme-slate .modal, body.theme-midnight .modal,
body.theme-night .upload-warn-box, body.theme-slate .upload-warn-box, body.theme-midnight .upload-warn-box { background: #111a2e; color: var(--text); }

/* ============================================================
   更多布局（10+）
   ============================================================ */
body.layout-compact { --radius: 12px; --radius-sm: 9px; }
body.layout-compact .card { padding: 14px; }
body.layout-compact .field { margin-bottom: 10px; }
body.layout-compact .btn { padding: 8px 16px; }
body.layout-compact .portal-grid { gap: 8px; }

body.layout-spacious { --radius: 22px; --radius-sm: 16px; }
body.layout-spacious .card { padding: 30px; }
body.layout-spacious .field { margin-bottom: 18px; }
body.layout-spacious .app-shell .container { padding-top: 34px; }
body.layout-spacious .portal-grid { gap: 18px; }

body.layout-sharp { --radius: 6px; --radius-sm: 4px; }
body.layout-sharp .btn { border-radius: 6px; }
body.layout-sharp .cselect-btn { border-radius: 6px; }

body.layout-round { --radius: 30px; --radius-sm: 20px; }
body.layout-round .sidebar { border-top-right-radius: 26px; border-bottom-right-radius: 26px; }
body.layout-round .portal-btn { border-radius: 999px; padding-left: 20px; }

body.layout-glass .card { background: rgba(255,255,255,.5); backdrop-filter: blur(26px) saturate(1.7); border: 1px solid rgba(255,255,255,.85); }
body.layout-glass .topbar { backdrop-filter: blur(22px) saturate(1.6); }
body.layout-glass .portal-btn { background: rgba(255,255,255,.55); }

body.layout-flat .card { box-shadow: none; border: 1px solid var(--border); }
body.layout-flat .card:hover { transform: none; box-shadow: none; }
body.layout-flat .btn { box-shadow: none; }
body.layout-flat .portal-btn { box-shadow: none; }
body.layout-flat .portal-btn:hover { transform: none; box-shadow: none; }

body.layout-elevated .card { box-shadow: 0 18px 40px rgba(23,62,120,.18); }
body.layout-elevated .card:hover { box-shadow: 0 28px 64px rgba(23,62,120,.28); }
body.layout-elevated .portal-btn { box-shadow: 0 12px 28px rgba(23,62,120,.16); }

body.layout-narrow { --sidebar-w: 196px; }

@media (min-width: 768px) {
  body.layout-sidebar-right .sidebar { left: auto; right: 0; width: var(--sidebar-w); border-right: none; border-left: 1px solid rgba(255,255,255,.06); box-shadow: -8px 0 34px rgba(11,34,66,.18); }
  body.app-shell.layout-sidebar-right .container { margin-left: 0; margin-right: var(--sidebar-w); }
}

/* ============================================================
   音乐播放器
   ============================================================ */
.music-bar { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 350; display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--card-bg); backdrop-filter: blur(16px) saturate(1.4); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-lg); }
.music-bar.collapsed .music-info, .music-bar.collapsed .music-vol, .music-bar.collapsed #musicMode, .music-bar.collapsed #musicListBtn { display: none; }
.music-btn { width: 38px; height: 38px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 11px; background: transparent; color: var(--text-2); cursor: pointer; font-size: 1rem; transition: all .2s; }
.music-btn:hover { background: var(--primary-light); color: var(--primary-dark); }
.music-play { background: var(--primary); color: #fff; }
.music-play:hover { background: var(--primary-hover); color: #fff; }
.music-info { flex: 1; min-width: 0; }
.music-title { font-size: .88em; font-weight: 600; color: var(--text-blue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.music-track { display: flex; align-items: center; gap: 8px; font-size: .74em; color: var(--muted); }
.music-track input[type=range] { flex: 1; accent-color: var(--primary); height: 4px; }
.music-vol { width: 80px; accent-color: var(--primary); }
.music-playlist { position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); max-height: 320px; overflow: auto; background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 6px; display: none; }
.music-bar.show-list .music-playlist { display: block; }
.music-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 9px; cursor: pointer; }
.music-item:hover { background: var(--primary-light); }
.music-item.active { background: var(--primary); color: #fff; }
.music-item-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .9em; font-weight: 600; }
.music-item-artist { font-size: .78em; color: var(--muted); }
.music-item.active .music-item-artist { color: rgba(255,255,255,.85); }
body.has-music { padding-bottom: 78px; }
body.theme-night .music-playlist, body.theme-slate .music-playlist, body.theme-midnight .music-playlist { background: #111a2e; }

/* 音乐页歌单 */
.song-list { display: flex; flex-direction: column; }
.song-row { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px dashed var(--border); flex-wrap: wrap; }
.song-row:last-child { border-bottom: none; }
.song-play { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%; border: none; background: var(--primary); color: #fff; cursor: pointer; font-size: .9rem; transition: transform .2s; }
.song-play:hover { transform: scale(1.08); }
.song-main { flex: 1; min-width: 120px; display: flex; flex-direction: column; }
.song-main b { color: var(--text); }
.song-src { font-size: .72em; color: var(--muted); background: var(--primary-light); border-radius: 999px; padding: 2px 10px; }

/* 悬浮音乐图标（可拖动） */
.music-fab { position: fixed; right: 16px; bottom: 16px; z-index: 350; width: 52px; height: 52px; border-radius: 50%; border: none; cursor: grab; background: linear-gradient(135deg, var(--primary), var(--accent)); color: #fff; font-size: 1.2rem; box-shadow: var(--shadow-lg); touch-action: none; display: inline-flex; align-items: center; justify-content: center; }
.music-fab:hover { transform: scale(1.06); }
.music-fab:active { cursor: grabbing; }
/* hidden 属性优先级低于 .music-bar/.music-fab 的 display，需显式覆盖才能真正隐藏 */
.music-bar[hidden], .music-fab[hidden] { display: none !important; }

/* 手机窄屏：播放器换行，避免按钮被挤出屏幕；隐藏音量条，保证「收起」始终可见 */
@media (max-width: 600px) {
  .music-bar { flex-wrap: wrap; justify-content: space-between; padding: 10px 12px; gap: 8px; row-gap: 6px; left: 8px; right: 8px; bottom: 8px; border-radius: 14px; }
  .music-info { order: -1; flex: 1 1 100%; }
  .music-vol { display: none; }
  .music-btn { width: 36px; height: 36px; }
  .music-fab { right: 14px; bottom: 14px; }
}

.mobile-bottom-nav { display: none; }
/* 手机底部导航：首页/社区/发布/消息/我的；与音乐条、悬浮图标错开 */
@media (max-width: 767px) {
  body.app-shell { padding-bottom: 72px; padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .app-shell .container { padding-bottom: 96px; padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .mobile-bottom-nav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 340; background: var(--card-bg); border-top: 1px solid var(--border); padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); backdrop-filter: blur(12px); }
  .mobile-bottom-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: .68em; color: var(--muted); text-decoration: none; padding: 4px 0; position: relative; }
  .mobile-bottom-nav a.active { color: var(--primary); font-weight: 700; }
  .mobile-bottom-nav .mnav-pub i { background: var(--primary); color: #fff; border-radius: 50%; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; }
  .mobile-bottom-nav .badge { position: absolute; top: 0; right: 18px; font-size: .6em; }
  .music-bar { bottom: 66px; bottom: calc(66px + env(safe-area-inset-bottom)); }
  .music-fab { bottom: 70px; bottom: calc(70px + env(safe-area-inset-bottom)); }
  body.has-music { padding-bottom: 170px; padding-bottom: calc(170px + env(safe-area-inset-bottom)); }
  body.is-auth .mobile-bottom-nav { display: none; }
}

/* 资料与设置：微信式分组列表（名称 / 当前值 / 箭头，分组间留灰色间隔） */
.settings-list { background: var(--card-solid); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin-bottom: 10px; }
.settings-row { background: var(--card-solid); border-bottom: 1px solid var(--border); }
.settings-row:last-child { border-bottom: none; }
.settings-row > summary { list-style: none; display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 12px 14px; cursor: pointer; transition: background .18s ease; }
.settings-row > summary:hover { background: var(--primary-bg); }
.settings-row > summary:active { background: var(--primary-light); }
.settings-row > summary::-webkit-details-marker { display: none; }
.settings-row[open] > summary { background: var(--card-solid); }
.settings-row-label { flex: 1; font-weight: 400; color: var(--text); font-size: 1em; }
.settings-row-value { color: var(--muted); font-size: .92em; max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.settings-row-value img { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; }
.settings-caret { color: var(--border); font-size: .78em; transition: transform .2s; flex: 0 0 auto; }
.settings-row[open] > summary .settings-caret { transform: rotate(90deg); }
.settings-row-body { padding: 14px 14px 18px; border-top: 1px solid var(--border); animation: settingsRowIn .22s ease-out; }
@keyframes settingsRowIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}
/* 支持的浏览器：展开/收起时高度与透明度平滑过渡 */
@supports (interpolate-size: allow-keywords) {
  .settings-row { interpolate-size: allow-keywords; }
  .settings-row::details-content {
    block-size: 0;
    overflow: clip;
    opacity: 0;
    transition: block-size .24s ease, opacity .2s ease, content-visibility .24s allow-discrete;
    transition-behavior: allow-discrete;
  }
  .settings-row[open]::details-content { block-size: auto; opacity: 1; }
}
@media (max-width: 767px) {
  .settings-row > summary { min-height: 52px; padding: 11px 14px; }
  .settings-row-value { max-width: 55%; }
  .settings-row-body { padding: 12px 14px 16px; }
}

/* 统一发布：板块选择器 */
.pub-select { margin-bottom: 12px; }
.pub-select-label { display: block; font-size: .85em; color: var(--muted); margin-bottom: 8px; }
.pub-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.pub-tab { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--card-bg); color: var(--text-2); font-weight: 600; font-size: .9em; cursor: pointer; transition: all .2s; }
.pub-tab:hover { border-color: rgba(59,130,246,.35); color: var(--primary); }
.pub-tab.active { background: var(--primary); border-color: var(--primary); color: #fff; }
@media (max-width: 600px) {
  .pub-tab { padding: 7px 12px; font-size: .85em; }
}

/* 通用分隔线 */
.divider { border: none; border-top: 1px dashed var(--border); margin: 18px 0; }

/* 作业答案 */
.answers-section { padding: 8px 28px 24px; border-top: 1px solid var(--border); }
.answer-form { margin-bottom: 16px; }
.answer-list { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.answer-item { display: flex; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card-bg); }
.answer-subject { flex: 0 0 auto; align-self: flex-start; font-size: .76em; font-weight: 700; color: var(--primary-dark); background: var(--primary-light); border-radius: 999px; padding: 3px 12px; }
.answer-body { flex: 1; min-width: 0; }
.answer-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.answer-head b { color: var(--text); }
.answer-text { color: var(--text-2); margin-top: 4px; }
.answer-file { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: .86em; }

/* 对外 ID 标签 */
.id-chip { font-size: .72em; background: var(--primary-light); color: var(--primary-dark); border-radius: 999px; padding: 2px 10px; font-weight: 600; }

@media (max-width: 767px) {
  .answers-section { padding-left: 16px; padding-right: 16px; }
}

/* ============================================================
   趋势图 / 标记 / 通知 / 备份 / 搜索联想 / 跟随系统深色
   ============================================================ */
.chart-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding-bottom: 2px; }
.chart { display: flex; align-items: flex-end; gap: 10px; height: 160px; padding: 10px 4px 0; width: max-content; min-width: 100%; }
.chart-col { flex: 0 0 52px; min-width: 52px; display: flex; flex-direction: column; align-items: center; height: 100%; }
.chart-bars { flex: 1; display: flex; align-items: flex-end; gap: 4px; width: 100%; justify-content: center; }
.chart-bars .bar { width: 14px; border-radius: 6px 6px 0 0; transition: height .3s; }
.bar-users { background: linear-gradient(180deg, #60a5fa, #3b82f6); }
.bar-content { background: linear-gradient(180deg, #5eead4, #0fb5c9); }
.bar-orders { background: linear-gradient(180deg, #fbbf24, #f59e0b); }
.chart-date { font-size: .72em; color: var(--muted); margin-top: 6px; }
.chart-legend { margin-top: 10px; }
.legend { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: middle; margin-right: 4px; }
.legend-users { background: #3b82f6; }
.legend-content { background: #0fb5c9; }
.legend-orders { background: #f59e0b; }

.owner-badge { font-size: .68em; background: var(--primary); color: #fff; border-radius: 999px; padding: 1px 8px; font-weight: 700; }
.accepted-badge { font-size: .72em; background: #dcfce7; color: #15803d; border-radius: 999px; padding: 2px 10px; font-weight: 700; }
.answer-item.accepted { border-color: var(--success); }

.notif-unread { background: var(--primary-light); }
.notif-unread .manage-title { font-weight: 700; }

.backup-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }

.toolbar-search { position: relative; }
.search-suggest { position: absolute; top: 100%; left: 0; right: 0; z-index: 60; margin-top: 6px; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; max-height: 320px; overflow: auto; }
.search-suggest-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: 8px; color: var(--text); }
.search-suggest-item:hover { background: var(--primary-light); color: var(--primary-dark); }
.search-suggest-item .muted { font-size: .78em; }
body.theme-night .search-suggest, body.theme-slate .search-suggest, body.theme-midnight .search-suggest { background: #111a2e; }

/* 跟随系统深色模式（浅色主题在深色系统下自动转深色） */
@media (prefers-color-scheme: dark) {
  body.theme-light { --bg: #0f172a; --card-bg: rgba(30,41,59,.86); --card-solid: #1e293b; --text: #e2e8f0; --text-2: #cbd5e1; --text-blue: #bfdbfe; --muted: #94a3b8; --border: #334155; --primary-light: #1e3a5f; }
  body.theme-light .card, body.theme-light .portal-btn { border-color: rgba(148,163,184,.18); }
  body.theme-light .input, body.theme-light .cselect-btn, body.theme-light .cselect-list { background: #0b1220; color: var(--text); }
  body.theme-light .topbar, body.theme-light .mobile-topbar { background: rgba(15,23,42,.82); border-bottom-color: var(--border); }
  body.theme-light .crumbs a, body.theme-light .crumbs .current { color: var(--text-2); }
  body.theme-light .file-picker { background: rgba(255,255,255,.04); }
  body.theme-light .search-suggest, body.theme-light .music-playlist { background: #111a2e; }
}

/* ============================================================
   详情页与评论/科目/手机端细化
   ============================================================ */
.hw-download { margin-top: 14px; }
.action-row { display: flex; gap: 14px; padding: 4px 28px 12px; }
.comment-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.comment-toolbar .like-inline { display: inline; }
.link-btn.liked, .link-btn.liked i { color: #ef4444; }
.replies-toggle { margin: 2px 0 6px 42px; font-size: .84em; }
.reply-to { color: var(--primary-dark); font-weight: 600; }

/* 科目多选 */
.chip-toggles { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-toggle { cursor: pointer; }
.chip-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip-toggle span { display: inline-block; padding: 5px 14px; border-radius: 999px; border: 1px solid var(--border); background: #fff; color: var(--text-2); font-size: .86em; transition: all .2s; }
.chip-toggle input:checked + span { background: var(--primary); border-color: var(--primary); color: #fff; }
.answer-subjects { display: flex; flex-direction: column; gap: 4px; flex: 0 0 auto; }
.ordered-hint { color: var(--success); font-weight: 600; margin-top: 10px; }

/* 手机端左上角汉堡按钮：主题配色 */
.mobile-topbar > button.icon-btn { background: var(--primary); color: #fff; border-radius: 12px; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 14px rgba(59,130,246,.28); }
.mobile-topbar > button.icon-btn:hover { background: var(--primary-hover); color: #fff; }

@media (max-width: 767px) {
  .comment-toolbar { gap: 10px; }
  .action-row { padding-left: 16px; padding-right: 16px; }
}

/* ============================================================
   后台 AI 配置：测试连接（进度条 + 结果）
   ============================================================ */
.ai-test { margin-top: 14px; }
.ai-progress { margin-top: 12px; height: 8px; border-radius: 999px; background: var(--primary-light); overflow: hidden; }
.ai-progress-bar { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--primary), var(--accent)); transition: width .25s ease; }
.ai-progress-bar.indeterminate { width: 35%; animation: aiIndeterminate 1.1s ease-in-out infinite; }
@keyframes aiIndeterminate { 0% { margin-left: -35%; } 100% { margin-left: 100%; } }
.ai-result { margin-top: 12px; font-size: .92em; }
.ai-result .ok { color: #12784f; font-weight: 600; }
.ai-result .err { color: #b91c1c; }
.err-detail { white-space: pre-wrap; margin: 8px 0 0; font-size: .86em; color: #8a1f1f; background: #fff5f5; border: 1px solid #f5c6c6; border-radius: 8px; padding: 8px 10px; }
.prov-row { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; }
.prov-row .input { flex: 1; min-width: 0; }
.prov-row .input:nth-child(2) { flex: .8; }
.prov-row .prov-del { flex: 0 0 auto; }
@media (max-width: 767px) {
  .prov-row { flex-wrap: wrap; }
  .prov-row .input, .prov-row .prov-del { flex: 1 1 100%; }
}
.ai-models { margin-top: 8px; max-height: 220px; overflow: auto; display: flex; flex-wrap: wrap; gap: 6px; }
.ai-models code { background: var(--primary-light); color: var(--primary-dark); border-radius: 6px; padding: 2px 8px; font-size: .82em; }

/* ============================================================
   音乐页：单个/批量标签页 + 平台搜索助手
   ============================================================ */
.music-tabs { margin-bottom: 14px; }
.music-pane[hidden] { display: none; }
.fetch-row { display: flex; gap: 10px; }
.fetch-row .input { flex: 1; }
.fetch-results { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow: auto; }
.fetch-item {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  width: 100%; text-align: left; padding: 9px 12px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 10px; background: var(--card-solid, #fff); color: var(--text);
  transition: border-color .18s, background .18s;
}
.fetch-item:hover { border-color: var(--primary); background: var(--primary-light); }
.fetch-item.loading { opacity: .6; cursor: progress; }
.fetch-item b { font-weight: 600; }
.fetch-item .muted { font-size: .84em; flex: 0 0 auto; }
.fetch-results .ok { color: #12784f; font-weight: 600; }
.fetch-results .err { color: #b91c1c; }

/* ============================================================
   音乐：表单操作行 + 在线搜歌页
   ============================================================ */
.form-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.ms-platform { max-width: 180px; }
.ms-item {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--card-solid, #fff);
}
.ms-meta { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.ms-meta .muted { font-size: .84em; }
.ms-actions { display: flex; gap: 8px; flex: 0 0 auto; }

/* ============================================================
   音乐：批量上传本地（进度列表）
   ============================================================ */
.upload-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.upload-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--card-solid, #fff); font-size: .88em; }
.upload-item .ui-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upload-item .ui-bar { flex: 0 0 100px; height: 6px; border-radius: 999px; background: var(--primary-light); overflow: hidden; }
.upload-item .ui-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--primary), var(--accent)); transition: width .2s ease; }
.upload-item .ui-status { flex: 0 0 auto; min-width: 66px; text-align: right; color: var(--muted); }
.upload-item.ok .ui-status { color: #12784f; font-weight: 600; }
.upload-item.err .ui-status { color: #b91c1c; }

/* 批量上传：文件大小 / 移除按钮 */
.upload-item .ui-size { flex: 0 0 auto; min-width: 54px; text-align: right; color: var(--muted); font-size: .82em; }
.upload-item .ui-del { flex: 0 0 auto; border: none; background: transparent; color: var(--muted); cursor: pointer; font-size: 1.15em; line-height: 1; padding: 0 4px; }
.upload-item .ui-del:hover { color: #b91c1c; }

/* ============================================================
   Iconify 图标（基础尺寸 + 轻交互动效）
   ============================================================ */
i.iconify, svg.iconify { display: inline-block; line-height: 1; vertical-align: -0.125em; transition: transform .2s ease, color .2s ease; }
i.iconify svg, svg.iconify { display: block; }
.btn:hover .iconify,
.side-link:hover .iconify,
.tab:hover .iconify,
.icon-btn:hover .iconify,
.portal-btn:hover .iconify,
.strip-item:hover .iconify,
.music-btn:hover .iconify { transform: translateY(-1px) scale(1.14); }
.song-play:hover .iconify { transform: scale(1.14); }
/* 图标状态切换：Iconify 渲染后 <i> 会被替换为 <svg>，故基于类名控制显隐 */
.music-play { display: inline-flex; align-items: center; justify-content: center; }
.music-play .pause-ico { display: none !important; }
.music-play.is-playing .play-ico { display: none !important; }
.music-play.is-playing .pause-ico { display: inline-flex !important; }
.music-mode .mode-ico { display: none !important; }
.music-mode.m-order .order-ico,
.music-mode.m-loop .loop-ico,
.music-mode.m-single .single-ico,
.music-mode.m-shuffle .shuffle-ico { display: inline-block !important; }
.link-btn .like-heart-solid { display: none; }
.link-btn.liked .like-heart-regular { display: none; }
.link-btn.liked .like-heart-solid { display: inline-block; }
/* 通用旋转工具类（用于加载态等） */
.i-spin { animation: icoSpin 1s linear infinite; }
@keyframes icoSpin { to { transform: rotate(360deg); } }

/* ============================================================
   置顶加精标记 / 打赏 / 兑换中心 / 等级徽章
   ============================================================ */
.flag-badge { display: inline-flex; align-items: center; gap: 3px; font-size: .72em; font-weight: 700; border-radius: 999px; padding: 1px 8px; margin-left: 6px; vertical-align: middle; }
.flag-badge.pin { background: #fee2e2; color: #b91c1c; }
.flag-badge.feat { background: #fef3c7; color: #b45309; }
.tip-box { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 28px; border-top: 1px dashed var(--border); }
.exchange-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.exchange-item { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 18px 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--card-bg); box-shadow: var(--shadow); }
.exchange-item .ex-icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.5em; color: #fff; background: linear-gradient(135deg, var(--primary), var(--accent)); }
.exchange-item .ex-price { color: #b8860b; font-weight: 700; }
.lv-badge { display: inline-block; font-size: .7em; font-weight: 700; border-radius: 999px; padding: 1px 8px; background: linear-gradient(135deg, #60a5fa, #22d3ee); color: #fff; vertical-align: middle; }

/* 订单摘要 */
.order-summary { margin-top: 12px; }
.order-summary .row { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px dashed var(--border); }

/* 商品评价 / 店铺主页 */
.reviews-section { padding: 12px 28px 20px; border-top: 1px solid var(--border); }
.review-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.review-item { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; background: var(--card-bg); }
.review-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.review-head .stars { color: #f4c95d; letter-spacing: 1px; }
.review-text { margin: 6px 0 0; color: var(--text-2); }
.store-head { display: flex; align-items: center; gap: 16px; }
.store-head .profile-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }

/* 收藏夹分组标题 */
.fav-folder { margin: 14px 0 6px; font-size: .95em; }
.related-section { padding: 8px 28px 20px; border-top: 1px solid var(--border); }

/* 成就徽章墙 */
.badge-wall { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.ach-badge { display: inline-flex; align-items: center; gap: 4px; font-size: .75em; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: linear-gradient(135deg, #fde68a, #fca5a5); color: #7c2d12; }

/* 主页封面 */
.profile-cover { height: 130px; border-radius: 14px; background-size: cover; background-position: center; margin-bottom: 14px; }

/* 话题广场 */
.topic-cloud { display: flex; flex-wrap: wrap; gap: 8px; }

/* 拼团进度 / 话题关注 */
.group-bar { height: 8px; border-radius: 999px; background: var(--primary-light); overflow: hidden; margin: 8px 0 4px; }
.group-fill { height: 100%; background: linear-gradient(90deg, var(--primary), var(--accent)); }
.topic-chip { display: inline-flex; align-items: center; gap: 4px; }

/* Markdown 正文 */
.md-body h1, .md-body h2, .md-body h3, .md-body h4, .md-body h5, .md-body h6 { margin: 12px 0 6px; color: var(--text-blue); }
.md-body code { background: var(--primary-light); color: var(--primary-dark); padding: 1px 5px; border-radius: 5px; font-size: .9em; }
.md-body pre { background: #0f172a; color: #e2e8f0; padding: 12px; border-radius: 10px; overflow: auto; }
.md-body pre code { background: transparent; color: inherit; padding: 0; }
.md-body blockquote { margin: 8px 0; padding: 6px 12px; border-left: 3px solid var(--primary); background: var(--primary-light); border-radius: 0 8px 8px 0; color: var(--text-2); }
.md-body a { color: var(--primary-dark); text-decoration: underline; }

/* 内容编辑框 */
.edit-box { margin: 10px 0; }
.edit-box summary { cursor: pointer; user-select: none; }
.edit-box .form { margin-top: 8px; }

/* 二维码收款 / 我的购买 / 订单结算 */
.qr-pay-box { text-align: center; margin: 14px 0; }
.qr-pay-amount { font-size: 1.05rem; margin-bottom: 12px; }
.qr-pay-amount b { color: #b91c1c; }
.qr-pay-codes { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.qr-pay-code { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.qr-pay-code img { width: 180px; height: 180px; object-fit: contain; border: 1px solid var(--border); border-radius: 12px; background: #fff; padding: 6px; }
.qr-pay-code span { font-size: .85rem; color: var(--text-2); }
.manage-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; }
.settle-row { flex-wrap: wrap; }
.settle-qrs { display: inline-flex; gap: 6px; align-items: center; }
.settle-qrs img { width: 56px; height: 56px; object-fit: contain; border: 1px solid var(--border); border-radius: 8px; background: #fff; }

/* ============================================================
   灰度测试：首页邀请码门禁 / 全屏水印
   ============================================================ */
.gray-gate { width: 100%; max-width: 460px; margin: 0 auto; }
.gray-gate-card { padding: 34px 30px; text-align: center; }
.gray-gate-card:hover { transform: none; }
.gray-gate-icon {
  width: 54px; height: 54px; border-radius: 16px; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center; font-size: 1.4em; color: #fff;
  background: linear-gradient(135deg, #4f8ef7, #0fb5c9);
  box-shadow: 0 12px 26px rgba(59, 130, 246, .34);
}
.gray-gate-card h1 { color: var(--text-blue); font-size: 1.4em; }
.gray-gate-card > p { margin: 6px 0 22px; }
.gray-gate-card .form { text-align: left; }
.gray-watermark {
  position: fixed; inset: 0; z-index: 9998;
  pointer-events: none; user-select: none; -webkit-user-select: none;
  background-repeat: repeat;
}
@media (max-width: 767px) {
  .gray-watermark { background-size: 125px auto; }
}

/* 灰度测试：Bug 反馈悬浮按钮（点开弹窗提交） */
.bug-fab {
  position: fixed; right: 16px; bottom: calc(82px + env(safe-area-inset-bottom));
  z-index: 190; width: 52px; height: 52px; border-radius: 50%; border: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #f59e0b, #ef4444); color: #fff;
  font-size: 1.2rem; box-shadow: var(--shadow-lg); cursor: pointer;
  transition: transform .18s, box-shadow .18s;
}
.bug-fab:hover { transform: translateY(-2px) scale(1.05); }
@media (max-width: 767px) {
  .bug-fab { right: 14px; bottom: calc(132px + env(safe-area-inset-bottom)); }
}
.bug-fab-form textarea { resize: vertical; }
.bug-fab-add {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border: 1px dashed var(--border); border-radius: 999px;
  color: var(--text-blue); font-size: .9em; cursor: pointer;
}
.bug-fab-add:hover { border-color: var(--primary); color: var(--primary); }
.bug-fab-add input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.bug-fab-files { margin-top: 6px; font-size: .82em; word-break: break-all; }

/* 工单附件 */
.ticket-media { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.ticket-media-item { display: block; width: 96px; height: 96px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); }
.ticket-media-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ticket-media-video { width: 100%; max-width: 420px; }

/* ============================================================
   加载进度：页面顶部 / 音乐缓冲 / 图片骨架 / 列表与视频
   ============================================================ */
.page-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 9999; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.page-progress.show { opacity: 1; }
.page-progress i { display: block; height: 100%; width: 0; border-radius: 0 999px 999px 0; background: linear-gradient(90deg, var(--primary), var(--accent)); box-shadow: 0 0 10px rgba(59, 130, 246, .55); }
.page-progress.run i { animation: ppGrow 5s cubic-bezier(.15, .8, .3, 1) forwards; }
.page-progress.done i { animation: none; transition: width .18s ease-out; }
@keyframes ppGrow { 0% { width: 2%; } 25% { width: 45%; } 50% { width: 65%; } 75% { width: 80%; } 100% { width: 90%; } }

/* 音乐播放器：缓冲进度 */
.music-loadrow { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: .7em; color: var(--muted); }
.music-loadrow[hidden] { display: none !important; }
.music-loadbar { position: relative; flex: 1; height: 3px; border-radius: 999px; background: var(--primary-light); overflow: hidden; }
.music-loadbar i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--primary), var(--accent)); transition: width .25s ease; }
.music-loadtext { flex: 0 0 auto; white-space: nowrap; }
.music-btn.is-preloaded { position: relative; }
.music-btn.is-preloaded::after { content: ''; position: absolute; top: 6px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 2px var(--card-solid); }
.music-skeleton { pointer-events: none; height: 36px; }
.music-skeleton-line { display: block; width: 70%; height: 12px; border-radius: 999px; background: linear-gradient(90deg, var(--primary-light) 25%, #fff 50%, var(--primary-light) 75%); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
.music-retry { cursor: pointer; justify-content: center; color: var(--danger); font-size: .85em; }

/* 图片懒加载骨架 */
img.img-loading { background: linear-gradient(90deg, var(--primary-light) 25%, #fff 50%, var(--primary-light) 75%); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; color: transparent; }
.detail-img.img-loading { display: block; min-height: 180px; }
img.img-loaded { animation: imgFade .35s ease; }
@keyframes imgFade { from { opacity: .35; } to { opacity: 1; } }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* 上传：总进度 + 服务端处理中 */
.upload-total { margin: 10px 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--primary-bg); }
.upload-total[hidden] { display: none !important; }
.upload-total-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; font-size: .85em; color: var(--text-2); }
.upload-total-track { height: 8px; border-radius: 999px; background: var(--primary-light); overflow: hidden; }
.upload-total-track i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--primary), var(--accent)); transition: width .2s ease; }
.upload-panel-fill.indeterminate { width: 35% !important; animation: aiIndeterminate 1.1s ease-in-out infinite; }

/* 列表无限滚动加载提示 */
.list-loader { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 0; color: var(--muted); font-size: .85em; }
.list-loader-bar { position: relative; width: 160px; max-width: 40vw; height: 4px; border-radius: 999px; background: var(--primary-light); overflow: hidden; }
.list-loader-bar i { display: block; width: 35%; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--primary), var(--accent)); animation: aiIndeterminate 1.1s ease-in-out infinite; }
.list-loader.retry { cursor: pointer; color: var(--danger); }

/* 视频缓冲遮罩 */
.video-wrap { position: relative; margin: 10px 0; }
.video-wrap .video-player { margin: 0; }
.video-loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border-radius: var(--radius-sm); background: rgba(8, 15, 30, .45); color: #fff; font-size: .85em; pointer-events: none; }
.video-loading[hidden] { display: none !important; }
.video-loading-track { width: 180px; max-width: 70%; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, .28); overflow: hidden; }
.video-loading-track i { display: block; height: 100%; width: 0; border-radius: 999px; background: #fff; transition: width .2s ease; }

body.theme-night .music-skeleton-line, body.theme-slate .music-skeleton-line, body.theme-midnight .music-skeleton-line,
body.theme-night img.img-loading, body.theme-slate img.img-loading, body.theme-midnight img.img-loading { background: linear-gradient(90deg, #1c2942 25%, #243451 50%, #1c2942 75%); background-size: 200% 100%; }

@media (prefers-reduced-motion: reduce) {
  .page-progress.run i, .music-skeleton-line, img.img-loading, .list-loader-bar i, .upload-panel-fill.indeterminate, .upload-spin, .settings-row-body { animation: none !important; }
  .settings-row::details-content { transition: none !important; }
}

/* ============================================================
   后台 Entropy 风格（仅作用于 body.is-admin，前台不受影响）
   特征：浅灰背景 + 白卡片 + 白侧边栏 + 蓝主色 + 圆角柔和阴影
   ============================================================ */
body.is-admin {
  --primary: #3e7bfd;
  --primary-hover: #2f6bf0;
  --primary-dark: #1f56e0;
  --primary-light: #eaf1ff;
  --primary-bg: #f4f8ff;
  --text: #1f2430;
  --text-2: #4a5568;
  --text-blue: #1a2233;
  --muted: #8a94a6;
  --border: #e7ebf3;
  --card-bg: #ffffff;
  --card-solid: #ffffff;
  --bg: #f3f5f9;
  --sidebar-bg: #ffffff;
  --accent: #3e7bfd;
  --shadow: 0 2px 14px rgba(20, 40, 90, .06);
  --shadow-lg: 0 10px 30px rgba(20, 40, 90, .10);
  --radius: 12px;
  --radius-sm: 8px;
}
body.is-admin .aurora { display: none; }
body.is-admin .container { animation: none; }

/* 侧边栏：白底浅色 */
body.is-admin .sidebar { border-right: 1px solid #eceff5; box-shadow: none; color: #3a4358; }
body.is-admin .side-brand { color: #1a2233; border-bottom: 1px solid #eef1f6; }
body.is-admin .brand-mark { background: linear-gradient(135deg, #4f8ef7, #3e7bfd); box-shadow: 0 6px 16px rgba(62, 123, 253, .32); }
body.is-admin .brand-text b { color: #1a2233; }
body.is-admin .brand-text small { color: #98a2b3; }
body.is-admin .side-scroll::-webkit-scrollbar-thumb { background: #dbe0ea; }
body.is-admin .side-group-head { color: #8a94a6; font-weight: 600; }
body.is-admin .side-group-head:hover { background: #f5f7fb; color: #1a2233; }
body.is-admin .side-group-head .caret { color: #c3cad8; }
body.is-admin .side-group[open] > .side-group-head { color: #1a2233; }
body.is-admin .side-group[open] > .side-group-head .caret { color: #3e7bfd; }
body.is-admin .side-group-count { color: #98a2b3; background: #eef1f6; }
body.is-admin .side-subgroup-head { color: #8a94a6; }
body.is-admin .side-subgroup-head:hover { background: #f5f7fb; color: #1a2233; }
body.is-admin .side-subgroup-head .caret { color: #c3cad8; }
body.is-admin .side-subgroup[open] > .side-subgroup-head { color: #1a2233; }
body.is-admin .side-subgroup[open] > .side-subgroup-head .caret { color: #3e7bfd; }
body.is-admin .side-link { color: #4a5568; }
body.is-admin .side-link i { color: #8a94a6; }
body.is-admin .side-link:hover { background: #f0f5ff; color: #3e7bfd; }
body.is-admin .side-link:hover i { color: #3e7bfd; }
body.is-admin .side-link.active { background: #eaf1ff; color: #3e7bfd; box-shadow: none; font-weight: 600; }
body.is-admin .side-link.active i { color: #3e7bfd; }
body.is-admin .side-link.active::before { background: #3e7bfd; }
body.is-admin .side-foot { border-top: 1px solid #eef1f6; }
body.is-admin .side-user { background: #f5f7fb; border: 1px solid #eef1f6; }
body.is-admin .side-user-info b { color: #1a2233; }
body.is-admin .side-logout { color: #b7c0d0; }
body.is-admin .side-logout:hover { color: #fff; background: rgba(239, 68, 68, .15); }
body.is-admin .side-foot .btn-ghost { color: #4a5568; }

/* 顶栏：白底 */
body.is-admin .topbar { background: #ffffff; backdrop-filter: none; border-bottom: 1px solid #eef1f6; box-shadow: 0 1px 8px rgba(20, 40, 90, .04); }
body.is-admin .crumbs .current { color: #1a2233; }
body.is-admin .user-chip { background: #fff; border: 1px solid #eef1f6; }

/* 卡片：纯白，去毛玻璃与 hover 上浮 */
body.is-admin .card { background: #fff; backdrop-filter: none; border: 1px solid #eef1f6; box-shadow: var(--shadow); }
body.is-admin .card:hover { transform: none; box-shadow: 0 4px 18px rgba(20, 40, 90, .08); border-color: #e6ebf5; }
body.is-admin .card h3 { color: #1a2233; }
body.is-admin .card h3 i { color: #3e7bfd; }
body.is-admin .stat-card { background: #fff; backdrop-filter: none; border: 1px solid #eef1f6; }
body.is-admin .stat-card:hover { transform: none; }
body.is-admin .stat-card i { color: #3e7bfd; animation: none; }
body.is-admin .stat-card b { color: #1a2233; }
body.is-admin .strip-item { background: #fff; backdrop-filter: none; border: 1px solid #eef1f6; }
body.is-admin .strip-item:hover { transform: none; }

/* 标题 / 选项卡 */
body.is-admin .page-title { color: #1a2233; }
body.is-admin .section-title { color: #1a2233; }
body.is-admin .tab { background: #fff; }
body.is-admin .tab.active { background: #3e7bfd; color: #fff; border-color: #3e7bfd; }

/* 表单输入：浅灰底 */
body.is-admin .input { background: #f5f7fa; border: 1px solid #e5e9f2; color: #1f2430; }
body.is-admin .input:focus { border-color: #3e7bfd; box-shadow: 0 0 0 3px rgba(62, 123, 253, .15); animation: none; }
body.is-admin .file-picker { background: #f7f9fc; }

/* 表格：白底 + 浅表头 */
body.is-admin .table th { background: #f7f8fa; border-bottom: 1px solid #eef1f6; color: #4a5568; }
body.is-admin .table td { border-bottom: 1px solid #f0f2f6; }

/* 设置折叠行 / 管理行 / 日志 */
body.is-admin .settings-list { background: #fff; border: 1px solid #eef1f6; }
body.is-admin .settings-row { background: #fff; }
body.is-admin .settings-row > summary:hover { background: #f7f9fd; }
body.is-admin .settings-row-body { border-top: 1px solid #f0f2f6; }
body.is-admin .log-action { background: #eaf1ff; color: #3e7bfd; }
body.is-admin .ticket-reply { background: #eaf1ff; }

/* 手机侧边抽屉同步白底 */
@media (max-width: 767px) {
  body.is-admin .sidebar { background: #fff; border-right: 1px solid #eceff5; }
}

/* ============================================================
   后台 Entropy 新外壳（顶部模块 tabs + 左侧二级菜单 + 白卡片）
   类名以 .admin-* 为前缀，仅 body.is-admin 下渲染
   ============================================================ */
body.is-admin { background: #f3f5f9; }

/* 顶栏：品牌 | 模块 tabs | 右侧工具 */
.admin-topbar {
  position: sticky; top: 0; z-index: 200;
  display: flex; align-items: center; gap: 18px;
  min-height: 58px; padding: 8px 20px;
  background: #fff; border-bottom: 1px solid #eef1f6; box-shadow: 0 1px 8px rgba(20,40,90,.04);
}
.admin-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; text-decoration: none; }
.admin-brand-name { display: flex; flex-direction: column; line-height: 1.15; font-weight: 700; color: #1a2233; font-size: 1.02em; }
.admin-brand-name small { font-weight: 500; font-size: .62em; color: #98a2b3; letter-spacing: 1px; }
.brand-mark.sm { width: 34px; height: 34px; border-radius: 10px; font-size: 1em; }

/* 模块 tabs（横向一级导航） */
.admin-tabs { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; overflow-x: auto; }
.admin-tabs::-webkit-scrollbar { height: 0; }
.admin-tab {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 9px 15px; border-radius: 9px; color: #4a5568; font-size: .9em; font-weight: 600;
  text-decoration: none; transition: background .18s, color .18s; flex-shrink: 0;
}
.admin-tab i { font-size: 1em; }
.admin-tab:hover { background: #f0f5ff; color: #3e7bfd; }
.admin-tab.active { background: #eaf1ff; color: #3e7bfd; }
.admin-tab.active i { color: #3e7bfd; }

.admin-topbar-right { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-shrink: 0; }
.admin-back {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 9px;
  background: #f5f7fb; color: #4a5568; font-size: .85em; font-weight: 600; text-decoration: none; border: 1px solid #eef1f6;
}
.admin-back:hover { background: #3e7bfd; color: #fff; border-color: #3e7bfd; }

/* 主体：左侧二级菜单 + 右侧内容 */
.admin-body { display: flex; align-items: flex-start; min-height: calc(100vh - 58px); }
.admin-side {
  width: 218px; flex-shrink: 0; padding: 18px 14px;
  background: #fff; border-right: 1px solid #eef1f6;
  position: sticky; top: 58px; max-height: calc(100vh - 58px); overflow-y: auto;
}
.admin-side-title {
  font-size: .72em; font-weight: 700; letter-spacing: .8px; color: #98a2b3;
  text-transform: uppercase; padding: 4px 12px 8px;
}
.admin-side-link {
  position: relative; display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 9px; margin-bottom: 3px;
  color: #4a5568; font-size: .9em; font-weight: 500; text-decoration: none;
  transition: background .18s, color .18s;
}
.admin-side-link i { width: 20px; text-align: center; font-size: 1em; color: #8a94a6; transition: color .18s; }
.admin-side-link span { pointer-events: none; }
.admin-side-link:hover { background: #f0f5ff; color: #3e7bfd; }
.admin-side-link:hover i { color: #3e7bfd; }
.admin-side-link.active { background: #eaf1ff; color: #3e7bfd; font-weight: 600; }
.admin-side-link.active i { color: #3e7bfd; }
.admin-side-link.active::before { content: ''; position: absolute; left: -14px; top: 50%; transform: translateY(-50%); width: 3px; height: 18px; border-radius: 3px; background: #3e7bfd; }

.admin-content { flex: 1; min-width: 0; padding: 22px 24px 46px; }

/* 手机：左侧菜单收起，模块 tabs 成为主要导航 */
@media (max-width: 767px) {
  .admin-body { flex-direction: column; }
  .admin-side { position: static; width: 100%; max-height: none; border-right: none; border-bottom: 1px solid #eef1f6; padding: 10px 14px; }
  .admin-side-title { display: none; }
  .admin-side-link.active::before { display: none; }
  .admin-topbar { gap: 10px; }
  .admin-brand-name { display: none; }
  .admin-content { padding: 16px 14px 40px; }
}

/* ============================================================
   前台 Entropy 浅色风（body.style-light）：与后台同套浅色观感，
   与默认玻璃拟态切换（cookie rp_style=light 时启用）
   ============================================================ */
body.style-light {
  --primary: #3e7bfd; --primary-hover: #2f6bf0; --primary-dark: #1f56e0;
  --primary-light: #eaf1ff; --primary-bg: #f4f8ff;
  --text: #1f2430; --text-2: #4a5568; --text-blue: #1a2233; --muted: #8a94a6;
  --border: #e7ebf3; --card-bg: #ffffff; --card-solid: #ffffff;
  --bg: #f3f5f9; --sidebar-bg: #ffffff;
  --accent: #3e7bfd; --shadow: 0 2px 14px rgba(20,40,90,.06); --shadow-lg: 0 10px 30px rgba(20,40,90,.10);
  --radius: 12px; --radius-sm: 8px;
}
body.style-light .aurora { display: none; }
body.style-light .sidebar { border-right: 1px solid #eceff5; box-shadow: none; color: #3a4358; }
body.style-light .side-brand { color: #1a2233; border-bottom: 1px solid #eef1f6; }
body.style-light .brand-mark { background: linear-gradient(135deg, #4f8ef7, #3e7bfd); box-shadow: 0 6px 16px rgba(62,123,253,.32); }
body.style-light .brand-text b { color: #1a2233; }
body.style-light .brand-text small { color: #98a2b3; }
body.style-light .side-group-head, body.style-light .side-subgroup-head { color: #8a94a6; }
body.style-light .side-group-head:hover, body.style-light .side-subgroup-head:hover { background: #f5f7fb; color: #1a2233; }
body.style-light .side-group[open] > .side-group-head, body.style-light .side-subgroup[open] > .side-subgroup-head { color: #1a2233; }
body.style-light .side-group-count { color: #98a2b3; background: #eef1f6; }
body.style-light .side-link { color: #4a5568; }
body.style-light .side-link i { color: #8a94a6; }
body.style-light .side-link:hover { background: #f0f5ff; color: #3e7bfd; }
body.style-light .side-link:hover i { color: #3e7bfd; }
body.style-light .side-link.active { background: #eaf1ff; color: #3e7bfd; box-shadow: none; font-weight: 600; }
body.style-light .side-link.active i { color: #3e7bfd; }
body.style-light .side-link.active::before { background: #3e7bfd; }
body.style-light .side-foot { border-top: 1px solid #eef1f6; }
body.style-light .side-user { background: #f5f7fb; border: 1px solid #eef1f6; }
body.style-light .side-user-info b { color: #1a2230; }
body.style-light .topbar { background: #fff; backdrop-filter: none; border-bottom: 1px solid #eef1f6; box-shadow: 0 1px 8px rgba(20,40,90,.04); }
body.style-light .mobile-topbar { background: #fff; border-bottom-color: #eef1f6; }
body.style-light .card { background: #fff; backdrop-filter: none; border: 1px solid #eef1f6; box-shadow: var(--shadow); }
body.style-light .card:hover { transform: none; box-shadow: 0 4px 18px rgba(20,40,90,.08); border-color: #e6ebf5; }
body.style-light .card h3 { color: #1a2233; }
body.style-light .stat-card { background: #fff; backdrop-filter: none; border: 1px solid #eef1f6; }
body.style-light .stat-card i { color: #3e7bfd; animation: none; }
body.style-light .stat-card b { color: #1a2233; }
body.style-light .strip-item { background: #fff; backdrop-filter: none; border: 1px solid #eef1f6; }
body.style-light .input { background: #f5f7fa; border: 1px solid #e5e9f2; color: #1f2430; }
body.style-light .input:focus { border-color: #3e7bfd; box-shadow: 0 0 0 3px rgba(62,123,253,.15); animation: none; }
body.style-light .table th { background: #f7f8fa; border-bottom: 1px solid #eef1f6; color: #4a5568; }
body.style-light .table td { border-bottom: 1px solid #f0f2f6; }
body.style-light .page-title, body.style-light .section-title { color: #1a2233; }
/* 切换按钮：浅色模式下高亮 */
.style-toggle.on { color: #3e7bfd; background: #eaf1ff; }