/* Acrylic materials calibrated from the Blender renders (assets/blender/*.png, Blender 5.2.3 Cycles on Modal).
   The renders were first used as 9-slice border-images, but at a fractional page scale the browser draws hairline seams
   between the nine pieces (owner, 26.10). The profile of each render is simple (1 px light top edge, 1 px darker bottom
   edge, a short shadow falling down), so it is reproduced here with the measured colours: seam-free at any scale.
   Measured (2× px → CSS px): face = target hex; top edge #FAF9F7 / #505155 / orange #FF6136; shadow alpha .72 at 1 px,
   .5 at 4 px, .27 at 8 px below; .15 above. Active when body.mat-blender. */
body.mat-blender .panel:not(.aiwork) {
  background: #26272B; border-radius: 14px;
  box-shadow: inset 0 1px 0 #505155, inset 0 -1px 0 #333438, inset 0 0 0 1px #2E2F34, 0 -1px 4px rgba(0,0,0,.15), 0 2px 3px rgba(0,0,0,.45), 0 6px 16px rgba(0,0,0,.35);
}
body.mat-blender :is(.tile:not(.hero):not(.grey), .chip.on, .btn.secondary) {
  background: #E9E8E5;
  box-shadow: inset 0 1px 0 #FAF9F7, inset 0 -1px 0 #D9D8D6, inset 1px 0 0 #EDECEA, inset -1px 0 0 #E1E0DD, 0 -1px 3px rgba(0,0,0,.12), 0 2px 3px rgba(0,0,0,.45), 0 6px 14px rgba(0,0,0,.33);
}
body.mat-blender :is(.card:hover, .btn.secondary:hover, .lastc button:hover) { background: #F2F1EE; }
body.mat-blender :is(.tile.hero, .row.on, .stepl.cur, .om-final) {
  background: linear-gradient(180deg, #F9F8F6 0, #E9E8E5 3px, #E9E8E5 calc(100% - 5px), #C7C6C4 100%);
  box-shadow: inset 0 1px 0 #FCFBFA, inset 1px 0 0 #D8D7D5, inset -1px 0 0 #D8D7D5, 0 -1px 4px rgba(0,0,0,.16), 0 3px 4px rgba(0,0,0,.5), 0 10px 24px rgba(0,0,0,.4);
}
body.mat-blender .om-final { box-shadow: inset 0 0 0 1px rgba(255,97,54,.75), inset 0 2px 0 #FCFBFA, 0 3px 4px rgba(0,0,0,.5), 0 18px 40px rgba(0,0,0,.45); }
body.mat-blender .ai-tile {
  background: #3A2A22;
  box-shadow: inset 0 0 0 1px #FF6136, inset 0 0 0 2px rgba(136,60,41,.9), inset 4px 0 0 #FF5B2E, 0 2px 3px rgba(0,0,0,.45), 0 6px 14px rgba(0,0,0,.33);
}
body.mat-blender :is(.btn.primary, .send) {
  background: #FF5B2E;
  box-shadow: inset 0 1px 0 #FF8C6B, inset 0 -1px 0 #E66F4B, 0 2px 3px rgba(0,0,0,.45), 0 6px 14px rgba(0,0,0,.33);
}
body.mat-blender :is(.btn.primary, .send):hover { background: #FF6638; }