*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:#f5f5f5;color:#333}.app{min-height:100vh;display:flex;flex-direction:column}.app-header{background:#1a1a2e;color:#fff;padding:1.5rem 2rem}.app-header h1{font-size:1.5rem;font-weight:600}.app-header .subtitle{color:#aaa;font-size:.875rem;margin-top:.25rem}.app-body{display:flex;flex:1;gap:0}.sidebar{width:260px;background:#fff;border-right:1px solid #e0e0e0;padding:1.25rem;flex-shrink:0}.sidebar-section{margin-bottom:1.5rem}.sidebar-section h3{font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:#888;margin-bottom:.75rem}.sidebar-section label{display:block;font-size:.85rem;margin-bottom:.5rem}.sidebar-section input[type=number],.sidebar-section input[type=text]{display:block;width:100%;padding:.4rem .5rem;border:1px solid #ccc;border-radius:4px;font-size:.85rem;margin-top:.25rem}.sidebar-section input[type=file]{font-size:.8rem;margin-bottom:.5rem}.mode-buttons{display:flex;flex-direction:column;gap:.4rem}.mode-buttons button{padding:.5rem .75rem;border:1px solid #ccc;border-radius:4px;background:#fff;color:#333;font-size:.85rem;cursor:pointer;text-align:left;transition:all .15s}.mode-buttons button:hover:not(.active){background:#f0f0f0}.mode-buttons button.active{background:#1a1a2e;color:#fff;border-color:#1a1a2e}.canvas-area{flex:1;padding:1.5rem;display:flex;align-items:flex-start;justify-content:center}.placeholder{color:#999;font-size:1rem;margin-top:4rem}.painter-wrapper{display:flex;flex-direction:column;align-items:center;gap:1rem}.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;background:#fff;padding:.75rem 1rem;border-radius:6px;border:1px solid #e0e0e0;box-shadow:0 1px 3px #0000000f}.toolbar-group{display:flex;align-items:center;gap:.4rem}.toolbar-group label{display:flex;align-items:center;gap:.4rem;font-size:.8rem;color:#555;white-space:nowrap}.toolbar-group input[type=color]{width:32px;height:28px;border:1px solid #ccc;border-radius:4px;padding:1px;cursor:pointer}.toolbar-group input[type=range]{width:100px}.toolbar-group select{padding:.3rem .4rem;border:1px solid #ccc;border-radius:4px;font-size:.8rem;background:#fff}.toolbar-actions{margin-left:auto;gap:.5rem}button{padding:.4rem .9rem;border:none;border-radius:4px;background:#1a1a2e;color:#fff;font-size:.8rem;cursor:pointer;transition:background .15s}button:hover{background:#16213e}button:disabled{opacity:.5;cursor:not-allowed}button.secondary{background:#e0e0e0;color:#333}button.secondary:hover{background:#d0d0d0}.download-link{display:inline-block;padding:.4rem .9rem;border-radius:4px;background:#2e7d32;color:#fff;font-size:.8rem;text-decoration:none;transition:background .15s}.download-link:hover{background:#1b5e20}.canvas-frame{border:1px solid #ccc;border-radius:4px;display:inline-block;background:#fff;box-shadow:0 2px 8px #00000014}