/* ============================================================
   大模型广场 / 智能体 / 灵感广场（1:1 对齐原站 DOM 与配色）
   原站规格：body #0f0f12，标签 fs 9.9px，描述 rgba(255,255,255,.6)
   激活态青色，开放API 金色 rgb(251,191,36)
   ============================================================ */

body.models-mode .header, body.models-mode .footer, body.models-mode .serv-fab,
body.agents-mode .header, body.agents-mode .footer, body.agents-mode .serv-fab,
body.inspiration-mode .header, body.inspiration-mode .footer, body.inspiration-mode .serv-fab { display: none !important; }

.pz { display: flex; height: 100vh; overflow: hidden; background: #0f0f12; color: #e8e8ec; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'PingFang SC', 'HarmonyOS Sans', 'Microsoft YaHei', sans-serif; }
.pz * { box-sizing: border-box; }
.pz a { color: inherit; text-decoration: none; }
.pz button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

/* ------------------------------- 左侧栏 ------------------------------- */
.pz-side {
  width: 190px; flex: 0 0 190px; display: flex; flex-direction: column;
  background: linear-gradient(180deg, #101014, #0c0c10); border-right: 1px solid rgba(255, 255, 255, .05);
  position: sticky; top: 0; height: 100vh; overflow: hidden; transition: width .18s, flex-basis .18s;
}
body.pz-folded .pz-side { width: 0; flex-basis: 0; border-color: transparent; }
.pz-logo { display: flex; align-items: center; gap: 8px; padding: 14px 10px 10px 14px; }
.pz-logo-l { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.pz-logo-ic {
  width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; display: grid; place-items: center;
  color: #2b9cff; background: radial-gradient(circle at 40% 35%, rgba(43, 156, 255, .3), rgba(43, 156, 255, .05) 70%);
  box-shadow: 0 0 14px rgba(43, 156, 255, .35);
}
.pz-logo b { display: block; font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.pz-logo em { display: block; font-style: normal; font-size: 9.5px; color: #7d8590; }
.pz-collapse {
  width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .1); color: #a7aeb8; font-size: 13px;
}
.pz-collapse:hover { color: #fff; border-color: rgba(43, 156, 255, .5); }

.pz-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; padding: 4px 8px 10px; }
.pz-tabs a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 0 5px; border-radius: 10px; color: #9aa2ad; }
.pz-tabs a i { font-style: normal; font-size: 15px; line-height: 1; }
.pz-tabs a span { font-size: 9.9px; font-weight: 500; }
.pz-tabs a.on { color: #fff; background: rgba(43, 156, 255, .13); box-shadow: inset 0 0 0 1px rgba(43, 156, 255, .3); }
.pz-tabs a.on span { color: #fff; }
.pz-tabs a.gold { color: #fbbf24; }
.pz-tabs a.gold span { color: #fbbf24; }

.pz-user { margin-top: auto; display: flex; align-items: center; gap: 7px; padding: 10px; border-top: 1px solid rgba(255, 255, 255, .05); }
.pz-avatar { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #062033; background: linear-gradient(135deg, #38bdf8, #2b9cff); }
.pz-user-t { flex: 1; min-width: 0; line-height: 1.3; }
.pz-user-t b { display: block; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pz-user-t em { font-style: normal; font-size: 10.5px; color: #fbbf24; }
.pz-recharge { font-size: 10.5px; color: #fff; background: linear-gradient(135deg, #f97316, #ea580c); padding: 5px 9px; border-radius: 7px; }

/* ------------------------------- 模型/智能体面板 ------------------------------- */
.pz-panel { width: 232px; flex: 0 0 232px; display: flex; flex-direction: column; min-height: 0; border-right: 1px solid rgba(255, 255, 255, .05); background: #0c0c10; }
.pz-panel.lg-panel { width: auto; flex: 0 0 auto; border-right: none; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.pz-panel.lg-panel .pz-chips { padding: 10px 14px; }
.pz-chips { display: flex; gap: 3px; padding: 10px 10px 6px; flex-wrap: wrap; }
.pz-chips button { font-size: 11px; color: #9aa2ad; padding: 4px 9px; border-radius: 7px; }
.pz-chips button.on { color: #fff; background: rgba(43, 156, 255, .16); box-shadow: inset 0 0 0 1px rgba(43, 156, 255, .3); }
.pz-kind { margin-left: auto; display: flex; gap: 3px; }
.pz-kind button { font-size: 11px; color: #9aa2ad; padding: 4px 9px; border-radius: 7px; }
.pz-kind button.on { color: #fff; background: rgba(43, 156, 255, .16); }

.pz-filter { display: flex; flex-direction: column; gap: 6px; padding: 4px 10px 8px; }
.pz-filter select, .pz-filter input {
  width: 100%; background: #17171d; color: #cdd3da; border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px; padding: 7px 10px; font-size: 11.5px; outline: none;
}
.pz-filter input:focus, .pz-filter select:focus { border-color: rgba(43, 156, 255, .45); }
.pz-filter input::placeholder { color: #5f6772; }

.pz-list { flex: 1; overflow: auto; padding: 0 8px 14px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.12) transparent; }
.pz-item {
  position: relative; width: 100%; display: flex; gap: 8px; align-items: flex-start; text-align: left;
  padding: 8px 7px; border-radius: 10px; margin-bottom: 2px;
}
.pz-item:hover { background: rgba(255, 255, 255, .05); }
.pz-item.on { background: rgba(43, 156, 255, .1); box-shadow: inset 0 0 0 1px rgba(43, 156, 255, .28); }
.pz-item-ic {
  width: 32px; height: 32px; flex: 0 0 32px; border-radius: 9px; display: grid; place-items: center;
  font-size: 14px; font-weight: 700; color: #e8f4ff; overflow: hidden;
}
.pz-item-ic img { width: 100%; height: 100%; object-fit: contain; }
.pz-item-b { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.pz-item-n { font-size: 12px; font-weight: 600; color: #e8e8ec; display: flex; align-items: center; gap: 5px; }
.pz-rate { font-style: normal; font-size: 9px; color: #34d399; background: rgba(52, 211, 153, .12); padding: 1px 5px; border-radius: 4px; }
.pz-badge { font-style: normal; font-size: 9px; color: #fed7aa; background: rgba(249, 115, 22, .16); padding: 1px 5px; border-radius: 4px; }
.pz-cat { font-style: normal; font-size: 9px; color: #93c5fd; background: rgba(59, 130, 246, .14); padding: 1px 5px; border-radius: 4px; }
.pz-item-d { font-size: 9.9px; color: rgba(255, 255, 255, .6); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pz-item-p { font-size: 10px; color: #7dd3fc; }
.pz-off { font-style: normal; color: #6b7280; }
.pz-pin { position: absolute; left: 2px; top: 50%; transform: translateY(-50%); font-size: 10px; opacity: 0; transition: opacity .12s; }
.pz-item:hover .pz-pin { opacity: .55; }
.pz-pin:hover { opacity: 1 !important; }
.pz-none { text-align: center; color: #6b7280; font-size: 12px; padding: 40px 10px; }

/* ------------------------------- 主区 ------------------------------- */
.pz-main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; position: relative; padding-bottom: 120px; }
.pz-main-top { display: flex; align-items: center; gap: 10px; padding: 14px 18px 0; }
.pz-tasks { font-size: 12.5px; font-weight: 600; color: #1a1400; background: linear-gradient(135deg, #fde047, #f59e0b); padding: 8px 16px; border-radius: 999px; box-shadow: 0 4px 16px rgba(245, 158, 11, .3); }
.pz-round { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); }
.pz-round:hover { border-color: rgba(43, 156, 255, .4); }
.pz-round-right { margin-left: auto; display: flex; gap: 8px; }
.pz-sidebtns { position: absolute; right: 14px; bottom: 150px; display: flex; flex-direction: column; gap: 8px; z-index: 5; }

.pz-stage { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; text-align: center; }
.pz-stage-ic {
  width: 150px; height: 150px; border-radius: 34px; display: grid; place-items: center;
  font-size: 66px; font-weight: 800; color: #fff;
  background: radial-gradient(circle at 35% 30%, #4c6ef5, #1c1e2a 70%);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .06);
}
.pz-stage-name { font-size: 20px; margin: 16px 0 8px; }
.pz-stage-desc {
  max-width: 620px; font-size: 12.5px; color: #a7e8ff; line-height: 1.75;
  background: rgba(43, 156, 255, .06); border: 1px solid rgba(43, 156, 255, .28);
  border-radius: 12px; padding: 12px 16px;
}
.pz-stage-tags { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; justify-content: center; }
.pz-stage-tags span { font-size: 10.5px; color: #9aa2ad; background: rgba(255, 255, 255, .05); padding: 3px 9px; border-radius: 999px; }
.pz-stage-tags span.ok { color: #34d399; background: rgba(52, 211, 153, .1); }
.pz-result { margin-top: 18px; width: 100%; max-width: 720px; }
.pz-out { text-align: left; font-size: 13px; color: #d7dbe0; line-height: 1.8; background: #14141a; border: 1px solid rgba(255, 255, 255, .07); border-radius: 12px; padding: 14px 16px; white-space: pre-wrap; word-break: break-word; }
.pz-out.err { color: #fca5a5; }
.pz-out-img { width: 100%; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .08); display: block; }
.pz-cost { font-size: 10.5px; color: #6b7280; margin-top: 8px; }
.pz-loading { display: flex; align-items: center; justify-content: center; gap: 8px; color: #9aa2ad; font-size: 13px; padding: 30px; }
.pz-loading .mj-spin { border-color: rgba(43, 156, 255, .25); border-top-color: #2b9cff; }
.pz-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 9px; font-size: 12.5px; background: #1b1b22; border: 1px solid rgba(255, 255, 255, .1); color: #e8e8ec; }
.pz-btn.primary { background: linear-gradient(135deg, #2b9cff, #1d6fd0); border: none; color: #fff; font-weight: 600; }

/* 底部生成控制台 */
.pz-compose { position: absolute; left: 50%; transform: translateX(-50%); bottom: 18px; width: min(1000px, 94%); display: flex; gap: 10px; align-items: flex-start; background: #131318; border: 1px solid rgba(255, 255, 255, .08); border-radius: 16px; padding: 12px; box-shadow: 0 18px 50px rgba(0, 0, 0, .5); }
.pz-upload { width: 74px; height: 74px; flex: 0 0 74px; border-radius: 12px; background: #1c1c23; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #8b929c; font-size: 10.5px; cursor: pointer; }
.pz-upload b { font-size: 18px; font-weight: 400; }
.pz-upload:hover { border: 1px dashed rgba(43, 156, 255, .5); color: #cfe6ff; }
.pz-input-wrap { flex: 1; min-width: 0; }
.pz-input-wrap textarea { width: 100%; background: none; border: none; outline: none; resize: none; color: #e8e8ec; font-size: 13px; line-height: 1.65; }
.pz-input-wrap textarea::placeholder { color: #5f6772; }
.pz-tools { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.pz-tool { font-size: 11px; color: #cbd3dc; background: rgba(255, 255, 255, .06); padding: 5px 10px; border-radius: 8px; }
.pz-tool:hover { background: rgba(255, 255, 255, .1); }
.pz-sendbox { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.pz-aiwrite { font-size: 10.5px; color: #fb923c; background: rgba(249, 115, 22, .1); padding: 5px 9px; border-radius: 8px; white-space: nowrap; }
.pz-aiwrite button { color: #fff; background: rgba(255, 255, 255, .12); border-radius: 5px; padding: 2px 7px; font-size: 10px; margin-left: 6px; }
.pz-send { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; display: grid; place-items: center; font-size: 17px; color: #04203a; background: linear-gradient(135deg, #38bdf8, #2b9cff); box-shadow: 0 6px 18px rgba(43, 156, 255, .4); }

/* ------------------------------- 智能体主区 ------------------------------- */
.pz-main.ag { padding-bottom: 110px; }
.ag-stage { flex: 1; min-height: 0; overflow: auto; padding: 18px 26px 0; }
.ag-hero { text-align: center; padding: 8px 0 22px; }
.ag-hero-ic { width: 84px; height: 84px; margin: 0 auto 14px; border-radius: 24px; display: grid; place-items: center; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); overflow: hidden; font-size: 30px; font-weight: 700; }
.ag-hero-ic img { width: 62%; height: 62%; object-fit: contain; }
.ag-badge { display: inline-block; font-size: 10.5px; color: #f9a8d4; background: rgba(236, 72, 153, .12); border: 1px solid rgba(236, 72, 153, .3); padding: 3px 10px; border-radius: 999px; }
.ag-hero h1 { font-size: 30px; margin: 12px 0 14px; background: linear-gradient(180deg, #fff, #f9a8d4); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ag-chips { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.ag-chips span { font-size: 11px; color: #cbd5e1; background: rgba(255, 255, 255, .05); padding: 5px 12px; border-radius: 999px; }
.ag-caps { display: grid; grid-template-columns: 1fr 1.6fr; gap: 14px; max-width: 900px; margin: 0 auto; }
.ag-cap { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: #141419; border: 1px solid rgba(255, 255, 255, .07); text-align: left; }
.ag-cap span b { display: block; font-size: 12.5px; }
.ag-cap span em { font-style: normal; font-size: 10.5px; color: #7d8590; }
.ag-cap i { margin-left: auto; color: #6b7280; font-style: normal; }
.ag-card-c { background: linear-gradient(135deg, rgba(236, 72, 153, .07), rgba(255, 255, 255, .02)); border: 1px solid rgba(236, 72, 153, .3); border-radius: 16px; padding: 18px; }
.ag-cap-i { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: rgba(236, 72, 153, .16); color: #f9a8d4; font-size: 11px; font-weight: 700; }
.ag-card-c h2 { font-size: 19px; margin: 12px 0 8px; }
.ag-card-c p { font-size: 12.5px; color: #a7adb8; line-height: 1.75; margin: 0 0 12px; }
.ag-card-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.ag-card-tags span { font-size: 10.5px; color: #fbcfe8; background: rgba(236, 72, 153, .12); padding: 3px 9px; border-radius: 999px; }
.ag-more { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; max-width: 900px; margin: 16px auto 0; }
.ag-more-i { background: #141419; border: 1px solid rgba(255, 255, 255, .06); border-radius: 12px; padding: 12px; }
.ag-more-i span { font-size: 10.5px; color: #f9a8d4; font-weight: 700; }
.ag-more-i b { display: block; font-size: 12px; margin: 6px 0 4px; }
.ag-more-i em { font-style: normal; font-size: 10px; color: #6b7280; }
.ag-input { position: absolute; left: 50%; transform: translateX(-50%); bottom: 16px; width: min(1000px, 94%); display: flex; gap: 10px; align-items: flex-end; }
.ag-input-box { flex: 1; background: #131318; border: 1px solid rgba(255, 255, 255, .08); border-radius: 16px; padding: 12px 14px; }
.ag-input-box textarea { width: 100%; background: none; border: none; outline: none; resize: none; color: #e8e8ec; font-size: 13px; line-height: 1.6; }
.ag-input-box textarea::placeholder { color: #5f6772; }
.ag-input-b { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.ag-hint { margin-left: auto; font-size: 10.5px; color: #6b7280; }

/* ------------------------------- 灵感广场 ------------------------------- */
.pz-main.ig { display: flex; flex-direction: row; padding-bottom: 0; min-height: 0; }
.ig-tags { width: 178px; flex: 0 0 178px; border-right: 1px solid rgba(255, 255, 255, .05); padding: 12px 10px; overflow: auto; }
.ig-search { display: flex; gap: 5px; margin-bottom: 10px; }
.ig-search input { flex: 1; min-width: 0; background: #17171d; border: 1px solid rgba(255, 255, 255, .08); border-radius: 8px; padding: 6px 9px; font-size: 11px; color: #cdd3da; outline: none; }
.ig-search button { background: rgba(43, 156, 255, .18); color: #cfe6ff; border-radius: 7px; padding: 0 9px; font-size: 11px; }
.ig-tag-cloud { display: flex; flex-wrap: wrap; gap: 5px; }
.ig-tag-cloud button { font-size: 10.5px; color: #b6bdc7; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .06); padding: 4px 8px; border-radius: 7px; }
.ig-tag-cloud button:hover { color: #fff; }
.ig-tag-cloud button.on { color: #fff; background: rgba(43, 156, 255, .2); border-color: rgba(43, 156, 255, .4); }
.ig-flow { flex: 1; min-width: 0; min-height: 0; overflow: auto; padding: 14px 16px 40px; display: flex; gap: 12px; align-items: flex-start; }
.ig-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.ig-card { break-inside: avoid; margin-bottom: 12px; cursor: pointer; }
.ig-img { position: relative; border-radius: 12px; overflow: hidden; background: #14141a center/cover no-repeat; }
.ig-card:hover .ig-img { outline: 1px solid rgba(43, 156, 255, .5); }
.ig-fav { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .45); color: #fff; font-size: 13px; }
.ig-fav.on { color: #fb7185; }
.ig-vtag { position: absolute; bottom: 8px; left: 8px; font-style: normal; font-size: 10px; color: #04203a; background: #7dd3fc; padding: 2px 7px; border-radius: 6px; font-weight: 700; }
.ig-card > b { display: block; font-size: 12px; margin: 8px 2px 5px; color: #e8e8ec; line-height: 1.4; }
.ig-tags2 { display: flex; gap: 5px; padding: 0 2px; }
.ig-tags2 span { font-size: 9.5px; color: #67e8f9; background: rgba(34, 211, 238, .1); padding: 2px 7px; border-radius: 999px; }

@media (max-width: 1200px) {
  .pz-panel { width: 200px; flex-basis: 200px; }
  
  .ag-caps { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .pz-panel { display: none; }
  .ig-tags { display: none; }
}
/* 瀑布流图片元素 */
.ig-img { position: relative; border-radius: 12px; overflow: hidden; background: #14141a; }
.ig-img img { display: block; width: 100%; height: auto; }

/* 原站真实 Logo 与厂商图标 */
.pz-logo-ic { overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 0 14px rgba(0,202,224,.28); }
.pz-logo-ic img { width: 78%; height: 78%; object-fit: contain; }
.pz-item-ic img, .pz-stage-ic img { width: 100%; height: 100%; object-fit: contain; }
.pz-stage-ic { background: #fff; box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06); }
.logo-img { width: 26px; height: 26px; border-radius: 6px; object-fit: contain; background: #fff; }