/* v10.34.1 functional surfaces inside V7 */

/* Header collision isolation */
#v7App .editor-top .view-tabs{display:flex!important;align-items:center!important;gap:3px!important;padding-right:8px!important;border-right:1px solid var(--line)!important}
#v7App .editor-top .view-tab{width:55px!important;min-width:55px!important;height:46px!important;padding:0!important;display:grid!important;grid-template-rows:22px 13px!important;place-items:center!important;border:0!important;border-radius:10px!important;background:transparent!important;color:#978b81!important;font-size:8px!important;line-height:1!important;font-weight:900!important;white-space:nowrap!important}
#v7App .editor-top .view-tab.active{background:var(--gold-soft)!important;color:var(--coffee)!important}
#v7App .editor-top .view-tab>span{width:auto!important;height:auto!important;min-width:0!important;background:transparent!important;display:block!important;font-size:17px!important;line-height:1!important}
#v7App .editor-top .view-tab>b{display:block!important;margin:0!important;font-size:9px!important;line-height:1!important;white-space:nowrap!important}
#v7App .editor-top .tools button b{font-size:9px!important;line-height:1!important;white-space:nowrap!important}
#v7App .editor-top .top-adjust span{font-size:9px!important}
#v7App .editor-top .top-adjust b{font-size:10px!important}

/* V7 direct color cards */
#v7App #desktopUsed{display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important;align-content:start!important}
#v7App #desktopPalette{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important;align-content:start!important}
#v7App #desktopUsed>.color-card,#v7App #desktopPalette>.color-card,#v7App #tabletPalette>.color-card,#v7App #mobileUsed>.color-card,#v7App #mobilePalette>.color-card{min-width:0!important}
#v7App #desktopPalette>.color-card .color-dot{width:min(43px,78%)!important;max-width:43px!important}
#v7App .color-card b{font-size:9px!important;line-height:1.15!important}
#v7App .color-card small{font-size:8.5px!important;line-height:1.15!important}
#v7App .color-card.v7-locked{box-shadow:inset 0 0 0 2px rgba(111,131,95,.24)!important}
@media(max-width:1100px) and (min-width:701px){
  #v7App #tabletPalette{display:flex!important;gap:7px!important;overflow-x:auto!important;overflow-y:hidden!important}
  #v7App #tabletPalette>.color-card{flex:0 0 62px!important}
}
@media(max-width:700px){
  #v7App #mobileUsed{display:flex!important;gap:7px!important;overflow-x:auto!important;overflow-y:hidden!important}
  #v7App #mobileUsed>.color-card{flex:0 0 66px!important}
  #v7App #mobilePalette{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:6px!important;max-height:230px!important;overflow-y:auto!important;overflow-x:hidden!important}
}

/* Real pattern surface */
#v7App .canvas-viewport,#v7App .m-viewport{position:relative!important;overflow:hidden!important}
#v7App .canvas-viewport>.pattern-stage,#v7App .m-viewport>.pattern-stage{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:#f8f2e9!important;box-shadow:none!important}
#v7App .pattern-stage>.pattern-viewport{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important;margin:0!important;border:0!important;border-radius:0!important;background:#f8f2e9!important}
#v7App .pattern-stage>.history-controls,#v7App .pattern-stage>.zoom-controls,#v7App .pattern-stage>.mirror-button,#v7App .pattern-stage>.interaction-switch,#v7App .pattern-stage>.gesture-hint,#v7App .pattern-stage>.reference-preview,#v7App .pattern-stage>.workbench-subtools{display:none!important}

/* Real effect surface isolated from V7 wrapper */
#v7App #effectStage.v7-core-effect-stage{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;display:grid!important;place-items:center!important;margin:0!important;padding:0!important;overflow:hidden!important;border:0!important;border-radius:0!important;box-shadow:none!important}
#v7App #effectStage.v7-core-effect-stage[data-background="felt"]{background:#937456!important}
#v7App #effectStage.v7-core-effect-stage[data-background="light"]{background:#eee5d7!important}
#v7App #effectStage.v7-core-effect-stage[data-background="transparent"]{background-color:#fff!important;background-image:linear-gradient(45deg,#e8e8e8 25%,transparent 25%),linear-gradient(-45deg,#e8e8e8 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e8e8e8 75%),linear-gradient(-45deg,transparent 75%,#e8e8e8 75%)!important;background-position:0 0,0 10px,10px -10px,-10px 0!important;background-size:20px 20px!important}
#v7App #effectStage #effectCanvas,#v7App #effectStage #threeDCanvas{width:auto!important;height:auto!important;max-width:94%!important;max-height:94%!important;object-fit:contain!important}
#v7App #effectStage #effectCanvas[hidden],#v7App #effectStage #threeDCanvas[hidden]{display:none!important}
#v7App #effectStage .canvas-empty{color:rgba(255,255,255,.86)!important;font-size:11px!important}

/* Tool popover */
#v7App #desktopToolPop{max-width:min(620px,calc(100vw - 16px))!important;flex-wrap:wrap!important}
#v7App #desktopToolPop.open{display:flex!important}
#v7App #desktopToolPop:not(.open){display:none!important}

/* Recognition exact V7 geometry */
#v7App #importCalibrateLayer .import-calibrator{width:min(1240px,calc(100vw - 30px))!important;height:min(820px,calc(100vh - 30px))!important;grid-template-columns:minmax(0,1fr) 360px!important;grid-template-rows:1fr!important}
#v7App #importCalibrateLayer .import-workspace{grid-column:1!important;grid-row:1!important;min-width:0!important;min-height:0!important}
#v7App #importCalibrateLayer .import-side{grid-column:2!important;grid-row:1!important;min-width:0!important;min-height:0!important;border-right:0!important;border-left:1px solid #eee4dc!important}
#v7App #importImageStage{position:absolute!important;inset:54px 16px 16px!important;overflow:hidden!important}
#v7App #importImageMedia{position:absolute!important;right:auto!important;bottom:auto!important;background-size:100% 100%!important;background-repeat:no-repeat!important;background-position:center!important}
#v7App #v7ImportGridCanvas{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;display:block!important;z-index:22!important;pointer-events:none!important}
#v7App #importCornerPoints{z-index:30!important}
#v7App #importSampleBox{z-index:31!important}
#v7App #importGridReviewHint{z-index:35!important}
@media(max-width:700px){
  #v7App #importCalibrateLayer .import-calibrator{width:100%!important;height:100dvh!important;grid-template-columns:1fr!important;grid-template-rows:minmax(300px,56%) minmax(0,44%)!important;border-radius:0!important}
  #v7App #importCalibrateLayer .import-workspace{grid-column:1!important;grid-row:1!important}
  #v7App #importCalibrateLayer .import-side{grid-column:1!important;grid-row:2!important;border-left:0!important;border-top:1px solid #eee4dc!important}
  #v7App #importImageStage{inset:43px 7px 7px!important}
}


/* =========================================================
   v10.34.2 · SMART PROJECT PREVIEW
   ========================================================= */
#v7App #desktopSourceCard{
  transition:width .18s ease, box-shadow .18s ease, transform .18s ease;
  transform-origin:left top;
}
#v7App #desktopSourceCard.expanded{
  width:360px!important;
  padding:9px!important;
  box-shadow:0 18px 50px rgba(52,38,28,.20)!important;
}
#v7App #desktopSourceCard.expanded .source-preview-frame{
  height:300px!important;
}
#v7App .source-preview-frame{
  cursor:grab!important;
  touch-action:none!important;
  user-select:none!important;
}
#v7App .source-preview-frame.is-panning{cursor:grabbing!important}

#v7App .source-preview-media{
  transform:none!important;
  overflow:hidden!important;
  transition:none!important;
  background-image:none!important;
}
#v7App .source-preview-media.effect{
  display:none!important;
  background:#7e6049!important;
}
#v7App .source-preview-media.effect.active{display:block!important}
#v7App .source-preview-media.original.hidden-preview{display:none!important}

#v7App .v7-preview-content{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  display:block;
  object-fit:contain!important;
  transform-origin:center center!important;
  will-change:transform;
  pointer-events:none!important;
  user-select:none!important;
}
#v7App .v7-preview-content[hidden]{display:none!important}
#v7App canvas.v7-preview-content{
  image-rendering:auto;
}
#v7App #desktopSourceEffect .v7-preview-content{
  background:transparent!important;
}
#v7App .source-preview-controls{
  height:auto!important;
  min-height:28px!important;
  flex-wrap:nowrap!important;
}
#v7App .source-preview-controls button{
  flex:0 0 27px!important;
}
#v7App .source-preview-controls .v7-source-ai{
  margin-left:2px!important;
}
#v7App #sourcePreviewFit,
#v7App #sourcePreviewExpand{
  font-size:11px!important;
}

/* Mobile source pop is a real fit preview of the same primary source/pattern. */
#v7App #mobileSourceThumb{
  background-color:#f4ede3!important;
  background-size:contain!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
}

/* Give the real main heat canvas an explicit visible stacking context. */
#v7App #desktopEffect .effect-frame>#effectStage.v7-core-effect-stage,
#v7App #mViewport>#effectStage.v7-core-effect-stage{
  z-index:2!important;
  opacity:1!important;
  visibility:visible!important;
}
#v7App #effectStage.v7-core-effect-stage>#effectCanvas,
#v7App #effectStage.v7-core-effect-stage>#threeDCanvas{
  position:relative!important;
  z-index:2!important;
}

/* On narrow screens the desktop floating preview is hidden by V7 anyway. */
@media(max-width:700px){
  #v7App #desktopSourceCard.expanded{width:170px!important}
  #v7App #desktopSourceCard.expanded .source-preview-frame{height:122px!important}
}

/* =========================================================
   v10.34.3 · PREVIEW / COLOR PANEL LAYOUT FIX
   ========================================================= */

/* ---- 1. Small preview: no control overflow ---- */
#v7App #desktopSourceCard{
  box-sizing:border-box!important;
  overflow:visible!important;
}
#v7App #desktopSourceCard .source-preview-controls{
  width:100%!important;
  max-width:100%!important;
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-columns:34px minmax(42px,1fr) 34px 34px 34px 38px!important;
  gap:5px!important;
  align-items:center!important;
  padding:0!important;
  margin-top:6px!important;
  overflow:visible!important;
}
#v7App #desktopSourceCard .source-preview-controls>button{
  width:34px!important;
  min-width:34px!important;
  max-width:34px!important;
  height:30px!important;
  padding:0!important;
  margin:0!important;
  display:grid!important;
  place-items:center!important;
  box-sizing:border-box!important;
  border-radius:9px!important;
  font-size:11px!important;
  line-height:1!important;
}
#v7App #desktopSourceCard .source-preview-controls>#sourceZoomLabel{
  min-width:0!important;
  width:100%!important;
  padding:0 2px!important;
  text-align:center!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  font-size:9px!important;
  line-height:30px!important;
}
#v7App #desktopSourceCard .source-preview-controls>.v7-source-ai{
  width:38px!important;
  min-width:38px!important;
  max-width:38px!important;
  font-size:11px!important;
}
#v7App #desktopSourceCard.expanded .source-preview-controls{
  grid-template-columns:36px minmax(54px,1fr) 36px 36px 36px 42px!important;
}
#v7App #desktopSourceCard.expanded .source-preview-controls>button{
  width:36px!important;min-width:36px!important;max-width:36px!important;height:32px!important
}
#v7App #desktopSourceCard.expanded .source-preview-controls>.v7-source-ai{
  width:42px!important;min-width:42px!important;max-width:42px!important
}

/* The preview frame itself clips the moved/zoomed picture, not the controls. */
#v7App #desktopSourceCard .source-preview-frame{
  overflow:hidden!important;
  min-width:0!important;
}
#v7App #desktopSourceCard .source-preview-media{
  overflow:hidden!important;
}

/* ---- Desktop editor side panels: true full-height inner layout ---- */
#v7App .editor-shell{
  min-height:0!important;
}
#v7App .layers-panel,
#v7App .palette-panel{
  min-height:0!important;
  overflow:hidden!important;
}
#v7App .layers-panel .panel-head,
#v7App .palette-panel .panel-head{
  flex:0 0 auto!important;
}

/* ---- 2. Used colors: compact, aligned, never overflowing ---- */
#v7App #desktopUsed{
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  padding:8px!important;
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  grid-auto-rows:102px!important;
  align-content:start!important;
  gap:7px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  scrollbar-gutter:stable!important;
}
#v7App #desktopUsed>.color-card{
  width:100%!important;
  min-width:0!important;
  height:102px!important;
  min-height:102px!important;
  max-height:102px!important;
  margin:0!important;
  padding:7px 5px 6px!important;
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-rows:58px 17px 14px!important;
  align-items:center!important;
  justify-items:center!important;
  gap:0!important;
  overflow:hidden!important;
  border-radius:12px!important;
}
#v7App #desktopUsed>.color-card .color-dot{
  width:58px!important;
  height:58px!important;
  min-width:58px!important;
  min-height:58px!important;
  max-width:58px!important;
  max-height:58px!important;
  margin:0!important;
  border-radius:50%!important;
  box-sizing:border-box!important;
  align-self:center!important;
}
#v7App #desktopUsed>.color-card b{
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  display:block!important;
  text-align:center!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font-size:10px!important;
  font-weight:900!important;
  line-height:17px!important;
}
#v7App #desktopUsed>.color-card small{
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  display:block!important;
  text-align:center!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:#99928c!important;
  font-size:8.5px!important;
  line-height:14px!important;
  font-variant-numeric:tabular-nums!important;
}
#v7App #desktopUsed>.color-card.selected{
  box-shadow:inset 0 0 0 2px #cda34f!important;
}
#v7App #desktopUsed>.v7-no-colors{
  grid-column:1/-1!important;
  padding:22px 6px!important;
  color:#9d9690!important;
  text-align:center!important;
  font-size:9px!important;
}

/* ---- 3. Full palette: fill ALL remaining panel height ---- */
#v7App .palette-panel{
  display:flex!important;
  flex-direction:column!important;
}
#v7App .palette-panel>.panel-head{
  flex:0 0 auto!important;
}
#v7App #desktopPalette{
  flex:1 1 auto!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  padding:8px!important;
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  grid-auto-rows:94px!important;
  align-content:start!important;
  gap:7px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  scrollbar-gutter:stable!important;
}
#v7App #desktopPalette>.color-card{
  width:100%!important;
  min-width:0!important;
  height:94px!important;
  min-height:94px!important;
  max-height:94px!important;
  padding:6px 3px!important;
  margin:0!important;
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-rows:64px 18px!important;
  align-items:center!important;
  justify-items:center!important;
  gap:0!important;
  overflow:hidden!important;
  border-radius:12px!important;
}
#v7App #desktopPalette>.color-card .color-dot{
  width:64px!important;
  height:64px!important;
  min-width:64px!important;
  min-height:64px!important;
  max-width:64px!important;
  max-height:64px!important;
  margin:0!important;
  border-radius:50%!important;
  box-sizing:border-box!important;
}
#v7App #desktopPalette>.color-card b{
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  text-align:center!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font-size:9px!important;
  font-weight:900!important;
  line-height:18px!important;
}

/* No hidden blank half: the actual palette scroll container owns all available height. */
#v7App .palette-panel #desktopPalette + *{
  flex:0 0 auto!important;
}

/* Smaller desktop widths */
@media(max-width:1350px) and (min-width:1101px){
  #v7App #desktopUsed{grid-auto-rows:94px!important}
  #v7App #desktopUsed>.color-card{height:94px!important;min-height:94px!important;max-height:94px!important;grid-template-rows:52px 17px 14px!important}
  #v7App #desktopUsed>.color-card .color-dot{width:52px!important;height:52px!important;min-width:52px!important;min-height:52px!important}
  #v7App #desktopPalette{grid-auto-rows:86px!important}
  #v7App #desktopPalette>.color-card{height:86px!important;min-height:86px!important;max-height:86px!important;grid-template-rows:58px 18px!important}
  #v7App #desktopPalette>.color-card .color-dot{width:58px!important;height:58px!important;min-width:58px!important;min-height:58px!important}
}

/* Tablet/mobile keep V7 dock behavior; just stabilize text. */
@media(max-width:1100px){
  #v7App #tabletPalette>.color-card b,
  #v7App #mobilePalette>.color-card b,
  #v7App #mobileUsed>.color-card b{
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    text-align:center!important;
  }
  #v7App #mobileUsed>.color-card small{
    overflow:hidden!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
    text-align:center!important;
    font-variant-numeric:tabular-nums!important;
  }
}


/* =========================================================
   v10.34.4 · COMPACT PREVIEW — STRICT NO-OVERFLOW
   ========================================================= */

/*
  V7 collapsed source-card is 170px border-box.
  After its padding, usable width is only ~154px.
  Compact mode therefore shows 5 controls in one row:
  - zoom / percentage / zoom + / expand / AI
  The less frequently used reset button is shown only after expanding.
*/
#v7App #desktopSourceCard:not(.expanded){
  width:170px!important;
  max-width:170px!important;
  min-width:170px!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}

#v7App #desktopSourceCard:not(.expanded) .source-tabs,
#v7App #desktopSourceCard:not(.expanded) .source-preview-frame,
#v7App #desktopSourceCard:not(.expanded) .source-preview-controls{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
}

#v7App #desktopSourceCard:not(.expanded) .source-preview-controls{
  display:grid!important;
  grid-template-columns:26px minmax(30px,1fr) 26px 26px 30px!important;
  grid-template-areas:"minus zoom plus expand ai"!important;
  column-gap:3px!important;
  row-gap:0!important;
  align-items:center!important;
  justify-content:stretch!important;
  height:30px!important;
  min-height:30px!important;
  padding:0!important;
  margin:6px 0 0!important;
  overflow:hidden!important;
}

#v7App #desktopSourceCard:not(.expanded) .source-preview-controls>[data-source-zoom="-"]{
  grid-area:minus!important;
}
#v7App #desktopSourceCard:not(.expanded) .source-preview-controls>#sourceZoomLabel{
  grid-area:zoom!important;
  min-width:0!important;
  width:100%!important;
  height:28px!important;
  padding:0!important;
  margin:0!important;
  overflow:hidden!important;
  text-overflow:clip!important;
  white-space:nowrap!important;
  text-align:center!important;
  font-size:8px!important;
  line-height:28px!important;
}
#v7App #desktopSourceCard:not(.expanded) .source-preview-controls>[data-source-zoom="+"]{
  grid-area:plus!important;
}
#v7App #desktopSourceCard:not(.expanded) .source-preview-controls>#sourcePreviewExpand{
  grid-area:expand!important;
}
#v7App #desktopSourceCard:not(.expanded) .source-preview-controls>.v7-source-ai{
  grid-area:ai!important;
}

/* Reset remains available by double-clicking the preview; show its button only in expanded mode. */
#v7App #desktopSourceCard:not(.expanded) .source-preview-controls>#sourcePreviewFit{
  display:none!important;
}

#v7App #desktopSourceCard:not(.expanded) .source-preview-controls>button{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  height:28px!important;
  min-height:28px!important;
  padding:0!important;
  margin:0!important;
  display:grid!important;
  place-items:center!important;
  box-sizing:border-box!important;
  border-radius:8px!important;
  font-size:10px!important;
  line-height:1!important;
  overflow:hidden!important;
}

#v7App #desktopSourceCard:not(.expanded) .source-preview-controls>.v7-source-ai{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  font-size:10px!important;
}

/* The viewport itself is a hard clipping boundary. Pan/zoom can never enlarge the card. */
#v7App #desktopSourceCard .source-preview-frame{
  position:relative!important;
  display:block!important;
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  contain:layout paint!important;
  isolation:isolate!important;
}

#v7App #desktopSourceCard .source-preview-media{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  max-width:100%!important;
  overflow:hidden!important;
}

#v7App #desktopSourceCard .v7-preview-content{
  max-width:none!important;
  max-height:none!important;
  overflow:visible!important;
}

/* Expanded mode restores all 6 controls and remains within the viewport. */
#v7App #desktopSourceCard.expanded{
  width:min(360px,calc(100vw - 28px))!important;
  max-width:calc(100vw - 28px)!important;
  min-width:0!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}

#v7App #desktopSourceCard.expanded .source-preview-controls{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-columns:32px minmax(42px,1fr) 32px 32px 32px 38px!important;
  gap:4px!important;
  align-items:center!important;
  padding:0!important;
  margin:7px 0 0!important;
  overflow:hidden!important;
}
#v7App #desktopSourceCard.expanded .source-preview-controls>#sourcePreviewFit{
  display:grid!important;
}
#v7App #desktopSourceCard.expanded .source-preview-controls>button{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  height:30px!important;
  padding:0!important;
  margin:0!important;
  box-sizing:border-box!important;
}
#v7App #desktopSourceCard.expanded .source-preview-controls>#sourceZoomLabel{
  width:100%!important;
  min-width:0!important;
  height:30px!important;
  line-height:30px!important;
  font-size:9px!important;
  overflow:hidden!important;
  white-space:nowrap!important;
}
#v7App #desktopSourceCard.expanded .source-preview-controls>.v7-source-ai{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
}

/* Small laptop widths: expanded preview still never leaves the editor viewport. */
@media(max-width:900px) and (min-width:701px){
  #v7App #desktopSourceCard.expanded{
    width:min(320px,calc(100vw - 24px))!important;
  }
}

/* Defensive rule: no direct child of the compact card may force intrinsic horizontal overflow. */
#v7App #desktopSourceCard:not(.expanded)>*{
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}


/* =========================================================
   v10.34.5 · CLEAN AI PROGRESS
   ========================================================= */
#v7App #generateLayer .generate-dialog{
  position:relative!important;
  overflow:hidden!important;
}

#v7App #v7GenerateStatus{
  display:none!important;
}

#v7App .v7-ai-progress-layer{
  position:absolute!important;
  inset:0!important;
  z-index:200!important;
  display:grid!important;
  place-items:center!important;
  padding:24px!important;
  background:rgba(255,253,249,.97)!important;
  backdrop-filter:blur(5px)!important;
}

#v7App .v7-ai-progress-layer[hidden]{
  display:none!important;
}

#v7App .v7-ai-progress-card{
  width:min(430px,calc(100% - 32px))!important;
  display:grid!important;
  justify-items:center!important;
  gap:13px!important;
  padding:34px 30px!important;
  border:1px solid #eadfd6!important;
  border-radius:20px!important;
  background:#fffdfa!important;
  box-shadow:0 20px 60px rgba(63,47,37,.10)!important;
}

#v7App .v7-ai-progress-mark{
  width:42px!important;
  height:42px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:50%!important;
  background:#f4ead8!important;
  color:#b37b30!important;
  font-size:18px!important;
  animation:v7AiPulse 1.35s ease-in-out infinite!important;
}

#v7App .v7-ai-progress-card>strong{
  color:#362d28!important;
  font-size:16px!important;
  line-height:1.2!important;
}

#v7App .v7-ai-progress-card>small{
  color:#9a938d!important;
  font-size:9.5px!important;
}

#v7App .v7-ai-progress-track{
  width:100%!important;
  height:9px!important;
  overflow:hidden!important;
  border-radius:999px!important;
  background:#eee7df!important;
}

#v7App .v7-ai-progress-track>i{
  display:block!important;
  width:0%;
  height:100%!important;
  border-radius:inherit!important;
  background:#cfa557!important;
  transition:width .45s ease!important;
}

@keyframes v7AiPulse{
  0%,100%{transform:scale(1);opacity:.76}
  50%{transform:scale(1.08);opacity:1}
}

@media(max-width:700px){
  #v7App .v7-ai-progress-layer{padding:14px!important}
  #v7App .v7-ai-progress-card{
    width:100%!important;
    padding:28px 20px!important;
    border-radius:16px!important;
  }
}


/* =========================================================
   v10.34.6 · FINAL PROMPT SELECTOR / WORKSPACE ICONS
   ========================================================= */

/* Prompt selector: icon-first, no descriptive copy. */
#v7App #generateLayer .v7-style-modal-body{
  display:grid!important;
  grid-template-columns:minmax(260px,.92fr) minmax(330px,1.08fr)!important;
  gap:16px!important;
}
#v7App #generateLayer .v7-style-icon-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:10px!important;
  align-content:start!important;
}
#v7App #generateLayer .v7-style-icon-grid .style-choice{
  min-height:116px!important;
  padding:14px 10px!important;
  display:grid!important;
  place-items:center!important;
  align-content:center!important;
  gap:8px!important;
  border:1px solid #e8dfd7!important;
  border-radius:15px!important;
  background:#fff!important;
  color:#746960!important;
}
#v7App #generateLayer .v7-style-icon-grid .style-choice.active{
  border-color:#cda04b!important;
  background:#fffaf0!important;
  color:#946a25!important;
  box-shadow:inset 0 0 0 1px rgba(205,160,75,.16)!important;
}
#v7App #generateLayer .v7-style-icon-grid .style-choice>b{
  font-size:11px!important;
  line-height:1!important;
}
#v7App #generateLayer .v7-style-icon{
  width:48px!important;
  height:48px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:14px!important;
  background:#f6f1ea!important;
}
#v7App #generateLayer .style-choice.active .v7-style-icon{
  background:#f5ead4!important;
}
#v7App #generateLayer .v7-style-icon svg{
  width:30px!important;height:30px!important;
  fill:none!important;stroke:currentColor!important;stroke-width:1.7!important;
  stroke-linecap:round!important;stroke-linejoin:round!important;
}
#v7App #generateLayer .v7-style-icon svg circle,
#v7App #generateLayer .v7-style-icon svg rect{
  fill:none!important;
}
#v7App #generateLayer .v7-prompt-case-panel{
  position:relative!important;
  min-height:242px!important;
  padding:10px!important;
  display:block!important;
  border:1px solid #eee4dc!important;
  border-radius:16px!important;
  background:#fbf7f1!important;
  overflow:hidden!important;
}
#v7App #generateLayer .v7-prompt-case{
  width:100%!important;
  height:220px!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
  border-radius:12px!important;
  background:#f7f1e9!important;
}
#v7App #generateLayer .v7-prompt-case svg{
  width:100%!important;height:100%!important;display:block!important;
}
#v7App #generateLayer .v7-prompt-edit-icon{
  position:absolute!important;
  right:16px!important;
  bottom:16px!important;
  width:34px!important;
  height:34px!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid rgba(83,62,47,.14)!important;
  border-radius:10px!important;
  background:rgba(255,253,249,.94)!important;
  color:#6e6258!important;
  font-size:14px!important;
  box-shadow:0 6px 18px rgba(70,50,35,.08)!important;
}
@media(max-width:700px){
  #v7App #generateLayer .v7-style-modal-body{
    grid-template-columns:1fr!important;
    gap:10px!important;
  }
  #v7App #generateLayer .v7-style-icon-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:6px!important;
  }
  #v7App #generateLayer .v7-style-icon-grid .style-choice{
    min-height:76px!important;padding:8px 4px!important;gap:5px!important;
  }
  #v7App #generateLayer .v7-style-icon{width:34px!important;height:34px!important;border-radius:10px!important}
  #v7App #generateLayer .v7-style-icon svg{width:22px!important;height:22px!important}
  #v7App #generateLayer .v7-prompt-case-panel{min-height:178px!important;padding:7px!important}
  #v7App #generateLayer .v7-prompt-case{height:164px!important}
}

/* Workspace logo = same pixel-dot identity as the home header. */
#v7App .workspace-home-btn{
  display:grid!important;
  place-items:center!important;
  padding:0!important;
}
#v7App .workspace-brand-mark{
  width:32px!important;height:32px!important;
  display:grid!important;
  grid-template-columns:repeat(5,4px)!important;
  grid-auto-rows:4px!important;
  gap:2px!important;
  place-content:center!important;
  border-radius:10px!important;
  background:#fff1f6!important;
}
#v7App .workspace-brand-mark i{
  width:4px!important;height:4px!important;border-radius:50%!important;background:#f36ba8!important;
}
#v7App .workspace-brand-mark i:nth-child(3n){background:#80d3b2!important}
#v7App .workspace-mode-icon{
  width:21px!important;height:21px!important;
  fill:none!important;stroke:currentColor!important;stroke-width:1.55!important;
  stroke-linecap:round!important;stroke-linejoin:round!important;
}

/* =========================================================
   v10.34.6 · RECOGNITION USABILITY AUDIT FIXES
   Algorithm is unchanged; these are only UI/trigger fixes.
   ========================================================= */

#v7App #importImageStage,
#v7App .import-info-preview-stage{
  touch-action:none!important;
  overscroll-behavior:contain!important;
}
#v7App #importImageStage.is-panning,
#v7App .import-info-preview-stage.is-panning{cursor:grabbing!important}

/* Keep all calibration points comfortably inside the visual viewport. */
#v7App #importImageMedia,
#v7App #importInfoPreviewMedia{
  border-radius:8px!important;
}

/* Bigger hit target for corner handles without making the visual dot huge. */
#v7App #importCornerPoints .corner-point{
  width:18px!important;height:18px!important;
  margin:-9px 0 0 -9px!important;
  z-index:46!important;
  touch-action:none!important;
  overflow:visible!important;
  box-shadow:0 2px 8px rgba(109,73,28,.28)!important;
}
#v7App #importCornerPoints .corner-point::before{
  content:""!important;
  position:absolute!important;
  inset:-13px!important;
  border-radius:50%!important;
}
#v7App #importSampleBox{
  min-width:16px!important;
  min-height:16px!important;
  touch-action:none!important;
  z-index:47!important;
}
#v7App #importSampleResize{
  width:30px!important;height:30px!important;
  right:-15px!important;bottom:-15px!important;
  touch-action:none!important;
}

/* Explicit zoom controls, especially for mobile. */
#v7App .v7-import-zoom{
  position:absolute!important;
  right:12px!important;
  bottom:12px!important;
  z-index:55!important;
  display:flex!important;
  align-items:center!important;
  gap:3px!important;
  padding:4px!important;
  border:1px solid rgba(83,62,47,.14)!important;
  border-radius:11px!important;
  background:rgba(255,253,249,.95)!important;
  box-shadow:0 8px 20px rgba(60,45,34,.10)!important;
}
#v7App .v7-import-zoom button{
  height:29px!important;min-width:29px!important;padding:0 7px!important;
  border:0!important;border-radius:8px!important;background:transparent!important;
  color:#66594f!important;font-size:10px!important;font-weight:900!important;
}
#v7App .v7-import-zoom button:hover{background:#f5eee6!important}
#v7App .v7-import-zoom b{
  min-width:40px!important;text-align:center!important;color:#6b5e54!important;font-size:9px!important;
}
@media(max-width:700px){
  #v7App .v7-import-zoom{
    right:8px!important;bottom:8px!important;padding:3px!important;
  }
  #v7App .v7-import-zoom button{height:27px!important;min-width:27px!important;padding:0 5px!important}
  #v7App .v7-import-zoom b{min-width:34px!important;font-size:8.5px!important}
  #v7App #importCornerPoints .corner-point::before{inset:-16px!important}
  #v7App #importSampleResize{width:36px!important;height:36px!important;right:-18px!important;bottom:-18px!important}
}


/* =========================================================
   v10.34.7 · RECOGNITION CALIBRATION / UI CLEANUP
   ========================================================= */

/* Removed copy should never reserve any height if an old cached DOM survives. */
#v7App #importHelpTip{display:none!important}

/* Recognized-color code must stay inside the swatch. */
#v7App .import-recognized-colors{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:7px!important;
}
#v7App .import-rec-color{
  min-width:0!important;
  overflow:hidden!important;
  padding:7px 3px 6px!important;
  gap:5px!important;
}
#v7App .import-rec-color i{
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  min-height:34px!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
  border-radius:50%!important;
  padding:0!important;
  margin:0!important;
  font-style:normal!important;
  font-family:Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif!important;
  font-size:9px!important;
  font-weight:950!important;
  line-height:1!important;
  letter-spacing:-.04em!important;
  white-space:nowrap!important;
  text-align:center!important;
  text-overflow:clip!important;
}
#v7App .import-rec-color b{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  text-align:center!important;
  font-size:7px!important;
  font-weight:850!important;
  line-height:1.1!important;
}

/* 5×5 means five cells in each direction, not a forced visual square. */
#v7App #importSampleBox{
  min-width:16px!important;
  min-height:16px!important;
  max-width:none!important;
  max-height:none!important;
}

/* Home account card: name first, quota as a small secondary pill. */
#v7App .site-header .user{
  min-width:138px!important;
  max-width:228px!important;
  min-height:48px!important;
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
  padding:6px 11px 6px 7px!important;
  overflow:hidden!important;
  border:1px solid rgba(83,62,47,.10)!important;
  border-radius:16px!important;
  background:#fff!important;
  box-shadow:0 4px 14px rgba(63,48,38,.045)!important;
}
#v7App .site-header .avatar{
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  flex:0 0 34px!important;
  overflow:hidden!important;
  border:1px solid rgba(83,62,47,.08)!important;
  border-radius:50%!important;
  background-color:#f4eadb!important;
  color:#66574c!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  font-size:10px!important;
  font-weight:950!important;
}
#v7App .site-header .user-copy{
  min-width:0!important;
  display:grid!important;
  justify-items:start!important;
  align-content:center!important;
  gap:3px!important;
  text-align:left!important;
  line-height:1!important;
}
#v7App .site-header .user-copy b{
  display:block!important;
  max-width:150px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:#3d342e!important;
  font-size:11px!important;
  font-weight:950!important;
  line-height:1.1!important;
  letter-spacing:0!important;
}
#v7App .site-header .user-copy small{
  display:inline-flex!important;
  width:max-content!important;
  max-width:145px!important;
  align-items:center!important;
  padding:3px 7px!important;
  overflow:hidden!important;
  border-radius:999px!important;
  background:#f6efe5!important;
  color:#9a7441!important;
  font-size:7.5px!important;
  font-weight:850!important;
  line-height:1!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
  font-variant-numeric:tabular-nums!important;
}

@media(max-width:700px){
  #v7App .site-header .user{
    min-width:122px!important;
    max-width:190px!important;
    min-height:44px!important;
    padding:5px 9px 5px 6px!important;
    gap:7px!important;
  }
  #v7App .site-header .avatar{
    width:31px!important;height:31px!important;min-width:31px!important;flex-basis:31px!important;
  }
  #v7App .site-header .user-copy b{font-size:10px!important;max-width:120px!important}
  #v7App .site-header .user-copy small{font-size:7px!important;max-width:118px!important}
  #v7App .import-rec-color i{
    width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;font-size:8.5px!important;
  }
}


/* =========================================================
   v10.34.8 · REWRITTEN 5×5 RECOGNITION INTERACTION
   ========================================================= */

/* Primary calibration is 5×5. */
#v7App #importCornerConfirm[hidden]{display:none!important}

/* Four corner UI is now black and reserved for fallback / review. */
#v7App #importCornerPoints .corner-point{
  width:18px!important;
  height:18px!important;
  margin:-9px 0 0 -9px!important;
  border:3px solid #fff!important;
  background:#171717!important;
  box-shadow:0 3px 11px rgba(0,0,0,.34)!important;
  z-index:66!important;
  cursor:grab!important;
  touch-action:none!important;
}
#v7App #importCornerPoints .corner-point.dragging{cursor:grabbing!important;transform:scale(1.08)!important}
#v7App #importCornerPoints .corner-point::before{
  content:""!important;
  position:absolute!important;
  inset:-16px!important;
  border-radius:50%!important;
}
#v7App #importCornerPoints.review-corners .corner-hint{
  display:none!important;
}
#v7App #importCornerPoints.review-corners .corner-point{
  background:#111!important;
}

/* Actual image always has enough empty room around it for x=0/y=0 handles. */
#v7App #importImageStage{
  overflow:hidden!important;
  touch-action:none!important;
}
#v7App #importCornerPoints{
  inset:0!important;
  overflow:visible!important;
  pointer-events:none!important;
}
#v7App #importCornerPoints .corner-point{
  pointer-events:auto!important;
}

/* 5×5 snap dots: black points indicate the dark-line snap behavior. */
#v7App #importSampleBox{
  overflow:visible!important;
  touch-action:none!important;
}
#v7App .sample-snap-dot{
  position:absolute!important;
  width:7px!important;height:7px!important;
  margin:-3.5px 0 0 -3.5px!important;
  border:1.5px solid #fff!important;
  border-radius:50%!important;
  background:#171717!important;
  box-shadow:0 1px 4px rgba(0,0,0,.28)!important;
  pointer-events:none!important;
  opacity:.72!important;
}
#v7App .sample-snap-tl{left:0!important;top:0!important}
#v7App .sample-snap-tr{left:100%!important;top:0!important}
#v7App .sample-snap-bl{left:0!important;top:100%!important}
#v7App .sample-snap-br{left:100%!important;top:100%!important}
#v7App #importSampleBox.snap-active .sample-snap-dot{
  opacity:1!important;
  transform:scale(1.16)!important;
}

/* Resize handle is still easy to grab on phone. */
#v7App #importSampleResize{
  width:34px!important;height:34px!important;
  right:-17px!important;bottom:-17px!important;
  border-radius:50%!important;
  touch-action:none!important;
}

/* Calibration text must not imply a square 5×5. */
#v7App #importSampleBox .sample-label{
  max-width:150px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

/* Review grid canvas must never steal pointer events from black corner handles. */
#v7App #v7ImportGridCanvas{
  pointer-events:none!important;
}

/* Mobile: increase touch hit area without enlarging the visible black point. */
@media(max-width:700px){
  #v7App #importCornerPoints .corner-point::before{inset:-19px!important}
  #v7App #importSampleResize{
    width:40px!important;height:40px!important;
    right:-20px!important;bottom:-20px!important;
  }
}


/* v10.34.9 · pointer anchored zoom */
#v7App #importImageStage,
#v7App .import-info-preview-stage{
  cursor:crosshair!important;
}
#v7App #importImageStage.is-panning,
#v7App .import-info-preview-stage.is-panning{
  cursor:grabbing!important;
}
#v7App #importImageStage .sample-box,
#v7App #importImageStage .corner-point{
  cursor:grab!important;
}


/* v10.35.0 · strict recognition routing */
#v7App #importCalibrateLayer[data-import-mode="known"] #importCornerPoints,
#v7App #importCalibrateLayer[data-import-mode="known"] #importCornerConfirm{
  display:none!important;
}
#v7App #importCornerPoints:not(.active){
  display:none!important;
}


/* =========================================================
   v10.35.1 · AUTO / FOUR-POINT PARALLEL ENTRY
   ========================================================= */
#v7App .v7-import-route-footer{
  align-items:center!important;
  gap:12px!important;
}
#v7App .v7-import-route-alt{
  display:grid!important;
  gap:6px!important;
  min-width:210px!important;
}
#v7App .v7-import-route-alt>span{
  color:#948a82!important;
  font-size:8px!important;
  font-weight:800!important;
}
#v7App .v7-import-route-buttons{
  display:flex!important;
  gap:7px!important;
}
#v7App .import-route-button{
  min-width:92px!important;
  height:34px!important;
  padding:0 12px!important;
  border:1px solid #e5dbd2!important;
  border-radius:10px!important;
  background:#fff!important;
  color:#5f554d!important;
  font-size:9px!important;
  font-weight:900!important;
  white-space:nowrap!important;
}
#v7App .import-route-button.auto{
  border-color:#d9b36d!important;
  background:#fffaf1!important;
  color:#a26b18!important;
}
#v7App .import-route-button:hover{
  transform:translateY(-1px)!important;
  box-shadow:0 5px 14px rgba(73,52,37,.07)!important;
}
#v7App .import-route-button:disabled{
  opacity:.55!important;
  transform:none!important;
  box-shadow:none!important;
}
#v7App .v7-import-route-footer .import-info-note{
  flex:1 1 auto!important;
  min-width:170px!important;
}
@media(max-width:700px){
  #v7App .v7-import-route-footer{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:9px!important;
  }
  #v7App .v7-import-route-alt{
    min-width:0!important;
    width:100%!important;
  }
  #v7App .v7-import-route-buttons{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
  }
  #v7App .import-route-button{
    width:100%!important;
    min-width:0!important;
  }
  #v7App .v7-import-route-footer .import-confirm{
    width:100%!important;
  }
}


/* =========================================================
   v10.35.2 · VIEWPORT FULL AUDIT
   JS is the single owner of image/grid coordinates.
   ========================================================= */
#v7App #importImageMedia,
#v7App #importInfoPreviewMedia{
  transform:none!important;
  box-sizing:border-box!important;
}


/* v10.35.3 · Dynamic recognition geometry belongs to JS.
   Do not set left/top/inset !important on #importImageMedia. */
#v7App #importImageMedia{
  right:auto!important;
  bottom:auto!important;
}


/* =========================================================
   v10.35.5 · EFFECT WORKSPACE FULL HEIGHT
   ========================================================= */

/*
  Legacy core CSS still contains:
    .effect-stage { height:min(58vh,650px) }

  V7 desktop effect mode must own the full available editor height.
*/
#v7App #desktopEffect{
  min-height:0!important;
  grid-template-rows:minmax(0,1fr)!important;
  align-items:stretch!important;
  overflow:hidden!important;
}

#v7App #desktopEffect>.effect-stage{
  position:relative!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  align-self:stretch!important;
  justify-self:stretch!important;
  display:block!important;
  background:#937456!important;
  border-radius:20px!important;
  box-shadow:none!important;
}

/* The decorative old effect-frame must not constrain the real render surface. */
#v7App #desktopEffect>.effect-stage>.effect-frame{
  display:none!important;
}

/* Real functional effect stage fills the entire left workspace. */
#v7App #desktopEffect>.effect-stage>#effectStage.v7-core-effect-stage{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:20px!important;
  box-shadow:none!important;
}

/* 2D / 3D artwork uses almost all available stage while preserving ratio. */
#v7App #desktopEffect #effectCanvas,
#v7App #desktopEffect #threeDCanvas{
  width:auto!important;
  height:auto!important;
  max-width:97%!important;
  max-height:97%!important;
  object-fit:contain!important;
  margin:auto!important;
}

/* Right controls share the same full-height row. */
#v7App #desktopEffect>.effect-panel{
  height:100%!important;
  min-height:0!important;
  max-height:100%!important;
  box-sizing:border-box!important;
  overflow-y:auto!important;
  align-self:stretch!important;
}

/* Use dynamic viewport height for the desktop shell. */
@media(min-width:1119px){
  #v7App #desktopEffect{
    height:calc(100dvh - 74px)!important;
    max-height:calc(100dvh - 74px)!important;
  }
}
@media(min-width:701px) and (max-width:1118px){
  #v7App #desktopEffect{
    height:calc(100dvh - 64px)!important;
    max-height:calc(100dvh - 64px)!important;
  }
}


/* v10.35.9 · hidden source-profile router */
#v7App .internal-processing-mode,
#v7App #processingModeHint.internal-processing-mode{
  display:none!important;
}


/* =========================================================
   v10.36.0 · MOBILE WORKSPACE / EFFECT / SAFE VIEWPORT FIX
   ========================================================= */
@media(max-width:700px){
  html,body{overscroll-behavior:none!important}

  body.editor-open{
    width:100%!important;
    height:var(--v7-mobile-vh,100dvh)!important;
    min-height:0!important;
    overflow:hidden!important;
  }

  #v7App #editorView.active{
    width:100%!important;
    height:var(--v7-mobile-vh,100dvh)!important;
    min-height:0!important;
    max-height:var(--v7-mobile-vh,100dvh)!important;
    overflow:hidden!important;
  }

  #v7App #mobileEditor{
    width:100%!important;
    height:var(--v7-mobile-vh,100dvh)!important;
    min-height:0!important;
    max-height:var(--v7-mobile-vh,100dvh)!important;
    overflow:hidden!important;
    overscroll-behavior:none!important;
  }

  #v7App .m-canvas{flex:1 1 0!important;min-height:180px!important}
  #v7App #mViewport{min-height:0!important;overflow:hidden!important}

  #v7App #mViewport>#effectStage.v7-core-effect-stage:not([aria-hidden="true"]){
    position:absolute!important;
    inset:0!important;
    display:grid!important;
    place-items:center!important;
    width:100%!important;
    height:100%!important;
    min-width:0!important;
    min-height:0!important;
    opacity:1!important;
    visibility:visible!important;
    z-index:12!important;
  }

  #v7App #mViewport>#effectStage.v7-core-effect-stage[aria-hidden="true"]{
    display:none!important;
  }

  #v7App #mViewport>#effectStage #effectCanvas:not([hidden]),
  #v7App #mViewport>#effectStage #threeDCanvas:not([hidden]){
    display:block!important;
    width:auto!important;
    height:auto!important;
    max-width:96%!important;
    max-height:96%!important;
    margin:auto!important;
    object-fit:contain!important;
  }

  #v7App .m-bottom{
    position:relative!important;
    z-index:90!important;
    flex:0 0 calc(64px + max(env(safe-area-inset-bottom),6px))!important;
    min-height:calc(64px + max(env(safe-area-inset-bottom),6px))!important;
    padding-bottom:max(env(safe-area-inset-bottom),6px)!important;
    background:#fffdfa!important;
    touch-action:manipulation!important;
    isolation:isolate!important;
  }

  #v7App .m-bottom button{
    position:relative!important;
    z-index:2!important;
    min-height:56px!important;
    pointer-events:auto!important;
    touch-action:manipulation!important;
  }

  #v7App .m-effect-options{
    flex:0 0 auto!important;
    max-height:190px!important;
    min-height:0!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
  }

  #v7App .m-source-pop{width:150px!important}
  #v7App .m-source-view-tabs{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:4px!important;
    margin:0 0 6px!important;
    padding:2px!important;
    border-radius:9px!important;
    background:#f1ece5!important;
  }

  #v7App .m-source-view-tabs button{
    height:26px!important;
    border:0!important;
    border-radius:7px!important;
    background:transparent!important;
    color:#75695f!important;
    font-size:8px!important;
    font-weight:900!important;
  }

  #v7App .m-source-view-tabs button.active{
    background:#6f835f!important;
    color:#fff!important;
  }

  #v7App #mobileSourceThumb{height:112px!important}
}


/* =========================================================
   v10.36.1 · MOBILE GENERATION MODAL VISUAL-VIEWPORT FIX
   ========================================================= */
@media(max-width:700px){

  /*
    Android browser bars can make 92vh taller than the actually visible
    viewport. #generateLayer now uses the same --v7-mobile-vh that is
    synchronized from window.visualViewport in v7-adapter.js.
  */
  #v7App #generateLayer.layer{
    top:0!important;
    right:0!important;
    bottom:auto!important;
    left:0!important;
    width:100%!important;
    height:var(--v7-mobile-vh,100dvh)!important;
    max-height:var(--v7-mobile-vh,100dvh)!important;
    padding:0!important;
    align-items:flex-end!important;
    overflow:hidden!important;
    overscroll-behavior:none!important;
    touch-action:none!important;
  }

  #v7App #generateLayer .generate-dialog{
    position:relative!important;
    width:100%!important;
    height:auto!important;
    max-height:calc(var(--v7-mobile-vh,100dvh) - 4px)!important;
    margin:0!important;
    padding:0!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
    touch-action:pan-y!important;
    scroll-behavior:smooth!important;
    border-radius:22px 22px 0 0!important;
    box-sizing:border-box!important;
    padding-bottom:max(env(safe-area-inset-bottom),8px)!important;
  }

  /* Keep the close button/title available while the content scrolls. */
  #v7App #generateLayer .dialog-head{
    position:sticky!important;
    top:0!important;
    z-index:35!important;
    margin:0!important;
    padding:16px 16px 12px!important;
    background:rgba(255,255,255,.97)!important;
    backdrop-filter:blur(12px)!important;
    -webkit-backdrop-filter:blur(12px)!important;
  }

  #v7App #generateLayer .dialog-head h3{
    font-size:18px!important;
    line-height:1.2!important;
  }

  #v7App #generateLayer .dialog-head p{
    margin-top:6px!important;
    font-size:10px!important;
    line-height:1.45!important;
  }

  #v7App #generateLayer .close-btn{
    flex:0 0 38px!important;
    width:38px!important;
    height:38px!important;
  }

  /* Compress only the mobile presentation — functionality is unchanged. */
  #v7App #generateLayer .v7-style-modal-body{
    padding:12px 14px 10px!important;
    gap:9px!important;
  }

  #v7App #generateLayer .v7-style-icon-grid{
    gap:6px!important;
  }

  #v7App #generateLayer .v7-style-icon-grid .style-choice{
    min-height:68px!important;
    padding:6px 3px!important;
  }

  #v7App #generateLayer .v7-style-icon{
    width:31px!important;
    height:31px!important;
  }

  #v7App #generateLayer .v7-style-icon svg{
    width:20px!important;
    height:20px!important;
  }

  #v7App #generateLayer .v7-style-icon-grid .style-choice>b{
    font-size:10px!important;
  }

  #v7App #generateLayer .v7-prompt-case-panel{
    min-height:154px!important;
    padding:7px!important;
  }

  #v7App #generateLayer .v7-prompt-case{
    height:140px!important;
  }

  #v7App #generateLayer .v7-prompt-edit-icon{
    right:13px!important;
    bottom:13px!important;
    width:34px!important;
    height:34px!important;
  }

  #v7App #generateLayer .generation-settings{
    margin:0 14px 10px!important;
    padding:12px!important;
  }

  #v7App #generateLayer .settings-title{
    margin-bottom:9px!important;
  }

  #v7App #generateLayer .settings-grid{
    grid-template-columns:1fr!important;
    gap:8px!important;
  }

  #v7App #generateLayer .setting select{
    min-height:42px!important;
    font-size:11px!important;
  }

  /*
    The important part:
    both actions always remain reachable.
    Even on a short Android viewport, the user does not need to reach
    below the browser chrome to choose "直接生成图纸".
  */
  #v7App #generateLayer .generation-bottom{
    position:sticky!important;
    bottom:0!important;
    z-index:40!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
    margin:0!important;
    padding:10px 14px calc(10px + max(env(safe-area-inset-bottom),0px))!important;
    border-top:1px solid #eee7df!important;
    background:rgba(255,253,249,.97)!important;
    box-shadow:0 -10px 26px rgba(70,50,35,.08)!important;
    backdrop-filter:blur(12px)!important;
    -webkit-backdrop-filter:blur(12px)!important;
  }

  #v7App #generateLayer .generation-summary{
    width:100%!important;
    font-size:8.5px!important;
    line-height:1.45!important;
  }

  #v7App #generateLayer .generate-btn,
  #v7App #generateLayer .v7-direct-generate{
    width:100%!important;
    min-width:0!important;
    min-height:48px!important;
    margin:0!important;
    border-radius:11px!important;
    font-size:11px!important;
    touch-action:manipulation!important;
    pointer-events:auto!important;
  }

  #v7App #generateLayer .v7-direct-generate{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border:1px solid #e6ddd5!important;
    background:#fff!important;
    color:#654f41!important;
    font-weight:900!important;
  }

  #v7App #generateLayer .v7-generate-status{
    min-height:0!important;
    margin:0!important;
  }

  /* Leave breathing room before the sticky action area. */
  #v7App #generateLayer .generation-settings{
    scroll-margin-bottom:150px!important;
  }
}


/* =========================================================
   v10.36.2 · MOBILE TOOLS + RESIZABLE LOWER FUNCTION SHEET
   ========================================================= */
@media(max-width:700px){

  /* Mobile toolbar buttons are actual interactive controls. */
  #v7App .m-tools>button{
    position:relative!important;
    z-index:4!important;
    pointer-events:auto!important;
    touch-action:manipulation!important;
    -webkit-tap-highlight-color:transparent!important;
  }

  #v7App .m-tools>button:active{
    transform:scale(.96)!important;
  }

  /*
    One resizable sheet owns column/color controls, used colors and full palette.
    The canvas grows/shrinks automatically because mobileEditor is a flex column.
  */
  #v7App #mFunctionSheet.m-function-sheet{
    --m-function-sheet-height:254px;
    position:relative!important;
    z-index:55!important;
    flex:0 0 var(--m-function-sheet-height)!important;
    width:100%!important;
    height:var(--m-function-sheet-height)!important;
    min-height:34px!important;
    max-height:58vh!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
    background:#fff!important;
    border-top:1px solid #e9e1d8!important;
    box-shadow:0 -8px 24px rgba(67,49,36,.07)!important;
    transition:height .16s ease,flex-basis .16s ease!important;
  }

  #v7App #mFunctionSheet.dragging,
  body.mobile-sheet-dragging #v7App #mFunctionSheet{
    transition:none!important;
  }

  body.mobile-sheet-dragging{
    user-select:none!important;
    -webkit-user-select:none!important;
    touch-action:none!important;
  }

  #v7App #mFunctionSheet.collapsed{
    flex-basis:34px!important;
    height:34px!important;
  }

  #v7App #mFunctionSheet.collapsed .m-function-sheet-body{
    display:none!important;
  }

  #v7App .m-sheet-resizer{
    position:relative!important;
    z-index:4!important;
    flex:0 0 34px!important;
    min-height:34px!important;
    display:grid!important;
    grid-template-columns:42px 1fr 42px!important;
    align-items:center!important;
    padding:0 8px!important;
    border-bottom:1px solid #eee7df!important;
    background:#fffdfa!important;
    cursor:ns-resize!important;
    touch-action:none!important;
  }

  #v7App .m-sheet-resizer.dragging{
    background:#f8f4ee!important;
  }

  #v7App .m-sheet-grip{
    justify-self:center!important;
    width:30px!important;
    height:4px!important;
    border-radius:999px!important;
    background:#c9c0b7!important;
  }

  #v7App .m-sheet-title{
    justify-self:center!important;
    color:#8c8178!important;
    font-size:8px!important;
    font-weight:900!important;
    letter-spacing:.02em!important;
    pointer-events:none!important;
  }

  #v7App #mFunctionSheetToggle{
    justify-self:end!important;
    width:30px!important;
    height:26px!important;
    display:grid!important;
    place-items:center!important;
    border:1px solid #e6ddd4!important;
    border-radius:9px!important;
    background:#fff!important;
    color:#75695f!important;
    font-size:15px!important;
    font-weight:900!important;
    pointer-events:auto!important;
    touch-action:manipulation!important;
  }

  #v7App .m-function-sheet-body{
    flex:1 1 auto!important;
    min-height:0!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
  }

  /* Existing controls keep their functions, but palette receives remaining height. */
  #v7App #mFunctionSheet .m-adjust{
    flex:0 0 56px!important;
    min-height:56px!important;
  }

  #v7App #mFunctionSheet .m-used-fixed{
    flex:0 0 66px!important;
    min-height:66px!important;
  }

  #v7App #mFunctionSheet .m-palette-zone{
    flex:1 1 auto!important;
    min-height:0!important;
    height:auto!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior:contain!important;
  }

  /*
    Effect mode remains simple: the resizable drawing sheet disappears and the
    existing effect options are shown, preserving v10.36.0 behavior.
  */
  #v7App #mobileEditor.v7-effect-mode #mFunctionSheet,
  #v7App #mobileEditor.effect-mode #mFunctionSheet{
    display:none!important;
  }

  /* Fixed footer stays independent from the sheet and always clickable. */
  #v7App .m-bottom{
    z-index:100!important;
  }
}

/* Very short screens start with a little less vertical pressure. */
@media(max-width:700px) and (max-height:700px){
  #v7App #mFunctionSheet.m-function-sheet{
    --m-function-sheet-height:220px;
  }
}


/* =========================================================
   v10.36.12 mobile editor: canvas-first compact controls
   ========================================================= */
@media(max-width:700px){
  #v7App #mobileEditor .m-top{
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    min-height:48px!important;
    padding-right:10px!important;
  }
  #v7App #mobileEditor .m-title{
    min-width:0!important;
    flex:1 1 auto!important;
  }
  #v7App #mobileEditor .m-color-param-toggle{
    flex:0 0 auto!important;
    display:flex!important;
    align-items:center!important;
    gap:5px!important;
    min-height:30px!important;
    padding:0 10px!important;
    border:1px solid rgba(105,83,65,.13)!important;
    border-radius:10px!important;
    background:#f7f1e8!important;
    color:#66584d!important;
    font-size:9px!important;
    font-weight:900!important;
    white-space:nowrap!important;
    touch-action:manipulation!important;
  }
  #v7App #mobileEditor .m-color-param-toggle b{font-size:11px!important}

  /* Old draggable "颜色与参数" bar is no longer part of the mobile layout. */
  #v7App #mFunctionSheet .m-sheet-resizer{display:none!important}

  #v7App #mFunctionSheet.m-function-sheet,
  #v7App #mFunctionSheet.compact-mobile-sheet{
    --m-function-sheet-height:auto!important;
    flex:0 0 auto!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
    border-top:1px solid rgba(93,72,59,.08)!important;
    background:#fffdfa!important;
  }
  #v7App #mFunctionSheet .m-function-sheet-body{
    display:flex!important;
    flex-direction:column!important;
    overflow:visible!important;
    min-height:0!important;
  }

  /* Parameters live behind the header control beside 拼豆图纸. */
  #v7App #mFunctionSheet .m-adjust{
    flex:0 0 auto!important;
    min-height:0!important;
    height:58px!important;
    padding:6px 12px!important;
    overflow:hidden!important;
    opacity:1!important;
    transition:height .16s ease,padding .16s ease,opacity .12s ease!important;
  }
  #v7App #mFunctionSheet .m-adjust.mobile-params-collapsed{
    height:0!important;
    padding-top:0!important;
    padding-bottom:0!important;
    opacity:0!important;
    pointer-events:none!important;
  }

  /* Both color areas only expose a local strip by default. */
  #v7App #mFunctionSheet .m-used-fixed{
    flex:0 0 auto!important;
    min-height:0!important;
    height:72px!important;
    padding:5px 10px 7px!important;
    overflow:hidden!important;
    border-top:1px solid rgba(93,72,59,.07)!important;
  }
  #v7App #mFunctionSheet .m-palette-zone{
    flex:0 0 auto!important;
    min-height:0!important;
    height:98px!important;
    padding:5px 10px 7px!important;
    overflow:hidden!important;
    border-top:1px solid rgba(93,72,59,.07)!important;
  }
  #v7App #mFunctionSheet .m-used-fixed.mobile-section-collapsed,
  #v7App #mFunctionSheet .m-palette-zone.mobile-section-collapsed{
    height:31px!important;
    padding-bottom:0!important;
  }
  #v7App #mFunctionSheet .mobile-section-collapsed #mobileUsed,
  #v7App #mFunctionSheet .mobile-section-collapsed #mobilePalette{
    display:none!important;
  }

  #v7App #mFunctionSheet .m-color-head,
  #v7App #mFunctionSheet .m-palette-head{
    min-height:25px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto auto!important;
    align-items:center!important;
    gap:7px!important;
  }
  #v7App #mFunctionSheet .m-palette-head{
    grid-template-columns:auto minmax(0,1fr) auto!important;
  }
  #v7App #mFunctionSheet .m-section-toggle{
    width:28px!important;
    height:24px!important;
    display:grid!important;
    place-items:center!important;
    border:0!important;
    border-radius:8px!important;
    background:#f5efe7!important;
    color:#75685e!important;
    font-size:12px!important;
    font-weight:900!important;
    touch-action:manipulation!important;
  }

  #v7App #mobileUsed{
    max-height:40px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
  }
  #v7App #mobilePalette{
    max-height:60px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:7px!important;
    -webkit-overflow-scrolling:touch!important;
  }
  #v7App #mobilePalette>.color-card{
    flex:0 0 58px!important;
  }

  /* True floating actions: they no longer consume document/layout height. */
  #v7App #mobileEditor .m-bottom{
    position:fixed!important;
    left:max(10px,env(safe-area-inset-left))!important;
    right:max(10px,env(safe-area-inset-right))!important;
    bottom:max(10px,env(safe-area-inset-bottom))!important;
    z-index:140!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
    height:54px!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    pointer-events:none!important;
  }
  #v7App #mobileEditor .m-bottom button{
    pointer-events:auto!important;
    min-height:52px!important;
    border:1px solid rgba(78,59,47,.12)!important;
    border-radius:15px!important;
    box-shadow:0 8px 26px rgba(66,48,37,.16)!important;
    background:rgba(255,253,250,.96)!important;
    backdrop-filter:blur(12px)!important;
    -webkit-backdrop-filter:blur(12px)!important;
  }
  #v7App #mobileEditor .m-bottom button.primary{
    background:#6f513e!important;
    color:#fff!important;
  }

  /* Reserve only a small safe zone so the floating actions do not cover colors. */
  #v7App #mobileEditor{
    padding-bottom:72px!important;
  }

  /* Effect mode keeps its own controls, while the floating actions remain. */
  #v7App #mobileEditor.v7-effect-mode #mFunctionSheet,
  #v7App #mobileEditor.effect-mode #mFunctionSheet{
    display:none!important;
  }
}


/* =========================================================
   v10.36.14 · compact mobile toolbar + side actions
   Smaller controls preserve canvas space and avoid overlap on narrow phones.
   ========================================================= */
@media(max-width:700px){
  #v7App #mobileEditor .m-top{
    flex:0 0 44px!important;
    min-height:44px!important;
    gap:6px!important;
    padding:3px 6px!important;
  }
  #v7App #mobileEditor .m-home{
    width:30px!important;
    height:30px!important;
    border-radius:9px!important;
  }
  #v7App #mobileEditor .workspace-brand-mark{
    width:27px!important;
    height:27px!important;
    grid-template-columns:repeat(5,3px)!important;
    grid-auto-rows:3px!important;
    gap:2px!important;
    border-radius:8px!important;
  }
  #v7App #mobileEditor .workspace-brand-mark i{
    width:3px!important;
    height:3px!important;
  }
  #v7App #mobileEditor .m-title b{font-size:11px!important;line-height:1.05!important}
  #v7App #mobileEditor .m-title span{font-size:5.5px!important;line-height:1.05!important}
  #v7App #mobileEditor .m-color-param-toggle{
    min-height:27px!important;
    padding:0 8px!important;
    gap:4px!important;
    border-radius:9px!important;
    font-size:8px!important;
  }
  #v7App #mobileEditor .m-color-param-toggle b{font-size:9px!important}

  /* Permanent compact tool strip. Sub-tools scroll instead of colliding. */
  #v7App #mobileEditor .m-tools{
    flex:0 0 48px!important;
    min-height:48px!important;
    gap:2px!important;
    padding:3px 5px!important;
    overflow:hidden!important;
  }
  #v7App #mobileEditor .m-tools>button{
    flex:0 0 36px!important;
    width:36px!important;
    height:41px!important;
    min-width:36px!important;
    padding:1px 0!important;
    border-radius:8px!important;
    gap:0!important;
  }
  #v7App #mobileEditor .m-tools>button span{
    font-size:13px!important;
    line-height:15px!important;
  }
  #v7App #mobileEditor .m-tools>button b{
    font-size:5.5px!important;
    line-height:8px!important;
  }
  #v7App #mobileEditor .m-tool-slot{
    min-width:0!important;
    flex:1 1 auto!important;
    justify-content:flex-start!important;
    gap:2px!important;
    padding-left:4px!important;
    overflow:hidden!important;
  }
  #v7App #mobileEditor .m-tool-slot .v7-subtool-group{
    width:100%!important;
    min-width:0!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:2px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch!important;
  }
  #v7App #mobileEditor .m-tool-slot .v7-subtool-group::-webkit-scrollbar{display:none!important}
  #v7App #mobileEditor .m-tool-slot .v7-subtool-group>span{display:none!important}
  #v7App #mobileEditor .m-tool-slot button{
    flex:0 0 auto!important;
    min-width:27px!important;
    height:27px!important;
    padding:0 4px!important;
    border-radius:7px!important;
    font-size:6px!important;
    line-height:1!important;
    white-space:nowrap!important;
  }

  #v7App #mobileEditor .m-canvas-head{
    flex:0 0 30px!important;
    min-height:30px!important;
    padding:2px 6px!important;
  }
  #v7App #mobileEditor .m-source-btn{height:24px!important;padding:0 8px!important;font-size:6px!important}
  #v7App #mobileEditor .m-zoom{padding:0 3px!important}
  #v7App #mobileEditor .m-zoom button{width:23px!important;height:23px!important;font-size:11px!important}
  #v7App #mobileEditor .m-zoom b{min-width:30px!important;font-size:6px!important}
  #v7App #mobileEditor .m-canvas-action{
    width:32px!important;
    height:30px!important;
    border-radius:9px!important;
    font-size:12px!important;
  }

  /* Current-layer colors get enough height; cards are compact, not clipped. */
  #v7App #mFunctionSheet .m-used-fixed{
    height:86px!important;
    padding:5px 8px 7px!important;
  }
  #v7App #mFunctionSheet .m-palette-zone{
    height:96px!important;
    padding:5px 8px 7px!important;
  }
  #v7App #mFunctionSheet .m-used-fixed.mobile-section-collapsed,
  #v7App #mFunctionSheet .m-palette-zone.mobile-section-collapsed{
    height:30px!important;
  }
  #v7App #mFunctionSheet .m-color-head,
  #v7App #mFunctionSheet .m-palette-head{
    min-height:23px!important;
    gap:5px!important;
  }
  #v7App #mFunctionSheet .m-color-head b,
  #v7App #mFunctionSheet .m-palette-head b{font-size:7.5px!important}
  #v7App #mFunctionSheet .m-color-head span,
  #v7App #mFunctionSheet .m-palette-head span{font-size:5.5px!important}
  #v7App #mFunctionSheet .m-section-toggle{
    width:24px!important;
    height:22px!important;
    border-radius:7px!important;
    font-size:10px!important;
  }
  #v7App #mobileUsed{
    max-height:51px!important;
    gap:5px!important;
    margin-top:3px!important;
  }
  #v7App #mobileUsed>.color-card{
    flex:0 0 54px!important;
    min-height:50px!important;
    height:50px!important;
    gap:2px!important;
    padding:2px!important;
  }
  #v7App #mobileUsed>.color-card .color-dot{
    width:31px!important;
    height:31px!important;
  }
  #v7App #mobileUsed>.color-card b{font-size:6.5px!important}
  #v7App #mobileUsed>.color-card small{display:none!important}

  #v7App #mobilePalette{
    max-height:61px!important;
    gap:5px!important;
  }
  #v7App #mobilePalette>.color-card{
    flex:0 0 54px!important;
    min-height:56px!important;
    height:56px!important;
    gap:2px!important;
    padding:3px!important;
  }
  #v7App #mobilePalette>.color-card .color-dot{
    width:32px!important;
    height:32px!important;
  }
  #v7App #mobilePalette>.color-card b{font-size:6.5px!important}

  /* Effect/export are compact right-side floaters, not a bottom bar. */
  #v7App #mobileEditor .m-bottom{
    position:fixed!important;
    left:auto!important;
    right:max(6px,env(safe-area-inset-right))!important;
    top:44%!important;
    bottom:auto!important;
    transform:translateY(-50%)!important;
    width:46px!important;
    height:auto!important;
    min-height:0!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-auto-rows:44px!important;
    gap:6px!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    pointer-events:none!important;
  }
  #v7App #mobileEditor .m-bottom button{
    width:46px!important;
    height:44px!important;
    min-height:44px!important;
    display:grid!important;
    grid-template-rows:17px 11px!important;
    place-items:center!important;
    align-content:center!important;
    gap:2px!important;
    padding:3px 2px!important;
    border:1px solid rgba(78,59,47,.12)!important;
    border-radius:12px!important;
    box-shadow:0 6px 18px rgba(66,48,37,.14)!important;
    background:rgba(255,253,250,.94)!important;
    backdrop-filter:blur(10px)!important;
    -webkit-backdrop-filter:blur(10px)!important;
    pointer-events:auto!important;
    touch-action:manipulation!important;
  }
  #v7App #mobileEditor .m-bottom button+button{border-left:1px solid rgba(78,59,47,.12)!important}
  #v7App #mobileEditor .m-bottom button span{font-size:13px!important;line-height:16px!important}
  #v7App #mobileEditor .m-bottom button b{
    max-width:42px!important;
    font-size:5.8px!important;
    line-height:1.05!important;
    text-align:center!important;
    white-space:normal!important;
  }
  #v7App #mobileEditor .m-bottom button.primary{background:rgba(111,81,62,.96)!important;color:#fff!important}

  /* Side floaters consume no vertical layout space. */
  #v7App #mobileEditor{padding-bottom:0!important}
}

@media(max-width:360px){
  #v7App #mobileEditor .m-tools>button{flex-basis:33px!important;width:33px!important;min-width:33px!important}
  #v7App #mobileEditor .m-tools>button span{font-size:12px!important}
  #v7App #mobileEditor .m-tool-slot button{min-width:25px!important;padding:0 3px!important;font-size:5.6px!important}
  #v7App #mobileEditor .m-bottom{right:4px!important;width:42px!important}
  #v7App #mobileEditor .m-bottom button{width:42px!important}
}


/* =========================================================
   v10.36.16 · merged mobile topbar + interaction performance UI
   Home + primary tools + color/parameter toggle share one row.
   Secondary tool settings appear only when the active tool needs them.
   ========================================================= */
@media(max-width:700px){
  #v7App #mobileEditor .m-top.m-top-merged{
    flex:0 0 48px!important;
    min-height:48px!important;
    display:flex!important;
    align-items:center!important;
    gap:4px!important;
    padding:3px 5px!important;
    border-bottom:1px solid rgba(93,72,59,.10)!important;
    background:#fffdfa!important;
    overflow:hidden!important;
  }
  #v7App #mobileEditor .m-top-merged .m-home{
    flex:0 0 32px!important;
    width:32px!important;
    height:36px!important;
    padding:0!important;
    background:transparent!important;
    border-radius:9px!important;
  }
  #v7App #mobileEditor .m-top-merged .mobile-home-glyph{
    width:20px!important;height:20px!important;fill:none!important;stroke:currentColor!important;stroke-width:2!important;stroke-linecap:round!important;stroke-linejoin:round!important;
  }
  #v7App #mobileEditor .m-top-merged .m-tools{
    flex:1 1 auto!important;
    min-width:0!important;
    height:42px!important;
    min-height:0!important;
    display:flex!important;
    align-items:stretch!important;
    gap:1px!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    overflow:hidden!important;
  }
  #v7App #mobileEditor .m-top-merged .m-tools>button{
    flex:1 1 0!important;
    width:auto!important;
    min-width:29px!important;
    height:40px!important;
    padding:1px 0!important;
    border-radius:8px!important;
  }
  #v7App #mobileEditor .m-top-merged .m-tools>button span{
    font-size:13px!important;
    line-height:15px!important;
  }
  #v7App #mobileEditor .m-top-merged .m-tools>button b{
    font-size:5.3px!important;
    line-height:7px!important;
  }
  #v7App #mobileEditor .m-top-merged .m-color-param-toggle{
    flex:0 0 auto!important;
    min-height:32px!important;
    height:32px!important;
    padding:0 7px!important;
    margin:0!important;
    font-size:7.2px!important;
    border-radius:9px!important;
  }
  #v7App #mobileEditor .m-mobile-subtools{
    flex:0 0 34px!important;
    min-height:34px!important;
    display:flex!important;
    align-items:center!important;
    padding:3px 6px!important;
    border-bottom:1px solid rgba(93,72,59,.08)!important;
    background:rgba(255,253,250,.97)!important;
    overflow:hidden!important;
  }
  #v7App #mobileEditor .m-mobile-subtools[hidden]{display:none!important}
  #v7App #mobileEditor .m-mobile-subtools .m-tool-slot{
    width:100%!important;
    min-width:0!important;
    flex:1 1 auto!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    padding:0!important;
    border:0!important;
    overflow:hidden!important;
  }
  #v7App #mobileEditor .m-mobile-subtools .m-tool-slot .v7-subtool-group{
    width:100%!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:4px!important;
    overflow-x:auto!important;
    scrollbar-width:none!important;
  }
  #v7App #mobileEditor .m-mobile-subtools .m-tool-slot .v7-subtool-group::-webkit-scrollbar{display:none!important}
  #v7App #mobileEditor .m-mobile-subtools .m-tool-slot .v7-subtool-group>span{display:none!important}
  #v7App #mobileEditor .m-mobile-subtools .m-tool-slot button{
    flex:0 0 auto!important;
    min-width:34px!important;
    height:27px!important;
    padding:0 7px!important;
    border-radius:7px!important;
    font-size:6px!important;
    white-space:nowrap!important;
  }
}
@media(max-width:360px){
  #v7App #mobileEditor .m-top-merged{gap:2px!important;padding-left:3px!important;padding-right:3px!important}
  #v7App #mobileEditor .m-top-merged .m-home{flex-basis:29px!important;width:29px!important}
  #v7App #mobileEditor .m-top-merged .m-tools>button{min-width:26px!important}
  #v7App #mobileEditor .m-top-merged .m-color-param-toggle{padding:0 5px!important;font-size:6.6px!important}
}