/* 序列号：CSS叶-150 ｜ 坐标：商城⊂(0,3)⊂(0,2)⊂(0,1)⊂(0,0)⊂(1,150)
   地址：树库/CSS树库/商城/系0/枝干/叶子/高端定制.css → 高端定制
   大白话：「高端定制」这一页自己的样子：整页底换成老板影片的最后一帧（那张图已经截好放在 static 里），
          顶栏照常规在上面。
          认页只手认 #app 上挂的「电脑高端定制」这个名字（跟工作台那套「电脑工作台」一个路子），
          别的页面一律不认，全站其他页的底一个字不动。
   2026-10-26：老板报"别的页也变成月亮了" —— 根子是全站深色那套样式按
          "登录后的 #app" 统一刷了深底，优先级比平常的选择器还高；只写普通的
          #app.电脑高端定制 斗不过它。所以这里加 !important，并且把高度也照它的规矩写满。
   以后要加内容：往 #app 里加东西就行，这层底不会挡。 */

#app.电脑高端定制 {
  background-image: url('/static/高端定制_底_暗糊.jpg') !important;
  background-size: cover !important;
  background-position: 50% 50% !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  min-height: calc(100vh - 28px);
}

/* 2026-10-26 老板定：高端定制货格放宽约三分之一，一行三张。
   2026-10-27 再放宽一档：三张铺满整行、左右留的边跟搜索框那行一样（30px），中间不再稀。 */
#app.电脑高端定制 .货两列 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  padding: 16px 30px 100px;
  justify-items: stretch;
}
#app.电脑高端定制 .货格 {
  width: 100%;
}
#app.电脑高端定制 .货图框 {
  width: 100%;
}

/* 2026-10-27 老板定：带视频那张卡，卡面正中一颗播放键；点了整屏播。
   退出全屏后视频缩到右下角接着播，再点卡上那颗就是回去 / 暂停。 */
#app.电脑高端定制 .有视频卡 { position: relative; }
#app.电脑高端定制 .视频卡钮 {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .45);
  border: 1px solid rgba(245, 243, 238, .65);
  color: #FFE7B0; font-size: 26px; line-height: 1;
  z-index: 3; cursor: pointer;
  text-shadow: 0 0 10px rgba(255, 231, 176, .55);
}
#app.电脑高端定制 .视频卡钮:hover {
  background: rgba(245, 243, 238, .92); color: #141414; border-color: transparent;
}
/* 视频就住在卡里：开播后盖住卡的画面区；退出全屏照旧在这儿接着播。 */
#app.电脑高端定制 .卡上视频 {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  object-fit: contain; background: #000; z-index: 2;
}
#app.电脑高端定制 .有视频卡.在播 .视频卡钮 { display: none; }
/* 两颗钮贴着画面角摆（位置由 JS 算，见 _摆卡钮）：左下播放/暂停、右下全屏。 */
#app.电脑高端定制 .卡全屏钮,
#app.电脑高端定制 .卡播钮 {
  position: absolute; z-index: 4;
  width: 30px; height: 30px; display: flex;
  align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .5);
  border: 1px solid rgba(245, 243, 238, .5);
  color: #F3F0E9; font-size: 15px; line-height: 1; cursor: pointer;
}
#app.电脑高端定制 .卡全屏钮:hover,
#app.电脑高端定制 .卡播钮:hover {
  background: rgba(245, 243, 238, .92); color: #141414; border-color: transparent;
}