/* Styles for the 3D and mask additions (gb3d-*.js, gb-mask.js). Uses the color variables from index.html. */
.g3add, .gbmask, .g3btns { flex-wrap: wrap; margin: 6px 0 }
.g3add select { flex: 1 1 100px; min-width: 100px }
.g3span { grid-column: span 2 }
#g3panel .row input[type=color] { grid-column: span 2; width: 100%; height: 28px; padding: 2px }
#g3debug { margin-top: 18px; padding-top: 4px; border-top: 1px dashed var(--ln) }
#g3dview { width: 100%; aspect-ratio: 1; margin-top: 6px; border: 1px solid var(--ln) }
.gbwebpbtns { flex-wrap: wrap; margin: 6px 0 }
#gbwebpdebug { margin-top: 18px; padding-top: 4px; border-top: 1px dashed var(--ln) }
.grip { font-style: normal; font-size: 16px; line-height: 1; color: var(--mu); padding: 2px 4px; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none }
.grip:hover { color: var(--tx) }
.ly.dragging { border-color: var(--ac); background: #10102a; box-shadow: 0 3px 12px #000a; position: relative; z-index: 2 }
body.gbdragging, body.gbdragging * { cursor: grabbing !important }
.psypal { flex-wrap: wrap; margin: 4px 0 }
.psypal label { min-width: 72px }
#psypalsw { display: flex; gap: 4px; flex-wrap: wrap }
#psypalsw input[type=color] { width: 30px; height: 26px; padding: 1px; border: 1px solid var(--ln); border-radius: 4px; background: #171722; cursor: pointer }
.gbview { margin: 6px 0 2px }
.gbview button { flex: 1 }
.ly .tag { font-style: normal; font-size: 11px; color: var(--mu); border: 1px solid var(--ln); border-radius: 3px; padding: 0 4px; flex: none }
.ly .tag.top { color: var(--tx); border-color: #4a4a66 }
.ly.img span { color: #c9c9ff }
.ly.pinned { opacity: .7 }
.lydiv { color: var(--mu); font-size: 12px; margin: 8px 0 2px; padding-top: 4px; border-top: 1px dashed var(--ln) }
button:disabled { opacity: .45; cursor: default }