.pixel-studio{display:grid;gap:22px}.pixel-toolbar,.pixel-panel,.pixel-preview-card,.pixel-export{background:var(--surface,#eef3f8);border-radius:22px;box-shadow:var(--shadow-out,8px 8px 18px #cbd3dc,-8px -8px 18px #fff);padding:20px}.pixel-toolbar{display:grid;grid-template-columns:repeat(5,minmax(130px,1fr));gap:14px}.pixel-toolbar label,.pixel-controls label,.pixel-export label{display:grid;gap:7px;font-size:.78rem;font-weight:800;color:var(--muted,#64748b)}.pixel-toolbar input,.pixel-toolbar select,.pixel-controls input,.pixel-controls select,.pixel-export select{width:100%;min-height:42px}.pixel-main{display:grid;grid-template-columns:310px minmax(0,1fr);gap:22px}.pixel-panel{display:grid;align-content:start;gap:18px}.pixel-upload{display:grid;place-items:center;text-align:center;gap:6px;padding:24px 12px;border:2px dashed var(--accent,#14b8a6);border-radius:18px;cursor:pointer}.pixel-upload i{font-size:2rem;color:var(--accent,#14b8a6)}.pixel-controls{display:grid;grid-template-columns:1fr 1fr;gap:12px}.pixel-controls .wide{grid-column:1/-1}.pixel-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.pixel-preview-card{min-width:0}.pixel-preview-head{display:flex;justify-content:space-between;gap:14px;margin-bottom:14px}.pixel-preview-wrap{min-height:420px;display:grid;place-items:center;overflow:auto;border-radius:16px;background-color:#dfe6ee;background-image:linear-gradient(45deg,#cbd5e1 25%,transparent 25%),linear-gradient(-45deg,#cbd5e1 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#cbd5e1 75%),linear-gradient(-45deg,transparent 75%,#cbd5e1 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0}.pixel-preview-wrap canvas{max-width:100%;max-height:70vh;image-rendering:pixelated;image-rendering:crisp-edges;box-shadow:0 12px 30px rgba(15,23,42,.18);touch-action:none}.pixel-palette{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px}.pixel-swatch{width:34px;height:34px;border:2px solid rgba(255,255,255,.75);border-radius:8px;box-shadow:2px 2px 6px rgba(15,23,42,.2);cursor:pointer}.pixel-export{display:flex;flex-wrap:wrap;align-items:end;gap:12px}.pixel-status{flex:1;min-width:220px}.pixel-note{font-size:.78rem;color:var(--muted,#64748b);line-height:1.5}.pixel-grid-toggle{display:flex!important;align-items:center;grid-template-columns:auto 1fr!important}.pixel-grid-toggle input{width:auto!important;min-height:auto!important}@media(max-width:980px){.pixel-toolbar{grid-template-columns:repeat(3,1fr)}.pixel-main{grid-template-columns:260px minmax(0,1fr)}}@media(max-width:700px){.pixel-toolbar{grid-template-columns:1fr 1fr}.pixel-main{grid-template-columns:1fr}.pixel-preview-wrap{min-height:300px}.pixel-panel{order:2}.pixel-preview-card{order:1}.pixel-export>*{flex:1 1 140px}}[data-theme=dark] .pixel-toolbar,[data-theme=dark] .pixel-panel,[data-theme=dark] .pixel-preview-card,[data-theme=dark] .pixel-export{background:#172235;box-shadow:8px 8px 18px #0a1220,-7px -7px 16px #22314a}