/* PIXEL STUDIO (static/js/pixel.js). Hub-panel holo look; stepped corners and hard pixel edges for the studio's own feel. */
.pxs-stats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pxs-stat { font: 11px var(--mono); letter-spacing: .06em; color: #8fb3c4; border: 1px solid var(--holo-dim); padding: 3px 8px; border-radius: 4px; }
.pxs-stat b { color: var(--amber); }
.pxs-busy { color: var(--holo); border-color: rgba(79, 227, 255, .45); }
.pxs-off { color: var(--alert); border-color: rgba(255, 90, 74, .4); }

.pxs-create { display: grid; grid-template-columns: minmax(280px, 400px) 1fr; gap: 12px; align-items: start; }
@media (max-width: 860px) { .pxs-create { grid-template-columns: 1fr; } }
.pxs-brief .label { margin-top: 12px; }
.pxs-brief .label:first-child { margin-top: 0; }

.pxs-sg { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 4px 0; }
.pxs-sg i { font: 700 9px var(--mono); letter-spacing: .14em; color: #5f7c8c; font-style: normal; width: 100%; margin-top: 2px; }
.pxs-chip { font: 700 11px var(--mono) !important; letter-spacing: .04em; padding: 5px 8px; background: rgba(79, 227, 255, .04); color: #b9d4e0;
  border: 1px solid var(--holo-dim); border-radius: 0;
  clip-path: polygon(0 3px, 3px 3px, 3px 0, calc(100% - 3px) 0, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0 calc(100% - 3px)); }
.pxs-chip:hover { background: rgba(79, 227, 255, .12); }
.pxs-chip.on { background: var(--amber); color: #120c02; border-color: var(--amber); }

.pxs-styles { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 6px; }
.pxs-style { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px; text-align: left; background: rgba(79, 227, 255, .04);
  border: 1px solid var(--holo-dim); border-radius: 4px; color: #b9d4e0; font-family: var(--mono) !important; }
.pxs-style b { font: 700 11px var(--mono); letter-spacing: .05em; }
.pxs-style small { font: 10px var(--mono); color: #6f8c9b; }
.pxs-style.on { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber) inset; }
.pxs-style.on b { color: var(--amber); }
/* a tiny pixel glyph per style, drawn with box-shadow squares (4px a pixel) */
.pxs-glyph { width: 4px; height: 4px; margin: 2px 0 12px; color: var(--holo); background: currentColor; }
.pxs-style.on .pxs-glyph { color: var(--amber); }
.pxs-g-iso { box-shadow: 4px 0, 8px 0, 12px 0, 0 4px, 12px 4px, 0 8px, 4px 8px, 8px 8px, 12px 8px, 0 12px, 12px 12px, 4px 12px, 8px 12px; }
.pxs-g-vista { box-shadow: 4px -4px, 8px -8px, 12px -4px, 16px 0, 20px -4px, 24px 0, 0 4px, 4px 4px, 8px 4px, 12px 4px, 16px 4px, 20px 4px, 24px 4px; }
.pxs-g-topdown { box-shadow: 8px 0, 16px 0, 0 8px, 8px 8px, 16px 8px, 4px 4px, 12px 4px, 4px 12px, 12px 12px; }
.pxs-g-side { box-shadow: 0 12px, 4px 12px, 8px 12px, 16px 8px, 20px 8px, 24px 8px, 8px 0, 8px 4px; }
.pxs-g-sprite { box-shadow: 4px 0, 0 4px, 4px 4px, 8px 4px, 4px 8px, 0 12px, 8px 12px; }
.pxs-g-icon { box-shadow: 4px 0, 8px 0, 0 4px, 12px 4px, 0 8px, 12px 8px, 4px 12px, 8px 12px, 4px 4px, 8px 8px; }
.pxs-g-title { box-shadow: 4px 0, 8px 0, 12px 0, 16px 0, 20px 0, 8px 4px, 12px 4px, 8px 8px, 12px 8px, 0 12px, 4px 12px, 16px 12px, 20px 12px; }

.pxs-brief textarea { width: 100%; box-sizing: border-box; resize: vertical; font: 13px var(--mono); }
.pxs-prompt { margin-top: 8px; font: 11px var(--mono); color: #7f9cab; }
.pxs-prompt summary { cursor: pointer; letter-spacing: .12em; font-weight: 700; color: #5f7c8c; }
.pxs-prompt div { margin-top: 6px; line-height: 1.45; white-space: pre-wrap; }
.pxs-go { display: flex; align-items: center; gap: 10px; margin-top: 12px; font: 11px var(--mono); color: #8fb3c4; }
.pxs-make { font: 700 14px var(--mono) !important; letter-spacing: .12em; padding: 10px 16px; color: #120c02; background: var(--amber); border-color: var(--amber); }
.pxs-make:hover { background: var(--amber); filter: brightness(1.12); }
.pxs-make:disabled { opacity: .45; filter: grayscale(.6); }
.pxs-or { margin-top: 10px; font: 11px var(--mono); color: #6f8c9b; }
.pxs-upload { cursor: pointer; font: 700 11px var(--mono); letter-spacing: .06em; display: inline-block; }

.pxs-stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 260px; margin: 8px 0;
  background: #04060b repeating-conic-gradient(rgba(79, 227, 255, .035) 0 25%, transparent 0 50%) 0 0 / 16px 16px; border: 1px solid var(--holo-dim); }
#pxs-out { image-rendering: pixelated; image-rendering: crisp-edges; max-width: 100%; display: block; }
#pxs-out.hidden, .pxs-empty.hidden { display: none; }
.pxs-empty { font: 12px var(--mono); color: #6f8c9b; padding: 24px; text-align: center; }
.pxs-ctl { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 12px; font: 700 10px var(--mono); letter-spacing: .1em; color: #8fb3c4; }
.pxs-ctl label { display: flex; flex-direction: column; gap: 3px; }
.pxs-ctl label.pxs-chk { flex-direction: row; align-items: center; justify-content: flex-start; gap: 6px; }
.pxs-ctl label.pxs-chk input { width: auto; margin: 0; flex: none; }
.pxs-ctl select, .pxs-ctl input[type=range] { width: 100%; }
.pxs-ctl b { color: var(--amber); font-size: 10px; }
#pxs-title { width: 100%; box-sizing: border-box; margin-top: 10px; font: 13px var(--mono); }
.pxs-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pxs-acts .hud-btn { font: 700 11px var(--mono); letter-spacing: .08em; }
.pxs-acts .hud-btn:disabled { opacity: .4; }

.pxs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.pxs-none { font: 12px var(--mono); color: #6f8c9b; padding: 16px; }
.pxs-card { background: var(--hub-bg); border: 1px solid var(--holo-dim); border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; }
.pxs-card.shared { border-color: rgba(255, 176, 32, .45); }
.pxs-thumb { aspect-ratio: 1; background: #04060b; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pxs-thumb img { width: 100%; height: 100%; object-fit: contain; }
.pxs-thumb.px img { image-rendering: pixelated; image-rendering: crisp-edges; }
.pxs-wait, .pxs-fail { flex-direction: column; gap: 6px; font: 700 11px var(--mono); letter-spacing: .14em; color: var(--holo); }
.pxs-wait span { font-size: 28px; color: var(--amber); }
.pxs-fail { color: var(--alert); text-align: center; padding: 8px; }
.pxs-fail small { font: 10px var(--mono); letter-spacing: 0; color: #a07a74; }
.pxs-meta { padding: 7px 9px 2px; display: flex; flex-direction: column; gap: 2px; }
.pxs-meta b { font: 700 12px var(--mono); color: #e1f1f8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pxs-meta span { font: 10px var(--mono); color: #6f8c9b; }
.pxs-cacts { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 9px 9px; margin-top: auto; }
.pxs-cacts .hud-btn { font: 700 10px var(--mono); letter-spacing: .08em; padding: 4px 7px; }
.pxs-del { margin-left: auto; color: #a07a74 !important; border-color: rgba(255, 90, 74, .25) !important; }