/* 3D 面板定稿（设计稿 docs/design/site-pages.html ⑨「素材·学科·3D」+ PRODUCT-UX-ARCH 第五、十二节）。
   随 space3d 懒加载、排在 3d-unified-panel.css 之后，只改外观与排版；3D 逻辑、渲染节奏不动。
   深色 chrome：底 #202124 · 抬起 #303134 · 线 rgb(255 255 255/.10) · 字 #E8EAED · 次字 #9AA0A6 · 主色 Google 蓝 #4285F4。 */

html.dark body:not(.theme-light) #panel3DTools.unified-3d-panel{
  --p3-bg:#202124;--p3-raised:#303134;--p3-line:rgb(255 255 255 / .10);--p3-ink:#E8EAED;--p3-muted:#9AA0A6;--p3-blue:#4285F4;
  background:var(--p3-bg)!important;color:var(--p3-ink)!important;border:1px solid var(--p3-line)!important;border-radius:16px!important;box-shadow:0 2px 6px rgb(0 0 0 / .3)!important;width:360px;overflow:hidden
}
html.dark body:not(.theme-light) #panel3DTools :is(#panel3D,#geometry-lab){background:transparent!important;border:0!important;box-shadow:none!important}

/* ---------- 头部 + 分段页签 ---------- */
html.dark body:not(.theme-light) #panel3DTools .u3d-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 8px;border:0}
html.dark body:not(.theme-light) #panel3DTools .u3d-head h2{margin:0;font-size:16px;font-weight:500;color:var(--p3-ink)!important}
html.dark body:not(.theme-light) #panel3DTools #btnClose3DPanel{width:32px;height:32px;border-radius:8px;border:0!important;background:transparent!important;color:var(--p3-muted)!important}
html.dark body:not(.theme-light) #panel3DTools #btnClose3DPanel:hover{background:var(--p3-raised)!important;color:var(--p3-ink)!important}
html.dark body:not(.theme-light) #panel3DTools .u3d-tabs{display:flex;gap:2px;margin:0 16px 12px;padding:3px;border:0!important;border-radius:999px;background:var(--p3-raised)}
html.dark body:not(.theme-light) #panel3DTools .u3d-tabs button{flex:1;height:32px;min-height:32px;border:0!important;border-radius:999px;background:transparent!important;color:var(--p3-muted)!important;font-size:13px;font-weight:500}
html.dark body:not(.theme-light) #panel3DTools .u3d-tabs button[aria-selected=true]{background:var(--p3-ink)!important;color:#202124!important}
html.dark body:not(.theme-light) #panel3DTools .u3d-content{padding:0 16px 16px!important;overflow-y:auto}

/* ---------- 几何体：预览 → 立体网格 → 颜色尺寸 → 放入画板 ---------- */
html.dark body:not(.theme-light) #panel3DTools .u3d-stage{display:flex!important;flex-direction:column;gap:12px}
html.dark body:not(.theme-light) #panel3DTools .u3d-canvas{order:1;flex:none!important;height:216px;min-height:0!important;border:1px solid var(--p3-line)}
html.dark body:not(.theme-light) #panel3DTools .u3d-chips{order:2;min-height:0!important;padding:0!important}
html.dark body:not(.theme-light) #panel3DTools .u3d-chips:has(> .u3d-label:only-child){display:none!important}
html.dark body:not(.theme-light) #panel3DTools .u3d-teach{order:3;display:flex!important;flex-wrap:wrap;align-items:center;gap:8px 10px!important;padding:0!important}
html.dark body:not(.theme-light) #panel3DTools .u3d-teach > .u3d-label:first-child{flex-basis:100%;font-size:12px;color:var(--p3-muted)!important}
html.dark body:not(.theme-light) #panel3DTools .u3d-solids{flex-basis:100%;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px!important}
html.dark body:not(.theme-light) #panel3DTools .u3d-solid-card{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:72px;padding:8px 4px!important;border:1px solid transparent!important;border-radius:12px!important;background:var(--p3-raised)!important;color:var(--p3-ink)!important;font-size:11px!important;line-height:1.25!important;text-align:center;cursor:pointer}
html.dark body:not(.theme-light) #panel3DTools .u3d-solid-card span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--p3-ink)!important}
html.dark body:not(.theme-light) #panel3DTools .u3d-solid-thumb{width:32px;height:32px;flex:none;color:var(--p3-blue)}
html.dark body:not(.theme-light) #panel3DTools .u3d-solid-card:nth-of-type(4n+2) .u3d-solid-thumb{color:#EA4335}
html.dark body:not(.theme-light) #panel3DTools .u3d-solid-card:nth-of-type(4n+3) .u3d-solid-thumb{color:#FBBC05}
html.dark body:not(.theme-light) #panel3DTools .u3d-solid-card:nth-of-type(4n+4) .u3d-solid-thumb{color:#34A853}
html.dark body:not(.theme-light) #panel3DTools .u3d-solid-card:hover{border-color:rgb(255 255 255 / .24)!important}
html.dark body:not(.theme-light) #panel3DTools .u3d-solid-card[aria-pressed=true]{border-color:var(--p3-blue)!important;background:rgb(66 133 244 / .16)!important}
html.dark body:not(.theme-light) #panel3DTools .u3d-teach .u3d-label{color:var(--p3-muted)!important}
html.dark body:not(.theme-light) #panel3DTools #solidGlassDefault{height:32px;padding:0 12px!important;border-radius:999px!important}
html.dark body:not(.theme-light) #panel3DTools .u3d-teach .u3d-range{flex:1;min-width:96px;accent-color:var(--p3-blue)}

/* 主按钮「放入画板」：满宽 Google 蓝，贴面板底部常驻 */
html.dark body:not(.theme-light) #panel3DTools .u3d-actions{order:4;position:sticky;bottom:-16px;z-index:2;display:flex!important;flex-wrap:nowrap!important;gap:8px!important;margin:0 -16px;padding:12px 16px 16px!important;background:var(--p3-bg);border-top:1px solid var(--p3-line)}
html.dark body:not(.theme-light) #panel3DTools .u3d-actions .u3d-btn{height:44px;border-radius:999px!important;font-size:14px!important;font-weight:500}
html.dark body:not(.theme-light) #panel3DTools .u3d-actions .u3d-btn-primary{flex:1;background:var(--p3-blue)!important;border:1px solid var(--p3-blue)!important;color:#FFFFFF!important}
html.dark body:not(.theme-light) #panel3DTools .u3d-actions .u3d-btn-primary:hover{background:#3B78E7!important}
html.dark body:not(.theme-light) #panel3DTools .u3d-actions .u3d-btn:not(.u3d-btn-primary){padding:0 18px!important;background:transparent!important;border:1px solid #5F6368!important;color:var(--p3-ink)!important}

/* 预览区右上角浮动图标组（原来是四个白框文字按钮） */
html.dark body:not(.theme-light) #panel3DTools #view3D{position:relative}
html.dark body:not(.theme-light) #panel3DTools .viewer-ux-dock{position:absolute!important;top:8px!important;right:8px!important;left:auto!important;bottom:auto!important;transform:none!important}
html.dark body:not(.theme-light) #panel3DTools .viewer-action-rail{position:static!important;display:flex!important;flex-direction:column;gap:4px;padding:4px;border-radius:12px;background:rgb(32 33 36 / .88);border:1px solid var(--p3-line)}
html.dark body:not(.theme-light) #panel3DTools .viewer-action-rail button{display:grid!important;place-items:center;width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;padding:0!important;border:0!important;border-radius:8px!important;background:transparent!important;color:var(--p3-ink)!important;box-shadow:none!important}
html.dark body:not(.theme-light) #panel3DTools .viewer-action-rail button:hover{background:var(--p3-raised)!important}

/* 次级命令、说明、器材、空间参考：统一成卡片 */
html.dark body:not(.theme-light) #panel3DTools .u3d-hint{margin:12px 0 8px;font-size:12px;line-height:1.6;color:var(--p3-muted)!important}
html.dark body:not(.theme-light) #panel3DTools .u3d-command{display:flex;align-items:center;width:100%;min-height:40px;margin:0 0 8px;padding:0 14px;border:1px solid var(--p3-line)!important;border-radius:12px;background:transparent!important;color:var(--p3-ink)!important;font-size:13px;text-align:left}
html.dark body:not(.theme-light) #panel3DTools .u3d-command:hover{background:var(--p3-raised)!important}
html.dark body:not(.theme-light) #panel3DTools :is(.physics-kit-section,.ground-grid-control){margin:12px 0 0;padding:12px!important;border:1px solid var(--p3-line)!important;border-radius:12px;background:transparent}
html.dark body:not(.theme-light) #panel3DTools :is(.physics-kit-section h3,.ground-grid-control legend){font-size:13px;font-weight:500;color:var(--p3-ink)!important}
html.dark body:not(.theme-light) #panel3DTools .ground-sky [data-sky]{border-radius:999px!important}
html.dark body:not(.theme-light) #panel3DTools .ground-sky [data-sky][aria-checked=true]{background:var(--p3-ink)!important;color:#202124!important}

/* ---------- 实验室：卡片网格 ---------- */
html.dark body:not(.theme-light) #panel3DTools .u3d-tool-empty{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
html.dark body:not(.theme-light) #panel3DTools .u3d-empty-intro{grid-column:1/-1;padding:0 0 4px!important}
html.dark body:not(.theme-light) #panel3DTools .u3d-empty-card{display:flex!important;flex-direction:column;gap:8px;padding:12px!important;border:0!important;border-radius:12px!important;background:var(--p3-raised)!important}
html.dark body:not(.theme-light) #panel3DTools .u3d-empty-card :is(svg,canvas){width:100%;height:64px;color:#4285F4;background:transparent!important}
html.dark body:not(.theme-light) #panel3DTools .u3d-empty-card:nth-of-type(2) svg{color:#EA4335}
html.dark body:not(.theme-light) #panel3DTools .u3d-empty-card:nth-of-type(3) svg{color:#FBBC05}
html.dark body:not(.theme-light) #panel3DTools .u3d-empty-card > div{display:flex;flex-direction:column;gap:4px}
html.dark body:not(.theme-light) #panel3DTools .u3d-empty-card strong{font-size:13px;font-weight:500}
html.dark body:not(.theme-light) #panel3DTools .u3d-empty-card span{font-size:11px;line-height:1.5}
html.dark body:not(.theme-light) #panel3DTools .u3d-empty-card button{height:32px;margin-top:4px;border-radius:999px!important;border:1px solid #5F6368!important;background:transparent!important;font-size:12px}
html.dark body:not(.theme-light) #panel3DTools :is(#geometry-lab.u3d-integrated-lab,.u3d-growth){margin-top:12px;padding:12px!important;border:1px solid var(--p3-line)!important;border-radius:12px;background:transparent!important}
html.dark body:not(.theme-light) #panel3DTools #geometry-lab h3{margin:0;font-size:13px;font-weight:500;color:var(--p3-ink)!important}
/* 实验室里的「收起」和面板右上角 ✕ 重复 */
html.dark body:not(.theme-light) #panel3DTools #geometry-lab h3 + button{display:none!important}
html.dark body:not(.theme-light) #panel3DTools #geometry-lab .gl-mode-switch{display:flex;align-items:center;gap:8px;margin:10px 0 2px;font-size:13px}
html.dark body:not(.theme-light) #panel3DTools #geometry-lab .gl-muted{margin:2px 0 8px;font-size:12px;line-height:1.6;color:var(--p3-muted)!important}
html.dark body:not(.theme-light) #panel3DTools #geometry-lab button{min-height:32px;padding:0 12px;border-radius:999px!important;border:1px solid #5F6368!important;background:transparent!important;font-size:12px}
html.dark body:not(.theme-light) #panel3DTools #geometry-lab button.gl-active{background:var(--p3-ink)!important;color:#202124!important;border-color:var(--p3-ink)!important}
html.dark body:not(.theme-light) #panel3DTools .u3d-growth > summary{font-size:13px;font-weight:500;cursor:pointer}

/* ---------- 手机 375：底部弹层 ---------- */
@media (max-width:767.98px){
  html.dark body:not(.theme-light) #panel3DTools.unified-3d-panel{width:auto;border-radius:20px 20px 0 0!important;border-bottom:0!important}
  /* 底部弹层比通用抽屉高一档（预览 + 一行立体 + 主按钮要同屏），仍可上拉全屏 */
  html.s1.dark body:not(.theme-light) #panel3DTools.unified-3d-panel:not(.hidden){height:min(72%, calc(var(--s1-app-h) * .72))!important}
  html.s1.s1-drawer-full.dark body:not(.theme-light) #panel3DTools.unified-3d-panel:not(.hidden){height:calc(var(--s1-app-h) - var(--s1-top) - var(--site-beian-height, 0px))!important}
  html.dark body:not(.theme-light) #panel3DTools .u3d-canvas{height:150px}
  html.dark body:not(.theme-light) #panel3DTools .u3d-head{padding:8px 16px 4px}
  html.dark body:not(.theme-light) #panel3DTools .u3d-tabs{margin-bottom:10px}
  /* 手机预览矮，图标组横排在右上角，单个 44px 可点 */
  html.dark body:not(.theme-light) #panel3DTools .viewer-action-rail{flex-direction:row}
  /* 立体一行横滑，不截断：卡片 76px，露出半张提示还能滑 */
  html.dark body:not(.theme-light) #panel3DTools .u3d-solids{display:grid!important;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:76px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding-bottom:4px;margin:0 -16px;padding-left:16px;padding-right:16px;scrollbar-width:none}
  html.dark body:not(.theme-light) #panel3DTools .u3d-solids::-webkit-scrollbar{display:none}
  html.dark body:not(.theme-light) #panel3DTools .u3d-solid-card{min-height:76px;scroll-snap-align:start}
  html.dark body:not(.theme-light) #panel3DTools .viewer-action-rail button{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important}
  html.dark body:not(.theme-light) #panel3DTools .u3d-tool-empty{grid-template-columns:1fr}
  html.dark body:not(.theme-light) #panel3DTools .u3d-empty-card{flex-direction:row;align-items:center}
  html.dark body:not(.theme-light) #panel3DTools .u3d-empty-card :is(svg,canvas){width:96px;flex:none}
}
