/* ==========================================================================
   硅基办公 · 应用商店（桌面 App + 管理后台那一段）样式
   类名统一 aps- 前缀（application store），不和既有页面撞车。
   两个页面共用这一份：
     · index.html（用户端的商店窗口）—— 引了 theme.css，所以日夜模式能跟着翻
     · admin.html（管理后台的「应用商店」分块）—— 不引 theme.css，永远是深色
   底下所有颜色都走 `rgba(var(--wb-ink-rgb), X)` 这个墨色 token：
   两个页面都在 :root 上给了它（theme.css / admin.css），所以这一份不用写死颜色。

   那 12 个配色（--mint / --sun / …）在这里又写了一遍：桌面那套图标底色本来就定义在
   desktop.css 里，而管理后台**不引 desktop.css**，直接借那份样式会取不到底色。
   两处值要保持一样，改一处记得改另一处。
   ========================================================================== */

/* ---------- 0. 应用图标（磁贴） ---------- */
.aps-ico {
  position: relative;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wb-ink);
  background: linear-gradient(155deg, #e7f4ef, #b9cdc7);
  box-shadow: 0 7px 16px rgba(0, 0, 0, .3), 0 2px 4px rgba(0, 0, 0, .22),
              inset 0 1px 0 rgba(var(--wb-ink-rgb), .5), inset 0 -7px 13px rgba(0, 0, 0, .16);
}
/* 磁贴光泽：左上高光、右下压暗 —— 和桌面上那颗图标一个语言 */
.aps-ico::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(72% 58% at 26% 12%, rgba(var(--wb-ink-rgb), .5), rgba(var(--wb-ink-rgb), 0) 72%),
    linear-gradient(160deg, rgba(var(--wb-ink-rgb), .22), rgba(var(--wb-ink-rgb), 0) 46%, rgba(0, 0, 0, .14));
}
.aps-ico .aps-ico__svg {
  position: relative; z-index: 1;
  width: 23px; height: 23px;
  filter: drop-shadow(0 1.5px 2px rgba(6, 22, 20, .35));
}
.aps-ico--lg { width: 56px; height: 56px; border-radius: 16px; }
.aps-ico--lg .aps-ico__svg { width: 30px; height: 30px; }

.aps-ico--mint { background: linear-gradient(155deg, #63e6c6 0%, #1fbd99 52%, #0b8a71 100%); }
.aps-ico--sun { background: linear-gradient(155deg, #ffd580 0%, #f4a537 52%, #d97a15 100%); }
.aps-ico--sky { background: linear-gradient(155deg, #7ecbff 0%, #3b8dea 52%, #1c5dbd 100%); }
.aps-ico--violet { background: linear-gradient(155deg, #c9b2ff 0%, #8a66ea 52%, #5c3cc4 100%); }
.aps-ico--slate { background: linear-gradient(155deg, #cfdae6 0%, #8399ae 52%, #4f6478 100%); }
.aps-ico--green { background: linear-gradient(155deg, #4fe0b0 0%, #10a883 52%, #067a62 100%); }
.aps-ico--cyan { background: linear-gradient(155deg, #6fe0ea 0%, #2295b3 52%, #0d6a83 100%); }
.aps-ico--indigo { background: linear-gradient(155deg, #9aa2ff 0%, #4b52cf 52%, #2f359e 100%); }
.aps-ico--navy { background: linear-gradient(155deg, #93a2c8 0%, #465a8e 52%, #26365e 100%); }
.aps-ico--berry { background: linear-gradient(155deg, #ffa9d5 0%, #dc4d97 52%, #9c2266 100%); }
.aps-ico--flame { background: linear-gradient(155deg, #ffbb7d 0%, #f2701c 52%, #b83d05 100%); }

/* 自带整张图片图标的应用（微聊）：铺满磁贴、圆角交给容器裁 */
.aps-ico--img { padding: 0; background: none; box-shadow: 0 6px 14px rgba(0, 0, 0, .3), 0 2px 4px rgba(0, 0, 0, .2); }
.aps-ico--img::before { display: none; }
.aps-ico--img img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: inherit; }

/* ==========================================================================
   一、用户端：应用商店窗口
   ========================================================================== */
.aps { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* ---------- 抬头：名字 + 统计 + 搜索 + 分段筛选 ---------- */
.aps__top {
  flex: none;
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 12px;
}
.aps__brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.aps__brand b { display: block; font-size: 15px; font-weight: 600; letter-spacing: .2px; }
.aps__brand i { display: block; margin-top: 3px; font-size: 11.5px; font-style: normal; color: var(--wb-ink-60); }
.aps__tools { margin-left: auto; display: flex; align-items: center; gap: 10px; min-width: 0; }
.aps__search {
  display: flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 12px;
  border-radius: 999px;
  background: var(--wb-glass);
  box-shadow: inset 0 0 0 1px rgba(var(--wb-ink-rgb), .1);
}
.aps__search .wb-icon { width: 14px; height: 14px; color: var(--wb-ink-45); flex: none; }
.aps__search .wb-input {
  width: 168px; height: 30px; padding: 0; border: 0; background: none; box-shadow: none; font-size: 12.5px;
}
.aps__search .wb-input:focus { border: 0; background: none; }

/* ---------- 分类条 ---------- */
.aps__cats {
  flex: none;
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(var(--wb-ink-rgb), .1);
}
.aps__cats .wb-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 5px 12px; }
.aps__cats .wb-chip i {
  font-style: normal; font-size: 10.5px; opacity: .62;
  padding: 0 5px; border-radius: 999px; background: rgba(var(--wb-ink-rgb), .14);
}
.aps__cats .wb-chip.is-on i { background: rgba(var(--wb-ink-rgb), .2); opacity: .8; }

/* ---------- 主体：左列表 + 右详情 ---------- */
.aps__body {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 366px;
  gap: 14px;
  padding-top: 12px;
}
.aps__list { overflow: auto; padding-right: 4px; display: flex; flex-direction: column; gap: 8px; }
.aps__list::-webkit-scrollbar, .aps__detail::-webkit-scrollbar { width: 8px; }
.aps__list::-webkit-scrollbar-thumb, .aps__detail::-webkit-scrollbar-thumb {
  background: rgba(var(--wb-ink-rgb), .2); border-radius: 999px;
}

.aps-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px;
  border-radius: 13px;
  background: var(--wb-glass);
  box-shadow: inset 0 0 0 1px rgba(var(--wb-ink-rgb), .09);
  cursor: pointer;
  transition: background-color .18s var(--wb-ease), box-shadow .18s var(--wb-ease), transform .18s var(--wb-ease);
}
.aps-row:hover { background: var(--wb-glass-2); }
.aps-row:focus-visible { outline: none; box-shadow: inset 0 0 0 1px rgba(126, 232, 214, .6); }
.aps-row.is-on {
  background: var(--wb-glass-2);
  box-shadow: inset 0 0 0 1px rgba(126, 232, 214, .45), 0 8px 20px rgba(3, 12, 14, .22);
}
.aps-row__txt { flex: 1; min-width: 0; }
.aps-row__txt b { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; }
.aps-row__txt i {
  display: block; margin-top: 3px;
  font-style: normal; font-size: 11px; color: var(--wb-ink-45);
}
.aps-row__txt em {
  display: block; margin-top: 4px;
  font-style: normal; font-size: 11.5px; line-height: 1.5; color: var(--wb-ink-60);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aps-row__btn { flex: none; }
.aps-row__btn .wb-btn { gap: 5px; }

/* 状态小标签：已安装 / 可更新 / 未安装 / 系统组件 */
.aps-tag {
  flex: none;
  font-style: normal; font-size: 10px; font-weight: 500;
  padding: 2px 7px; border-radius: 999px;
  background: rgba(var(--wb-ink-rgb), .14); color: var(--wb-ink-60);
}
.aps-tag--ok { background: rgba(96, 226, 196, .2); color: #7ff0d5; }
.aps-tag--new { background: rgba(255, 214, 107, .22); color: #ffd66b; }
.aps-tag--sys { background: rgba(154, 162, 255, .2); color: #b9bfff; }

/* ---------- 详情卡 ---------- */
.aps__detail {
  overflow: auto; padding-right: 4px;
  border-radius: 16px;
  padding: 16px;
  background: rgba(var(--wb-sheet-rgb), .52);
  box-shadow: inset 0 0 0 1px rgba(var(--wb-ink-rgb), .12);
}
.aps-detail__head { display: flex; align-items: center; gap: 13px; }
.aps-detail__id { min-width: 0; }
.aps-detail__id b { display: block; font-size: 15px; font-weight: 600; }
.aps-detail__id i { display: block; margin-top: 3px; font-style: normal; font-size: 11px; color: var(--wb-ink-45); }
.aps-detail__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.aps-detail__meta em {
  font-style: normal; font-size: 10.5px;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(var(--wb-ink-rgb), .1); color: var(--wb-ink-60);
}
.aps-detail__desc {
  margin: 13px 0 0; font-size: 12.5px; line-height: 1.65; color: var(--wb-ink-75);
}
.aps-detail__acts { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.aps-detail__main { width: 100%; justify-content: center; gap: 6px; }
.aps-detail__latest {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 11.5px; color: var(--wb-ink-45);
  padding: 6px 0;
}
.aps-detail__latest .wb-icon { width: 13px; height: 13px; }
.aps-detail__lock {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; line-height: 1.5; color: var(--wb-ink-45);
}
.aps-detail__lock .wb-icon { width: 13px; height: 13px; flex: none; }
.aps-detail__block { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(var(--wb-ink-rgb), .1); }
.aps-detail__block h4 {
  margin: 0 0 9px; font-size: 11.5px; font-weight: 600; letter-spacing: .4px;
  color: var(--wb-ink-45); text-transform: none;
}
.aps-points { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.aps-points li {
  position: relative; padding-left: 15px;
  font-size: 11.5px; line-height: 1.6; color: var(--wb-ink-75);
}
.aps-points li::before {
  content: ""; position: absolute; left: 2px; top: 7px;
  width: 5px; height: 5px; border-radius: 50%;
  background: #63e6c6; opacity: .8;
}
.aps-log { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.aps-log li { display: grid; grid-template-columns: 58px 76px minmax(0, 1fr); gap: 8px; align-items: baseline; }
.aps-log b { font-size: 11.5px; font-weight: 600; color: var(--wb-ink-90); white-space: nowrap; }
.aps-log i { font-style: normal; font-size: 10.5px; color: var(--wb-ink-45); white-space: nowrap; }
.aps-log span { font-size: 11.5px; line-height: 1.55; color: var(--wb-ink-60); }
.aps-note { margin: 0; font-size: 11.5px; line-height: 1.65; color: var(--wb-ink-45); }
.aps-empty {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  margin: 24px 0; font-size: 12px; color: var(--wb-ink-45);
}
.aps-empty .wb-icon { width: 14px; height: 14px; }

/* ==========================================================================
   二、管理后台：应用商店分块
   ========================================================================== */
.aps-adm__note {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 12px 0 14px;
  padding: 11px 14px;
  border-radius: 12px;
  font-size: 12px; line-height: 1.6; color: var(--wb-ink-60);
  background: rgba(var(--wb-ink-rgb), .06);
  box-shadow: inset 0 0 0 1px rgba(var(--wb-ink-rgb), .1);
}
.aps-adm__note .wb-icon { width: 15px; height: 15px; flex: none; margin-top: 1px; color: #ffd66b; }
.aps-adm__note b { color: var(--wb-ink-90); font-weight: 600; }

.aps-adm__list { display: flex; flex-direction: column; gap: 8px; padding-bottom: 8px; }
.aps-adm__row {
  display: grid;
  grid-template-columns: 42px minmax(150px, 1.1fr) 108px minmax(180px, 1.6fr) 124px 132px auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 13px;
  background: rgba(var(--wb-ink-rgb), .05);
  box-shadow: inset 0 0 0 1px rgba(var(--wb-ink-rgb), .09);
}
.aps-adm__id { min-width: 0; }
.aps-adm__id b { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; }
.aps-adm__id i {
  display: block; margin-top: 3px;
  font-style: normal; font-size: 10.5px; color: var(--wb-ink-45);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aps-adm__badge {
  flex: none; font-style: normal; font-size: 9.5px; font-weight: 500;
  padding: 1px 6px; border-radius: 999px;
  background: rgba(255, 214, 107, .22); color: #ffd66b;
}
.aps-adm__f { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.aps-adm__f > span { font-size: 10px; color: var(--wb-ink-45); padding-left: 2px; }
.aps-adm__f .wb-input { height: 30px; font-size: 12px; }
.aps-adm__f select.wb-input { appearance: none; cursor: pointer; }
.aps-adm__lock {
  display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; color: var(--wb-ink-60); cursor: pointer;
}
.aps-adm__lock input { accent-color: #2295b3; cursor: pointer; }

/* 窄窗口（后台也常在窄屏 / 半屏开着）：一行摆不下七个格子，改成「会自动换行的一行」——
   图标 + 名字 + 版本号在第一行，介绍自己占一行，分类 / 能不能卸载 / 恢复挤在最后一行。
   用 flex 换行而不是再写一套 grid：格子多、还在增删，grid 的自动排布很容易把某一行排歪。 */
@media (max-width: 1080px) {
  .aps-adm__row { display: flex; flex-wrap: wrap; align-items: center; row-gap: 8px; }
  .aps-adm__id { flex: 0 1 230px; }
  .aps-adm__id i { white-space: normal; }
  .aps-adm__f { flex: 0 0 116px; }
  .aps-adm__f--wide { flex: 1 1 100%; }
  .aps-adm__lock { flex: 0 0 auto; padding-left: 2px; }
  .aps-adm__row > .wb-btn { flex: 0 0 auto; margin-left: auto; }
}

/* 手机 / 窄窗口：应用商店改成「上面列表、下面详情」一列 */
@media (max-width: 860px) {
  .aps__top { flex-wrap: wrap; gap: 10px; }
  .aps__tools { margin-left: 0; width: 100%; }
  .aps__search { flex: 1; }
  .aps__search .wb-input { width: auto; flex: 1; }
  .aps__body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .aps__detail { max-height: 46vh; }
}