*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:#EDEDEA;overflow:hidden;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;
  color:#1b1c1a;-webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}

/* ---- 键盘焦点环（已按需求全局移除）----
   原为聚焦时的金色 outline 焦点环，现全局去除。 */
a{color:inherit;text-decoration:none}
::-webkit-scrollbar{width:0!important;height:0!important}

/* ---- 彻底禁用一切聚焦描边（含 WebView 内置焦点环）---- */
*:focus,*:focus-visible,*:active{
  outline:none!important;outline-offset:0!important;
  -webkit-outline:none!important;box-shadow:revert}
input:focus,input:focus-visible,textarea:focus,textarea:focus-visible,
select:focus,button:focus,button:focus-visible,a:focus,a:focus-visible,
[contenteditable]:focus,[tabindex]:focus{
  outline:none!important;outline-offset:0!important;
  box-shadow:revert}

/* ---- 安全区变量 ----
   浏览器端取 env()；APP 内 Android WebView 的 env() 恒为 0，
   由壳层（App.js）注入真实状态栏/手势条高度覆盖 --safe-top / --safe-bottom。 */
:root{--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)}
.pb-safe{padding-bottom:var(--safe-bottom,0px)}
.pt-safe{padding-top:var(--safe-top,0px)}
main>:first-child{margin-top:0!important}
main>:last-child{margin-bottom:0!important}

#stage{position:relative;width:100%;height:100dvh;display:flex;align-items:center;justify-content:center;
  padding:24px 16px}
#phone{position:relative;overflow:hidden;background:#FBF9F5;transform:translateZ(0);
  height:min(844px, calc(100dvh - 48px), calc((100vw - 32px) * 844 / 390));
  aspect-ratio:390/844;width:auto;border-radius:36px;
  /* 兜底：把任何逃逸层限制在机身盒内；边框由外层 .phone-frame 用真实 border 绘制 */
  clip-path:inset(0)}

/* 机身外框：用真实 border 绘制（圆角由浏览器原生渲染，四角天然完整）。
   盒尺寸 = 屏幕 + 各 10px；外圆角 46px → 内缘 36px，与屏幕圆角同心贴合。
   边框带天然覆盖"屏幕方角以内、圆角以外"的角区，四角不会再有缺口。 */
.phone-frame{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:0;
  height:calc(min(844px, calc(100dvh - 48px), calc((100vw - 32px) * 844 / 390)) + 20px);
  aspect-ratio:410/864;width:auto;box-sizing:border-box;
  border:10px solid #0F1013;border-radius:46px;pointer-events:none;
  box-shadow:0 34px 70px -24px rgba(24,25,27,.45)}

/* 贴边固定栏（毛玻璃）自身的圆角：
   部分 Chromium/WebView 里 position:fixed + backdrop-filter 的元素不受祖先
   overflow/圆角裁切约束，会在机身四角露出方角。给元素自身加与机身一致的圆角后，
   它的背景与模糊层都不会再画到圆角之外 —— 不依赖引擎裁切行为，最稳。 */
#phone [class*="fixed"][class*="top-0"]{border-radius:36px 36px 0 0}
#phone [class*="fixed"][class*="bottom-0"]{border-radius:0 0 36px 36px}
#phone [class*="fixed"][class*="inset-0"]{border-radius:36px}

/* 贴边固定栏禁用毛玻璃模糊：
   backdrop-filter 生成的模糊层既不受祖先圆角裁切约束、也不受元素自身 border-radius 约束，
   会在机身四角画出一小块方形模糊斑（就是那点"多余的角"）。半透明底色保留，
   视觉影响很小，换四角彻底干净。 */
#phone [class*="fixed"][class*="top-0"],
#phone [class*="fixed"][class*="bottom-0"],
#phone [class*="fixed"][class*="inset-0"]{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}


/* ---- 每个设计稿 = 一个 .page ---- */
.page{position:absolute;inset:0;overflow:hidden;visibility:hidden;opacity:0;
  transform:translateZ(0);background:#fbf9f5}
.page.active{visibility:visible;opacity:1;z-index:2}
.page.leaving{visibility:visible;opacity:0;z-index:1}

/* 滚动容器：与 position:fixed 的包含块分离，保证头部/Tab 不随内容滚动 */
.page > .scr{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.page > .scr > main{min-height:100%}
body[data-screen="messages"] .page > .scr > main{padding-top:calc(var(--safe-top, 0px) + 110px)!important}
html:not([data-wis-ready]) body:not([data-screen="login"]) .page > .scr{visibility:hidden}

/* 设计稿里用 100vh 做全屏的元素，在手机壳内改成 100% */
#phone .h-screen{height:100%}
#phone .min-h-screen{min-height:100%}

/* ---- 底部 Tab ---- */
#tabbar{display:none}
body[data-tabbar="on"] #tabbar,
html[data-screen="market"] #tabbar,
html[data-screen="directory"] #tabbar,
html[data-screen="publish"] #tabbar,
html[data-screen="messages"] #tabbar,
html[data-screen="workspace"] #tabbar{display:block}
#tabbar .tab-item{color:#45474a}
#tabbar .tab-item.tab-active{color:#1b1c1a;font-weight:500}

/* ---- 原型导航（非设计稿的一部分，仅用于在 17 屏之间跳转） ---- */
#navfab{position:fixed;z-index:1000;top:14px;right:14px;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;background:rgba(24,25,27,.72);color:#fff;backdrop-filter:none;
  box-shadow:0 6px 18px -6px rgba(0,0,0,.4);transition:.16s}
#navfab:hover{background:rgba(24,25,27,.9)}
#navfab .material-symbols-outlined{font-size:18px}
#navpanel{position:fixed;z-index:1001;top:56px;right:14px;width:250px;max-height:min(84vh,720px);
  overflow-y:auto;background:#fff;border-radius:14px;padding:8px;
  box-shadow:0 24px 60px -18px rgba(24,25,27,.35);display:none}
#navpanel.open{display:block}
/* 各设计稿把全局滚动条设成了 width:0!important，这里要给面板单独恢复出来，
   否则内容超出时看不到「还能往下滚」的提示（登录项就藏在下面） */
#navpanel::-webkit-scrollbar{width:6px!important;height:6px!important}
#navpanel::-webkit-scrollbar-thumb{background:#DCD9D2;border-radius:3px}
#navpanel{scrollbar-width:thin}
#navpanel .np-h{font:500 11px/1 'JetBrains Mono',monospace;letter-spacing:.12em;color:#6F7176;
  padding:8px 10px 6px;text-transform:uppercase}
#navpanel button{display:flex;align-items:center;gap:9px;width:100%;padding:6px 10px;border-radius:9px;
  text-align:left;font-size:13px;line-height:18px;color:#1b1c1a}
#navpanel button:hover{background:#F4F2EC}
#navpanel button.on{background:#F6F1E6;color:#775a19}
#navpanel button .ix{font:500 11px/1 'JetBrains Mono',monospace;color:#8C8E96;margin-left:auto}
#navpanel .np-sep{height:1px;background:#ECECE6;margin:6px 4px}

/* ---- 原型导航按钮 / 索引面板：App 内一律隐藏 ----
   #navfab（深色圆形九宫格按钮）与 #navpanel（24 屏原型索引）是原型评审工具，
   不属于业务 UI。放在 CSS 里全局隐藏而不是逐页删 HTML：一次覆盖全部 24 页，
   且不受「页面还原/重放」影响，不会反复出现。 */
#navfab,#navpanel{display:none!important}

/* ---- 分段 Tab（首页 · 正在进行中 / 待开始的）----
   选中项下方一条黑色下划线，宽度贴合文字内容（不是整个按钮宽度）。
   由 aria-selected 驱动 —— switchSourcingTab() 已经在维护这个属性，
   所以下划线会跟着选中项自动移动，无需额外的 JS。
   bottom 用 calc(50% - 22px) 自适应文字行高：50% = .tab-in 半高，
   22px = 按钮高(32) + 下方 6px 间距。注意 bottom 是「距容器下沿向上」的值，
   要放到容器下方必须为负 —— 写成 22px - 50% 会把线条甩到文字上方。 */
.tab-in{position:relative;display:inline-flex;align-items:center;gap:.375rem}
.tab-in::after{content:"";position:absolute;left:0;right:0;bottom:calc(50% - 22px);
  height:2px;border-radius:1px;background:#1b1c1a;pointer-events:none;
  opacity:0;transition:opacity .18s ease}
#tab-active[aria-selected="true"] .tab-in::after,
#tab-pending[aria-selected="true"] .tab-in::after{opacity:1}

@media (max-width:560px), (max-height:700px){
  #stage{padding:0}
  #phone{height:100dvh;width:100vw;aspect-ratio:auto;border-radius:0;clip-path:none}
  .phone-frame{display:none}
  #phone [class*="fixed"][class*="top-0"],
  #phone [class*="fixed"][class*="bottom-0"],
  #phone [class*="fixed"][class*="inset-0"]{border-radius:0}
  #navfab{top:auto;bottom:calc(84px + var(--safe-bottom,0px));right:12px;width:38px;height:38px}
  #navpanel{top:auto;bottom:calc(130px + var(--safe-bottom,0px));right:12px;width:min(78vw,260px);
    max-height:min(62vh,540px)}

  /* ---- 真机兜底：内容区必须铺满整屏 ----
     部分设计稿按 393px 宽的「机身屏」定尺寸（登录页等），在真机上会右侧
     露出一条白缝。这里统一放开宽度上限与桌面投影，任何页面都不会再露缝。
     ⚠ 放在 CSS 里而不是逐页改 HTML，是为了让这条兜底不受页面还原/重放影响。 */
  #phone > .page > .scr > main,
  #phone .page > .scr > main{
    max-width:none!important;
    width:100%!important;
    box-shadow:none!important;
  }
  #phone > .page > .scr > main > div[class*="max-w"],
  #phone .page > .scr > main > div[class*="max-w"]{
    max-width:none!important;
    width:100%!important;
    box-shadow:none!important;
  }
}

/* ---------------------------------------------------------------- 采集设备 · 目录式排版
   左分类栏 + 右商品卡片，对齐电商目录的扫读节奏：
   图在左、名称一行、简介一行、加粗的核心卖点作为视觉锚点、底部标签元信息。 */
/* 首页滚动区自带 px-5，但 overflow 容器会裁掉负边距，所以改用内边距把分类栏贴齐屏幕左缘 */
#feed-device { margin: 0 -20px; padding-left: 20px; }
.dev-layout { display: flex; align-items: flex-start; }
.dev-nav {
  width: 92px; flex-shrink: 0;
  position: sticky; top: 0;
  display: flex; flex-direction: column; gap: 2px;
  padding: 4px 0 16px;
}
.dev-nav-item {
  position: relative;
  width: 100%; min-height: 40px; padding: 8px 4px;
  background: transparent; border: 0; cursor: pointer;
  font-family: 'Hanken Grotesk', Inter, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: 12px; line-height: 1.35; color: #6f6b64; text-align: center;
  word-break: keep-all; overflow-wrap: normal;
}
.dev-nav-item.is-on { color: #18191B; font-weight: 650; }
.dev-nav-item.is-on::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 16px; border-radius: 0 2px 2px 0; background: #C5A059;
}
.dev-nav-item:focus-visible { outline: 2px solid #8A6A1F; outline-offset: -2px; }
.dev-list { flex: 1; min-width: 0; display: flex; flex-direction: column; padding-right: 16px; }
.dev-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid rgba(120, 117, 124, .14);
}
.dev-card:last-child { border-bottom: 0; }
.dev-card:active { background: rgba(197, 160, 89, .08); }
.dev-thumb {
  width: 84px; height: 84px; flex-shrink: 0;
  border-radius: 10px; overflow: hidden; border: 0; padding: 0; cursor: pointer;
  background: #f1eee9; color: #9a958d;
  display: flex; align-items: center; justify-content: center;
}
.dev-thumb:focus-visible { outline: 2px solid #8A6A1F; outline-offset: 2px; }
.dev-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dev-name {
  font-family: 'Hanken Grotesk', Inter, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: 14.5px; font-weight: 650; line-height: 1.3; color: #18191B;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.dev-sub {
  font-size: 12px; line-height: 1.4; color: #6f6b64;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.dev-anchor {
  font-size: 13.5px; font-weight: 700; line-height: 1.3; color: #BA1A1A;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.dev-anchor:empty { display: none; }
.dev-meta { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.dev-tag {
  height: 18px; padding: 0 6px; border-radius: 4px;
  font-size: 11px; line-height: 18px; color: #BA1A1A; background: #FFDAD6;
}
.dev-tag-muted { color: #6f6b64; background: #ece8e2; }

/* ---------------------------------------------- 采集设备 · 详情页图片轮播（最多 3 张）
   横向 scroll-snap 原生支持手指左右滑动，指示点与页码跟随滚动位置更新。 */
.dev-shot-wrap {
  position: relative; width: 100%;
  border-radius: 12px; overflow: hidden; background: #f1eee9;
}
.dev-shot-track {
  display: flex; overflow-x: auto;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.dev-shot-track::-webkit-scrollbar { display: none; }
.dev-shot { flex: 0 0 100%; scroll-snap-align: center; aspect-ratio: 16/10; }
.dev-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dev-shot-empty {
  width: 100%; aspect-ratio: 16/10;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  color: #9a958d;
}
.dev-shot-dots {
  position: absolute; left: 0; right: 0; bottom: 10px;
  display: flex; justify-content: center; gap: 6px; pointer-events: none;
}
.dev-shot-dots span {
  width: 6px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .55);
  transition: width .2s ease, background .2s ease;
}
.dev-shot-dots span.is-on { width: 16px; background: #fff; }
.dev-shot-count {
  position: absolute; right: 10px; top: 10px;
  height: 22px; padding: 0 8px; border-radius: 11px;
  background: rgba(28, 27, 31, .62); color: #fff;
  font-size: 11px; line-height: 22px;
}