/* ============================================================================
   桌面端外壳（≥1024px） · AI互通科技平台
   ---------------------------------------------------------------------------
   参考即梦式工作台布局：
   · 左侧导航贴边通高、固定不动；顶部一条全局顶栏、固定不动；
   · 点击左侧或顶部的入口，内容都发生在右侧「内容窗」里（.main 是唯一滚动容器）；
   · 整机最大宽度 1920px，更宽的屏幕居中显示，两侧留深色底；
   · 内容列数用 auto-fill 自适应，不写死几列。
   ★ 手机 / 平板（<1024px）一条规则都不碰 —— 手机版保持原样（骨架、底部 Tab、
     顶栏入口全部不动）。本文件只新增，不覆盖手机端的任何组件样式。
   ★ 依赖 customer.js 的三个小改动：switchTab 更新 #deskTitle、renderAuthState
     更新侧栏账号区、[data-act] 事件委托分发快捷入口 —— 都是「有元素才生效」的
     防御式写法，元素不在时静默跳过。
   ========================================================================== */

/* 桌面专属区块：手机 / 平板一律隐藏（本文件始终加载，这条必须放在媒体查询外） */
.desk-only { display: none; }

/* ------------------------------------------------------------- 桌面 1024+ */
@media (min-width: 1024px) {

  :root {
    --nav-w: 224px;      /* 左侧栏宽度 */
    --top-h: 58px;       /* 顶栏高度 */
    --desk-max: 1920px;  /* 整机最大宽度：超过就居中，不再无限拉宽 */
  }

  html, body { height: 100%; }

  /* 滚动只发生在右侧内容窗 —— 左栏和顶栏才能「保持不动」 */
  body {
    overflow: hidden;
    background: #07090d;
  }

  /* ---- 整机框架：左栏 | 右侧（顶栏 / 公告 / 内容窗） ---- */
  .app {
    max-width: var(--desk-max);
    margin: 0 auto;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    padding-bottom: 0;
    display: grid;
    grid-template-columns: var(--nav-w) minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    /* 整机不再刷实色 —— 让 .tech-bg 的网格与光晕透进来（内容卡片本身不透明，
       仍是清晰的深色卡片，不会看不清字） */
    background: transparent;
    border-left: 1px solid rgba(39, 32, 51, .8);
    border-right: 1px solid rgba(39, 32, 51, .8);
    overflow: hidden;          /* 防止 grid 溢出撑出第二根滚动条 */
  }

  /* ---- 科技背景桌面档：网格放大、开启扫描光带 ---- */
  .tech-bg .tb-grid {
    background-size: 64px 64px;
    /* 桌面视野大，mask 放宽让网格覆盖更多区域 */
    -webkit-mask-image: radial-gradient(140% 105% at 50% 35%, #000 42%, transparent 108%);
            mask-image: radial-gradient(140% 105% at 50% 35%, #000 42%, transparent 108%);
  }
  .tech-bg .tb-scan { display: block; }
  .tech-bg .tb-glow { width: 46vmax; height: 46vmax; filter: blur(90px); }
  .tech-bg .tb-noise { opacity: .045; }

  .app > .desk-top { grid-column: 2; grid-row: 1; }
  .app > .announce { grid-column: 2; grid-row: 2; margin: 8px 22px 0; }
  .app > .main {
    grid-column: 2; grid-row: 3;
    min-width: 0;
    height: 100%;
    overflow-y: auto;
    scrollbar-gutter: stable;
  }
  .app > .main::-webkit-scrollbar { width: 10px; }
  .app > .main::-webkit-scrollbar-thumb { background: #272033; border-radius: 5px; }
  .app > .main::-webkit-scrollbar-track { background: transparent; }

  /* ---- 左侧导航：贴边通高，不随内容滚动 ---- */
  .app > .tabbar {
    grid-column: 1; grid-row: 1 / span 3;
    position: static;
    transform: none;
    width: auto; max-width: none;
    height: 100%;
    flex-direction: column; align-items: stretch;
    gap: 3px;
    padding: 16px 12px 14px;
    border: none;
    border-right: 1px solid rgba(39, 32, 51, .8);
    border-radius: 0;
    /* 半透明：侧栏也能感到底下的氛围光，与整机连成一体（文字在 .92 底上依然清晰） */
    background: rgba(14, 11, 21, .92);
    overflow-y: auto;
    z-index: auto;
  }

  .app > .tabbar .tab {
    flex: 0 0 auto;
    flex-direction: row; justify-content: flex-start; align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: 10px;
    font-size: 13.5px; font-weight: 600;
    transition: background .15s ease, color .15s ease;
  }
  .app > .tabbar .tab svg { width: 21px; height: 21px; }
  .app > .tabbar .tab:hover { color: var(--text); background: rgba(255, 255, 255, .05); }
  .app > .tabbar .tab.active { color: var(--accent); background: rgba(46, 230, 168, .12); }

  /* ---- 侧栏结构：品牌区 | 首页 | 创作(组头) | 图片生成 | 视频生成 | 我的 | 快捷入口 | 账号 ----
     DOM 顺序就是两端通用的最终顺序（手机底部 Tab 同序），桌面不再需要 order 重排。 */

  /* ---- 品牌区：Logo 徽标 + 平台名（名称随后台站点信息同步） ----
     ★ 选择器必须带 `.app > .tabbar` 提特异性：`.app .desk-only{display:block}`
     (0,2,0) 会压过单类名 `.desk-brand{display:flex}` (0,1,0)，布局塌成竖排
     （#deskTop 同款坑）。 */
  .app > .tabbar .desk-brand {
    display: flex; align-items: center; gap: 10px;
    padding: 2px 10px 14px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--line);
  }
  .db-logo {
    width: 30px; height: 30px; flex: 0 0 30px;
    border-radius: 9px;
    background: linear-gradient(135deg, #ff5c7a, #2e7bff);
    color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .5px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(46, 123, 255, .28);
  }
  .db-name {
    font-size: 14px; font-weight: 800; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* ---- 桌面侧栏图标 ----
     「首页」的房子图标只在桌面生效：桌面藏指南针(.m-ico)显示房子(.d-ico)。
     文案（首页/图片生成/视频生成）已直接写进 DOM，两端通用，无需 CSS 换字。 */
  .app > .tabbar .tab .m-ico { display: none; }

  /* 创作组子项：缩进一层，视觉上从属于「创作」标题 */
  .app > .tabbar .tab[data-tab="create"],
  .app > .tabbar .tab[data-tab="video"] { padding-left: 42px; }

  /* ---- 「创作」分组标题（点击折叠/展开，customer.js 切 .desk-crea-folded） ----
     ★ 同上：特异性要压过 `.app .desk-only{display:block}`，箭头 margin-left:auto 才生效 */
  .app > .tabbar .desk-crea-head {
    display: flex; align-items: center; gap: 12px;
    width: 100%;
    padding: 11px 14px;
    border: none; border-radius: 10px;
    background: none;
    color: var(--text-2);
    font-size: 13.5px; font-weight: 600; text-align: left;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
  }
  .desk-crea-head:hover { color: var(--text); background: rgba(255, 255, 255, .05); }
  .dc-chev {
    width: 14px; height: 14px; margin-left: auto;
    opacity: .65;
    transition: transform .18s ease;
  }
  .tabbar.desk-crea-folded .dc-chev { transform: rotate(-90deg); }
  .tabbar.desk-crea-folded .tab[data-tab="create"],
  .tabbar.desk-crea-folded .tab[data-tab="video"] { display: none; }
  /* 分组里有激活项时组头提亮（渐进增强，不支持 :has 的浏览器只是没这个效果） */
  .app > .tabbar:has(.tab.active[data-tab="create"]) .desk-crea-head,
  .app > .tabbar:has(.tab.active[data-tab="video"]) .desk-crea-head { color: var(--text); }

  /* ---- 侧栏扩展区（快捷入口 / 权益 / 账号） ---- */
  .app .desk-only { display: block; }

  .desk-side {
    margin-top: 14px;
    padding-top: 4px;
    border-top: 1px solid var(--line);
  }
  .desk-group-title {
    font-size: 11px; letter-spacing: .14em;
    color: var(--text-3);
    padding: 12px 14px 6px;
  }
  .desk-item {
    display: flex; align-items: center; gap: 12px;
    width: 100%;
    padding: 10px 14px;
    border: none; border-radius: 10px;
    background: none;
    color: var(--text-2);
    font-size: 13.5px; text-align: left;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
  }
  .desk-item:hover { color: var(--text); background: rgba(255, 255, 255, .05); }
  .desk-item.danger:hover { color: var(--danger); background: rgba(255, 107, 107, .08); }
  .di-ico { font-size: 15px; width: 21px; flex: 0 0 21px; text-align: center; }

  /* 复用 .pe-item 的侧栏按钮（邀请/超市/会员/登录）：
     手机端它是「图标在上文字在下」，侧栏里要横排、文字用正常字号 */
  .app .pe-item.desk-item { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 10px 14px; }
  .app .pe-item.desk-item .pe-icon { width: 17px; height: 17px; }
  .app .pe-item.desk-item .pe-text { font-size: 13.5px; color: inherit; line-height: 1.4; }
  .app .pe-item.desk-item:hover .pe-text { color: inherit; }

  .desk-bottom {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--line);
  }
  .desk-user { display: flex; align-items: center; gap: 10px; padding: 6px 8px 10px; }
  .du-avatar {
    width: 34px; height: 34px; flex: 0 0 34px;
    border-radius: 50%;
    background: #1b1725;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
  }
  .du-info { display: flex; flex-direction: column; min-width: 0; }
  .du-info b {
    font-size: 13px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .du-info i {
    font-style: normal; font-size: 11.5px; color: var(--accent);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* ---- 全局顶栏：左侧当前页标题，右侧积分与登录入口 ----
     ★ 用 ID 选择器：`.app .desk-only { display:block }` 的特异性 (0,2,0) 会
     压过单类名的 display:flex，顶栏内部会塌成竖排 —— 必须用 (1,0,0) 压回来 */
  #deskTop {
    display: flex; align-items: center; gap: 16px;
    height: var(--top-h);
    padding: 0 26px;
    border-bottom: 1px solid var(--line);
    background: rgba(14, 11, 21, .88);
  }
  .dt-title { font-size: 16px; font-weight: 800; color: var(--text); flex: none; }
  .dt-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }

  /* ---- 顶栏搜索框（参考哩布哩布）：胶囊形，聚焦亮紫描边 ---- */
  .desk-top .desk-search {
    flex: 1; min-width: 0; max-width: 620px;
    display: flex; align-items: center; gap: 10px;
    height: 40px;
    margin-left: 20px;
    padding: 0 6px 0 16px;
    background: rgba(27, 23, 37, .85);
    border: 1px solid rgba(39, 32, 51, .9);
    border-radius: 999px;
    transition: border-color .15s ease, background .15s ease;
  }
  .desk-top .desk-search:focus-within {
    border-color: rgba(139, 92, 246, .55);
    background: rgba(27, 23, 37, .96);
  }
  .desk-top .desk-search .ds-ico { width: 17px; height: 17px; color: var(--text-3); flex: none; }
  .desk-top .desk-search input {
    flex: 1; min-width: 0; height: 100%;
    background: none; border: none; outline: none;
    color: var(--text); font-size: 13.5px; font-family: inherit;
  }
  .desk-top .desk-search input::placeholder { color: var(--text-3); }
  .desk-top .desk-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
  .desk-top .desk-search .ds-go {
    flex: none; width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: none; border: none; color: var(--text-2); cursor: pointer;
    transition: color .15s ease, background .15s ease;
  }
  .desk-top .desk-search .ds-go:hover { color: var(--text); background: rgba(139, 92, 246, .2); }
  .desk-top .desk-search .ds-go svg { width: 16px; height: 16px; }
  .dt-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid rgba(46, 230, 168, .35);
    background: rgba(46, 230, 168, .08);
    color: var(--accent);
    font-size: 12.5px;
  }
  .dt-chip i { font-style: normal; font-size: 10px; }
  .dt-auth { cursor: pointer; }
  .dt-auth .pe-text { font-size: 13px; color: var(--text); }
  .dt-auth:hover .pe-text { color: var(--accent); }

  /* ---- 手机版专属件在桌面隐藏（职责已由侧栏 / 顶栏接管） ---- */
  .main .topbar { display: none; }   /* 各 Tab 自带的标题条（标题已在全局顶栏） */
  .plaza-top { display: none; }      /* 品牌行 + 四入口（已上侧栏 / 顶栏） */

  /* ---- 内容区宽度 ----
     全部自适应铺满内容窗（用户明确要求：1920 宽屏两侧不留白，见 10-22 实测反馈）。
     整机本身已限 1920px，内容窗最宽约 1676px；阅读型页面（积分流水/充值等）
     跟随全宽由 .card 内部排版消化，不再限宽居中。 */
  .main > .tab-page { max-width: none; padding: 10px 32px 48px; }

  /* 作品流：瀑布流按列宽自动定列数（内容窗 1024~1920 都自适应）；
     快捷入口 / 积分超市仍是行式网格，但 auto-fit 收空轨道 */
  /* 作品流：★ 桌面端改用 Grid 网格（手机端 <1024px 仍是 CSS 多列瀑布流，不受影响）。
     根因（2026-10-22 实测）：桌面卡片已全部等高（468px），而 Chromium 的平衡多列
     在「内容填不满计算出的列数」时会产生空列 —— 14 张卡 ÷ 6 列按高度逐列填
     3+3+3+3+2，第 6 列整列空白（1920px 必现，写死 column-count 也一样）。
     等高卡片本就该用网格：auto-fill + minmax(240px,1fr) 列宽自动拉伸填满容器，
     行行对齐、永不空列，顺序也从「竖着排」变成更自然的「横着排」。 */
  .plaza-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
  }
  .plaza-list .pw-card { margin-bottom: 0; }   /* 行距交给 gap，卡片自带的下边距清零 */
  .plaza-list .empty { column-span: none; grid-column: 1 / -1; }

  /* ★ 桌面端把封面锁死在 3:4（手机端不锁，保持瀑布流原样）：
     .pw-cover 是 .pw-card（flex 纵向）的子项，默认 min-height:auto 会让「比 3:4 更瘦长」
     的封面图（如 9:16）用固有高度撑爆 aspect-ratio —— 定宽多列下就表现为「一节高一节低」。
     min-height:0 让 3:4 说了算，overflow:hidden + object-fit:cover 保证超比例图居中裁切不变形。 */
  .plaza-list .pw-cover, .my-works-list .pw-cover { min-height: 0; overflow: hidden; }

  /* ★ 桌面端卡片等高第二刀：正文固定高度。
     封面锁 3:4 后整卡高矮只差在正文 —— 灵感卡/带提示词的卡片多一段 2 行描述词
     （36px + gap 5px = 41px），实测正文 69px(无描述) vs 110px(有描述)。
     固定 110px 后无描述词的卡片底部留白，所有卡片整卡统一 468px。
     改字号/行高时这里要跟着重算：padding 9+11 + 标题 18 + gap 5 + 描述 36 + gap 5 + 脚注 26。 */
  .plaza-list .pw-body, .my-works-list .pw-body { height: 110px; }
  .plaza-list .pw-foot, .my-works-list .pw-foot { margin-top: auto; }

  /* 第二行文案（普通作品=风格名 .pw-meta / 灵感卡=描述词 .pw-prompt）在桌面端显示，
     并固定占 2 行高度 36px：短文案不塌陷、长文案截断，两类卡片正文才严格等高、
     底部不会再留空。手机端 .pw-meta 保持 display:none（不改手机版）。 */
  .plaza-list .pw-prompt, .my-works-list .pw-prompt,
  .plaza-list .pw-meta, .my-works-list .pw-meta {
    display: -webkit-box; height: 36px; overflow: hidden;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
  .plaza-quick { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .mall-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
  /* 全屏浮层页（充值 / 客服）：收成居中面板 + 左右边线，不顶天立地 */
  .overlay-page {
    inset: 0 auto 0 50%;
    width: 860px; max-width: calc(100% - 40px);
    transform: translateX(-50%); margin: 0;
    border-left: 1px solid var(--line); border-right: 1px solid var(--line);
    box-shadow: 0 0 90px rgba(0, 0, 0, .6);
  }

  /* 桌面要有 hover 反馈（不能只靠手指按下的 active） */
  .pw-card:hover, .mall-item:hover { border-color: rgba(46, 230, 168, .45); }
  .ptab:hover { color: var(--text); }
  .btn:hover { opacity: .9; }
  .pq-item:hover { box-shadow: 0 8px 22px rgba(20, 60, 120, .32); }
  .menu-item:hover { background: rgba(255, 255, 255, .04); }

  /* 回到顶部按钮：桌面贴内容窗右下角（手机端在底栏上方，见 customer.css） */
  .back-top { right: 26px; bottom: 42px; }
  .back-top:hover { color: var(--accent); }
  @media (min-width: 1600px) { .back-top { right: 36px; bottom: 48px; } }

  /* 桌面通栏更宽 → 容器比例要更扁，否则 banner 会顶掉首屏作品流。
     真实高度由 JS 按图片比例写入 --banner-ar，这里只是图未加载时的兜底。 */
  .plaza-banner { --banner-ar: 5.6; margin-top: 18px; }
  .preview-box { max-width: 760px; }
}

/* ------------------------------------------------------------- 大屏 1600+ */
@media (min-width: 1600px) {
  :root {
    --nav-w: 244px;
    --top-h: 62px;
  }
  .main > .tab-page { padding: 16px 36px 48px; }
  .plaza-banner { --banner-ar: 6.8; margin-top: 22px; }
  #deskTop { padding: 0 36px; }
}

/* ------------------------------------------------------------- 超宽 1920+
   整机限宽 1920 居中，内容窗 ≈1564px：网格 auto-fill 自动排出 6 列 ≈250px */

/* ============================================================ 宽屏 banner 并排
   ≥1280px：广告位不再「单张轮播」，改成多张等分并排（平均分配宽度）。
   每张卡片宽度由 grid 定死（1fr 等分），高度由「自己那张图的真实比例」推出来
   （JS 写入 --slide-ar），所以每张都完整显示、互不影响，也不会出现前面那个
   「宽度被 aspect-ratio 反推缩小」的问题 —— grid item 的宽度不是 auto。
   ≤1280px 维持原来的单张轮播（手机竖屏一条横幅更合适）。 */
@media (min-width: 1280px) {
  .plaza-banner {
    /* 容器不再定高：高度由内部卡片撑起来，圆角也交给卡片 */
    aspect-ratio: auto;
    min-height: 0; max-height: none;
    background: none; border-radius: 0; overflow: visible;
  }
  .banner-track {
    display: grid;
    /* 等分列：每张至少 320px，保证 1366 这类常见笔记本也能三张同一行；
       放不下才换行。auto-fit 会把空轨道折叠掉，所以 3 张时仍是三等分铺满整行。 */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 12px;
    height: auto;
    transition: none;
    transform: none !important;   /* 并排时禁用轮播位移（JS 会写内联 transform） */
  }
  .banner-slide {
    flex: none; height: auto;
    /* ★ width 必须显式 100%：grid item 默认 stretch，一旦 aspect-ratio 与
       min-height 同时存在，Chrome 会按高度反推「宽度」，列就不等分、还会撑出容器。 */
    width: 100%;
    aspect-ratio: var(--slide-ar, 3.2 / 1);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--card-2);
  }
  .banner-dots { display: none; }   /* 全部并排了，指示点没有意义 */
}