:root{--bg: #e0e0e0;--surface: #ffffff;--panel: #f5f5f5;--text: #222;--text-muted: #666;--text-hint: #888;--accent: #357abd;--border: #bbb;--border-light: #eee;--btn-secondary: #eee;--danger: #ff4d4d}*{border-radius:0!important;box-sizing:border-box}body{margin:0;font-family:Courier New,Courier,monospace;background:var(--bg);color:var(--text);display:flex;justify-content:center;align-items:center;min-height:100vh}.hidden{display:none!important}#app{width:320px;background:var(--surface);border:1px solid #999;box-shadow:0 10px 25px #00000026;display:flex;flex-direction:column}.editor-main{padding:12px}.top-nav{background:var(--panel);display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-bottom:1px solid var(--border)}.brand{margin:0;font-size:.8rem;font-weight:700;letter-spacing:1px;color:var(--text-muted)}.session-controls button{padding:2px 8px;font-size:.7rem;background:var(--surface);border:1px solid var(--border);color:#444}.session-controls button:hover{background:var(--accent);border-color:var(--accent);color:var(--surface)}.project-header{margin-bottom:12px}.project-header input{width:100%;padding:8px;background:var(--surface);border:1px solid var(--border);color:var(--text);font-size:.9rem;text-align:center}.canvas-area{margin-bottom:12px;text-align:center}.canvas-container{display:inline-block;padding:4px;background:var(--surface);border:1px solid var(--border);line-height:0}canvas{width:256px;height:256px;background:var(--surface);border:1px solid var(--border-light);image-rendering:pixelated;cursor:crosshair;touch-action:none}.hint{margin-top:6px;font-size:.7rem;color:var(--text-hint);text-transform:uppercase}.toolbar{display:flex;flex-direction:column;gap:12px}.color-section{display:flex;align-items:center;gap:8px;padding:6px;background:var(--panel);border:1px solid var(--border)}#color-picker{width:32px;height:32px;padding:0;background:var(--surface);border:1px solid var(--border);cursor:pointer;flex-shrink:0}#color-picker::-webkit-color-swatch-wrapper{padding:0}#color-picker::-webkit-color-swatch{border:none}.palette{display:flex;gap:3px;flex-wrap:wrap}.swatch{width:18px;height:18px;border:1px solid rgba(0,0,0,.1);cursor:pointer}.swatch:hover{border-color:var(--text)}.action-section{display:flex;gap:1px}.action-section button{flex:1;padding:10px;font-size:.8rem;font-weight:700;border:1px solid var(--border)}button.primary{background:var(--accent);color:var(--surface);border-color:var(--accent)}button.secondary{background:var(--btn-secondary);color:var(--text-muted)}#btn-clear,#btn-download{max-width:80px}button:active{filter:brightness(.9)}.gallery-section{margin-top:16px;padding-top:12px;border-top:1px dashed var(--border)}.section-header h3{margin:0 0 8px;font-size:.75rem;color:var(--text-hint);text-transform:uppercase}.artworks-list{list-style:none;padding:0;max-height:120px;overflow-y:auto;border:1px solid var(--border)}.artworks-list li{display:flex;justify-content:space-between;align-items:stretch;padding:0;background:var(--surface);border-bottom:1px solid var(--border-light);font-size:.8rem;color:#444}.artworks-list li:last-child{border-bottom:none}.art-info{flex-grow:1;display:flex;justify-content:space-between;align-items:center;padding:8px;cursor:pointer}.art-info:hover{background:var(--panel);color:var(--accent)}.btn-delete{width:40px;background:transparent;border:none;border-left:1px solid var(--border-light);color:#ccc;font-size:1.2rem;display:flex;justify-content:center;align-items:center;cursor:pointer}.btn-delete:hover{background:#fff0f0;color:var(--danger)}dialog{width:280px;padding:20px;background:var(--surface);border:1px solid var(--text);color:var(--text);box-shadow:0 15px 50px #0000004d}dialog::backdrop{background:#ffffffb3}#auth-form{display:flex;flex-direction:column;gap:10px;margin-top:15px}#auth-form input{padding:10px;background:var(--surface);border:1px solid var(--border);color:var(--text);font-size:.8rem}.auth-buttons{display:flex;gap:4px}.auth-buttons button{flex:1;padding:8px;font-size:.8rem}button.outline{background:transparent;border:1px solid var(--accent);color:var(--accent)}button.text-link{background:transparent;border:none;color:var(--text-hint);font-size:.7rem;cursor:pointer}@media(max-width:480px){body{align-items:flex-start}#app{width:100%;min-height:100dvh;border:none;box-shadow:none}.editor-main{flex-grow:1;display:flex;flex-direction:column}.gallery-section{flex-grow:1}.artworks-list{max-height:none}}