/* ============================================================
   璃呸开源云 · 液态玻璃风格（浅色主题）
   复刻「璃呸液态玻璃」WebGL 材质：毛玻璃、折射、高光、弹簧动画
   ============================================================ */

:root {
  --bg-1: #eef2f7;
  --bg-2: #f5f7fb;
  --glass: rgba(255, 255, 255, 0.72);
  --glass-strong: rgba(255, 255, 255, 0.88);
  --glass-border: rgba(255, 255, 255, 0.6);
  --glass-border-soft: rgba(255, 255, 255, 0.35);
  --text: #1c1c1e;
  --text-1: #1c1c1e;   /* 与 --text 同值，兼容早期样式引用 */
  --text-2: #6e6e73;
  --text-3: #aeaeb2;
  --line: rgba(60, 60, 67, 0.12);
  --fill: #f2f2f7;
  --blue: #007aff;
  --blue-press: #0066d6;
  --blue-soft: rgba(0, 122, 255, 0.12);
  --green: #34c759;
  --red: #ff3b30;
  --orange: #ff9500;
  --purple: #af52de;
  --radius: 20px;
  --radius-lg: 28px;
  --ease-ios: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-spring: cubic-bezier(0.17, 0.9, 0.24, 1.18);
  --shadow-card: 0 12px 40px -12px rgba(31, 38, 135, 0.18),
                 0 4px 12px -6px rgba(31, 38, 135, 0.08);
  --shadow-glow: 0 8px 32px -8px rgba(0, 122, 255, 0.45);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC",
               "Microsoft YaHei", system-ui, sans-serif;
  color: var(--text);
  background: var(--bg-1);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* 动态背景光斑（模拟 WebGL 版的动态光斑） */
body::before,
body::after {
  content: "";
  position: fixed;
  border-radius: 50%;
  opacity: 0.30;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
  animation: blobFloat 26s ease-in-out infinite;
}
body::before {
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(165,200,255,0.55), transparent 72%);
  top: -140px; left: -120px;
}
body::after {
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(255,214,224,0.5), transparent 72%);
  bottom: -140px; right: -120px;
  animation-delay: -13s;
}
@keyframes blobFloat {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(36px, -28px, 0) scale(1.06); }
}

button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
input { font: inherit; }
a { color: var(--blue); text-decoration: none; }

/* ---------- 玻璃卡片 ---------- */
.glass {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.glass-strong {
  background: var(--glass-strong);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

/* ---------- 顶部导航 ----------
 * 挤压规则（关键）：整条导航里「只有标题和昵称允许收缩」，收缩时出省略号；
 * 头像/徽章/退出按钮一律 flex-shrink:0 + nowrap，永不换行、永不变形。
 * 之前没有这条纪律，标签一多就把头像压成椭圆、把中文断成竖排。
 */
.topbar {
  position: sticky; top: 0; z-index: 50;
  padding: 12px 22px;
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--glass-border-soft);
}
.topbar .user-area { display: flex; align-items: center; gap: 10px; flex: 0 1 auto; min-width: 0; }
.topbar .avatar {
  flex: 0 0 36px;
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, #34c759, #30b0c7);
  color: #fff; display: grid; place-items: center;
  font-size: 14px; font-weight: 600; overflow: hidden;
}
.topbar .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.topbar .user-name {
  font-size: 14px; font-weight: 500;
  min-width: 0; max-width: 180px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar .user-area .role-badge,
.topbar .user-area .enterprise-badge { flex: 0 0 auto; white-space: nowrap; margin-left: 0; }
/* 企业名可能很长，窄屏下给出上限并省略号，避免铭牌把整条导航顶出屏幕 */
.topbar .user-area .enterprise-badge { max-width: 9em; overflow: hidden; text-overflow: ellipsis; }
.topbar .btn-logout {
  flex: 0 0 auto; white-space: nowrap;
  font-size: 13px; color: var(--text-2); padding: 6px 12px;
  border-radius: 10px; transition: all 0.2s;
}
.topbar .btn-logout:hover { background: var(--fill); color: var(--red); }
.topbar .btn-glass { flex: 0 0 auto; white-space: nowrap; }

/* ---------- 主容器 ---------- */
.container {
  position: relative; z-index: 1;
  max-width: 1024px; margin: 0 auto;
  padding: 24px 24px 60px;
  width: 100%;
}

/* ---------- 应用外壳：后台式侧边栏布局 ---------- */
.app-shell { display: flex; min-height: 100vh; }
.app-sidebar {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: 264px; z-index: 80;
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.82));
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-right: 1px solid var(--glass-border);
  display: flex; flex-direction: column;
  transition: transform 0.28s var(--ease-ios);
}
.app-main {
  flex: 1; margin-left: 264px; min-width: 0;
  display: flex; flex-direction: column;
}
.app-scrim { display: none; }
.app-brand {
  display: flex; align-items: center; gap: 10px;
  height: 64px; padding: 0 20px;
  border-bottom: 1px solid var(--glass-border-soft);
  flex-shrink: 0; min-width: 0;
}
.app-brand .logo {
  flex: 0 0 36px; width: 36px; height: 36px; border-radius: 11px;
  background: linear-gradient(135deg, #007aff, #5856d6);
  display: grid; place-items: center; color: #fff;
  box-shadow: 0 6px 16px -4px rgba(0,122,255,0.5);
}
.app-brand h1 {
  font-size: 17px; font-weight: 700; letter-spacing: -0.3px;
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.app-nav {
  flex: 1; overflow-y: auto; padding: 14px 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.app-nav .tab {
  display: flex; align-items: center; gap: 12px;
  height: 46px; padding: 0 14px;
  border-radius: 12px; font-size: 14px; font-weight: 500;
  color: var(--text-2); text-align: left;
  transition: background 0.2s var(--ease-ios), color 0.2s var(--ease-ios);
  white-space: nowrap;
}
.app-nav .tab .ico { width: 20px; height: 20px; flex: 0 0 auto; }
.app-nav .tab:hover { background: rgba(120,120,128,0.08); color: var(--text); }
.app-nav .tab.active {
  background: linear-gradient(135deg, rgba(0,122,255,0.14), rgba(88,86,214,0.14));
  color: var(--blue); font-weight: 600;
}
.app-sidebar-foot {
  border-top: 1px solid var(--glass-border-soft);
  padding: 12px; display: flex; flex-direction: column; gap: 4px;
  flex-shrink: 0;
}
.app-sidebar-foot a {
  display: flex; align-items: center; gap: 12px;
  height: 44px; padding: 0 14px; border-radius: 12px;
  font-size: 14px; font-weight: 500; color: var(--text-2);
  text-decoration: none; white-space: nowrap;
  transition: background 0.2s var(--ease-ios), color 0.2s var(--ease-ios);
}
.app-sidebar-foot a .ico { width: 20px; height: 20px; flex: 0 0 auto; }
.app-sidebar-foot a:hover { background: rgba(120,120,128,0.08); color: var(--text); }

.app-toggle {
  display: none;
  width: 40px; height: 40px; border-radius: 12px;
  place-items: center;
  color: var(--text-2); background: var(--glass);
  border: 1px solid var(--glass-border);
  transition: background 0.2s var(--ease-ios), color 0.2s var(--ease-ios);
  flex-shrink: 0;
}
.app-toggle:hover { background: var(--fill); color: var(--blue); }
.topbar-title {
  font-size: 17px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar-spacer { flex: 1; }

@media (max-width: 900px) {
  .app-sidebar { transform: translateX(-100%); width: 280px; }
  .app-main { margin-left: 0; }
  .app-toggle { display: grid; }
  .app-scrim { position: fixed; inset: 0; z-index: 75; background: rgba(0,0,0,0.4); backdrop-filter: blur(2px); }
  .app-shell.app-open .app-sidebar { transform: translateX(0); }
  .app-shell.app-open .app-scrim { display: block; }
}

/* ---------- 玻璃按钮 ---------- */
.btn-glass {
  position: relative;
  height: 48px; padding: 0 24px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(0,122,255,0.95), rgba(88,86,214,0.92));
  color: #fff; font-size: 16px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  overflow: hidden;
  transition: transform 0.25s var(--ease-ios), box-shadow 0.25s var(--ease-ios);
  box-shadow: 0 10px 26px -10px rgba(0,122,255,0.7),
              inset 0 1px 0 rgba(255,255,255,0.3);
}
.btn-glass::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 50%;
  background: linear-gradient(to bottom, rgba(255,255,255,0.25), transparent);
  border-radius: 999px 999px 0 0;
}
.btn-glass:hover { transform: translateY(-2px); box-shadow: 0 14px 32px -10px rgba(0,122,255,0.8), inset 0 1px 0 rgba(255,255,255,0.3); }
.btn-glass:active { transform: scale(0.97); }
.btn-glass:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn-ghost {
  height: 44px; padding: 0 20px;
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  color: var(--text); font-size: 15px; font-weight: 500;
  transition: all 0.25s var(--ease-ios);
}
.btn-ghost:hover { background: var(--glass-strong); transform: translateY(-1px); }
.btn-ghost:active { transform: scale(0.97); }

/* ---------- 玻璃开关（复刻 WebGL toggle） ---------- */
.switch {
  position: relative;
  width: 56px; height: 32px;
  border-radius: 999px;
  background: rgba(120,120,128,0.32);
  transition: background 0.3s var(--ease-ios);
  cursor: pointer;
  flex-shrink: 0;
}
.switch::after {
  content: ""; position: absolute;
  top: 3px; left: 3px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 3px 8px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.1);
  transition: transform 0.3s var(--ease-spring), box-shadow 0.3s;
}
.switch.on { background: var(--green); }
.switch.on::after { transform: translateX(24px); }
.switch:active::after { transform: scale(0.92); }
.switch.on:active::after { transform: translateX(24px) scale(0.92); }

/* ---------- 输入框 ---------- */
.field {
  position: relative;
  height: 52px;
  display: flex; align-items: center;
  background: var(--fill);
  border: 1.5px solid transparent;
  border-radius: 14px;
  padding: 0 14px;
  transition: all 0.25s var(--ease-ios);
}
.field:focus-within {
  background: #fff;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px var(--blue-soft);
}
.field input {
  flex: 1; min-width: 0;
  border: 0; outline: 0; background: none;
  font-size: 16px; color: var(--text);
}
.field input::placeholder { color: var(--text-3); }

/* ---------- 页面标题区 ---------- */
.page-header { text-align: center; padding: 8px 0 24px; }
.page-header h2 { font-size: 26px; font-weight: 700; letter-spacing: -0.5px; }
.page-header p { margin-top: 8px; font-size: 14px; color: var(--text-2); line-height: 1.5; }

/* ---------- 文件卡片网格 ---------- */
.file-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.file-card {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  padding: 16px;
  transition: transform 0.3s var(--ease-ios), box-shadow 0.3s;
  box-shadow: 0 4px 16px -6px rgba(31,38,135,0.1);
  display: flex; flex-direction: column;
}
.file-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px -8px rgba(31,38,135,0.18);
}
.file-card .icon {
  width: 48px; height: 48px; border-radius: 14px;
  display: grid; place-items: center;
  margin-bottom: 12px;
}
.file-card:hover .file-tile { transform: translateY(-2px) scale(1.05); }
.file-card .name {
  font-size: 14px; font-weight: 600; color: var(--text);
  line-height: 1.4; margin-bottom: 6px;
  word-break: break-all;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.file-card .meta {
  font-size: 12px; color: var(--text-2);
  display: flex; justify-content: space-between; align-items: center;
  margin-top: auto; padding-top: 10px;
}
/* 卡片底部同样的挤压纪律：左侧（昵称+角色/企业徽章）可收缩并省略号，右侧日期固定不换行，
   避免窄卡片里徽章文字被挤成竖排 */
.file-card .meta > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-card .meta > span:last-child { flex: 0 0 auto; white-space: nowrap; }
.file-card .meta .role-badge,
.file-card .meta .enterprise-badge { white-space: nowrap; }
.file-card .actions {
  display: flex; gap: 8px; margin-top: 10px;
}
.file-card .actions button {
  flex: 1; height: 34px; border-radius: 10px;
  font-size: 13px; font-weight: 500;
  transition: all 0.2s;
}
.file-card .btn-dl {
  background: var(--blue); color: #fff;
}
.file-card .btn-dl:hover { background: var(--blue-press); }
.file-card .btn-dl:active { transform: scale(0.96); }
.file-card .btn-del {
  background: rgba(255,59,48,0.1); color: var(--red);
}
.file-card .btn-del:hover { background: rgba(255,59,48,0.18); }
.file-card .btn-share {
  background: rgba(52,199,89,0.12); color: var(--green);
}
.file-card .btn-share:hover { background: rgba(52,199,89,0.22); }
.file-card .btn-share:active { transform: scale(0.96); }

/* ---------- 身份铭牌 ---------- */
.role-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.5px;
  line-height: 1.4;
  vertical-align: middle;
  margin-left: 4px;
}

/* ---------- 企业铭牌（金色） ---------- */
.enterprise-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  color: #6b4f00;
  letter-spacing: 0.5px;
  line-height: 1.4;
  vertical-align: middle;
  margin-left: 4px;
  background: linear-gradient(135deg, #ffecb3, #ffd54f 45%, #f7b500);
  box-shadow: 0 1px 3px rgba(180, 130, 0, 0.35);
}

/* ---------- VIP 铭牌（紫金渐变） ---------- */
.vip-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.5px;
  line-height: 1.4;
  vertical-align: middle;
  margin-left: 4px;
  background: linear-gradient(135deg, #a78bfa, #f0abfc 50%, #fbbf24);
  box-shadow: 0 1px 3px rgba(167, 139, 250, 0.4);
}

/* ---------- VIP 专享标签 ---------- */
.vip-only-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 7px;
  border-radius: 7px;
  font-size: 10px;
  font-weight: 700;
  color: #7c3aed;
  background: rgba(167, 139, 250, 0.16);
  border: 1px solid rgba(167, 139, 250, 0.4);
  white-space: nowrap;
}

/* ---------- VIP 会员卡片 ---------- */
.vip-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 16px 18px;
  margin-bottom: 20px;
}
.vip-main {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}
.vip-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}
.vip-label .ico { color: var(--purple); }
.vip-status {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #a78bfa, #f0abfc 50%, #fbbf24);
  box-shadow: 0 1px 3px rgba(167, 139, 250, 0.4);
  white-space: nowrap;
}
.vip-status.off {
  background: var(--fill);
  color: var(--text-2);
  box-shadow: none;
}
.vip-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.redeem-input {
  width: 150px;
  height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 13px;
  border: 1px solid var(--glass-border);
  background: var(--glass);
  color: var(--text);
  outline: none;
  transition: border-color 0.2s var(--ease-ios), box-shadow 0.2s var(--ease-ios);
}
.redeem-input::placeholder { color: var(--text-3); }
.redeem-input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-soft);
}

/* ---------- VIP 购买弹窗 ---------- */
.vip-modal { max-width: 460px; }
.vip-tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0 4px;
}
.vip-tier {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 12px;
  border-radius: 16px;
  background: var(--glass);
  border: 1.5px solid var(--glass-border);
  cursor: pointer;
  text-align: center;
  transition: transform 0.25s var(--ease-ios), border-color 0.25s var(--ease-ios),
              box-shadow 0.25s var(--ease-ios);
}
.vip-tier:hover {
  transform: translateY(-2px);
  border-color: var(--blue);
}
.vip-tier.selected {
  border-color: var(--purple);
  background: linear-gradient(180deg, rgba(175, 82, 222, 0.14), rgba(251, 191, 36, 0.14));
  box-shadow: 0 10px 24px -12px rgba(175, 82, 222, 0.55);
}
.vt-label { font-size: 14px; font-weight: 700; color: var(--text); }
.vt-price { font-size: 15px; font-weight: 700; color: var(--orange); }
.vt-price small { font-size: 11px; font-weight: 500; color: var(--text-2); }

/* 顶栏中的 VIP 铭牌与其它铭牌对齐（不额外挤占间距） */
.topbar .user-area .vip-badge { margin-left: 0; }

/* ---------- 聊天室入口 ---------- */
.chat-entry {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  margin-bottom: 20px;
  cursor: pointer;
  transition: transform 0.25s var(--ease-ios), box-shadow 0.25s;
}
.chat-entry:hover { transform: translateY(-2px); box-shadow: 0 16px 44px -14px rgba(31,38,135,0.22); }
.chat-entry:active { transform: scale(0.98); }
.chat-entry-icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(0,122,255,0.18), rgba(175,82,222,0.18));
  display: grid; place-items: center;
  font-size: 24px;
  flex-shrink: 0;
}
.chat-entry-text { flex: 1; min-width: 0; }
.chat-entry-title { font-size: 16px; font-weight: 700; color: var(--text); }
.chat-entry-desc { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.chat-entry-arrow {
  font-size: 26px; color: var(--text-3); font-weight: 300;
  flex-shrink: 0;
}

/* ---------- 上传区 ---------- */
.upload-area {
  border: 2px dashed rgba(0,122,255,0.3);
  border-radius: 20px;
  padding: 40px 24px;
  text-align: center;
  background: rgba(255,255,255,0.6);
  transition: border-color 0.3s var(--ease-ios), background 0.3s var(--ease-ios), transform 0.3s var(--ease-ios);
  cursor: pointer;
}
.upload-area:hover, .upload-area.dragover {
  border-color: var(--blue);
  background: var(--blue-soft);
  transform: scale(1.01);
}
.upload-area .icon { font-size: 40px; margin-bottom: 10px; }
.upload-area h3 { font-size: 16px; margin-bottom: 6px; }
.upload-area p { font-size: 13px; color: var(--text-2); }

/* ---------- 文件卡片可点击与标签 ---------- */
.file-card { cursor: pointer; }
.file-card .card-tags {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.file-card .cat-tag,
.file-card .version-tag {
  display: inline-block; padding: 2px 8px; border-radius: 6px;
  font-size: 11px; font-weight: 500;
}
.file-card .cat-tag { background: rgba(0,122,255,.12); color: var(--blue); }
.file-card .version-tag { background: rgba(175,82,222,.12); color: var(--purple); }

/* ---------- 上传表单 ---------- */
.upload-form {
  padding: 20px;
}
.form-group {
  margin-bottom: 18px;
}
.form-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}
.form-label .req {
  color: var(--red);
  margin-left: 2px;
}
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 14px;
  background: rgba(255,255,255,0.6);
  color: var(--text);
  transition: all 0.25s;
  outline: none;
  font-family: inherit;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--blue);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(0,122,255,.12);
}
.form-textarea {
  resize: vertical;
  min-height: 60px;
  line-height: 1.6;
}
.form-hint {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 6px;
}

/* 截图上传器 */
.screenshot-uploader {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.screenshot-preview {
  position: relative;
  width: 100%;
  max-width: 320px;
  border-radius: 14px;
  overflow: hidden;
  border: 1.5px solid var(--line);
  background: var(--fill);
}
.screenshot-preview img {
  width: 100%;
  display: block;
}
.shot-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  color: #fff;
  font-size: 14px;
  display: grid;
  place-items: center;
  cursor: pointer;
  border: none;
}
.shot-remove:hover { background: rgba(255,59,48,0.85); }
.shot-pick-btn {
  height: 42px;
  padding: 0 18px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px;
}

/* 协议勾选 */
.agreement-box {
  background: rgba(0,122,255,.05);
  border: 1px solid rgba(0,122,255,.15);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 18px;
}
.agreement-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  margin-bottom: 10px;
  line-height: 1.5;
}
.agreement-item:last-child { margin-bottom: 0; }
.agreement-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  flex-shrink: 0;
  accent-color: var(--blue);
  cursor: pointer;
}
.agreement-item a {
  color: var(--blue);
  text-decoration: none;
}
.agreement-item a:hover { text-decoration: underline; }

/* 上传提交按钮 */
.upload-submit {
  width: 100%;
  height: 52px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 600;
}

/* 协议弹窗 */
.agreement-modal {
  max-width: 480px;
}
.agreement-content {
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-2);
  max-height: 50vh;
  overflow-y: auto;
  padding: 4px 2px;
  margin-bottom: 16px;
}

/* ---------- 分页 ---------- */
.pagination {
  display: flex; justify-content: center; align-items: center;
  gap: 8px; margin-top: 24px; flex-wrap: wrap;
}
.pagination button {
  min-width: 38px; height: 38px; padding: 0 12px;
  border-radius: 10px; font-size: 14px; font-weight: 500;
  background: var(--glass);
  border: 1px solid var(--glass-border-soft);
  color: var(--text);
  transition: all 0.2s var(--ease-ios);
}
.pagination button:hover:not(:disabled):not(.active) {
  background: var(--blue-soft); color: var(--blue);
}
.pagination button.active {
  background: var(--blue); color: #fff;
  box-shadow: 0 4px 12px -2px rgba(0,122,255,0.5);
}
.pagination button:disabled { opacity: 0.4; cursor: not-allowed; }


/* ---------- Toast ---------- */
.toast {
  position: fixed; top: 70px; left: 50%;
  transform: translate(-50%, -16px);
  background: rgba(28,28,30,0.88);
  color: #fff; font-size: 14px; font-weight: 500;
  padding: 11px 22px; border-radius: 999px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s var(--ease-ios), transform 0.3s var(--ease-spring);
  z-index: 999; max-width: 90vw; text-align: center;
  box-shadow: 0 12px 30px -10px rgba(0,0,0,0.35);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 空状态 ---------- */
.empty {
  text-align: center; padding: 60px 20px;
  color: var(--text-3);
}
.empty .icon { font-size: 56px; margin-bottom: 16px; opacity: 0.5; }
.empty p { font-size: 14px; }

/* ---------- 搜索框 ---------- */
.search-bar {
  display: flex; gap: 10px; margin-bottom: 18px;
}
.search-bar .field { flex: 1; }

/* ---------- 统计横幅 ---------- */
.stats-banner {
  display: grid; grid-template-columns: 1fr; gap: 12px;
  margin-bottom: 20px;
}
.stat-item {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 16px; padding: 20px 16px;
  text-align: center;
}
.stat-item .num { font-size: 28px; font-weight: 800; color: var(--blue); }
.stat-item .label { font-size: 13px; color: var(--text-2); margin-top: 6px; }

/* ---------- 模态弹窗 ---------- */
.modal-mask {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,0.3);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s var(--ease-ios);
}
.modal-mask.show { opacity: 1; pointer-events: auto; }
.modal {
  background: var(--glass-strong);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 28px; width: 100%; max-width: 400px;
  box-shadow: 0 24px 60px -16px rgba(0,0,0,0.3);
  transform: scale(0.94);
  transition: transform 0.35s var(--ease-spring);
}
.modal-mask.show .modal { transform: scale(1); }
.modal h3 { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.modal p { font-size: 14px; color: var(--text-2); margin-bottom: 18px; }
.modal .field { margin-bottom: 14px; }
.modal-actions { display: flex; gap: 10px; margin-top: 18px; }
.modal-actions button { flex: 1; }

/* ---------- 响应式 ---------- */
@media (max-width: 480px) {
  .container { padding: 16px 12px 60px; }
  /* 手机端：整体尺寸收紧一档，并隐藏企业徽章（企业名在个人主页/文件卡片仍有显示），
     保证 logo + 标题 + 头像 + 昵称 + 角色 + 退出 能在一行内排开 */
  .topbar { padding: 10px 12px; gap: 8px; }
  .topbar .user-area { gap: 6px; }
  .topbar .avatar { flex: 0 0 32px; width: 32px; height: 32px; }
  .topbar .user-name { max-width: 72px; font-size: 13px; }
  .topbar .user-area .role-badge { font-size: 10px; padding: 1px 6px; letter-spacing: 0; }
  .topbar .user-area .enterprise-badge { display: none; }
  .topbar .btn-logout { font-size: 12px; padding: 6px 8px; }
  .file-grid { grid-template-columns: 1fr; }
  .page-header h2 { font-size: 22px; }
  .vip-card { flex-direction: column; align-items: stretch; }
  .vip-actions { width: 100%; }
  .redeem-input { flex: 1 1 100%; width: 100%; }
  .vip-tiers { grid-template-columns: 1fr; }
}

/* ---------- 商城 ---------- */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.shop-card {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  padding: 18px 16px;
  display: flex; flex-direction: column;
  transition: transform 0.3s var(--ease-ios), box-shadow 0.3s;
  box-shadow: 0 4px 16px -6px rgba(31,38,135,0.1);
}
.shop-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px -8px rgba(31,38,135,0.18); }
.shop-card .shop-icon {
  width: 48px; height: 48px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(0,122,255,0.12), rgba(88,86,214,0.08));
  display: grid; place-items: center;
  color: var(--blue);
  margin-bottom: 12px;
}
.shop-card .shop-name {
  font-size: 15px; font-weight: 700; color: var(--text);
  line-height: 1.4; margin-bottom: 6px; word-break: break-all;
}
.shop-card .shop-desc {
  font-size: 12px; color: var(--text-2);
  line-height: 1.5; min-height: 32px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; margin-bottom: 12px;
}
.shop-card .shop-meta {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px;
}
.shop-card .shop-price { font-size: 18px; font-weight: 700; color: var(--red); }
.shop-card .shop-stock { font-size: 12px; font-weight: 500; padding: 3px 8px; border-radius: 999px; }
.shop-card .shop-stock.in { background: rgba(52,199,89,0.14); color: var(--green); }
.shop-card .shop-stock.out { background: rgba(255,59,48,0.12); color: var(--red); }
.shop-card .shop-limit-row { margin: -6px 0 10px; }
.shop-card .shop-limit { display: inline-block; font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 999px; }
.shop-card .shop-limit.in { background: rgba(255,149,0,0.14); color: var(--orange); }
.shop-card .shop-limit.out { background: rgba(255,59,48,0.14); color: var(--red); font-weight: 600; }
.shop-card .shop-buy {
  height: 40px; border-radius: 12px; font-size: 14px;
  padding: 0; width: 100%;
}

/* ---------- 购买弹窗内嵌商品信息 ---------- */
.buy-product {
  background: var(--fill);
  border-radius: 14px;
  padding: 14px; margin: 14px 0;
}
.buy-product .bp-name { font-size: 16px; font-weight: 700; color: var(--text); }
.buy-product .bp-price { font-size: 22px; font-weight: 700; color: var(--red); margin-top: 6px; }
.buy-product .bp-stock { font-size: 12px; color: var(--text-2); margin-top: 4px; }

/* ---------- 发货结果弹窗 ---------- */
.deliver-card {
  background: var(--fill);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 4px;
}
.deliver-card .dl-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; padding: 4px 0;
}
.deliver-card .dl-row span { color: var(--text-2); }
.deliver-card .dl-row b { color: var(--text); font-weight: 600; max-width: 70%; text-align: right; word-break: break-all; }
.deliver-card .dl-content-label {
  font-size: 12px; color: var(--text-2);
  margin-top: 10px; margin-bottom: 6px;
}
.deliver-card textarea {
  width: 100%; padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;
  font-size: 13px;
  color: var(--text);
  resize: vertical;
  outline: none;
}

/* ---------- 订单卡片 ---------- */
.order-list { display: flex; flex-direction: column; gap: 12px; }
.order-card { padding: 16px; border-radius: 16px; }
.order-card .o-head {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 10px; border-bottom: 1px solid var(--line);
  margin-bottom: 10px;
}
.order-card .o-no { font-size: 12px; color: var(--text-2); word-break: break-all; }
.order-card .o-status { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.order-card .o-status.ok { background: rgba(52,199,89,0.14); color: var(--green); }
.order-card .o-status.fail { background: rgba(255,59,48,0.12); color: var(--red); }
.order-card .o-row {
  display: flex; justify-content: space-between;
  font-size: 13px; padding: 4px 0;
}
.order-card .o-row span { color: var(--text-2); }
.order-card .o-row b { color: var(--text); font-weight: 500; }
.order-card .o-content-label {
  font-size: 12px; color: var(--text-2);
  margin-top: 10px; margin-bottom: 6px;
}
.order-card .o-content {
  width: 100%; padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;
  font-size: 13px;
  color: var(--text);
  resize: vertical;
  outline: none;
}

/* ---------- 个人资料卡（我的页） ---------- */
.profile-card {
  display: flex; align-items: center; gap: 14px;
  padding: 18px; border-radius: 18px; margin-bottom: 20px;
}
.profile-avatar {
  width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #34c759, #30b0c7);
  color: #fff; display: grid; place-items: center;
  font-size: 22px; font-weight: 600; overflow: hidden;
}
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-info { flex: 1; min-width: 0; }
.profile-name { font-size: 17px; font-weight: 600; }
.profile-qq { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.profile-setting-btn {
  height: 36px; padding: 0 16px; font-size: 13px; flex-shrink: 0;
}

/* ---------- 设置弹窗 ---------- */
.setting-modal { max-width: 420px; }
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
}
.modal-head h3 { margin-bottom: 0; display: inline-flex; align-items: center; gap: 7px; }
.modal-close {
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 16px; color: var(--text-2);
  transition: background .2s;
}
.modal-close:hover { background: var(--fill); }
.setting-section { margin-bottom: 18px; }
.setting-label {
  display: block; font-size: 13px; color: var(--text-2);
  margin-bottom: 8px; font-weight: 500;
}
.setting-input {
  width: 100%; padding: 11px 14px;
  border: 1.5px solid var(--line); border-radius: 12px;
  font-size: 14px; background: var(--fill); color: var(--text);
  outline: none; transition: border-color .2s, background .2s;
  margin-bottom: 10px;
}
.setting-input:focus { background: #fff; border-color: var(--blue); }
.pwd-fields { display: flex; flex-direction: column; gap: 0; }
.pwd-fields .setting-input:last-child { margin-bottom: 0; }

/* 设置弹窗头像上传 */
.avatar-upload { display: flex; align-items: center; gap: 14px; }
.avatar-preview-lg {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--fill); display: grid; place-items: center;
  overflow: hidden; border: 2px solid var(--line); flex-shrink: 0;
}
.avatar-preview-lg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-preview-lg span { color: var(--text-3); display: inline-grid; place-items: center; line-height: 0; }
.avatar-actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.btn-link-sm {
  font-size: 12px; color: var(--red); padding: 2px 0;
  background: none; border: none; cursor: pointer;
}
.btn-link-sm:hover { text-decoration: underline; }

/* ---------- 减弱动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- 公告板 ---------- */
.announce-board{border-radius:20px;padding:16px 18px;margin:14px 0}
.announce-header{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.announce-icon{font-size:16px}
.announce-title{font-size:15px;font-weight:700;color:var(--text-1)}
.announce-list{display:flex;flex-direction:column;gap:10px;max-height:200px;overflow-y:auto}
.announce-empty{font-size:13px;color:var(--text-3);text-align:center;padding:8px 0}
.announce-item{padding:10px 12px;background:rgba(255,255,255,.5);border-radius:12px}
.announce-item-title{font-size:14px;font-weight:600;color:var(--text-1);margin-bottom:4px}
.announce-item-content{font-size:13px;color:var(--text-2);line-height:1.6;white-space:pre-wrap;word-break:break-word}

/* ---------- 排行榜入口 ---------- */
.leaderboard-entry{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:20px;
  cursor:pointer;transition:transform .2s;margin:14px 0}
.leaderboard-entry:hover{transform:translateY(-2px)}
.lb-entry-icon{font-size:26px}
.lb-entry-text{flex:1}
.lb-entry-title{font-size:16px;font-weight:700;color:var(--text-1)}
.lb-entry-desc{font-size:13px;color:var(--text-3);margin-top:2px}
.lb-entry-arrow{font-size:22px;color:var(--text-3)}

/* ---------- 排行榜弹窗 ---------- */
.leaderboard-modal{max-width:480px;max-height:80vh;display:flex;flex-direction:column}
.lb-list{overflow-y:auto;padding:4px 2px}
.lb-empty{text-align:center;color:var(--text-3);padding:30px 0;font-size:14px}
.lb-item{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;
  background:rgba(255,255,255,.45);margin-bottom:8px}
.lb-medal{width:36px;display:flex;justify-content:center;align-items:center;flex-shrink:0}
.lb-rank-badge{width:26px;height:26px;border-radius:50%;display:inline-grid;place-items:center;
  font-size:13px;font-weight:800;color:#fff;line-height:1;
  box-shadow:0 4px 10px -3px rgba(0,0,0,.28)}
.lb-rank-badge.r1{background:linear-gradient(135deg,#ffd76a,#f5a300)}
.lb-rank-badge.r2{background:linear-gradient(135deg,#dfe4ea,#a2acb9)}
.lb-rank-badge.r3{background:linear-gradient(135deg,#edb787,#c47a3c)}
.lb-rank{font-size:15px;font-weight:700;color:var(--text-3)}
.lb-file-info{flex:1;min-width:0}
.lb-fname{font-size:14px;font-weight:600;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-uploader{display:flex;align-items:center;gap:6px;margin-top:5px;cursor:pointer;width:fit-content}
.lb-avatar{width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,#007aff,#5856d6);
  color:#fff;display:inline-grid;place-items:center;font-size:10px;font-weight:700;overflow:hidden}
.lb-avatar img{width:100%;height:100%;object-fit:cover}
.lb-uname{font-size:12px;color:var(--text-3)}
.lb-dl{display:inline-flex;align-items:center;gap:4px;font-size:14px;font-weight:700;color:#ff9500;flex-shrink:0}

/* ---------- 文件卡片上传者可点击 ---------- */
.uploader-link:hover{color:var(--text-1) !important}

/* ---------- 企业页：关注入口 ---------- */
.ent-follow-entry{display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:20px;
  cursor:pointer;transition:transform .25s var(--ease-ios),box-shadow .25s;margin-bottom:18px}
.ent-follow-entry:hover{transform:translateY(-2px)}
.ent-follow-entry:active{transform:scale(.98)}
.ent-follow-icon{width:48px;height:48px;border-radius:14px;
  background:linear-gradient(135deg,rgba(255,193,7,.18),rgba(247,181,0,.16));
  display:grid;place-items:center;font-size:24px;flex-shrink:0}
.ent-follow-text{flex:1;min-width:0}
.ent-follow-title{font-size:16px;font-weight:700;color:var(--text)}
.ent-follow-desc{font-size:12px;color:var(--text-2);margin-top:2px}
.ent-follow-arrow{font-size:26px;color:var(--text-3);font-weight:300;flex-shrink:0}

/* ---------- 企业公告流 ---------- */
.ent-feed-head{display:flex;align-items:center;margin:6px 0 12px}
.ent-feed-title{font-size:15px;font-weight:700;color:var(--text);display:inline-flex;align-items:center;gap:6px}
.ent-feed-ico{color:var(--blue)}
.ent-announce-list{display:flex;flex-direction:column;gap:12px}
.ent-announce{padding:16px 18px;border-radius:18px}
.ent-announce-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.ent-announce-avatar{width:24px;height:24px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,#007aff,#5856d6);color:#fff;display:inline-grid;
  place-items:center;font-size:11px;font-weight:700;overflow:hidden}
.ent-announce-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.ent-announce-enterprise{font-size:13px;font-weight:600;color:var(--text-2)}
.ent-announce-time{margin-left:auto;font-size:11px;color:var(--text-3)}
.ent-announce-title{font-size:15px;font-weight:700;color:var(--text);margin-bottom:6px;word-break:break-word}
.ent-announce-content{font-size:14px;color:var(--text-2);line-height:1.7;white-space:normal;word-break:break-word}
.ann-images-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.ann-img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:12px;cursor:zoom-in;
  background:var(--fill);border:1px solid var(--line)}
.ann-files-grid{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.ann-file{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;
  background:var(--fill);border:1px solid var(--line);font-size:13px;color:var(--text);
  text-decoration:none;word-break:break-all}
.ann-file:hover{border-color:var(--blue);color:var(--blue)}

/* ---------- 关注企业弹窗 ---------- */
.ent-modal{max-width:460px;max-height:80vh;display:flex;flex-direction:column}
.ent-modal-list{overflow-y:auto;padding:4px 2px}
.ent-item{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;
  background:rgba(255,255,255,.45);margin-bottom:8px}
.ent-item-main{flex:1;min-width:0}
.ent-item-name{font-size:15px;font-weight:700;color:var(--text)}
.ent-item-meta{font-size:12px;color:var(--text-3);margin-top:3px;word-break:break-all}
.ent-follow-btn{height:32px;padding:0 16px;border-radius:999px;font-size:13px;font-weight:600;
  background:linear-gradient(135deg,rgba(0,122,255,.95),rgba(88,86,214,.92));color:#fff;flex-shrink:0}
.ent-follow-btn.following{background:var(--fill);color:var(--text-2);border:1px solid var(--line)}

/* ---------- 我的页：发布公告卡片 ---------- */
.publish-entry{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:18px;
  cursor:pointer;transition:transform .2s;margin-bottom:16px}
.publish-entry:hover{transform:translateY(-2px)}
.publish-entry-icon{width:46px;height:46px;border-radius:14px;
  background:linear-gradient(135deg,rgba(255,149,0,.18),rgba(255,59,48,.14));
  display:grid;place-items:center;font-size:22px;flex-shrink:0}
.publish-entry-text{flex:1;min-width:0}
.publish-entry-title{font-size:16px;font-weight:700;color:var(--text)}
.publish-entry-desc{font-size:12px;color:var(--text-2);margin-top:2px;line-height:1.5}
.publish-entry-arrow{font-size:24px;color:var(--text-3);flex-shrink:0}

/* ---------- 发布公告弹窗 ---------- */
.publish-modal{max-width:460px;max-height:88vh;overflow-y:auto}
.ann-images{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.ann-image-item{position:relative;aspect-ratio:1/1;border-radius:12px;overflow:hidden;
  border:1px solid var(--line);background:var(--fill)}
.ann-image-item img{width:100%;height:100%;object-fit:cover;display:block}
.ann-files{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.ann-file-item{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:10px 12px;border-radius:12px;background:var(--fill);border:1px solid var(--line)}
.ann-file-name{font-size:13px;color:var(--text);word-break:break-all;flex:1}
.ann-remove{width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,.45);color:#fff;
  font-size:12px;display:grid;place-items:center;flex-shrink:0;cursor:pointer}
.ann-remove:hover{background:rgba(255,59,48,.85)}
.ann-add-btn{width:100%;height:40px;font-size:13px;display:inline-flex;align-items:center;justify-content:center;gap:5px}

/* ============================================================
 * SVG 图标系统（自绘线性图标，替代原 emoji）
 * 图标本体由 PHP 输出在 <svg class="ico-sprite"> 内，页面中通过
 * <svg class="ico"><use href="#i-xxx"></use></svg> 引用。
 * 描边色统一取 currentColor，颜色随上下文文字色变化。
 * ============================================================ */
/* sprite 容器：不参与布局与渲染 */
.ico-sprite {
  position: absolute;
  width: 0; height: 0;
  overflow: hidden;
  pointer-events: none;
}
/* 单个图标 */
.ico {
  display: inline-block;
  vertical-align: -0.15em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* 文件类型配色（.file-ico 由 ext_icon_html / fileIcon 输出） */
.file-ico.t-file    { color: #8e8e93; }
.file-ico.t-text    { color: #6e6e73; }
.file-ico.t-doc     { color: #007aff; }
.file-ico.t-pdf     { color: #ff3b30; }
.file-ico.t-sheet   { color: #34c759; }
.file-ico.t-slide   { color: #ff9500; }
.file-ico.t-image   { color: #af52de; }
.file-ico.t-video   { color: #ff2d55; }
.file-ico.t-audio   { color: #30b0c7; }
.file-ico.t-archive { color: #ff9f0a; }
.file-ico.t-code    { color: #5856d6; }
.file-ico.t-app     { color: #0a84ff; }

/* ============================================================
 * 文件类型图标底板（.file-tile）
 * 用法：给文件图标容器加上 class="… file-tile"，类型色由同容器上的 .t-* 决定
 *       （与 svg 上的 .file-ico.t-* 同名同色，色值见上方 .file-ico 列表）。
 * 设计：类型色底 + 同色细描边 + 同色柔光投影 + 左上角高光过渡，
 *       图标按底板 56% 自适应缩放，解决"大灰方块里一枚小图标"的空洞感。
 * ============================================================ */
.file-tile {
  --tile: 120, 120, 128;
  --tile-a: 0.14;
  background-color: rgba(var(--tile), var(--tile-a));
  background-image: linear-gradient(155deg, rgba(255,255,255,0.66) 0%, rgba(255,255,255,0.12) 48%, rgba(255,255,255,0) 100%);
  box-shadow: inset 0 0 0 1px rgba(var(--tile), 0.20),
              0 10px 22px -16px rgba(var(--tile), 0.90);
  transition: transform 0.35s var(--ease-spring), box-shadow 0.35s var(--ease-ios);
}
/* 图标占底板 56%，随底板尺寸自适应 */
.file-tile > .file-ico { width: 56%; height: 56%; }

.file-tile.t-file    { --tile: 142, 142, 147; --tile-a: 0.20; }
.file-tile.t-text    { --tile: 110, 110, 115; --tile-a: 0.18; }
.file-tile.t-doc     { --tile: 0, 122, 255;   --tile-a: 0.18; }
.file-tile.t-pdf     { --tile: 255, 59, 48;   --tile-a: 0.18; }
.file-tile.t-sheet   { --tile: 52, 199, 89;   --tile-a: 0.20; }
.file-tile.t-slide   { --tile: 255, 149, 0;   --tile-a: 0.20; }
.file-tile.t-image   { --tile: 175, 82, 222;  --tile-a: 0.18; }
.file-tile.t-video   { --tile: 255, 45, 85;   --tile-a: 0.18; }
.file-tile.t-audio   { --tile: 48, 176, 199;  --tile-a: 0.20; }
.file-tile.t-archive { --tile: 255, 159, 10;  --tile-a: 0.20; }
.file-tile.t-code    { --tile: 88, 86, 214;   --tile-a: 0.18; }
.file-tile.t-app     { --tile: 10, 132, 255;  --tile-a: 0.18; }

/* 弹窗标题图标 */
.modal-head h3 .ico { color: var(--blue); }
/* 「已自动发货」成功标题 */
.ok-ico { color: var(--green); }
/* 聊天等场景中图标与文字间距 */
.ann-file .ico { color: var(--text-3); }
.ann-file:hover .ico { color: var(--blue); }

/* ============================================================
   性能优化 · 高帧率
   液态玻璃的 backdrop-filter 实时模糊 + 动态光斑是 GPU 开销大户，
   低端设备/移动端大量元素叠加会掉帧。这里在不破坏整体视觉的前提下：
   1) 关闭动态光斑的持续重绘与实时模糊；
   2) 去掉大面积卡片的 backdrop-filter，改用更高不透明度背景；
   3) 仅保留遮罩层的轻微模糊。
   ============================================================ */

/* 1) 光斑：改为静态柔和渐变，不再每帧动画 + blur 重绘 */
body::before, body::after {
  animation: none !important;
  filter: none !important;
  opacity: 0.16 !important;
  will-change: auto !important;
}
body::before {
  background: radial-gradient(circle at 28% 18%, rgba(165,200,255,0.62), rgba(165,200,255,0) 70%) !important;
}
body::after {
  background: radial-gradient(circle at 72% 82%, rgba(255,214,224,0.55), rgba(255,214,224,0) 70%) !important;
}

/* 2) 大面积内容卡片：取消实时模糊 */
.glass,
.glass-strong,
.file-card,
.shop-card,
.stat-item,
.topbar,
.modal,
.upload-area,
.pagination button,
.btn-ghost,
.btn-share,
.announce-item,
.card,
.profile-card,
.file-row,
.file-hero,
.detail-card,
.manage-entry,
.chat-input-bar {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* 提高不透明度，保持近似玻璃观感 */
.glass { background: rgba(255,255,255,0.82) !important; }
.glass-strong { background: rgba(255,255,255,0.9) !important; }
.file-card, .shop-card { background: rgba(255,255,255,0.86) !important; }
.stat-item { background: rgba(255,255,255,0.84) !important; }
.topbar { background: rgba(255,255,255,0.92) !important; }
.modal { background: rgba(255,255,255,0.94) !important; }
.upload-area { background: rgba(255,255,255,0.62) !important; }

/* 3) 仅保留遮罩/提示的轻微模糊（打开瞬间才有，不参与滚动） */
.modal-mask {
  -webkit-backdrop-filter: blur(4px) !important;
  backdrop-filter: blur(4px) !important;
}
.toast {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}