*{box-sizing:border-box}
:root{--win:#bcbcbc;--panel:#eeeeee;--bar:#d1d1d1;--ink:#111111;--shadow:#8c8c8c;--accent:#1454a5}
body{margin:0;min-height:100vh;padding:18px 10px 30px;background:linear-gradient(90deg,rgba(0,0,0,.03) 1px,transparent 1px),linear-gradient(rgba(0,0,0,.03) 1px,transparent 1px),#d7d7d7;background-size:16px 16px;color:var(--ink);font-family:"Courier New",monospace}
.desktop{max-width:1240px;margin:auto}.main-window{background:var(--win);border:2px solid #111;box-shadow:8px 8px 0 rgba(0,0,0,.28)}.inner{padding:10px}.window{background:var(--panel);border:2px solid #111;box-shadow:4px 4px 0 rgba(0,0,0,.2)}
.titlebar{min-height:36px;background:var(--bar);border-bottom:2px solid #111;display:flex;align-items:center;justify-content:space-between;padding:5px 7px 5px 10px;gap:10px}.title{font-weight:900;font-size:17px;letter-spacing:.5px}.sysbtns{display:flex;gap:5px}.sysbtn{width:24px;height:24px;background:var(--panel);border:2px solid #111;box-shadow:inset 2px 2px 0 #fff,inset -2px -2px 0 var(--shadow);display:grid;place-items:center;font-weight:900;font-size:12px}
.menubar{padding:7px 10px;background:var(--panel);border-bottom:2px solid #111;font-size:10px;font-weight:700;word-spacing:14px}
.workspace{padding:12px;background:var(--win);display:grid;grid-template-columns:minmax(0,1.02fr) minmax(420px,.98fr);gap:14px}.subwindow{background:var(--panel);border:2px solid #111;box-shadow:5px 5px 0 rgba(0,0,0,.2)}.subbar{height:30px;background:var(--bar);border-bottom:2px solid #111;display:flex;align-items:center;justify-content:space-between;padding:0 9px;font-size:10px;font-weight:900}
.preview-body,.right-body,.panel-body{padding:12px}.preview-frame{position:relative;aspect-ratio:1/1;background:#fff;border:2px solid #111;overflow:visible;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.preview-frame *{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}#previewCanvas{width:100%;height:100%;display:block;overflow:hidden}.stamp{position:absolute;right:12px;top:12px;padding:6px 10px;background:#111;color:#fff;font-size:9px;font-weight:900;letter-spacing:1px}
.selection-box{position:absolute;z-index:3;border:2px dashed rgba(20,84,165,.95);pointer-events:auto;display:none;transform-origin:center center;box-sizing:border-box;cursor:move;touch-action:none}.selection-box.pet-group-selection{cursor:move}.resize-handle{position:absolute;z-index:4;width:14px;height:14px;background:#fff;border:2px solid var(--accent);touch-action:none}.resize-handle.nw{left:-8px;top:-8px;cursor:nwse-resize}.resize-handle.ne{right:-8px;top:-8px;cursor:nesw-resize}.resize-handle.sw{left:-8px;bottom:-8px;cursor:nesw-resize}.resize-handle.se{right:-8px;bottom:-8px;cursor:nwse-resize}
.preview-bg-panel{margin-top:10px;border:2px solid #111;background:#fff;padding:8px}.preview-bg-banner{min-height:38px;background:#111;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;font-size:9px;font-weight:900;letter-spacing:.5px}.preview-bg-main{display:grid;grid-template-columns:78px minmax(0,1fr) 96px;gap:8px;align-items:stretch;margin-top:8px}.preview-bg-custom{width:100%;height:58px;padding:0;border:2px solid #111;background:#fff;cursor:pointer}.preview-bg-desc{min-height:58px;display:flex;align-items:center;padding:6px 8px;font-size:8px;font-weight:900;line-height:1.45}.preview-bg-hex{min-height:58px;border:2px solid #111;background:#fff;display:grid;place-items:center;padding:6px;font-size:9px;font-weight:900}.preview-bg-quick{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;align-items:center;margin-top:8px;padding-top:8px;border-top:2px solid #111}.preview-bg-swatches{display:grid;grid-template-columns:repeat(7,minmax(24px,1fr));gap:5px}.preview-bg-swatch{width:100%;min-height:30px;border:2px solid #111;cursor:pointer}.preview-bg-swatch.active{outline:3px double var(--accent);outline-offset:-4px}
.stack{display:grid;gap:14px}.tab-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:12px}.tab-group{border:2px solid #111;background:#fff;padding:8px}.group-title{font-size:8px;font-weight:900;margin-bottom:7px;letter-spacing:.8px;color:#333}.group-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.tab-group.full .group-tabs{grid-template-columns:1fr}
.tab{padding:9px 8px;border:2px solid #111;background:var(--bar);box-shadow:inset 2px 2px 0 #fff,inset -2px -2px 0 var(--shadow);font-family:inherit;font-size:10px;font-weight:900;cursor:pointer;min-height:42px}.tab.active{background:#111;color:#fff;box-shadow:none}
.label{margin:11px 0 6px;font-size:9px;font-weight:900}.options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:104px;gap:7px;max-height:437px;overflow-y:auto;overflow-x:hidden;padding:0 4px 2px 0;align-content:start}.option{min-height:104px;background:#fff;border:2px solid #111;padding:6px;cursor:pointer;position:relative}.option.active{outline:3px double var(--accent);outline-offset:-5px}.thumb{height:74px;display:grid;place-items:center;font-size:30px;font-weight:900;overflow:hidden}.thumb img{max-width:100%;max-height:72px;object-fit:contain;display:block}.thumb canvas{display:block;width:72px;height:auto;max-width:100%;aspect-ratio:1/1;object-fit:contain}.name{margin-top:5px;font-size:9px;font-weight:900;word-break:break-word}
@media(min-width:761px){.options{max-height:437px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-gutter:stable}}
.multi-select-badge{display:inline-flex;align-items:center;margin-right:7px;padding:2px 6px;background:#d92727;color:#fff;font-size:.9em;line-height:1;vertical-align:middle;animation:multi-select-pulse 1.15s steps(2,end) infinite}@keyframes multi-select-pulse{50%{opacity:.38}}
.panel{margin-top:12px;border:2px solid #111;background:#fff;padding:10px}.panel:first-child{margin-top:0}.color-panel-head{display:flex;justify-content:space-between;align-items:center;gap:8px}.color-panel-title{font-size:10px;font-weight:900}.color-mode-tag{background:#111;color:#fff;padding:4px 7px;font-size:8px;font-weight:900}.swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:8px}.swatch{width:100%;aspect-ratio:1/1;border:2px solid #111;cursor:pointer}.swatch.active{outline:3px double var(--accent);outline-offset:-4px}
.custom-box{margin-top:10px;border:2px solid #111;background:#f8f8f8;padding:8px}.custom-banner{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 10px;border:2px solid #111;background:#111;color:#fff;font-size:10px;font-weight:900;letter-spacing:.5px}.custom-row{display:grid;grid-template-columns:74px 1fr 96px;gap:8px;align-items:center;margin-top:8px}.big-color-input{width:100%;height:42px;padding:0;border:2px solid #111;background:#fff;cursor:pointer}.custom-desc{font-size:8px;font-weight:900;line-height:1.5}.hex-box{min-height:42px;border:2px solid #111;background:#fff;display:grid;place-items:center;font-size:9px;font-weight:900;padding:0 8px}
.ctrl-row{display:grid;grid-template-columns:76px 34px 1fr 34px 48px;gap:6px;align-items:center;margin:7px 0}.ctrl-row.compact{grid-template-columns:56px 1fr 48px;margin:0}.ctrl-label{font-size:9px;font-weight:900}.ctrl-btn{height:30px;border:2px solid #111;background:var(--bar);box-shadow:inset 2px 2px 0 #fff,inset -2px -2px 0 var(--shadow);font-family:inherit;font-weight:900;cursor:pointer}.ctrl-btn:active{box-shadow:inset -2px -2px 0 #fff,inset 2px 2px 0 var(--shadow)}.value-box{min-height:28px;border:2px solid #111;background:#fff;display:grid;place-items:center;font-size:9px;font-weight:900}input[type="range"]{width:100%;accent-color:#111}.nudge-grid{display:grid;grid-template-columns:repeat(3,36px);grid-template-rows:repeat(3,32px);justify-content:center;gap:4px;margin-top:8px}.blank{visibility:hidden}
.transform-position-row{display:grid;grid-template-columns:160px minmax(0,1fr);gap:18px;align-items:start;margin-top:4px}.position-block .nudge-grid{justify-content:start;margin-left:17px}.pet-selection-block .label{margin-bottom:8px}.pet-group-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px}.pet-group-actions button{min-height:34px;border:2px solid #111;background:#fff;font:900 9px 'Courier New',monospace;cursor:pointer}.pet-group-actions button.active{background:#111;color:#fff!important;-webkit-text-fill-color:#fff!important;outline:0}.pet-group-scale-row{grid-template-columns:42px 30px minmax(0,1fr) 30px 44px;margin:8px 0 0}.pet-group-scale-row .ctrl-label{font-size:8px}.pet-group-scale-row .ctrl-btn{height:28px}.pet-group-scale-row .value-box{min-height:28px}
.form-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:8px}.text-input{width:100%;min-height:42px;padding:10px;border:2px solid #111;background:#fff;font-family:inherit;font-size:12px;font-weight:900}.mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}.select{width:100%;min-height:40px;border:2px solid #111;background:#fff;padding:0 8px;font-family:inherit;font-size:10px;font-weight:900}.sticker-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:8px}.sticker-btn{min-height:40px;border:2px solid #111;background:#fff;font-family:inherit;font-size:18px;font-weight:900;cursor:pointer}.sticker-btn.active{outline:3px double var(--accent);outline-offset:-4px}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.actionbar{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.action{flex:1;min-width:120px;padding:9px 10px;border:2px solid #111;background:var(--bar);box-shadow:inset 2px 2px 0 #fff,inset -2px -2px 0 var(--shadow);font-family:inherit;font-size:9px;font-weight:900;cursor:pointer}.action.primary{background:#111;color:#fff;box-shadow:none}
.statusbar{min-height:28px;padding:0 10px;background:var(--bar);border-top:2px solid #111;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:8px;font-weight:900}.blink{animation:blink 1.1s steps(1) infinite}@keyframes blink{50%{opacity:.35}}
@media(max-width:980px){.workspace{display:flex;flex-direction:column}.stack{display:contents}.stack>.subwindow:first-child{order:1}.workspace>.subwindow{order:2}.stack>.subwindow:nth-child(2){order:3}.tab-groups{grid-template-columns:1fr}.form-grid,.two-col,.mini-grid{grid-template-columns:1fr}.title{font-size:15px}.options{grid-template-columns:repeat(4,1fr)}.swatches{grid-template-columns:repeat(6,1fr)}.custom-row{grid-template-columns:58px 1fr 82px}}
@media(max-width:600px){
  body{padding:6px 4px 20px;background-size:12px 12px}
  .inner{padding:5px}.main-window{box-shadow:4px 4px 0 rgba(0,0,0,.28)}
  .titlebar{min-height:34px;padding:5px 7px}.title{font-size:11px;line-height:1.2;overflow-wrap:anywhere}.sysbtns{display:none}
  .menubar{padding:8px;overflow-x:auto;white-space:nowrap;word-spacing:8px}
  .workspace{padding:6px;gap:10px}.subwindow{box-shadow:3px 3px 0 rgba(0,0,0,.2)}.subbar{height:34px;padding:0 7px}
  .preview-body,.right-body,.panel-body{padding:7px}.stamp{right:7px;top:7px;padding:5px 7px}
  .tab-groups{gap:7px;margin-bottom:8px}.tab-group{padding:6px}.tab{min-height:46px;padding:8px 5px}
  .options{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.option{min-height:112px}.thumb{height:78px}.thumb canvas{width:76px}
  .panel{padding:7px;margin-top:8px}.swatches{gap:5px}.custom-row{grid-template-columns:52px minmax(0,1fr) 72px;gap:5px}.hex-box{padding:0 3px;font-size:8px}
  .ctrl-row{grid-template-columns:60px 38px minmax(70px,1fr) 38px 46px;gap:4px}.ctrl-btn{height:38px}.value-box{min-height:34px}
  .nudge-grid{grid-template-columns:repeat(3,44px);grid-template-rows:repeat(3,40px)}.action{min-height:44px}.statusbar{align-items:flex-start;flex-direction:column;padding:7px 8px}
  .preview-bg-main{grid-template-columns:52px minmax(0,1fr) 68px;gap:4px}.preview-bg-desc{padding:5px;font-size:7px}.preview-bg-hex{padding:4px;font-size:8px}.preview-bg-quick{grid-template-columns:1fr;gap:6px}.preview-bg-swatches{grid-template-columns:repeat(6,minmax(24px,1fr))}
}


/* MOBILE SCROLL + STICKY PREVIEW — Humation-inspired interaction, POOP CLUB visual kept */
.mobile-customizer,.mobile-palette-fab,.mobile-color-sheet,.mobile-sheet-backdrop,.mobile-side-palette,.mobile-preview-move{display:none}
button,.tab,.option,.ctrl-btn,.action,.sticker-btn,.mobile-mode-btn,.mobile-layer-btn,.mobile-choice,.mobile-transform-btn,.mobile-sticker,.mobile-sheet-close,.mobile-color-row{color:#111;-webkit-text-fill-color:#111;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;text-decoration:none}
.tab.active,.action.primary,.mobile-mode-btn.active,.mobile-layer-btn.active{color:#fff!important;-webkit-text-fill-color:#fff!important}
@media(max-width:600px){
  html,body{min-height:100%;height:auto;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:auto;-webkit-text-size-adjust:100%}
  body{padding:0 0 calc(18px + env(safe-area-inset-bottom));background:#d7d7d7}
  .desktop,.main-window,.inner,.window{height:auto;min-height:0;max-width:none}.desktop{width:100%}.main-window{border:0;box-shadow:none}.inner{padding:0}.window{border:0;display:block}
  .titlebar{height:38px;min-height:38px;border:0;border-bottom:2px solid #111;padding:4px 8px;position:relative;z-index:30}.title{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#111!important;-webkit-text-fill-color:#111!important}.sysbtns,.menubar,.statusbar{display:none!important}
  .workspace{padding:4px;gap:6px;display:block!important;overflow:visible;background:var(--win)}
  .stack{display:contents!important}.stack>.subwindow:first-child{display:block!important;position:sticky;top:0;z-index:25;height:auto;min-height:0;margin-bottom:6px;box-shadow:2px 2px 0 rgba(0,0,0,.18);background:var(--panel)}
  .stack>.subwindow:nth-child(2),.workspace>.subwindow:not(.mobile-customizer){display:none!important}
  .stack>.subwindow:first-child .subbar{height:24px;min-height:24px;font-size:8px}
  .preview-body{height:auto;padding:4px!important;display:grid;grid-template-columns:minmax(0,1fr) 68px;gap:4px;align-items:start;min-height:0;background:var(--panel)}
  .preview-frame{width:100%;height:auto;aspect-ratio:1/1;margin:0;justify-self:stretch;align-self:start;border-width:2px;will-change:contents;min-width:0}
  .preview-bg-panel{display:none!important}.stamp{font-size:6px;right:5px;top:5px;padding:3px 5px}.selection-box{border:0;background:repeating-linear-gradient(90deg,var(--accent) 0 6px,transparent 6px 12px) top left/100% 1px no-repeat,repeating-linear-gradient(90deg,var(--accent) 0 6px,transparent 6px 12px) bottom left/100% 1px no-repeat,repeating-linear-gradient(180deg,var(--accent) 0 6px,transparent 6px 12px) top left/1px 100% no-repeat,repeating-linear-gradient(180deg,var(--accent) 0 6px,transparent 6px 12px) top right/1px 100% no-repeat;will-change:transform,left,top,width,height}.mobile-side-palette{display:flex!important;flex-direction:column;gap:6px;align-self:stretch;min-width:0;border:2px solid #111;background:#fff;padding:5px;overflow:hidden}.mobile-side-palette-title{border:2px solid #111;background:#111;color:#fff!important;-webkit-text-fill-color:#fff!important;font:900 8px 'Courier New',monospace;text-align:center;padding:8px 2px;letter-spacing:.5px;cursor:pointer}.mobile-side-palette-target{font:900 9px 'Courier New',monospace;text-align:center;line-height:1.08;min-height:34px;display:grid;place-items:center;padding:2px;letter-spacing:.2px}.mobile-side-color-input{width:100%;height:42px;padding:0;border:2px solid #111;background:#fff;cursor:pointer}.mobile-side-color-hex{border:2px solid #111;background:#f7f7f7;min-height:28px;display:grid;place-items:center;padding:2px;font:900 6px 'Courier New',monospace;line-height:1.1;word-break:break-all;text-align:center}.mobile-side-swatches{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;overflow-y:auto;padding-right:1px}.mobile-side-swatch{width:100%;aspect-ratio:1/1;border:2px solid #111;background:#fff;cursor:pointer}.mobile-side-swatch.active{outline:2px solid #111;outline-offset:-3px}
  .mobile-preview-move{position:absolute;left:5px;top:50%;z-index:9;display:grid;grid-template-columns:34px;align-items:start;gap:2px;transform:translateY(-50%);font-family:'Courier New',monospace;pointer-events:auto}
  .mobile-preview-move button{display:grid;place-items:center;width:30px;height:28px;padding:0;border:1px solid #111;background:#d1d1d1;box-shadow:inset 1px 1px 0 #fff,inset -1px -1px 0 #8c8c8c;color:#111!important;-webkit-text-fill-color:#111!important;font:900 12px 'Courier New',monospace;touch-action:manipulation}
  .mobile-preview-move .mobile-preview-move-toggle{width:34px;height:20px;background:#111;color:#fff!important;-webkit-text-fill-color:#fff!important;box-shadow:none;font-size:11px}
  .mobile-preview-move-controls{display:grid;gap:2px;padding:2px;border:1px solid #111;background:rgba(238,238,238,.92)}
  .mobile-preview-move-controls>.mobile-preview-move-handle{width:30px;height:15px;background:#111;color:#fff!important;-webkit-text-fill-color:#fff!important;box-shadow:none;font-size:5.5px;letter-spacing:.4px;cursor:move;touch-action:none}
  .mobile-preview-move.collapsed{grid-template-columns:24px}
  .mobile-preview-move.collapsed .mobile-preview-move-toggle{width:24px;height:24px}
  .mobile-preview-move.collapsed .mobile-preview-move-controls{display:none}
  body.mobile-background-mode .preview-body{grid-template-columns:minmax(0,1fr)}
  body.mobile-background-mode .preview-frame{width:min(100%,430px);justify-self:center}
  body.mobile-background-mode .mobile-side-palette{display:none!important}
  .mobile-palette-fab{display:none!important}
  .mobile-customizer{display:block!important;background:var(--panel);border:2px solid #111;box-shadow:2px 2px 0 rgba(0,0,0,.18);overflow:visible}
  .mobile-modebar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:4px;border-bottom:2px solid #111;background:var(--bar);position:sticky;top:min(46vh,430px);z-index:20}
  .mobile-mode-btn{min-width:0;height:34px;border:2px solid #111;background:#d1d1d1;box-shadow:inset 2px 2px 0 #fff,inset -2px -2px 0 #8c8c8c;font:900 9px 'Courier New',monospace}.mobile-mode-btn.active{background:#111;box-shadow:none;color:#fff!important;-webkit-text-fill-color:#fff!important}
  .mobile-pane{display:none;padding:8px;background:var(--panel);overflow:visible}.mobile-pane.active{display:block}
  .mobile-customizer button,.mobile-customizer input[type=range],.mobile-preview-move button{touch-action:manipulation}
  .mobile-layer-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin-bottom:8px}.mobile-layer-btn{min-width:0;height:34px;border:2px solid #111;background:#d1d1d1;box-shadow:inset 2px 2px 0 #fff,inset -2px -2px 0 #8c8c8c;font:900 7.5px 'Courier New',monospace;line-height:1.05;padding:2px}.mobile-layer-btn.active{background:#111;box-shadow:none;color:#fff!important;-webkit-text-fill-color:#fff!important}
  .mobile-minihead{display:flex;justify-content:space-between;align-items:center;min-height:22px;font-size:8px;font-weight:900;letter-spacing:.4px}.mobile-hint{opacity:.5;font-size:7px}
  .mobile-choice-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:86px;gap:5px;overflow-y:auto;overflow-x:hidden;padding:0 3px 2px 0;margin:0;max-height:132px;align-content:start;scroll-snap-type:y proximity}
  .mobile-choice{width:100%;height:86px;min-height:86px;max-height:none;border:2px solid #111;background:#fff;padding:3px;font:900 7px 'Courier New',monospace;display:grid;grid-template-rows:minmax(0,1fr) 16px;align-items:center;scroll-snap-align:start}.mobile-choice.active{outline:3px double var(--accent);outline-offset:-5px}.mobile-choice-thumb{min-height:0;display:grid;place-items:center;font-size:22px;overflow:hidden}.mobile-choice-thumb canvas{width:min(48px,72%);height:auto;aspect-ratio:1/1;display:block}.mobile-choice-name{display:grid;place-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#111!important;-webkit-text-fill-color:#111!important}
  .mobile-move-dock{position:sticky;bottom:calc(6px + env(safe-area-inset-bottom));z-index:18;margin-top:8px;border:2px solid #111;background:#f7f7f7;padding:6px;box-shadow:0 -3px 0 rgba(0,0,0,.14)}
  .mobile-dock-head{display:flex;align-items:center;justify-content:space-between;gap:6px;font:900 8px 'Courier New',monospace;margin-bottom:5px}.mobile-dock-layer{background:#111;color:#fff!important;-webkit-text-fill-color:#fff!important;padding:3px 5px;font-size:7px}
  .mobile-transform-row{display:grid;grid-template-columns:42px 28px minmax(0,1fr) 28px 42px;gap:3px;align-items:center;margin:3px 0}.mobile-transform-label,.mobile-transform-value{font:900 7px 'Courier New',monospace;color:#111!important;-webkit-text-fill-color:#111!important}.mobile-transform-value{height:27px;border:2px solid #111;background:#fff;display:grid;place-items:center}.mobile-transform-btn{height:27px;border:2px solid #111;background:var(--bar);font-weight:900;padding:0}.mobile-transform-row input[type=range]{min-width:0;width:100%}
  .mobile-pet-group-controls{margin-top:8px;padding-top:7px;border-top:2px solid #111}.mobile-pet-group-title{font:900 7px 'Courier New',monospace;letter-spacing:.6px}.mobile-pet-group-actions{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:5px 0}.mobile-pet-group-actions button{height:28px;border:2px solid #111;background:#fff;font:900 7px 'Courier New',monospace;color:#111!important;-webkit-text-fill-color:#111!important}.mobile-pet-group-actions button.active{background:#111;color:#fff!important;-webkit-text-fill-color:#fff!important;outline:0}
  .mobile-position-line{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin-top:5px}.mobile-position-line button{height:30px;border:2px solid #111;background:var(--bar);font:900 8px 'Courier New',monospace;color:#111!important;-webkit-text-fill-color:#111!important}.mobile-position-line .reset{font-size:8px}.mobile-position-line .reset-all{background:#111;color:#fff!important;-webkit-text-fill-color:#fff!important}
  .mobile-card{border:2px solid #111;background:#fff;padding:7px}.mobile-card-title{display:flex;justify-content:space-between;align-items:center;gap:6px;font-size:9px;font-weight:900;margin-bottom:6px}.mobile-tag{background:#111;color:#fff!important;-webkit-text-fill-color:#fff!important;padding:4px 6px;font-size:7px}
  .mobile-background-card{padding:10px}
  .mobile-background-current{display:grid;grid-template-columns:76px minmax(0,1fr);gap:7px;align-items:stretch}
  .mobile-background-current label{display:none}
  .mobile-background-current input{width:76px;height:76px;padding:0;border:2px solid #111;background:#fff}
  .mobile-background-current output{min-width:0;border:2px solid #111;background:#fff;display:grid;place-items:center;padding:8px;font:900 14px 'Courier New',monospace}
  .mobile-background-current output::before{content:'CURRENT COLOR';display:block;font-size:8px;opacity:.55}
  .mobile-background-quick-title{display:flex;align-items:end;justify-content:space-between;gap:8px;margin-top:10px;padding-top:8px;border-top:2px solid #111;font:900 9px 'Courier New',monospace}
  .mobile-background-quick-title small{font-size:7px;opacity:.55}
  .mobile-background-swatches{display:grid;grid-template-columns:repeat(6,minmax(0,42px));justify-content:space-between;gap:5px;margin-top:7px}
  .mobile-background-swatch{width:100%;height:40px;border:2px solid #111;background:#fff;padding:0}
  .mobile-background-swatch.active{outline:3px double var(--accent);outline-offset:-5px}
  .mobile-text-grid{display:grid;grid-template-columns:minmax(0,1fr) 48px;gap:6px}.mobile-text-grid input[type=text]{height:38px;border:2px solid #111;padding:6px 8px;font:900 10px 'Courier New',monospace;color:#111!important;-webkit-text-fill-color:#111!important}.mobile-text-grid input[type=color]{width:48px;height:38px;border:2px solid #111;padding:0}.mobile-text-two{display:grid;grid-template-columns:1fr 1fr;gap:6px}.mobile-text-two select{height:34px;border:2px solid #111;border-radius:0;background:#fff linear-gradient(45deg,transparent 50%,#111 50%) calc(100% - 12px) 50%/5px 5px no-repeat;padding:0 26px 0 6px;font:900 8px 'Courier New',monospace;color:#111!important;-webkit-text-fill-color:#111!important;-webkit-appearance:none;appearance:none}.mobile-text-size{display:grid;grid-template-columns:34px 1fr 30px;gap:4px;align-items:center;font-size:8px;font-weight:900}.mobile-sticker-line{display:grid;grid-template-columns:38px minmax(0,1fr);gap:5px;align-items:center;font-size:7px;font-weight:900}.mobile-stickers{display:flex;gap:4px;overflow-x:auto}.mobile-sticker{flex:0 0 34px;height:32px;border:2px solid #111;background:#fff;font-size:15px}.mobile-sticker.active{outline:3px double var(--accent);outline-offset:-4px}.mobile-text-position{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin-top:6px}.mobile-text-position button{height:29px;border:2px solid #111;background:var(--bar);font-weight:900;color:#111!important;-webkit-text-fill-color:#111!important}.mobile-text-position .reset{font:900 7px 'Courier New',monospace}
  .mobile-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.mobile-actions button{min-height:54px;border:2px solid #111;background:var(--bar);box-shadow:inset 2px 2px 0 #fff,inset -2px -2px 0 var(--shadow);font:900 9px 'Courier New',monospace;color:#111!important;-webkit-text-fill-color:#111!important}.mobile-actions .primary{background:#111;color:#fff!important;-webkit-text-fill-color:#fff!important;box-shadow:none}.mobile-note{font-size:7px;font-weight:900;opacity:.65;text-align:center;margin-top:8px}
  .mobile-sheet-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.18);z-index:90}.mobile-sheet-backdrop.open{display:block}
  .mobile-color-sheet{display:none!important}.mobile-color-sheet.open{transform:none}
  .mobile-sheet-head{display:flex;align-items:center;justify-content:space-between;position:sticky;top:-12px;background:#f7f7f7;padding:3px 0 8px;z-index:2}.mobile-sheet-title{font:900 18px Arial,sans-serif}.mobile-sheet-close{width:38px;height:38px;border:0;border-radius:50%;background:#e8e8e8;font:700 22px Arial,sans-serif;color:#111!important;-webkit-text-fill-color:#111!important}
  .mobile-color-list{display:grid;gap:2px}.mobile-color-row{display:grid;grid-template-columns:minmax(0,1fr) 74px 48px;gap:8px;align-items:center;min-height:52px;border:0;border-bottom:1px solid #ddd;background:transparent;padding:4px 3px;font:700 15px Arial,sans-serif;text-align:left}.mobile-color-row .hex{font:500 12px Arial,sans-serif;color:#777;-webkit-text-fill-color:#777;text-align:right}.mobile-color-row input[type=color]{width:42px;height:42px;border:1px solid #ddd;border-radius:50%;padding:3px;background:#fff;overflow:hidden}
}

/* Editable HEX fields shared by desktop and mobile color pickers. */
.editable-hex{min-width:0;border:2px solid #111;border-radius:0;background:#fff;color:#111!important;-webkit-text-fill-color:#111!important;box-sizing:border-box;font-family:'Courier New',monospace;font-weight:900;text-align:center;text-transform:uppercase}
.editable-hex:focus{outline:3px double var(--accent);outline-offset:-5px}
.editable-hex.invalid{background:#ffe3e3}
.preview-bg-hex,.hex-box{display:block}
@media(max-width:760px){
  .mobile-side-color-input,.mobile-background-current input[type=color],.mobile-text-grid input[type=color]{border-radius:0;-webkit-appearance:none;appearance:none;overflow:hidden}
  .mobile-side-color-input::-webkit-color-swatch-wrapper,.mobile-background-current input[type=color]::-webkit-color-swatch-wrapper,.mobile-text-grid input[type=color]::-webkit-color-swatch-wrapper{padding:3px}
  .mobile-side-color-input::-webkit-color-swatch,.mobile-background-current input[type=color]::-webkit-color-swatch,.mobile-text-grid input[type=color]::-webkit-color-swatch{border:0;border-radius:0}
  .mobile-background-current input[type=color]{width:76px;height:76px;padding:0}
  .mobile-background-current .editable-hex{width:100%;height:76px;padding:8px;font-size:14px}
  .mobile-side-color-hex.editable-hex{width:100%;min-height:28px;padding:2px;font-size:7px}
}