/* ============================================================
   OK Team 全局样式系统
   设计语言: shadcn-ui + Apple HIG
   主题色: #2D60FE
   字体: MiSans
   图标: Font Awesome 6 Classic
   ============================================================ */

/* ---------- MiSans 字体（通过 <link> 在 HTML head 中加载小米官方 CDN CSS） ---------- */

/* 字体尺寸匹配的回退方案，减少 FOUT 视觉跳动 */
@font-face {
  font-family: 'MiSans Fallback';
  src: local('PingFang SC'), local('Microsoft YaHei'), local('Segoe UI'), local('sans-serif');
  size-adjust: 100%;
  ascent-override: 90%;
  descent-override: 20%;
  line-gap-override: 10%;
}

/* ---------- 主题变量 ---------- */
:root {
  --primary: #2D60FE;
  --primary-hover: #1E4FE6;
  --primary-light: #E8F0FF;
  --primary-ring: rgba(45, 96, 254, 0.35);

  /* 浅色 */
  --bg: #FBFBFD;
  --bg-elevated: #FFFFFF;
  --bg-subtle: #F1F3F6;
  --bg-hover: #F4F5F8;
  --surface: #FFFFFF;
  --card: #FFFFFF;
  --bg-card: #FFFFFF;
  --border: #E8EAED;
  --border-strong: #D8DBE0;
  --text: #1D1D1F;
  --text-secondary: #6E6E73;
  --text-tertiary: #9A9AA0;
  --text-inverse: #FFFFFF;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow: 0 4px 16px rgba(0,0,0,0.06);
  --shadow-md: 0 8px 28px rgba(0,0,0,0.08);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.10);

  --radius-sm: 8px;
  --radius: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  --sidebar-w: 248px;
  --header-h: 60px;

  --font: 'MiSans', 'MiSans Fallback', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Segoe UI', sans-serif;
  --transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] {
  --primary: #4D7BFF;
  --primary-hover: #2D60FE;
  --primary-light: #1A2640;
  --primary-ring: rgba(77, 123, 255, 0.35);

  --bg: #000000;
  --bg-elevated: #1C1C1E;
  --bg-subtle: #2C2C2E;
  --bg-hover: #38383A;
  --surface: #1C1C1E;
  --card: #1C1C1E;
  --bg-card: #1C1C1E;
  --border: #38383A;
  --border-strong: #48484A;
  --text: #F5F5F7;
  --text-secondary: #AEAEB2;
  --text-tertiary: #636366;
  --text-inverse: #FFFFFF;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow: 0 4px 16px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 28px rgba(0,0,0,0.5);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.6);
}

/* ---------- 重置 ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-gutter: stable; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }

::selection { background: var(--primary); color: #fff; }

/* 滚动条 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }

/* ---------- 通用工具类 ---------- */
.container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.container-wide { max-width: 1400px; margin: 0 auto; padding: 0 24px; }
.text-primary { color: var(--primary); }
.text-secondary { color: var(--text-secondary); }
.text-center { text-align: center; }
.hidden { display: none !important; }
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-6 { gap: 24px; }
.mt-2{margin-top:8px}.mt-4{margin-top:16px}.mt-6{margin-top:24px}.mt-8{margin-top:32px}
.mb-2{margin-bottom:8px}.mb-4{margin-bottom:16px}.mb-6{margin-bottom:24px}.mb-8{margin-bottom:32px}
.rounded { border-radius: var(--radius); }
.rounded-full { border-radius: var(--radius-full); }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 18px; border-radius: var(--radius-full);
  font-size: 14px; font-weight: 500; line-height: 1;
  transition: all var(--transition); white-space: nowrap; border: 1px solid transparent;
  vertical-align: middle;
}
.btn-sm { padding: 9px 14px; font-size: 13px; }
.btn-primary { background: var(--primary-light); color: var(--primary); }
.btn-primary:hover { background: var(--primary); color: #fff; }
.btn-secondary { background: var(--bg-subtle); color: var(--text); }
.btn-secondary:hover { background: var(--bg-hover); }
.btn-outline { border-color: var(--border-strong); color: var(--text); }
.btn-outline:hover { background: var(--bg-subtle); border-color: var(--text-tertiary); }
.btn-ghost { color: var(--text-secondary); }
.btn-ghost:hover { background: var(--bg-subtle); color: var(--text); }
.btn-destructive { background: color-mix(in srgb,#DC2626 12%,transparent); color: #DC2626; border-color: color-mix(in srgb,#DC2626 30%,var(--border)); }
.btn-destructive:hover { background: #DC2626; color: #fff; border-color: #DC2626; }
.btn-lg { padding: 12px 28px; font-size: 16px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- 卡片 ---------- */
.card {
  background: var(--card); border-radius: var(--radius-md);
  border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  transition: all var(--transition);
}
.card-hover:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--border-strong); }
.card-body { padding: 20px; }
.card-header {
  padding: 16px 20px; border-bottom: 1px solid var(--border);
  font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px;
}
.card-header i { color: var(--primary); font-size: 16px; }

/* ---------- 表单 ---------- */
.field { margin-bottom: 18px; }
.label { display: block; font-size: 13px; font-weight: 500; color: var(--text-secondary); margin-bottom: 7px; }
.input, .textarea, .select {
  width: 100%; padding: 11px 14px; background: var(--bg-elevated);
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  font-size: 15px; transition: all var(--transition); color: var(--text);
}
.input:focus, .textarea:focus, .select:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-ring);
}
.textarea { resize: vertical; min-height: 100px; }
.input-group { position: relative; }
.input-group .btn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); }

/* ---------- 开关 (switch) ---------- */
.switch { position: relative; display: inline-block; width: 48px; height: 28px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch-slider {
  position: absolute; cursor: pointer; inset: 0;
  background: var(--border-strong); border-radius: var(--radius-full);
  transition: all var(--transition);
}
.switch-slider::before {
  content: ''; position: absolute; height: 22px; width: 22px;
  left: 3px; top: 3px; background: #fff; border-radius: 50%;
  transition: all var(--transition); box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.switch input:checked + .switch-slider { background: var(--primary); }
.switch input:checked + .switch-slider::before { transform: translateX(20px); }

/* ---------- 徽章 ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: var(--radius-full);
  font-size: 12px; font-weight: 500;
}
.badge-primary { background: var(--primary-light); color: var(--primary); }
.badge-success { background: #E8F9EF; color: #16A34A; }
.badge-warning { background: #FFF4E5; color: #E8920C; }
.badge-danger { background: #FEECEC; color: #DC2626; }
.badge-neutral { background: var(--bg-subtle); color: var(--text-secondary); }
[data-theme="dark"] .badge-success { background: #0F2A1A; }
[data-theme="dark"] .badge-warning { background: #3A2A0A; }
[data-theme="dark"] .badge-danger { background: #2A0F0F; }

/* ---------- 品质认证印章明暗模式切换 ---------- */
[data-theme="dark"] .quality-seal-light { display: none !important; }
[data-theme="dark"] .quality-seal-dark { display: inline-block !important; }

/* ---------- 提示框 ---------- */
.alert { padding: 14px 18px; border-radius: var(--radius); font-size: 14px; display: flex; gap: 10px; align-items: flex-start; }
.alert-info { background: var(--primary-light); color: var(--primary); }
.alert-success { background: #E8F9EF; color: #16A34A; }
.alert-warning { background: #FFF4E5; color: #B26B00; }
.alert-danger { background: #FEECEC; color: #DC2626; }

/* ---------- 顶部导航 ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  height: var(--header-h);
  background: rgba(251, 251, 253, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  contain: layout style;
}
[data-theme="dark"] .site-header { background: rgba(0,0,0,0.72); }
/* 底栏背景提高不透明度、并加一层不透明兜底色，避免页面切换/重绘时半透明毛玻璃透出底色导致的闪动 */
[data-theme="dark"] .mobile-bottom-nav { background: rgba(0, 0, 0, 0.94); }
.site-header .container, .site-header .container-wide, .site-header .header-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.header-inner { width: 100%; padding: 0 24px; position: relative; }
.header-logo { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 18px; }
.header-logo img { height: 30px; }
.header-nav { display: flex; align-items: center; gap: 6px; position: absolute; left: 50%; transform: translateX(-50%); }
.header-nav a { padding: 8px 14px; border-radius: var(--radius-full); font-size: 14px; color: var(--text-secondary); transition: all var(--transition); }
.header-nav a:hover, .header-nav a.active { color: var(--text); background: var(--bg-subtle); }
.header-actions { display: flex; align-items: center; gap: 8px; }
.header-actions .theme-toggle i { display: block; width: 19px; text-align: center; }

/* 主题切换 */
.theme-toggle {
  width: 38px; height: 38px; border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary); transition: all var(--transition);
  font-size: 19px;
}
.theme-toggle:hover { background: var(--bg-subtle); color: var(--text); }

/* 用户头像菜单 */
.user-menu { position: relative; }
.user-avatar {
  width: 36px; height: 36px; border-radius: var(--radius-full);
  object-fit: cover; cursor: pointer; border: 2px solid var(--border);
  transition: all var(--transition);
}
.user-avatar:hover { border-color: var(--primary); }

/* 头像框容器（通用） */
.avatar-wrap { position: relative; display: inline-block; line-height: 0; }
.avatar-wrap .avatar-img { display: block; }
.avatar-wrap .avatar-frame-img {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  object-fit: contain;
}
/* 顶栏头像框适配 */
.user-menu .avatar-wrap .user-avatar { border: 2px solid var(--border); }
.user-menu:hover .avatar-wrap .user-avatar { border-color: var(--primary); }
.user-menu .avatar-wrap .avatar-frame-img { border-radius: var(--radius-full); }
.user-menu-dropdown {
  position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 220px; background: var(--bg-elevated);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); padding: 8px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: all var(--transition); z-index: 200;
}
.user-menu:hover .user-menu-dropdown, .user-menu-dropdown.show { opacity: 1; visibility: visible; transform: translateY(0); }

/* 作品详情页更多按钮菜单：与按钮右对齐、顶部对齐 */
.more-menu .user-menu-dropdown {
  top: 0;
  bottom: auto;
  right: auto;
  left: 100%;
  margin-left: 8px;
  min-width: 160px;
  transform: translateY(-4px);
}
/* 作品详情的「更多」菜单在按钮左侧展开并右对齐（原为内联 right:0，此处显式声明） */
.more-menu .user-menu-dropdown#moreMenu {
  left: auto;
  right: 0;
  margin-left: 0;
}
.more-menu .user-menu-dropdown.show {
  transform: translateY(-4px);
}
.user-menu-header { padding: 10px 12px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.user-menu-header .name { font-weight: 600; font-size: 14px; }
.user-menu-header .email { font-size: 12px; color: var(--text-tertiary); }
.user-menu-item { display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 9px 12px; border-radius: var(--radius); font-size: 14px; color: var(--text); transition: all var(--transition); }
.user-menu-item:hover { background: var(--bg-subtle); }
.user-menu-item i { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; }
.user-menu-divider { height: 1px; background: var(--border); margin: 6px 0; }

/* 通知红点 */
.dot-badge { position: relative; }
.dot-badge::after {
  content: ''; position: absolute; top: 6px; right: 8px;
  width: 8px; height: 8px; background: #FF3B30; border-radius: 50%;
  border: 2px solid var(--bg-elevated);
}
.header-actions .dot-badge i { color: var(--primary); }

/* ---------- 侧边栏（OK Store 风格） ---------- */
.sidebar {
  width: var(--sidebar-w); flex-shrink: 0;
  height: calc(100vh - var(--header-h));
  position: sticky; top: var(--header-h);
  overflow-y: auto; padding: 16px 12px;
  border-right: 1px solid var(--border);
  background: var(--bg);
  z-index: 1;
}
.sidebar-logo { display: flex; align-items: center; gap: 10px; padding: 8px 12px 18px; font-weight: 600; font-size: 20px; }
.sidebar-search { position: relative; margin-bottom: 16px; }
.sidebar-search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-tertiary); font-size: 14px; pointer-events: none; }
.sidebar-search input { padding-left: 38px; }
.sidebar-search input::placeholder { color: var(--text-tertiary); }
.sidebar-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--radius);
  color: var(--text-secondary); font-size: 14px; font-weight: 500;
  transition: all var(--transition); margin-bottom: 2px;
}
.sidebar-nav-item i { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; }
.sidebar-nav-item:hover { background: var(--bg-subtle); color: var(--text); }
.sidebar-nav-item.active { background: var(--primary-light); color: var(--primary); }
.sidebar-section { font-size: 11px; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.5px; padding: 14px 12px 6px; }

/* ---------- Store 内容区 ---------- */
.store-main { flex: 1; padding: 36px 32px; min-width: 0; }
.section-title { font-size: 22px; font-weight: 600; margin-bottom: 16px; text-align: left; padding-left: 0; text-indent: 0; }
.section-title::before { content: none; }
.section-title + p { font-weight: 500; text-align: left; }
h1, h2, h3, h4, h5, h6 { font-weight: 600; }

/* 轮播图 - 30:9 (>800px) / 16:10 (≤800px)，padding-top 实现平滑过渡 */
.carousel { position: relative; border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 32px; contain: layout style paint; }
.carousel-track { display: flex; transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; backface-visibility: hidden; }
.carousel-slide { min-width: 100%; position: relative; width: 100%; padding-top: 30%; overflow: hidden; background: var(--bg-subtle); contain: layout paint; }
@media (max-width: 800px) { .carousel-slide { padding-top: 62.5%; } }
.carousel-slide > img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1; transition: opacity 0.3s ease; will-change: opacity; }
.carousel-slide > img.ok-img-loaded { opacity: 1; }
/* 轮播图加载态：使用纯色背景而非 shimmer 动画，避免闪动 */
.carousel-slide > img.ok-img-loading { background: var(--bg-subtle); animation: none; }
.carousel-slide-placeholder { position: absolute; top: 0; left: 0; width: 100%; height: 100%; animation: carousel-pulse 1.5s ease-in-out infinite; }
@keyframes carousel-pulse { 0%,100% { opacity: 0.4 } 50% { opacity: 0.7 } }
.carousel-slide .slide-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.6), transparent 50%); display: flex; align-items: flex-end; padding: 32px; }
.carousel-slide .slide-overlay h3 { color: #fff; font-size: 28px; font-weight: 700; }
.carousel-slide .slide-overlay p { color: rgba(255,255,255,0.85); font-size: 15px; margin: 0; margin-top: 4px; line-height: 1.35; }
.carousel-slide .slide-work-info { display: flex; align-items: center; gap: 16px; width: 100%; }
.carousel-slide .slide-work-info > div { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.carousel-slide .slide-work-logo { width: 64px; height: 64px; border-radius: var(--radius); overflow: hidden; flex-shrink: 0; }
.carousel-slide .slide-work-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.carousel-slide .slide-work-info h3 { margin: 0; }
.carousel-slide .slide-work-info .btn {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: none;
  font-weight: 600;
}
.carousel-slide .slide-work-info .btn:hover {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}
.carousel-prev, .carousel-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  z-index: 10;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition), transform var(--transition), opacity var(--transition);
  opacity: 0;
  pointer-events: none;
}
.carousel:hover .carousel-prev, .carousel:hover .carousel-next {
  opacity: 1;
  pointer-events: auto;
}
.carousel-prev:hover, .carousel-next:hover {
  transform: translateY(-50%) scale(1.05);
}
.carousel-prev { left: 16px; }
.carousel-next { right: 16px; }
@media (max-width: 800px) {
  .carousel-slide .slide-overlay { padding: 16px; }
  .carousel-slide .slide-work-info { gap: 10px; }
  .carousel-slide .slide-work-logo, .carousel-slide .slide-work-logo img { width: 44px; height: 44px; }
  .carousel-slide .slide-work-info h3 { font-size: 16px; }
  .carousel-slide .slide-work-info p { font-size: 12px; }
  .carousel-slide .slide-work-info .btn { padding: 6px 12px; font-size: 12px; }
  .carousel-prev, .carousel-next { width: 36px; height: 36px; font-size: 16px; }
  .carousel-prev { left: 8px; }
  .carousel-next { right: 8px; }
}

/* 作品卡片网格 - 参照 App Store 风格 — 作品卡片宽度下限强制 ≥ 290px */
/* 门户首页：带预览图的卡片 */
.work-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 20px; }
.work-card { background: var(--card); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); transition: all var(--transition); cursor: pointer; display: flex; flex-direction: column; }
.work-card:hover { box-shadow: var(--shadow-md); }
.work-card-img { aspect-ratio: 16/10; overflow: hidden; background: var(--bg-subtle); }
.work-card-img img { width: 100%; height: 100%; object-fit: cover; }
.work-card-body { padding: 16px; flex: 1; display: flex; flex-direction: column; }
.work-card-logo { display: flex; gap: 12px; align-items: center; min-width: 0; }
.work-card-logo img { width: 56px; height: 56px; border-radius: var(--radius); flex-shrink: 0; }
.work-card-logo > div { min-width: 0; overflow: hidden; }
.work-card-name { font-weight: 600; font-size: 14px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.work-card-slogan { font-size: 12px; color: var(--text-secondary); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.work-card-actions { margin-top: auto; padding-top: 12px; }
.work-card-actions .btn { width: 100%; }

/* Store 列表式卡片（无预览图，垂直居中）— 作品卡片宽度下限强制 ≥ 290px */
.store-card-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; max-width: 100%; box-sizing: border-box; }
.store-card-list.adjusting { visibility: visible !important; }
/* 专区列表卡片：与全部作品页面卡片保持一致 ≥ 290 下限 */
.store-card-list.zone-card-grid { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.store-card { background: var(--card); border-radius: var(--radius-lg); border: 1px solid var(--border); padding: 12px 14px; display: flex; align-items: center; gap: 10px; transition: all var(--transition); cursor: pointer; height: 100%; box-sizing: border-box; width: 100%; min-width: 0; overflow: hidden; }
.store-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.store-card .store-card-logo { width: 44px; height: 44px; border-radius: var(--radius); flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.store-card .store-card-logo img { width: 100%; height: 100%; object-fit: contain; }
.store-card .store-card-info { flex: 1; min-width: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.store-card .store-card-info .work-card-name { max-width: 100%; font-size: 14px; line-height: 1.4; }
.store-card .store-card-info .work-card-slogan { max-width: 100%; font-size: 12px; line-height: 1.4; margin-top: 2px; }
.store-card .store-card-dl { flex-shrink: 0; display: flex; align-items: center; }
.store-card .store-card-dl .btn { padding: 7px 12px; font-size: 13px; }

/* Store 网格式卡片 v2（带 16:9 预览图）— 作品卡片宽度下限强制 ≥ 290px */
.store-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; max-width: 100%; box-sizing: border-box; }
.store-card-grid.adjusting { visibility: visible !important; }
.store-card-v2 { background: var(--card); border-radius: var(--radius-lg); border: 1px solid var(--border); overflow: hidden; transition: all var(--transition); cursor: pointer; display: flex; flex-direction: column; height: 100%; width: 100%; box-sizing: border-box; min-width: 0; }
.store-card-v2:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.store-card-preview { aspect-ratio: 16/9; background: var(--bg-subtle); position: relative; overflow: hidden; }
.store-card-preview img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.store-card-v2:hover .store-card-preview img { transform: scale(1.03); }
.store-card-preview-placeholder { display: flex; align-items: center; justify-content: center; }
.store-card-preview-placeholder img { width: 60px; height: 60px; object-fit: contain; }
.store-card-body { padding: 14px; display: flex; align-items: center; gap: 12px; }
.store-card-logo-sm { width: 36px; height: 36px; border-radius: var(--radius); overflow: hidden; flex-shrink: 0; }
.store-card-logo-sm img { width: 100%; height: 100%; object-fit: contain; }
.store-card-info { flex: 1; min-width: 0; }
.store-card-actions { flex-shrink: 0; }

/* 控制台作品管理卡片（参照 store-card-v2 + shadcn 风格） */
.work-card { background: var(--card); border-radius: var(--radius-lg); border: 1px solid var(--border); overflow: hidden; transition: box-shadow .2s, transform .2s; display: flex; flex-direction: column; }
.work-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.work-card-cover { aspect-ratio: 16/9; background: var(--bg-subtle); position: relative; overflow: hidden; }
.work-card-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.work-card:hover .work-card-cover img { transform: scale(1.03); }
.work-card-cover .badge { position: absolute; top: 10px; right: 10px; backdrop-filter: blur(4px); }
.work-card-body { padding: 16px; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.work-card-title { font-size: 16px; font-weight: 600; color: var(--text); margin: 0; }
.work-card-slogan { font-size: 12px; color: var(--text-tertiary); line-height: 1.5; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.work-card-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.work-card-meta .badge { font-size: 11px; }
.work-card-date { font-size: 11px; color: var(--text-tertiary); }
.work-card-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: auto; }
.work-card-actions .btn { justify-content: center; }
.work-card-delete { margin-top: 6px; }
.work-card-delete .btn { width: 100%; justify-content: center; }

/* 排行榜 */
.rank-list { display: flex; flex-direction: column; gap: 4px; }
.rank-item { display: flex; align-items: center; gap: 16px; padding: 14px; border-radius: var(--radius); transition: all var(--transition); }
.rank-item:hover { background: var(--bg-subtle); }
.rank-num { font-size: 22px; font-weight: 700; width: 32px; text-align: center; color: var(--text-tertiary); }
.rank-item:nth-child(1) .rank-num { color: #FF9500; }
.rank-item:nth-child(2) .rank-num { color: #8E8E93; }
.rank-item:nth-child(3) .rank-num { color: #C77B3E; }
.rank-item-logo img { width: 48px; height: 48px; border-radius: var(--radius-sm); object-fit: cover; }
.rank-item-info { flex: 1; min-width: 0; }
.rank-item-name { font-weight: 600; font-size: 14px; }
.rank-item-meta { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }

/* ---------- 作品详情页 ---------- */
.work-detail-hero { display: flex; gap: 24px; padding: 24px 0; }
.work-detail-logo img { width: 120px; height: 120px; border-radius: var(--radius-md); filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15)); }
.work-detail-info h1 { font-size: 28px; font-weight: 700; }
.work-detail-slogan { font-size: 16px; color: var(--text-secondary); margin-top: 4px; }
.work-detail-version { font-size: 13px; color: var(--text-tertiary); margin-top: 8px; }
.work-detail-actions { display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.work-share-wrap{position:relative}
.work-share-wrap .work-share-menu{display:none;position:absolute;bottom:calc(100% + 4px);left:0;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:0 8px 24px rgba(0,0,0,.12);min-width:140px;z-index:100;padding:6px}
.work-share-wrap .work-share-menu.show{display:block}
.work-share-wrap .work-share-menu a{display:flex;align-items:center;gap:8px;padding:8px 12px;color:var(--text);text-decoration:none;font-size:13px;border-radius:6px}
.work-share-wrap .work-share-menu a:hover{background:var(--bg-subtle)}

/* 作品信息网格
   ⚠️ 边框画法（改过两次，勿再退回）：
   1) grid + gap:1px + 容器背景色画线 → 最后一行没填满时空缺处露出分隔线色，像块补丁。
   2) grid + 容器 border + 单元格 inset 阴影 → 末列/末行的 inset 阴影与容器 border
      相邻叠加，右侧和底部变成 2px 粗线。
   现方案：flex + 单元格自带 right/bottom 边框。
   - 容器只画 top/left，末列的 right、末行的 bottom 落在容器边缘 → 外框恒为 1px；
   - flex:1 1 160px 让末行项目拉伸填满整行 → 不存在空缺格，无需补背景色。 */
.work-info-grid { display: flex; flex-wrap: wrap; background: var(--card); border-top: 1px solid var(--border); border-left: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; margin: 24px 0; }
.work-info-cell { flex: 1 1 160px; min-width: 0; background: var(--card); padding: 16px 18px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.work-info-cell .label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; margin: 0; }
.work-info-cell .value { font-size: 15px; font-weight: 600; margin-top: 5px; }

/* 个人中心侧栏「退出登录」分组：宽屏隐藏
   窄屏侧栏本就不显示，且另有固定于底栏之上的退出按钮；
   宽屏下顶栏头像菜单已提供「退出登录」，侧栏再放一份属重复。 */
.dash-nav-group--logout,
.dash-nav-item--logout { display: none; }

.work-screenshots { display: flex; gap: 16px; overflow-x: auto; padding: 8px 0; margin: 24px 0; scrollbar-width: none; -ms-overflow-style: none; }
.work-screenshots::-webkit-scrollbar { display: none; }
.work-screenshots img { max-height: 480px; border-radius: var(--radius-md); object-fit: contain; width: auto; background: var(--bg-subtle); flex-shrink: 0; }
.screenshots-container { margin: 24px 0; }
.screenshots-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(12px) saturate(180%); -webkit-backdrop-filter: blur(12px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); color: var(--text); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; transition: all var(--transition); }
[data-theme="dark"] .screenshots-arrow { background: rgba(40, 40, 45, 0.6); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); }
.screenshots-arrow:hover { background: rgba(255, 255, 255, 0.8); transform: translateY(-50%) scale(1.05); }
[data-theme="dark"] .screenshots-arrow:hover { background: rgba(60, 60, 65, 0.8); }
.screenshots-arrow.hidden { display: none; }
.screenshots-prev { left: 8px; }
.screenshots-next { right: 8px; }
.screenshots-arrow i { font-size: 16px; }

/* 评分星级 */
.stars { display: inline-flex; gap: 2px; color: #FF9500; }
.stars i { font-size: 16px; }
.stars i.empty { color: var(--text-tertiary); opacity: 0.3; }
.rating-star { cursor: pointer; transition: color var(--transition); }
.rating-star.empty { color: var(--text-tertiary); opacity: 0.3; }

/* 评论 */
.comment { display: flex; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--border); }
.comment-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.comment-body { flex: 1; min-width: 0; }
.comment-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.comment-name { font-weight: 600; font-size: 14px; }
.comment-time { font-size: 12px; color: var(--text-tertiary); }
.comment-text { font-size: 14px; margin-top: 6px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.comment-reply-btn { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; padding: 4px 10px; font-size: 12px; color: var(--text-tertiary); background: transparent; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; transition: all var(--transition); }
.comment-reply-btn:hover { color: var(--primary); border-color: var(--primary); }
.comment-replies { margin-top: 12px; padding-left: 8px; border-left: 2px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.comment-reply-item { display: flex; gap: 10px; padding: 8px 0; }

/* ---------- 页脚 ---------- */
.site-footer {
  background: var(--bg-elevated); border-top: 1px solid var(--border);
  padding: 32px 0; margin-top: 0;
  position: relative; z-index: 2;
}
.site-footer .footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.site-footer .copyright { font-size: 13px; color: var(--text-tertiary); }
.site-footer .footer-links { display: flex; gap: 20px; }
.site-footer .footer-links a { font-size: 13px; color: var(--text-secondary); }
.site-footer .footer-links a:hover { color: var(--primary); }

/* ---------- 窄屏底部导航 ---------- */
/* 底栏默认始终参与布局并显示（移动端是主场景），仅在宽屏（≥901px）隐藏。
   ⚠️ 不要改回 `display:none` + 窄屏 media 显示：
   那样底座状态依赖「窄屏媒体查询判定」，切页/首帧若宽度判定稍晚一拍，
   base 的 display:none 会先短暂生效 → 底栏先消失、宽度校正后才回来，
   正是「内容一显示底栏就消失、过一会儿再出现」的闪没来源。
   现在默认 flex + 仅宽屏 media 隐藏，窄屏任意时刻都是 flex，从始至终都在。 */
.mobile-bottom-nav { display: flex; }
@media (min-width: 901px) {
  .mobile-bottom-nav { display: none; }
}
/* ---------- 窄屏页面子导航（Store/控制台/集控 侧边栏内容上移） ---------- */
.page-subnav { display: none; }

/* ---------- 布局 ---------- */
.layout-store { display: flex; }
.app-body { display: flex; flex-direction: column; min-height: 100vh; }
.page-content { flex: 1; }
/* 门户页面（无侧边栏布局）顶部留白，与控制台主页保持一致 */
main.page-content { padding-top: 36px; }

/* 个人中心 / 控制台 / 集控中心 布局 */
.dash-layout { display: flex; min-height: calc(100vh - var(--header-h)); }
.dash-sidebar {
  width: 240px; flex-shrink: 0; border-right: 1px solid var(--border);
  padding: 20px 12px; background: var(--bg);
  position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); overflow-y: auto;
  z-index: 1;
}
.dash-main { flex: 1; padding: 36px 36px; min-width: 0; min-height: calc(100vh - var(--header-h)); }
.dash-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: var(--radius);
  color: var(--text-secondary); font-size: 14px; font-weight: 500;
  transition: all var(--transition); margin-bottom: 2px;
}
.dash-nav-item i { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; }
.dash-nav-item:hover { background: var(--bg-subtle); color: var(--text); }
.dash-nav-item.active { background: var(--primary-light); color: var(--primary); }
.dash-nav-group { font-size: 11px; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.5px; padding: 14px 14px 6px; }

/* 统计卡片 */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 16px; }
.stat-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 20px; }
.stat-card .label { font-size: 13px; color: var(--text-secondary); }
.stat-card .value { font-size: 30px; font-weight: 700; margin-top: 6px; }
.stat-card .trend { font-size: 13px; margin-top: 6px; }

/* 图表加载动画 */
.chart-wrap { position: relative; }
.chart-loading {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; background: var(--card); border-radius: var(--radius-md);
  color: var(--text-tertiary); font-size: 13px;
  transition: opacity .3s;
}
.chart-loading i { font-size: 22px; color: var(--primary); }

/* 专区卡片 - 16:9背景图+底部标题描述叠加 */
.zone-card { aspect-ratio: 16/9; border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; transition: all var(--transition); position: relative; background: var(--bg-subtle); }
.zone-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.zone-card-bg { position: absolute; inset: 0; }
.zone-card-bg img { width: 100%; height: 100%; object-fit: cover; }
.zone-card-info { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px; background: linear-gradient(transparent, rgba(0,0,0,0.7)); }
.zone-card-info h3 { font-size: 18px; font-weight: 600; margin: 0; color: #fff; }
.zone-card-info p { font-size: 13px; color: rgba(255,255,255,0.85); margin: 6px 0 0; line-height: 1.5; }

/* 表格 */
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-size: 12px; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.5px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.table td { padding: 14px; border-bottom: 1px solid var(--border); font-size: 14px; }
.table tr:hover td { background: var(--bg-subtle); }

/* 模态框 */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); z-index: 1000; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all var(--transition); }
.modal-overlay.show { opacity: 1; visibility: visible; }
.modal { background: var(--bg-elevated); border-radius: var(--radius-lg); padding: 28px; max-width: 480px; width: 90%; transform: scale(0.96); transition: transform var(--transition); max-height: 90vh; display: flex; flex-direction: column; overflow-y: auto; }
.modal-overlay.show .modal { transform: scale(1); }
.modal-title { font-size: 18px; font-weight: 700; margin-bottom: 16px; }
.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-shrink: 0; }
.modal-header .modal-title { margin-bottom: 0; }
.modal-header .theme-toggle { background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 18px; padding: 4px 8px; border-radius: 6px; }
.modal-header .theme-toggle:hover { background: var(--bg-subtle); color: var(--text); }
.modal-body { flex: 1; overflow-y: auto; }
.modal-footer { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; flex-shrink: 0; }

/* 空状态 */
.empty-state { text-align: center; padding: 60px 20px; color: var(--text-tertiary); }
.empty-state i { font-size: 48px; margin-bottom: 16px; }

/* ---------- 文件资源管理页 ---------- */
.storage-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 20px; }
.storage-stat-card { display: flex; align-items: center; gap: 14px; padding: 16px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); transition: all var(--transition); }
.storage-stat-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.storage-stat-icon { width: 44px; height: 44px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.storage-stat-info { min-width: 0; }
.storage-stat-value { font-size: 20px; font-weight: 700; color: var(--text); line-height: 1.2; }
.storage-stat-label { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; }

.storage-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.storage-toolbar-left { display: flex; align-items: center; gap: 12px; }
.storage-section-title { font-size: 15px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 8px; margin: 0; }
.storage-section-title i { color: var(--primary); }
.storage-current-path { font-size: 12px; color: var(--text-tertiary); background: var(--bg-subtle); padding: 3px 10px; border-radius: var(--radius-full); }
.storage-toolbar-right { display: flex; align-items: center; gap: 8px; }
.storage-toolbar-right .btn { white-space: nowrap; }

.storage-breadcrumb { display: flex; align-items: center; gap: 4px; padding: 10px 14px; background: var(--bg-subtle); border-radius: var(--radius); margin-bottom: 12px; font-size: 13px; overflow-x: auto; }
.storage-breadcrumb-item { color: var(--text-secondary); text-decoration: none; display: flex; align-items: center; gap: 4px; white-space: nowrap; transition: color var(--transition); }
.storage-breadcrumb-item:hover { color: var(--primary); }
.storage-breadcrumb-sep { color: var(--text-tertiary); font-size: 10px; }

.storage-file-card { overflow: hidden; }
.storage-file-header { display: grid; grid-template-columns: 40px 1fr 80px 90px 130px 120px; gap: 8px; padding: 12px 16px; background: var(--bg-subtle); font-size: 12px; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.3px; }
.storage-file-row { display: grid; grid-template-columns: 40px 1fr 80px 90px 130px 120px; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border); align-items: center; transition: background var(--transition); }
.storage-file-row:hover { background: var(--bg-subtle); }
.storage-col-icon { display: flex; align-items: center; }
.storage-col-name { min-width: 0; overflow: hidden; }
.storage-col-type { display: flex; align-items: center; }
.storage-col-size { display: flex; align-items: center; font-size: 13px; color: var(--text-secondary); }
.storage-col-time { display: flex; align-items: center; font-size: 13px; color: var(--text-secondary); }
.storage-col-actions { display: flex; align-items: center; justify-content: flex-end; }

.file-icon-badge { width: 32px; height: 32px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; font-size: 14px; }
.file-name-link { color: var(--text); font-weight: 500; text-decoration: none; transition: color var(--transition); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-name-link:hover { color: var(--primary); }
.file-name-text { color: var(--text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.file-ext { font-size: 11px; font-weight: 600; color: var(--text-secondary); background: var(--bg-subtle); padding: 2px 8px; border-radius: var(--radius); }

.file-actions { display: flex; align-items: center; gap: 4px; }
.action-btn { width: 30px; height: 30px; border-radius: var(--radius); display: inline-flex; align-items: center; justify-content: center; color: var(--text-secondary); transition: all var(--transition); background: transparent; border: none; cursor: pointer; text-decoration: none; }
.action-btn:hover { background: var(--bg-subtle); color: var(--text); }
.action-btn-danger:hover { background: #FEECEC; color: #DC2626; }
[data-theme="dark"] .action-btn-danger:hover { background: #2A0F0F; }

@media (max-width: 700px) {
  .storage-file-header { display: none; }
  .storage-file-row { grid-template-columns: 36px 1fr auto; grid-template-areas: 'icon name actions' 'icon info actions'; gap: 4px 10px; }
  .storage-col-icon { grid-area: icon; }
  .storage-col-name { grid-area: name; }
  .storage-col-type, .storage-col-size, .storage-col-time { grid-area: info; font-size: 12px; }
  .storage-col-actions { grid-area: actions; }
}

/* 确认弹窗样式 */
.confirm-icon-wrapper { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; background: var(--primary-light); color: var(--primary); margin: 0 auto 16px; }
.confirm-icon-wrapper.confirm-danger { background: #FEECEC; color: #DC2626; }
.confirm-icon-wrapper.confirm-warning { background: #FFF4E5; color: #E8920C; }
[data-theme="dark"] .confirm-icon-wrapper.confirm-danger { background: #2A0F0F; }
[data-theme="dark"] .confirm-icon-wrapper.confirm-warning { background: #3A2A0A; }

/* 定时清理选项 */
.schedule-options { display: flex; flex-direction: column; gap: 8px; }
.schedule-option { cursor: pointer; }
.schedule-option input { display: none; }
.schedule-option-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 2px solid var(--border); border-radius: var(--radius); transition: all var(--transition); background: var(--bg-elevated); }
.schedule-option-card i { width: 36px; height: 36px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; background: var(--bg-subtle); color: var(--text-secondary); font-size: 15px; flex-shrink: 0; }
.schedule-option-title { font-weight: 600; font-size: 14px; color: var(--text); }
.schedule-option-desc { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; }
.schedule-option input:checked + .schedule-option-card { border-color: var(--primary); background: var(--primary-light); }
.schedule-option input:checked + .schedule-option-card i { background: var(--primary); color: #fff; }

/* 清理结果 */
.cleanup-result { margin: 16px 0; }
.cleanup-result-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.cleanup-result-item:last-of-type { border-bottom: none; }
.cleanup-result-label { color: var(--text-secondary); }
.cleanup-result-value { color: var(--text); font-weight: 500; }
.cleanup-result-total { margin-top: 12px; padding: 14px; background: var(--primary-light); border-radius: var(--radius); text-align: center; font-size: 15px; }
.cleanup-result-total strong { color: var(--primary); font-size: 18px; }

/* Toast 提示 */
.toast-container { position: fixed; top: 20px; right: 20px; z-index: 2000; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast { padding: 10px 16px; border-radius: var(--radius); background: var(--bg-elevated); border: 1px solid var(--border); box-shadow: var(--shadow-md); font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 8px; opacity: 0; transform: translateX(20px); transition: all 0.3s ease; pointer-events: auto; max-width: 320px; }
.toast.show { opacity: 1; transform: translateX(0); }
.toast-success { border-color: #D1FAE5; color: #059669; }
.toast-error { border-color: #FEECEC; color: #DC2626; }
.toast-info { border-color: var(--border-strong); color: var(--text); }
[data-theme="dark"] .toast-success { border-color: #064E3B; }
[data-theme="dark"] .toast-error { border-color: #450A0A; }

/* 头像框/背景选择器 */
.avatar-frame-item.active, .profile-bg-item.active { border-color: var(--primary) !important; }
.avatar-frame-item:hover { border-color: var(--primary-light); }
.profile-bg-item:hover { border-color: var(--primary-light); }

/* 个人资料卡片背景 */
.profile-card-bg {
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}
.profile-card-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,0,0,0.55), rgba(0,0,0,0.35));
  z-index: 0;
}
.profile-card-bg > * { position: relative; z-index: 1; }
.profile-card-bg .text-secondary,
.profile-card-bg .text-tertiary { color: rgba(255,255,255,0.85) !important; }
.profile-card-bg h2 { color: #fff !important; }
/* 身份标识：使用实心背景确保对比度 */
.profile-card-bg .badge {
  background: rgba(255,255,255,0.9) !important;
  color: var(--primary) !important;
  backdrop-filter: blur(8px);
}
/* 编辑资料按钮：白色实心背景，深色文字确保在任何主题下都清晰 */
.profile-card-bg .btn-outline {
  background: rgba(255,255,255,0.9) !important;
  border-color: rgba(255,255,255,0.9) !important;
  color: #1a1a1a !important;
  backdrop-filter: blur(8px);
}
.profile-card-bg .btn-outline:hover {
  background: #fff !important;
  color: #000 !important;
}
/* 头像边框在深色背景上更醒目 */
.profile-card-bg .avatar-img {
  border-color: rgba(255,255,255,0.6) !important;
}

/* 登录注册页 */
/* 认证页（登录/注册/找回/重置/OAuth 授权）
   垂直居中：grid + place-items:center，卡片在「顶栏之下的可用高度」内居中。
   ⚠️ 两个易错点：
   1) .site-header 是 position:sticky（占据文档流），所以 .auth-page 的高度
      要减去 --header-h，用 100vh 会多出一屏，卡片被顶到屏幕外。
   2) 用 min-height + place-items:center 时，若内容高于容器，
      grid 默认会把内容溢出到容器上方（顶部被裁）。
      故用 align-content:center 允许内容撑高并自然滚动，
      同时保证内容不高时仍然垂直居中。
   3) 用 dvh 而非 vh：移动端地址栏收起/展开时 vh 不变会导致跳动。 */
.auth-page { min-height: calc(100vh - var(--header-h)); min-height: calc(100dvh - var(--header-h)); display: grid; place-items: center; align-content: center; padding: 40px 20px; }
.auth-card { width: 100%; max-width: 420px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 36px; box-shadow: var(--shadow); }
.auth-title { font-size: 24px; font-weight: 700; text-align: center; margin-bottom: 6px; }
.auth-subtitle { font-size: 14px; color: var(--text-secondary); text-align: center; margin-bottom: 28px; }
.auth-tabs { display: flex; background: var(--bg-subtle); border-radius: var(--radius); padding: 4px; margin-bottom: 24px; }
.auth-tab { flex: 1; text-align: center; padding: 9px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; color: var(--text-secondary); transition: all var(--transition); }
.auth-tab.active { background: var(--bg-elevated); color: var(--text); box-shadow: var(--shadow-sm); }

/* 门户首页 */
/* 首屏 hero
   ⚠️ 高度必须减去 --header-h：.site-header 是 position:sticky（占据文档流），
   hero 若用 100vh，实际总高 = 顶栏 + 100vh，
   flex 居中的中心点落在「视口中心 + 半个顶栏」之下 → 首屏内容整体偏下。
   用 dvh 兼容移动端地址栏收放。 */
.hero-section { min-height: calc(100vh - var(--header-h)); min-height: calc(100dvh - var(--header-h)); display: flex; align-items: center; justify-content: center; text-align: center; padding: 80px 0; }
.hero-title { font-size: 52px; font-weight: 700; line-height: 1.1; letter-spacing: -1px; }
.hero-title .grad { background: linear-gradient(135deg, var(--primary), #7B4DFF); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-subtitle { font-size: 19px; color: var(--text-secondary); margin-top: 20px; max-width: 640px; margin-left: auto; margin-right: auto; }
.hero-actions { display: flex; gap: 14px; justify-content: center; margin-top: 36px; }

.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 20px; margin: 48px 0; }
.feature-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; transition: all var(--transition); }
.feature-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--primary); }
.feature-icon { width: 52px; height: 52px; border-radius: var(--radius); background: var(--primary-light); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 26px; margin-bottom: 16px; }
.feature-card h3 { font-size: 18px; font-weight: 700; }
.feature-card p { font-size: 14px; color: var(--text-secondary); margin-top: 8px; line-height: 1.6; }

/* 动画 */
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.animate-fade-up { animation: fadeUp 0.5s cubic-bezier(0.4,0,0.2,1) both; }
.animate-fade-in { animation: fadeIn 0.4s ease both; }
/* 页面顶级容器不使用渐入动画，避免整页内容从透明渐入导致的闪动 */
.page-content > .animate-fade-up,
.page-content > section.animate-fade-up,
.page-content > div.animate-fade-up {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}
/* stagger 保留用于非网格场景（如门户首页卡片） */
.stagger-1 { animation-delay: 0.05s; }
.stagger-2 { animation-delay: 0.1s; }
.stagger-3 { animation-delay: 0.15s; }
.stagger-4 { animation-delay: 0.2s; }
.stagger-5 { animation-delay: 0.25s; }
.stagger-6 { animation-delay: 0.3s; }
.stagger-7 { animation-delay: 0.35s; }
.stagger-8 { animation-delay: 0.4s; }

/* 统计卡片：按位置依次延迟，统一节奏，避免显式 stagger 类与数量不匹配导致混乱 */
.stat-grid > .stat-card:nth-child(1) { animation-delay: 0.04s; }
.stat-grid > .stat-card:nth-child(2) { animation-delay: 0.08s; }
.stat-grid > .stat-card:nth-child(3) { animation-delay: 0.12s; }
.stat-grid > .stat-card:nth-child(4) { animation-delay: 0.16s; }
.stat-grid > .stat-card:nth-child(5) { animation-delay: 0.20s; }
.stat-grid > .stat-card:nth-child(6) { animation-delay: 0.24s; }
.stat-grid > .stat-card:nth-child(7) { animation-delay: 0.28s; }
.stat-grid > .stat-card:nth-child(8) { animation-delay: 0.32s; }
.stat-grid > .stat-card:nth-child(n+9) { animation-delay: 0.36s; }

/* 网格卡片：按 nth-child 依次延迟，适配任意列数与行数（Store 卡片 + 门户作品卡片 + 特性卡片） */
.store-card-list > .store-card:nth-child(1),
.store-card-grid > .store-card-v2:nth-child(1),
.work-grid > .work-card:nth-child(1),
.feature-grid > .feature-card:nth-child(1)  { animation-delay: 0.05s; }

.store-card-list > .store-card:nth-child(2),
.store-card-grid > .store-card-v2:nth-child(2),
.work-grid > .work-card:nth-child(2),
.feature-grid > .feature-card:nth-child(2)  { animation-delay: 0.10s; }

.store-card-list > .store-card:nth-child(3),
.store-card-grid > .store-card-v2:nth-child(3),
.work-grid > .work-card:nth-child(3),
.feature-grid > .feature-card:nth-child(3)  { animation-delay: 0.15s; }

.store-card-list > .store-card:nth-child(4),
.store-card-grid > .store-card-v2:nth-child(4),
.work-grid > .work-card:nth-child(4),
.feature-grid > .feature-card:nth-child(4)  { animation-delay: 0.20s; }

.store-card-list > .store-card:nth-child(5),
.store-card-grid > .store-card-v2:nth-child(5),
.work-grid > .work-card:nth-child(5),
.feature-grid > .feature-card:nth-child(5)  { animation-delay: 0.25s; }

.store-card-list > .store-card:nth-child(6),
.store-card-grid > .store-card-v2:nth-child(6),
.work-grid > .work-card:nth-child(6),
.feature-grid > .feature-card:nth-child(6)  { animation-delay: 0.30s; }

.store-card-list > .store-card:nth-child(7),
.store-card-grid > .store-card-v2:nth-child(7),
.work-grid > .work-card:nth-child(7),
.feature-grid > .feature-card:nth-child(7)  { animation-delay: 0.35s; }

.store-card-list > .store-card:nth-child(8),
.store-card-grid > .store-card-v2:nth-child(8),
.work-grid > .work-card:nth-child(8),
.feature-grid > .feature-card:nth-child(8)  { animation-delay: 0.40s; }

.store-card-list > .store-card:nth-child(9),
.store-card-grid > .store-card-v2:nth-child(9),
.work-grid > .work-card:nth-child(9),
.feature-grid > .feature-card:nth-child(9)  { animation-delay: 0.45s; }

.store-card-list > .store-card:nth-child(10),
.store-card-grid > .store-card-v2:nth-child(10),
.work-grid > .work-card:nth-child(10),
.feature-grid > .feature-card:nth-child(10) { animation-delay: 0.50s; }

.store-card-list > .store-card:nth-child(11),
.store-card-grid > .store-card-v2:nth-child(11),
.work-grid > .work-card:nth-child(11),
.feature-grid > .feature-card:nth-child(11) { animation-delay: 0.55s; }

.store-card-list > .store-card:nth-child(12),
.store-card-grid > .store-card-v2:nth-child(12),
.work-grid > .work-card:nth-child(12),
.feature-grid > .feature-card:nth-child(12) { animation-delay: 0.60s; }

.store-card-list > .store-card:nth-child(n+13),
.store-card-grid > .store-card-v2:nth-child(n+13),
.work-grid > .work-card:nth-child(n+13),
.feature-grid > .feature-card:nth-child(n+13) { animation-delay: 0.65s; }

/* 分页 */
.pagination { display: flex; gap: 6px; justify-content: center; margin-top: 32px; }
.pagination a, .pagination span { min-width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius); font-size: 14px; border: 1px solid var(--border); padding: 0 10px; transition: all var(--transition); }
.pagination a:hover { background: var(--bg-subtle); }
.pagination .current { background: var(--primary); color: #fff; border-color: var(--primary); }

/* 响应式 */
/* 1080px 起顶栏切换为双行结构（广场侧边栏在 1080px 隐藏，其分类栏并入顶栏第二行） */
@media (max-width: 1080px) {
  .site-header { flex-direction: column; align-items: stretch; height: auto; }
  .header-inner { padding: 8px 24px; }
}
/* Store 窄屏搜索覆盖层：宽屏默认隐藏，仅窄屏（≤900px）由 .show 唤起 */
.store-mobile-search-overlay { display: none; }
@media (max-width: 900px) {
  .sidebar, .dash-sidebar { display: none; }
  .store-main { padding: 16px; }
  .dash-main { padding: 16px; }
  .header-nav { display: none; }
  .hero-title { font-size: 36px; }
  .hero-subtitle { font-size: 16px; }
  /* 窄屏：隐藏页脚与顶栏头像，显示底部导航 */
  .site-footer { display: none !important; }
  body { padding-bottom: 64px; }
  /* 底栏为 fixed 覆盖式（不占文档流），而 body 用 padding-bottom 让出了空间。
     居中计算需把这 64px 补回来，否则 hero / 认证页内容会偏上 32px。 */
  .hero-section { min-height: calc(100vh - var(--header-h) - 64px); min-height: calc(100dvh - var(--header-h) - 64px); }
  .auth-page { min-height: calc(100vh - var(--header-h) - 64px); min-height: calc(100dvh - var(--header-h) - 64px); }
  .mobile-bottom-nav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
    background: rgba(251, 251, 253, 0.94);  /* 不透明兜底优先，抑制切换页面时的透底闪动 */
    border-top: 1px solid var(--border);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
    justify-content: space-around; align-items: center;
  }
  /* 在支持 backdrop-filter 时，浅色底栏也保持较高不透明度（毛玻璃模糊保留，但不至于在重绘时透底闪烁） */
  @supports (backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px)) {
    .mobile-bottom-nav { background: rgba(251, 251, 253, 0.92); }
  }
  /* 每个项目尺寸固定，保证底栏对齐整齐：
     宽 = flex:1 均分，高由 min-height 锁定，
     图标与文字的字号、行高在选中前后**完全一致**，
     这样选中态只改变颜色，不会引起任何位移。 */
  .mobile-bottom-nav a {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px;
    flex: 1; min-width: 0;
    height: 50px;                 /* 固定高度，五个项目一致 */
    padding: 0 4px;
    border-radius: var(--radius);
    font-size: 11px;
    line-height: 1.2;
    font-weight: 400;             /* 选中态不改字重，避免文字变宽导致偏移 */
    color: var(--text-secondary);
    white-space: nowrap;
    transition: none;             /* 瞬时反馈不用渐变，页面随即跳转 */
  }
  .mobile-bottom-nav a i {
    font-size: 17px;
    line-height: 1.2;             /* 图标行高固定，选中不变大 */
    /* 视觉重量：未选中态降低不透明度 + 轻微缩放，接近线条图字的观感。
       ⚠️ 不能用 fa-regular —— Font Awesome 免费版 regular 字体仅 211 个字形，
       house/store/box/gear 均无 regular，会落.notdef 显示成方块。 */
    opacity: .62;
    transform: scale(.94);
    transition: opacity .15s ease, transform .15s ease;
  }
  .mobile-bottom-nav a.active i,
  .mobile-bottom-nav a.nav-tapped i {
    opacity: 1;
    transform: scale(1);
  }
  .mobile-bottom-nav a span {
    display: block;
    max-width: 100%;
    overflow: hidden; text-overflow: ellipsis;
  }
  /* 选中态：只变颜色，不改尺寸 */
  .mobile-bottom-nav a.active,
  .mobile-bottom-nav a.nav-tapped {
    color: var(--primary);
  }
  @media (prefers-reduced-motion: reduce) {
    .mobile-bottom-nav a,
    .mobile-bottom-nav a i { transition: none; }
  }
  /* 窄屏退出登录按钮（仅账户页）：浮于底部导航之上，不占导航格子 */
  .mobile-logout-btn { display: none; }
  .mobile-logout-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 13px 16px;
    font-size: 15px; font-weight: 500;
    color: #c0392b; background: rgba(192, 57, 43, .07);
    border: 1px solid rgba(192, 57, 43, .28); border-radius: var(--radius);
    transition: all var(--transition);
  }
  .mobile-logout-btn:active { background: rgba(192, 57, 43, .15); }
  [data-theme="dark"] .mobile-logout-btn { color: #ff8a80; background: rgba(255, 138, 128, .08); border-color: rgba(255, 138, 128, .26); }
  /* 退出登录按钮：随页面内容排在底部（普通文档流，不做悬停固定）。 */
  .mobile-logout-bar {
    display: block;
    /* 与上方内容拉开距离；下留一个底栏高度，避免被固定底栏遮住 */
    margin: 20px 0 0;
    padding: 0 16px calc(76px + env(safe-area-inset-bottom, 0px));
  }
  [data-theme="dark"] .mobile-logout-bar { background: transparent; }
  /* 窄屏下顶栏不显示头像 */
  .header-actions .user-menu { display: none; }
  /* 窄屏下通知气泡上移，避免与底部导航栏重叠（底栏高度约 64px + 安全区）
     注意：只对「底部定位」生效。若配置为顶部定位（top-*），
     气泡用的是 top 属性，强行设置 bottom 会把它拉到屏幕底部。 */
  #ok-bubble-container[style*="bottom: 20px"] {
    bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 12px) !important;
  }
  /* 顶部定位的气泡改为避开窄屏顶栏（顶栏在窄屏下同样存在，且可能更高） */
  #ok-bubble-container[style*="top:"] {
    bottom: auto !important;
  }
  /* 窄屏页面子导航：并入顶栏第二行 */
  .page-subnav {
    display: flex; align-items: center; gap: 8px;
    padding: 0 12px 10px 0; width: 100%; box-sizing: border-box;
    position: relative;
  }
  .page-subnav-items {
    display: flex; gap: 4px; overflow-x: auto; overflow-y: hidden; white-space: nowrap;
    scrollbar-width: none; flex: 1; -webkit-overflow-scrolling: touch;
    padding: 0; touch-action: pan-x; overscroll-behavior-x: contain;
  }
  .page-subnav-items::-webkit-scrollbar { display: none; }
  /* 首项内容与顶栏 logo 左缘对齐（logo 在 24px 处，去掉首项左内边距使图标贴齐 24px） */
  .page-subnav-item:first-child { margin-left: 24px; padding-left: 0; }
  .page-subnav-item:last-child { margin-right: 16px; }
  .page-subnav-item {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 10px; border-radius: 0; font-size: 13px; font-weight: 500;
    color: var(--text-secondary); background: transparent; flex-shrink: 0;
    position: relative; transition: color .15s;
  }
  .page-subnav-item i { font-size: 13px; }
  /* 选中态：bilibili 同款——主色文字 + 下方短下划线指示条 */
  .page-subnav-item.active { color: var(--primary); font-weight: 700; background: transparent; }
  .page-subnav-item.active::after {
    content: ''; position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%);
    width: 16px; height: 3px; border-radius: 2px; background: var(--primary);
  }
  .page-subnav-more {
    flex-shrink: 0; width: 32px; height: 32px; border-radius: 8px;
    border: none; background: transparent; color: var(--text-secondary);
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  }
  .page-subnav-more:hover { color: var(--primary); }
  /* 菜单在「更多」按钮左侧展开并右对齐，
     使菜单右缘与按钮右缘贴合，不会超出屏幕 */
  .page-subnav-more-menu {
    display: none; position: absolute; top: calc(100% - 6px); right: 12px;
    background: var(--card); border: 1px solid var(--border); border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12); padding: 6px; min-width: 180px; z-index: 60;
    max-height: 70vh; overflow-y: auto;
  }
  .page-subnav-more-menu.show { display: block; }
  .page-subnav-more-menu a {
    display: flex; align-items: center; justify-content: flex-start; gap: 8px; padding: 8px 10px; border-radius: 8px;
    font-size: 13px; color: var(--text);
  }
  /* 图标统一固定列宽、水平居中：让不同字号的图标也落在同一列，
     文本随之在同一起点左对齐，避免各菜单项文字左缘参差 */
  .page-subnav-more-menu a > i {
    width: 16px; text-align: center; flex-shrink: 0; font-size: 14px;
  }
  .page-subnav-more-menu a:hover { background: var(--bg-subtle); }
  .page-subnav-more-menu a.active { color: var(--primary); background: var(--primary-light); }
  .page-subnav-more-menu .psm-group {
    font-size: 11px; color: var(--text-tertiary); padding: 8px 10px 4px; text-transform: uppercase; letter-spacing: .5px;
  }
  /* 更多菜单内的"搜索"项与导航项之间的分隔线 */
  .page-subnav-more-menu .psm-divider {
    height: 1px; background: var(--border); margin: 4px 6px;
  }
  .store-mobile-search-overlay {
    display: none; position: fixed; inset: 0; z-index: 200;
    background: rgba(0,0,0,.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    padding: 12px; padding-top: 56px;
  }
  .store-mobile-search-overlay.show { display: block; }
  .store-mobile-search-box {
    position: relative; background: var(--card); border: 1px solid var(--border); border-radius: 12px;
    padding: 10px 14px; display: flex; align-items: center; gap: 8px;
  }
  .store-mobile-search-box > i { color: var(--text-tertiary); font-size: 14px; flex-shrink: 0; }
  .store-mobile-search-box input {
    flex: 1; border: none; background: transparent; color: var(--text); font-size: 14px; outline: none; min-width: 0;
  }
  .store-mobile-search-close {
    background: none; border: none; color: var(--text-tertiary); cursor: pointer; padding: 4px; font-size: 14px; flex-shrink: 0;
  }
}
@media (max-width: 600px) {
  .work-grid { grid-template-columns: 1fr; gap: 12px; }  /* 强制 1 列：保证卡片≥容器可用宽，不会跌破 290 下限 */
  .work-detail-hero { flex-direction: column; position: relative; }
  /* 「更多」按钮固定到作品卡片右上角，与作品 Logo 顶部对齐。
     之前它跟在操作按钮组后面，窄屏 flex 竖排后被挤到了页面中部。 */
  .work-detail-more {
    position: absolute;
    top: 24px;              /* 与 .work-detail-hero 的 padding-top 对齐 */
    right: 0;
    z-index: 5;
  }
  /* 菜单在按钮左侧展开并右对齐（与顶栏「更多」菜单方向一致） */
  .work-detail-more .user-menu-dropdown {
    left: auto;
    right: 0;
    top: calc(100% + 6px);
    bottom: auto;
    margin-left: 0;
  }
  .container, .container-wide { padding: 0 16px; }
  .auth-card { padding: 24px; }
}

/* 错误页 */
.error-page { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.error-code { font-size: 96px; font-weight: 700; color: var(--primary); line-height: 1; }
.error-msg { font-size: 18px; color: var(--text-secondary); margin-top: 12px; }

/* ============ 图片加载动画与降级 ============ */
/* 骨架屏 shimmer 背景：图片未加载完成时显示 */
@keyframes ok-img-shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.ok-img-loading {
  background: linear-gradient(90deg, var(--bg-subtle) 25%, var(--bg-hover) 50%, var(--bg-subtle) 75%);
  background-size: 800px 100%;
  animation: ok-img-shimmer 1.4s ease-in-out infinite;
}
/* 圆形头像的加载态用圆形背景 */
img.ok-img-loading[class*="avatar"],
img.ok-img-loading.avatar-img,
img.ok-img-loading.plaza-avatar,
img.ok-img-loading.plaza-comment-avatar,
img.ok-img-loading.plaza-user-avatar {
  border-radius: 50%;
}
/* 图片加载完成后渐入（仅当确实经历加载态才由 JS 添加，避免已可见图闪动） */
img.ok-img-loaded {
  animation: ok-img-fadein 0.3s ease;
}
@keyframes ok-img-fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  img.ok-img-loaded { animation: none; }
}
/* 图片加载失败（降级）时的占位 */
.ok-img-failed {
  background: var(--bg-subtle);
  opacity: 0.5;
}

/* 资料卡统一悬停层：覆盖头像+昵称区域的不可见矩形，唯一 data-uid 触发区 */
.profile-hover-zone{position:absolute;inset:0;z-index:2;cursor:pointer;background:transparent;border:0;padding:0;margin:0;display:block}

/* ============================================================
   窄屏客户端下载引导横幅
   仅窄屏（≤768px）且非 App 环境显示，由 JS 控制显隐
   ============================================================ */

/* ============================================================
   窄屏客户端下载引导横幅

   定位说明：
   放在 <header> 之外、作为 .app-body 的第一个子元素，
   用 position:fixed 固定在「顶栏实际底部」正下方。
   顶部偏移由 JS 写入 CSS 变量 --ok-header-actual-h
   （测量 .site-header 的 getBoundingClientRect().bottom），
   **不要写死 var(--header-h)** —— 顶栏内含窄屏子导航第二行
   （.page-subnav），各页面子导航项数量不同，高度本就不一致。

   样式要点：
   1. 纯色浅底，不使用渐变
   2. 无底部边框/色块，收尾用整块底色
   3. 显隐不用 max-height + overflow:hidden —— 会裁掉文字
   ============================================================ */
.client-promo-banner {
  display: none;
  position: fixed;
  left: 0; right: 0;
  /* 兜底值：JS 会用实测高度覆盖。calc 内加 +1px 是贴住顶栏的下边框。 */
  top: calc(var(--ok-header-actual-h, var(--header-h)) + 1px);
  z-index: 99;
  align-items: center;
  gap: 11px;
  padding: 10px 14px;
  background: var(--primary-light);
  color: var(--text);
  box-shadow: 0 1px 0 var(--border);
  transform: translateY(-100%);   /* 初始在顶栏上方（收起状态） */
  opacity: 0;
  transition: transform .26s ease, opacity .26s ease;
  pointer-events: none;
}
.client-promo-banner.show {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* 横幅是 fixed 定位（脱离文档流），显示时需给页面内容补上高度，
   否则会盖住页面顶部。用 body 上的 ok-promo-visible 类控制，
   横幅隐藏时不留空白。
   高度 = 横幅自身高度(55px) + 顶栏实测高度(var(--ok-header-actual-h)) */
body.ok-promo-visible main.page-content,
body.ok-promo-visible .dash-main,
body.ok-promo-visible .page-content {
  padding-top: calc(36px + var(--ok-header-actual-h, var(--header-h)) + 56px);
}
.client-promo-logo {
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 8px; object-fit: cover;
  background: #fff;                 /* 图标未加载时也不会出现色块 */
  border: 1px solid var(--border);
}
.client-promo-text { flex: 1; min-width: 0; }
.client-promo-title {
  font-size: 13.5px; font-weight: 600; line-height: 1.4;
  color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.client-promo-desc {
  font-size: 12px; line-height: 1.4; margin-top: 1px;
  color: var(--text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.client-promo-cta {
  flex-shrink: 0; padding: 7px 15px; border-radius: var(--radius-full);
  background: var(--primary); color: #fff; font-size: 13px; font-weight: 500;
  white-space: nowrap; transition: transform var(--transition), opacity var(--transition);
}
.client-promo-cta:active { transform: scale(.96); }
/* 关闭按钮：用内联流式布局，避免绝对定位在窄屏被遮挡 */
/* 关闭按钮：颜色跟随主题变量，opacity 用于表达「未到可关闭时间」而非颜色深浅。
   之前用 .4 导致浅色底上几乎不可见，这里提高基础不透明度保证可辨识。 */
.client-promo-close {
  flex-shrink: 0; position: static;
  width: 26px; height: 26px; border: 0; background: transparent;
  color: var(--text-secondary); font-size: 14px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  opacity: .75; cursor: not-allowed; padding: 0;
  transition: opacity var(--transition), background var(--transition), color var(--transition);
}
.client-promo-close.ready { opacity: 1; cursor: pointer; }
.client-promo-close.ready:hover { background: var(--bg-subtle); color: var(--text); }
.client-promo-close.ready:active { background: var(--bg-hover, var(--bg-subtle)); color: var(--text); }
/* 禁用态（倒计时中）额外降透明度，但保底 .6 避免看不清 */
.client-promo-close:not(.ready) { opacity: .6; }
.client-promo-close-timer { font-size: 10px; margin-left: 1px; }

@media (max-width: 768px) {
  .client-promo-banner { display: flex; }
}

/* ============================================================
   客户端下载页 /download

   布局要点：
   1. 所有板块统一 max-width + 同一栅格，保证各区块等宽、左右对齐
   2. 主标题与副标题统一左对齐（不用 text-align:center）
   3. 卡片间距统一由 --client-dl-gap 控制，避免各板块各写一套
   4. 不用 .animate-fade-up —— 它的 transform 会创建包含块导致 flex 子元素漂移
   ============================================================ */
.client-dl-page {
  --client-dl-maxw: 880px;
  --client-dl-gap: 20px;
  max-width: var(--client-dl-maxw);
  margin: 0 auto;
  padding: 40px 24px 56px;
}

/* 页头：左对齐 */
.client-dl-head { margin-bottom: 32px; }
.client-dl-title {
  font-size: 28px; font-weight: 700; line-height: 1.3;
  margin: 0 0 10px; color: var(--text); text-align: left;
}
.client-dl-subtitle {
  margin: 0; max-width: 640px;
  font-size: 15px; line-height: 1.8; color: var(--text-secondary); text-align: left;
}

/* 平台卡片：等宽对齐 */
.client-dl-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));  /* 1fr 而非 auto，保证严格等宽 */
  gap: var(--client-dl-gap);
  margin-bottom: var(--client-dl-gap);
}
.client-dl-card {
  display: flex; flex-direction: column;
  padding: 26px 24px;
  margin: 0;                      /* 去掉 .card 默认外边距，保证间距统一 */
  box-sizing: border-box;
}
.client-dl-card-head {
  display: flex; align-items: center; gap: 14px; margin-bottom: 16px;
}
.client-dl-card-icon {
  width: 50px; height: 50px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 25px;
  background: var(--primary-light); color: var(--primary);
  border-radius: var(--radius);
}
.client-dl-card-meta { min-width: 0; }
.client-dl-card-title {
  margin: 0; font-size: 17px; font-weight: 700; line-height: 1.4;
  color: var(--text); text-align: left;
}
.client-dl-card-sub {
  margin-top: 2px; font-size: 12px; color: var(--text-tertiary); line-height: 1.4;
}
.client-dl-card-desc {
  flex: 1; margin: 0 0 20px;
  font-size: 14px; line-height: 1.8; color: var(--text-secondary); text-align: left;
}
.client-dl-card-foot {
  margin: 12px 0 0; text-align: center;
  font-size: 12px; line-height: 1.7; color: var(--text-tertiary);
}

/* 未开放状态 */
.client-dl-empty-icon {
  width: 56px; height: 56px; margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; border-radius: var(--radius);
  background: var(--primary-light); color: var(--primary);
}
.client-dl-empty-icon + h3 { text-align: center; margin: 0 0 8px; }
.client-dl-card .text-secondary { text-align: left; }

/* 二维码区块 */
.client-dl-qr {
  flex-direction: row; align-items: center; gap: 24px;
  margin-bottom: var(--client-dl-gap);
}
.client-dl-qr-img { flex-shrink: 0; }
.client-dl-qr-img img {
  width: 132px; height: 132px; object-fit: contain;
  border-radius: var(--radius); display: block;
}
.client-dl-qr-text { min-width: 0; flex: 1; }
.client-dl-qr-text h2 {
  margin: 0 0 8px; font-size: 18px; font-weight: 700; text-align: left;
}
.client-dl-qr-text p { margin: 0; font-size: 14px; line-height: 1.8; text-align: left; }

/* 能力板块 */
.client-dl-section { margin-top: 36px; }
.client-dl-section-title {
  margin: 0 0 var(--client-dl-gap); font-size: 20px; font-weight: 700;
  color: var(--text); text-align: left;
}
.client-dl-features {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--client-dl-gap);
}
.client-dl-feature {
  margin: 0; padding: 22px 18px; text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.client-dl-feature-icon {
  width: 44px; height: 44px; margin-bottom: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; border-radius: var(--radius);
  background: var(--primary-light); color: var(--primary);
}
.client-dl-feature h3 {
  margin: 0 0 6px; font-size: 15px; font-weight: 600; text-align: center;
}
.client-dl-feature p {
  margin: 0; font-size: 13px; line-height: 1.7; text-align: center;
}

/* iOS 安装步骤 */
.client-dl-steps {
  margin: 0; padding-left: 22px;
  font-size: 14px; line-height: 2; color: var(--text-secondary);
}

@media (max-width: 860px) {
  .client-dl-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .client-dl-page { padding: 28px 16px 44px; }
  .client-dl-title { font-size: 23px; }
  .client-dl-grid { grid-template-columns: minmax(0, 1fr); }
  .client-dl-qr { flex-direction: column; text-align: center; }
  .client-dl-qr-text h2,
  .client-dl-qr-text p { text-align: center; }
}
@media (max-width: 420px) {
  .client-dl-features { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
 * OK Store 首页骨架屏（框架先行 + 加载动画）
 * 占位尺寸与真实卡片(.store-card-grid / .store-card-list / .zone-card)保持一致。
 * 原则：只有"图片等加载较慢"的区域(.sk-shimmer)才有加载动画；
 *       文本行/.查看全部/.按钮等占位(.sk)为静态色块，不上动画。
 * ============================================================ */
.sk {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--bg-subtle);
}
/* 仅图片类占位附加 shimmer 加载动画 */
.sk-shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  animation: sk-shimmer 1.4s infinite;
}
@keyframes sk-shimmer {
  100% { transform: translateX(100%); }
}

/* 轮播大图占位（与真实 .carousel-slide 尺寸一致：桌面 30% 高=10:3，窄屏 62.5% 高=16:10） */
.sk-hero {
  aspect-ratio: 10 / 3;
  border-radius: var(--radius-lg);
  margin-bottom: 32px;
}
@media (max-width: 800px) {
  .sk-hero { aspect-ratio: 16 / 10; margin-bottom: 24px; }
}

/* 板块标题行右侧 "查看全部" 占位（静态，不上动画） */
.sk-more {
  width: 74px;
  height: 30px;
  border-radius: 9999px;
  background: var(--bg-subtle);
}

/* 子骨架容器 */
.store-slot-inner { width: 100%; }

/* 带预览图：网格卡片占位（16:9 预览 + 标题 + slogan） */
.sk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px;
}
.sk-card-v2 {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  background: transparent;
}
.sk-preview { aspect-ratio: 16 / 9; border-radius: var(--radius-lg); background: var(--bg-subtle); }
.sk-body { padding: 12px 0 0; display: flex; flex-direction: column; gap: 9px; }
.sk-line { height: 14px; border-radius: 6px; background: var(--bg-subtle); }
.sk-line.short { width: 62%; }

/* 无预览图：横向列表卡片占位 */
.sk-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px;
}
.sk-list-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius-lg);
  min-height: 68px;
  background: var(--card);
  border: 1px solid var(--border);
}
.sk-avatar { width: 44px; height: 44px; border-radius: var(--radius); flex-shrink: 0; background: var(--bg-subtle); }
.sk-lines { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sk-list-row .sk-line { width: 100%; }
.sk-list-row .sk-line.short { width: 58%; }
.sk-btn { width: 84px; height: 32px; border-radius: 8px; flex-shrink: 0; background: var(--bg-subtle); }

/* 精选专区：大卡片占位 */
.sk-zonegrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}
.sk-zone {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  overflow: hidden;
}
.sk-zone-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--bg-subtle), #E4E7EB);
}
.sk-zone-line { position: relative; height: 16px; width: 55%; border-radius: 6px; background: rgba(0, 0, 0, 0.08); }
.sk-zone-line.short { width: 40%; height: 12px; }

/* 加载失败降级提示 */
.store-slot-fallback {
  padding: 26px 0;
  text-align: center;
  color: var(--text-secondary);
  font-size: 14px;
}
.store-slot-fallback .btn {
  margin-top: 12px;
}




/* ============================================================
   跨文档视图过渡（Cross-document View Transitions）
   修复：窄屏整页切换时底部导航「整条消失再闪出」

   原理：整页切换（MPA）时，旧文档被销毁、新文档重建，
   底栏作为普通 DOM 必然经历「移除 → 重新插入」，
   浏览器把它当作两个不同元素，于是闪一下。
   给底栏一个稳定的 view-transition-name 后，
   浏览器会把它识别为**同一个元素**，用 FLIP 动画
   在旧位置与新位置之间平滑过渡（这里位置相同，即原地不动），
   不再消失/重放。

   浏览器支持：Chrome/Edge 126+、Safari 18.2+（约 86%）。
   不支持的浏览器（如 Firefox）自动退化为普通跳转，无副作用。
   ============================================================ */
@view-transition {
  navigation: auto;
}

/* 底栏在切换前后是「同一个东西」，命名后由浏览器平滑接管。
   底栏是 position:fixed，位置与滚动无关、跨页面完全确定，
   是视图过渡的理想对象。

   ⚠️ 这里**不要加 `isolation:isolate`**：
   `isolation` 只创建层叠上下文，并不改变 position:fixed 的包含块
   （改变包含块的是 transform/filter/contain 等）。它既不能防广场页
   的 overflow 干扰，反而会让命名元素在跨文档视图过渡时被放进独立的
   隔离层叠上下文里捕捉，快照反而更容易不一致 —— 这是顶栏稳定、底栏
   却闪没的关键差异之一（顶栏从没有 isolation）。

   顶栏（.site-header）也是「跨页面保持」的框架元素，
   因此同样命名并由浏览器跨文档接管，避免它跟着整页 root 一起
   淡出→透明、再淡入，否则顶栏也会「先消失再出现」、
   且 backdrop 采样到空背景导致过渡一瞬发白发亮。
   顶栏虽是 sticky，但配合既有 contain:layout style 与
   mix-blend-mode:normal，跨文档快照坐标稳定，不再随 root 明暗跳变。 */

/*
   底栏/顶栏的 view-transition-name 都放在**基础层**而非窄屏媒体查询内：
   命名必须在跨文档过渡的**新旧两份文档里稳定存在**且互相匹配。
   若把它放进 `@media(max-width:900px)`，过渡快照判定时若视口宽度波动
   （滚动条/分辨率差异等），新或旧文档可能有一侧判定不匹配 → 命名失效，
   底栏就退回成「随 root 一起淡出淡入」的普通元素，表现为整条先消失再闪出。
   放在基础层后，与「窄屏才 display:flex」不冲突：display:none 时命名无效，
   窄屏渲染时命名恒定，两页始终匹配，行为与顶栏一致、全程稳定。
*/
.site-header {
  view-transition-name: ok-header;
}
.mobile-bottom-nav {
  view-transition-name: ok-bottom-nav;
}

/* 顶栏/底栏属于「跨页面保持」的框架元素：
   它们不参与内容淡入淡出，只做位置/尺寸的平滑衔接。
   若让它们跟着 root 一起淡出淡入，仍会有一次明暗跳变。 */
::view-transition-group(ok-header) {
  animation-duration: 0.25s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
::view-transition-group(ok-bottom-nav) {
  /* 须与底栏 old/new 动画时长一致，否则 group 先结束时
     old/new 会被硬切，又出现闪没 */
  animation-duration: 0.3s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
/* 顶栏：完全不做透明度动画（旧快照直接移除、新快照直接呈现），
   顶栏固定在视口顶部、两页高度一致，直接替换视觉上无感。 */
::view-transition-old(ok-header),
::view-transition-new(ok-header) {
  animation: none;
  mix-blend-mode: normal;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* 底栏：位于视口底部，新文档整页加载（paint-holding 阶段、load 前）
   时新快照可能晚于旧快照就绪。若像顶栏那样 animation:none，会有一段
   「旧快照已移除、新快照未就位」的空窗 → 底栏整条消失、加载完才重现。
   这里让**新旧快照都持续保持显示**（opacity 恒 1，完全不透明淡入淡出）：
   两页底栏位置/尺寸完全一致、同图重叠，于是从过渡开始到结束，
   底栏始终在底部，视觉上完全不动；旧快照被移除的瞬间新快照已在原位。
   同时禁掉 backdrop-filter 防发白。 */
::view-transition-old(ok-bottom-nav),
::view-transition-new(ok-bottom-nav) {
  mix-blend-mode: normal;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  animation: ok-bt-hold 0.3s ease-out;
}
@keyframes ok-bt-hold { from { opacity: 1; } to { opacity: 1; } }

/* 页面内容区（root）：轻微交叉淡入，掩盖整页重绘的突兀感。
   时长刻意偏短，避免拖慢导航体感。 */
::view-transition-old(root) {
  animation: ok-vt-fade-out 0.16s ease-out both;
}
::view-transition-new(root) {
  animation: ok-vt-fade-in 0.20s ease-in both;
}
@keyframes ok-vt-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes ok-vt-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 无障碍：用户开启「减少动态效果」时，取消全部过渡动画 */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* ---------- 老浏览器兜底：页面离开瞬间降级毛玻璃 ----------
   不支持「跨文档视图过渡」的浏览器（如 Firefox）整页切换时，
   底栏的 backdrop-filter 合成层会被瞬间销毁，视觉上闪一下。
   由 main.js 在跳转前给底栏加 .ok-nav-leaving，
   把毛玻璃换成等价不透明底色 —— 合成层平滑消失，不再硬切。
   ⚠️ 这里同时覆盖浅色与暗色，取与毛玻璃观感最接近的实色。 */
.mobile-bottom-nav.ok-nav-leaving {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: #FBFBFD !important;   /* 对齐 --bg（浅色） */
}
[data-theme="dark"] .mobile-bottom-nav.ok-nav-leaving {
  background: #000000 !important;   /* 对齐 --bg（暗色） */
}