:root{--bg:#1e1e24;--bg-card:#2b2b36;--bg-surface:#3b3b4a;--text:#f8f8f2;--text-muted:#8b8b9e;--primary:#ff4757;--border:#4b4b5a;--font:'Inter',sans-serif;--font-heading:'Outfit',sans-serif}
[data-theme="light"]{--bg:#f1f2f6;--bg-card:#ffffff;--bg-surface:#dfe4ea;--text:#2f3542;--text-muted:#747d8c;--border:#ced6e0}
*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font);background:var(--bg);color:var(--text);height:100vh;overflow:hidden;display:flex;flex-direction:column}
.container{max-width:1400px;margin:0 auto;padding:0 1.5rem}.mt-2{margin-top:0.5rem}.mt-4{margin-top:1.5rem}.mb-1{margin-bottom:0.25rem}.w-100{width:100%}.flex-bw{display:flex;justify-content:space-between;align-items:center}.text-xs{font-size:0.75rem}.text-muted{color:var(--text-muted)}
.navbar{padding:0.75rem 0;border-bottom:1px solid var(--border);background:var(--bg-card);flex-shrink:0}.nav-inner{display:flex;justify-content:space-between;align-items:center}.brand{font-weight:700;font-size:1.3rem;color:var(--text);text-decoration:none;font-family:var(--font-heading)}.brand span{color:var(--primary)}.nav-links{display:flex;gap:1.5rem;align-items:center}.nav-links a{color:var(--text-muted);text-decoration:none;font-weight:500}.kofi-link{color:#ff5e5b!important}.theme-btn{border:1px solid var(--border);border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:transparent;color:var(--text);cursor:pointer}
.btn{font-family:var(--font);font-weight:600;padding:0.6rem 1rem;border:none;border-radius:6px;cursor:pointer;transition:all 0.2s}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{opacity:0.9}.btn-secondary{background:var(--bg-surface);color:var(--text);border:1px solid var(--border)}.btn-secondary:hover{border-color:var(--primary)}.btn-sm{padding:0.4rem 0.8rem;font-size:0.85rem}
.editor-layout{display:flex;flex:1;overflow:hidden}
.toolbar{width:250px;background:var(--bg-card);border-right:1px solid var(--border);padding:1.5rem;overflow-y:auto;display:flex;flex-direction:column;flex-shrink:0}
.tool-group{display:grid;grid-template-columns:repeat(3,1fr);gap:0.5rem}.tool-btn{background:var(--bg-surface);border:1px solid var(--border);border-radius:8px;font-size:1.2rem;padding:0.75rem;cursor:pointer;transition:all 0.2s}.tool-btn:hover{border-color:var(--primary)}.tool-btn.active{background:rgba(255,71,87,0.1);border-color:var(--primary);color:var(--primary)}
.color-picker-input{width:100%;height:40px;padding:0;border:none;border-radius:8px;cursor:pointer;background:none}
.palette-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.palette-swatch{aspect-ratio:1;border-radius:4px;cursor:pointer;border:2px solid transparent;transition:transform 0.1s}.palette-swatch:hover{transform:scale(1.1);border-color:var(--text)}
.canvas-container{flex:1;background:var(--bg);display:flex;align-items:center;justify-content:center;overflow:auto;padding:2rem}
.canvas-wrapper{background:#fff;border-radius:2px;box-shadow:0 10px 30px rgba(0,0,0,0.3);position:relative;cursor:crosshair;background-image:linear-gradient(45deg,#ccc 25%,transparent 25%,transparent 75%,#ccc 75%,#ccc),linear-gradient(45deg,#ccc 25%,transparent 25%,transparent 75%,#ccc 75%,#ccc);background-size:20px 20px;background-position:0 0,10px 10px}
#pixelCanvas{display:block;image-rendering:pixelated;width:512px;height:512px}