/* ============================================================
   商铺工程条件管理 · app.css — 移动端 App 外壳与组件
   依赖 tokens.css。Shell 结构见 design-contract §4.1。
   ============================================================ */

body.surface-app {
  display: flex; justify-content: center;
  background: var(--void);
  min-height: 100dvh;
}

/* ---------- 手机画布 ---------- */
.phone {
  position: relative;
  display: flex; flex-direction: column;
  width: 100%; max-width: var(--phone-w);
  height: 100dvh;
  background: var(--bg);
  overflow: hidden;
}
@media (min-width: 520px) {
  body.surface-app { padding: var(--s6) 0; align-items: center; }
  .phone {
    height: min(880px, calc(100dvh - var(--s8) * 2));
    border: 1px solid var(--border-strong);
    border-radius: 26px;
    box-shadow: var(--shadow-lg);
  }
}

/* 氛围罩层挂在 .phone 上，内容层保持透明 */
.phone::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(120% 70% at 50% -8%, rgba(45, 212, 191, .07), transparent 62%),
    radial-gradient(90% 55% at 100% 102%, rgba(76, 201, 240, .05), transparent 62%);
}

/* ---------- 主内容槽（唯一变化点） ---------- */
.app-main {
  position: relative; z-index: 1;
  flex: 1; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;
  display: flex; flex-direction: column;
}
/* 内容块保持自身高度，不被 column flex 压缩（滚动由 .app-main 承担） */
.app-main > * { flex: none; }
/* 行内小号标记字（Tab 计数、角标）不继承斜体 */
.ptab i, .entry__badge { font-style: normal; }
.ptab i { font-size: var(--fs-caption); color: var(--text-muted); font-family: var(--font-mono); }
.ptab.is-on i { color: var(--brand); }

/* ---------- 底部 Tab（逐字节固定） ---------- */
.app-tabbar {
  position: relative; z-index: 30; flex: none;
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;
  height: calc(56px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--glass-nav);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--border);
}
.tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  height: 56px; color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.tab:active { transform: scale(.94); }
.tab__ico .lucide { width: 22px; height: 22px; }
.tab__lb { font-size: 10px; letter-spacing: .02em; }
.tab--pub { justify-content: center; }
.tab__plus {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 30px; border-radius: 15px;
  background: var(--brand); color: var(--brand-ink);
  box-shadow: 0 0 0 4px rgba(45, 212, 191, .12);
  transition: background var(--dur-fast) var(--ease);
}
.tab__plus svg.lucide { width: 20px; height: 20px; stroke-width: 2.4; }
.tab--pub:active .tab__plus { background: var(--brand-press); }

/* active 规则：唯一机制，由 body[data-page] 驱动 */
body[data-page="home"] .app-tabbar .tab[data-nav="home"],
body[data-page="shop"] .app-tabbar .tab[data-nav="shop"],
body[data-page="upload"] .app-tabbar .tab[data-nav="upload"],
body[data-page="records"] .app-tabbar .tab[data-nav="records"],
body[data-page="profile"] .app-tabbar .tab[data-nav="profile"] { color: var(--brand); }
body[data-page="home"] .app-tabbar .tab[data-nav="home"] .tab__lb,
body[data-page="shop"] .app-tabbar .tab[data-nav="shop"] .tab__lb,
body[data-page="upload"] .app-tabbar .tab[data-nav="upload"] .tab__lb,
body[data-page="records"] .app-tabbar .tab[data-nav="records"] .tab__lb,
body[data-page="profile"] .app-tabbar .tab[data-nav="profile"] .tab__lb { font-weight: 700; }
body[data-page="login"] .app-tabbar { display: none; }
body[data-page="login"] .phone { justify-content: center; }

/* ---------- 顶部栏 ---------- */
.app-topbar {
  position: sticky; top: 0; z-index: 20; flex: none;
  display: flex; align-items: center; gap: var(--s2);
  height: 45px; padding: 0 var(--s3);
  background: var(--glass-top);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.app-topbar--float {
  position: absolute; inset: 0 0 auto 0;
  background: linear-gradient(180deg, rgba(4, 6, 8, .72) 0%, rgba(4, 6, 8, .34) 58%, transparent 100%);
  border-bottom: none; backdrop-filter: none;
}
.app-topbar__ttl { font-size: var(--fs-title); font-weight: 700; }
.app-topbar__sp { margin-left: auto; }

/* 顶部 Tab 组 */
.toptabs { display: flex; align-items: center; gap: var(--s5); height: 100%; }
.toptab {
  position: relative; display: flex; align-items: center; height: 100%;
  font-size: var(--fs-body); color: var(--text-sub);
  transition: color var(--dur-fast) var(--ease);
}
.toptab::after {
  content: ''; position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%) scaleX(0);
  width: 20px; height: 2px; border-radius: var(--r-pill); background: var(--brand);
  transition: transform var(--dur) var(--ease);
}
.toptab.is-on { color: var(--text); font-weight: 700; }
.toptab.is-on::after { transform: translateX(-50%) scaleX(1); }
.toptab:hover { color: var(--text); }

/* 相册：翻页容器占满「顶栏 + 相册条」以下的剩余高度（首页用整屏 .fill） */
.feedwrap { position: relative; flex: 1 1 0; min-height: 0; }

/* ---------- Feed（整页翻页） ---------- */
.fill { position: absolute; inset: 0; z-index: 1; }
.feed {
  display: flex; flex-direction: column;
  height: 100%; overflow-y: auto; overflow-x: hidden;
  scroll-snap-type: y mandatory; overscroll-behavior-y: contain;
  scrollbar-width: none;
}
.feed::-webkit-scrollbar { display: none; }
.feed__slide {
  position: relative; flex: none;
  width: 100%; height: 100%;
  scroll-snap-align: start; scroll-snap-stop: always;
  overflow: hidden; background: var(--media-black);
}
/* 相册：照片默认铺满（cover —— 保持原图比例、超出部分裁切），单击在「铺满 / 完整显示」间切换 */
.photostage {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.photostage > .media {
  position: relative; inset: auto;
  width: 100%; height: 100%;
}
/* 完整显示（contain —— 按原图比例等比缩到容器内，多余部分留深色底） */
.photostage.is-fit > .media {
  width: auto; height: 100%;
  max-width: 100%; max-height: 100%;
  aspect-ratio: var(--ar, 3 / 2);
}
/* 相册：右上角「序号 / 总数」（挂在翻页容器上，随当前页刷新） */
.photo__idx { position: absolute; right: var(--s3); top: var(--s3); z-index: 6; }
/* 封面（渐变占位，无外部图片） */
.media {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 30% 15%, hsl(var(--h, 30) 62% 34%), transparent 62%),
    radial-gradient(110% 90% at 80% 90%, hsl(calc(var(--h, 30) + 42) 58% 26%), transparent 60%),
    linear-gradient(160deg, var(--media-a), var(--media-b));
}
.media::after {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .02) 1px, transparent 1px);
  background-size: 100% 3px;
}
.media__box {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  width: 72px; height: 72px; border-radius: 50%;
  background: rgba(6, 8, 10, .42); border: 1px solid rgba(255, 255, 255, .18);
  color: var(--ink-inverse); backdrop-filter: blur(2px);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.feed__slide.is-playing .media__box { opacity: 0; transform: translate(-50%, -50%) scale(.85); }
.feed__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4, 6, 8, .62) 0%, transparent 26%, transparent 52%, rgba(4, 6, 8, .78) 100%);
}
/* 顶部进度（模拟播放进度） */
.feed__prog { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255, 255, 255, .14); }
.feed__prog i { display: block; height: 100%; width: 0; background: var(--brand); }
/* 信息流结尾卡：循环播放关闭时滑到底的明确收尾（避免让人以为卡住） */
.feed__end {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  background: var(--media-black);
}
.feed__end .empty { padding-bottom: var(--s9); }

/* 右侧操作栏：end 10 / bottom 120（沿用同源短视频客户端的版式骨架）
   首页视频 Feed 与相册照片 Feed 共用这一套 —— 圆钮尺寸 --act-size、相邻间距 --act-gap
   只在 .actbar 上定义一次（照片页那套 44px / --s4 为准），两页的 HTML 也由 app.js 的
   App.actbarHtml() 统一产出，尺寸与间距不可能各写一份而漂移。 */
.actbar {
  --act-size: 44px;      /* 圆钮直径（契约 §3.2：44px） */
  --act-gap: var(--s4);  /* 相邻按钮垂直间距（与相册页一致） */
  --act-icon: 24px;      /* 圆钮内图标 */
  position: absolute; right: 10px; bottom: 120px; z-index: 6;
  display: flex; flex-direction: column; align-items: center; gap: var(--act-gap);
}
.act { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--ink-inverse); }
.act__btn {
  display: flex; align-items: center; justify-content: center;
  width: var(--act-size); height: var(--act-size); border-radius: 50%;
  background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(6px);
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.act:active .act__btn { transform: scale(.92); }
.act__btn:hover { background: rgba(255, 255, 255, .18); }
.act__btn svg.lucide { width: var(--act-icon); height: var(--act-icon); }
.act__n { font-size: var(--fs-caption); font-family: var(--font-mono); text-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
.act.is-on .act__btn { color: var(--brand); border-color: var(--brand); background: rgba(45, 212, 191, .16); }
.act.is-on .act__btn .lucide { fill: var(--brand); }
.act--ava { gap: var(--s1); }
.act__ava {
  width: 46px; height: 46px; border-radius: 50%; overflow: hidden;
  border: 2px solid rgba(255, 255, 255, .82);
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, hsl(var(--h, 30) 60% 42%), var(--surface-3));
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-title);
}
.act__follow {
  margin-top: -12px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--brand); color: var(--brand-ink);
  display: flex; align-items: center; justify-content: center;
}
.act__follow svg.lucide { width: 13px; height: 13px; stroke-width: 3; }
.act--ava.is-on .act__follow { background: var(--surface-3); color: var(--text-sub); }

/* 左下信息区：start 16 / end 90 / bottom 16（沿用同源短视频客户端的版式骨架） */
.meta {
  position: absolute; left: 16px; right: 90px; bottom: 16px; z-index: 6;
  display: flex; flex-direction: column; gap: var(--s2); color: var(--ink-inverse);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .55);
}
.meta__who { display: flex; align-items: center; gap: var(--s2); }
.meta__name { font-size: var(--fs-body); font-weight: 700; }
.meta__desc { font-size: 13px; line-height: 1.5; }
.meta__tags { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.meta__pill {
  display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 var(--s2);
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--r-sm); font-size: var(--fs-caption);
  font-family: var(--font-mono); color: rgba(255, 255, 255, .88);
  max-width: 100%; overflow: hidden;
}
.meta__pill b { font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 通用页面容器 ---------- */
.page { display: flex; flex-direction: column; padding: var(--s4); gap: var(--s4); }
.page--flush { padding: 0; }
.page__sec { display: flex; flex-direction: column; gap: var(--s3); }
.sec-hd { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.sec-hd__t { font-size: var(--fs-title); font-weight: 700; }
.sec-hd__a { font-size: var(--fs-label); color: var(--brand); display: inline-flex; align-items: center; gap: 4px; }

/* ---------- 我的 · 头部 ---------- */
.prof-head {
  position: relative;
  /* 顶部留出返回按钮的高度；同时避免 .prof-id 的 margin 塌陷到父元素外导致整体上移 */
  padding-top: 72px;
  padding-bottom: var(--s4);
}
.prof-head__glow {
  position: absolute; inset: 0 0 auto 0; height: 100px;
  background: linear-gradient(180deg, rgba(45, 212, 191, .28) 0%, rgba(45, 212, 191, .08) 55%, transparent 100%);
}
.prof-head__glow::after {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
  background-size: 22px 100%;
}
.prof-head__back { position: absolute; top: var(--s3); left: var(--s3); z-index: 4; }
.prof-id {
  position: relative; z-index: 2;
  display: flex; align-items: flex-start; gap: var(--s4);
  /* 与顶部的间距由 .prof-head 的 padding-top 控制，这里不用 margin-top（会被外边距塌陷） */
  padding: 0 var(--s4);
  margin-top: 0;
}
.prof-id__ava {
  width: 80px; height: 80px; border-radius: 50%; flex: none;
  margin-top: -20px;   /* 轻微压住 banner 下沿，不侵入返回按钮所在区域 */
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, hsl(28 60% 42%), var(--surface-3));
  border: 2px solid rgba(45, 212, 191, .5);
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2); color: var(--ink-inverse);
}
.prof-id__tx { flex: 1; min-width: 0; padding-top: 2px; }
.prof-id__row { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.prof-id__name { font-size: 17px; font-weight: 700; }
.prof-id__id { font-size: var(--fs-body); color: rgba(255, 255, 255, .72); font-family: var(--font-mono); margin-top: 4px; }
.prof-id__bio { font-size: 13px; color: var(--text-sub); margin-top: 4px; }
.prof-id__menu { margin-left: auto; }

/* 统计卡：五项等分 */
.statcard {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 2px; margin: 0 var(--s4);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--s4) 0;
}
.stat { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.stat__v { font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 1.1; }
.stat__v--brand { color: var(--brand); }
.stat__v--data { color: var(--data); }
.stat__l { font-size: var(--fs-caption); color: var(--text-muted); }
button.stat { transition: opacity var(--dur-fast) var(--ease); }
button.stat:hover { opacity: .8; }

/* 三格功能入口 */
.entryrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); margin: 0 var(--s4); }
.entry {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: var(--s3) var(--s2);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.entry:hover { background: var(--surface-2); }
.entry:active { transform: translateY(1px); }
.entry__ic { color: var(--brand); position: relative; display: inline-flex; }
.entry__lb { font-size: var(--fs-label); color: var(--text-sub); }
.entry__badge {
  position: absolute; top: -5px; right: -9px; min-width: 15px; height: 15px; padding: 0 4px;
  border-radius: var(--r-pill); background: var(--danger); color: var(--ink-inverse);
  font-size: 9px; font-family: var(--font-mono); line-height: 15px; text-align: center;
}

/* 作品/相册/喜欢/收藏 Tab（列数随页面里的按钮数量自适应） */
.ptabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-bottom: 1px solid var(--border); }
.ptab {
  position: relative; height: 44px; display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-body); color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease);
}
.ptab::after {
  content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%) scaleX(0);
  width: 28px; height: 3px; border-radius: var(--r-pill); background: var(--brand);
  transition: transform var(--dur) var(--ease);
}
.ptab.is-on { color: var(--brand); font-weight: 700; }
.ptab.is-on::after { transform: translateX(-50%) scaleX(1); }

/* 封面网格 */
.grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s2); padding: var(--s3) var(--s4); }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.cover {
  position: relative; aspect-ratio: 1 / 1; border-radius: var(--r-lg); overflow: hidden;
  background: linear-gradient(150deg, hsl(var(--h, 30) 58% 30%), var(--surface-3));
  border: 1px solid var(--border); text-align: left;
  transition: transform var(--dur-fast) var(--ease);
}
.cover:active { transform: scale(.98); }
.grid3 .cover { border-radius: 0; border-color: transparent; }
.cover__shade {
  position: absolute; inset: auto 0 0 0; height: 40px;
  background: linear-gradient(180deg, transparent, rgba(4, 6, 8, .82));
}
.cover__badges { position: absolute; top: 6px; left: 6px; display: flex; gap: 4px; flex-wrap: wrap; }
.cover__badge {
  display: inline-flex; align-items: center; gap: 3px; height: 18px; padding: 0 5px;
  border-radius: var(--r-sm); font-size: 10px; backdrop-filter: blur(4px);
}
.cover__badge--priv { background: rgba(4, 6, 8, .72); color: var(--ink-inverse); border: 1px solid rgba(255, 255, 255, .16); }
.cover__badge--lock { background: rgba(245, 83, 61, .82); color: var(--ink-inverse); }
.cover__badge--new { background: rgba(53, 208, 127, .84); color: var(--success-ink); }
.cover__meta {
  position: absolute; left: 6px; bottom: 6px; display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-caption); font-family: var(--font-mono); color: var(--ink-inverse);
}
.cover__acts { position: absolute; right: 6px; top: 6px; }
.cover__act {
  display: flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border-radius: var(--r-pill); background: rgba(4, 6, 8, .62); color: var(--ink-inverse);
  border: 1px solid rgba(255, 255, 255, .14);
}
.cover__dur {
  position: absolute; right: 6px; bottom: 6px;
  padding: 0 5px; border-radius: var(--r-sm); background: rgba(4, 6, 8, .7);
  font-size: 10px; font-family: var(--font-mono); color: var(--ink-inverse);
}

/* ---------- 相册 ---------- */
.albumstrip { display: flex; gap: var(--s2); overflow-x: auto; padding: var(--s3) var(--s4); scrollbar-width: none; }
.albumstrip::-webkit-scrollbar { display: none; }
.chip {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 var(--s3);
  background: var(--surface-3); border: 1px solid transparent; border-radius: var(--r-pill);
  font-size: var(--fs-label); color: var(--text-sub); white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.chip:hover { color: var(--text); }
.chip.is-on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); font-weight: 700; }
/* 收藏夹 chip 的按压态：长按（满 500ms 弹「重命名 / 删除」菜单）前的明确反馈；
   只用既有 token，不新造颜色 / 圆角 / 字号 */
.chip.is-press { background: var(--surface-2); border-color: var(--border-strong); transform: scale(.96); }
.chip__n { font-family: var(--font-mono); font-size: 10px; opacity: .8; }
/* 相册「管理」多选态：复用 .grid3 + .cover 的封面色块，只补勾选角标的选中态 */
.cover__act.is-on { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
/* 相册「管理」多选态：缩略图网格占满翻页容器并自身滚动（四列，与真 App 的管理网格一致） */
.gridfill {
  position: absolute; inset: 0; overflow-y: auto; align-content: start;
  grid-template-columns: repeat(4, 1fr); padding: var(--s1);
}
/* 系统相册的「重命名 / 删除」置灰（原生 disabled，点击无效） */
.menu-pop__i[disabled] { opacity: .45; pointer-events: none; }
/* 相册管理：相册选择器里的系统相册置灰（不可重命名 / 删除） */
.row-opt[disabled] { opacity: .45; pointer-events: none; }

/* 照片分享面板的「操作」分区：标题 + 与收藏 / 移动面板同构的行选项（入口来自原「更多」菜单） */
.share-ops { margin-top: var(--s5); border-top: 1px solid var(--border); padding-top: var(--s3); }
.share-ops__t { font-size: var(--fs-label); color: var(--text-muted); letter-spacing: .04em; margin-bottom: var(--s1); }
/* 删除等警示行的图标与文字同色（与 .menu-pop__i[danger] 的整行警示一致） */
.share-ops .row-opt[danger] .row-opt__ic { color: var(--danger); }

/* ---------- 文件列表 ---------- */
.flist { display: flex; flex-direction: column; }
.fitem {
  display: flex; align-items: center; gap: var(--s3); width: 100%;
  padding: var(--s3) var(--s4); border-bottom: 1px solid var(--border); text-align: left;
  transition: background var(--dur-fast) var(--ease);
}
.fitem:hover { background: var(--surface-2); }
.fitem.is-sel { background: var(--brand-soft); }
.fitem__ic {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--r-md); flex: none;
  background: var(--surface-3); color: var(--text-sub);
}
.fitem__ic--video { background: rgba(45, 212, 191, .14); color: var(--brand); }
.fitem__ic--image { background: var(--data-soft); color: var(--data); }
.fitem__ic--doc { background: rgba(148, 163, 184, .14); color: var(--type-doc); }
.fitem__ic--audio { background: rgba(139, 92, 246, .16); color: var(--type-audio); }
.fitem__ic--archive { background: var(--warning-soft); color: var(--warning); }
.fitem__tx { flex: 1; min-width: 0; }
.fitem__nm { font-size: var(--fs-body); display: flex; align-items: center; gap: 6px; }
.fitem__sub { font-size: var(--fs-caption); color: var(--text-muted); font-family: var(--font-mono); margin-top: 2px; }
.fitem__ck { width: 15px; height: 15px; accent-color: var(--brand); flex: none; }

/* 底部操作栏（文件页） */
.bottombar {
  position: sticky; bottom: 0; z-index: 25; flex: none;
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4); background: var(--surface);
  border-top: 1px solid var(--border-strong); backdrop-filter: blur(12px);
}

/* ---------- 磁盘占用条与图例：已上移到 tokens.css 共用 ---------- */

/* ---------- 上传队列 ---------- */
.qitem { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--border); }
.qitem__tx { flex: 1; min-width: 0; }
.qitem__nm { font-size: var(--fs-body); }
.qitem__sub { font-size: var(--fs-caption); color: var(--text-muted); font-family: var(--font-mono); margin: 2px 0 6px; }

/* ---------- 环形图（存储占用） ---------- */
.ring {
  --p: 62;
  width: 132px; height: 132px; border-radius: 50%; flex: none;
  background: conic-gradient(var(--brand) calc(var(--p) * 1%), var(--surface-3) 0);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.ring::before { content: ''; position: absolute; inset: 12px; border-radius: 50%; background: var(--surface); }
.ring__in { position: relative; text-align: center; }
.ring__v { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); line-height: 1.1; }
.ring__l { font-size: var(--fs-caption); color: var(--text-muted); }

/* ---------- 登录页 ---------- */
.login {
  display: flex; flex-direction: column; justify-content: center; gap: var(--s6);
  padding: var(--s8) var(--s6); min-height: 100%;
}
.login__brand { display: flex; flex-direction: column; gap: var(--s2); }
.login__mark {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: var(--r-lg);
  background: var(--brand-soft); border: 1px solid rgba(45, 212, 191, .32); color: var(--brand);
}
.login__mark .lucide { width: 26px; height: 26px; }
.login__ttl { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-display); line-height: 1; letter-spacing: .02em; }
.login__sub { font-size: var(--fs-label); color: var(--text-muted); font-family: var(--font-mono); }
.login__form { display: flex; flex-direction: column; gap: var(--s4); }
.login__probe {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  font-size: var(--fs-label); color: var(--text-sub);
}

/* ---------- 搜索（.searchbar / .searchbar__f 已提升到 tokens.css 共用） ---------- */
.hist { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* ---------- 大图查看 ---------- */
.viewer { position: fixed; inset: 0; z-index: 820; background: rgba(4, 6, 8, .96); display: flex; flex-direction: column; }
.viewer__hd { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); height: 52px; }
.viewer__ttl { font-size: var(--fs-label); color: var(--text-sub); font-family: var(--font-mono); }
.viewer__stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: var(--s4); }
.viewer__img { width: 100%; max-width: 380px; aspect-ratio: 1/1; border-radius: var(--r-lg); background: linear-gradient(150deg, hsl(var(--h, 30) 58% 32%), var(--surface-3)); }
.viewer__ft { padding: var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom, 0px)); display: flex; gap: var(--s2); overflow-x: auto; }
.viewer__th { flex: none; width: 52px; height: 52px; border-radius: var(--r-sm); background: linear-gradient(150deg, hsl(var(--h, 30) 58% 32%), var(--surface-3)); border: 1px solid transparent; }
.viewer__th.is-on { border-color: var(--brand); }

/* ---------- 元信息行 / 设置行（App 页已在用；与 admin.css 同源，补齐 App 侧定义） ---------- */
.meta-line { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; font-size: var(--fs-caption); color: var(--text-muted); }
.meta-line b { font-family: var(--font-mono); font-weight: 400; color: var(--text-sub); }
.setrow { display: flex; align-items: center; gap: var(--s4); padding: var(--s4) 0; border-bottom: 1px solid var(--border); }
.setrow:last-child { border-bottom: none; }
.setrow__tx { flex: 1; min-width: 0; }
.setrow__tx b { display: block; font-size: var(--fs-body); font-weight: 400; }
.setrow__tx em { display: block; font-style: normal; font-size: var(--fs-caption); color: var(--text-muted); margin-top: 2px; }

/* ---------- 响应式 ---------- */
@media (max-width: 380px) {
  .meta { right: 74px; }
  .actbar { bottom: 108px; }
  .statcard { grid-template-columns: repeat(5, 1fr); }
  .stat__v { font-size: var(--fs-title); }
}

/* ============================================================
   商铺工程条件管理 · 演示组件扩展（仅用既有 token，不新造色值字号）
   ============================================================ */
/* 键值明细行（商铺详情） */
.dkv { display: flex; flex-direction: column; }
.dkv__r { display: flex; align-items: flex-start; gap: var(--s3); padding: 11px 0; border-bottom: 1px solid var(--border); font-size: var(--fs-body); }
.dkv__r:last-child { border-bottom: none; }
.dkv__k { flex: none; width: 98px; color: var(--text-muted); font-size: var(--fs-label); padding-top: 1px; }
.dkv__v { flex: 1; min-width: 0; color: var(--text-sub); word-break: break-all; }
.dkv__v .t-mono { color: var(--text); }
.dkv__v.is-empty { color: var(--text-faint); }
.val-on { color: var(--success); font-weight: 600; }
.val-off { color: var(--text-muted); }
/* 照片缩略（渐变占位，色相由 --h 驱动，与 .cover/.media 同源） */
.pthumb { position: relative; aspect-ratio: 1 / 1; border-radius: var(--r-md); overflow: hidden; background: linear-gradient(150deg, hsl(var(--h,30) 55% 32%), var(--surface-3)); border: 1px solid var(--border); }
.pthumb .lucide { position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; color: rgba(255,255,255,.55); }
.pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); }
.rec-meta { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-caption); color: var(--text-muted); }
.rec-meta b { font-family: var(--font-mono); font-weight: 400; color: var(--text-sub); }