/* ==================== Minimo3D 页（2026-09-25 从独立版并进来） ====================
   左参数、中 3D 预览、右最近生成；另一块「我的模型」是整页的卡片墙。
   颜色全走 styles.css 的变量，两套主题不另写色值。琥珀色（--model3d-*）只给入口的标识用（页头那枚、侧栏、首页卡），
   页面里面的主按钮、选中态照旧是全站的青蓝。滑轨（m3d-rail）和开关（.m3d-switch-row 里的勾选框）的样子
   是 styles.css 里全站共用的那两份，这里只管排布。按钮照全站规矩：悬浮不换样子。 */

.model3d-page { display: flex; flex-direction: column; gap: 12px; overflow: hidden; padding-bottom: 14px; }
/* 这页里的块大多是 display: flex，会压过 hidden 属性，统一在这儿兜住。 */
.model3d-page [hidden] { display: none !important; }
.m3d-svg { display: block; flex: none; width: 18px; height: 18px; }

/* ---- 页头 ---- */
.m3d-top { flex: none; display: flex; align-items: center; gap: 20px; min-height: 44px; }
.m3d-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.m3d-mark {
  display: grid; flex: none; place-items: center; width: 40px; height: 40px;
  border-radius: 12px; background: var(--model3d-soft); color: var(--model3d-color);
}
.m3d-mark .m3d-svg { width: 22px; height: 22px; }
.m3d-brand-text { min-width: 0; }
/* 三页标题一样大（用户 2026-10-07：「Minimo3D，3D导演台，我的项目，这3个页面，标题字体的大小改成一致」）：20px / 700。 */
.m3d-brand-text h2 { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.2; }
/* 生成服务状态跟在「生成 / 我的模型」后面（2026-10-07 从最右边挪过来：页头和顶栏齐平之后，最右边是右上角那一排按钮）。 */
.m3d-server {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px;
  border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 12.5px; white-space: nowrap;
}
.m3d-server::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); }
.m3d-server.on { color: var(--text); }
.m3d-server.on::before { background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); }
.m3d-server.wait::before { background: var(--orange); box-shadow: 0 0 0 3px var(--orange-soft); }

/* ---- 生成：三栏 ---- */
.m3d-studio { flex: 1; min-height: 0; display: grid; grid-template-columns: 320px minmax(0, 1fr) 212px; gap: 12px; }
.m3d-panel { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-radius: 8px; background: var(--surface); overflow: hidden; }

/* 参数栏：滚动条占位常驻（scrollbar-gutter），出现滚动条时不挤左边的内容。 */
.m3d-scroll {
  flex: 1; min-height: 0; overflow-y: auto; scrollbar-gutter: stable;
  display: flex; flex-direction: column; gap: 22px; padding: 18px 10px 18px 18px;
}
.m3d-block, .m3d-opt, .m3d-adv { display: flex; flex-direction: column; gap: 10px; }
#m3dOptions, .m3d-opt-group { gap: 20px; }
.m3d-opt-group { display: flex; flex-direction: column; }
.m3d-block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.m3d-block-title { color: var(--text); font-size: 13.5px; font-weight: 600; }
.m3d-muted { color: var(--muted); font-size: 12px; }
.m3d-tip { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
/* 上传区下面那行提示：单图、多图的字数不一样，固定两行高，切换时下面的内容不跟着跳。 */
#m3dUploadTip { min-height: calc(2 * 1.65em); }

/* 上传格 */
.m3d-drop {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  aspect-ratio: 1; padding: 10px; border: 1px dashed var(--line-strong); border-radius: 10px;
  background: var(--surface-soft); color: var(--muted); text-align: center; cursor: pointer; overflow: hidden;
  transition: border-color .15s ease, background-color .15s ease;
}
.m3d-drop.big { aspect-ratio: 4 / 3; gap: 8px; padding: 18px; }
.m3d-drop.over { border-color: var(--accent); background: var(--accent-soft); }
.m3d-drop:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.m3d-drop.filled { border-style: solid; border-color: var(--line); }
.m3d-drop img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 10px; object-fit: contain; }
.m3d-drop-icon .m3d-svg { width: 24px; height: 24px; }
.m3d-drop.big .m3d-drop-icon .m3d-svg { width: 30px; height: 30px; }
.m3d-drop strong { color: var(--text); font-size: 13.5px; font-weight: 600; }
.m3d-drop > span:not(.m3d-drop-icon):not(.m3d-drop-label) { font-size: 12px; line-height: 1.5; }
.m3d-drop-label { position: absolute; z-index: 1; top: 7px; left: 8px; color: var(--muted); font-size: 12px; }
.m3d-drop.filled .m3d-drop-label { padding: 1px 8px; border-radius: 999px; background: var(--surface); color: var(--text); }
.m3d-drop-label em { margin-left: 2px; color: var(--red); font-style: normal; }
.m3d-drop-clear {
  position: absolute; z-index: 1; top: 6px; right: 6px; display: grid; place-items: center;
  width: 26px; height: 26px; min-height: 0; padding: 0; border: 0; border-radius: 50%;
  background: var(--surface); color: var(--text); box-shadow: var(--shadow-1);
}
.m3d-drop-clear .m3d-svg { width: 14px; height: 14px; }
/* 单图一个大框、多图四个格子，**外框一样高**（用户 2026-09-26：切换混元 2.1 / 2mv 时上面的高度不能变）：
   两种都按 4:3 定高，多图的四格在这个框里平分（格子因此是扁的，图按 contain 摆，不裁）。 */
.m3d-slots {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 8px; aspect-ratio: 4 / 3;
}
.m3d-slots .m3d-drop { aspect-ratio: auto; min-height: 0; }

/* 高级设置 */
.m3d-adv-toggle {
  display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 0; padding: 0;
  border: 0; background: transparent; color: var(--text); font-size: 13.5px; font-weight: 600;
}
.m3d-adv-toggle .m3d-svg { width: 16px; height: 16px; color: var(--muted); transition: transform .2s ease; }
.m3d-adv-toggle.open .m3d-svg { transform: rotate(180deg); }
.m3d-adv { gap: 6px; }
.m3d-field { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; color: var(--text); font-size: 13px; }
.m3d-field .m3d-input { width: 128px; }
.m3d-input { width: 100%; height: 34px; padding: 0 10px; font-size: 13px; font-variant-numeric: tabular-nums; }
.m3d-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--text); font-size: 13.5px; font-weight: 600; cursor: pointer; }

/* 底部：提示 + 生成 */
.m3d-foot { flex: none; display: flex; flex-direction: column; gap: 10px; padding: 14px 18px 18px; border-top: 1px solid var(--line); }
.m3d-hint { min-height: 18px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.m3d-hint.warn { color: var(--orange); }
.m3d-generate { display: flex; align-items: center; justify-content: center; width: 100%; height: 44px; font-size: 15px; }

/* ---- 预览区 ---- */
.m3d-stage {
  position: relative; min-width: 0; min-height: 0; border-radius: 8px; overflow: hidden;
  background: radial-gradient(120% 95% at 50% 32%, var(--surface-hover) 0%, var(--surface) 52%, var(--bg) 100%);
}
.m3d-canvas { position: absolute; inset: 0; }
/* 排队、生成中、失败时画面上没有模型：连地面网格一起藏掉，只留提示。 */
.m3d-stage:not(.has-model) .m3d-canvas { visibility: hidden; }
.m3d-canvas canvas { display: block; width: 100% !important; height: 100% !important; outline: none; touch-action: none; }
.m3d-stage-head {
  position: absolute; z-index: 2; top: 16px; left: 18px; right: 116px;
  display: flex; flex-direction: column; gap: 7px; pointer-events: none;
}
.m3d-stage-head h3 { margin: 0; font-size: 17px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m3d-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; font-size: 12.5px; }
.m3d-meta .k { color: var(--muted); }
.m3d-meta .v { color: var(--text); font-variant-numeric: tabular-nums; }
/* 右上角的 UE 坐标轴：只在有模型时显示。轴色是 UE 的红绿蓝，圆点上的字母压白。 */
.m3d-gizmo { position: absolute; z-index: 2; top: 10px; right: 12px; width: 84px; height: 84px; pointer-events: none; visibility: hidden; }
.m3d-stage.has-model .m3d-gizmo { visibility: visible; }
.m3d-gizmo text { fill: #fff; font-size: 9.5px; font-weight: 700; text-anchor: middle; dominant-baseline: central; }

.m3d-overlay { position: absolute; z-index: 1; inset: 0; display: grid; place-items: center; padding: 84px 24px 24px; pointer-events: none; }
.m3d-overlay:empty { display: none; }
.m3d-overlay > * { pointer-events: auto; }
.m3d-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 440px; color: var(--muted); text-align: center; }
.m3d-empty > .m3d-svg { width: 46px; height: 46px; color: var(--line-strong); }
.m3d-empty.bad > .m3d-svg { color: var(--red); }
.m3d-empty h3 { margin: 6px 0 0; color: var(--text); font-size: 17px; font-weight: 600; }
.m3d-empty p { margin: 0; font-size: 13px; line-height: 1.75; }
.m3d-empty .primary-command, .m3d-empty .danger-command, .m3d-progress .danger-command { margin-top: 8px; padding: 0 24px; }
.m3d-steps { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin-top: 10px; color: var(--text); font-size: 13px; }
.m3d-steps span { display: inline-flex; align-items: center; gap: 8px; }
.m3d-steps b {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--surface-soft); color: var(--muted); font-size: 12px; font-weight: 600;
}

.m3d-progress { display: flex; flex-direction: column; align-items: center; gap: 14px; width: min(360px, 100%); text-align: center; }
.m3d-progress-img { width: 168px; height: 168px; padding: 10px; border-radius: 14px; background: var(--surface-soft); object-fit: contain; }
.m3d-progress-text { display: flex; flex-direction: column; gap: 4px; }
.m3d-progress-text strong { color: var(--text); font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.m3d-progress-text span { color: var(--muted); font-size: 12.5px; }
.m3d-bar { width: 100%; height: 6px; border-radius: 999px; background: var(--surface-soft); overflow: hidden; }
.m3d-bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width .4s ease; }
.m3d-loading { color: var(--muted); font-size: 13px; }
.m3d-loadbar { position: absolute; z-index: 3; top: 0; left: 0; right: 0; height: 2px; }
.m3d-loadbar i { display: block; width: 0; height: 100%; background: var(--accent); transition: width .2s ease; }

/* 底下那条：显示方式 + 下载。磨砂玻璃压在画面上。 */
.m3d-dock {
  position: absolute; z-index: 2; left: 50%; bottom: 18px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px; padding: 5px;
  border: 1px solid var(--glass-line); border-radius: 999px; background: var(--glass-bg);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: var(--shadow-1);
}
.m3d-dock .m3d-rail { flex: none; }
.m3d-dock .m3d-rail-tab { flex: none; padding: 6px 14px; }
.m3d-dock-sep { width: 1px; height: 20px; background: var(--line-strong); }
.m3d-dock-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 0; height: 34px; padding: 0 12px 0 14px;
  border: 0; border-radius: 999px; background: transparent; color: var(--text); font-size: 13px; font-weight: 600;
}
.m3d-dock-btn .m3d-svg { width: 16px; height: 16px; }
.m3d-dock-btn .m3d-svg:last-child { width: 14px; height: 14px; color: var(--muted); }
.m3d-menu-wrap { position: relative; }
.m3d-menu {
  position: absolute; right: -5px; bottom: calc(100% + 12px); display: flex; flex-direction: column; gap: 2px;
  width: 272px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-2);
}
.m3d-menu-item {
  display: flex; align-items: center; min-height: 0; height: 36px; padding: 0 12px;
  border: 0; border-radius: 8px; background: transparent; color: var(--text); font-size: 13px; text-align: left;
}
.m3d-menu-item:hover { background: var(--surface-soft); }
.m3d-menu p { margin: 4px 0 0; padding: 8px 12px 4px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; line-height: 1.6; white-space: normal; }

.m3d-tools { position: absolute; z-index: 2; right: 14px; bottom: 18px; display: flex; flex-direction: column; gap: 8px; }
.m3d-tool {
  display: grid; place-items: center; width: 38px; height: 38px; min-height: 0; padding: 0;
  border: 1px solid var(--glass-line); border-radius: 12px; background: var(--glass-bg); color: var(--text);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.m3d-tool.active { border-color: var(--primary-bg); background: var(--primary-bg); color: var(--on-primary); }

/* ---- 右侧：最近生成 ---- */
.m3d-side-head { flex: none; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 16px 16px 12px; }
.m3d-assets {
  flex: 1; min-height: 0; overflow-y: auto; scrollbar-gutter: stable;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 8px; padding: 0 8px 14px 16px;
}
.m3d-asset {
  position: relative; display: grid; place-items: center; aspect-ratio: 1; min-height: 0; padding: 0;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); color: var(--muted); overflow: hidden;
}
.m3d-asset.sel { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.m3d-asset img { width: 100%; height: 100%; padding: 4px; object-fit: contain; }
.m3d-asset.src img { opacity: .5; }
.m3d-asset .m3d-svg { width: 22px; height: 22px; }
.m3d-asset-state {
  position: absolute; left: 5px; right: 5px; bottom: 5px; padding: 2px 0; border-radius: 6px;
  background: var(--image-index-bg); color: #fff; font-size: 11.5px; text-align: center;
}
.m3d-side-empty { grid-column: 1 / -1; margin: 16px 8px; color: var(--muted); font-size: 12.5px; line-height: 1.7; text-align: center; white-space: normal; }
.m3d-side-foot {
  flex: none; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 0; height: 44px; margin: 0;
  border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--accent-text); font-size: 13px; font-weight: 600;
}
.m3d-side-foot .m3d-svg { width: 15px; height: 15px; }

/* 状态药丸（排队 / 生成中 / 已完成 / 失败） */
.m3d-pill { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; background: var(--gray-soft); color: var(--muted); font-size: 12px; font-weight: 600; white-space: nowrap; }
.m3d-pill.queue { background: var(--blue-faint); color: var(--muted); }
.m3d-pill.run { background: var(--blue-soft); color: var(--blue); }
.m3d-pill.ok { background: var(--success-soft); color: var(--success); }
.m3d-pill.bad { background: var(--red-soft); color: var(--red); }

/* ---- 我的模型 ---- */
.m3d-library { flex: 1; min-height: 0; display: flex; flex-direction: column; border-radius: 8px; background: var(--surface); overflow: hidden; }
.m3d-lib-bar { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 14px 22px; border-bottom: 1px solid var(--line); }
.m3d-search {
  display: flex; align-items: center; gap: 8px; width: 260px; max-width: 100%; height: 36px; padding: 0 14px;
  border-radius: 999px; background: var(--surface-soft); color: var(--muted);
}
.m3d-search .m3d-svg { width: 16px; height: 16px; }
.m3d-search input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; color: var(--text); font-size: 13px; }
.m3d-search input:focus { outline: none; box-shadow: none; }
.m3d-lib-count { margin-left: auto; font-variant-numeric: tabular-nums; }
.m3d-grid {
  flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(208px, 1fr));
  align-content: start; gap: 14px; padding: 20px 22px;
}
.m3d-card { display: flex; flex-direction: column; min-width: 0; border-radius: 12px; background: var(--surface-soft); overflow: hidden; }
.m3d-card-thumb {
  position: relative; display: grid; place-items: center; aspect-ratio: 1; min-height: 0; padding: 0;
  border: 0; border-radius: 0; background: radial-gradient(circle at 50% 38%, var(--surface-hover) 0%, var(--surface-soft) 70%); color: var(--muted);
}
.m3d-card-thumb img { width: 100%; height: 100%; padding: 12px; object-fit: contain; }
.m3d-card-thumb.src img { opacity: .55; }
.m3d-card-thumb > .m3d-svg { width: 38px; height: 38px; }
.m3d-card-thumb .m3d-pill { position: absolute; top: 10px; left: 10px; }
.m3d-card-body { display: flex; flex-direction: column; gap: 6px; padding: 12px 12px 12px 14px; }
.m3d-card-body b { min-width: 0; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m3d-card-rename { height: 26px; padding: 0 6px; font-size: 14px; font-weight: 600; }
.m3d-card-meta { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 12px; }
.m3d-card-actions { display: flex; gap: 6px; margin-top: 4px; }
.m3d-card-actions button {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 0; height: 30px; padding: 0 10px;
  border: 0; border-radius: 8px; background: var(--surface); color: var(--text); font-size: 12.5px;
}
.m3d-card-actions .m3d-svg { width: 14px; height: 14px; }
.m3d-card-actions [data-act="rename"], .m3d-card-actions [data-act="delete"] { width: 30px; padding: 0; }
.m3d-card-actions [data-act="rename"] { margin-left: auto; }
.m3d-card-actions .danger { color: var(--red); }
.m3d-lib-empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 96px 0; color: var(--muted); font-size: 13px; }
.m3d-lib-empty .m3d-svg { width: 42px; height: 42px; color: var(--line-strong); }
.m3d-lib-empty p { margin: 0; }

/* ---- 窄屏 ---- */
@media (max-width: 1280px) {
  .m3d-studio { grid-template-columns: 300px minmax(0, 1fr); }
  .m3d-side { display: none; }
}
@media (max-width: 900px) {
  .model3d-page { overflow-y: auto; }
  .m3d-top { flex-wrap: wrap; gap: 12px; }
  .m3d-server { margin-left: 0; }
  .m3d-studio, .m3d-library { flex: none; }
  .m3d-studio { grid-template-columns: minmax(0, 1fr); }
  .m3d-stage { order: -1; min-height: 420px; }
  .m3d-scroll { overflow: visible; }
  .m3d-grid { overflow: visible; }
  .m3d-dock { max-width: calc(100% - 24px); overflow-x: auto; }
}
/* 手机（2026-10-01 屏幕适配）：画面左上角那块任务信息折成四五行，会压到中间的预览图上——提示往下让出这块的高度。 */
@media (max-width: 767px) {
  .m3d-stage { min-height: 460px; }
  .m3d-stage-head { right: 18px; }
  .m3d-overlay { padding-top: 140px; }
}
@media (prefers-reduced-motion: reduce) {
  .m3d-bar i, .m3d-loadbar i, .m3d-adv-toggle .m3d-svg { transition: none; }
}